/** Shopify CDN: Minification failed

Line 1172:21 Expected identifier but found whitespace
Line 1173:12 Unexpected "{"
Line 1174:20 Expected ":"
Line 3656:21 Expected identifier but found whitespace
Line 3657:12 Unexpected "{"
Line 3658:20 Expected ":"
Line 3671:21 Expected identifier but found whitespace
Line 3672:12 Unexpected "{"
Line 3673:20 Expected ":"

**/
/* General display control */
.displayBlock {
    display: block !important;
}

/* Device display control */

@media screen and (max-width: 589px) {
    .mobile-hide {
        display: none !important;
    }
}

@media screen and (min-width: 590px) {
    .desktop-hide {
        display: none !important;
    }
}

/* Margin Helpers */

.mt0 {
    margin-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mtHalf {
    margin-top: 0.5em !important;
}

.mbHalf {
    margin-bottom: 0.5em !important;
}

.mt1 {
    margin-top: 1em !important;
}

.mb1 {
    margin-bottom: 1em !important;
}

.mt1p5 {
    margin-top: 1.5em !important;
}

.mb1p5 {
    margin-bottom: 1.5em !important;
}

.mt2 {
    margin-top: 2em !important;
}

.mb2 {
    margin-bottom: 2em !important;
}

.mt3 {
    margin-top: 3em !important;
}

.mb3 {
    margin-bottom: 3em !important;
}

.mt4 {
    margin-top: 4em !important;
}

.mb4 {
    margin-bottom: 4em !important;
}

.mt5 {
    margin-top: 5em !important;
}

.mb5 {
    margin-bottom: 5em !important;
}

.mt6 {
    margin-top: 6em !important;
}

.mb6 {
    margin-bottom: 6em !important;
}

.rte-mb0>p {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 589px) {
    .mt0-m {
        margin-top: 0 !important;
    }

    .mb0-m {
        margin-bottom: 0 !important;
    }

    .mtHalf-m {
        margin-top: 0.5em !important;
    }

    .mbHalf-m {
        margin-bottom: 0.5em !important;
    }

    .mt1-m {
        margin-top: 1em !important;
    }

    .mb1-m {
        margin-bottom: 1em !important;
    }

    .mt1p5-m {
        margin-top: 1.5em !important;
    }

    .mb1p5-m {
        margin-bottom: 1.5em !important;
    }

    .mt2-m {
        margin-top: 2em !important;
    }

    .mb2-m {
        margin-bottom: 2em !important;
    }

    .mt3-m {
        margin-top: 3em !important;
    }

    .mb3-m {
        margin-bottom: 3em !important;
    }

    .mt4-m {
        margin-top: 4em !important;
    }

    .mb4-m {
        margin-bottom: 4em !important;
    }

    .mt5-m {
        margin-top: 5em !important;
    }

    .mb5-m {
        margin-bottom: 5em !important;
    }

    .mt6-m {
        margin-top: 6em !important;
    }

    .mb6-m {
        margin-bottom: 6em !important;
    }

    .rte-mb0-m>p {
        margin-bottom: 0 !important;
    }
}

/* Padding Helpers */
.pt0 {
    padding-top: 0 !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pt1 {
    padding-top: 1em !important;
}

.pb1 {
    padding-bottom: 1em !important;
}

.pt2 {
    padding-top: 2em !important;
}

.pb2 {
    padding-bottom: 2em !important;
}

.pt3 {
    padding-top: 3em !important;
}

.pb3 {
    padding-bottom: 3em !important;
}

.pt4 {
    padding-top: 4em !important;
}

.pb4 {
    padding-bottom: 4em !important;
}

.pt5 {
    padding-top: 5em !important;
}

.pb5 {
    padding-bottom: 5em !important;
}

.pt6 {
    padding-top: 6em !important;
}

.pb6 {
    padding-bottom: 6em !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl10p {
    padding-left: 10px;
}

.pr0 {
    padding-right: 0 !important;
}

@media screen and (max-width: 589px) {
    .pt0-m {
        padding-top: 0 !important;
    }

    .pb0-m {
        padding-bottom: 0 !important;
    }

    .pt1-m {
        padding-top: 1em !important;
    }

    .pb1-m {
        padding-bottom: 1em !important;
    }

    .pt2-m {
        padding-top: 2em !important;
    }

    .pb2-m {
        padding-bottom: 2em !important;
    }

    .pt3-m {
        padding-top: 3em !important;
    }

    .pb3-m {
        padding-bottom: 3em !important;
    }

    .pt4-m {
        padding-top: 4em !important;
    }

    .pb4-m {
        padding-bottom: 4em !important;
    }

    .pt5-m {
        padding-top: 5em !important;
    }

    .pb5-m {
        padding-bottom: 5em !important;
    }

    .pt6-m {
        padding-top: 6em !important;
    }

    .pb6-m {
        padding-bottom: 6em !important;
    }

    .pl0-m {
        padding-left: 0 !important;
    }
}

/* Opacity Helpers */

.t80 {
    opacity: .8 !important;
}

.t60 {
    opacity: .6 !important;
}

.t40 {
    opacity: .4 !important;
}

/* Color Helpers */

.color-button,
.rte.color-button p {
    color: var(--colorBtnPrimary) !important;
}

.color-title,
.rte.color-title p {
    color: var(--colorTitle) !important;
}

.color-text,
.rte.color-text p {
    color: var(--colorTextBody) !important;
}

.color-bg,
.rte.color-bg p {
    color: var(--colorBody) !important;
}

.color-bg-alt,
.rte.color-bg-alt p {
    color: var(--colorBodyAlt) !important;
}

.bg--color-bg {
    background-color: var(--colorBody) !important;
}

.bg--color-bg-alt {
    background-color: var(--colorBodyAlt) !important;
}

.bg--color-title {
    background-color: var(--colorTitle) !important;
}

.bg--color-button {
    background-color: var(--colorBtnPrimary) !important;
}

.bg--color-text {
    background-color: var(--colorTextBody) !important;
}

.bg--color-border {
    background-color: var(--colorBorder) !important;
}

/* Section spacing */

.section-padded {
    padding: 100px 0;
}

@media screen and (max-width: 589px) {
    .section-padded {
        padding: 60px 0;
    }
}

/* Type Styling */

.subtitle--general {
    font-family: var(--typeBaseSecondary), var(--typeBaseFallback);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: var(--typeBaseLineHeight);
    color: var(--colorBtnPrimary);
    font-size: 1.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.subtitle--general.subtitle--small {
    font-size: 0.9em;
}

.hero__subtitle.normal--case {
    text-transform: none;
    letter-spacing: 0;
}

.subheading.no-spacing {
    letter-spacing: 0 !important;
}

.font-title {
    font-family: var(--typeHeaderPrimary) !important;
    font-weight: var(--typeHeaderWeight) !important;
}

/* -------------------------------------------------------- */

/*                     General Overrides                    */

/* -------------------------------------------------------- */

div[data-section-id="store-availability"] {
    display: none;
}

.shopify-payment-terms.product__policies {
    margin-top: 1.5em;
}

.relativize {
    position: relative !important;
}

/* -------------------------------------------------------- */

/*                    YotPo Style Overrides                 */

/* -------------------------------------------------------- */

.yotpo-review-content span.sr-only[aria-hidden="true"] {
    display: none !important;
}

.yotpo-floating-tab-text,
.yotpo-smart-topic-filter,
.yotpo-form-label,
.yotpo-modal-header,
.yotpo-file-input-headline,
.yotpo-checkbox-link {
    font-family: var(--typeHeaderPrimary) !important;
    font-weight: 400 !important;
}

label.yotpo-upload-label {
    font-family: var(--typeBasePrimary);
    font-weight: 700 !important;
}

.yotpo-form-label,
.yotpo-file-input-headline {
    margin-bottom: 0 !important;
    font-size: 12px !important;
    color: var(--colorTitle) !important;
}

.yotpo-input-wrapper input,
.yotpo-input-wrapper input::placeholder,
.yotpo-input-wrapper textarea,
.yotpo-input-wrapper textarea::placeholder {
    font-family: var(--typeBasePrimary) !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

header.yotpo-modal-header {
    border-bottom: 1px solid var(--colorBorder) !important;
}

.yotpo-no-matching-reviews-primary {
    font-size: 1.25em !important;
    font-family: var(--typeHeaderPrimary) !important;
    color: var(--colorTitle) !important;
}

.yotpo-smart-topic-filter {
    transition: all 0.15s ease-in-out !important;
}

.yotpo-score-option .yotpo-score,
.yotpo-dropdown-closable .yotpo-dropdown-content-wrapper .yotpo-dropdown-option,
.yotpo-new-input-message,
.yotpo-review-form .form-footer h6,
.yotpo-new-input-validation {
    font-family: var(--typeBasePrimary) !important;
}

.yotpo-review-form .form-footer h6 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.yotpo-dropdown-closable .yotpo-dropdown-content-wrapper .yotpo-dropdown-option {
    color: var(--colorTextBody) !important;
}

.yotpo-smart-topics-headline {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-size: 12px !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
}

.yotpo-reviewer-verified-buyer-text {
    font-family: var(--typeBasePrimary) !important;
    font-weight: 700 !important;
}

.yotpo-date-format {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
}

.yotpo-base-layout {
    width: 100% !important;
}

.yotpo-main-layout.yotpo-main-reviews-widget .yotpo-head {
    display: none !important;
}

.yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel {
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--colorTitle) !important;
    text-transform: uppercase !important;
}

span.yotpo-star-rating-reviews-summary-text {
    font-family: var(--typeBasePrimary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--colorTextBody) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.yotpo-summary-header .yotpo-summary-header-title {
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.yotpo-single-summary-container .yotpo-summary-title .yotpo-summary-topic {
    font-family: var(--typeHeaderPrimary) !important;
    font-weight: 400 !important;
}

.yotpo-widget-instance .yotpo-reviews-main-widget .yotpo-main-widget-layout button.yotpo-new-review-btn.yotpo-btn-s,
.yotpo-clear-filters-btn,
.yotpo-new-review-submit {
    font-family: var(--typeBaseSecondary) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    padding: 9px 20px !important;
    font-size: 16px !important;
}

.yotpo-reviewer-details-verified {
    padding-top: 0 !important
}

.yotpo-reviewer-verified-buyer-text {
    font-family: var(--typeBaseSecondary) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.yotpo-new-review-submit {
    background-color: var(--colorBtnPrimary) !important;
}

.yotpo-widget-instance .yotpo-reviews-main-widget .yotpo-main-widget-layout,
.yotpo-widget-instance .yotpo-reviews-main-widget .yotpo-main-widget-layout .yotpo-bottom-line-text,
.yotpo-read-more-text {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
}

.yotpo-device-desktop .yotpo-review-form .yotpo-new-review-headline,
.yotpo-device-laptop .yotpo-review-form .yotpo-new-review-headline,
.yotpo-display-l .yotpo-review-form .yotpo-new-review-headline,
.yotpo-display-m .yotpo-review-form .yotpo-new-review-headline,
.yotpo-device-desktop .yotpo-review-form .yotpo-new-review-content,
.yotpo-device-laptop .yotpo-review-form .yotpo-new-review-content,
.yotpo-display-l .yotpo-review-form .yotpo-new-review-content,
.yotpo-display-m .yotpo-review-form .yotpo-new-review-content {
    min-height: auto !important;
    margin-bottom: 1em !important;
}

.yotpo-widget-instance .yotpo-reviews-main-widget .yotpo-main-widget-layout .yotpo-bottom-line-text {
    margin-top: 5px !important;
}

.yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-title,
.yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-title,
.yotpo-reviewer-name {
    font-family: var(--typeHeaderPrimary) !important;
    color: var(--colorTitle) !important;
}

.yotpo-bottom-line .yotpo-bottom-line-left-panel.yotpo-bottom-line-score {
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    color: var(--colorTitle) !important;
}

.yotpo-review-rating-title {
    display: block !important;
}

.yotpo-star-rating.yotpo-review-star-rating+.yotpo-review-title {
    margin-top: 5px !important;
    margin-left: 0 !important;
}

a.yotpo-read-more {
    font-size: 12px !important;
    font-weight: 700 !important;
    width: fit-content !important;
    display: block !important;
    margin-left: 0 !important;
    margin-top: 5px !important;
    font-family: var(--typeBasePrimary) !important;
}

.yotpo-smart-topics-see-more-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorBtnPrimary) !important;
}

.yotpo-dropdown-closable {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTitle) !important;
}

.yotpo-dropdown-closable span.yotpo-dropdown-placeholder,
.yotpo-matched-reviews,
.yotpo-horizontal-pagination .yotpo-reviews-pagination-item {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
}

.yotpo-horizontal-pagination .selected {
    color: white !important;
    font-weight: 700 !important;
}

button.yotpo-clear-filters {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorBtnPrimary) !important;
    font-size: 12px !important;
}

.yotpo-search-filter .yotpo-search-label .yotpo-search-input,
.yotpo-filter-select,
.yotpo-media-select {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
    border-radius: 5px !important;
}

.yotpo-radio-base svg path {
    fill: var(--colorBtnPrimary) !important;
}

.yotpo-seo-page-layout {
    margin: auto 0 !important;
}

.yotpo-seo-page-layout .yotpo-head {
    display: none !important;
}

.ugc-storefront-widgets-tabs-container__tab {
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

.ugc-storefront-widgets-tabs-container__tab.selected {
    color: var(--colorBtnPrimary) !important;
    border-bottom: 1px solid var(--colorBtnPrimary) !important;
}

.yotpo-star-rating.yotpo-review-star-rating .star-container svg.yotpo-star-rating-icon.yotpo-sr-star-full path,
.yotpo-star-rating-icon.yotpo-sr-star-full .star-container svg path {
    fill: var(--colorBtnPrimary) !important;
    stroke: var(--colorBtnPrimary) !important;
}


.yotpo-star-rating.yotpo-review-star-rating .star-container svg.yotpo-star-rating-icon.yotpo-sr-star-empty path,
.yotpo-star-rating-icon.yotpo-sr-star-full .star-container svg path {
    stroke: var(--colorBtnPrimary) !important;
}

.yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review),
.yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) {
    column-gap: 10px !important;
}

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

    .yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review),
    .yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) {
        flex-direction: column !important;
    }
}

.yotpo-reviews-seo-pagination-item.yotpo-pagination-number,
.yotpo-reviews-seo-pagination-item {
    border-bottom: none !important;
}

svg.yotpo-star-rating-icon.yotpo-sr-star-full path {
    fill: var(--colorBtnPrimary) !important;
    stroke: var(--colorBtnPrimary) !important;
}

.yotpo-reviews-tab-floating-tab {
    top: 75% !important;
}

@media screen and (max-width: 589px) {
    .yotpo-reviews-tab-floating-tab {
        top: 65% !important;
    }
}

.yotpo-reviews-tab-floating-tab svg.yotpo-star-rating-icon.yotpo-sr-star-full path {
    fill: white !important;
    stroke: white !important;
}

svg.yotpo-star-rating-icon.yotpo-sr-star-empty path {
    stroke: var(--colorBtnPrimary) !important;
}

svg.yotpo-star-rating-icon.yotpo-sr-star-half path {
    stroke: var(--colorBtnPrimary) !important;
    fill: var(--colorBtnPrimary) !important;
}

a.yotpo-text-link-name {
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1e, !important;
}

.yotpo-bottom-line-summary .yotpo-bottom-line-text {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
    margin-top: 5px !important;
}

.yotpo-button-icon-text,
.yotpo-star-rating-reviews-summary-text {
    font-family: var(--typeBaseSecondary) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

.reviews-tab-drawer .yotpo-headline,
.reviews-tab-drawer .yotpo-review-title.yotpo-reviews-tab-review-title {
    font-family: var(--typeHeaderPrimary) !important;
}

.yotpo-text-link.yotpo-review-related-product .yotpo-text-link-name {
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--colorBtnPrimary) !important;
}

.yotpo-text-link.yotpo-review-related-product .yotpo-text-link-title,
.yotpo-review-votes-text,
.yotpo-review-votes-number.unselectable {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorTextBody) !important;
}

.yotpo-display-s .yotpo-review .yotpo-review-center-panel .yotpo-review-title,
.yotpo-media-modal .yotpo-review .yotpo-review-center-panel .yotpo-review-title {
    font-family: var(--typeHeaderPrimary) !important;
    color: var(--colorTitle) !important;
}

.yotpo-new-review-btn {
    border-radius: 3px !important;
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.yotpo-vertical-pagination .yotpo-reviews-seo-pagination-item {
    border: 2px solid var(--colorBtnPrimary) !important;
    border-radius: 3px !important;
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--colorBtnPrimary) !important;
    padding: 8px 12px !important;
    height: auto !important;
}

/* External components */

.gorgias-chat-key-eam2gc {
    z-index: 5 !important;
}

/* General */

img.logo-icon--svg {
    width: 100%;
    max-width: 30px;
    height: auto;
}

@media screen and (max-width: 589px) {
    img.logo-icon--svg {
        max-width: 20px;
    }

}

#shopify-section-header div[data-section-id="header"] {
    position: relative;
}

@media screen and (max-width: 589px) {
    .site-header__logo-link>img {
        max-width: 60px;
    }

    .site-header__logo-link.logo--has-inverted>img {
        max-width: 20px;
    }
}

.header-wrapper .site-header.site-header--stuck .site-header__logo-link.logo--color {
    display: none;
}

.header-wrapper .site-header:not(.site-header--stuck) .logo--has-full {
    display: none;
}

.header-wrapper:not(.header-wrapper--overlay.is-light) .site-header {
    -webkit-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Header & Menus */

.megamenu__col-title a {
    font-family: var(--typeHeaderPrimary);
    font-weight: var(--typeHeaderWeight);
}

.account-icon {
    position: relative;
    cursor: pointer;
}

.account-icon .actions-wrap {
    display: none;
    padding: 25px 30px;
    background: var(--colorBodyAlt);
    position: absolute;
    z-index: 6;
    min-width: 200px;
    top: 60px;
    left: -15px;
    opacity: 0;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    transition: opacity 0.15s ease-in-out;
}

.account-icon .actions-wrap {
    cursor: pointer;
}

.account-icon.show-actions .actions-wrap {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.account-action-link {
    font-size: 16px;
    color: var(--colorTitle);
    padding: 5px 0;
    display: block;
    transition: all 0.15s ease-in-out;
    text-align: left;
}

.account-action-link:hover {
    color: var(--colorBtnPrimary);
}

.site-nav__dropdown-link.site-nav__dropdown-link--top-level.site-nav__dropdown-link--mega {
    color: var(--colorBtnPrimary);
}

/* Nav Drawer Customizations */

.nav-drawer--bottom {
    position: fixed;
    bottom: 0;
    display: block;
    width: calc(100% - 50px);
    padding: 15px 0 25px 0;
    background-color: var(--colorBodyAlt);
    border-top: 1px solid var(--colorDrawerBorder);
}

.nav-drawer--account-links {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--colorDrawerBorder);
    display: flex;
    justify-content: space-evenly;
}

.nav-drawer--account-button {
    display: block;
    width: 100%;
    padding: 0 5px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}

.nav-drawer--bottom .mobile-nav__social {
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    padding-top: 15px;
}

.nav-drawer--bottom .mobile-nav__social li {
    margin: 0;
    display: block;
    opacity: 0.6;
}

.nav-drawer--bottom .mobile-nav__social a {
    padding: 0;
    color: var(--colorTextBody);
}

/* Footer Customizations */

.page-width .footer-wrapper {
    display: block;
    width: 100%;
    border-top: 2px solid var(--colorBorder);
    border-bottom: 2px solid var(--colorBorder);
    padding-top: 4em;
    padding-bottom: 4em;
}

@media screen and (max-width: 589px) {
    .page-width .footer-wrapper:not(.footer-social-wrapper) {
        padding-bottom: 0;
    }
}

.page-width .footer-wrapper.footer-social-wrapper {
    border: 0px solid transparent;
    padding-top: 0;
}

.footer-social-wrapper #insta-feed {
    margin-bottom: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}

@media screen and (min-width: 1620px) {
    #insta-feed {
        min-height: calc(1540px / 4);
    }
}

@media screen and (max-width: 1619px) and (min-width: 590px) {
    #insta-feed {
        min-height: calc((100vw - 80px) / 4);
    }
}

@media screen and (max-width: 589px) {
    #insta-feed {
        min-height: calc(100vw - 40px);
    }

}

.footer-social-wrapper #insta-feed>h2,
.footer-social-wrapper #insta-feed .slider-arrow {
    display: none !important;
}

.footer-social-wrapper #insta-feed .instafeed-overlay,
.footer-social-wrapper #insta-feed .instafeed-container>img {
    width: 100% !important;
}

@media screen and (max-width: 589px) {
    .instafeed-container {
        width: 50% !important;
        padding-top: 50% !important;
    }

    .instafeed-container>div,
    .instafeed-container>img {
        height: 100% !important;
        width: 100% !important;
    }
}

/* Custom title snippet */

.title-cta-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3em;
}

@media screen and (max-width: 589px) {
    .title-cta-wrap.mobile-columns {
        flex-direction: column;
        align-items: flex-start;
    }
}

.title-cta-link {
    font-family: var(--typeBaseSecondary), var(--typeBaseFallback);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--colorBtnPrimary) !important;
    transition: all 0.15s ease-in-out;
    font-size: 18px;
    white-space: nowrap;
    cursor: pointer;
}

.title-cta-link:hover {
    padding-bottom: 5px;
    margin-bottom: -5px;
    border-bottom: 1px solid var(--colorBtnPrimary);
    opacity: 0.85;
    transition: all 0.15s ease-in-out;
}

.title-cta-link svg {
    fill: currentColor;
    margin-right: 5px;
    height: 13px;
}

.title-cta-link+.title-cta-link {
    margin-left: 1em;
}

@media screen and (max-width: 589px) {
    .title-cta-link {
        font-size: 16px;
    }

    .title-cta-link.js-drawer-open-collection-filters {
        margin-left: -5px;
    }

    .title-cta-link svg {
        height: 11px;
    }
}

.collection-title--break {
    margin-top: -1em;
    margin-bottom: 2em;
}

/* Rich text section modifications */

h1.subheading,
h2.subheading,
h3.subheading,
h4.subheading,
h5.subheading,
h6.subheading {
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-weight: 700;
    letter-spacing: var(--typeBaseSpacing);
    line-height: var(--typeBaseLineHeight);
    color: var(--colorBtnPrimary);
    font-size: 1.1em;
}

[data-type_base_accent_transform=true] .subheading {
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.rte .h1>p {
    font-size: calc(var(--typeHeaderSize) * 0.6);
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
}

@media only screen and (min-width:590px) {
    .rte .h1>p {
        font-size: var(--typeHeaderSize);
    }
}

.quick-view-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);

    background-color: {
            {
            settings.color_button | color_modify: 'alpha', 0.6
        }
    }

    ;
}

.quick-view-wrap>.quick-product__label {
    border: 2px solid var(--colorBodyAlt);
    color: var(--colorBodyAlt);
    text-transform: var(--buttonTextTransform);
    letter-spacing: var(--buttonLetterSpacing);
    border-radius: var(--buttonBorderRadius);
    font-weight: 700;
    width: auto;
    padding: 12px 30px;
    transform: translateY(0);
    position: relative;
    top: auto;
}

/* Icons with text section */

.icon-outer-wrap {
    position: relative;
}

.icon-outer-wrap>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon-outer-wrap.center-items>div {
    justify-content: center;
}

img.icon-element {
    max-width: 100%;
    max-height: 100%;
}

.icon-outer-wrap>div>img.landscape-image {
    height: auto;
    width: 100%;
}

.icon-outer-wrap>div>img.portrait-image {
    height: 100%;
    width: auto;
}

/* Breadcrumbs */

.breadcrumb {
    text-transform: uppercase;
}

.breadcrumb-current-page {
    color: var(--colorTitle);
}

/* Pickup availability */

.store-availability-title {
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    color: var(--colorTitle);
}

.js-drawer-open-availability {
    color: var(--colorBtnPrimary);
}

/* Collapsible panels */

.collapsible-trigger-btn.collapsible-trigger-btn--borders {
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.25em;
    color: var(--colorTitle);
}

.collapsible-content.collapsible-content--all.is-open {
    height: auto !important;
}

/* Share buttons */

.social-sharing__link {
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    color: var(--colorBtnPrimary);
}

.social-sharing__link .social-sharing__title {
    margin-top: 3px;
}

/* Testimonials */

.testimonial-rte>p,
.ingredients-rte>p {
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    color: var(--colorTitle);
}

