/** Shopify CDN: Minification failed

Line 179:12 Expected ":"
Line 180:12 Expected ":"
Line 1518:0 Comments in CSS use "/* ... */" instead of "//"

**/
/* Global Changes */

.card-information__text.h3 {
  font-size: 1.8rem!important;
}
.card-information__text {
    font-family: Inter;
    font-size: 1.3rem!important;
    line-height: 17px;
}

.price, .price--on-sale .price-item--sale, price-item price-item--regular  {
    color:rgba(var(--color-foreground), .7)!important;
    font-size: 1.2rem!important;
}

.card__colors {
    justify-content: center;
}

/*.color-swatch:before, .color-swatch:after {
    border-radius:0!important;
}

.color-swatch a:before {
    border-radius:0!important;
    box-shadow: unset!important;;
}*/

.card-information__button  {
    display: none!important;
}

.badge--onsale {
    background-color:rgb(246, 246, 246);
    border-color: rgb(246, 246, 246);
    color: #000;
    text-transform: lowercase;
}

.price-item--regular:before {
    display:none;
}

.price__compare {
   text-decoration: line-through;
   text-decoration-color: #a2a2a2;
}
/*.price__sale, .price__regular {
   color: #a2a2a2;
}*/

.product__text {
    font-size: 1.4rem;
}

/*Global Footer */

footer .accordion__title {
  font-size: 1.4rem!important;
  font-family: Inter;
}
.footer .list-menu__item--link {
  font-size: 1.3rem;
}
.copyright__content,
.copyright__content a {
  color: rgba(255, 255, 255, 0.5)!important;
}
.disclosure {
  opacity: 0.5;
}
@media screen and (min-width: 750px) {
  .svg-logo {
    max-width: 100%;
    width: fit-content;
  }
  .footer__content-top {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 749px) {
  .svg-logo {
    max-width: 80%;
    margin: auto;
    display: block;
    height: 100px;
  }
  .footer .flex-grid {
    display: flex!important;
    margin-bottom: 0;
    flex-direction: column-reverse;
  }
  .accordion {
    border-top: none!important;
  }
}
.footer__content-top {
  padding-bottom: 0;
}

/* PDP Edits: */

.button.klaviyo-bis-trigger {
  background-color: #E4F6A8!important;
  color: #000!important;
}
.pdp-perks {
    border-radius: 2.5rem;
    border: 1px solid #FFF;
    background: #0A251C;
    padding: 10px 30px 19px;;
}
.perks-wrapper {
    /* padding-top:5px; */
}
.perk-group {

  display: flex;
  flex-direction: row;
  align-items: center;
  margin: -10px 0;
}
.perks-title {
    font-size: 1.6rem;
    font-family: Inter;
    font-weight: 400;
    color: #E4F6A8;
}

.perk-text {
  padding-left:15px;
}

.perk-text.points, .perk-text.freeship {
    margin-left: 3px;
} 

.perk-svg {
  padding-top:7px;
}
.perkscaps {
    font-weight: 500;
}

.smallcaps {
    font-family: Inter;
    font-weight: 300;
}

.text-xxs {
  font-size: 1.4rem;
  color: #FFF;
}

.text-xxs-black {
  font-size: 1.2rem;
  color: #000;
  opacity: .6;
}

p.smallcaps.text-xxs a {
  color: #FFF;
}

.product__info-container .price {
    letter-spacing: unset!important;
}

.product__accordion .accordion__content {
    max-height: unset!important;
    overflow x: unset!important;
    overflow y: unset!important;
}

/** Slider **/

.slideshow__text .typeset {
    color: #000;
}

@media screen and (max-width: 749px) {
    .slideshow--mobile-overlay .slideshow__center {
        bottom: 120px!important;
    }
    .slideshow__heading {
        font-size: 4.2rem;
    }
    #shopify-section-template--18567542931561__1653264932cc9a18cd h2 {
        line-height: 37px;
    }
}

#Slider-template--18567542931561__featured_collection_riDej9 {
    --grid-horizontal-spacing: 1rem;
}

/* About-Use */

