/** Shopify CDN: Minification failed

Line 406:2 Unexpected "{"
Line 406:3 Expected identifier but found "%"
Line 415:2 Unexpected "{"
Line 415:3 Expected identifier but found "%"
Line 1190:4 Comments in CSS use "/* ... */" instead of "//"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:accordion (INDEX:1) */
.accordion__panel {
    max-height: 0;
    transition: max-height 0.3s ease;
  }

  .section-accordion .accordion__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: #151515;
    transform: translateY(-50%);
  }

  .section-accordion .accordion__icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1.5px;
    height: 100%;
    background: #151515;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
  }

  .accordion__trigger.is-open .accordion__icon::after {
    opacity: 0;
  }
/* END_SECTION:accordion */

/* START_SECTION:affiliate-text-and-image-slideshow (INDEX:5) */
.affiliate-how-to-join__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .affiliate-how-to-join__track::-webkit-scrollbar {
    display: none;
  }

  .affiliate-how-to-join__prev:disabled,
  .affiliate-how-to-join__next:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }
/* END_SECTION:affiliate-text-and-image-slideshow */

/* START_SECTION:announcement-bar (INDEX:6) */
.announcement-bar__slides {
    list-style: none;
    margin: 0;
    padding: 0;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article-upsells (INDEX:8) */
.articleCarousel .overflow-x-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .articleCarousel .overflow-x-auto::-webkit-scrollbar {
    display: none;
  }
/* END_SECTION:article-upsells */

/* START_SECTION:ba-slider (INDEX:10) */
.product-banner__slider-wrapper .img-slider::before {
    content: ' ';
    border-left: 4px solid #ffffff;
    height: 100%;
    position: absolute;
  }

  .no-select,
  .no-select * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  @media (min-width: 1024px) {
    .ba-slider__content {
      max-width: 470px;
    }
  }
/* END_SECTION:ba-slider */

/* START_SECTION:byob-main (INDEX:18) */
.newsletter-modal__floating {
    z-index: 1;
  }
  .product-detail-modal .benefits-content.list-check ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .product-detail-modal .benefits-content.list-check ul li {
    margin-bottom: 0;
    line-height: 18px;
  }
/* END_SECTION:byob-main */

/* START_SECTION:card-image-and-text (INDEX:19) */
.sustainability-packaging__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .sustainability-packaging__track::-webkit-scrollbar {
    display: none;
  }

  .embed-responsive {
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
  }

  .embed-responsive .fit--cover {
    object-fit: cover;
  }

  .embed-responsive-item {
    border-width: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }

  .embed-responsive:before {
    display: block;
    --tw-content: "";
    content: "";
    content: var(--tw-content);
 }
/* END_SECTION:card-image-and-text */

/* START_SECTION:cart (INDEX:21) */
.cart-redirect-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    width: 100%;
  }

  .cart-redirect-loading__spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    animation: cart-redirect-spin 0.7s linear infinite;
  }

  @keyframes cart-redirect-spin {
    to {
      transform: rotate(360deg);
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collections (INDEX:23) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:content-tabs (INDEX:24) */
/* Richtext descriptions can carry more than one <p> (e.g. the main copy
     plus a separate "Ideal for:" line) - give consecutive paragraphs a gap
     since the theme's base styles zero out <p> margins. */
  .content-tabs__description p + p {
    margin-top: var(--spacing-1);
  }
/* END_SECTION:content-tabs */

/* START_SECTION:custom-section (INDEX:25) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:featured-articles (INDEX:29) */
.featured-articles__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .featured-articles__track::-webkit-scrollbar {
    display: none;
  }

  .featured-articles__card:hover .featured-articles__image-wrap:after {
    opacity: 0.2;
    content: '';
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
  }
/* END_SECTION:featured-articles */

/* START_SECTION:footer (INDEX:30) */
.footer__socials-currency svg {
    height: 1em;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:31) */
/* icon-palm-tree.svg is raw inlined markup (inline_asset_content), not
     classable from the render call itself - nudges the icon up 3px to
     optically align it with the loyalty label text next to it, desktop
     only (#loyalty-desktop-link only renders lg:flex). */
  @media (min-width: 992px) {
    #loyalty-desktop-link svg {
      margin-top: -3px;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hello-world (INDEX:32) */
.welcome {
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #f6f6f7;
    padding: 72px 0;
  }

  .welcome-content {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 24px;
  }

  .welcome-description {
    max-width: 80ch;
    line-height: 1.4;
    margin-top: 1.5rem;
  }

  .icon {
    width: 300px;
  }

  .highlights {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  @media (max-width: 1100px) {
    .highlights {
      grid-template-columns: 1fr;
    }
  }

  .highlight {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #eef3ff;
    color: rgb(92, 95, 98);
    line-height: 1.4;
  }

  .highlight > * + * {
    margin-top: 1rem;
  }

  .highlight h3 {
    font-size: 1rem;
    color: rgb(32, 34, 35);
  }

  .highlight-description {
    flex: 1 1;
  }

  .highlight a {
    display: flex;
    width: fit-content;
    background-color: rgb(250, 251, 251);
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset;
    border: 1px solid rgb(140, 145, 150);
    border-radius: 4px;
    color: rgb(92, 95, 98);
    padding: 3px 10px 5px;
    text-decoration: none;
  }
/* END_SECTION:hello-world */

/* START_SECTION:image-banner (INDEX:34) */
.image-banner__text {
    max-width: var(--text-max-width-mobile);
  }

  @media (min-width: 992px) {
    .image-banner__content {
      padding-left: var(--content-padding-desktop);
      padding-right: var(--content-padding-desktop);
    }

    .image-banner__text {
      max-width: var(--text-max-width-desktop);
    }
  }
/* END_SECTION:image-banner */

/* START_SECTION:instagram (INDEX:35) */
.instagram-skeleton {
  background-color: #e5e7eb;
  animation: instagram-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes instagram-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
/* END_SECTION:instagram */

/* START_SECTION:page (INDEX:39) */
.page__content p {
    margin-bottom: 1rem;
  }
  .page__content ol {
    padding-left: 2.5rem;
  }
  .page__content a {
    text-decoration: underline;
    color: var(--color-primary);
  }
  .page-content ul {
    list-style-type: disc;
    padding-inline-start: 40px;
    margin-block-end: 1em;
  }
  {%- if page.handle == 'bali-beauty-club-terms-and-conditions' -%}
    .page__content a {
      text-decoration: none;
      color: var(--color-primary);
    }
    .page__content a:hover {
      text-decoration: underline;
      color: var(--color-primary-darken);
    }
  {%- endif -%}
  .yotpo-widget-loyalty-page {
    svg {
      display: inline;
    }

    .flexified-child.yotpo-outer-tile {
      img {
        display: inline;
      }
    }

    div,
    p,
    .yotpo-container-headline,
    .yotpo-title-text,
    .yotpo-vip-tier-name,
    .yotpo-headline,
    .yotpo-description,
    .yotpo-redemption-reward {
      line-height: normal;
    }

    .yotpo-vip-current-status-text {
      line-height: 26px;
    }

    input::-webkit-input-placeholder,
    input::placeholder {
      color: rgb(117, 117, 117);
    }
  }

  /* Gorgias chat container z-index override (handles randomized class names like .gorgias-chat-key-1vly0ou) */
  [class*="gorgias-chat-key-"],
  [class^="gorgias-chat-key-"],
  #gorgias-chat-container,
  #gorgias-chat-messenger-button,
  [id^="gorgias-chat-"] {
    z-index: 1029 !important;
  }
/* END_SECTION:page */

/* START_SECTION:playground (INDEX:41) */
.playground__track {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .playground__text p {
    margin: 0;
  }
/* END_SECTION:playground */

/* START_SECTION:predictive-search (INDEX:42) */
.search-carousel__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .search-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .search-carousel__prev,
  .search-carousel__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #7B7B7B;
  }

  .search-carousel__prev:hover,
  .search-carousel__next:hover {
    color: #151515;
  }

  @media (width < 992px) {
    .search-carousel__nav {
      display: none;
    }

    
  }
  .search--no-result a {
      text-decoration: underline;
    }
/* END_SECTION:predictive-search */

/* START_SECTION:product-collection-tabs (INDEX:43) */
.product-collection-tabs__nav,
  .product-collection-tabs__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .product-collection-tabs__nav::-webkit-scrollbar,
  .product-collection-tabs__track::-webkit-scrollbar {
    display: none;
  }
/* END_SECTION:product-collection-tabs */

/* START_SECTION:product-tabs (INDEX:45) */
.product-tabs__nav,
  .product-tabs__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .product-tabs__nav::-webkit-scrollbar,
  .product-tabs__track::-webkit-scrollbar {
    display: none;
  }
/* END_SECTION:product-tabs */

/* START_SECTION:real-results-tabs (INDEX:50) */
.real-results-tabs__nav,
  .real-results-tabs__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .real-results-tabs__nav::-webkit-scrollbar,
  .real-results-tabs__track::-webkit-scrollbar {
    display: none;
  }

  .real-results-tabs__video {
    background: #f2f2f2;
    display: block;
  }

  /* While src/scripts/product-card.js's add-to-cart handler has this
     button showing its spinner (data-spinner-html) instead of the plus
     icon, drop the pink background so only the spinner itself shows. */
  .real-results-tabs__add.is-loading {
    background: transparent;
  }
/* END_SECTION:real-results-tabs */

/* START_SECTION:real-results (INDEX:51) */
.real-results__tabs,
  .real-results__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .real-results__tabs::-webkit-scrollbar,
  .real-results__track::-webkit-scrollbar {
    display: none;
  }

  .real-results__card.is-hidden {
    display: none;
  }

  .real-results__video {
    background: #f2f2f2;
    display: block;
  }
/* END_SECTION:real-results */

/* START_SECTION:reviews-grid (INDEX:54) */
@media (min-width: 992px) {
    .result-card picture {
      padding-top: 52.8767123288%;
    }
  }

  .result-card picture {
    padding-top: 55.9420289855%;
  }

  .embed-responsive {
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
  }

  .embed-responsive .fit--cover {
    object-fit: cover;
  }

  .embed-responsive-item {
    border-width: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
  .reviews-grid__tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .reviews-grid__tabs::-webkit-scrollbar {
    display: none;
  }

  .reviews-grid [data-real-result-card].is-hidden {
    display: none;
  }

  .reviews-grid__show-more.is-hidden {
    display: none;
  }
/* END_SECTION:reviews-grid */

/* START_SECTION:search (INDEX:55) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* START_SECTION:sustainability-ingredient-standards (INDEX:58) */
.ingredient-tabs__panel h4,
  .accordion-content__inner h4 {
    margin-bottom: 10px;
  }

  .ingredient-standards__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }

  .accordion-content--open {
    max-height: 1000px;
  }

  .accordion-flush .accordion-item:last-child {
    border-bottom: 0;
  }
/* END_SECTION:sustainability-ingredient-standards */

/* START_SECTION:sustainability-text-image (INDEX:59) */
.sustainability--intro p {
  margin-bottom: 1.25rem;
  font-weight: 400;
}
/* END_SECTION:sustainability-text-image */

/* START_SECTION:text-and-image__slideshow (INDEX:60) */
.sustainability-story__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .sustainability-story__track::-webkit-scrollbar {
    display: none;
  }
/* END_SECTION:text-and-image__slideshow */

/* START_SECTION:timer-bar (INDEX:61) */
timer-bar-countdown {
    display: block;
  }

  /* Stay fixed at top on scroll — mirrors announcement-bar sticky behavior.
     Only applies when the data-sticky attribute is present. */
  body.has-sticky-header #timer-bar[data-sticky] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1032;
  }

  .announcement-bar__timer__countdown {
    list-style: none;
    padding: 0;
  }

  .announcement-bar__timer__countdown li {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  .announcement-bar__timer__countdown li span {
    display: block;
    font-size: 0.5625em;
    font-weight: normal;
    line-height: 1.25;
  }

  @media (min-width: 1024px) {
    .announcement-bar__timer__countdown li {
      font-size: 1.25rem;
      line-height: 1.563rem;
    }

    .announcement-bar__timer__countdown li span {
      font-size: 0.625em;
    }
  }
  .announcement-bar__timer .list-inline-item:not(:first-child):before {
    content: ':';
    position: absolute;
    left: -15px;
  }
/* END_SECTION:timer-bar */

/* START_SECTION:track-my-order (INDEX:62) */
#track-result-container .no_data_message a:hover {
    text-decoration: underline;
  }
/* END_SECTION:track-my-order */

/* START_SECTION:video-section (INDEX:63) */
.video-section__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .video-section__track::-webkit-scrollbar {
    display: none;
  }
/* END_SECTION:video-section */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:64) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:70) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:ba-slider-panel (INDEX:71) */
.product-banner__slider-wrapper .img-slider::before {
    content: " ";
    border-left: 4px solid #ffffff;
    height: 100%;
    position: absolute;
  }

  .no-select,
  .no-select * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  @media (min-width: 1024px) {
    .metafield-rich_text_field {
      max-width: 470px;
    }
  }
  .metafield-rich_text_field p + p {
    margin-top: 1.25rem;
  }

  .ba-slide--text-content strong {
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
  }

  @media (min-width: 1024px) {
    .ba-slide--text-content strong {
      font-size: 20px;
    }
  }
/* END_SNIPPET:ba-slider-panel */

/* START_SNIPPET:collection-banner-card-desktop (INDEX:74) */
.collection-banner-card--desktop {
    order: var(--order-desktop);
  }
/* END_SNIPPET:collection-banner-card-desktop */

/* START_SNIPPET:collection-banner-card-mobile (INDEX:75) */
.collection-banner-card--mobile {
    order: var(--order-mobile);
  }
/* END_SNIPPET:collection-banner-card-mobile */

/* START_SNIPPET:collection-filter (INDEX:79) */
.collection-filter__link.is-active {
    background: var(--color-body, #151515);
    color: #fff;
  }

  .collection-filter__list {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .collection-filter__list::-webkit-scrollbar {
    display: none;
  }
/* END_SNIPPET:collection-filter */

/* START_SNIPPET:exit-intent-popup (INDEX:85) */
.exit-intent-popup::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
/* END_SNIPPET:exit-intent-popup */

/* START_SNIPPET:image (INDEX:91) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:launch-waitlist-modal (INDEX:92) */
.launch-waitlist-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
  .launch-waitlist-modal__privacy a {
    color: var(--color-primary);
  }

  /* Fixed height (rather than matching the form state's, which left the
     shorter success content looking sparse) with its content vertically
     centered inside. The .hidden override needs no !important and no
     Tailwind layer-order trick to win — plain {% stylesheet %} CSS follows
     normal specificity, and .launch-waitlist-modal__success-state.hidden
     (two classes) already beats .launch-waitlist-modal__success-state
     (one) on its own. */
  .launch-waitlist-modal__success-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
  }
  .launch-waitlist-modal__success-state.hidden {
    display: none;
  }
/* END_SNIPPET:launch-waitlist-modal */

/* START_SNIPPET:mega-menu-ranges (INDEX:93) */
.mega-menu__link {
    position: relative;
    display: inline-block;
  }
  .mega-menu__link--highlight {
    overflow: hidden;
  }

  .mega-menu__link--highlight::after {
    content: '';
    position: absolute;
    left: -40px;
    bottom: 0;
    width: 40px;
    height: 1px;
    background: currentColor;
    background-color: #CE8011;
    animation: mega-menu-underline-sweep 2s linear infinite;
  }

  @keyframes mega-menu-underline-sweep {
    0% {
      left: -44px;
      opacity: 1;
    }
    35% {
      opacity: 1;
    }
    55% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      left: 100%;
    }
  }
/* END_SNIPPET:mega-menu-ranges */

/* START_SNIPPET:mega-menu-shop-all (INDEX:94) */
.mega-menu__link {
    position: relative;
    display: inline-block;
  }
/* END_SNIPPET:mega-menu-shop-all */

/* START_SNIPPET:mobile-nav-banner (INDEX:96) */
.mobile-nav-banner {
    background-color: var(--banner-color);
    color: var(--banner-color);
  }
/* END_SNIPPET:mobile-nav-banner */

/* START_SNIPPET:mobile-nav (INDEX:98) */
.mobile-submenu {
    transform: translateX(100%);
    transition: transform 0.15s ease-in-out;
  }

  .mobile-submenu.is-open {
    transform: translateX(0);
  }

  #collapseCountry.is-open {
    height: auto;
  }

  #countrySelect svg {
    transition: transform 0.15s ease-in-out;
  }

  #countrySelect[aria-expanded="true"] svg {
    transform: rotate(90deg);
  }