.testimonials-section .section-header {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.testimonials-section .section-header>h2 .ingredients-section .section-header>h2 {
    line-height: 1.5;
}

.testimonial-meta>p,
.ingredients-meta>p {
    font-size: 0.85em;
}

@media screen and (min-width: 920px) {
    .page-width.page-width--flex-full {
        position: absolute;
        top: 0%;
        left: 0%;
        bottom: 0%;
        right: 0%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-width.page-width--flex-full>.background-media-text__inner {
        height: auto;
        position: relative;
    }

    .media-content--half {
        width: 50%;
    }

    .animation-cropper.animation-content--full,
    .animation-contents.animation-content--full {
        width: 100%;
    }

    .background-media-text__aligner.no-background-margin {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Hero Video */

@media screen and (max-width: 589px) {
    .hero__text-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        /* padding-bottom: 0; */
    }

    .hero__text-content .hero__link {
        padding-bottom: 50px;
    }
}

/* Custom Cards Section */

.overflow-hidden--full {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
}

.card-image {
    position: relative;
    display: block;
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow: hidden;
}

.card__slide .grid-product__meta {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

@media screen and (max-width: 589px) {
    .card-image {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .card__slide .grid-product__meta {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}

.article-hero--image,
.blog-featured--article {
    border-radius: 30px;
    overflow: hidden;
}

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

    .article-hero--image,
    .blog-featured--article {
        border-radius: 15px;
    }
}

.card-image>img.featured-card-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.featured-card-image-wrap {
    position: relative;
}

a.featured-card-image-wrap:hover {
    opacity: 1;
}

@media screen and (min-width: 1301px) {
    .cards-slideshow-wrap {
        max-width: 1570px;
        margin: 0 auto;
    }

    .cards-slider .flickity-viewport {
        overflow: visible;
    }
}

.cards-slider .grid__item.grid-product {
    padding-left: 15px;
    padding-right: 15px;
}

@media screen and (max-width: 959px) {
    .card__slide {
        width: 45% !important;
    }

    .cards-slider .grid__item.grid-product {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 579px) {
    .card__slide {
        width: 80vw !important;
        padding-left: 5px;
    }

    .cards-slider .grid__item.grid-product {
        padding-left: 5px;
        padding-right: 5px;
    }

    .cards-slider .grid__item.grid-product {
        padding-left: 5px;
        padding-right: 5px;
    }

    .card__slide:first-of-type.is-selected,
    .card__slide:first-of-type.is-selected~.card__slide {
        transform: translateX(10vw);
        transition: transform 0.15s ease;
    }

    .card__slide:not(.swipe-scroll):last-of-type {
        width: 90vw !important;
        padding-right: calc(10vw + 5px) !important;
    }
}

.cards-slider .flickity-prev-next-button {
    display: none;
}

.cards-outer .flickity-page-dots {
    display: none;
}

/* New custom card section */

.swipe-slideshow--wrapper {
    width: 100%;
}

.cards-slider.swipe-scoll--slider {
    height: 100%;
    position: relative;
    display: flex;
}

.card-swipe--wrap .title-cta-link {
    display: inline-block;
    margin-top: 12px;
}

.page-width.card-swipe--wrap {
    padding: 0 25px;
}

@media screen and (max-width: 959px) {
    .page-width.card-swipe--wrap {
        overflow-x: scroll;
        padding: 0 30px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .page-width.card-swipe--wrap::-webkit-scrollbar {
        display: none;
    }

    .swipe-slideshow--wrapper {
        width: min-content;
    }

    .card__slide.swipe-scroll {
        min-width: 45vw;
        float: none;
        display: block;
    }
}

@media screen and (max-width: 589px) {
    .page-width.card-swipe--wrap {
        padding: 0 10px;
    }
}

/* BG Image Blocks */

.section-flex--left,
.section-flex--right {
    display: flex;
}

.section-flex--left {
    justify-content: flex-start;
}

.section-flex--center {
    justify-content: center;
}

.section-flex--right {
    justify-content: flex-end;
}

/* -------------------------------------------------------- */

/*                Personalized product form                 */

/* -------------------------------------------------------- */

.site-header--opening .site-header__logo img.small--hide {
    max-width: 30px;
}

/* -------------------------------------------------------- */

/*                Personalized product form                 */

/* -------------------------------------------------------- */

.pet-selector-drawer a {
    color: var(--colorBtnPrimary);
    transition: opacity 0.15s ease-in-out;
}

a:hover {
    opacity: 0.6;
}

.hidden {
    display: none !important;
}

@media screen and (min-width: 580px) {
    .hidden--above-phone {
        display: none !important;
    }
}

@media screen and (max-width: 579px) {
    .hidden--phone {
        display: none !important;
    }
}

.pet-selector-drawer input[type='range'],
.form-range-wrap input[type='range'],
.health-form--group input[type='range'],
.health-form--group input[type='range'] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 50px;
    background: var(--colorBody);
    outline: none;
    margin: 10px 0;
    padding-left: 0;
    padding-right: 0;
}

.pet-selector-drawer input[type='range']::-webkit-slider-runnable-track,
.form-range-wrap input[type='range']::-webkit-slider-runnable-track,
.health-form--group input[type='range']::-webkit-slider-runnable-track,
.health-form--group input[type='range']::-webkit-slider-runnable-track {
    cursor: pointer;
}

.pet-selector-drawer input[type='range']::-webkit-slider-thumb,
.form-range-wrap input[type='range']::-webkit-slider-thumb,
.health-form--group input[type='range']::-webkit-slider-thumb,
.health-form--group input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--colorBtnPrimary);
    cursor: grab;
    transition: all 0.1s ease-in-out;
}

.pet-selector-drawer input[type='range']::-webkit-slider-thumb:active,
.form-range-wrap input[type='range']::-webkit-slider-thumb:active,
.health-form--group input[type='range']::-webkit-slider-thumb:active,
.health-form--group input[type='range']::-webkit-slider-thumb:active {
    background: var(--colorTitle);
    cursor: grabbing;
}

/* Buttons */

.save-new-pet {
    margin-top: 30px;
}

.tip-select-pet,
.delete-confirm,
.save-new-pet {
    width: 100%;
    display: block;
    border: 2px solid var(--colorBtnPrimary);
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    font-family: var(--typeBaseSecondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--colorBodyAlt);
    padding: 12px 30px;
    background-color: var(--colorBtnPrimary);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.tip-select-pet:hover,
.delete-confirm:hover,
.save-new-pet:hover {
    color: var(--colorBtnPrimary);
    background-color: var(--colorBodyAlt);
}

.tip-select-pet:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tip-add-pet,
.delete-cancel,
.cancel-new-pet {
    font-family: var(--typeBaseSecondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: 100%;
    display: block;
    border: 2px solid var(--colorBtnPrimary);
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    color: var(--colorBtnPrimary);
    padding: 12px 30px;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.tip-add-pet:hover,
.delete-cancel:hover,
.cancel-new-pet:hover {
    color: var(--colorBodyAlt);
    background-color: var(--colorBtnPrimary);
}

.save-pet-edits,
.cancel-pet-edits,
.delete-pet {
    font-family: var(--typeBaseSecondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline;
    font-weight: 700;
    padding: 0 0 3px 0;
    margin-right: 10px;
    border: none;
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.save-pet-edits {
    border-bottom: 1px solid var(--colorBtnPrimary);
    color: var(--colorBtnPrimary);
}

.cancel-pet-edits {
    border-bottom: 1px solid grey;
    color: grey;
}

.delete-pet {
    border-bottom: 1px solid red;
    color: red;
}

.save-pet-edits:hover,
.cancel-pet-edits:hover,
.delete-pet:hover {
    padding-bottom: 5px;
    margin-bottom: -2px;
    opacity: 0.6;
}

.form-outer {
    display: block;
    padding: 45px;
    background: var(--colorBody);
    border-radius: 30px;
    position: relative;
}

.personalize-input {
    border-bottom: 1px dashed grey;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.form-field-group input,
.form-field-group select {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
}

.form-field-group input:focus,
.form-field-group select:focus {
    border: 1px solid var(--colorBtnPrimary);
}

.personalize-input:hover {
    background-color: var(--colorBodyAlt);
    padding-right: 15px;
}

.personalize-input::after {
    content: "";
    width: 0;
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

.personalize-input:hover::after {
    content: "";
    display: inline-block;
    height: 0.6em;
    width: 0.6em;
    margin-left: 10px;
    background-image: url('https://cdn.iconscout.com/icon/free/png-256/edit-2653317-2202989.png');
    background-size: contain;
    opacity: 0.25;
    transition: all 0.15s ease-in-out;
}

.form-title {
    display: inline;
    font-size: 48px;
    font-weight: 400;
    padding: 0;
}

/* Pet names drawer */

.pet-list-empty {
    margin-top: 1.5em;
    text-align: center;
    padding: 0 20px;
    color: grey;
}

.pet-selector-drawer {
    visibility: hidden;
    width: 450px;
    position: fixed;
    z-index: 29;
    top: 0;
    right: 0;
    height: 100vh;
    background-color: var(--colorBodyAlt);
    transform: translateX(100%);
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    transition: all 0.35s ease-in-out;
    background-color: var(--colorBodyAlt);
}

@media screen and (max-width: 449px) {
    .pet-selector-drawer {
        width: 100vw;
    }
}

.pet-selector-drawer.show-init {
    visibility: visible;
    transition: all 0.35s ease-in-out;
}

.pet-selector-drawer.show-init.show-tip {
    transform: translateX(0);
    transition: all 0.35s ease-in-out;
}

.names-tip-title {
    display: block;
    border-bottom: 1px solid var(--colorBorder);
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 25px;
}

.names-tip-title.delete-title {
    border-bottom: 0px solid transparent;
    padding-bottom: 0;
    margin-bottom: 40px;
    font-size: 18px;
}

.pet-name {
    font-size: 18px;
    color: var(--colorTitle);
}

.pet-name-option.checkbox-wrap.placeholder-option {
    display: none;
}

.edit-pet-form {
    display: none;
    margin-top: 15px;
    margin-bottom: 25px;
    padding-left: 25px;
}

.edit-pet-form.show-edit-form {
    display: block;
}

.pet-names-list {
    padding: 0;
    margin-left: 0;
}

.pet-name-option {
    list-style-type: none;
}

.checkbox-wrap {
    position: relative;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.checkbox-wrap.option-selected {
    background-color: honeydew;
}

.checkbox-wrap input[type="text"],
.checkbox-wrap input[type="number"],
.checkbox-wrap select,
.pet-selector-drawer .checkbox-wrap input[type="range"] {
    transition: all 0.15s ease-in-out;
}

.checkbox-wrap.option-selected input[type="text"],
.checkbox-wrap.option-selected input[type="number"],
.checkbox-wrap.option-selected select,
.pet-selector-drawer .checkbox-wrap.option-selected input[type="range"] {
    background-color: var(--colorBodyAlt);
}

.checkbox-input {
    display: none;
}

.checkbox-label {
    width: 100%;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0;
}

.pet-details {
    display: block;
    padding-left: 30px;
    color: var(--colorTextBody);
    font-size: 14px;
    font-family: var(--typeBasePrimary);
}

.pet-breed {
    display: block;
}

.checkbox-wrap.option-selected .checkbox-label {
    color: var(--colorTitle);
}

.checkbox-label::before {
    content: '';
    display: inline-block;
    position: relative;
    top: 1px;
    height: 15px;
    width: 15px;
    border: 1px solid var(--colorTitle);
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.checkbox-input:not(:checked)+.checkbox-label:hover::before {
    background: var(--colorBtnPrimary);
    opacity: 0.5;
    transform: scale(95%);
    transition: all 0.15s ease-in-out;
}

.checkbox-input:checked+.checkbox-label::before {
    background: var(--colorBtnPrimary);
}

.checkbox-action-indicator {
    position: absolute;
    top: 6px;
    left: 1px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--colorBtnPrimary);
    z-index: 0;
    transform: scale(0%);
    opacity: 0;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.checkbox-action-indicator.transitioning {
    transform: scale(100%);
    opacity: 0.15;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.form-field-group {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-label-sm {
    font-size: 10px;
    margin-bottom: 5px;
    display: block;
    color: var(--colorBtnPrimary);
}

.weight-input-wrap {
    display: flex;
    justify-content: space-between;
}

.weight-preview-outer {
    color: var(--colorTextBody);
    font-size: 12px;
    font-weight: 700;
}

.pet-edit-button {
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: var(--typeBaseSecondary);
    top: 10px;
    right: 10px;
    text-align: right;
    color: var(--colorBtnPrimary);
    font-weight: bold;
    text-transform: uppercase;
    border: 0px solid transparent;
    padding: 0;
    margin: 0;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.15s ease-in-out;
}

.pet-edit-button:hover {
    opacity: 0.5;
    text-decoration: underline;
}

.birthday-form-group {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.birthday-form-group>div:first-of-type {
    padding-right: 10px;
    width: 70%;
}

.birthday-form-group>div:last-of-type {
    flex: 1 0 auto;
}

.birthday-form-group>div>input[type="number"] {
    display: block;
    width: 100%;
}

.birthday-form-group select {
    width: 100%;
}

.pet-drawer-close {
    position: absolute;
    top: 30px;
    right: 30px;
}

.drawer-close-icon {
    opacity: 0.5;
    background-color: transparent;
    cursor: pointer;
}

.drawer-close-icon img {
    background-color: transparent;
}

.drawer-actions-wrap {
    position: absolute;
    height: 180px;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 40px;
    background-color: var(--colorBodyAlt);
}

@media screen and (max-width: 449px) {
    .drawer-actions-wrap {
        padding: 25px;
    }
}

/* .drawer-actions-wrap.auto--height {
    height: 100px;
}

@media screen and (min-width: 590px) {
    .drawer-actions-wrap.auto--height {
        height: 130px;
    }
} */

.pet-drawer-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    max-height: 100vh;
}

.drawer-title-wrap {
    padding: 40px 40px 0 40px;
    height: 105px;
}

@media screen and (max-width: 449px) {
    .drawer-title-wrap {
        padding: 25px 25px 0 25px;
    }
}

.drawer-list-wrap {
    padding: 0 40px;
    flex: 1 0 auto;
    max-height: calc(100vh - 285px);
    overflow-y: scroll;
}

.drawer-content--solo {
    padding: 40px;
    flex: 1 0 100%;
    overflow-y: scroll;
    height: 100%;
    max-height: calc(100vh - 105px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-content--inner {
    width: 100%;
}

@media screen and (max-width: 449px) {
    .drawer-list-wrap {
        padding: 0 25px;
    }

    .drawer-content--solo {
        padding: 25px;
    }
}

.add-pet-wrapper,
.delete-confirm-wrapper {
    position: absolute;
    display: block;
    width: 100%;
    height: 85vh;
    background: var(--colorBodyAlt);
    bottom: 0;
    padding: 40px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    z-index: 4;
    overflow-y: scroll;
}

.delete-confirm-wrapper {
    z-index: 5;
}

.add-pet-wrapper.show-form,
.delete-confirm-wrapper.show-form {
    transform: translateY(0);
}

.text-input,
.select-input {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background-color: var(--colorBody);
    font-size: 16px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.add-error-message {
    display: none;
    font-size: 11px;
    color: red;
    margin: 10px 0;
}

.add-error-message.input-error {
    display: block;
}

.health-form--item .add-error-message {
    position: absolute;
    right: 0;
    top: -13px;
}

/* Predictive search component */

.hidden {
    display: none;
}

.breed-list-item label {
    font-family: var(--typeBasePrimary);
    font-size: var(--typeBaseSize);
    cursor: pointer;
}

.search-wrap {
    width: 100%;
    position: relative;
}

.search-input {
    width: 100%;
}

.result-options {
    width: 100%;
    border: 1px solid grey;
    padding: 5px 10px;
    display: none;
    max-height: 250px;
    overflow-y: scroll;
}

.search-input:focus+.result-options {
    display: block;
    position: absolute;
    width: 100%;
    background-color: var(--colorBodyAlt);
    z-index: 6;
}

.result-options>ul,
.result-options>ul>li {
    margin: 5px 0;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.result-options>ul>li {
    margin: 0;
    padding: 0;
    transition: all 0.15s ease-in-out;
    position: relative;
}

.result-options>ul>li>input[type="radio"] {
    display: none;
}

.result-options>ul>li>input[type="radio"]+label {
    content: '';
    position: relative;
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    top: 0;
    left: 0;
    display: block;
    transition: all 0.15s ease-in-out;
}

.result-options>ul>li>input[type="radio"]+label:hover {
    background: var(--colorBody);
}

.result-options>ul>li>input[type="radio"]:checked+label {
    background: var(--colorBody);
}

.result-other {
    color: orange;
}

/* Pets drawer health data */

.drawer-radio--wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 -5px 0 0;
}

.drawer-radio--wrapper input[type="radio"] {
    display: none;
}

.drawer-radio--wrapper input[type="radio"]+label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 3px);
    margin-right: 3px;
    border: 1px solid var(--colorBorder);
    color: var(--colorTextBody);
    padding: 8px 10px;
    font-family: var(--typeBodyPrimary);
    text-align: center;
    border-radius: 3px;
    background-color: var(--colorBody);
    font-size: 13px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.drawer-radio--wrapper input[type="radio"]+label:hover {
    border: 1px solid var(--colorBtnPrimary);
    color: var(--colorBtnPrimary);
}

.drawer-radio--wrapper input[type="radio"]:checked+label {
    border: 1px solid var(--colorBtnPrimary);
    color: var(--colorBodyAlt);
    background-color: var(--colorBtnPrimary);
    font-weight: 700;
}

.checkbox-wrap.option-selected .drawer-radio--wrapper input[type="radio"]+label {
    background-color: var(--colorBodyAlt);
}

.checkbox-wrap.option-selected .drawer-radio--wrapper input[type="radio"]:checked+label {
    background-color: var(--colorBtnPrimary);
}

/* Cart drawer */

.drawer .js-qty__num {
    border-radius: 3px;
}

.drawer .js-qty__adjust.js-qty__adjust--plus {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.drawer .js-qty__adjust.js-qty__adjust--minus {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

label.order-notes-label {
    color: var(--colorTextBody);
    margin-bottom: 5px;
}

#CartDrawer .btn.cart__checkout {
    margin-bottom: 0px !important;
}

#CartDrawer .dynamic-checkout__content .shopify-cleanslate {
    margin-bottom: -10px !important;
}

#CartDrawer .dynamic-checkout__content .shopify-cleanslate ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    margin-right: -10px !important;
    margin-bottom: -5px !important;
    width: calc(100% + 10px) !important;
}

#CartDrawer .dynamic-checkout__content .shopify-cleanslate ul>li {
    flex: 1 0 50%;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#CartDrawer .dynamic-checkout__content .shopify-cleanslate ul>li:nth-child(3),
#CartDrawer .dynamic-checkout__content .shopify-cleanslate ul>li:nth-child(4),
#CartDrawer .dynamic-checkout__content .shopify-cleanslate ul>li:nth-child(5) {
    display: none;
}

.dynamic-checkout__content:empty {
    display: none;
}

.cart-item--remove {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--typeBaseSecondary);
    font-weight: 600;
    /* margin-top: 6px; */
    margin-top: 0;
    text-decoration: underline;
    padding: 0;
    color: var(--colorBtnPrimary) !important;
    transition: opacity 0.15s ease-in-out;
    cursor: pointer;
}

.cart-item--remove.whistle--additional {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 700;
}

.cart-item--remove:hover {
    opacity: 0.5;
}

/* Forms & labels */

.variant-input-wrap input[type="radio"]+label,
.sp-input-wrap input[type="radio"]+label {
    border-radius: 3px;
}

.shopify-payment-button__button--unbranded {
    background-color: transparent !important;
    color: var(--colorBtnPrimary) !important;
    border: 3px solid var(--colorBtnPrimary) !important;
    transition: all 0.15s ease-in-out !important;
}

.shopify-payment-button__button--unbranded:hover {
    color: var(--colorBodyAlt) !important;
    background-color: var(--colorBtnPrimary) !important;
}

.value-label-content {
    font-size: 0.8em;
    font-weight: 400 !important;
    opacity: 0.8;
    display: block;
    margin-top: -6px;
}

/* PDP */

@media screen and (max-width: 589px) {
    .product__photos--beside {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        height: 10px;
        overflow: hidden;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller .product__thumb-item {
        width: 10px;
        height: 10px;
        margin-bottom: 5px;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller .product__thumb-item .product__thumb {
        opacity: 0.5;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller .product__thumb-item .product__thumb.is-active {
        opacity: 1;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller .product__thumb-item .image-wrap {
        padding: 0 !important;
        height: 10px !important;
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller .product__thumb-item .image-wrap>a {
        height: 10px;
        width: 10px;
        background-color: var(--colorTextBody);
    }

    .product-section:not(.pdp-2025) .product__photos--beside .product__thumbs--beside .product__thumbs--scroller .product__thumb-item .image-wrap>a>img {
        visibility: hidden !important;
        height: 10px;
        width: 10px;
    }

    .product-section:not(.pdp-2025) .product__thumbs--beside {
        display: block;
        margin-left: 0;
        flex: 0 0 10px;
    }
}

.collapsible-content .rte table.pdp-options-table,
.collapsible-content .rte table.pdp-nutrition-table,
.collapsible-content .rte table.pdp-calories-table {
    font-size: 14px;
    border-spacing: 0;
}



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

    .collapsible-content .rte table.pdp-options-table,
    .collapsible-content .rte table.pdp-nutrition-table,
    .collapsible-content .rte table.pdp-calories-table {
        font-size: 12px;
    }
}

table.pdp-options-table,
table.pdp-nutrition-table {
    border-spacing: 0;
}

.pdp-options-table,
.pdp-options-table th,
.pdp-options-table td,
.pdp-nutrition-table,
.pdp-nutrition-table th,
.pdp-nutrition-table td,
.pdp-calories-table,
.pdp-calories-table th,
.pdp-calories-table td {
    background-color: transparent;
}

.pdp-options-table th,
.pdp-nutrition-table th,
.pdp-calories-table th {
    font-family: var(--typeHeaderPrimary);
    font-weight: 400;
    color: var(--colorTitle);
    text-align: center;
    font-size: 13px;
    transition: all 0.15s ease-in-out;
}

.pdp-options-table th>span.column-header-info,
.pdp-nutrition-table th>span.column-header-info,
.pdp-calories-table th>span.column-header-info {
    font-size: 11px;
    display: block;
    opacity: 0.6;
}

.pdp-options-table td,
.pdp-nutrition-table td,
.pdp-calories-table td {
    text-align: center;
    transition: all 0.15s ease-in-out;
}

.pdp-options-table th:first-of-type,
.pdp-options-table td:first-of-type,
.pdp-nutrition-table th:first-of-type,
.pdp-nutrition-table td:first-of-type,
.pdp-calories-table th:first-of-type,
.pdp-calories-table td:first-of-type {
    text-align: left;
}

.pdp-options-table td:first-of-type,
.pdp-nutrition-table td:first-of-type,
.pdp-calories-table td:first-of-type {
    font-family: var(--typeBaseSecondary);
    color: var(--colorTitle);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.pdp-options-table col.pdp-options-first,
.pdp-nutrition-table col.pdp-options-first,
.pdp-calories-table col.pdp-options-first {
    text-align: left;
    font-weight: 700;
}

.pdp-options-table thead tr.title-row th {
    border-bottom: 1px solid var(--colorBorder);
}

.pdp-options-table tr td:last-of-type,
.pdp-options-table thead tr.title-row th:last-of-type {
    text-align: right;
}

.pdp-options-table td.highlight-basic,
.pdp-options-table th.highlight-basic,
.pdp-calories-table th.highlight-basic {
    background-color: honeydew;
    position: relative;
    z-index: 1;
}

.pdp-options-table tr:last-of-type:not(.highlight-feature) td.highlight-basic,
.pdp-nutrition-table tr:last-of-type:not(.highlight-feature) td.highlight-basic,
.pdp-calories-table tr:last-of-type:not(.highlight-feature) td.highlight-basic {
    padding-bottom: 12px;
    margin-bottom: -4px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pdp-options-table tr,
.pdp-nutrition-table tr,
.pdp-calories-table tr {
    transition: all 0.15s ease-in-out;
}

.options-categories {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-wrap: wrap;
}

.option-category {
    display: block;
    width: 40%;
    /* max-width: 240px; */
    padding: 12px 8px;
    font-family: var(--typeHeaderPrimary);
    text-align: center;
    color: var(--colorTitle);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.option-category.option-single {
    width: 66.66667%;
    max-width: 475px;
}

.option-category:after {
    content: '';
    display: block;
    margin: 0 auto;
    position: relative;
    top: 5px;
    width: calc(100% - 48px);
    height: 2px;
    background-color: var(--colorBorder);
    transition: all 0.15s ease-in-out;
}

.option-category.toggle-selected {
    background-color: honeydew;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.option-category:hover:after,
.option-category.toggle-selected:after {
    background-color: var(--colorBtnPrimary);
}

.option-category.toggle-selected:after {
    width: calc(100% - 16px);
}

table.pdp-options-table tbody>tr.highlight-feature,
table.pdp-nutrition-table tbody>tr.highlight-feature {
    background-color: var(--colorBtnPrimary);
    color: var(--colorBodyAlt);
    font-weight: 700;
    position: relative;
    z-index: 2;
    box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.2);
}

table.pdp-options-table tbody>tr.highlight-feature>td:first-child,
table.pdp-nutrition-table tbody>tr.highlight-feature>td:first-child {
    position: relative;
    z-index: 3;
}

table.pdp-options-table tbody>tr.highlight-feature>td,
table.pdp-nutrition-table tbody>tr.highlight-feature>td {
    background-color: var(--colorBtnPrimary);
    color: var(--colorBodyAlt);
    font-weight: 700;
}

table.pdp-options-table tbody>tr.highlight-feature>td:first-of-type,
table.pdp-nutrition-table tbody>tr.highlight-feature>td:first-of-type {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

table.pdp-options-table tbody>tr.highlight-feature>td:last-of-type,
table.pdp-nutrition-table tbody>tr.highlight-feature>td:last-of-type {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.featured-option-tag {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    width: 300px !important;
    font-weight: 400;
    color: var(--colorBodyAlt);
    position: relative;
}

.btn--weight-action {
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.025em;
    margin-right: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 3px;
    color: var(--colorTitle);
    border-bottom: 1px solid var(--colorTitle);
    transition: all 0.15s ease-in-out;
}

.btn--weight-action.weight-apply-suggestion {
    color: var(--colorBtnPrimary);
    border-bottom: 1px solid var(--colorBtnPrimary);
}

.btn--weight-action.weight-ignore-suggestion {
    color: var(--colorInputText);
    border-bottom: 1px solid var(--colorInputText);
}

.btn--weight-action:hover {
    opacity: 0.5;
    padding-bottom: 5px;
    margin-bottom: -2px;
}

/* Custom fresh meal plan form */

.variant-label-note {
    font-family: var(--typeBasePrimary);
    opacity: 0.8;
}

.form-options-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.form-option-button,
input[type="radio"]+label.icon-label {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(25% - 8px);
    padding: 7px 15px 7px;
    margin: 0 8px 12px 0;
    font-style: normal;
    font-size: var(--typeBaseSize);
    text-transform: none;
    background-color: var(--colorBody);
    box-shadow: 0 0 0 1px var(--colorBorder);
    transition: all .25s ease;
    overflow: hidden;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-weight: var(--typeBaseWeight);
    letter-spacing: var(--typeBaseSpacing);
    line-height: var(--typeBaseLineHeight);
    border-radius: 3px;
}

input[type="radio"]+label.icon-label {
    width: auto;
    min-width: 150px;
}

.form-option-button:not(.option-selected):hover,
input[type="radio"]:not(:checked)+label.icon-label:hover {
    opacity: 0.65;
    box-shadow: 0 0 0 1px var(--colorBtnPrimary);
}

.form-option-button.button-simple {
    display: inline-block;
    width: auto;
}

@media screen and (max-width: 589px) {
    .form-options-wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .form-options-wrap.options--simple {
        justify-content: flex-start;
    }

    .form-option-button {
        width: calc(25% - 10px);
        margin: 0 0 12px 0;
    }

    .form-options-wrap.options--simple .form-option-button {
        width: auto;
        margin: 0 8px 12px 0;
    }
}

.form-option-button>svg path,
input[type="radio"]+label.icon-label>svg path {
    stroke: var(--colorTextBody);
    transition: all 0.15s ease-in-out;
}

.form-option-button>svg.fill-version path,
input[type="radio"]+label.icon-label>svg.fill-version path {
    stroke: transparent;
    fill: var(--colorTextBody);
    transition: all 0.15s ease-in-out;
}

.form-option-button[disabled],
input[type="radio"]:disabled+label.icon-label {
    color: var(--colorBorder);
    opacity: 0.5;
    cursor: not-allowed;
}

.form-option-button.option-selected,
input[type="radio"]:checked+label.icon-label {
    background-color: var(--colorBtnPrimary);
    font-weight: 700;
    color: var(--colorBtnPrimaryText);
    box-shadow: 0 0 0 1px var(--colorBtnPrimary);
    transition: all 0.15s ease-in-out;
}

.form-option-button.option-selected>svg path,
input[type="radio"]:checked+label.icon-label>svg path {
    stroke: var(--colorBtnPrimaryText);
}

.form-option-button.option-selected>svg.fill-version path,
input[type="radio"]:checked+label.icon-label>svg.fill-version path {
    fill: var(--colorBtnPrimaryText);
}

.btn.btn--full.add-to-cart[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--colorBtnPrimary) !important;
    color: var(--colorBtnPrimaryText);
}

.option-label-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.variant__label.weight-range-label {
    font-family: var(--typeBodyPrimary);
    color: var(--colorBtnPrimary);
    text-transform: none;
    font-weight: 700;
    font-size: calc(var(--typeBaseSize)*.8);
}

.mismatch-message {
    font-size: 0.75em;
}

/* Recharge styling - Native */

.rc_layout__container {
    padding-top: 100px;
}

@media screen and (max-width: 589px) {
    .rc_layout__container {
        padding-top: 40px;
    }
}

.product-block.subscription-options>label {
    margin-bottom: 10px;
}

.main-content .rc-radio.rc-option.rc_widget__option {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 7px 15px 7px;
    margin: 0 8px 12px 0;
    font-style: normal;
    font-size: var(--typeBaseSize);
    line-height: var(--typeBaseLineHeight);
    text-transform: none;
    background-color: var(--colorBody);
    color: var(--colorTextBody);
    box-shadow: 0 0 0 1px var(--colorBorder);
    border: 0px solid transparent;
    transition: all .25s ease;
    overflow: hidden;
    border-radius: 3px;
}

.main-content .rc_widget__option__plans__dropdown.rc-selling-plans__dropdown {
    padding: 7px 30px 7px 15px;
    font-style: normal;
    font-size: var(--typeBaseSize);
    line-height: var(--typeBaseLineHeight);
    text-transform: none;
    background-color: var(--colorBody);
    box-shadow: 0 0 0 1px var(--colorBorder);
    border: 0px solid transparent;
    transition: all .25s ease;
    overflow: hidden;
    border-radius: 3px;
    color: var(--colorTextBody) !important;
    transition: all 0.15s ease-in-out;
}

.main-content .rc_widget__option__plans__dropdown.rc-selling-plans__dropdown:hover,
.main-content .rc_widget__option__plans__dropdown.rc-selling-plans__dropdown:focus {
    box-shadow: 0 0 0 1px var(--colorBtnPrimary);
}

.main-content .rc-template__button-group .rc-radio .rc-radio__label {
    line-height: var(--typeBaseLineHeight) !important;
}

.main-content .rc-radio.rc-option.rc_widget__option.rc_widget__option--active.rc-option--active {
    background-color: var(--colorTitle);
    color: var(--colorBtnPrimary);
    box-shadow: 0 0 0 1px var(--colorTitle);
    transition: all 0.15s ease-in-out;
}


.main-content .rc-radio.rc-option.rc_widget__option.rc_widget__option--active.rc-option--active .rc-option__price.rc_widget__price {
    color: var(--colorBodyAlt);
    opacity: 0.8;
    transition: all 0.15s ease-in-out;
}

.main-content .rc-radio.rc-option.rc_widget__option .rc-option__price.rc_widget__price {
    color: var(--colorTextBody);
    opacity: 0.8;
}

.main-content .rc-radio.rc-option.rc_widget__option .rc-option__text,
.main-content .rc-radio.rc-option.rc_widget__option .rc-option__discount.rc_widget__option__discount {
    font-family: var(--typeBaseSecondary), var(--typeBaseFallback);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: var(--typeBaseLineHeight);
    padding-right: 0;
}

.main-content .rc-radio.rc-option.rc_widget__option.rc_widget__option--active.rc-option--active .rc-option__text,
.main-content .rc-radio.rc-option.rc_widget__option.rc_widget__option--active.rc-option--active .rc-option__discount.rc_widget__option__discount {
    font-weight: 700;
}

.main-content .rc-radio.rc-option.rc_widget__option .rc-option__discount.rc_widget__option__discount {
    padding-left: 4px;
}

.main-content .rc-template__button-group .rc-radio .rc-option__price {
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-weight: var(--typeBaseWeight);
    font-size: 0.8em;
    font-weight: 400 !important;
    opacity: 0.8;
    display: block;
    margin-top: -6px;
}

.main-content .rc-selling-plans__label {
    color: var(--colorTextBody);
    display: inline-block;
    margin-right: 10px;
}

.main-content .rc-selling-plans {
    margin-top: 0;
}

.main-content .rc_popup__label {
    font-family: var(--typeHeaderPrimary);
}

.main-content .reload-icon {
    color: var(--colorBtnPrimary) !important;
}

.main-content .rc_popup__block {
    background-color: var(--colorBody) !important;
    border-radius: 10px !important;
    left: -30px !important;
    padding: 30px !important;
    -webkit-box-shadow: 0px 0px 25px -15px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
}

.main-content .rc_popup__block::before {
    border-bottom-color: var(--colorBody) !important;
    left: 28px !important;
}

.main-content .rc_popup__block .rc_popup__block__footer {
    display: none !important;
}

.main-content .rc_popup__block .rc_popup__how_it_works {
    color: var(--colorTextBody) !important;
}

.main-content .rc_popup__block .rc_popup__how_it_works>strong {
    display: block;
    color: var(--colorTitle) !important;
    font-family: var(--typeHeaderPrimary) !important;
    font-weight: var(--typeHeaderWeight) !important;
    font-size: 16px !important;
}

.main-content .rc_popup__block a.rc_popup__learn_more {
    color: var(--colorBtnPrimary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: underline;
    transition: all 0.15s ease-in-out;
    display: none !important;
}

.main-content .rc_popup__block a.rc_popup__learn_more:hover {
    opacity: 0.6;
}

.rc_popup__hover::after {
    top: 21px !important;
    border-bottom-color: var(--colorBody) !important;
    z-index: 1000 !important;
}

/* Blog page */

.background-media-text.blog-hero-background {
    position: relative;
}

.blog-filter--wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.blog-filter--wrap>label {
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

.blog-filter--wrap>select {
    border: 0px solid transparent;
    border-radius: 0;
    border-bottom: 2px solid var(--colorBtnPrimary);
}

@media screen and (max-width: 589px) {
    .blog-filter--wrap {
        margin-top: 10px;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .blog-filter--wrap>label {
        width: auto;
    }

    .blog-filter--wrap>select {
        flex: 1 0 auto;
    }
}

.blog--article-image-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog--article-image-inner img.portrait-image {
    min-width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
}

.blog--article-image-inner img.landscape-image {
    min-height: 100%;
    max-height: none;
    width: auto;
    max-width: none;
}

.image-wrap.article-image--outer {
    height: 0;
    padding-bottom: 66.6667%;
}

.article__grid-meta.blog--article-card-meta {
    padding: 20px 30px 30px;
    background-color: var(--colorProductCardBg);
}

@media screen and (max-width: 589px) {
    .article__grid-meta.blog--article-card-meta {
        padding: 20px;
    }
}

.article-tag-category {
    border: 1px solid var(--colorBorder);
    display: inline-block;
    padding: 2px 10px;
    margin-left: 3px;
    margin-bottom: 3px;
    border-radius: 40px;
    background-color: var(--colorBodyAlt);
    transition: all 0.15s ease-in-out;
    text-transform: capitalize;
}

.blog--article-cat-outer {
    display: flex;
    width: 100%;
}

.blog--article-cat-outer>label {
    display: inline-block;
    margin-top: 6px;
}

/* Article page */

.article-content-wrap {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
}

.article-title-content {
    position: sticky;
    top: 140px;
    display: block;
    width: 35%;
    padding-right: 15px;
    margin-bottom: 2em;
}

.article-content {
    width: 65%;
    padding-left: 15px;
}

@media screen and (max-width: 589px) {
    .article-content-wrap {
        display: block;
        width: 100%;
        flex-wrap: wrap;
    }

    .article-title-content {
        position: relative;
        top: 0;
        display: block;
        width: 100%;
        padding-right: 0;
        margin-bottom: 2em;
    }

    .article-content {
        width: 100%;
        padding-left: 0;
    }

    .article-content-wrap .social-sharing {
        text-align: left;
    }
}

.article-content .article__body.rte.rte--indented-images p img {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-bottom: 1em;
}

.article__body.rte h1>b,
.article__body.rte h2>b,
.article__body.rte h3>b,
.article__body.rte h4>b,
.article__body.rte h5>b,
.article__body.rte h6>b {
    font-weight: 400;
}

/* Slideshow component */

.hero-content-wrap {
    width: 65%;
}

.horizontal-center .hero-content-wrap {
    margin: 0 auto;
}

.horizontal-right .hero-content-wrap {
    margin-left: 50%;
}

@media screen and (max-width: 589px) {
    .hero-content-wrap {
        width: 100%;
    }

    .horizontal-right .hero-content-wrap {
        margin-left: 0;
    }
}

/* Cart Drawer */

.drawer-upsells {
    z-index: 2;
}

.secondary-drawer-title {
    font-size: 15px;
    color: var(--colorTitle);
    font-family: var(--typeBaseSecondary);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.upsell-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.upsell-item {
    display: block;
    padding: 0 5px;
    text-align: center;
    width: 50%;
}

.upsell-item--img-wrap {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}

.upsell-item--title {
    font-size: 14px;
    color: var(--colorTitle);
}

.upsell-item--cta,
.drawer a.upsell-item--link,
.remove-item--btn {
    font-size: 12px;
    margin-top: 5px;
    font-weight: bold;
    padding: 0 0 1px 0;
    color: var(--colorBtnPrimary);
    font-family: var(--typeBaseSecondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--colorBtnPrimary);
    transition: all 0.15s ease-in-out;
}

.upsell-item--cta:hover,
.drawer a.upsell-item--link:hover,
.remove-item--btn:hover {
    padding-bottom: 3px;
    margin-bottom: -2px;
    opacity: 0.7;
    color: var(--colorBtnPrimary);
}

.upsell-form-wrapper {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 40px;
    border-radius: 30px;
    background-color: var(--colorBodyAlt);
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    transform: translateY(110%);
    z-index: 1;
    transition: transform 0.45s ease-in-out;
}

.upsell-form-wrapper.show-upsell-form {
    transform: translateY(0);
}

.upsell-form-wrapper .upsell-product-meta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.upsell-form--close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 25px;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
}

.upsell-form--close:hover {
    opacity: 0.6;
}

.upsell-meta--image-wrap {
    width: 25%;
    padding-right: 10px;
}

.upsell-meta--title-wrap {
    width: 75%;
    padding-left: 10px;
}

.upsell-meta--title {
    font-size: 1.3em;
}

.upsell-form-wrapper .variant-input-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 -5px;
}

.upsell-form-wrapper .variant-input-wrap>.variant-input {
    width: 100%;
    padding: 0 5px;
}

.upsell-form-wrapper .variant-input-wrap>.variant-input>label {
    width: 100%;
}

.upsell-form-wrapper .variant-input-wrap>.variant-input>label:disabled {
    cursor: not-allowed;
}

.upsell-form-wrapper span.price {
    margin-right: 10px;
}

/* Cart drawer subscription add on */

.toggle {
    margin-top: 10px;
    position: relative;
    width: 55px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.toggle-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 20px;
    padding: 0;
    line-height: 20px;
    border: 0px solid var(--colorBodyAlt);
    border-radius: 30px;
    background-color: var(--colorModalBg);
    transition: all 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.toggle-label:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: -5px;
    background: var(--colorBodyAlt);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 31px;
    border-radius: 30px;
    box-shadow: 0 6px 12px 0px #757575;
    transition: all 0.2s ease-in-out;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: var(--colorDrawerBorder);
}

.toggle-checkbox:checked+.toggle-label,
.toggle-checkbox:checked+.toggle-label:before {
    border-color: var(--colorBtnPrimary);
}

.toggle-checkbox:checked+.toggle-label .toggle-inner {
    margin-left: 0;
}

.toggle-checkbox:checked+.toggle-label:before {
    right: 0px;
    background-color: var(--colorBtnPrimary);
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}

.drawer-sub-frequency {
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--colorBtnPrimary);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.drawer-sub-frequency:hover {
    opacity: 0.6;
    border-bottom: 1px solid var(--colorBtnPrimary);
}

.drawer-sub-toggle--wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.drawer-sub-toggle--wrap span.label {
    margin-left: 15px;
    margin-top: 6px;
}

.drawer-sub-choice--wrap {
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid var(--colorDrawerBorder);
    border-bottom: 1px solid var(--colorDrawerBorder);
}

.drawer-sub-options--wrap {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.drawer-sub--option {
    width: calc(33.33% - 8px);
    color: var(--colorTextBody);
    padding: 7px 7px;
    margin: 0;
    background-color: var(--colorBody);
    box-shadow: 0 0 0 1px var(--colorBorder);
    transition: all .25s ease;
    overflow: hidden;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease-in-out;
}

.drawer-sub--option:hover,
.drawer-sub--option.current-selection {
    background-color: var(--colorBtnPrimary);
    box-shadow: 0 0 0 1px var(--colorBtnPrimary);
    color: var(--colorBodyAlt);
}

.drawer-sub--option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.drawer-sub--option>.drawer-sub-option--value {
    display: block;
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    font-weight: var(--typeHeaderWeight);
    font-size: 1.4em;
    line-height: 1.2;
}

.drawer-sub--option>.drawer-sub-option--type {
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    opacity: 0.8;
}

/* Customer account */

.account-panel--primary,
.detail-panel {
    background-color: var(--colorBodyAlt);
    padding: 50px;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 25px -20px #000000;
    box-shadow: 0px 0px 25px -20px #000000;
    margin-bottom: 60px;
}

.account-panel--primary {
    margin-right: 15px;
}

.detail-panel {
    margin-left: 15px;
}

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

    .account-panel--primary,
    .detail-panel {
        margin: 0 0 2em 0;
        padding: 35px 25px 25px 25px;
        border-radius: 20px;
    }
}

.detail-panel.detail-panel--small {
    padding: 10px;
    border-radius: 5px;
    margin-left: 0;
}

.address-grid-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: -45px;
    margin-right: -15px;
    flex-wrap: wrap;
}

.address-wrap,
.account--pet-item-wrap {
    display: block;
    padding-right: 15px;
    padding-bottom: 45px;
}

.account--pet-item-wrap {
    width: 50%;
}

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

    .address-wrap,
    .account--pet-item-wrap {
        width: 100%;
        padding-right: 0;
        padding-bottom: 0;
        margin-bottom: 2em;
    }
}

@media screen and (max-width: 589px) {
    .address-grid-wrap {
        margin-bottom: 0;
        margin-right: 0;
    }

    .address-listing {
        font-size: 14px;
    }
}

.edit-address-panel {
    display: block;
    position: fixed;
    z-index: 29;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: all 0.45s ease-in-out;

    background-color: {
            {
            settings.color_title_text | color_modify: 'alpha', 0.8
        }
    }

    ;
    backdrop-filter: blur(3px);
}

.edit-address-panel.hide {
    display: block !important;
    visibility: hidden !important;
    transition: all 0.45s ease-in-out;

    background-color: {
            {
            settings.color_title_text | color_modify: 'alpha', 0
        }
    }

    ;
    backdrop-filter: blur(0);
}

.edit-address-panel .address-form-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    overflow-y: scroll;
    background-color: var(--colorBodyAlt);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    transform: translateY(0);
    transition: all 0.45s ease-in-out;
}

.edit-address-panel.hide .address-form-wrap {
    transform: translateY(100%);
    transition: all 0.45s ease-in-out;
}

.address-edit-toggle.edit-address--close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 30px;
    cursor: pointer;
    background-color: transparent;
    transition: opacity 0.15s ease-in-out;
}

.address-edit-toggle.edit-address--close>svg {
    fill: var(--colorBodyAlt);
    color: var(--colorBodyAlt);
    transform: scale(2);
    transform-origin: top right;
}

.address-form-container {
    padding-top: 5em;
    padding-bottom: 3em;
}

@media screen and (max-width: 589px) {
    .edit-address-panel .address-form-wrap {
        max-height: 90vh;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }

    .address-edit-toggle.edit-address--close {
        padding: 15px;
    }

    .address-edit-toggle.edit-address--close>svg {
        transform: scale(1.25);
        transform-origin: top right;
    }

    .address-form-container {
        padding-top: 25px;
    }
}

.edit-address-panel .address-edit-toggle.edit-address--close {
    opacity: 1;
    transition: opacity 0.45s ease-in-out;
}

.edit-address-panel.hide .address-edit-toggle.edit-address--close {
    opacity: 0;
}

.address-edit-toggle.edit-address--close:hover {
    opacity: 0.6;
}

.default-dog-marker {
    position: relative;
    top: 1px;
}

.account-pet-details {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 1em -5px 0 -5px;
}

.account-details--flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 1em -5px 0 -5px;
}

.account-pet-detail--item {
    display: flex;
    width: calc(50% - 10px);
    margin: 0 5px 10px 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
    background-color: var(--colorBody);
    text-align: center;
}

.account-detail-flex--item {
    display: flex;
    width: calc(50% - 10px);
    margin: 0 5px 10px 5px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 30px;
    border-radius: 5px;
    background-color: var(--colorBody);
    text-align: center;
}

@media screen and (max-width: 1269px) {
    .account-details--flex {
        flex-wrap: wrap;
    }

    .account-detail-flex--item {
        width: 50%;
        flex: 1 1 50%;
    }
}

.account-pet-label {
    font-size: 13px;
}

.account-pet-label.item-title {
    font-size: 11px;
    margin-bottom: 3px;
    color: var(--colorBtnPrimary);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.account-name-display,
.account--edit-pet {
    display: inline-block;
}

.account--edit-pet {
    font-size: 13px;
    opacity: 0.6;
    transition: all 0.15s ease-in-out;
}

.account--edit-pet:hover {
    text-decoration: underline;
    opacity: 1;
}

@media only screen and (max-width: 589px) {
    .background-media-text__container.has-mobile-image {
        height: 100%;
    }

    .background-media-text__container.has-mobile-image img {
        position: relative;
        width: 100%;
    }

    .background-media-text__container.mobile-image--full {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .background-media-text__container.mobile-image--full img {
        height: 100%;
        /* width: auto; */
    }

    .background-media-text__inner.mobile-top--spacing {
        margin-top: 34px;
    }
}

.account-panel--primary .errors {
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 0;
}

.h1>span.cancel-tag {
    display: inline-block;
    font-size: 13px;
    padding: 7px 13px 5px 13px;
    background-color: #fff6f6;
    color: #d02e2e;
    border: 1px solid #d02e2e;
    border-radius: 50px;
    font-family: var(--typeBasePrimary);
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    position: relative;
    top: -5px;
}

.account-panel--primary .note,
.detail-panel .note {
    display: inline-block;
    font-size: 13px;
    padding: 7px 13px;
    background-color: honeydew;
    color: var(--colorTitle);
    border: 1px solid var(--colorBtnPrimary);
    border-radius: 50px;
    font-family: var(--typeBasePrimary);
    text-align: center;
    min-width: 175px;
}

.account-panel--primary .note.note-simple {
    background-color: var(--colorBody);
    color: var(--colorTextBody);
    border: 1px solid var(--colorTextBody);
}

.detail-panel .note {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--colorBtnPrimary);
    font-weight: 700;
}

.account-panel--primary .note>a {
    font-weight: 700;
    color: var(--colorBtnPrimary);
}

.account-panel--primary table.full.table--responsive {
    border-spacing: 0;
}

/* .account-panel--primary table.full.table--responsive a {
    color: var(--colorBtnPrimary);
} */

.account-panel--primary table.full.table--responsive,
.account-panel--primary table.full.table--responsive td,
.account-panel--primary table.full.table--responsive th {
    background: transparent;
}

.account-panel--primary table.full.table--responsive thead,
.account-panel--primary table.full.table--responsive tfoot {
    background: var(--colorBody);
}

.account-panel--primary table.full.table--responsive th {
    font-family: var(--typeHeaderPrimary);
    font-weight: 400;
    color: var(--colorTitle);
    font-size: 13px;
}

@media screen and (min-width: 590px) {
    @media screen and (max-height: 650px) {
        .drawer-upsells {
            display: none;
        }
    }
}

@media screen and (max-width: 589px) {
    .account-panel--primary .table--responsive td {
        padding: 5px;
    }

    .account-panel--primary .note.note-simple {
        background-color: transparent;
        border: 0px solid transparent;
        padding: 0;
        text-align: left;
        min-width: none;
    }

    [data-type_header_accent_transform=true] .account-panel--primary .table--responsive td:before {
        text-transform: capitalize;
        letter-spacing: 0;
    }

    .account-panel--primary table.full.table--responsive td {
        padding-left: 0;
        padding-right: 0;
    }

    .account-panel--primary table.full.table--responsive tfoot td {
        padding-left: 5px;
        padding-right: 5px;
    }

    .account-panel--primary .table--responsive td:before {
        margin-top: 8px;
    }

    .account-panel--primary .table--responsive td[data-label="Product"] {
        text-align: left !important;
        float: none;
    }

    .account-panel--primary .table--responsive td[data-label="Product"]:before {
        display: none;
    }
}

/* -------------------------------------------------------- */

/*                 Editorial article layout                 */

/* -------------------------------------------------------- */

/* General layout */
article.article.article-editorial .editorial-flex-outer {
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-wrap: wrap;
}

.editorial-content-wrap {
    width: calc(100% - 76px);
}

.anchor-element {
    position: absolute;
    top: -130px;
}

@media screen and (max-width: 589px) {
    .anchor-element {
        position: absolute;
        top: -90px;
    }
}

/* Table styling */
article.article .article-content table,
article.article .article-content td {
    background: transparent;
}

article.article.article-editorial .article-content .table-wrapper {
    width: 100%;
    max-width: 75%;
    margin: 1em auto;
    overflow: visible;
}

article.article.article-editorial .article-content .table-wrapper table td:first-of-type {
    padding-left: 0;
}

article.article.article-editorial .article-content .table-wrapper table td:last-of-type {
    padding-right: 0;
}

@media screen and (max-width: 879px) {
    article.article.article-editorial .article-content .table-wrapper table td:last-of-type {
        padding: 0;
    }

    article.article.article-editorial .article-content .table-wrapper table tr {
        display: flex;
        flex-direction: column;
    }

    article.article.article-editorial .article-content .table-wrapper table tr.col-reverse--tab-down {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 589px) {
    article.article.article-editorial .rte table {
        font-size: 1em;
    }

    article.article.article-editorial .article-content .table-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }
}

/* General content defaults */
article.article.article-editorial .article-content p,
article.article.article-editorial .article-content ul,
article.article.article-editorial .article-content ol,
article.article.article-editorial .article-content h2,
article.article.article-editorial .article-content h3,
article.article.article-editorial .article-content h4,
article.article.article-editorial .article-content h5,
article.article.article-editorial .article-content h6 {
    width: 100%;
    max-width: 75%;
    margin: 1em auto;
}

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

    article.article.article-editorial .article-content p,
    article.article.article-editorial .article-content ul,
    article.article.article-editorial .article-content ol,
    article.article.article-editorial .article-content h2,
    article.article.article-editorial .article-content h3,
    article.article.article-editorial .article-content h4,
    article.article.article-editorial .article-content h5,
    article.article.article-editorial .article-content h6 {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
}

/* Image handling */
article.article.article-editorial .article-content img.rte__no-indent {
    width: 125%;
    margin: 1.5em -12.5%;
}

article.article.article-editorial .article-content table td:first-of-type img {
    width: calc(125% + 10px);
    max-width: calc(125% + 10px);
    margin-left: calc(-25% - 10px);
}

article.article.article-editorial .article-content table td:last-of-type img {
    width: calc(125% + 10px);
    max-width: calc(125% + 10px);
    margin-left: 0;
}

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

    article.article.article-editorial .article-content table td:first-of-type img,
    article.article.article-editorial .article-content table td:last-of-type img {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 589px) {
    article.article.article-editorial .article-content img.rte__no-indent {
        width: calc(100% + 30px);
        margin: 1.5em -15px;
    }

    article.article.article-editorial .article-content table td:first-of-type img,
    article.article.article-editorial .article-content table td:last-of-type img {
        width: calc(100% + 20px);
        max-width: calc(100% + 20px);
        margin-left: -10px;
        margin-right: -10px;
    }
}

/* Article hero image */
article.article.article-editorial .editorial-hero-image--wrap {
    padding-left: 230px;
}

@media screen and (max-width: 589px) {
    article.article.article-editorial .editorial-hero-image--wrap {
        padding-left: 0;
    }
}

/* Video handling */
article.article.article-editorial .article-content .video-wrapper {
    width: 125%;
    max-width: 125%;
    margin: 1.5em -12.5%;
    padding-bottom: calc(125%/1.77778);
}

@media screen and (max-width: 589px) {
    article.article.article-editorial .article-content .video-wrapper {
        width: calc(100% + 30px);
        max-width: calc(100% + 30px);
        margin: 1.5em -15px;
        padding-bottom: calc((100% + 30px)/1.77778);
    }
}

/* Titles */
article.article.article-editorial .article-title-content {
    display: block;
    width: 100%;
    position: static;
    padding-top: 15px;
    padding-right: 0;
}

article.article.article-editorial .article-title-content h1 {
    font-size: calc(var(--typeHeaderSize)* 1.25);
}

@media screen and (max-width: 589px) {
    article.article.article-editorial .article-title-content h1 {
        font-size: calc(var(--typeHeaderSize)* 0.9);
    }
}

article.article.article-editorial .article-content h1 b,
article.article.article-editorial .article-content h2 b,
article.article.article-editorial .article-content h3 b {
    font-weight: var(--typeHeaderWeight);
}

/* List items */
article.article.article-editorial .article-content ul,
article.article.article-editorial .article-content ol {
    padding-left: 30px;
}

article.article.article-editorial .article-content {
    width: 100%;
}

/* Block quotes */

article.article.article-editorial blockquote.overview-snippet {
    font-size: var(--typeHeaderSize);
    font-weight: 100;
    color: var(--colorBtnPrimary);
    text-transform: uppercase;
    font-style: italic;
    line-height: 1.25;
    max-width: 60%;
    padding: 0;
    margin: 1.5em 0 1em 30px;
    position: relative;
    z-index: 3;
}

article.article.article-editorial blockquote.overview-snippet.image-overlay {
    position: absolute;
}

article.article.article-editorial blockquote.overview-snippet>span {
    margin-inline-start: -9px;
}

article.article.article-editorial blockquote.overview-snippet.image-overlay>span {
    background-color: rgba(255, 255, 255, 0.9);
    padding-inline-end: 19px;
}

article.article.article-editorial .article-content blockquote,
article.article.article-editorial .article-content blockquote p {
    font-size: var(--typeHeaderSize) !important;
    font-weight: 100;
    color: var(--colorBtnPrimary);
    text-transform: uppercase;
    font-style: italic;
    line-height: 1.25;
    max-width: 80%;
    padding: 0;
}

@media screen and (max-width: 589px) {
    article.article.article-editorial blockquote.overview-snippet {
        font-size: calc(var(--typeBaseSize)* 1.25);
        max-width: 100%;
        margin: 0.75em 0 1em 20px;
        padding-right: 20px;
        position: relative;
        z-index: 3;
    }

    article.article.article-editorial blockquote.overview-snippet.image-overlay {
        position: relative;
        margin: 0.75em 0 -1.5em 20px;
    }

    article.article.article-editorial .article-content blockquote,
    article.article.article-editorial .article-content blockquote p {
        font-size: calc(var(--typeBaseSize)* 1.25) !important;
        width: 100%;
        max-width: 100%;
    }
}

/* Date component */
.article-editorial--date-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    text-align: center;
    color: var(--colorTextBody);
    margin-right: 20px;
    position: sticky;
    top: 120px;
    z-index: 4;
}

.article-editorial--date-wrap>.published-day {
    font-size: var(--typeHeaderSize);
    font-family: var(--typeHeaderPrimary);
    line-height: 1.1;
}

.article-editorial--date-wrap>.published-month {
    font-size: 14px;
    font-family: var(--typeBasePrimary);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.article-editorial--date-wrap>.published-year {
    font-size: 11px;
    font-family: var(--typeBasePrimary);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.article-editorial--date-wrap>.share-trigger {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: 1px solid var(--colorBorder);
    display: block;
    margin-top: 10px;
    cursor: pointer;
    position: relative;
    z-index: 4;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease-in-out;
}

.article-editorial--date-wrap>.share-trigger.toggle-open {
    background-color: var(--colorTitle);
    position: relative;
    z-index: 4;
    -webkit-tap-highlight-color: transparent;
}

.article-editorial--date-wrap>.share-trigger::before {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url('/cdn/shop/files/Plus_Icon.svg?v=1643909953');
    background-repeat: no-repeat;
    background-size: 50%;
    position: absolute;
    top: -1px;
    left: -1px;
    background-position: center;
    transition: transform 0.15s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.article-editorial--date-wrap>.share-trigger.toggle-open::before {
    transform: rotate(45deg);
    position: absolute;
    z-index: 4;
    transition: transform 0.15s ease-in-out;
}

.article-editorial--date-wrap>.share-trigger .share-options--list {
    position: relative;
    background-color: var(--colorBody);
    border-radius: 3px;
    padding: 10px;
    width: 100px;
    display: flex;
    flex-direction: column;
    margin-top: 3em;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    -webkit-box-shadow: 0px 0px 10px -7px var(--colorTitle);
    box-shadow: 0px 0px 10px -7px var(--colorTitle);
}

.article-editorial--date-wrap>.share-trigger.toggle-open .share-options--list {
    opacity: 1;
    z-index: 4;
}

.article-editorial--date-wrap>.share-trigger .share-options--list .social-sharing__link {
    margin: 0;
}

.share-divider {
    display: inline-block;
    margin-top: 10px;
    width: 10px;
    height: 2px;
    background: var(--colorBorder);
}

/* -------------------------------------------------------- */

/*                  Megamenu Customizations                 */

/* -------------------------------------------------------- */

.mm-feature--title {
    font-family: var(--typeHeaderPrimary);
    font-weight: var(--typeHeaderWeight);
    font-size: calc(var(--typeBaseSize) + 1px);
    color: var(--colorTitle);
}

.mm-feature--title+div {
    font-weight: 400;
    line-height: 1.4;
}

/* -------------------------------------------------------- */

/*                  FAQ Page Customizations                 */

/* -------------------------------------------------------- */

.faq-image {
    max-width: 600px;
    margin-top: 1em;
}

.faq-question--text {
    font-family: var(--typeHeaderPrimary);
    font-weight: var(--typeHeaderWeight);
    font-size: calc(var(--typeBaseSize) + 1px);
    color: var(--colorTitle);
}

/* -------------------------------------------------------- */

/*                   Careers Customizations                 */

/* -------------------------------------------------------- */

.main-content div.shophire_page>section.hero_section>div.wrapper>h1.heading_text,
.main-content div.shophire_page>section.job_list_section>div.wrapper>h2.heading_text,
.main-content div.shophire_page>section.talent_community_section>div.wrapper>h2.heading_text,
div.shophire_page>section.talent_community_section .shophire_modal h2.modal_heading_text,
.main-content div.shophire_page>div.wrapper>div.job_form>h2.text_heading,
.main-content div.shophire_page>div.wrapper>div.shophire_header>h1.heading_text {
    font-family: var(--typeHeaderPrimary) !important;
    font-weight: var(--typeHeaderWeight) !important;
    font-size: var(--typeHeaderSize) !important;
    color: var(--colorTitle) !important;
    text-transform: capitalize !important;
    margin-bottom: 1em !important;
}

.main-content div.shophire_page>section.hero_section>div.wrapper>h2.subheading_text,
.main-content div.shophire_page>section.talent_community_section>div.wrapper>p.body_content {
    font-family: var(--typeBasePrimary) !important;
    font-size: 1em !important;
    line-height: var(--typeBaseLineHeight) !important;
    color: var(--colorTextBody) !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    text-transform: none !important;
}

.main-content div.shophire_page>section.hero_section {
    background-color: var(--colorBody) !important;
}

.main-content div.shophire_page>section.job_list_section>div.wrapper {
    width: 100% !important;
    max-width: 920px !important;
}

.main-content div.shophire_page>section.job_list_section>div.wrapper>ul.jobs_table>li.job_item>div.job_item_content>p.job_title {
    font-family: var(--typeHeaderPrimary) !important;
    font-weight: var(--typeHeaderWeight) !important;
    font-size: var(--typeBaseSize) !important;
    color: var(--colorBtnPrimary) !important;
    text-transform: capitalize !important;
}

.main-content div.shophire_page>section.talent_community_section>div.wrapper>button.join_button,
.main-content div.shophire_page>section.talent_community_section form input.form_button,
.main-content div.shophire_page>div.wrapper>div.job_form>form>input.form_button {
    background-color: var(--colorBtnPrimary) !important;
    border: 2px solid var(--colorBtnPrimary) !important;
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorBodyAlt) !important;
    font-weight: 700 !important;
    font-size: 1em !important;
    padding: 10px 25px !important;
    border-radius: 3px !important;
    font-size: 1em !important;
    transition: all 0.15s ease-in-out !important;
    display: block !important;
    text-transform: capitalize !important;
    box-shadow: 0 8px 20px rgb(74 82 96 / 10%) !important;
}

.main-content div.shophire_page>div.wrapper>div.job_form>form>button.form_button {
    background-color: var(--colorBtnPrimary) !important;
    border: 2px solid var(--colorBtnPrimary) !important;
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorBodyAlt) !important;
    font-weight: 700 !important;
    font-size: 1em !important;
    padding: 10px 25px !important;
    border-radius: 3px !important;
    font-size: 1em !important;
    transition: all 0.15s ease-in-out !important;
    text-transform: capitalize !important;
    box-shadow: 0 8px 20px rgb(74 82 96 / 10%) !important;
}

.main-content div.shophire_page>section.talent_community_section>div.wrapper>button.join_button:hover,
.main-content div.shophire_page>section.talent_community_section form input.form_button:hover {
    background-color: transparent !important;
    color: var(--colorBtnPrimary) !important;
    box-shadow: 0 8px 10px rgb(74 82 96 / 10%) !important;
}

.main-content div.shophire_page>section.talent_community_section .modal-content {
    border-radius: 30px !important;
    padding: 80px !important;
    top: auto !important;
    width: calc(100% - 40px) !important;
    max-width: 920px !important;
}

.main-content div.shophire_page>section.talent_community_section .shophire_modal {
    padding-bottom: 100px !important;
}

@media screen and (max-width: 589px) {
    .main-content div.shophire_page>section.talent_community_section .modal-content {
        border-radius: 20px !important;
        padding: 40px !important;
    }
}

.main-content div.shophire_page>section.talent_community_section {
    background-color: var(--colorTitle) !important;
}

.main-content div.shophire_page>section.talent_community_section>div.wrapper>h2.heading_text {
    color: var(--colorBodyAlt) !important;
}

.main-content div.shophire_page>section.talent_community_section>div.wrapper>p.body_content {
    color: var(--colorBody) !important;
    margin-bottom: 2em !important;
}

.main-content div.shophire-branding {
    display: none !important;
}

#MainContent.main-content .wrapper div.shophire_navbar {
    margin-top: 0 !important;
}

.main-content div.shophire_page>div.wrapper>div.shophire_navbar>a {
    color: var(--colorBtnPrimary) !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    opacity: 1 !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid var(--colorBtnPrimary) !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out;
}

.main-content div.shophire_page>div.wrapper>div.shophire_navbar>a:hover {
    opacity: 0.6 !important;
    padding-bottom: 5px !important;
    margin-bottom: -2px !important;
}


/* -------------------------------------------------------- */

/*                    Ingredients Section                   */

/* -------------------------------------------------------- */

.ingredient-flex-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2em;
    margin-top: 2em;
}

.ingredient-flex-wrap.block-wrap {
    margin-bottom: 0;
    margin-top: 1em;
}

.ingredients-title--content+.ingredient-flex-wrap {
    margin-top: 4em !important;
}

.ingredient-flex-wrap:last-of-type {
    margin-bottom: 0em;
}

.ingredient-flex-icon {
    width: 125px;
    height: 125px;
    margin-right: 55px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-flex-icon img {
    max-width: 100%;
    max-height: 100%;
}

.ingredient-flex-icon.block-icon {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.ingredient-flex-content {
    width: calc(100% - 180px);
    display: block;
}

.ingredient-flex-content.block-content {
    width: calc(100% - 70px);
    display: block;
}

.ingredient-flex-content .subtitle {
    line-height: 1.2 !important;
}

.ingredient-flex-content .subtitle+p.mt0 {
    margin-top: 0.25em !important;
}

@media screen and (max-width: 589px) {
    .ingredient-flex-wrap {
        flex-direction: column;
    }

    .ingredient-flex-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .ingredient-flex-content {
        width: 100%;
        text-align: center;
        max-width: 320px;
        margin: 0 auto;
    }

    .ingredient-flex-wrap.block-wrap {
        flex-direction: row;
        text-align: left;
        max-width: 100%;
    }

    .ingredient-flex-content.block-content {
        text-align: left;
    }

    .ingredient-flex-content.block-content p {
        text-align: justify;
        text-align-last: left;
    }
}

.view-all-ingredients {
    margin-top: 2em;
    padding: 15px 5px;
    border-top: 1px solid var(--colorBorder);
    border-bottom: 1px solid var(--colorBorder);
    cursor: pointer;
    position: relative;
}

.view-all-ingredients>summary {
    font-weight: 700;
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    transition: color 0.15s ease-in-out;
}

.view-all-ingredients:not([open])>summary:hover {
    color: var(--colorBtnPrimary)
}

.view-all-ingredients>summary::after {
    content: '+';
    position: absolute;
    right: 0;
    color: var(--colorBorder);
    transform-origin: 50% 55%;
    transition: transform 0.15s ease-in-out;
}

.view-all-ingredients[open]>summary {
    color: var(--colorTitle);
}

.view-all-ingredients[open]>summary::after {
    transform: rotate(45deg)
}

.ingredient-toggle--wrapper,
.toggle--wrapper,
.calorie-toggle--wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 2em;
    padding: 1em 0 0.4em;
    position: sticky;
    top: 120px;
    z-index: 2;
    background-color: var(--colorBody);
    border-radius: 10px;
    /* box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.2); */
}

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

    .ingredient-toggle--wrapper,
    .toggle--wrapper,
    .calorie-toggle--wrapper {
        top: 70px;
        border-radius: 5px;
    }
}

.ingredient-tab--toggle,
.tab--toggle,
.calorie-tab--toggle {
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
    font-weight: 700;
    padding: 0;
    margin: 0 10px -12px;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease-in-out;
}

.ingredient-tab--toggle.tab-selected,
.tab--toggle.tab-selected,
.calorie-tab--toggle.tab-selected {
    margin-bottom: -12px;
    color: var(--colorBtnPrimary);
}

.ingredient-tab--toggle::after,
.tab--toggle::after,
.calorie-tab--toggle::after {
    content: '';
    height: 2px;
    background-color: var(--colorBtnPrimary);
    width: 0%;
    display: inline-block;
    position: relative;
    top: -12px;
    transition: all 0.15s ease-in-out;
}

.ingredient-tab--toggle.tab-selected::after,
.tab--toggle.tab-selected::after,
.calorie-tab--toggle.tab-selected::after {
    width: 100%;
}

.ingredient-tab--wrapper,
.tab--wrapper,
.calorie-tab--wrapper {
    opacity: 0;
    position: relative;
    top: 0;
    height: 0;
    transform: translateY(30px);
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, margin 0.35s ease-in-out;
    overflow: hidden;
}

.ingredient-tab--wrapper.mt1:not(.tab-selected),
.tab--wrapper.mt1:not(.tab-selected),
.calorie-tab--wrapper.mt1:not(.tab-selected) {
    margin-top: 0 !important;
}

.ingredient-tab--wrapper.tab-selected,
.tab--wrapper.tab-selected,
.calorie-tab--wrapper.tab-selected {
    display: block;
    height: 100%;
    opacity: 1;
    transform: translateY(0);
}

.page-width.ingredients-container {
    position: relative;
}

/* -------------------------------------------------------- */

/*         Image with content (icons dropdown)              */

/* -------------------------------------------------------- */

.dropdown-styles .collapsible-trigger-btn {
    padding-left: 0;
    padding-right: 0;
}
.dropdown-styles .ingredient-flex-icon {
    height: auto;
}

.dropdown-styles .collapsible-content__inner {
    width: calc(100% - 75px);
    margin: 0 0 0 auto;
}

.dropdown-styles .ingredient-flex-content.block-content {
    max-width: none;
    width: 100%;
}

.dropdown-styles .ingredient-flex-icon.block-icon {
    margin-right: 0;
}

.dropdown-styles button {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    flex-direction: row;
    align-items: center;
}

.dropdown-styles .tab-summary--content {
    width: 100%;
}

.dropdown-styles .ingredient-flex-icon + .tab-summary--content {
    width: calc(100% - 75px);
    padding-right: 20px;
}

.dropdown-styles .ingredient-flex-icon {
    width: 60px;
}

@media screen and (max-width: 589px) {
    .dropdown-styles .ingredient-flex-icon {
        width: 40px;
    }
    .dropdown-styles button {
        column-gap: 10px;
    }
    .dropdown-styles .ingredient-flex-icon + .tab-summary--content {
        width: calc(100% - 50px);
        padding-right: 15px;
        font-size: 18px;
    }
    .dropdown-styles .collapsible-content__inner {
        width: calc(100% - 50px);
    }
    .dropdown-styles .collapsible-content__inner.rte p {
        font-size: 15px;
    }
    .dropdown-styles .collapsible-content__inner.rte p:not(:last-of-type) {
        margin-bottom: 1em;
    }
    .dropdown-styles .collapsible-content .collapsible-content__inner.rte {
        margin-top: -5px;
    }
    .dropdown-styles .collapsible-trigger-btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.dropdown-styles .ingredient-flex-icon img {
    width: 100%;
    height: auto;
}

/* .dropdown-styles .collapsible-trigger__icon {
    transform: translate(-100%, -100%);
} */

/* Policy Pages */

.shopify-policy__title h1 {
    text-transform: capitalize;
}

/* Delivery check */

.delivery-check .input-group-btn {
    margin-left: 5px;
}

.delivery-lookup--flex {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.delivery-lookup--flex>select {
    flex: 1 0 300px;
    margin: 5px;
    background-color: var(--colorBody);
}

@media screen and (max-width: 1069px) {
    .delivery-lookup--flex>select {
        flex: 1 0 auto;
    }
}

@media screen and (max-width: 589px) {
    .delivery-lookup--flex>select {
        flex: 1 0 300px;
    }
}

.delivery-lookup--flex>button {
    flex: 1 0 auto;
    margin: 5px !important;
}

.delivery-lookup-wrapper .newsletter__input-group {
    max-width: none;
}

/* Klaviyo Onsite */

.btn.btn--full.add-to-cart.klaviyo-bis-trigger {
    width: 100% !important;
}

/* Default Recharge Components */

#recharge-te .rc_page-width {
    margin: 100px auto !important;
    padding: 0 40px !important;
    max-width: 1620px !important;
}

body#recharge-novum #recharge-te {
    background: transparent !important;
    font-family: var(--typeBodyPrimary) !important;
    font-size: var(--typeBaseSize) !important;
    line-height: var(--typeBaseLineHeight) !important;
    color: var(--colorTextBody) !important;
    z-index: 0 !important;
}

body#recharge-novum.template-.locked #recharge-te {
    z-index: 50 !important;
}

#recharge-te .rc_page-width h3 {
    font-size: var(--typeHeaderSize) !important;
    font-family: var(--typeHeaderPrimary) !important;
    text-transform: capitalize !important;
    font-weight: var(--typeHeaderWeight) !important;
    line-height: var(--typeHeaderLineHeight) !important;
    color: var(--colorTitle) !important;
    margin-bottom: 1.5em !important;
    border-bottom: 1px solid var(--colorBorder) !important;
    padding-bottom: 1em !important;
}

@media screen and (max-width: 589px) {
    #recharge-te .rc_page-width h3 {
        font-size: calc(var(--typeHeaderSize)*0.85) !important;
    }
}

@media screen and (max-width: 589px) {
    #recharge-te .rc_page-width {
        margin: 34px auto !important;
        padding: 0 25px !important;
    }
}

#recharge-te .nav--wrapper.bg-light .nav__list--desktop.rc_card_container {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

#te-modal button.rc_btn.text-uppercase.billing-btn.title-bold {
    width: 100% !important;
    display: block;
    border: 2px solid var(--colorBtnPrimary) !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    text-align: center;
    color: var(--colorBodyAlt) !important;
    padding: 12px 30px !important;
    background-color: var(--colorBtnPrimary) !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback) !important;
    letter-spacing: var(--typeBaseSpacing) !important;
    line-height: var(--typeBaseLineHeight) !important;
    font-size: var(--typeBaseSize) !important;
    -webkit-font-smoothing: antialiased !important;
    -webkit-text-size-adjust: 100% !important;
    text-rendering: optimizeSpeed !important;
    text-transform: capitalize !important;
}

#te-modal button.rc_btn.text-uppercase.billing-btn.title-bold:hover {
    color: var(--colorBtnPrimary) !important;
    background-color: var(--colorBodyAlt) !important;
}

body#recharge-novum #recharge-te #te-modal,
body#recharge-novum #recharge-te #te-card-modal {
    width: 450px !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-heading,
body#recharge-novum #recharge-te #te-modal #te-modal-content,
body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading,
body#recharge-novum #recharge-te #te-card-modal #te-card-modal-content {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-heading,
body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading {
    border-bottom: none !important;
    padding-top: 40px !important;
    padding-bottom: 0 !important;
}

body#recharge-novum #recharge-te ul li a,
body#recharge-novum #recharge-te a,
body#recharge-novum #recharge-te span.js-billing-card-edit-btn {
    color: var(--colorBtnPrimary) !important;
}

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

    body#recharge-novum #recharge-te #te-modal,
    body#recharge-novum #recharge-te #te-card-modal {
        width: 100vw !important;
    }

    body#recharge-novum #recharge-te #te-modal #te-modal-heading,
    body#recharge-novum #recharge-te #te-modal #te-modal-content,
    body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading,
    body#recharge-novum #recharge-te #te-card-modal #te-card-modal-content {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    body#recharge-novum #recharge-te #te-modal #te-modal-heading,
    body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading {
        padding-top: 25px !important;
    }
}

body#recharge-novum #recharge-te #te-modal #te-modal-heading span.te-modal-title,
body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading span.te-modal-title {
    display: block;
    font-size: 24px;
    width: 100%;
    font-family: var(--typeHeaderPrimary) !important;
    text-transform: capitalize !important;
    font-weight: var(--typeHeaderWeight) !important;
    line-height: var(--typeHeaderLineHeight) !important;
    color: var(--colorTitle) !important;
    border-bottom: 1px solid var(--colorBorder) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 25px !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-heading span.close-sidebar,
body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading span.close-card-sidebar {
    position: absolute !important;
    right: 40px !important;
    top: 30px !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-heading a.close-sidebar,
body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading a.close-card-sidebar {
    position: absolute !important;
    left: 40px !important;
    top: 30px !important;
}

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

    body#recharge-novum #recharge-te #te-modal #te-modal-heading span.close-sidebar,
    body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading span.close-card-sidebar {
        right: 25px !important;
        top: 12px !important;
    }

    body#recharge-novum #recharge-te #te-modal #te-modal-heading a.close-sidebar,
    body#recharge-novum #recharge-te #te-card-modal #te-card-modal-heading a.close-card-sidebar {
        left: 25px !important;
        top: 12px !important;
    }
}

body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper,
body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_subscription_card_element_wrapper {
    background-color: var(--colorBodyAlt) !important;
    padding: 50px !important;
    border-radius: 30px !important;
    -webkit-box-shadow: 0px 0px 25px -20px #000000 !important;
    box-shadow: 0 0 25px -20px #000 !important;
    margin-bottom: 60px !important;
}

body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper p {
    font-size: 1em !important;
    line-height: var(--typeBaseLineHeight) !important;
    color: var(--colorTextBody) !important;
}

body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper p {
    margin-bottom: 1em !important;
}

body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper .element__flex-row p:not(:first-of-type) {
    margin: 0 !important;
}

body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper .element__flex-row p:first-of-type {
    margin-bottom: 0 !important;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: var(--typeBaseLineHeight) !important;
    color: var(--colorBtnPrimary) !important;
    text-transform: uppercase !important;
}

body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper p.title-bold,
body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_subscription_card_element_wrapper p.title-bold {
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback) !important;
    font-weight: var(--typeHeaderWeight) !important;
    letter-spacing: var(--typeHeaderSpacing) !important;
    line-height: var(--typeHeaderLineHeight) !important;
    color: var(--colorTitle) !important;
    display: block !important;
    text-transform: capitalize !important;
    font-size: 1em !important;
    margin: 0 !important;
}

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

    body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_element_wrapper,
    body#recharge-novum #recharge-te #rc_te-template-wrapper .rc_subscription_card_element_wrapper {
        margin: 0 0 2em !important;
        padding: 35px 25px 25px !important;
        border-radius: 20px !important;
    }
}

body#recharge-novum #recharge-te #te-modal #te-modal-content label {
    font-size: calc(var(--typeBaseSize)*0.8) !important;
    color: var(--colorTitle) !important;
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback) !important;
    font-weight: var(--typeHeaderWeight) !important;
    letter-spacing: var(--typeHeaderSpacing) !important;
    line-height: var(--typeHeaderLineHeight) !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="text"],
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="email"],
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="number"],
body#recharge-novum #recharge-te #te-modal #te-modal-content select {
    transition: all .15s ease-in-out !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    appearance: none !important;
    outline: none !important;
    background-color: var(--colorBody) !important;
    font-size: 16px !important;
    padding: 10px !important;
    border-radius: 3px !important;
    color: var(--colorTextBody) !important;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback) !important;
    font-weight: var(--typeBaseWeight) !important;
    letter-spacing: var(--typeBaseSpacing) !important;
    line-height: var(--typeBaseLineHeight) !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-content select {
    padding: 0 10px !important;
}