.split-wrapper {
        max-width: 1600px;
        margin: 0 auto;
    }
    .split-container {
        display: flex;
        flex-direction: column; /* Mobile first: Image on top, text below */
        background-color: #ffffff;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }

    /* Shared width for both halves on mobile */
    .split-image-half, 
    .split-text-half {
        width: 100%;
    }

    /* Image styling */
    .split-image {
        width: 100%;
        /*height: 256px; */ /* Fixed height for mobile to prevent massive stretching */
        object-fit: cover; /* Ensures image covers area without distorting */
        display: block;
    }

    /* Text wrapper styling */
    .split-text-half {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Vertically centers the text */
        text-align: left; /* Left aligns the text */
        padding: 2rem;
        box-sizing: border-box;
    }

    .split-heading {
        margin-top: 0;
        margin-bottom: 1rem;
        letter-spacing: -0.025em;
    }

    .split-paragraph {
        font-size: 1.4rem;
        line-height: 1.625;
        margin: 0;
    }

    /* Desktop Breakpoint: 750px and above */
    @media (min-width: 750px) {
        .split-container {
            flex-direction: row; /* Image left, text right */
        }
        
        /* Reverses the layout for the second container */
        .split-container.reverse {
            flex-direction: row-reverse; /* Text left, Image right */
        }

        .split-image-half, 
        .split-text-half {
            width: 50%; /* Splits the width exactly in half */
        }

        .split-image {
            height: 100%; /* Image grows to match the text height */
        }

        .split-text-half {
            padding: 3rem 8rem 3rem 8rem; /* More breathing room on desktop */
        }

        .split-heading {
            font-size: 2.25rem;
        }
    }

.guarantee__icon img {
  width: 80px!important;
  height: 80px!important;
  max-width: 80px!important;
}
        
/* PDP Featured Ingredients */

.piw-wrapper {
  display: flex;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  color: var(--text-color);
  background-color: var(--bg-color); /* Background color is applied here so padding stays transparent */
}

/* --- DESKTOP STATIC BLOCK --- */
.piw-static-block {
  flex: 0 0 300px;
  height: 500px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.piw-header h2 {
  margin: 0 0 1rem 0;
  color: var(--text-color);
}

.piw-header .piw-desc,
.piw-header .piw-desc p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
  color: var(--text-color); /* This ONLY affects the static block */
}

/* --- DESKTOP CAROUSEL ARROWS --- */
.piw-controls-desktop {
  display: flex;
  gap: 1rem;
}

.piw-arrow {
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.piw-arrow:hover {
  background: var(--text-color);
  color: var(--bg-color); /* Uses the background color so the icon pops */
}

.piw-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* --- CAROUSEL TRACK --- */
.piw-carousel {
  flex: 1;
  display: flex;
  height: 500px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; 
  -ms-overflow-style: none;
}

.piw-carousel::-webkit-scrollbar {
  display: none; 
}

/* --- SLIDES --- */
.piw-slide {
  flex: 1 0 400px; 
  height: 100%;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  cursor: pointer;
}

.piw-slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Forces the new <img> tag to act like a background cover */
.piw-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--ambient-duration) linear;
}

/* --- AMBIENT MOVEMENT --- */
/* Forces the new <img> tag to act like a background cover */
.piw-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform; /* Hardware acceleration for smooth panning */
}

/* --- AMBIENT MOVEMENT --- */
.piw-ambient-enabled .piw-slide.is-active .piw-image {
  animation-name: ambientPan;
  animation-duration: var(--ambient-duration, 15s); /* Fallback to 15s if variable fails */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

@keyframes ambientPan {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

/* --- SLIDE CONTENT OVERLAY --- */
.piw-slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--gradient-height, 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  z-index: 2;
}

/* Force the overlay text to stay white and override the theme defaults */
.piw-slide-content h3, 
.piw-slide-content .piw-slide-desc,
.piw-slide-content .piw-slide-desc p {
  color: #ffffff;
  margin: 0;
}

.piw-slide-content h3 {
  margin-bottom: 0.5rem;
}

.piw-slide-content .piw-slide-desc p {
  opacity: 0.9;
  line-height: 1.4;
}

/* --- MOBILE STYLES --- */
.piw-controls-mobile {
  display: none;
}

@media screen and (max-width: 800px) {
  .piw-wrapper {
    flex-direction: column;
  }

  .piw-static-block {
    flex: none;
    height: auto;
    padding: 3rem 1.5rem 2rem 1.5rem;
  }

  .piw-controls-desktop {
    display: none;
  }

  .piw-carousel {
    flex: none; /* Stops it from collapsing vertically */
    width: 100%; /* Forces it to span the screen */
    height: 500px;
  }

  .piw-slide {
    flex: 0 0 325px; 
  }

  .piw-controls-mobile {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2rem 1rem;
  }

  .piw-pill {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--text-color);
    opacity: 0.3;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: opacity 0.3s ease;
  }

  .piw-pill.is-active {
    opacity: 1;
  }
}

/* PIW SLIDE-OUT DRAWER STYLES */

.piw-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5); /* This is the translucent layer */
  z-index: 9999998; /* Massively boosted */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: pointer; /* Shows users they can click the background to close */
}

.piw-drawer-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
}

.piw-drawer {
  position: fixed;
  top: 0;
  right: -550px; /* Hidden offscreen by default */
  width: 550px;
  max-width: 90vw; /* Scales down on mobile so it doesn't break the screen */
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999999; /* Massively boosted to sit exactly one layer above the overlay */
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
}

.piw-drawer.is-open {
  right: 0; /* Slides in */
}

/* Header */
.piw-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
}

.piw-drawer-header h2 {
  margin: 0;
  font-size: 1.8rem;
}

.piw-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piw-drawer-close svg {
  width: 24px;
  height: 24px;
  fill: #1a1a1a;
}

/* Body */
.piw-drawer-body {
  padding: 0 0 3rem 0;
}

/* Image */
.piw-drawer-img-wrap {
  width: 100%;
  height: 260px;
}