/* END_SNIPPET:mobile-nav */

/* START_SNIPPET:new-product-popup (INDEX:99) */
.new-product-popup::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
/* END_SNIPPET:new-product-popup */

/* START_SNIPPET:newsletter-modal (INDEX:100) */
.newsletter-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .newsletter-modal__compliance a {
    font-size: 12px;
    color: var(--color-primary);
  }

  .newsletter-modal__floating {
    cursor: pointer;
    transition: translate 0.3s ease, opacity 0.3s ease;
  }

  @media (min-width: 769px) {
    .newsletter-modal__floating {
      right: calc(50% - 577.5px);
    }
  }

  /* Toggled by src/scripts/newsletter-modal.js (initFloatingVisibility)
     whenever the modal's own `open` attribute changes — slides the tab
     down out of view (and fades it) while the modal is open, back up when
     it closes. `translate`, not `transform`, so it stays independent of
     any `transform` a future utility class on this element might add. */
  .newsletter-modal__floating.is-hidden {
    translate: 0 150%;
    opacity: 0;
    pointer-events: none;
  }

  /* Fixed height for the success state on mobile only, rather than
     matching the form state's rendered height (src/scripts/newsletter-form.js
     no longer locks .newsletter-modal__content's height via JS for this
     reason - see showSuccessState(root, 'newsletter', null) there) - same
     "sparse-looking success state" issue and fix as the launch-waitlist
     popup's own success state (snippets/launch-waitlist-modal.liquid). */
  .newsletter-modal__content:has(.newsletter-modal__success-state:not(.hidden)) {
    min-height: 484px;
  }
  @media (width < 992px) {
    .newsletter-modal__content:has(.newsletter-modal__success-state:not(.hidden)) {
      min-height: 400px;
    }
  }