body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="text"]:focus,
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="email"]:focus,
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="number"]:focus,
body#recharge-novum #recharge-te #te-modal #te-modal-content select:focus,
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="text"]:hover,
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="email"]:hover,
body#recharge-novum #recharge-te #te-modal #te-modal-content input[type="number"]:hover,
body#recharge-novum #recharge-te #te-modal #te-modal-content select:hover {
    border: 1px solid var(--colorBtnPrimary) !important;
}

#CustomerLoginForm #rc_login {
    display: none !important;
}

/* Press Blog Layout */

.press-placement--list {
    border-top: 1px solid var(--colorBorder);
}

.press-placement {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 30px;
    border-bottom: 1px solid var(--colorBorder);
}

.press-logo--wrap {
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 30px;
}

.press-logo--wrap>img {
    width: 100%;
    height: auto;
}

.press-excerpt--wrap {
    width: calc(100% - 150px);
    padding-left: 30px;
    text-align: left;
}

.center>.breadcrumb {
    text-align: center;
}

@media screen and (max-width: 589px) {
    .press-placement {
        padding: 30px 10px;
    }

    .press-logo--wrap {
        margin: 0 auto;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .press-excerpt--wrap {
        width: calc(100%);
        padding-left: 0;
        text-align: center;
    }
}

/* Press Quotes Callouts */

.press-callouts--flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.press-callout--item {
    padding: 30px 15px;
    text-align: center;
}

.press-callout--item>img {
    max-width: 200px;
    margin: 0 auto;
}

.press-callout--item.quote-item>img {
    max-width: 90px;
    margin: 0 auto;
}

.press-callout--item.quote-item {
    flex: 0 1 460px;
}

@media screen and (min-width: 590px) {
    .press-callout--item:not(.quote-item)[data-desktop-items="6"] {
        flex: 0 1 calc((100% - 460px) / 6);
    }

    .press-callout--item:not(.quote-item)[data-desktop-items="5"] {
        flex: 0 1 calc((100% - 460px) / 5);
    }

    .press-callout--item:not(.quote-item)[data-desktop-items="4"] {
        flex: 0 1 calc((100% - 460px) /4);
    }

    .press-callout--item:not(.quote-item)[data-desktop-items="3"] {
        flex: 0 1 calc((100% - 460px) / 3);
    }

    .press-callout--item:not(.quote-item)[data-desktop-items="2"] {
        flex: 0 1 calc((100% - 460px) / 2);
    }
}

@media screen and (max-width: 589px) {
    .press-callout--item.quote-item {
        order: -1;
        width: 100%;
    }

    .press-callout--item:not(.quote-item) {
        width: 50%;
    }
}

/* Content Cards Section */

.content-cards--section {
    padding: 30px;
}

.cards-content--flex {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 0 -10px -10px 0;
}

.card-content--item {
    padding: 30px;
    margin: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

@media screen and (min-width: 590px) {
    .card-content--item[data-desktop-items="6"] {
        flex: 0 1 calc(16.66% - 20px);
    }

    .card-content--item[data-desktop-items="5"] {
        flex: 0 1 calc(20% - 20px);
    }

    .card-content--item[data-desktop-items="4"] {
        flex: 0 1 calc(25% - 20px);
    }

    .card-content--item[data-desktop-items="3"] {
        flex: 0 1 calc(33.33% - 20px);
    }

    .card-content--item[data-desktop-items="2"] {
        flex: 0 1 calc(50% - 20px);
    }
}

@media screen and (max-width: 590px) {
    .card-content--item[data-mobile-items="3"] {
        flex: 0 1 33.33%;
    }

    .card-content--item[data-mobile-items="2"] {
        flex: 0 1 50%;
    }

    .card-content--item[data-mobile-items="1"] {
        flex: 0 1 100%;
    }
}

/* Get Joy Health - Modal */

.health-session--start {
    height: 100%;
    min-height: -webkit-fill-available;
    width: 100vw;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--colorBodyAlt);
    transform: translateY(110%);
    transition: transform 0.4s ease-in-out;
}

.health-session--start.show-modal {
    transform: translateY(0);
}

.drawer__close-button.health-modal--close {
    position: absolute;
    top: 15px;
    right: 15px;
    height: auto;
    z-index: 99;
    padding: 15px;
}

.health-form--group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0 15px;
}