.piw-drawer-img {
  width: 90%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

/* Text & Content */
.piw-drawer-text {
  padding: 2.5rem;
}

.piw-drawer-text h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.piw-drawer-text .rte {
  line-height: 1.6;
  font-size: 1.4rem;
}

/* Related Products Slider */
.piw-drawer-products {
  padding: 0 2rem 2rem 2rem;
  border-top: 1px solid #eaeaea;
  padding-top: 2rem;
}

.piw-drawer-products h4 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Bulletproof the Carousel inside the Drawer */
.piw-drawer-products .piw-drawer-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hides scrollbar in Firefox */
  margin: 0;
  padding-bottom: 1rem;
}

.piw-drawer-products .piw-drawer-slider::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Chrome/Safari */
}

.piw-drawer-products .slider__slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  /* Shows exactly 2 products at a time, leaving room for the gap */
  width: calc(50% - 10px) !important; 
}

@media screen and (max-width: 749px) {
  .piw-drawer-header, .piw-drawer-text, .piw-drawer-products {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Product Card Master Overwrite */

.card-information__text.h4 {
  letter-spacing: 0!important;
}

.price,
.card-information__text.h4,
.bundle-products .product-title {
  letter-spacing: unset!important;
}
.price bdi {
  font-size: 1.3rem!important;
}

/* ============================================================================
   GLOSSARY TILE GRID
============================================================================== */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop, 4), 1fr);
  gap: 1.5rem;
}

.piw-lazy-hidden {
  display: none !important;
}

.glossary-tile {
  position: relative;
  aspect-ratio: 1 / 1; /* Forces a perfect square */
  cursor: pointer;
  overflow: hidden;
}

.glossary-tile-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glossary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glossary-tile:hover .glossary-img {
  transform: scale(1.08); /* Gentle zoom on hover */
}

.glossary-tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--gradient-height, 50%);
  background: linear-gradient(to top, rgba(0, 0, 0, var(--gradient-opacity, 0.85)) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  z-index: 2;
}