/* END_SNIPPET:newsletter-modal */

/* START_SNIPPET:product-card (INDEX:105) */
.product-card__add-to-cart {
    opacity: 1;
    font-weight: normal;
  }

  @media (min-width: 769px) {
    .product-card__add-to-cart {
      padding: 11px;
    }
  }

  @media (hover: hover) {
    .product-card__add-to-cart {
      transition: opacity 0.2s ease-in-out;
    }
  }

  .spinner-border {
    display: inline-block;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: product-card-spin 0.75s linear infinite;
  }

  @keyframes product-card-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .product-card__rating svg {
    margin-top: -5px;
  }

  @media (min-width: 769px) {
    .product-card__rating svg {
      margin-top: -4px;
    }
  }

  /* Pink ring instead of .variant-swatch's shared dark border (that one's
     tuned for the cart drawer's swatches, not this card's white overlay). */

  .product-card__shades .variant-swatch {
    width: 30px;
    height: 30px;
  }
  .product-card__swatch.variant-swatch.selected {
    border: none;
    scale: 1;
  }
  .product-card__swatch.variant-swatch.selected::before {
    border-radius: 50%;
    content: ' ';
    border-color: var(--color-primary, #d62e55);
    border-width: 2px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -5px;
    left: -5px;
  }

  /* Desktop reveals this on a *second* hover — of the button/shade zone
     specifically, via group-hover/shades — so hovering the rest of the
     image doesn't show it. Mobile has no hover, so the always-visible
     "Choose Color" button (src/scripts/product-card.js) toggles this
     class on tap instead of relying on group-hover/shades. */
  .product-card__shades-wrap.is-revealed {
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile counterpart to the group-hover/shades:hidden|flex swap on the
     button's two label spans above — .is-revealed is a JS class toggle,
     not a real :hover, so group-hover/shades never fires for it. The
     shades-wrap is the button's preceding sibling in the markup, so the
     general sibling combinator reaches it from here. */
  .product-card__shades-wrap.is-revealed ~ .product-card__add-to-cart .product-card-btn__text {
    display: none;
  }
  .product-card__shades-wrap.is-revealed ~ .product-card__add-to-cart .product-card-btn__text-hover {
    display: flex;
  }

  /* BYOB button label toggle — default state (not yet added) */
  .product-card--byob .product-card__add-to-cart .product-card-btn__text--bundle {
    display: flex;
  }
  .product-card--byob .product-card__add-to-cart .product-card-btn__text--remove {
    display: none;
  }
  /* BYOB "added to bundle" state — button becomes outlined with "Remove" label */
  .product-card--byob .product-card__add-to-cart[data-byob-added] {
    background-color: var(--color-primary, #d62e55);
    border-color: var(--color-primary, #d62e55);
    color: #fff;
  }
  .product-card--byob .product-card__add-to-cart[data-byob-added] .product-card-btn__text--bundle {
    display: none;
  }
  .product-card--byob .product-card__add-to-cart[data-byob-added] .product-card-btn__text--remove {
    display: flex;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-detail-modal (INDEX:107) */
.product-detail-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .product-detail-modal__thumb.border-primary {
    border-color: var(--color-primary, #D62E55);
  }

  .product-detail-modal__thumbs-track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .product-detail-modal__thumbs-track::-webkit-scrollbar {
    display: none;
  }

  .product-detail-modal__track {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .product-detail-modal__track::-webkit-scrollbar {
    display: none;
  }

  /* Mirrors blocks/product-accordion.liquid's own component CSS
     (src/styles/products.css .accordion-item/etc. — not .accordion__icon,
     see snippets/product-detail-modal-content.liquid's doc comment),
     hand-copied as plain CSS since {% stylesheet %} blocks aren't run
     through Tailwind/PostCSS (no @apply here) and products.css only
     compiles into assets/products.css, loaded on the product template
     only — this modal can open from other templates too. Scoped under
     .product-detail-modal so these rules can't leak onto, or lose to,
     the real accordion when both are present on an actual product page
     (unlayered {% stylesheet %} CSS always beats @layer components/
     utilities regardless of specificity, so an unscoped copy here would
     otherwise override the PDP's own accordion styling). */
  .product-detail-modal .accordion-item {
    border-bottom: 1px solid var(--color-gray-500, #A3A3A3);
  }

  .product-detail-modal .accordion-item:first-child {
    // border-top: 1px solid var(--color-gray-500, #A3A3A3);
  }

  .product-detail-modal .accordion-item > summary {
    cursor: pointer;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    list-style: none;
  }
  @media (min-width: 992px) {
    .product-detail-modal .accordion-item > summary {
      padding: 30px 0;
    }

    .product-detail-modal .accordion-item:first-child {
      border-top: 1px solid var(--color-gray-500, #A3A3A3);
    }

    .product-detail-modal .accordion-item:last-child {
      border-bottom: 1px solid var(--color-gray-500, #A3A3A3);
    }
  }

  .product-detail-modal .accordion-item > summary::-webkit-details-marker {
    display: none;
  }

  .product-detail-modal .accordion-content__inner {
    padding-top: 0;
    padding-bottom: 30px;
    font-size: 0.875rem;
  }

  .product-detail-modal .list-check {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
  }

  .product-detail-modal .list-check li {
    position: relative;
    padding-left: 1.5em;
  }

  .product-detail-modal .list-check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.75em;
    height: 0.5em;
    border-bottom: 2px solid var(--color-dark, #151515);
    border-left: 2px solid var(--color-dark, #151515);
    transform: rotate(-45deg);
  }

  .product-detail-modal .benefits-content ul li {
    margin-bottom: 20px;
    padding-left: 2.5rem;
  }

  .product-detail-modal .benefits-content ul li::before {
    height: 0.75em;
    width: 1.5em;
    top: 0;
    border-color: var(--color-primary, #D62E55);
  }

  .product-detail-modal .link-collapse-icon {
    font-size: 0.875rem;
    cursor: pointer;
  }

  .product-detail-modal .how-to-use-content p + p {
    margin-top: 30px;
  }

  .product-detail-modal .how-to-use-video-card {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 0.5rem;
  }

  .product-detail-modal .how-to-use-video-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 407 / 404;
    max-height: 404px;
    width: 100%;
  }

  .product-detail-modal .how-to-use-video-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-detail-modal .how-to-use-video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-detail-modal .how-to-use-video-card__play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
  }

  .product-detail-modal .how-to-use-video-card__play-icon svg {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 3.25em;
    fill: #fff;
    color: #fff;
  }

  .product-detail-modal .how-to-use-video-card__label {
    font-weight: 700;
    margin-top: 0.25rem;
  }

  .product-detail-modal .shipping-table {
    width: 100%;
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }

  .product-detail-modal .shipping-table th,
  .product-detail-modal .shipping-table td {
    border: 1px solid var(--color-gray-500, #A3A3A3);
    padding: 0.25rem 0.5rem;
    text-align: center;
  }
  /* BYOB "added to bundle" state inside the product detail modal —
     shows "Added" at reduced opacity instead of the grid card's "Remove"
     label. Clicking the button still removes the item (byob-product-card.js). */
  /* BYOB button label toggle — default state (not yet added) */
  .product-detail-modal .product-card__add-to-cart .product-card-btn__text--bundle {
    display: flex;
  }
  .product-detail-modal .product-card__add-to-cart .product-card-btn__text--remove {
    display: none;
  }
  /* BYOB "added to bundle" state */
  .product-detail-modal .product-card__add-to-cart[data-byob-added] {
    opacity: 0.6;
  }
  .product-detail-modal .product-card__add-to-cart[data-byob-added] .product-card-btn__text--bundle {
    display: none;
  }
  .product-detail-modal .product-card__add-to-cart[data-byob-added] .product-card-btn__text--remove {
    display: flex;
  }
  .product-detail-modal .list-check.byob__benefits-content {
    margin-top: 10px;
  }
/* END_SNIPPET:product-detail-modal */

/* START_SNIPPET:product-launch-waitlist-form (INDEX:110) */
.product-waitlist__form a {
    color: var(--color-primary);
  }
/* END_SNIPPET:product-launch-waitlist-form */

/* START_SNIPPET:sale-popup (INDEX:130) */
.sale-popup::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
/* END_SNIPPET:sale-popup */

/* START_SNIPPET:search-panel (INDEX:131) */
.search-panel {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }

  /* Mobile: sits right below the header instead of overlapping it, and
     spans to the bottom of the viewport (flex column so the popular/result
     areas below the input row fill the remaining height and scroll
     internally, rather than stopping short at a guessed max-height). Top
     offset comes from --site-header-height, set in sections/header.liquid's
     JS since the header's rendered height isn't a fixed value. */
  @media (width < 992px) {
    .search-panel {
      top: 86px;
      bottom: 0;
      display: flex;
      flex-direction: column;
    }

    /* Without this, scrolling to the end of .search--popular/.search--result
       chains into the page behind the panel once the inner area runs out of
       scroll room, making the panel feel like it's "breaking" mid-scroll. */
    html:has(#search-panel.is-open) {
      overflow: hidden;
    }
  }

  .search-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Desktop: same show/hide mechanism as .mega-menu (plain display toggle,
     absolute, top: 100%, relative to #site-header) — no fade, no slide. */
  @media (width >= 992px) {
    .search-panel {
      display: none;
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .search-panel.is-open {
      display: block;
    }
  }
/* END_SNIPPET:search-panel */

/* START_SNIPPET:sweepstakes-modal (INDEX:135) */
.sweepstakes-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .sweepstakes__foot-note a {
    color: var(--color-primary);
  }

  @media (min-width: 992px) {
    .sweepstakes-modal__inner {
      background-image: var(--sweepstakes-desktop-bg);
      min-height: 500px;
      display: flex;
      align-items: center;
    }

    .sweepstakes-modal__content {
      width: 100%;
    }
  }
/* END_SNIPPET:sweepstakes-modal */

/* START_SNIPPET:tc-modal (INDEX:136) */
.tc-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .tc-modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
  }

  .tc-modal__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1.25rem;
  }

  .tc-modal__body {
    font-size: 16px;
    line-height: 1.5;
  }

  .tc-modal__body p {
    margin: 0 0 1em;
  }

  .tc-modal__body p:last-child {
    margin-bottom: 0;
  }

  .tc-modal__body a {
    color: var(--color-primary, #D62E55);
  }

  @media (width < 992px) {
    .tc-modal__close {
      top: 10px;
      right: 10px;
    }
  }
/* END_SNIPPET:tc-modal */

/* START_SNIPPET:video-modal (INDEX:138) */
.video-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Applied only when the PDP "How to Use" video card
     (snippets/product-how-to-use-video.liquid) opens this shared modal -
     toggled on `data-video-modal-frame-wrap` by
     src/scripts/video-section.js's click handler, since this same dialog
     is also reused by sections/video-section.liquid and
     sections/blog-howto-grid.liquid, whose own cards keep the default
     lg:max-w-[900px] sizing above. `aspect-video` (already on the element)
     keeps the 16:9 ratio, so a 720px-wide frame is 405px tall; mobile stays
     full-width with proportional (not fixed) height, unchanged. */
  @media (min-width: 992px) {
    .video-modal__frame-wrap--how-to-use {
      max-width: 720px;
    }
  }
/* END_SNIPPET:video-modal */

/* START_SNIPPET:waitlist-modal (INDEX:139) */
.waitlist-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  [data-waitlist-agreement] {
    border-color: #a3a3a3;
    width: 15px;
    height: 15px;
  }

  [data-waitlist-agreement]:checked {
    border-color: #D62E55;
  }
/* END_SNIPPET:waitlist-modal */