.health-form--item {
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
}

.health-form--item .text-input {
    width: 100%;
}

.health-form--item .variant__label {
    margin-bottom: 5px;
}

.health-help-link {
    display: inline-block;
    margin-left: 1em;
    text-decoration: underline;
}

.divider-center {
    display: block;
    margin: 3em auto;
    width: 80px;
    height: 4px;
    background-color: var(--colorBtnPrimary);
}

.modal-steps--footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--colorBodyAlt);
    border-top: 1px solid var(--colorBorder);
    /* height: 82px; */
}

.health-pet-select--wrapper {
    display: block;
    margin: 0 auto;
    max-width: 440px;
}

input[type="radio"]+.health-pet--selection {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid var(--colorBorder);
    font-size: 1.25em;
    margin-bottom: 10px;
    color: var(--colorTitle);
    transition: all 0.2s ease-in-out;
}

.health-pet-option input[type="radio"] {
    display: none;
}

input[type="radio"]+.health-pet--selection:hover {
    background-color: honeydew;
    -webkit-box-shadow: 0px 0px 25px -15px #656565;
    box-shadow: 0px 0px 25px -15px #656565;
}

input[type="radio"]+.health-pet--selection span.select-indicator {
    display: block;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    margin-right: 10px;
    border: 3px solid var(--colorBtnPrimary);
}

input[type="radio"]:checked+.health-pet--selection {
    border: 1px solid var(--colorBtnPrimary);
    background-color: var(--colorBtnPrimary);
    color: var(--colorBodyAlt);
    -webkit-box-shadow: 0px 0px 25px -15px #656565;
    box-shadow: 0px 0px 25px -15px #656565;
}

input[type="radio"]:checked+.health-pet--selection span.select-indicator {
    border: 3px solid var(--colorTitle);
    background-color: var(--colorTitle);
}

.health-connect--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100vh;
    width: 100vw;
}

.health-loader {
    position: relative;
    /* z-index: -1; */
    margin-bottom: -3em;
    max-width: 50%;
}

@media screen and (max-width: 589px) {
    .drawer__close-button.health-modal--close {
        top: 0;
        right: 0;
        padding: 15px;
    }

    .health-form--group {
        display: block;
    }

    .health-action--buttons {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        row-gap: 10px;
        margin-bottom: 10px;
        padding: 0 10px;
    }

    .health-action--buttons button.btn {
        padding-left: 20px !important;
        padding-right: 20px !important;
        background-image: none !important;
    }

    .modal-steps--footer {
        padding: 10px;
        font-size: 14px;
        position: relative;
        bottom: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border-top: 0px solid transparent;
        padding-bottom: 20px;
    }

    .step-counter {
        order: 5
    }

    .health-help-link {
        margin-left: 0;
    }

    .section-padded.health-content {
        padding-bottom: 0;
    }
}


@media screen and (min-width: 590px) {

    .hero__bottom {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
    }

    .hero__bottom .animation-cropper {
        width: 100%;
        display: block;
        text-align: center;
    }
}

@media screen and (max-width: 589px) {
    .hero__bottom {
        margin-top: 1em;
    }
}

.hero-logo--wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.2);
}

.hero-logo--wrapper .logo-container {
    width: 200px;
    display: block;
}

@media screen and (max-width: 589px) {
    .hero-logo--wrapper .logo-container {
        width: 120px;
    }
}

.hero-logo--wrapper .logo-container img {
    width: 100%;
    height: auto;
}

.hero-inline--image {
    width: 100%;
    max-width: 125px;
    margin: 0;
}

.hero-inline--image.enlarge-image {
    max-width: 300px;
}

@media screen and (max-width: 589px) {
    .hero-inline--image.enlarge-image {
        max-width: 200px;
    }
}

.image-wrap.square-image--wrapper {
    position: relative;
}

.image-wrap.square-image--wrapper .square-image--wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.square-image--wrapper.image-100w img {
    width: 100%;
    height: auto;
    max-height: none;
}

.square-image--wrapper.image-100w img {
    height: 100%;
    width: auto;
    max-width: none;
}

.account-health-title--wrap {
    display: flex;
    align-items: center;
}

.account-health--logo {
    width: 80px;
    margin-right: 10px;
    height: auto;
}

span.error-message {
    display: block;
    color: red;
    font-size: 11px;
}

/* Options table updates */

.options-table-shell.truncate--height {
    overflow-x: scroll;
    overflow-y: hidden;
    max-height: 450px;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.options-table-shell.truncate--height.expanded {
    overflow: visible;
    max-height: none;
    padding-bottom: 3.25em
}

.expand-btn--target {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    font-weight: 700;
    color: var(--colorBtnPrimary);
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
    cursor: pointer;
    z-index: 9;
    text-align: center;
}

.expand-btn--target span.expand-btn--text {
    transition: all 0.2s ease-in-out;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--colorBtnPrimary);
}

.expand-btn--target:hover span.expand-btn--text {
    opacity: 0.5;
    padding-bottom: 5px;
    margin-bottom: -2px;
}

/* Video Gallery Section */

.filter-checkbox-group label {
    display: inline-block;
}

.filter-checkbox-group>input[type="checkbox"]:not(:checked)+label:hover {
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
}

.filter-checkbox-group>input[type="checkbox"]+label::before {
    content: '';
    display: inline-block;
    height: 14px;
    width: 14px;
    margin-right: 10px;
    border-radius: 10px;
    border: 2px solid var(--colorBtnPrimary);
    position: relative;
    top: 2px;
    transition: all 0.15s ease-in-out;
}

.filter-checkbox-group>input[type="checkbox"]+label:hover::before {
    background-color: honeydew;
}

.filter-checkbox-group>input[type="checkbox"]:checked+label {
    color: var(--colorBtnPrimary);
    text-decoration: underline;
}

.filter-checkbox-group>input[type="checkbox"]:checked+label::before {
    background-color: var(--colorBtnPrimary);
}

.filter-checkbox-group input[type="checkbox"] {
    display: none;
}

button.filter-state {
    display: inline-block;
    font-size: 12px;
    color: var(--colorBtnPrimary);
    padding: 0;
    background-color: transparent;
    border: none;
}

button.filter-state::before {
    content: '+';
    margin-right: 5px;
    transition: all 0.15s ease-in-out;
}

button.filter-state.filter-active::before {
    content: '-';
}

.play-button--overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.play-button--overlay .play-icon--wrapper {
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    background-color: rgba(255, 255, 255, 0.7);
}

.video-card--item {
    cursor: pointer;
}

.content-modal-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding: 40px 15px;
    z-index: 30;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    display: none;
    opacity: 0;
    transition: all 0.25s ease-in-out;
}

.content-modal-wrapper.visible {
    display: flex;
}