.glossary-tile-content h3 {
  font-family: Inter;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: unset;
  color: #ffffff;
  margin: 0;
  width: 100%;
  line-height: 1.3; 
  min-height: 3.9em; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tablet columns */
@media screen and (max-width: 989px) {
  .glossary-grid {
    grid-template-columns: repeat(var(--grid-columns-tablet, 3), 1fr);
  }
}

/* Mobile columns */
@media screen and (max-width: 749px) {
  .glossary-grid {
    grid-template-columns: repeat(var(--grid-columns-mobile, 2), 1fr);
    gap: 1rem;
  }
  .glossary-tile-content {
    padding: 1rem;
  }
}

/* Healthy Beauty Club Customizations */
.beauty-club-program-details {
            overflow-x: hidden;
        }
        .steps-sequence {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }
        .col-step {
            width: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .col-step .header-digit {
            background-color: #ffffff;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            border: #000000 1px solid;
        }
        .col-step .header-digit p {
            color: #000000;
            font-family: Inter, sans-serif;
            text-align: center;
            font-size: 2rem;
            font-weight:300;
            margin: 0;
            line-height: 50px;
        }
        .col-step .header-text {

        }
        .col-step .header-text p {
            font-family: Cormorant, serif;
            text-transform:uppercase;
            font-size: 2.3rem;
            margin: .50rem 0 0 0;
        }
        .col-step .header-subtext p {
            font-family: Inter, sans-serif;
            font-size: 1.5rem;
            line-height: 2.25rem;
            margin: 0;
            text-align: center;
        }
        .button-cta-container {
            max-width: 900px;
            height: 150px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .button-cta-container .button-join-cta {
            width: fit-content;
            background-color: #E4F6A8;
            padding: .8rem 7.5rem;
            text-align: center;
        }
        .button-cta-container .button-join-cta a {
            color: #000000;
            font-size: 1.2rem;
            letter-spacing:.2em;
            font-family: Inter;
            font-weight: 600;
            text-transform: uppercase;
            text-decoration: none;
        }
        .chart-container {
            max-width: 900px;
            overflow-x: auto;
            margin: 0 auto;
        }
        .chart-container .details-chart {
            width: 900px;
        }
        .chart-container .details-chart .chart-heading-row {
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            border-bottom: 1px solid #E5E7EB;
        }
        .chart-container .details-chart .chart-heading-row .chart-heading.details {
          align-items:unset;
        }
        .chart-container .details-chart .chart-heading-row .chart-heading {
            width: calc(100% / 3);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .chart-container .details-chart .chart-heading-row .chart-heading p {
            color: #000000;
            font-family: Inter, sans-serif;
            font-weight: 400;
            font-size: 1.5rem;
            margin: 0;
            text-transform: uppercase;
        }
        .chart-container .details-chart .chart-information .chart-data-row {
            display: flex;
            flex-direction: row;
            min-height: 50px;
            border-bottom: 1px solid #E5E7EB;
        }
        .chart-container .details-chart .chart-information .chart-data-row .chart-data-cell {
            width: calc(100% / 3);
            max-width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1.5rem 0;
        }
        .chart-container .details-chart .chart-information .chart-data-row .chart-data-cell:first-of-type p {
            text-align: left;
        }
        .chart-container .details-chart .chart-information .chart-data-row .chart-data-cell:not(:first-of-type) p {
            text-align: center;
        }
        .chart-container .details-chart .chart-information .chart-data-row .chart-data-cell p {
            font-family: Inter, sans-serif;
            font-size: 1.25rem;
            font-weight: 300;
            text-transform: uppercase;
            margin: 0;
        }
        .chart-container .details-chart .chart-information .chart-data-row .chart-data-cell .small {
            font-size: 1rem;
        }
        .chart-container .details-chart .chart-information .chart-data-row .chart-data-cell .cell-dot-indicator {
            width: 10px;
            height: 10px;
            display: block;
            background-color: #000000;
            border-radius: 10px;
            margin: auto;
        }
        @media screen and (max-width: 576px) {
            .steps-sequence {
                padding: 0 2rem;
                flex-direction: column;
                align-items: center;
            }
            .steps-sequence .col-step:not(:last-of-type) {
                margin-bottom: 2rem;
            }
            .button-cta-container .button-join-cta {
                max-width: 80%;
            }
        }
/* ==========================================
   CUSTOM BLOG PAGE WIDGET
========================================== */

/* Forces the navigation to stack underneath the title, aligned left */
.custom-blog-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.custom-blog-header h1 {
  margin: 0;
}

.custom-blog-nav-wrapper {
  width: 100%;
}

.custom-blog-nav {
  display: flex;
  flex-wrap: wrap; 
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Sharp borders, no radius */
.custom-blog-nav li a {
  display: inline-block;
  padding: 6px 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.custom-blog-nav li a:hover {
  border-color: #cccccc;
}

.custom-blog-nav li a.is-active {
  border: 1px solid #000000;
}

/* Mobile scrolling for the tags */
@media screen and (max-width: 768px) {
  .custom-blog-nav {
    flex-wrap: nowrap; 
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    padding-bottom: 5px;
  }
  .custom-blog-nav::-webkit-scrollbar {
    display: none; 
  }
  .custom-blog-nav li {
    flex-shrink: 0;
  }
}

/* Article Card Structure */
.custom-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.custom-card-media {
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1.5rem;
  position: relative;
}

.custom-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Custom Ratio Classes */
.ratio-3-4 { aspect-ratio: 3.4 / 4; }
.ratio-5-1-4 { aspect-ratio: 5.1 / 4; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-landscape { aspect-ratio: 3 / 2; }
.ratio-portrait { aspect-ratio: 2 / 3; }

/* The Row holding the Tag and Read More */
.custom-card-meta-row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.85em;
}

.custom-card-tag {
  border: 1px solid #000;
  padding: 4px 10px;
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size:1.2rem;
}

/* Bulletproof Right-Alignment for the link */
.custom-card-read-more {
  text-decoration: underline;
  text-transform: lowercase;
  text-underline-offset: 4px;
  color: inherit;
  font-weight: 300;
  margin-left: auto; 
}
/* Make the info area a flex column so we can anchor the bottom */
.custom-card-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

/* 3. HEADLINE (Now forced to 3 lines) */
.custom-card-title {
  margin: 0 0 1rem 0;
  width: 100%;
  line-height: 1.4; 
  min-height: 2.6em; /* 1.3 x 2 = 2.6 (Exactly 2 lines tall) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 2.4rem;
}

.custom-card-title a {
  text-decoration: none;
  color: inherit;
  text-transform: none;
}

/* 4. EXCERPT (Margin-top auto removed!) */
.custom-card-excerpt {
  width: 100%;
  line-height: 1.5;
  min-height: 4.5em; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.5rem; /* Breathing room before the link */
}

.custom-card-excerpt p {
  margin: 0;
}

/* 5. READ MORE LINK LOGIC */

/* Default rule: Pushes link to the right when sharing a row with the Tag (Main/Related Widgets) */
.custom-card-meta-row .custom-card-read-more {
  margin-left: auto; 
}

/* Specific rule: Pushes link to the bottom when in the separate wrapper (Featured Widget) */
.custom-card-read-more-wrapper {
  margin-top: auto; 
  display: flex;
  justify-content: flex-start; /* Aligns left */
}

/* Overrides the right-alignment when inside the new bottom wrapper */
.custom-card-read-more-wrapper .custom-card-read-more {
  margin-left: 0; 
}


/* ==========================================
   CUSTOM BLOG GRID (Powered by Settings)
========================================== */
.custom-blog-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop, 3), 1fr);
  gap: 2rem; /* The spacing between blog cards */
}

@media screen and (max-width: 989px) {
  .custom-blog-grid {
    grid-template-columns: repeat(var(--grid-columns-tablet, 2), 1fr);
    gap: 1.5rem;
  }
}

@media screen and (max-width: 749px) {
  .custom-blog-grid {
    grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
    gap: 1.5rem;
  }
}
/* ==========================================
   RELATED ARTICLES GRID & SLIDER
========================================== */
.custom-related-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop, 3), 1fr);
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 989px) {
  .custom-related-grid {
    grid-template-columns: repeat(var(--grid-columns-tablet, 2), 1fr);
    gap: 1.5rem;
  }
}

@media screen and (max-width: 749px) {
  /* If Mobile Slider is OFF, stack them in a grid normally */
  .custom-related-grid:not(.slider) {
    display: grid !important;
    grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
    gap: 1.5rem;
  }
  
  /* If Mobile Slider is ON, size the slides based on the column setting so they fit perfectly in the viewport before swiping */
  .custom-related-grid.slider .custom-related-slide {
    width: calc(100% / var(--grid-columns-mobile) - 1rem); 
  }
}
/* ==========================================
   NATIVE OVERFLOW SLIDER TRACK
========================================== */
.custom-related-track {
  display: grid;
  grid-auto-flow: column;
  /* Dynamically sizes cards based on Desktop setting */
  grid-auto-columns: calc((100% - (2rem * (var(--visible-desktop) - 1))) / var(--visible-desktop));
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem; /* Gives breathing room for scrollbar */
  margin: 0;
  list-style: none;
  scrollbar-width: none; /* Hides scrollbar in Firefox */
}

.custom-related-track::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Chrome/Safari */
}