.content-modal-wrapper.visible.show-modal {
    opacity: 1;
}

.content-modal-wrapper .close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.content-modal-wrapper .close-modal>svg {
    transform: scale(180%);
}

.content-modal-wrapper .close-modal>svg>path {
    color: white;
}

.content-modal-wrapper .close-modal:hover {
    opacity: 0.8;
}

.content-modal-wrapper video:not(.responsive-bg--visual) {
    max-width: 940px;
    width: 100%;
}

.content-modal-wrapper video.responsive-bg--visual {
    width: calc(100vw - 100px);
    height: calc(100vh - 100px);
    margin: 50px;
}

@media screen and (max-width: 589px) {
    .content-modal-wrapper video.responsive-bg--visual {
        width: calc(100vw - 40px);
        height: calc(100vh - 60px);
        margin: 30px 20px;
    }
}

@media screen and (max-width: 589px) {
    .grid__item.video-card--item {
        padding-left: 0;
    }
}

.image-wrap.article-image--outer.video-image--placeholder {
    padding-bottom: 56.25%;
    position: relative;
}

.video-card--item p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 0;
}

.sticky--panel {
    position: sticky;
    top: 130px;
}

@media screen and (max-width: 589px) {
    .sticky--panel {
        position: relative;
        top: 0;
    }
}

[data-animate_images=true] .image-wrap.video-image--placeholder img:not([role=presentation]),
[data-animate_images=true] .image-wrap.video-image--placeholder svg {
    opacity: 1;
}

.grid-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

/* PDP Updates - Sept 2022 */

.fm-qty--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.fm-daily--title {
    font-size: 14px;
}

/* Snack bar notification */

.sb-notification--outer {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    display: none;
    padding: 30px;
    border-radius: 30px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.25s ease-in-out;
    z-index: 29;
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
}

.sb-notification--outer.visible {
    display: inline-block;
}

.sb-notification--outer.visible.show-notification {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 589px) {
    .sb-notification--outer {
        padding: 20px;
        border-radius: 15px;
        width: calc(100% - 40px);
        max-width: none;
        top: auto;
        bottom: 20px;
        left: 20px;
        right: auto;
    }
}

.sb-notification--outer .close-notification {
    position: absolute;
    top: 15px;
    right: 15px;
    transition: opacity 0.15s ease-in-out;
}

.sb-notification--outer .close-notification:hover {
    opacity: 0.6;
}

.sb-notification--outer .notification-content {
    font-size: 0.85em;
}

.sb-notification--outer button {
    border: none;
}

/* Gorgias widget custom */

iframe[title="Button to launch messaging window"] {
    z-index: 28 !important;
}

/* Klaviyo footer opt-in */

.footer-wrapper form.klaviyo-form input[type="email"] {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    color: var(--colorFooterText) !important;
    font-size: calc(var(--typeBaseSize)*0.93) !important;
    padding: 8px 10px !important;
    border-radius: 3px !important;
    transition: all 0.15s ease-in-out !important;
    font-family: var(--typeBasePrimary) !important;
    font-weight: var(--typeBaseWeight) !important;
    letter-spacing: var(--typeBaseSpacing) !important;
    line-height: var(--typeBaseLineHeight) !important;
    height: auto !important;
}

.footer-wrapper form.klaviyo-form input[type="email"]::placeholder {
    color: var(--colorFooterText) !important;
    font-size: calc(var(--typeBaseSize)*0.93) !important;
    font-family: var(--typeBasePrimary) !important;
    font-weight: var(--typeBaseWeight) !important;
    letter-spacing: var(--typeBaseSpacing) !important;
    line-height: var(--typeBaseLineHeight) !important;
}

.footer-wrapper form.klaviyo-form button {
    font-size: calc(var(--typeBaseSize)*0.93) !important;
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 700;
    letter-spacing: 0.1em !important;
    line-height: var(--typeBaseLineHeight) !important;
    text-transform: uppercase !important;
}

.footer-wrapper form.klaviyo-form input[type="email"]:focus {
    border: 1px solid var(--colorFooterText) !important;
}

.footer-wrapper form.klaviyo-form {
    margin-bottom: 1em !important;
}

/* Health marketing opt-in*/

.consent-opt-in {
    text-align: left;
}

.consent-opt-in input[type="checkbox"] {
    display: none;
}

.consent-opt-in input[type="checkbox"]+label {
    display: inline-block;
}

.consent-opt-in input[type="checkbox"]+label::before {
    content: '';
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 10px;
    height: 15px;
    width: 15px;
    border: 2px solid var(--colorBtnPrimary);
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.consent-opt-in input[type="checkbox"]:checked+label::before {
    background-color: var(--colorBtnPrimary);
    background-image: url('//getjoyfood.com/cdn/shop/t/65/assets/checkmark.png?v=18221274958617912241697661131');
    background-size: contain;
}

.consent-opt-in input[type="checkbox"]:hover+label::before,
.consent-opt-in input[type="checkbox"]+label:hover::before {
    background-color: honeydew;
}

/* Sticky Footer section */

.shopify-section.sticky--cta {
    position: fixed;
    margin: 0;
    width: 100%;
    display: none;
    border-top: 1px solid var(--colorBorder);
    background-color: var(--colorBodyAlt);
    bottom: 0;
    left: 0;
    padding: 10px 0;
    z-index: 24;
    transform: translateY(calc(100% + 40px));
    transition: transform 0.35s ease-in-out;
}

.shopify-section.sticky--cta.displayed {
    display: block;
}

.shopify-section.sticky--cta.displayed.transitioned {
    transform: translateY(0);
}


.sticky-footer--flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@media screen and (max-width: 589px) {
    .sticky-footer--content {
        display: none;
    }
}

@media screen and (max-width: 589px) {
    .sticky-footer--flex .btn.btn--primary {
        width: 100%;
    }
}

/* 
.gjh-cal--wrapper {
    width: 100%;
    padding-top: 100%;
    position: relative;
    height: 100%;
} */

.gjh-cal--wrapper>.calendly-inline-widget {
    width: 100%;
    padding-top: 1092px;
    position: relative;
}

.gjh-cal--wrapper .calendly-inline-widget iframe {
    position: absolute !important;
    width: 100% !important;
    top: 0;
    left: 0;
    height: 100% !important;
    max-height: none !important;
}

.recurring-price-message>span.sub-intro--subtext {
    font-size: 14px !important;
    font-weight: 400;
    display: block !important;
    color: var(--colorTextBody) !important;
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    font-weight: var(--typeHeaderWeight);
    letter-spacing: var(--typeHeaderSpacing);
    line-height: var(--typeHeaderLineHeight);
    margin-bottom: 1em;
}

/* Image with text tabs */

[data-animate_images=true] .content-tabs-section .image-wrap img:not([role=presentation]) {
    opacity: 1;
}

.content-tabs-section {
    position: relative;
}

.content-tabs-section .toggle--wrapper {
    background-color: var(--colorBodyAlt);
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-left: 25px;
    padding-right: 25px;
    width: fit-content;
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 589px) {
    .content-tabs-section .toggle--wrapper {
        width: calc(100vw - 40px);
        padding-bottom: 20px;
        white-space: nowrap;
        justify-content: flex-start;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .content-tabs-section .toggle--wrapper::-webkit-scrollbar {
        display: none;
    }

    .content-tabs-section .toggle--wrapper .tab-selected {
        position: relative;
    }

    .content-tabs-section .toggle--wrapper .tab--toggle::after {
        position: absolute;
        left: 0;
        top: 30px;
    }
}

.tab-nav--label {
    display: inline-block;
    margin: 0 10px;
}

/* Page Subscription Option */

.page-product-block input[type="radio"] {
    display: none;
}

.page-product-block input[type="radio"]:checked+.rc-radio {
    background-color: var(--colorBtnPrimary);
    box-shadow: 0 0 0 1px var(--colorBtnPrimary);
    transition: all .15s ease-in-out;
}

.page-product-block input[type="radio"]:checked+.rc-radio .rc_widget__option__label.rc-radio__label span.rc-option__text,
.page-product-block input[type="radio"]:checked+.rc-radio .rc_widget__option__label.rc-radio__label span.rc-option__discount {
    color: white;
    font-weight: 700;
}

.page-product-block input[type="radio"]:checked+.rc-radio .rc_widget__option__label.rc-radio__label span.rc-option__price {
    color: white;
}

.anchor-wrap {
    height: 0px;
    width: 0px;
    position: relative;
}

.anchor-item {
    position: absolute;
    top: -100px;
}

/* -------------------------------------------------------- */

/*                    Mixed Media Slideshow                 */

/* -------------------------------------------------------- */

.relative {
    position: relative !important;
}

.mixed-media-slideshow .hero__image-wrapper .video-div {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 0;
    object-fit: cover;
    font-family: "object-fit: cover";
}

.mixed-media-video--content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}

/* .mixed-media-slideshow.expanded-slideshow .slideshow__slide,
.mixed-media-slideshow.expanded-slideshow .flickity-slider .slideshow__slide {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
} */

/* .mixed-media-slideshow.expanded-slideshow .flickity-slider .slideshow__slide.is-selected {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.mixed-media-slideshow.expanded-slideshow .flickity-slider .slideshow__slide.animate-out {
    opacity: 0;
}

.mixed-media-slideshow.expanded-slideshow .slideshow__slide:not(.animate-out)[data-index="0"] {
    opacity: 1;
} */

/* -------------------------------------------------------- */

/*                   Announcement Carousel                  */

/* -------------------------------------------------------- */

.announcement-slide-section .flickity-prev-next-button {
    background-color: transparent;
    border: 0px solid transparent;
    opacity: 0.5;
}

.announcement-slide-section .flickity-next {
    right: 0;
}

.announcement-slide-section .flickity-previous {
    left: 0;
}

.announcement-slide-section .announcement-slide,
.announcement-slide-section .announcement-slide .flickity-viewport {
    min-height: 40px;
}

.announcement-slide-section .announcement-slide .flickity-viewport .slideshow__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.announcement-slide-section .announcement__text {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.3;
}

.announcement-slide-section .slideshow__slide {
    transform: translateX(100%);
    transition: none;
}

.announcement-slide-section .slideshow__slide.is-selected {
    transform: translateX(0);
    transition: transform 0.2s ease-in-out;
}

.announcement-slide-section .slideshow__slide.animate-out {
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
}

/* -------------------------------------------------------- */

/*                Cart Drawer Message Content               */

/* -------------------------------------------------------- */

div.rte.cart-message {
    background-color: var(--colorBody);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 1em;
}

div.rte.cart-message>p {
    font-size: 13px;
    color: var(--colorTitle);
    font-family: var(--typeHeaderPrimary);
    margin-bottom: 0 !important;
}

div.rte.cart-message>p>a {
    color: var(--colorBtnPrimary);
    transition: all 0.15s ease-in-out;
    text-decoration: underline;
    opacity: 1;
}

div.rte.cart-message a:hover {
    opacity: 0.7;
}

.loading--delayed:before,
.loading--delayed::after {
    display: none !important
}

/* SUBSCRIPTION UPDATE MODULE - MARCH 2023 */

.content-lock--modal {
    position: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 30px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 999999999;
    background-color: rgba(105, 118, 116, 0.8);
}

.lock-modal--content {
    background-color: white;
    padding: 60px;
    border-radius: 30px;
}

@media screen and (max-width: 749px) {
    .lock-modal--content {
        padding: 40px 25px;
        border-radius: 10px;
    }
}

.subscription-list--wrap {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
}

@media screen and (max-width: 749px) {
    .subscription-list--wrap {
        flex-direction: column;
        column-gap: 0;
    }
}

.subscription-list--item {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

@media screen and (max-width: 749px) {
    .subscription-list--item {
        width: 100%
    }
}

.subscription-list--item .subtitle.color-button,
.subscription-list--item .subtitle.color-text {
    padding: 3px 0;
    border-radius: 3px;
}

.subscription-list--item .subtitle.color-button {
    padding: 3px 10px;
    background-color: var(--colorBtnPrimary);
    color: white !important;
}

.subscription-list--item.completed .subtitle.color-button {
    padding: 3px 0;
}

.subscription-list--item.completed {
    background-color: var(--colorBtnPrimary);
    cursor: not-allowed;
}

.subscription-list--item.completed p,
.subscription-list--item.completed span.subscription-item--meta {
    color: honeydew !important;
}

.subscription-list--item.completed .subtitle.color-button,
.subscription-list--item.completed .subtitle.color-text,
.subscription-list--item.completed h4.h5 {
    color: white !important;
}

.subscription-list--item.completed .edit-options--wrapper {
    display: none !important;
}

.subscription-list--item:not(.completed):hover {
    background-color: honeydew;
}

.subscription-item--meta {
    display: block;
    font-size: 12px;
}

.update-form--flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 20px;
}

.update-content--wrap {
    width: calc(40% - 10px);
}

.update-form--wrap {
    width: calc(60% - 10px);
}

@media screen and (max-width: 749px) {
    .update-form--wrap {
        margin-top: 1em;
    }

    .update-form--flex {
        flex-direction: column;
        column-gap: 0;
    }

    .update-content--wrap {
        width: 100%;
    }

    .update-form--wrap {
        width: 100%;
    }
}

/* .update-form--fields {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
} */

.update-price--amount {
    display: inline-block;
    font-size: 1.2em;
    color: var(--colorBtnPrimary);
    font-weight: 700;
    margin-right: 10px;
}

.update-price--label {
    font-size: 13px;
    color: var(--colorTextBody);
    font-family: var(--typeHeaderPrimary);
    font-weight: var(--typeHeaderWeight);
    letter-spacing: 0;
}

.update-status--content {
    position: relative;
    padding-top: 3em;
    padding-bottom: 3em;
}

.content-lock--modal #frequency-interval-unit,
.content-lock--modal #item-quantity {
    width: 100%;
}

.update-form-field {
    margin-top: 10px;
    width: 100%;
}

.update-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    flex-wrap: wrap;
}

label span.bind-note {
    font-size: 11px;
    font-family: var(--typeBasePrimary);
    display: block;
}

label.switch-label {
    width: calc(100% - 70px);
}

.update-form--actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

.loader.btn--loading::after {
    border-color: var(--colorBtnPrimary);
    border-top-color: transparent;
    width: 60px;
    height: 60px;
    margin-left: -45px;
}

.update-notice--wrap p {
    max-width: 560px;
    margin: 0 auto 1em;
}

/* The switch - the box around the slider */
.content-lock--modal .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.content-lock--modal .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.content-lock--modal .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.content-lock--modal .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.content-lock--modal input:checked+.slider {
    background-color: var(--colorBtnPrimary);
}

.content-lock--modal input:focus+.slider {
    box-shadow: 0 0 1px var(--colorBtnPrimary);
}

.content-lock--modal input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.content-lock--modal .slider.round {
    border-radius: 34px;
}

.content-lock--modal .slider.round:before {
    border-radius: 50%;
}

/* Klaviyo Form Styling */

label.needsclick.kl-private-reset-css-Xuajs1 {
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback) !important;
    font-weight: var(--typeHeaderWeight) !important;
    letter-spacing: var(--typeHeaderSpacing) !important;
    line-height: var(--typeHeaderLineHeight) !important;
    color: var(--colorTitle) !important;
    font-size: 12px !important;
}

input[type="text"].needsclick.go3602438199.kl-private-reset-css-Xuajs1 {
    font-family: var(--typeBasePrimary) !important;
    color: var(--colorInputText) !important;
}

/* Nutrition Quiz Component */

.slide-wrapper {
    display: block;
    flex-wrap: wrap;
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
    height: 100svh;
    width: 100vw;
    top: 0;
    left: 0;
    background: white;
    z-index: 99;
    padding: 60px 0;
}

.quiz-section .slide-wrapper {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
}

.quiz-section.auto--height .slide-wrapper {
    height: 100%;
    min-height: 650px;
}

@media screen and (max-width: 640px) {
    .quiz-section.auto--height .slide-wrapper {
        min-height: 750px;
        max-height: 100vh;
    }
}

.slide-wrapper input[type="text"],
.slide-wrapper input[type="number"],
.slide-wrapper select {
    text-align: center;
    font-family: var(--typeHeaderPrimary);
    font-size: 1.4em;
    color: var(--colorTitle);
}

.nutrition-slide {
    position: absolute;
    top: 0px;
    left: 15px;
    width: 100%;
    height: 100%;
    max-width: calc(100% - 30px);
    text-align: center;
    transform: translateY(100px);
    opacity: 0;
    display: none;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.nutrition-slide.displayed {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nutrition-slide.displayed[data-slide-id="results"] {
    display: block;
    position: relative;
    margin-bottom: 80px;
}

.nutrition-slide.transitioned {
    opacity: 1;
    transform: translateY(0);
}

.nutrition-slide--content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.nutrition-slide--content.results-slide--content {
    max-width: none;
}

.nutrition-prompt {
    display: block !important;
    width: 100% !important;
    font-size: 2em !important;
    color: var(--colorTitle);
    margin-bottom: 1em;
}

.input-full.nutrition-text-input,
.text-input.pet-breed-input.search-input.nutrition-text-input,
select.input-full.nutrition-select-input {
    border: none;
    color: var(--colorTitle);
    background-color: transparent;
    border-radius: 0;
    border-bottom: 2px solid var(--colorBorder);
    transition: border 0.15s ease-in-out;
}

.input-full.nutrition-text-input:hover:not(:focus),
.text-input.pet-breed-input.search-input.nutrition-text-input:hover:not(:focus),
select.input-full.nutrition-select-input:hover:not(:focus) {
    border-color: var(--colorTitle)
}

.input-full.nutrition-text-input:focus,
.text-input.pet-breed-input.search-input.nutrition-text-input:focus,
select.input-full.nutrition-select-input:hover:not(:focus) {
    border-color: var(--colorBtnPrimary)
}

.input-full.nutrition-text-input:-webkit-autofill,
.input-full.nutrition-text-input:-webkit-autofill:hover,
.input-full.nutrition-text-input:-webkit-autofill:focus {
    text-align: center;
    font-family: var(--typeHeaderPrimary);
    font-size: 1.4em;
    -webkit-text-size-adjust: 100%;
    background: transparent;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}

.nutrition-range--value {
    font-size: 1.5em !important;
    color: var(--colorTitle);
    font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
    color: var(--colorTitle);
}

input.nutrition-range--value {
    padding: 0;
    border: none;
}

.nutrition-results--content {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
}

.nutrition-results--item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(33.33% - 10px);
    padding: 30px;
    border-radius: 10px;
    background: whitesmoke;
    text-align: left;
}

@media screen and (max-width: 1260px) {
    .nutrition-results--item {
        width: calc(50% - 10px);
        padding: 15px;
    }
}

@media screen and (max-width: 589px) {
    .nutrition-results--item {
        width: 100%;
        padding: 15px;
    }
}

.nutrition-slide--nav {
    margin-top: 1em !important;
}

.nutrition-radio--wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 10px;
}

.nutrition-radio--wrapper.pet-selection--wrapper {
    justify-content: flex-start;
}

input[type="radio"].nutrition-radio,
input[type="checkbox"].nutrition-radio {
    display: none;
}

input[type="radio"].nutrition-radio+label.nutrition-radio--label,
input[type="checkbox"].nutrition-radio+label.nutrition-radio--label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center;
    min-width: 200px;
    border-radius: 5px;
    transition: all 0.15s ease-in-out;
}

@media screen and (max-width: 589px) {
    .nutrition-radio--label {
        width: 100%;
    }
}

input[type="radio"].nutrition-radio+label.nutrition-radio--label:not(.pet-selection),
input[type="checkbox"].nutrition-radio+label.nutrition-radio--label:not(.pet-selection) {
    border: 3px solid var(--colorBtnPrimary);
    color: var(--colorBtnPrimary);
    font-family: var(--typeBasePrimary);
    font-weight: bold;
    font-size: 1em;
    /* letter-spacing: 0.1em;
    text-transform: uppercase; */
}

.modernized input[type="radio"].nutrition-radio+label.nutrition-radio--label:not(.pet-selection),
.modernized input[type="checkbox"].nutrition-radio+label.nutrition-radio--label:not(.pet-selection) {
    border: 1px solid var(--colorBtnPrimary);
    color: var(--colorTitle);
    font-family: var(--typeBaseSecondary);
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

input[type="radio"].nutrition-radio+label.nutrition-radio--label.pet-selection {
    background-color: #eeeeee;
    border: 3px solid transparent;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
    height: calc(100% - 10px);
}

input[type="radio"].nutrition-radio+label.nutrition-radio--label.create-pet {
    background-color: transparent;
    border: 3px dashed var(--colorBtnPrimary);
}

input[type="radio"].nutrition-radio:checked+label.nutrition-radio--label:not(.pet-selection),
input[type="checkbox"].nutrition-radio:checked+label.nutrition-radio--label:not(.pet-selection) {
    color: white;
    background-color: var(--colorBtnPrimary);
}

input[type="radio"].nutrition-radio:checked+label.nutrition-radio--label.pet-selection {
    border: 3px solid var(--colorBtnPrimary);
    background-color: var(--colorBtnPrimary);
}

input[type="radio"].nutrition-radio:hover:not(:checked)+label.nutrition-radio--label:not(.pet-selection),
input[type="checkbox"].nutrition-radio:hover:not(:checked)+label.nutrition-radio--label:not(.pet-selection) {
    background-color: honeydew;
}

input[type="radio"].nutrition-radio:hover:not(:checked)+label.nutrition-radio--label.pet-selection:not(.create-pet) {
    border: 3px solid var(--colorBtnPrimary);
}

input[type="radio"].nutrition-radio:hover:not(:checked)+label.nutrition-radio--label.pet-selection.create-pet {
    background-color: honeydew;
}

label.nutrition-radio--label span.label--sublabel {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    display: block;
    font-weight: 400;
}

.modernized label.nutrition-radio--label span.label--sublabel {
    font-family: var(--typeBasePrimary);
    color: var(--colorTextBody);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    display: block;
    font-weight: 400;
}

.modernized input[type="radio"]:checked+label.nutrition-radio--label span.label--sublabel {
    color: white;
}

.nutrition-range--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

input[type="range"].nutrition-range-input {
    -webkit-appearance: none;
    appearance: none;
    background: var(--colorBodyDim);
    cursor: pointer;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 6px;
}

input[type="range"].nutrition-range-input::-webkit-slider-runnable-track,
input[type="range"].nutrition-range-input::-moz-range-track {
    background: var(--colorBodyDim);
    height: 3px;
}

input[type="range"].nutrition-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    position: relative;
    top: 4px;
    margin-top: -0.5em;
    /* Centers thumb on the track */
    background-color: var(--colorBtnPrimary);
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
}

input[type="range"].nutrition-range-input::-moz-range-thumb {
    border: none;
    border-radius: 0;
    background-color: var(--colorBtnPrimary);
    height: 1em;
    width: 1em;
    border-radius: 0.5em;
}

input[type="range"].nutrition-range-input:focus {
    outline: none;
}

.nutrition-pet--option {
    width: calc(50% - 10px);
    order: -1;
}

@media screen and (max-width: 589px) {
    .nutrition-pet--option {
        width: 100%;
    }
}

.nutrition-pet--option.create-option {
    order: 0;
    display: flex;
}

span.nutrition-pet-option--sublabel {
    display: block;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--colorTextBody);
    font-family: var(--typeBaseSecondary);
}

input[type="radio"].nutrition-radio+label.nutrition-radio--label.pet-selection.create-pet h4 {
    color: var(--colorBtnPrimary)
}

input[type="radio"].nutrition-radio:checked+label.nutrition-radio--label.pet-selection h4,
input[type="radio"].nutrition-radio:checked+label.nutrition-radio--label.pet-selection.create-pet h4 {
    color: white
}

input[type="radio"].nutrition-radio:checked+label.nutrition-radio--label.pet-selection span.nutrition-pet-option--sublabel {
    color: honeydew
}

.nutrition-results--outer {
    width: 100%;
}

.nutrition-result--image {
    width: 120px;
    margin-right: 20px;
}

.nutrition-result--content {
    width: calc(100% - 140px);
}

.nutrition-result--text {
    font-size: 14px;
    margin-top: 0.75em;
}

@media screen and (max-width: 589px) {
    .nutrition-result--image {
        width: 70px;
        margin-right: 15px;
    }

    .nutrition-result--content {
        width: calc(100% - 85px);
    }

    .nutrition-results--outer .page-width {
        padding: 0
    }
}

.section-hidden {
    visibility: hidden;
    position: relative;
}

.inpage-link--anchor {
    position: absolute;
    top: -85px;
}

@media screen and (max-width: 640px) {
    .inpage-link--anchor {
        top: -55px;
    }
}

/* MEMORIAL DAY SALE 2023 */

/* @media screen and (max-width: 766px) {
    .announcement-slide-section .announcement-slide .flickity-viewport {
        min-height: 50px !important;
    }
}

@media screen and (max-width: 415px) {
    .announcement-slide-section .announcement-slide .flickity-viewport {
        min-height: 60px !important;
    }
} */

/* Nutrient Profile Section */

.nutrient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 1em;
}

.nutrient-row .subtitle {
    font-size: 12px;
    display: inline-block;
    color: var(--colorTextBody);
}

.nutrient-row>div {
    padding: 0 5px;
    text-align: center;
    width: 13%;
}

.nutrient-row>div:first-of-type {
    padding-left: 0;
    text-align: left;
    width: 61%;
}

.nutrient-row>div:last-of-type {
    padding-right: 0;
    text-align: right;
}

.ingredient-list--text {
    font-size: 14px;
}

@media screen and (max-width: 589px) {
    .nutrient-row {
        font-size: 13px;
    }

    .nutrient-row .subtitle {
        font-size: 10px;
    }

    .nutrient-row>div {
        width: 20%;
    }

    .nutrient-row>div:first-of-type {
        width: 40%;
    }
}

/* Center Image with Text Columns */

.image-highlights--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 979px) {
    .image-highlights--wrapper {
        flex-direction: column;
    }
}

.image-highlight--column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    margin-bottom: -1.5em;
    padding-top: 2em;
}

.image-highlight--content {
    margin-bottom: 1.5em;
}

.image-highlight--column:first-of-type {
    padding-right: 30px;
}

.image-highlight--column:last-of-type {
    padding-left: 30px;
}

.image-highlight--image {
    width: 50%;
}

.image-highlight--image img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 979px) {
    .image-highlight--column {
        width: 100%;
        margin-bottom: 0;
    }

    .image-highlight--column:first-of-type,
    .image-highlight--column:last-of-type {
        padding: 0;
    }

    .image-highlight--image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        order: -1;
    }
}

/* General switch inputs for checkboxes */

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--colorBtnPrimary);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--colorBtnPrimary);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.general-switch-label {
    display: block;
    width: calc(100% - 80px);
}

.switch-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 10px;
}

/* General Form Validation */

form[data-form-validate="true"] input.invalid-input {
    border-color: red;
}

form[data-form-validate="true"] .form-status {
    background-color: #eeeeee;
    padding: 30px;
    text-align: center;
}

form[data-form-validate="true"] .form-status.submit-error {
    color: red;
}

.btn.btn--loading[disabled] {
    background-color: var(--colorBtnPrimary) !important;
}

/* Sticky mobile CTA button */

.mobile-sticky--cta {
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 19;
    width: 100%;
    padding: 10px;
    transform: translateY(calc(100% + 40px));
    transition: transform 0.35s ease-in-out;
}

@media screen and (max-width: 589px) {
    .mobile-sticky--cta.displayed {
        display: block;
    }

    .mobile-sticky--cta.displayed.transitioned {
        transform: translateY(0);
    }
}

/* Manage Training Portal */

.title-cta-wrap.training-actions--wrapper {
    background-color: var(--colorBody);
    border-radius: 15px;
    padding: 30px;
}

.training-session--item {
    padding: 1em 0;
    border-bottom: 1px solid var(--colorBorder);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.training-session--child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.training-session--item:first-of-type {
    border-top: 1px solid var(--colorBorder);
}

.training-date--icon--wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100px;
    width: 100px;
    border-radius: 5px;
    background-color: var(--colorBtnPrimary);
    color: white;
    margin-right: 15px;
}

.training-date--number {
    margin-top: -7px;
    margin-bottom: -4px;
}

.training-status--tag {
    background-color: rgb(203, 203, 203);
    border: 1px solid rgb(107, 107, 107);
    display: inline-block;
    margin-right: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
}

.training-status--tag.status--completed {
    background-color: honeydew;
    border: 1px solid var(--colorBtnPrimary);
    color: var(--colorBtnPrimary);
}

.training-status--tag.status--cancelled_true {
    background-color: #fff5e4;
    border: 1px solid #ffa60c;
    color: #ffa60c;
}

.training-status--tag.status--cancelled_false,
.training-status--tag.status--noshow {
    background-color: rgb(255, 194, 194);
    border: 1px solid red;
    color: red
}

/* In-Cart-Shipping Module */

.free-shipping--notice {
    margin: 10px 25px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    background-color: #eeeeee;
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.15);
    font-family: var(--typeHeaderPrimary);
    font-size: 11px;
}

.free-shipping--bar {
    display: block;
    position: relative;
    width: calc(100% - 80px);
    margin: 5px auto 0;
    background-color: var(--colorBorder);
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
}

.free-shipping--progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    background-color: var(--colorBtnPrimary);
    border-radius: 10px;
}

.free-shipping--percentage {
    position: absolute;
    right: 5px;
    top: -0.5px;
    color: white;
    font-family: var(--typeBasePrimary);
    font-size: 10px;
    line-height: 1;
    font-weight: bold;
}

@media only screen and (min-width: 590px) {
    .free-shipping--notice {
        margin-left: 40px;
        margin-right: 40px;
    }
}

/* Drawer Open - Hide Zendesk */

html.lock-scroll iframe[title="Button to launch messaging window"],
html.lock-scroll iframe[title="Button to launch messaging window, conversation in progress"],
html.lock-scroll iframe[title="Messaging window"],
html.lock-scroll .yotpo-widget-instance {
    display: none;
}

.cart-subtotal--slash {
    text-decoration: line-through;
    font-size: 0.85em;
    opacity: 0.7;
}

/* .cart-offer--upsell {
    text-align: center;
    font-size: 12px;
    margin-top: 1em;
    color: var(--colorBtnPrimary);
    font-weight: 700;
} */

/* BFCM - 2023 */

.hero-split--wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.hero-split--item {
    padding: 10px;
    text-align: center;
    width: 100%;
}

@media screen and (min-width: 861px) {
    .video-parent-section .hero-split--item {
        min-width: 400px;
    }
}

.split-offer--amount {
    font-size: 60px;
    line-height: 1.2;
    color: white;
    margin: 0;
    letter-spacing: 0.05em !important;
}

.video-parent-section .split-offer--amount {
    font-size: 56px;
}

.split-offer--label {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: white;
    margin: 0;
    line-height: 1.3;
    font-family: var(--typeBaseSecondary);
}

.video-parent-section .split-offer--label {
    font-size: 20px;
}

.split-item--divider {
    width: 1px;
    background-color: white;
}

.offer-disclaimer--label {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
}

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

    .split-offer--amount,
    .video-parent-section .split-offer--amount {
        font-size: 38px;
    }

    .split-offer--label,
    .video-parent-section .split-offer--label {
        font-size: 15px;
    }

    .hero-split--item {
        padding: 10px 5px;
        text-align: center;
    }

    .offer-disclaimer--label {
        font-size: 10px;
    }
}

/* Full Split Hero Section */

.split-hero--section {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}

@media screen and (min-width: 590px) {
    .split-hero--section.invert-layout {
        flex-direction: row-reverse;
    }
}

@media screen and (max-width: 589px) {
    .split-hero--section.invert-layout--mobile {
        flex-direction: column-reverse;
    }
}

.split-hero--section .visual--wrapper,
.split-hero--section .content--wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.split-hero--section .content--wrapper {
    display: flex;
    flex-direction: column;
    padding: 90px 50px;
}

.split-hero--section .content--wrapper.vertical-flex--top {
    justify-content: flex-start;
}

.split-hero--section .content--wrapper.vertical-flex--middle {
    justify-content: center;
}

.split-hero--section .content--wrapper.vertical-flex--bottom {
    justify-content: flex-end;
}

@media screen and (max-width: 589px) {
    .split-hero--section .content--wrapper {
        display: block;
        padding: 40px 20px;
    }
}

@media screen and (min-width: 590px) {
    .split-hero--section.video-width--one-third .visual--wrapper {
        width: 33.333%;
    }

    .split-hero--section.video-width--one-third .visual--wrapper+.content--wrapper {
        width: 66.667%;
    }

    .split-hero--section.video-width--two-fifths .visual--wrapper {
        width: 40%;
    }

    .split-hero--section.video-width--two-fifths .visual--wrapper+.content--wrapper {
        width: 60%;
    }

    .split-hero--section.video-width--half .visual--wrapper {
        width: 50%;
    }

    .split-hero--section.video-width--half .visual--wrapper+.content--wrapper {
        width: 50%;
    }

    .split-hero--section.video-width--three-fifths .visual--wrapper {
        width: 60%;
    }

    .split-hero--section.video-width--three-fifths .visual--wrapper+.content--wrapper {
        width: 40%;
    }

    .split-hero--section.video-width--two-thirds .visual--wrapper {
        width: 66.667%;
    }

    .split-hero--section.video-width--two-thirds .visual--wrapper+.content--wrapper {
        width: 33.333%;
    }

    .split-hero--section.section-height--window-height {
        height: 100vh;
        min-height: 100%;
    }

    .split-hero--section.section-height--auto {
        height: auto;
        min-height: 100%;
    }

    .split-hero--section.section-height--auto .visual--wrapper,
    .split-hero--section.section-height--auto .content--wrapper {
        height: auto;
    }

    .split-hero--section.section-height--half-width {
        height: 50vw;
        min-height: 100%;
    }

    .split-hero--section.section-height--small {
        height: 350px;
        min-height: 100%;
    }

    .split-hero--section.section-height--medium {
        height: 450px;
        min-height: 100%;
    }

    .split-hero--section.section-height--large {
        height: 550px;
        min-height: 100%;
    }

    .split-hero--section.section-height--x-large {
        height: 650px;
        min-height: 100%;
    }

    .split-hero--section.section-height--xx-large {
        height: 750px;
        min-height: 100%;
    }
}

@media screen and (max-width: 589px) {
    .expanded-slideshow .split-hero--section {
        position: absolute;
        top: 0;
        left: 0;
        height: fit-content;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        flex-wrap: nowrap;
    }

    .expanded-slideshow .hero--mobile--100vh .split-hero--section {
        height: 100%;
    }

    .expanded-slideshow .hero--mobile--500px .split-hero--section {
        height: 510px;
    }

    .expanded-slideshow .hero--mobile--400px .split-hero--section {
        height: 410px;
    }

    .expanded-slideshow .hero--mobile--300px .split-hero--section {
        height: 310px;
    }

    .expanded-slideshow .hero--mobile--250px .split-hero--section {
        height: 260px;
    }

    .expanded-slideshow .split-hero--section.split-hero--section.invert-layout--mobile {
        flex-direction: column-reverse;
    }

    .expanded-slideshow .split-hero--section .visual--wrapper {
        flex: 0 1 auto;
        height: auto;
    }

    .expanded-slideshow .hero--mobile--100vh .split-hero--section .visual--wrapper {
        flex-grow: 1;
        height: auto;
        min-height: 200px;
    }

    .expanded-slideshow .hero--mobile--500px .split-hero--section .content--wrapper {
        height: 40%;
    }

    .expanded-slideshow .split-hero--section .content--wrapper {
        height: 100%;
        flex: 1 1 100%;
        display: flex;
    }

    .expanded-slideshow .split-hero--section .visual--wrapper+.content--wrapper {
        height: fit-content;
        flex: 1 0;
        display: block;
    }

    .expanded-slideshow .hero--mobile--100vh .split-hero--section .visual--wrapper+.content--wrapper {
        flex-shrink: 0;
        max-height: calc(100vh - 200px);
    }
}

.section-content--block {
    width: 100%;
}

.section-content--block .rte>*:last-child {
    margin-bottom: 0;
}

.responsive-bg--visual,
video.responsive-bg--visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

.responsive-bg--visual.contain {
    object-fit: contain;
}

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

    .responsive-bg--visual.mobile--default,
    video.responsive-bg--visual.mobile--default {
        display: block;
        position: relative;
    }

    /* Lock mobile video to 16x9 */
    video.responsive-bg--visual.mobile--default {
        height: calc(100vw * 0.5625);
    }
}

.split-hero--section .content--wrapper .btn {
    margin-bottom: 5px;
}

.icon-content--flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 30px;
    margin-bottom: 2em;
}

.icon-content--flex:last-of-type {
    margin-bottom: 0;
}

.icon-content--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 70px;
}

.icon-content--icon img {
    width: 100%;
}

.icon-content--content {
    width: calc(100% - 100px);
}

@media screen and (max-width: 589px) {
    .icon-content--flex {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        column-gap: 0;
    }

    .icon-content--icon {
        margin-bottom: 1em;
        height: 50px;
        width: 100%;
    }

    .icon-content--icon img {
        width: auto;
        height: 50px;
    }

    .icon-content--content {
        width: 100%;
        text-align: center;
    }
}

.hero-image--inline {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Search Fix */

.js-drawer-open--search #shopify-section-header {
    position: relative;
    z-index: 99;
}

.site-header--stuck .site-header__search {
    border-radius: 10px;
}

/* Locations List Section Styling */

.location-subregion--groups {
    margin-bottom: 2em;
}

.location-subregion--grid {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 25px;
    row-gap: 25px;
    padding-bottom: 1em;
}

.location-grid--item {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

@media screen and (min-width: 590px) {
    .location-subregion--grid.per-row--2 .location-grid--item {
        width: calc(50% - 25px);
    }

    .location-subregion--grid.per-row--3 .location-grid--item {
        width: calc(33.333% - 25px);
    }

    .location-subregion--grid.per-row--4 .location-grid--item {
        width: calc(25% - 25px);
    }

    .location-subregion--grid.per-row--5 .location-grid--item {
        width: calc(20% - 25px);
    }
}

.location-item--card {
    background-color: white;
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    border-radius: 20px;
}

.location-grid--item.location-region--first::before {
    content: attr(data-location-subregion);
    position: absolute;
    top: -40px;
    font-size: 16px;
    font-weight: bold;
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--colorBtnPrimary);
}

@media screen and (max-width: 589px) {
    .location-grid--item {
        margin-top: 0
    }

    .location-grid--item.location-region--first {
        margin-top: 40px;
    }
}

.location-image--wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60%;
    overflow: hidden;
}

.location-item--card .location-image--wrap {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.location-title--content {
    padding: 20px 0;
}

.location-item--card .location-title--content {
    padding: 20px 15px;
}

.location-title--name {
    font-size: 20px;
    line-height: 0.8;
    margin: 0;
}

.location-title--name>span.location-city--display {
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--colorTextBody);
    display: inline-block;
    white-space: nowrap;
    opacity: 0.8;
}

.location-address--text {
    font-size: 12px;
    line-height: 1.3;
    margin: 6px 0 0;
}

.location-selection--wrap {
    border-top: 1px solid var(--colorBorder);
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 12px;
    flex-wrap: wrap;
}

.location-item--card .location-selection--wrap {
    padding: 10px 15px;
}

.location-selection--item {
    display: flex;
    align-items: center;
    column-gap: 8px;
    color: var(--colorTextBody);
    flex-wrap: wrap;
    font-size: 13px;
}

.location-selection--indicator {
    height: 15px;
    width: 15px;
    background-color: var(--colorTextBody);
    border-radius: 15px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-selection--indicator svg {
    fill: white
}

.location-selection--item.selection--available .location-selection--indicator {
    background-color: var(--colorBtnPrimary);
}

.location-selection--item.selection--available {
    color: var(--colorTitle);
}

.location-links--wrap {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--colorBorder);
    height: 45px;
}

.location-item--card .location-links--wrap {
    padding: 0 15px;
    padding-left: 10px;
}

.location-icon--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    height: 45px;
}

a.location-icon--link svg {
    fill: var(--colorBorder);
    transition: fill 0.15s ease-in-out;
    width: 15px;
}

a.location-icon--link:hover {
    opacity: 1;
}

a.location-icon--link:hover svg {
    fill: var(--colorBtnPrimary);
}

a.location-cta--link {
    font-size: 12px;
    line-height: 1.2;
    font-weight: bold;
    color: var(--colorBtnPrimary);
}

a.location-cta--link>svg {
    display: inline-block;
    height: 8px;
    margin-left: 6px;
    width: 5px;
    transition: margin 0.15s ease-in-out;
}

a.location-cta--link:hover>svg {
    margin-left: 8px;
}

/* Search Customizations */

.search-header--wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-header--wrap .search-bar--page {
    margin-top: 0;
    max-width: 30vw;
    width: 100%;
    position: relative;
}

@media screen and (max-width: 589px) {
    .search-header--wrap {
        display: block;
    }

    .search-header--wrap .search-bar--page {
        margin-top: 1em;
        max-width: 100%;
        width: 100%;
    }
}

.search-header--wrap .search-bar--page input[type="search"] {
    border: none;
    background-color: white;
    border-radius: 30px;
    width: 100%;
    max-width: none;
    z-index: 0;
    padding-left: 30px;
}

.search-header--wrap .search-bar--page .input-group-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}


.search-header--wrap .search-bar--page .input-group-btn .btn {
    background: transparent !important;
    border: none;
    box-shadow: none;
    color: var(--colorBtnPrimary);
    padding-top: 9px;
    padding-bottom: 9px;
}

@media screen and (max-width: 589px) {
    .search-header--wrap .search-bar--page input[type="search"] {
        padding-left: 20px;
    }

    .search-header--wrap .search-bar--page .input-group-btn {
        min-width: auto;
    }

    .search-header--wrap .search-bar--page .input-group-btn .btn {
        padding-left: 20px;
        padding-right: 20px;
        min-width: auto;
    }
}

.search-result--item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--colorBorder);
}

@media screen and (max-width: 1238px) {
    .search-result--item:first-of-type {
        padding-top: 1em;
        border-top: 1px solid var(--colorBorder);
    }
}

.result-image--wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin-right: 25px;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 589px) {
    .result-image--wrap {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
}

.result-image--wrap.placeholder-wrap {
    background-color: var(--colorBtnPrimary);
}


.result-image--wrap.placeholder-wrap .responsive-bg--visual {
    object-fit: initial;
    height: 35px;
    width: auto;
    position: relative
}

@media screen and (max-width: 589px) {
    .result-image--wrap.placeholder-wrap .responsive-bg--visual {
        height: 20px;
    }
}

.result-content--wrap {
    margin-top: 0;
    width: 100%;
}

.result-image--wrap+.result-content--wrap {
    width: calc(100% - 100px);
    margin-top: 16px;
}

@media screen and (max-width: 589px) {
    .result-image--wrap+.result-content--wrap {
        width: calc(100% - 50px);
        margin-top: 8px;
    }
}

.result-title--link {
    display: block;
    width: 100%;
}

.result-title--link h3 .result-item--type {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--colorTextBody);
    opacity: 0.6;
    font-size: 15px;
    font-family: var(--typeBaseSecondary);
}

@media screen and (max-width: 589px) {
    .result-title--link h3 {
        font-size: 17px;
    }

    .result-title--link h3 .result-item--type {
        font-size: 11px;
    }
}

.result-summary--content {
    margin-top: 7px;
    margin-bottom: 14px;
}

@media screen and (max-width: 589px) {
    .result-summary--content {
        font-size: 11px;
        margin-bottom: 7px;
        margin-bottom: 7px;
    }
}

.result-url--display {
    font-size: 13px;
    text-decoration: underline;
    color: var(--colorTextBody);
    opacity: 0.6;
    line-height: 1.2;
    display: block;
}

@media screen and (max-width: 589px) {
    a.result-url--display {
        font-size: 11px;
    }
}

.subtitle.result-cta--block {
    font-size: 14px;
    margin-bottom: 14px;
    margin-top: 14px;
}

.result-cta--block a {
    font-size: 14px;
}

@media screen and (max-width: 589px) {
    .subtitle.result-cta--block {
        font-size: 12px;
        margin-bottom: 7px;
        margin-top: 7px;
    }

    .result-cta--block a {
        font-size: 12px;
    }
}

.search-results--shopping {
    display: none;
}

.search-results--page {
    display: flex;
    flex-direction: column-reverse;
}

.search-results--shopping {
    width: 100%;
    position: relative;
    display: block;
    padding: 15px;
    border-radius: 5px;
    background-color: white;
    overflow-x: scroll;
    overflow-y: hidden;
    box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.5em;
}

@media screen and (max-width: 1238px) {
    .results-shopping--item {
        width: 30vw;
        flex: 0 0 30vw;
        max-width: 200px;
        margin-right: 10px;
        white-space: wrap;
    }

    .results-shopping--item:last-of-type {
        margin-right: 0;
    }
}

.results-shopping--flex {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 2em;
    margin-bottom: -2em;
}

@media screen and (min-width: 1239px) {
    .search-results--page {
        align-items: flex-start;
        flex-wrap: wrap;
        flex-direction: row;
        position: relative;
    }

    .search-results--list {
        width: 70%;
        margin-right: 50px;
    }

    .search-results--shopping {
        width: calc(30% - 50px);
        position: sticky;
        top: 100px;
        padding: 40px;
        border-radius: 20px;
        max-height: calc(100vh - 130px);
        overflow-y: scroll;
    }

    .results-shopping--flex {
        display: flex;
        white-space: unset;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 15px;
    }

    .results-shopping--item {
        width: calc(50% - 5px);
    }
}

.shopping-image--wrap {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.shopping-content--wrap {
    padding-top: 5px;
}

.shopping-content--wrap h4 {
    margin: 0;
    font-size: 13px;
}

@media screen and (max-width: 589px) {
    .shopping-content--wrap h4 {
        font-size: 11px;
    }
}

.shopping-content--wrap div.subtitle {
    font-size: 13px !important;
    margin: 0 !important;
}


@media screen and (max-width: 589px) {
    .shopping-content--wrap div.subtitle {
        font-size: 11px !important;
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--colorTextBody) !important;
    }

    .search-results--shopping>h2.subtitle {
        font-size: 12px;
    }

    .search-results--shopping>hr.mt1.mb1 {
        margin-top: 6px !important;
        margin-bottom: 10px !important;
    }
}

.hide-w--rise {
    opacity: 0;
    transform: translateY(40px);
}

/* GLOBAL CUSTOM DRAWER STYLES */

.custom-modal--drawer {
    visibility: hidden;
    width: 450px;
    position: fixed;
    z-index: 29;
    top: 0;
    right: 0;
    height: 100vh;
    max-height: 100%;
    background-color: var(--colorBodyAlt);
    transform: translateX(100%);
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    transition: all 0.35s ease-in-out;
    background-color: var(--colorBodyAlt);
}

@media screen and (max-width: 449px) {
    .custom-modal--drawer {
        width: 100vw;
    }
}

.custom-modal--drawer.modal-transition {
    visibility: visible;
    transition: all 0.35s ease-in-out;
}

.custom-modal--drawer.modal-transition.modal-displayed {
    transform: translateX(0);
    transition: all 0.35s ease-in-out;
}

.custom-modal--drawer .drawer-list-wrap {
    padding: 40px;
}

@media screen and (max-width: 449px) {
    .custom-modal--drawer .drawer-list-wrap {
        padding: 25px;
    }
}

.modal-close--wrap {
    position: absolute;
    top: 30px;
    right: 30px;
}

.modal-close--icon {
    opacity: 0.5;
    background-color: transparent;
    cursor: pointer;
}

.modal-close--icon img {
    background-color: transparent;
}

/* MODAL LOGIN FORM STYLES */

.error-message--wrap {
    display: none;
    margin-top: 1em;
    padding: 10px;
    border-radius: 5px;
    background-color: rgb(255, 194, 194);
    color: red;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
}

.error-message--wrap.error--active {
    display: block;
}

/* WHISTLE SPECIFIC */

.inline-notice--pane {
    background-color: var(--colorBodyAlt);
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 25px -20px #000000;
    box-shadow: 0 0 25px -20px #000;
    margin-bottom: 1em;
}

.basic-subtitle--small {
    font-family: var(--typeBasePrimary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: var(--color-body-text);
}

.btn.btn--secondary.btn--delete {
    border-color: red;
    color: red;
}

.btn.btn--secondary.btn--delete:hover {
    background-color: red !important;
    color: white;
}

.btn:not(.btn--secondary, .btn--tertiary).btn--delete {
    background-color: red;
    border-color: red;
}

.btn:not(.btn--secondary, .btn--tertiary).btn--delete:hover {
    color: red;
    border-color: red;
    background-color: transparent;
}

details.details-sublabel--xs.whistle--type .details--content {
    position: absolute;
    z-index: 2;
}

details.details-sublabel--xs summary {
    margin-top: 5px;
}

details.details-sublabel--xs.whistle--type summary {
    font-size: 13px;
}

@media screen and (max-width: 589px) {
    details.details-sublabel--xs.whistle--type summary {
        font-size: 12px !important;
    }
}

details.details-sublabel--xs summary {
    font-size: 13px;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
    color: var(--colorBtnPrimary);
    transition: opacity 0.2s ease-in-out;
}

details.details-sublabel--xs summary:hover {
    opacity: 0.5;
}

details.details-sublabel--xs p,
details.details-sublabel--xs h6.subtitle {
    font-size: 13px;
}

details.details-sublabel--xs .details--content {
    background-color: var(--colorBody);
    border-radius: 10px;
    padding: 20px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.item--attributes {
    font-size: 11px;
    color: var(--colorTextBody);
    line-height: 1.3;
}

.item-att--value {
    font-weight: 700;
}

/* Whistle GWP Modal */

.custom-modal--takeover {
    visibility: hidden;
    width: 100%;
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    max-height: 100%;
    background-color: var(--colorBodyAlt);
    transform: translateY(100%);
    -webkit-box-shadow: 0px 0px 25px -10px #000000;
    box-shadow: 0px 0px 25px -15px #000000;
    transition: all 0.35s ease-in-out;
    background-color: var(--colorBodyAlt);
}

.custom-modal--takeover .modal-close--wrap {
    z-index: 1;
}

.custom-modal--takeover.modal-transition {
    visibility: visible;
    transition: all 0.35s ease-in-out;
}

.custom-modal--takeover.modal-transition.modal-displayed {
    transform: translateY(0);
    transition: all 0.35s ease-in-out;
}

.takeover-content--wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: scroll;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.takeover-content--wrapper.full--takeover {
    padding: 0;
}

@media screen and (max-width: 767px) {
    .takeover-content--wrapper:not(.full--takeover) {
        padding: 20px;
    }
}

.takeover-content--main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

@media screen and (max-width: 767px) {
    .takeover-content--main {
        display: block;
    }
}

.takeover-content--hero {
    width: calc(50vw - 50px);
    height: calc(100vh - 100px);
    border-radius: 50px;
    overflow: hidden;
    position: sticky;
    top: 0;
}

@media screen and (max-width: 767px) {
    .takeover-content--hero {
        width: calc(100% + 20px);
        height: 300px;
        margin-left: -10px;
        margin-right: -10px;
        position: relative;
        border-radius: 30px;
    }
}

.takeover-content--content {
    width: calc(50vw - 50px);
    max-width: 620px;
    padding: 50px 0 50px 50px;
}

@media screen and (max-width: 767px) {
    .takeover-content--content {
        width: 100%;
        margin-top: 2em;
        max-width: none;
        padding: 0;
    }
}

input[type="radio"].gift-radio--hidden {
    display: none;
}

input[type="radio"].gift-radio--hidden+label.gift-image--label {
    border: 1px solid var(--colorBorder);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    width: 140px;
    background-color: #efefef;
    font-family: var(--typeHeaderPrimary);
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.3;
    transition: all 0.2s ease-in-out;
}

@media screen and (max-width: 767px) {
    input[type="radio"].gift-radio--hidden+label.gift-image--label {
        width: calc(50% - 5px);
    }

    input[type="radio"].gift-radio--hidden+label.gift-image--label img {
        height: 100px;
    }
}

input[type="radio"].gift-radio--hidden:not(:checked):hover+label.gift-image--label {
    border: 1px solid var(--colorTitle);
}

input[type="radio"].gift-radio--hidden:checked+label.gift-image--label {
    border: 3px solid var(--colorBtnPrimary);
    color: var(--colorBtnPrimary);
    padding: 8px;
}

input[type="radio"].gift-radio--hidden+label.gift-image--label span.label-text {
    display: block;
    margin-top: 10px;
}

input[type="radio"][name="gift-size"]:disabled+label {
    display: none !important;
}

.image-label--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    flex-wrap: wrap;
}

.takeover-description--main {
    font-size: 16px;
}

@media screen and (max-width: 767px) {
    .takeover-description--main {
        font-size: 14px;
    }
}

.takeover-description--disclaimer {
    font-size: 12px;
}

@media screen and (max-width: 767px) {
    .modal-close--wrap.icon-with--bg {
        top: 15px;
        right: 15px;
        z-index: 1;
    }

    .modal-close--wrap.icon-with--bg .modal-close--icon {
        padding: 5px;
        height: 30px;
        width: 30px;
        border-radius: 15px;
        background-color: white;
        box-shadow: 0px 0px 25px -10px #000000;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-close--wrap.icon-with--bg .modal-close--icon img {
        opacity: 0.5;
        height: 15px !important;
        width: 15px !important;
    }

    .custom-modal--takeover.modal-transition.modal-displayed .cta-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        padding: 10px;
        border-top: 1px solid var(--colorBorder);
        background: white;
    }

    .fixed-cta--mobile {
        margin-bottom: 70px;
    }
}

/* Whistle Hero Image Section */

.whistle-hero--wrapper {
    position: relative;
}

.hero-image--wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}

.hero-image--wrapper img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .hero-image--wrapper .mobile-hero--image {
        display: none;
    }

    .hero-image--wrapper.has-mobile--bg:not(.has-desktop--bg) .mobile-hero--image {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .hero-image--wrapper .desktop-hero--image {
        display: none;
    }

    .hero-image--wrapper.has-desktop--bg:not(.has-mobile--bg) .desktop-hero--image {
        display: block;
    }
}

.whistle-hero--wrapper .hero-content--wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content--container {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

img.in-title--image {
    display: inline-block;
    height: 1em;
    width: auto;
}

.hero-title--content {
    font-size: 56px;
}


@media screen and (max-width: 767px) {
    .hero-title--content {
        font-size: 32px;
    }
}

.hero-content--wrapper .hero-subtitle--heading p,
.subtitle.subtitle--alt {
    font-family: "Barlow Condensed" !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 28px;
}

.hero-content--wrapper .hero-button--wrapper,
.subtitle.subtitle--alt {
    margin-top: 2em;
}

.hero-content--wrapper .hero-button--wrapper .hero-btn--item {
    font-family: "Barlow Condensed" !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 24px;
}

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

    .hero-content--wrapper .hero-subtitle--heading p,
    .hero-content--wrapper .hero-button--wrapper .hero-btn--item {
        font-size: 18px;
    }
}

.offer-value--badge {
    position: absolute;
    right: 60px;
    top: 60px;
    width: 150px;
    z-index: 1;
    transform: rotate(30deg);
}

.offer-value--badge.custom-badge--placement {
    top: 40px;
    right: -70px;
}

@media screen and (max-width: 589px) {
    .offer-value--badge.custom-badge--placement {
        top: 100px;
        right: 20px;
    }
}

.offer-value--text {
    font-family: "Barlow Condensed" !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
    position: relative;
    z-index: 2;
    color: white;
    padding: 75px 15px 15px 15px;
}

@media screen and (max-width: 767px) {
    .offer-value--badge {
        right: 2px;
        top: 9px;
        width: 65px;

    }

    .offer-value--text {
        font-size: 16px;
        padding: 30px 10px 10px 10px;
    }
}

/* FAQ Columns Section */

.categories-flex--wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 60px;
}

.faq-column--group {
    display: block;
    width: calc(50% - 30px);
}

@media screen and (max-width: 767px) {
    .faq-column--group {
        width: 100%;
    }
}

.faq-column--question {
    border-bottom: 1px solid var(--colorBorder);
}

.faq-column--group .rte.collapsible-content__inner--faq {
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.faq-column--group .collapsible-trigger {
    width: 100%;
}

/* Interactive Image Comparison Component */

.compare-component--content {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.compare-component--content .compare-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.compare-component--content .compare-image--before {
    width: 50%;
}

.compare-component--content .compare-slider--element {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    border: none;
    margin: 0;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.compare-component--content .compare-slider--element:hover {
    background: transparent;
}

.compare-component--content .compare-slider--element::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 200vh;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 0) 54%);
    cursor: pointer;
    box-shadow: none;
}

.compare-component--content .compare-slider--element::-moz-range-thumb {
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 0) 54%);
    cursor: pointer;
    box-shadow: none;
}

.compare-component--content .slider-element--button {
    pointer-events: none;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    left: 50%;
    top: 50%;
    /* transform: translate(-25%, -25%); */
    display: flex;
    justify-content: center;
    align-items: center;
}

.compare-component--content .slider-element--button:after,
.compare-component--content .slider-element--button:before {
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5D5D5D;
    border-width: 0 2px 2px 0;
}