.custom-related-slide {
  scroll-snap-align: start; /* Locks the cards into place when swiping */
}

@media screen and (max-width: 989px) {
  .custom-related-track {
    /* Locks tablet nicely to 2 items */
    grid-auto-columns: calc((100% - 1.5rem) / 2);
    gap: 1.5rem;
  }
}

@media screen and (max-width: 749px) {
  .custom-related-track {
    /* Dynamically sizes cards based on Mobile setting (1, 1.5, or 2) */
    grid-auto-columns: calc((100% - (1.5rem * (var(--visible-mobile) - 1))) / var(--visible-mobile));
    gap: 1.5rem;
  }
}

/* ==========================================
   FEATURED BOWTIE CAROUSEL
========================================== */

/* HEADER & CONTROLS */
.custom-featured-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}

/* Forces the native theme slider buttons to be visible on desktop in our custom header */
.custom-featured-header-row .slider-buttons {
  display: flex !important;
  align-items: center;
  position: static !important;
  margin: 0 !important;
}

.custom-featured-header-row .slider-button {
  display: flex !important;
}

/* Flips the native theme arrow backwards for the previous button */
.custom-featured-header-row .slider-button--prev svg {
  transform: rotate(180deg);
}

/* DESKTOP MORPHING LOGIC */
@media screen and (min-width: 750px) {
  .custom-featured-bowtie {
    display: flex;
    align-items: flex-start;
    margin: 0 -1rem; /* Offset the internal padding to match grid edges */
    list-style: none;
    padding: 0;
  }

  .custom-featured-item {
    padding: 0;
    flex: 0 0 0%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    /* This transition is what makes the magic morphing accordion effect happen */
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
  }

  .custom-featured-item.is-active {
    padding: 0 1rem; /* Visual 2rem gap created via padding so widths animate perfectly */
    opacity: 1;
    visibility: visible;
  }

  .custom-featured-item.is-small {
    flex: 0 0 20%;
  }

  .custom-featured-item.is-large {
    flex: 0 0 30%;
  }
}

/* MOBILE FALLBACK TRACK */
@media screen and (max-width: 749px) {
  .custom-featured-header-row .slider-buttons {
    display: none !important; /* Hide buttons, allow native swiping */
  }
  .custom-featured-bowtie {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 1rem;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
  }
  .custom-featured-bowtie::-webkit-scrollbar {
    display: none;
  }
  .custom-featured-item {
    flex: 0 0 calc(85% - 1.5rem); /* Allows 1.5 item visibility for easy swiping */
    scroll-snap-align: start;
    opacity: 1 !important; /* Force overrides the JS rules */
    visibility: visible !important;
  }
}

@media screen and (max-width: 749px) {
  
  .custom-card-info, .custom-article-card {
    height: unset;
  }
}
.custom-hero-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

.custom-hero-image {
  width: 100%;
  height: var(--image-height, 400px); 
  object-fit: cover; 
  object-position: var(--focal-x, 50%) var(--focal-y, 50%); 
  transition: height 0.1s ease-out; 
}

/* Desktop Aspect Ratios */
.custom-article-hero--adapt { padding-bottom: var(--image-ratio-percent); height: 0; }
.custom-article-hero--adapt img { position: absolute; top: 0; left: 0; }
.custom-article-hero--100vh { height: 100vh; }
.custom-article-hero--400px { height: 400px; }
.custom-article-hero--450px { height: 450px; }
.custom-article-hero--500px { height: 500px; }
.custom-article-hero--550px { height: 550px; }
.custom-article-hero--600px { height: 600px; }
.custom-article-hero--650px { height: 650px; }
.custom-article-hero--700px { height: 700px; }
.custom-article-hero--750px { height: 750px; }

/* Mobile Aspect Ratios */
@media screen and (max-width: 749px) {
  .mobile-hero--adapt { padding-bottom: var(--image-ratio-percent) !important; height: 0 !important; }
  .mobile-hero--adapt img { position: absolute !important; top: 0; left: 0; }
  .mobile-hero--100vh { height: 100vh !important; padding-bottom: 0 !important; }
  .mobile-hero--200px { height: 200px !important; padding-bottom: 0 !important; }
  .mobile-hero--250px { height: 250px !important; padding-bottom: 0 !important; }
  .mobile-hero--300px { height: 300px !important; padding-bottom: 0 !important; }
  .mobile-hero--400px { height: 400px !important; padding-bottom: 0 !important; }
  .mobile-hero--500px { height: 500px !important; padding-bottom: 0 !important; }
  .mobile-hero--600px { height: 600px !important; padding-bottom: 0 !important; }
  /* .mobile-hero--auto intentionally left blank to inherit desktop heights */
}