.compare-component--content .slider-element--button:after {
    transform: rotate(-45deg);
}

.compare-component--content .slider-element--button:before {
    transform: rotate(135deg);
}

img.compare-image--solo {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

section.no--spacing {
    padding: 0;
}

.compare-flex--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 80px;
}

.compare-image--column,
.compare-content--column {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .compare-flex--wrapper {
        flex-direction: column;
    }
}

@media screen and (min-width: 1268px) {
    .compare-flex--wrapper {
        padding: 0 80px;
    }
}

@media screen and (min-width: 768px) {
    .compare-flex--wrapper.desktop--invert {
        flex-direction: row-reverse;
    }

    .compare-image--column {
        width: calc(60% - 40px)
    }

    .compare-content--column {
        width: calc(40% - 40px)
    }
}

.icon-block--content {
    line-height: 1.3;
    font-size: 16px;
}

.compare-content--column .subtitle {
    font-size: 16px;
    line-height: 1.3;
}

.highlight-callout {
    background-color: var(--colorBtnPrimary);
    color: var(--colorBtnPrimaryText);
}

.rich-text--section .rte h1,
.rich-text--section .rte h2,
.rich-text--section .rte h3,
.rich-text--section .rte h4,
.rich-text--section .rte h5,
.rich-text--section .rte h6 {
    margin-bottom: 0;
    line-height: 1.7;
}

/* Trending search section */

.trending-search--wrapper {
    display: block;
    padding: 10px 20px 10px 0;
    max-width: 100vw;
    overflow-x: scroll;
}

.trending-search--wrapper::-webkit-scrollbar {
    display: none;
}

.trending-search--wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: scroll;
}

.trending-search--content {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: fit-content;
    column-gap: 15px;
    margin: 0 auto;
    white-space: nowrap;
}

.trending-search--label {
    font-size: 13px;
    font-family: var(--typeHeaderPrimary);
    text-align: left;
    position: sticky;
    z-index: 2;
    left: 0;
    padding-left: 20px;
    padding-right: 15px;
    margin-right: -15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.trending-search--link {
    font-family: var(--typeBaseSecondary);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.trending-search--content .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Supplements collection layout */

.item-panel--wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 30px;
    flex-wrap: wrap;
}

.item-panel--primary {
    padding: 0;
    background-color: var(--colorTitle);
    overflow: hidden;
    width: calc(33% - 17px);
    border-radius: 30px;
}

@media screen and (max-width: 1019px) {
    .item-panel--primary {
        width: calc(50% - 15px);
    }
}

@media screen and (max-width: 589px) {
    .item-panel--primary {
        width: 100%;
    }
}

.item-panel--flex {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.item-panel--image {
    display: block;
    width: 100%;
    padding-top: 100%;
    position: relative;
}

.item-panel--content {
    width: 100%;
    padding: 30px;
}

.item-panel--primary .item--title {
    color: var(--colorBtnPrimary);
    font-size: 32px;
}

.item-panel--primary .product__price {
    color: var(--colorBodyAlt);
}

.item-panel--primary .rte {
    color: var(--colorBorder);
}

@media screen and (max-width: 589px) {
    .item-panel--primary .item--title {
        font-size: 24px;
    }

    .item-panel--content .rte,
    .item-panel--content .rte p {
        font-size: 14px;
        line-height: 1.4;
    }
}

.item-actions--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 10px;
    margin-top: 1em;
    flex-wrap: wrap;
}

.item-panel--wrapper .item-actions--wrapper .btn {
    flex: 1 0 fit-content;
}

.item-actions--wrapper .btn.btn--secondary {
    border-color: white;
    color: white;
}

.item-actions--wrapper .btn.btn--secondary {
    border-color: white;
    color: white;
}

.item-actions--wrapper .btn.btn--secondary:hover {
    background-color: white !important;
    color: var(--colorBtnPrimary) !important;
    border-color: white !important;
}

/* Infinite scroller component */

.scroll-items--wrapper {
    display: flex;
    flex-wrap: wrap;
}

.scroller-outer[data-scroller-active="true"] {
    overflow: hidden;
}

.scroller-outer[data-scroller-active="true"] .scroll-items--wrapper {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller-outer[data-scroll-direction="right"] {
    --_animation-direction: reverse;
}

.scroller-outer[data-scroll-direction="left"] {
    --_animation-direction: forwards;
}

.scroller-outer[data-scroll-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller-outer[data-scroll-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

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

.scroller-image--item img {
    width: 100%;
    height: auto;
    max-width: 300px;
}

.scroller-text--item {
    font-size: 24px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

.scroller-text--heading {
    font-family: var(--typeHeaderPrimary);
    font-weight: 400;
}

.scroller-text--subtitle {
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.scroller-text--button {
    font-family: var(--typeBaseSecondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 5px;
}

/* Featured ingredients section - piggybacked from Testimonials */

.ingredient-feature--content {
    width: calc(100% + 200px);
    opacity: 1;
    margin: 0 -100px;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@media screen and (max-width: 589px) {
    .ingredient-feature--content {
        width: calc(100vw - 100px);
        margin: 0 auto;
    }
}

.flickity-enabled .testimonials-slide:not(.is-selected) .ingredient-feature--content {
    opacity: 0;
    transform: translateY(100px)
}

.ingredient-rte {
    padding-top: 1.5em;
    padding-bottom: 3em;
}

.ingredient-rte h3 {
    font-size: 1em;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--typeBaseSecondary);
    margin-bottom: 0;
}

.ingredient-rte p {
    font-size: 1em;
    font-family: var(--typeBasePrimary);
    margin-top: 0.25em;
    margin-bottom: 1.5em;
    text-align: justify;
    text-align-last: left;
}

.ingredient-rte *:last-child {
    margin-bottom: 0;
}

/* How to supplement component */

.panel-block--item {
    padding: 15px 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--colorBorder);
    text-align: center;
}

.panel-block--item:first-of-type {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 3em;
}

.panel-block--item:last-of-type {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: none;
}

.panel-icon--wrapper {
    height: 40px;
    width: 40px;
    margin: 0.5em auto;
    position: relative;
}

.panel-icon--text {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 350px;
}

/* Flexible content blocks section */

.hide-overflow {
    overflow: hidden;
}

.section-bg--image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.content-block--item {
    position: relative;
    z-index: 2;
}

.content-blocks--flex {
    display: flex;
}

.content-blocks--flex.display--left {
    justify-content: flex-start;
}

.content-blocks--flex.display--center {
    justify-content: center;
}

.content-blocks--flex.display--right {
    justify-content: flex-end;
}

@media screen and (max-width: 767px) {
    .content-blocks--flex.mobile--left {
        justify-content: flex-start;
    }

    .content-blocks--flex.mobile--right {
        justify-content: flex-start;
    }

    .mobile--right .content-blocks--wrapper,
    .mobile--left .content-blocks--wrapper {
        width: 70%;
    }

    .content-blocks--flex.mobile--left .content-image--float {
        right: -100px
    }

    .content-blocks--flex.mobile--right .content-image--float {
        left: -100px
    }

    .content-blocks--flex.mobile--fade .content-image--float {
        opacity: 0.5;
    }
}

.content-blocks--wrapper {
    display: block;
    width: 100%;
}

.icon-content--group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.icon-group--item {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    width: calc(50% - 10px);
    flex-wrap: wrap;
}

.icon-group--item.align--top {
    align-items: flex-start;
}

.icon-group--item.align--middle {
    align-items: center;
}

.icon-group--item.align--bottom {
    align-items: flex-end;
}

@media screen and (max-width: 767px) {
    .icon-group--item {
        width: 100%;
    }
}

.icon-icon--column {
    display: block;
    position: relative;
}

.icon-text--column {
    font-size: 1em;
    line-height: 1.4;
}

.icon-text--column.text--heading {
    font-family: var(--typeHeaderPrimary);
    font-weight: 400;
    letter-spacing: 0;
}

.icon-text--column.text--subtitle {
    font-family: var(--typeBaseSecondary);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.content-blocks--columns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.content-blocks--columns .subtitle {
    font-size: 23px;
    line-height: 1.4
}

@media screen and (max-width: 767px) {
    .content-blocks--columns {
        flex-direction: column;
        row-gap: 1em;
    }

    .content-blocks--columns .column--one,
    .content-blocks--columns .column--two {
        width: 100%;
    }

    .content-blocks--columns .column--one img,
    .content-blocks--columns .column--two img {
        max-width: 80px;
        height: auto;
    }

    .content-blocks--columns .subtitle {
        font-size: 16px;
    }
}

.content-columns--column {
    display: block;
    margin-bottom: -1em;
}

.content-image--float {
    position: absolute;
    z-index: 1;
}

.content-image--float.position-top--left {
    top: 0;
    left: 0;
}

.content-image--float.position-top--center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.content-image--float.position-top--right {
    top: 0;
    right: 0;
}

.content-image--float.position-bottom--left {
    bottom: 0;
    left: 0;
}

.content-image--float.position-bottom--center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.content-image--float.position-bottom--right {
    bottom: 0;
    right: 0;
}

.content-image--float.layout-fill--height {
    height: 100%;
    width: auto;
}

.content-image--float.layout-fill--width {
    height: auto;
    width: 100%;
}

/* Featured items section */

.featured-item--section .article__title {
    font-size: 1em;
}

@media only screen and (min-width: 590px) {
    .featured-item--section .article__title {
        font-size: calc(var(--typeBaseSize)* 1.18);
    }
}

@media screen and (max-width: 589px) {
    .featured-item--section .article__grid-image .image-wrap {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .featured-item--section .article__grid-meta.blog--article-card-meta {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
}

.items-section--rte {
    margin-top: -1em;
}

.items-section--flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 60px;
    position: relative;
}

@media screen and (max-width: 768px) {
    .items-section--flex {
        flex-direction: column;
        row-gap: 2em;
    }
}

.items-title--flex {
    position: sticky;
    top: 120px;
    width: calc(35% - 30px);
}

.items-list--flex {
    width: 100%;
    position: relative;
}

.items-title--flex+.items-list--flex {
    width: calc(65% - 30px);
}

@media screen and (max-width: 768px) {
    .items-title--flex {
        position: static;
    }

    .items-title--flex,
    .items-list--flex,
    .items-title--flex+.items-list--flex {
        width: 100%;
    }
}

@media screen and (max-width: 589px) {
    .items-list--flex .grid-overflow-wrapper {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* Product Compare Table */

.product-table--wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

@media screen and (max-width: 990px) {
    .product-table--wrapper {
        white-space: nowrap;
        overflow-x: scroll;
        justify-content: flex-start;
        margin-left: -40px;
        padding-left: 40px;
        margin-right: -40px;
        padding-right: 40px;
    }

    .product-table--wrapper::-webkit-scrollbar {
        display: none;
    }
}

@media screen and (max-width: 589px) {
    .product-table--wrapper {
        margin-left: -20px;
        padding-left: 20px;
        margin-right: -20px;
        padding-right: 20px;
    }
}

.product-table--column {
    width: 100%;
    margin: 50px 0;
    display: block;
    padding: 30px 0;
}

@media screen and (max-width: 589px) {
    .product-table--column {
        margin: 20px 0;
        display: block;
        padding: 10px 0;
    }
}

@media screen and (max-width: 990px) {
    .product-table--column {
        flex: 1 0 300px;
    }
}

@media screen and (max-width: 589px) {
    .product-table--column {
        flex: 1 0 250px;
    }
}

.product-table--wrapper .product-table--column:not(.featured--column):first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.product-table--wrapper .product-table--column:not(.featured--column):last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.product-table--column.featured--column {
    margin: 0;
    display: block;
    padding: 80px 0;
    border-radius: 30px;
}

.product-table--column .table-column--content {
    padding: 0.5em 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.product-table--column .table-column--content hr {
    width: 100%;
}

@media screen and (max-width: 589px) {
    .product-table--wrapper .product-table--column:not(.featured--column):first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .product-table--wrapper .product-table--column:not(.featured--column):last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .product-table--column.featured--column {
        padding: 30px 0;
        border-radius: 10px;
    }

    .product-table--column .table-column--content {
        padding: 0.5em 20px;
    }
}

.product-table--column:not(.featured--column)+.product-table--column:not(.featured--column) .table-column--content {
    border-left: 1px solid var(--colorBorder);
}

.product-table--point {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 10px;
}


.product-table--point+.product-table--point {
    margin-top: 0.5em;
}

.table-point--icon {
    width: 20px;
    margin-top: 5px;
}

.point-icon--wrapper {
    height: 20px;
    width: 20px;
    position: relative;
}

.table-point--icon+.table-point--content {
    width: calc(100% - 30px);
}

.table-point--content {
    width: 100%;
    white-space: normal;
}

@media screen and (max-width: 589px) {
    .table-point--content {
        font-size: 14px;
    }

    .table-point--icon+.table-point--content {
        width: calc(100% - 24px);
    }

    .table-point--icon {
        width: 14px;
        margin-top: 5px;
    }

    .point-icon--wrapper {
        height: 14px;
        width: 14px;
        position: relative;
    }
}

/* .item-selling--points {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 5px;
    line-height: 1.2;
}

.item-selling--points .subtitle {
    color: white;
    text-align: center;
    width: 100%;
} */

.item-points--outer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 5px;
    line-height: 1.2;
}

.item-points--wrapper {
    width: fit-content;
}

.item-points--point {
    display: flex;
    column-gap: 10px;
    color: white;
}

.item-points--icon {
    color: var(--colorBtnPrimary);
}

.item-points--point+.item-points--point {
    margin-top: 10px;
}

.custom__item-inner.custom__item-inner--image .image-wrap {
    border-radius: 15px;
}

details summary::-webkit-details-marker,
details summary::marker {
    display: none !important;
}

/* Slideshow "bug" display */

.indicator--bug {
    position: absolute;
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    line-height: 1.1;
    font-family: var(--typeBaseSecondary);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: white;
    padding: 14px;
}

.indicator-bug--content {
    position: relative;
    z-index: 1;
}

.bug-bg--wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.modal-close--icon.close-with--bg {
    background: white;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 10px;
    opacity: 1;
    box-shadow: 0px 0px 25px -10px var(--colorTitle);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.modal-close--icon.close-with--bg:hover {
    opacity: 0.5;
}

.modal-close--icon.close-with--bg img {
    height: auto;
}

.header-cta--wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex: 1 0 auto;
}

.header-cta--wrapper .btn.btn--primary-light {
    color: var(--colorTitle);
    border-color: var(--colorBorder);
    background: var(--colorBorder);
}

@media screen and (max-width: 767px) {
    .header-cta--wrapper .btn {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 13px;
        line-height: 1;
    }
}

.alt-megamenu--wrapper {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    column-gap: 15px;
}

.mobile-nav .alt-megamenu--wrapper {
    display: block;
    width: 100%;
}

.alt-megamenu--wrapper .alt-megamenu--item {
    width: calc(33% - 15px);
    padding: 0 !important;
    text-align: left;
}

.alt-megamenu--wrapper[data-column-count="4"] .alt-megamenu--item {
    width: calc(25% - 15px);
}

.alt-megamenu--wrapper[data-column-count="5"] .alt-megamenu--item {
    width: calc(20% - 15px);
}

.mobile-nav .alt-megamenu--wrapper .alt-megamenu--item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 15px;
    text-align: left;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.alt-megamenu--item .subtitle {
    line-height: 1.1
}

.mobile-nav .alt-megamenu--wrapper .alt-megamenu--item .subtitle {
    /* display: block;
    font-size: 19px;
    font-family: var(--typeHeaderPrimary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: var(--typeHeaderWeight) !important; */
    font-size: 20px !important;
}

.mobile-nav .alt-megamenu--wrapper .alt-megamenu--item .alt-megamenu--column {
    /* display: block;
    font-size: 19px;
    font-family: var(--typeHeaderPrimary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: var(--typeHeaderWeight) !important; */
    width: calc(100% - 145px);
}

.mobile-nav .alt-megamenu--wrapper .alt-megamenu--item .alt-megamenu--column .btn {
    width: fit-content;
    display: inline-block;
    padding: 7px 15px;
    font-size: 13px;
    line-height: 1.1;
    margin-top: 0.5em;
}

.alt-image--wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.mobile-nav .alt-megamenu--wrapper .alt-megamenu--item .alt-image--wrapper {
    margin: 0;
    width: 130px;
    padding-top: 130px;
}

.site-nav .btn {
    line-height: 1.1;
    padding: 8px 15px;
}

.site-nav .alt-megamenu--column .btn {
    margin-top: 0.75em;
}

.mobile-nav .mobile-nav__item.button--wrapper {
    padding-left: 20px;
    padding-right: 20px;
}

/* .mobile-nav .mobile-nav__item.button--wrapper::after {
    display: none;
} */

.mobile-nav .mobile-nav__item.button--wrapper .btn {
    font-size: 20px;
    font-family: var(--typeBaseSecondary);
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.mobile-nav .mobile-nav__item.button--wrapper .btn.btn--primary {
    color: var(--colorBtnPrimaryText);
}

.mobile-nav .mobile-nav__item.button--wrapper .btn.btn--secondary {
    color: var(--colorBtnPrimary);
}

.mobile-nav .mobile-nav__item.button--wrapper .btn.btn--primary-light {
    color: var(--colorTitle);
}

.mobile-nav .mobile-nav__item .btn {
    width: 100%;
}

/* Cricle image with blocks section */

.circle-blocks--flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 30px;
}

@media screen and (min-width: 768px) {
    .circle-blocks--flex.invert--direction {
        flex-direction: row-reverse;
    }
}

@media screen and (max-width: 767px) {
    .circle-blocks--flex {
        display: block;
    }
}

.circle-image--wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 1000px;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .circle-image--column {
        max-width: 200px;
        margin: 0 auto 1em;
    }
}

.alt-megamenu--content {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 0;
}

/* FAQ Categories */

.faq-columns--wrapper {
    position: relative;
}

.faq-columns--wrapper .faq-column--nav {
    position: sticky;
    height: 100%;
    top: 80px;
    z-index: 1;
}

@media only screen and (min-width: 590px) {
    .faq-columns--wrapper {
        display: flex;
    }

    .faq-columns--wrapper .faq-column--nav {
        flex-basis: 35%;
        top: 120px;
    }

    .faq-columns--wrapper .faq-column--questions {
        flex-basis: 65%;
        padding-left: 50px;
    }

    .faq-columns--wrapper .tag-display-container {
        display: flex;
        flex-direction: column;
    }

    .faq-columns--wrapper .detail-panel {
        max-width: 380px;
        margin: auto;
    }
}

@media only screen and (max-width: 589px) {
    .faq-column--nav {
        -webkit-box-shadow: 0px 0px 15px -10px #000000;
        box-shadow: 0px 0px 15px -10px #000000;
    }

    .searchbar-mobile {
        display: block;
        background-color: var(--colorTitle);
        margin-bottom: 2em;
        max-width: 100vw;
        scrollbar-width: none;
        overflow: scroll;
        border-radius: 10px;
    }

    .searchbar-mobile-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        margin: 0 auto;
        white-space: nowrap;
        background-color: transparent;
    }

    .faq-columns--wrapper .detail-panel {
        padding: 5px 0 5px 0;
        border-radius: 10px;
    }

    .faq-column--nav .searchbar--label {
        color: var(--colorBtnPrimary) !important;
        background: linear-gradient(90deg, #414d4b calc(100% - 15px), rgba(65, 77, 75, 0) 100%);
        position: sticky;
        z-index: 2;
        left: 0;
        height: 100%;
        line-height: 2;
        text-align: left;
        padding-left: 15px;
        padding-right: 10px;
        font-size: 0.8em;
    }

    .faq-column--nav .detail-panel .tag-display-container {
        margin-bottom: 0.1em
    }

    .faq-column--nav .detail-panel .tag-display-container a {
        color: var(--colorBodyAlt) !important;
        font-size: 0.8em;
        padding-right: 10px;
    }
}

@media screen and (max-width: 640px) {
    .inpage-link--anchor.searchbar-mobile-position {
        top: -145px;
    }
}

/* Video Carousel Component */

.carousel--divider {
    margin: auto;
    border-top: 1px solid;
    padding-top: 2em;
}

.video-slide {
    width: auto;
    margin: 0 10px;
}

@media screen and (max-width: 589px) {
    .video-slide {
        margin: 0 5px;
    }
}

.video-card--item.image-wrap {
    position: relative;
    border-radius: 20px;
}

@media screen and (max-width: 589px) {
    .video-card--item.image-wrap {
        border-radius: 10px;
    }
}

.video-card--item.image-wrap video {
    object-fit: cover;
}

.video-content-container {
    position: relative;
}

.top--gradient {
    background: linear-gradient(180deg, #414D4B80 0%, transparent 42.67%);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
}

.bottom--gradient {
    background: linear-gradient(0deg, #414D4B80 0%, transparent 70.67%);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
}

@media only screen and (min-width: 590px) {
    .ratio--vertical {
        width: auto;
        aspect-ratio: 9 / 16;
    }

    .ratio--square {
        aspect-ratio: 1 / 1;
    }

    .ratio--dynamic {
        width: auto;
        aspect-ratio: auto;
    }

    .ratio--wide {
        width: auto;
        aspect-ratio: 16 / 9;
    }
}

@media only screen and (max-width: 589px) {
    .ratio--vertical {
        width: auto;
        aspect-ratio: 9 / 16;
    }

    .ratio--square {
        aspect-ratio: 1 / 1;
    }

    .ratio--dynamic {
        aspect-ratio: auto;
    }

    .ratio--wide {
        width: auto;
        aspect-ratio: 16 / 9;
    }
}

.video-card--item.image-wrap .video-wrapper {
    max-width: 100%;
    overflow: hidden;
}

.video-card--item.image-wrap video {
    width: 100%;
    height: 100%;
}

.video-card--title {
    font-family: var(--typeBaseSecondary);
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #ffffff;
    left: 0;
    width: 100%;
    padding: 0 15px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left;
    font-size: 22px;
    z-index: 5;
}

.video-card--label {
    font-family: var(--typeBaseSecondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    right: 15px;
    width: fit-content;
    padding: 0 5px 1px;
    border-radius: 5px;
    line-height: 1.2;
    font-weight: 700;
    background-color: white;
    font-size: 13px;
    z-index: 5;
}

.position--top {
    position: absolute;
    top: 15px;
}

@media screen and (max-width: 589px) {
    .video-card--label {
        right: 5px;
        max-width: calc(100% - 10px);
        text-align: right;
        font-size: 11px;
    }

    .video-card--label.position--top {
        top: 5px;
    }
}

.position--bottom {
    position: absolute;
    bottom: 15px;
}

.video-slide {
    transform: translateX(20px);
    transition: opacity 0.5s ease;
}

@media screen and (min-width: 590px) {
    .video-slide {
        transform: translateX(40px);
    }
}

@media screen and (min-width: 1560px) {
    .video-slide {
        transform: translateX(calc(((100vw - 1540px) / 2) - 10px));
    }
}

.video-carousel--slider .flickity-prev-next-button {
    position: relative;
    transform: translateY(0);
    margin: 1.5em 5px 0;
    background-color: transparent;
    color: var(--colorTextBody);
    padding: 0;
}

.video-carousel--slider .flickity-prev-next-button {
    left: calc(-50% + 50px);
}

@media screen and (min-width: 590px) {
    .video-carousel--slider .flickity-prev-next-button {
        transform: translateX(20px);
    }
}

@media screen and (min-width: 1560px) {
    .video-carousel--slider .flickity-prev-next-button {
        transform: translateX(calc(((100vw - 1540px) / 2) - 20px));
    }
}

.video-carousel--slider .flickity-prev-next-button .flickity-button-icon {
    height: 20px;
    width: 20px;
}

.video-carousel--slider .flickity-prev-next-button.flickity-button:disabled {
    display: inline-block;
    opacity: 0.6;
}

@media screen and (max-width: 589px) {
    .video-carousel--slider:not(.flickity-enabled.is-draggable) {
        overflow: hidden;
    }
}

.video-carousel--slider:not(.flickity-enabled.is-draggable) .video-slide {
    opacity: 0;
    transition: opacity 0.25s;
    transition-delay: 0.25s;
}

.video-carousel--slider.flickity-enabled.is-draggable .video-slide {
    opacity: 1;
}

.video-slide.static--state {
    position: static !important;
    display: inline-block !important;
    transform: none !important;
}

/* FAQ Search Filtering*/

.filters {
    position: relative;
}

.filter-bar {
    width: 100%;
    border-radius: 5px;
    background-color: var(--colorBody);
    border: 1px solid var(--colorBody);
}

.clear-button {
    font-weight: 600;
    text-align: right;
    font-size: 14px;
    text-decoration: underline;
    text-transform: uppercase;
    font-family: var(--typeBaseSecondary), var(--typeBaseFallback);
}

.filter-container {
    position: relative;
}

.filter-container .icon-filter {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0px, -50%);
}

.searchbar-filter-icon svg {
    height: 12px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0px, -50%);
    fill: var(--colorTextBody);
}

.filter-container:focus input {
    background: red;
}

.filter-container input:focus+.searchbar-filter-icon svg {
    fill: var(--colorBtnPrimary);
}

[data-content="faq-content-message"] {
    font-size: 13px;
    text-align: right;
    color: var(--colorBtnPrimary);
    font-family: var(--typeBaseSecondary), var(--typeBaseFallback);
    position: absolute;
    bottom: -23px;
    left: 4px;
    text-transform: uppercase;
}

.visibility-hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

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

@media only screen and (max-width: 589px) {
    .filter-container {
        min-height: 44px;
        background-color: var(--colorTitle);
    }

    .input-mobile-hidden {
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .mobile-hidden {
        display: none;
    }

    .filters-mobile {
        position: sticky;
        right: 0;
        border-left: 1px solid var(--colorBody);
    }

    .faq-columns--wrapper .detail-panel {
        padding: 0;
    }

    .filter-bar {
        width: 100%;
        background-color: var(--colorTitle);
        border: none;
    }

    .searchbar-filter-icon {
        width: 44px;
    }

    .searchbar-filter-icon svg {
        height: 12px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(10px, -50%);
        fill: #fff;
    }

    .absolute-mobile {
        position: absolute;
    }

    .filter-icon-clicked {
        min-width: 100%;
        z-index: 2;
        flex-basis: 100%;
        border-left: none;
    }

    .filter-icon-clicked input {
        background-color: #FFF;
        padding: 9px 10px;
        border: 1px solid #fff;
        min-height: 44px;
        height: 100%;
    }

    .filter-icon-clicked .searchbar-filter-icon svg {
        fill: var(--colorTitle);
    }

    .searchbar-hidden-mobile .searchbar-mobile-content {
        min-width: 100%;
    }

    .mobile-clear-button {
        top: 14px;
        right: 55px;
        font-size: 12px;
    }

    .tags-container-hidden svg {
        z-index: -3;
    }

    .tags-container svg,
    .searchbar-filter-icon svg {
        fill: #fff !important;
        padding: 12px;
        width: 44px;
        height: 44px;
        right: 10px;
    }

    .tags-container-show svg {
        z-index: 1;
        background: #404d4b;
    }

    .tags-container-hidden+.clear-button,
    .tags-container-hidden+.clear-button+[data-content="faq-content-message"] {
        display: none !important;
    }

    [data-content="faq-content-message"] {
        bottom: -22px;
        left: 11px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .faq-column--nav.searchbar-mobile.searchbar-hidden-mobile {
        -webkit-overflow-scrolling: touch;
    }

    .faq-column--nav.searchbar-mobile.searchbar-hidden-mobile::-webkit-scrollbar {
        display: none;
    }
}

.no-result-message.detail-panel {
    width: 100%;
    max-width: none;
    text-align: center;
}

@media screen and (max-width: 589px) {
    .no-result-message.detail-panel {
        padding: 20px;
    }

    .no-result-message.detail-panel h2 {
        font-size: 20px;
    }

    .no-result-message.detail-panel .subtitle {
        font-size: 16px;
    }

    .no-result-message.detail-panel .title-cta-link {
        font-size: 14px;
    }

    .no-result-message.detail-panel .title-cta-link svg {
        height: 9px;
    }
}

/* Custom Animations Support */

[data-animation-class="fade-in"] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* New Ingredients Section (with image toggles) */

.primary-style--heading,
.ingredient-section--title>span.accent-style--heading {
    font-family: var(--typeHeaderPrimary);
    font-weight: var(--typeHeaderPrimaryWeight);
    line-height: 1.2;
}

.primary-style--subtitle,
.ingredient-section--title>span.accent-style--subtitle {
    font-family: var(--typeBaseSecondary);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
}

.ingredients-section--wrapper {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    transition: height 0.25s ease-in-out;
}

.ingredients-section--wrapper .page-width {
    width: 100%;
}

.ing-image--wrap {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100%;
    visibility: hidden;
    transform: translateX(-20%);
    opacity: 0;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

@media screen and (min-width: 1300px) {
    .ing-image--wrap .responsive-bg--visual.contain.cover--large {
        object-fit: cover
    }
}

@media screen and (min-width: 768px) {
    .ingredients-section--wrapper.invert--contents .ing-image--wrap {
        left: auto;
        right: 0;
        transform: translateX(20%);
    }

    .page-width.ingredients-container {
        padding-top: 6em;
        padding-bottom: 6em;
    }
}

@media screen and (max-width: 767px) {
    .ing-image--wrap:first-of-type {
        position: relative;
    }

    .ing-image--wrap:not(:first-of-type).visible,
    .ing-image--wrap:not(:first-of-type) {
        margin-top: calc(-50% - 10px);
        position: relative;
    }

    .ing-image--wrap {
        width: 100vw;
    }

    .page-width.ingredients-container {
        padding-top: 0;
        padding-bottom: 4em;
    }
}

.ing-image--wrap.visible {
    visibility: visible;
}

.ing-image--wrap.visible.transitioned {
    opacity: 1;
    transform: translateX(0);
}

.ingredient-image--preview.ingredient-image--mobile,
.ingredient-image--preview.ingredient-image--desktop {
    display: none;
}

@media screen and (max-width: 767px) {
    .ingredient-image--preview:not(.ingredient-image--desktop) {
        display: block;
        position: relative;
    }
}

@media screen and (min-width: 768px) {
    .ingredient-image--preview:not(.ingredient-image--mobile) {
        display: block;
    }
}

.feature-row.ingredients-feature--row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
    .ingredients-section--wrapper.invert--contents .feature-row.ingredients-feature--row {
        justify-content: flex-start;
    }
}

.ingredients-content--wrapper {
    width: calc(50% - 30px);
}

@media screen and (max-width: 767px) {
    .ingredients-content--wrapper {
        width: 100%;
    }
}

.ingredients-group--wrapper {
    display: none;
    position: relative;
    opacity: 0;
    transform: translateY(70px);
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 15px;
    flex-wrap: wrap;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, height 0.15s ease-in-out;
}

.ingredients-group--wrapper.visible {
    display: flex;
}

.ingredients-group--wrapper.visible.transitioned {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 767px) {
    .ingredients-group--wrapper {
        gap: 10px;
    }
}

.ingredient-content--item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .ingredient-content--item {
        flex: 1 0 calc(50% - 5px);
        min-height: 34px;
    }

    .ingredient-content--title {
        width: calc(100% - 40px);
    }

    .ingredient-content--title .subtitle {
        line-height: 1.0;
    }
}

.ingredient-image--wrapper {
    height: 40px;
    width: 40px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .ingredient-image--wrapper {
        height: 30px;
        width: 30px;
    }
}

.ingredient-list--wrapper {
    display: none;
    opacity: 0;
    transform: translateY(70px);
    width: 100%;
    height: auto;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, height 0.15s ease-in-out;
}

.ingredient-list--wrapper.visible {
    display: block;
}

.ingredient-list--wrapper.visible.transitioned {
    opacity: 1;
    transform: translateY(0);
}

details.view-all-ingredients .rte {
    height: 0;
    position: relative;
    overflow: hidden;
    transform: translateY(40px);
    opacity: 0;
    transition: height 0.15s ease-in-out, transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
    transition-delay: 0.15s;
}

details.view-all-ingredients[open] .rte {
    height: 100%;
    transform: translateY(0);
    opacity: 1;
}

/* Animated Stats Section */

.stats-section .grid {
    margin: 0;
}

.stats-section .background-media-text__text.layout--basic {
    background: transparent;
    padding: 0;
}

.stats-section .grid .one-quarter {
    width: calc(25% - 10px);
}

.stats-section .grid .one-fifth {
    width: calc(20% - 10px);
}

.stats-section .grid .one-half {
    width: calc(50% - 10px);
}

.stats-section .grid__item.text-center .pie-chart-container {
    left: 50%;
    transform: translate(-50%, 0px);
}

.stats-section .grid .one-third {
    width: calc(33% - 10px);
    padding: 20px;
}

.stats-section .grid:after {
    content: unset;
}

.stats-section .horizontal {
    display: flex;
    align-items: center;
}

.stats-section .horizontal .pie-chart-container {
    flex-basis: 15%;
    width: 100%;
    margin-right: 20px;
}

.stats-section .horizontal .stats-card-text {
    flex-basis: 85%;
    width: 100%;
}

@media only screen and (min-width: 590px) {
    .stacked-layout {
        display: flex;
    }

    .stacked-layout .section-content--container {
        height: fit-content;
        position: sticky;
        top: 120px;
    }

    .stacked-layout .half {
        flex-basis: 50%;
        padding: 0 20px;
    }

    .stacked-layout .one-third {
        flex-basis: 33%;
        padding: 0 20px;
    }

    .stacked-layout .two-third {
        flex-basis: 66%;
        padding: 0 20px;
    }

    .stats-section .grid {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }
}

@media only screen and (max-width: 589px) {
    .stats-section .grid__item {
        padding: 25px 20px 25px 15px !important;
    }

    .stats-section .grid .grid__item {
        width: 100% !important;
    }
}

/* Advisor Card */

.advisor-card--item {
    border-radius: 20px;
    overflow: hidden;
}

.advisor-img--wrapper {
    margin: auto;
}

.advisor-card--inner {
    margin: 0 auto;
}

@media screen and (min-width: 590px) {
    .advisor-card--content.contained--desktop {
        padding: 30px 30px 0 30px;
    }

    .advisor-section .grid__item .advisor-card--content.contained--desktop .advisor-card--meta {
        padding: 20px 0;
    }

    .grid__item .contained--desktop .advisor-img--wrapper {
        border-radius: 10px;
        overflow: hidden;
    }
}

@media screen and (max-width: 589px) {
    .advisor-card--content.contained--mobile {
        padding: 20px 20px 0 20px;
    }

    .grid__item .contained--mobile .advisor-img--wrapper {
        border-radius: 10px;
        overflow: hidden;
    }

    .advisor-section .grid__item .advisor-card--content.contained--mobile .advisor-card--meta {
        padding: 20px 0;
    }
}

.max-z--index {
    z-index: 99999;
}

.countown-wrap--outer {
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.countown-wrap--outer.transition {
    opacity: 1;
}

.countown-wrap--outer.transitioned {
    height: 100%;
    opacity: 1;
}

.countdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 60px;
}

.countdown-item.with--bg {
    width: 70px;
    border-radius: 10px;
    padding: 0 5px 10px;
}

@media screen and (max-width: 589px) {
    .countdown-item.with--bg {
        border-radius: 5px;
    }
}

.subtitle.countdown-label {
    line-height: 1.2;
    color: var(--colorTextBody);
    margin: 0;
    text-align: center;
    margin-left: 0.1em;
}

.subtitle.countdown-number {
    line-height: 1.2;
    margin: 0;
    text-align: center;
    margin-left: 0.1em;
}

/* Phillips Retail Sampling Form */

input[type="checkbox"]+label.checkbox-protein--label {
    background-color: #eee;
    width: 100%;
    height: auto;
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.15s ease-in-out;
    position: relative;
}

input[type="checkbox"]:disabled+label.checkbox-protein--label {
    cursor: not-allowed;
    opacity: 0.65;
}

input[type="checkbox"]:checked+label.checkbox-protein--label {
    -webkit-box-shadow: inset 0px 0px 0px 2px var(--colorBtnPrimary);
    -moz-box-shadow: inset 0px 0px 0px 2px var(--colorBtnPrimary);
    box-shadow: inset 0px 0px 0px 2px var(--colorBtnPrimary);
}

input[type="checkbox"]:not(:checked):hover+label.checkbox-protein--label {
    -webkit-box-shadow: inset 0px 0px 0px 2px var(--colorBorder);
    -moz-box-shadow: inset 0px 0px 0px 2px var(--colorBorder);
    box-shadow: inset 0px 0px 0px 2px var(--colorBorder);
}

input[type="checkbox"]+label.checkbox-protein--label::before {
    content: 'Selected';
    opacity: 0;
    display: inline-block;
    background-color: var(--colorBtnPrimary);
    color: white;
    border-radius: 50px;
    padding: 5px 10px;
    line-height: 1.1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--typeBaseSecondary);
    font-weight: 600;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    transition: opacity 0.15s ease-in-out;
}

input[type="checkbox"]:checked+label.checkbox-protein--label::before {
    content: 'Selected';
    opacity: 1;
}

.input-image--wrapper {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
}

.input-image--wrapper img {
    height: 100%;
    margin-top: 2px;
}

.checkbox-label--meta {
    padding: 20px;
}

label.variant__label.color-button.subtitle span.form-label--info {
    display: block;
    font-family: var(--typeBasePrimary) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    color: var(--colorTextBody) !important;
    text-transform: none !important;
}

label.variant__label.color-button.subtitle {
    line-height: 1.2;
    margin-bottom: 5px;
}

/* Video with animated text section */

.video-animation--section,
.video-hero--section {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.video-hero--section {
    align-items: stretch;
}

.video-hero--section .page-width {
    height: 100%;
    width: 100%;
    position: relative;
}

.video-animation--section .page-width,
.video-hero--section .page-width {
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 768px) {

    .video-animation--section.desktop-height--100vh,
    .video-hero--section.desktop-height--100vh {
        height: calc(100vh - 145px);
    }

    .video-animation--section.desktop-height--most,
    .video-hero--section.desktop-height--most {
        height: calc(100vh - 245px);
    }

    .video-animation--section.desktop-height--50vw,
    .video-hero--section.desktop-height--50vw {
        height: 50vw;
    }
}

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

    .video-animation--section.mobile-height--100vh,
    .video-hero--section.mobile-height--100vh {
        height: calc(100vh - 80px);
        height: calc(100svh - 80px);
    }

    .video-animation--section.mobile-height--65vh,
    .video-hero--section.mobile-height--65vh {
        height: 65vh;
        height: 65svh;
    }

    .video-animation--section.mobile-height--50vh,
    .video-hero--section.mobile-height--50vh {
        height: 50vh;
        height: 50svh;
    }
}

.video-animation--wrapper,
.video-hero--wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-hero--wrapper .videowise-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-hero--wrapper .videowise-background>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-hero--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

.video-hero--section .text-center .hero-text--wrapper ul,
.split-hero--section .text-center .section-content--block.rte ul {
    text-align: left !important;
    width: fit-content;
    margin: 0 auto;
}

.video-hero--section .hero-text--wrapper .text-center ul li,
.split-hero--section .text-center .section-content--block.rte ul li {
    width: fit-content;
}

.video-hero--section .hero-text--wrapper ul,
.split-hero--section .text-center .section-content--block.rte ul {
    list-style-type: none;
}

.video-hero--section .hero-text--wrapper ul li,
.split-hero--section .text-center .section-content--block.rte ul li {
    position: relative;
    padding-left: 26px;
}

.video-hero--section .hero-text--wrapper ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    /* Set image width */
    height: 16px;
    /* Set image height */
    background-image: url('/cdn/shop/files/gj-checkmark.svg?v=1731454810');
    background-size: contain;
    /* Ensure image scales well */
    background-repeat: no-repeat;
}

.split-hero--section .text-center .section-content--block.rte ul li::before {
    content: "✔️";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    /* Set image width */
    height: 16px;
    /* Set image height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.video-hero--section .subtitle {
    line-height: 1.2;
}

.video-hero--section .indicator--bug {
    z-index: 2;
}

.animation-blank--setter {
    margin: 0;
    width: fit-content;
    height: 0;
    overflow: hidden;
}

.animation-blank--space {
    height: 2px;
    width: auto;
    margin-top: 5px;
    opacity: 1;
    transform: translateY(0);
}

.animation-blank--space.opacity--hidden {
    opacity: 0;
    transform: translateY(40px);
}

.animated-text--display {
    display: block;
    line-height: 1.1;
    width: fit-content;
    margin: 5px auto 0;
    opacity: 0;
    transform: translateY(-40px);
}

.animated-text--display.transitioned {
    opacity: 1;
    transform: translateY(0);
}

.animated-text--display.transition-out {
    opacity: 0;
    transform: translateY(40px);
}

.video-animation--content {
    width: fit-content;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-hero--content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 80px 0;
}

@media screen and (min-width: 768px) {
    .video-hero--content.top-left--desktop {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .video-hero--content.top-center--desktop {
        align-items: flex-start;
        justify-content: center;
    }

    .video-hero--content.top-right--desktop {
        align-items: flex-start;
        justify-content: flex-end;
    }

    .video-hero--content.middle-left--desktop {
        align-items: center;
        justify-content: flex-start;
    }

    .video-hero--content.middle-center--desktop {
        align-items: center;
        justify-content: center;
    }

    .video-hero--content.middle-right--desktop {
        align-items: center;
        justify-content: flex-end;
    }

    .video-hero--content.bottom-left--desktop {
        align-items: flex-end;
        justify-content: flex-start;
    }

    .video-hero--content.bottom-center--desktop {
        align-items: flex-end;
        justify-content: center;
    }

    .video-hero--content.bottom-right--desktop {
        align-items: flex-end;
        justify-content: flex-end;
    }

    .video-hero--content .video-content--wrapper {
        width: 50%;
    }

    .video-hero--content .video-content--wrapper.two-thirds--width {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 767px) {
    .video-hero--content {
        padding: 40px 0;
    }

    .video-hero--content .video-content--wrapper {
        width: 100%;
    }

    .video-hero--content.top--mobile {
        align-items: flex-start;
    }

    .video-hero--content.middle--mobile {
        align-items: center;
    }

    .video-hero--content.bottom--mobile {
        align-items: flex-end;
    }
}

.hero-inline-image--wrapper img {
    display: inline-block;
}

/* Coundown announcement bar */

.announcement.countdown--bar .page-width {
    width: 100%;
}

.countdown-bar--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}

@media screen and (min-width: 590px) {
    .countdown-bar--wrapper {
        justify-content: center;
        column-gap: 20px;
    }
}

.countdown-bar--content {
    display: block;
    text-align: left;
}

a.countdown-bar--link,
a .countdown-bar--content {
    color: var(--colorTitle);
}

.countdown-bar--title {
    font-size: 15px;
    font-family: var(--typeBaseSecondary);
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.countdown-bar--description,
.countdown-bar--description>p {
    font-size: 12px;
    line-height: 1.2;
    margin: 0 !important;
}

@media screen and (max-width: 589px) {
    .countdown-bar--title {
        font-size: 13px;
    }

    .countdown-bar--description,
    .countdown-bar--description>p {
        font-size: 11px;
    }
}

.countdown-bar--timer {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    align-items: space-between;
    column-gap: 5px;
    transition: opacity 0.25s ease-in-out;
}

[data-content="countdown-timer"].opacity--hidden {
    opacity: 0;
}

.countdown-bar--wrapper .countdown-item {
    border-radius: 3px;
    padding: 3px 5px;
    width: 30px;
}

.video-carousel--section {
    max-width: 100vw;
    overflow: hidden;
}

/* Closeable announcement bar */

.dismissable-announcement--section {
    margin: 0;
}

.announcement-flex--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 15px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 0;
    margin: 0 auto;
}

.announcement-flex--icon,
.announcement-flex--icon svg {
    height: 25px;
}

.announcement-flex--text {
    max-width: 100%;
}

.announcement-flex--icon+.announcement-flex--text {
    width: calc(100% - 40px);
}

.announcement-flex--text p {
    margin-bottom: 0 !important;
    line-height: 1.25;
}

@media screen and (max-width: 767px) {
    .announcement-flex--text p {
        font-size: 15px;
    }
}

.close--wrapper {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
}

@media screen and (max-width: 589px) {
    .close--wrapper {
        right: 10px;
    }
}

.close--wrapper button {
    height: 100%;
    min-height: none;
    transition: opacity 0.2s ease-in-out;
}

.close--wrapper button:hover {
    opacity: 0.65;
}

.close--wrapper button svg {
    vertical-align: initial;
}

.announce--parent {
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}

.announce--parent.destroy {
    margin-bottom: -100% !important;
    opacity: 0;
}

/* BFCM 2024 - Threshold Updates */

.free-shipping--notice.threshold--items {
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px 20px;
}

@media screen and (max-width: 589px) {
    .free-shipping--notice.threshold--items {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.threshold-bar--wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.threshold-goal--progress {
    background-color: var(--colorBorder);
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 36px;
}

.threshold-goal--outer {
    width: 40px;
}

.threshold-goal--item {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 1px solid var(--colorBorder);
    background-color: #eeeeee;
    position: relative;
    line-height: 1;
}

.threshold-goal--item .responsive-bg--visual {
    border-radius: 50%;
    overflow: hidden;
}

.threshold-goal--outer .threshold-goal--content {
    text-align: center;
    font-family: var(--typeBaseSecondary);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 0.9;
    margin-top: 5px;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}

.threshold-goal--outer .threshold-goal--content span[data-content="goal-pending"] {
    display: block;
    color: var(--colorTextBody);
    opacity: 0.65;
}

.threshold-goal--outer .threshold-goal--content span[data-content="goal-met"] {
    display: none;
    color: var(--colorTitle);
}

.threshold-goal--outer.threshold--active .threshold-goal--content span[data-content="goal-met"] {
    display: block;
}

.threshold-goal--outer.threshold--active .threshold-goal--content span[data-content="goal-pending"] {
    display: none;
}

.threshold-goal--outer:not(.threshold--active) .threshold-reward--image {
    filter: grayscale(100%) opacity(0.25) blur(0.5px);
}

.threshold-starter {
    height: 10px;
    width: 40px;
    opacity: 0;
}

.threshold-gauge--border {
    height: 12px;
    padding: 2px;
    position: relative;
    border: 1px solid var(--colorBorder);
    position: absolute;
    top: 20px;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    border-radius: 10px;
    z-index: -1;
}

.threshold-summary--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    width: 100%;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--colorBorder);
}

.threshold--items .subtitle {
    font-size: 14px;
}

.threshold-goal--progress .threshold-progress--1,
.threshold-goal--progress .threshold-progress--2,
.threshold-goal--progress .threshold-progress--3,
.threshold-goal--progress .threshold-progress--4 {
    width: 100%;
    height: 100%;
    position: relative;
}

.threshold-progress--fill {
    background-color: var(--colorBtnPrimary);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    transition: width 0.15s ease-in-out;
}

/* Recharge SMS Styling */

.rcsms-cart-widget__wrapper {
    flex-direction: row !important;
    justify-content: center !important;
}

label.rcsms-cart-widget__label {
    font-family: var(--typeBaseSecondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--colorTitle) !important;
    font-size: 17px !important;
}

.rcsms-cart-widget__checkbox:checked~.rcsms-cart-widget__checkmark {
    background-color: var(--colorBtnPrimary) !important;
    border: 1px solid var(--colorBtnPrimary) !important;
}

.drawer .cart__item--details:not(.cart-gift--item) .cart__item--qty {
    grid-column: 1;
}

.drawer .cart__item--details:not(.cart-gift--item) .cart__item--price {
    grid-column: 2 / span 2;
    padding-left: 10px;
    align-content: center;
}

.drawer .cart__item--details:not(.cart-gift--item) .cart__item--price .cart__price,
.drawer .cart__item--details:not(.cart-gift--item) .cart__item--price .cart__price.cart__discount {
    display: inline-block !important;
}

#admin-bar-iframe {
    display: none !important;
}

.bfcm-offer--clip {
    background-color: var(--colorBodyAlt);
    border: 1px dashed var(--colorTextBody);
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
}

/* PORTION TABLE SECTION */

.feeding-guide-section {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

.feeding-guide-content,
.feeding-guide-container {
    flex-basis: 40%;
}

.feeding-guide-container {
    flex-basis: 60%;
}

.feeding-guide-content .btn {
    width: 100%;
}

.stat {
    justify-content: center;
    padding: 10px;
}

.inner-grid-item {
    padding: 10px;
    font-weight: 600;
    min-height: 50px;
}

.grid-table {
    display: grid;
    grid-template-areas: "meal-1 meal-2 meal-2 meal-3 meal-3"
        "stat-1 stat-2 stat-3 stat-4 stat-5"
        "weight-1 range-1 range-2 range-3 range-4"
        "weight-2 range-5 range-6 range-7 range-8"
        "weight-3 range-9 range-10 range-11 range-12"
        "weight-4 range-13 range-14 range-15 range-16";
    grid-template-columns: 25% auto auto auto auto;
    width: 100%;
    /* Adjust width as needed */
    margin: 0 auto;
    /* Center the grid */
}

.flex-weight {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.weights p {
    font-weight: 600;
}

.weights {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

.weights,
.dog-shape {
    flex-basis: 50%;
}

.dog-shape img {
    height: fit-content;
}

.dog-shape.small img {
    max-width: 30px;
}

.dog-shape.medium img {
    max-width: 40px;
}

.dog-shape.large img {
    max-width: 45px;
}

.dog-shape.extra-large img {
    max-width: 50px;
}

.weights p {
    margin: 0;
}

.meal {
    justify-content: center;
    padding: 10px;
    font-family: var(--typeBaseSecondary);
}

.meal p {
    font-weight: 600;
    margin: 0;
}

.meal-1 {
    grid-area: meal-1;
}

.meal-2 {
    grid-area: meal-2;
}

.meal-3 {
    grid-area: meal-3;
}

.stat-1 {
    grid-area: stat-1;
}

.stat-2 {
    grid-area: stat-2;
}

.stat-3 {
    grid-area: stat-3;
}

.stat-4 {
    grid-area: stat-4;
}

.stat-5 {
    grid-area: stat-5;
}

.weight-1 {
    grid-area: weight-1;
}

.weight-2 {
    grid-area: weight-2;
}

.weight-3 {
    grid-area: weight-3;
}

.weight-4 {
    grid-area: weight-4;
}

.range-1 {
    grid-area: range-1;
}

.range-2 {
    grid-area: range-2;
}

.range-3 {
    grid-area: range-3;
}

.range-4 {
    grid-area: range-4;
}

.range-5 {
    grid-area: range-5;
}

.range-6 {
    grid-area: range-6;
}

.range-7 {
    grid-area: range-7;
}

.range-8 {
    grid-area: range-8;
}

.range-9 {
    grid-area: range-9;
}

.range-10 {
    grid-area: range-10;
}

.range-11 {
    grid-area: range-11;
}

.range-12 {
    grid-area: range-12;
}

.range-13 {
    grid-area: range-13;
}

.range-14 {
    grid-area: range-14;
}

.range-15 {
    grid-area: range-15;
}

.range-16 {
    grid-area: range-16;
}

.cell {
    align-items: center;
    display: flex;
    text-align: center;
    background-color: #f9f9f9;
    min-height: fit-content;
}

.meal-1,
.meal-2,
.meal-3 {
    border-top: none;
}

.cell h5 {
    margin: 0;
}

.stat-row {
    grid-template-rows: 25% auto auto auto auto;
}

@media screen and (min-width: 791px) {
    .feeding-guide-container .toggle--wrapper {
        display: none;
    }

    .cell.tab--wrapper {
        opacity: 1;
        transform: unset;
        height: auto;
        justify-content: center;
    }

}

@media screen and (max-width: 790px) {
    .toggle--wrapper {
        position: static;
    }

    .feeding-guide-grid .tab--wrapper {
        display: none;
    }

    .feeding-guide-grid .tab--wrapper.tab-selected {
        display: block;
    }

    .cell.meal {
        display: none;
    }

    .feeding-guide-section {
        display: block;
        flex-direction: column;
        max-width: 100%;
    }

    .feeding-guide-container {
        max-width: 100%;
    }

    .grid-table {
        display: grid;
        grid-template-areas: "meal-1 meal-2 meal-2 meal-3 meal-3"
            "stat-1 stat-2 stat-3 stat-4 stat-5"
            "weight-1 range-1 range-2 range-3 range-4"
            "weight-2 range-5 range-6 range-7 range-8"
            "weight-3 range-9 range-10 range-11 range-12"
            "weight-4 range-13 range-14 range-15 range-16";
        grid-template-columns: 35% auto auto 0 0;
        width: 100%;
        /* Adjust width as needed */
        margin: 0 auto;
        /* Center the grid */
    }

    .topper {
        grid-template-columns: 35% 0 0 auto auto;

    }
}

/* Rich Text Checkmarks styles */

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

.round-green-checkmark svg {
    background-color: var(--colorBtnPrimary);
    border-radius: 50%;
    padding: 5px;
    max-width: 25px;
    height: 25px;
    fill: #fff;
}

@media screen and (max-width: 589px) {
    .mobile-flex {
        flex-direction: column;
        margin-left: auto;
    }

    .mobile-flex .grid__item {
        width: 100%;
    }

    .align-left-mobile {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

/* Oddit Compare Table */


@media screen and (max-width: 767px) {
    .row-item .false-icon {
        height: 25px;
        width: 25px;
        overflow: hidden;
    }
}

.row-item .false-icon svg {
    background-color: #efefef;
    fill: #697674;
    padding: 5px;
}

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

.title-flex img {
    max-width: 100px;
    padding: 0 15px;
}

.compare-table-wrap {
    display: block;
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 1em;
    font-size: .9em;
    line-height: 1.4;
    max-width: 90%;
    margin: auto;
}

.compare-table-wrap::-webkit-scrollbar {
    display: none;
}

.compare-table-row {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
    min-width: 900px;
    width: 100% !important;
    /*border: 2px solid #efefef;*/
}

.row-item svg {
    background-color: var(--colorBtnPrimary);
    border-radius: 50%;
    padding: 5px;
    max-width: 30px;
    height: 30px;
    fill: #fff;
}

.row-item span {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--colorTitle);
}

.checkmark-dot {
    background-color: var(--colorBtnPrimary);
    border-radius: 50%;
    padding: 4px;
    max-width: 30px;
}

.header-cell-image {
    display: inline-block;
    width: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: auto;
}

.row-image {
    display: inline-block;
    height: 65px;
    margin-right: 10px;
}

.compare-table-row .row-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 75px;
    padding: 10px;
    font-family: var(--typeBaseSecondary);
}

.compare-table-row.compare-table-footer {
    border-bottom: 0;
    border: none;
}

.compare-table-row.compare-table-header .row-item {
    border: none;
}

.compare-table-row.compare-table-footer .row-item {
    padding: 10px 15px;
    border: none;
}

.compare-table-row .row-item.row-title p {
    flex: 1 0 220px;
    text-align: center;
    color: var(--colorTitle);
    line-height: 1.2;
    padding: 2px 5px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--typeBasePrimary);
    font-size: 17px;
}

@media screen and (max-width: 767px) {
    .compare-table-row .row-item.row-title p {
        text-align: left;
        justify-content: flex-start;
        width: 100%;
        padding-left: 0;
        flex: 0 1 100%;
    }
}

.title-flex h2,
.title-flex img {
    height: fit-content;
}

@media screen and (max-width: 767px) {
    .compare-table-row .row-item.row-title {
        width: 140px;
        flex: 0 0 140px;
    }

    .compare-table-wrap {
        max-width: 100%;
    }

    .compare-table-wrap .compare-table-row {
        margin: 0 15px;
    }

    .compare-table-row .row-item {
        flex: 1 0 70px;
        width: 70px;
        font-size: 11px;
    }

    .header-cell-image {
        width: 50px;
    }

    .compare-table-row {
        min-width: 420px;
    }

    .row-item svg {
        max-width: 25px;
        height: 25px;
    }
}

.compare-table-row .row-item.row-featured {
    background-color: #efefef;
    position: sticky;
    left: 0;
    padding: 5px 15px;
}

.compare-table-row.compare-table-header {
    border: none;
}

.compare-table-row.compare-table-header .row-item {
    color: var(--colorTitle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.1;
}

.compare-table-row.compare-table-header .row-item.row-featured {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.compare-table-row {
    border: 2px solid #efefef;
    border-top: none;
}

.compare-table-row:nth-child(2) {
    border: 2px solid #efefef;
    border-radius: 10px 10px 0 0;
}

.compare-table-row:nth-last-child(2) {
    border: 2px solid #efefef;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.compare-table-row .row-item {
    border-right: 2px solid #efefef;
}

.compare-table-row .row-item:last-child {
    border-right: none;
}

.compare-table-row.compare-table-header .row-item:nth-child(n+3):nth-last-child(2),
.compare-table-row.compare-table-footer .row-item:nth-child(n+3):nth-last-child(2) {
    border: none;
}

.compare-table-row.compare-table-footer .row-item.row-featured {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ------------------------------ */
/*     Food Purpose Section       */
/* ------------------------------ */


.food-card-section .card-image {
    border-radius: 0;
}