/* Enable smooth scrolling for the anchor links */
html {
  scroll-behavior: smooth;
}

/* Mobile First Layout */
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.flex-1, .flex-3 {
  width: 100%;
}

.flex-3 {
  padding: 10px;
}

/* Visibility Toggles */
.hide-on-desktop {
  display: block;
}
.hide-on-mobile {
  display: none;
}

/* Mobile Sticky Dropdown */
.mobile-sticky-nav {
  position: sticky;
  top: 60px; /* Adjust based on your header height */
  z-index: 20;
  background-color: #ffffff;
  padding: 15px 10px;
  border-bottom: 1px solid #eaeaea;
}

.faq-mobile-select {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  color: #1c1c1c;
  outline: none;
}

/* Desktop Sidebar Nav */
.stick-sidebar {
  position: sticky;
  top: 80px;
  padding: 10px;
  z-index: 10;
}

.block-link {
  display: block;
  margin-bottom: 10px;
}

a.block-link.h6 {
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: unset;
  color: #999; /* Subdued color for inactive links */
  transition: all 0.2s ease;
  border-left: 3px solid transparent; /* Hidden border prep for active state */
  padding-left: 0;
}

a.block-link.h6:hover {
  color: rgb(28, 28, 28), .8;
}

/* Desktop Active State Highlight */
a.block-link.h6.active {
  color: rgb(28, 28, 28);
  font-weight: 500; /* Bolder font */
  border-left: 3px solid rgb(28, 28, 28); /* Vertical line */
  padding-left: 12px; /* Pushes text to the right */
  margin-left: -15px; /* Pulls element left so text aligns with inactive links */
}

/* Category Headers */
.country-header {
  margin: 30px 0;
  scroll-margin-top: 140px; /* Prevents sticky navs from covering the title */
}

.country-header:first-child {
  margin-top: 0px;
}

/* Accordion & Animated Icon Styles */
details.accordion summary {
  list-style: none;
}
details.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.animated-plus {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  position: relative;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.animated-plus:before,
.animated-plus:after {
  content: '';
  position: absolute;
  background-color: rgb(28, 28, 28);
  transition: opacity 0.3s ease;
}

.animated-plus:before {
  width: 0.625rem;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.animated-plus:after {
  height: 100%;
  width: 1px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Open State */
details[open] .animated-plus {
  transform: rotate(180deg);
}

details[open] .animated-plus:after {
  opacity: 0; 
}

/* Desktop Layout Overrides */
@media (min-width: 769px) {
  .flex-container {
    flex-direction: row;
  }
  .flex-1 {
    flex: 1;
    padding: 10px;
    text-align: left;
  }
  .flex-3 {
    flex: 3;
    padding: 10px;
  }
  .hide-on-desktop {
    display: none;
  }
  .hide-on-mobile {
    display: block;
  }
}

//* Custom Image with Text Grid */
.split-container {
  display: flex;
  flex-direction: column; /* Stacks image and text vertically on mobile */
  align-items: center;
  width: 100%;
}

.split-image-half,
.split-text-half {
  width: 100%;
}

.split-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Mobile text padding */
.split-text-half {
  padding: 2rem 1.5rem; 
}

.split-text-half .button {
  margin-top: 2rem;
}

/* Desktop 50/50 split */
@media screen and (min-width: 750px) {
  .split-container {
    flex-direction: row; /* Puts them side-by-side on desktop */
  }

  /* Reverses the flex direction when Image Right is selected */
  .split-container.reverse {
    flex-direction: row-reverse;
  }

  .split-image-half,
  .split-text-half {
    width: 50%;
  }
  
  /* Desktop text padding */
  .split-text-half {
    padding: 4rem;
  }
}

/* Custom Multicolumn Image Slider */
.custom-slider-widget {
  --slide-gap: 15px; /* Spacing between cards */
}

/* Flex layout to align arrows to the bottom of the description */
.custom-slider-widget .custom-featured-header-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end; /* Aligns items to the bottom */
  margin-bottom: 2rem;
  gap: 1.5rem;
}

.custom-slider-widget .custom-featured-header-row .title-wrapper {
  margin: 0;
  flex: 1 1 auto;
}

/* Kills the invisible bottom margin on the description text so the arrows sit flush */
.custom-slider-widget .custom-featured-header-row .rich-text__text {
  margin-bottom: 0;
}
.custom-slider-widget .custom-featured-header-row .rich-text__text p:last-child {
  margin-bottom: 0;
}

.custom-slider-widget .custom-featured-header-row .slider-buttons {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-bottom: 0.25rem; /* Tiny optical nudge so the visual center of the arrow aligns with text */
}

/* Slider Mechanics & Peek Math */
.custom-slider-widget .custom-slider-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--slide-gap);
  padding-left: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  
  /* Hide scrollbars */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.custom-slider-widget .custom-slider-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.custom-slider-widget .multicolumn-list__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Desktop Peek Math */
@media screen and (min-width: 750px) {
  .custom-slider-widget .multicolumn-list__item {
    width: calc(100% / (var(--columns-desktop) + 0.3) - var(--slide-gap));
  }
}

/* Mobile Peek Math */
@media screen and (max-width: 749px) {
  .custom-slider-widget .multicolumn-list__item {
    width: calc(100% / (var(--columns-mobile) + 0.3) - var(--slide-gap));
  }
}

/* Custom 60/40 Split Widget */
.custom-split-60-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: stretch; /* Stretches both panes to equal height */
}

/* Flips the layout if Image Left is selected */
.custom-split-60-wrapper.layout-reverse {
  flex-direction: row-reverse;
}

/* 60% Text Pane */
.custom-split-60-text-pane {
  width: 100%;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Forces description and headings to respect the schema text color */
.custom-split-60-text-pane .rte,
.custom-split-60-text-pane .rte p,
.custom-split-60-text-pane .title {
  color: inherit;
}

/* Inner Image (60% Pane) */
.custom-split-60-inner-wrapper {
  width: 100%;
  margin: 2rem 0;
}

.custom-split-60-inner-wrapper.align-left { text-align: left; }
.custom-split-60-inner-wrapper.align-center { text-align: center; }
.custom-split-60-inner-wrapper.align-right { text-align: right; }

.custom-split-60-inner-wrapper .inner-image-container {
  display: inline-block;
  width: 100%;
  max-width: var(--inner-width, 100%);
}

.custom-split-60-inner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: var(--inner-aspect-ratio);
}

/* Secondary Image (40% Pane) */
.custom-split-60-image-pane {
  width: 100%;
  position: relative;
}

.secondary-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.custom-split-60-secondary-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0; 
  left: 0;
}

/* Height controls for the 40% Pane */
.custom-split-60-image-pane.height-fill .secondary-image-wrapper {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

.custom-split-60-image-pane.height-400px { height: 400px; }
.custom-split-60-image-pane.height-500px { height: 500px; }
.custom-split-60-image-pane.height-600px { height: 600px; }
.custom-split-60-image-pane.height-100vh { height: 100vh; }

/* Mobile Rules */
@media screen and (max-width: 749px) {
  /* On mobile, if 'Fill Space' is chosen, it has no side-by-side text to stretch to, so we give it a default square ratio */
  .custom-split-60-image-pane.height-fill .secondary-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
  }
}

/* Desktop Rules */
@media screen and (min-width: 750px) {
  .custom-split-60-text-pane {
    width: 60%;
    padding: 5rem;
  }
  .custom-split-60-image-pane {
    width: 40%;
  }
}

/* Custom Think Dirty Widget */
.custom-think-dirty-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Forces items to stay on the same line */
  align-items: center; /* Vertically centers the text with the icon */
  gap: 3rem;
}

.custom-think-dirty-icon {
  width: var(--icon-size-desktop, 225px);
  height: var(--icon-size-desktop, 225px);
  flex-shrink: 0; /* Prevents the icon from squishing */
}

.custom-think-dirty-icon img,
.custom-think-dirty-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the logo fits perfectly inside the square */
}

.custom-think-dirty-text {
  flex: 1 1 auto; /* Takes up the remaining space and allows text to wrap internally */
}

.custom-think-dirty-text .title {
  margin: 0; /* Removes default margins so it centers cleanly */
}

/* Mobile Layout: Stay side-by-side, but reduce gap and apply mobile icon size */
@media screen and (max-width: 749px) {
  .custom-think-dirty-container {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    text-align: left; 
  }
  
  .custom-think-dirty-icon {
    width: var(--icon-size-mobile, 100px);
    height: var(--icon-size-mobile, 100px);
    flex-shrink: 0;
  }
}
/* Custom Think Dirty Widget */
.custom-think-dirty-container {
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertically centers the text with the icon on desktop */
  gap: 3rem;
}

.custom-think-dirty-icon {
  width: var(--icon-size-desktop, 225px);
  height: var(--icon-size-desktop, 225px);
  flex-shrink: 0; /* Prevents the icon from squishing */
}

.custom-think-dirty-icon img,
.custom-think-dirty-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the logo fits perfectly inside the square */
}

.custom-think-dirty-text {
  flex: 1 1 auto; /* Takes up the remaining space */
}

.custom-think-dirty-text .title {
  margin: 0; /* Removes default margins so it centers cleanly */
}

/* Mobile Layout: Stack vertically, center icon, left-align text */
@media screen and (max-width: 749px) {
  .custom-think-dirty-container {
    flex-direction: column;
    align-items: flex-start; /* Pushes the text block to the left */
    gap: 1.5rem;
  }
  
  .custom-think-dirty-icon {
    width: var(--icon-size-mobile, 100px);
    height: var(--icon-size-mobile, 100px);
    align-self: center; /* Overrides the left-alignment to center just the icon */
  }

  .custom-think-dirty-text,
  .custom-think-dirty-text .title {
    text-align: left !important; /* Forces text left on mobile, overriding desktop settings */
  }
}

/* ==============================================================
   Deals & Announcement Bar Custom Styles (FINAL)
============================================================== */

/* Fix to ensure Rich Text fields stay on a single line */
.announcement-text .metafield-rich_text_field,
.announcement-text .metafield-rich_text_field p {
  display: inline;
  margin: 0;
  padding: 0;
}

/* --- Mobile First Announcement Wrapper --- */
.announcement-inner-wrapper {
  position: relative; 
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 10px 6px; 
  gap: 4px; 
}

.announcement-inner-wrapper announcement-bar {
  width: 100%;
}

/* --- Announcement Bar Button --- */
.deals-inline-trigger {
  background: transparent;
  border: 1px solid rgba(var(--color-foreground), 0.5);
  color: rgb(var(--color-foreground));
  padding: 2px 10px; 
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  line-height: 1.2;
}

/* Announcement Button Hover Color */
.deals-inline-trigger:hover {
  background: #0A251C;
  /*border-color: #0A251C;*/
  color: #ffffff;
}

/* --- Deals Sidebar Content Styles --- */

/* Fix invisible text: Force black text for all content inside the drawer content area */
.seasonal-deal__content {
  color: #000000;
}

.seasonal-deal__item h3,
.seasonal-deal__item p,
.seasonal-deal__item div,
.seasonal-deal__item .promo-desc,
.seasonal-deal__item .promo-desc p {
  color: #000000 !important; 
}

/* Standardize the deal item for flex centering and dividers */
.seasonal-deal__item {
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center; 
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}

/* Remove divider and margin from the last deal so it's clean */
.seasonal-deal__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Smart Spacing: Only add top margin if an image comes before the text */
.seasonal-deal__item .text-group {
  width: 100%;
}

.image-animate + .text-group {
  margin-top: 15px; 
}

/* Adjust margins for deal elements for centering and balance */
.seasonal-deal__item h3 {
  margin-top: 0; /* Removes the awkward gap when no image is present */
  margin-bottom: 8px; /* Adds breathing room below the title */
}

.seasonal-deal__item .promo-desc {
  margin-top: 0;
  margin-bottom: 12px; /* Better spacing below description */
}

.seasonal-deal__item .deal-coupon {
  margin-top: 5px;
  margin-bottom: 15px;
}

/* Center the CTA button in the sidebar */
.seasonal-deal__item a.button {
  margin-left: auto;
  margin-right: auto;
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
}

/* --- Sticky Sidebar Header --- */
.seasonal-deal__header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #ffffff; 
  padding-bottom: 10px; 
}

/* --- Desktop Layout Adjustments --- */
@media screen and (min-width: 750px) {
  .announcement-inner-wrapper {
    flex-direction: row;
    padding: 0;
    justify-content: center; 
  }
  
  .announcement-inner-wrapper header-popover {
    position: absolute;
    right: 5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 2;
  }
  
  .deals-inline-trigger {
    margin: 0;
    padding: 4px 12px; 
    font-size: 1.2rem;
  }
}

/* ==============================================================
   Metaobject Homepage Banner Slider Styles
============================================================== */

.custom-banner-slider-wrapper {
  position: relative;
  width: 100%;
  display: block;
}

.custom-banner-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide scrollbar Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.custom-banner-slider::-webkit-scrollbar {
  display: none; 
}

.custom-banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  width: 100%;
}

.custom-banner-slide .banner__media {
  position: relative;
  width: 100%;
  display: block;
}

.custom-banner-slide a.full-unstyled-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

/* --- SHOP THE ROUTINE PRODUCT CARD STYLING --- */
.shop-the-routine-grid .flex-grid__item {
  display: flex !important;
  flex-direction: column !important;
}

/* Force the images to expand and fill the container */
.shop-the-routine-grid .card-wrapper,
.shop-the-routine-grid .card,
.shop-the-routine-grid .card__inner {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.shop-the-routine-grid .card__media,
.shop-the-routine-grid .card__media-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

/* Force all text, pricing, and swatches to center */
.shop-the-routine-grid .card__content,
.shop-the-routine-grid .card-information,
.shop-the-routine-grid .card-information__wrapper {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.shop-the-routine-grid .price {
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* Center Add to Cart buttons / Swatches if enabled */
.shop-the-routine-grid .card-information > *,
.shop-the-routine-grid .card__content > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- KLAVIYO CUSTOM SECTION STYLES --- */
.klaviyo-section-padding {
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

.klaviyo-grid {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.klaviyo-grid__image,
.klaviyo-grid__content {
  flex: 1;
  width: 100%;
}

.klaviyo-grid__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

/* Desktop Layouts */
@media screen and (min-width: 769px) {
  .klaviyo-layout--image_right {
    flex-direction: row-reverse;
  }
  .klaviyo-layout--no_image {
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }
  .klaviyo-layout--no_image .klaviyo-grid__content {
    width: 100%;
  }
}

/* Mobile Layouts */
@media screen and (max-width: 768px) {
  .klaviyo-grid {
    gap: 3rem;
  }
  .klaviyo-mobile--image_top {
    flex-direction: column;
  }
  .klaviyo-mobile--image_bottom {
    flex-direction: column-reverse;
  }
  .klaviyo-layout--no_image {
    flex-direction: column;
  }
}

.klaviyo-heading {
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 2rem;
}

.klaviyo-heading-container {
  width: 100%;
}