/** Shopify CDN: Minification failed

Line 98:18 Unexpected "{"
Line 98:27 Expected ":"

**/
product-component,
collection-component {
  display: block;
}

:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button--primary {
  animation: buttonGlowPulse 3.2s ease-in-out infinite;
}

@keyframes buttonGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 125, 170, 0.35); }
  50% { box-shadow: 0 0 0 0.6rem rgba(199, 125, 170, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .banner__heading {
    animation: heroFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 100ms;
  }
  .banner__text {
    animation: heroFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 280ms;
  }
  .banner__buttons {
    animation: heroFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 460ms;
  }
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(1.6rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (max-width: 749px) {
  h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5, .header__heading-link, .badge, p, .rte, .subtitle {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
}

/* Accessibility: stronger, more visible keyboard-focus outline site-wide
   (helps keyboard/screen-reader users on both mobile and desktop see
   exactly which control is focused), and a guaranteed minimum tap-target
   size (44x44px, the standard accessibility minimum) on every clickable
   control, not just the ones we'd previously sized manually. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 0.2rem solid rgb(var(--color-button)) !important;
  outline-offset: 0.2rem !important;
}

a,
button,
.button,
.header__icon,
.quantity__button,
input[type="checkbox"],
input[type="radio"] {
  min-height: 4.4rem;
  min-width: 4.4rem;
}

.list-menu__item--link,
.header__icon,
.footer-block__details-content a {
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
}

/* Product page gallery: force the main-image prev/next arrows to always
   show on desktop, even with the "thumbnail" gallery layout (which
   normally hides them, assuming you'll click a thumbnail instead). Now
   PC users can click an arrow directly over the photo to move through
   every image, without needing to click a thumbnail below. */
@media screen and (min-width: 750px) {
  #GalleryViewer-{{ section.id }} .slider-buttons,
  .product__media-wrapper .slider-buttons {
    display: flex !important;
  }

  .product__media-wrapper slider-component .slider-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    justify-content: space-between;
    padding: 0 1.6rem;
    pointer-events: none;
    z-index: 5;
  }

  .product__media-wrapper slider-component .slider-buttons .slider-button {
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
  }

  .product__media-wrapper slider-component .slider-buttons .slider-counter {
    display: none;
  }
}

/* "You deserve relief." section: pain-point text overlaid directly on the
   bottom of each photo (instead of shown below it), same 3-column layout
   as before. Card becomes the positioning context; the info block (which
   normally sits below the image) moves to sit on top of it instead, with
   a dark gradient scrim behind the text and light color + shadow for
   legibility, matching the hero's treatment. No box-shadow/border/glow
   is applied to the images themselves — explicitly stripped below so
   there's no gray shadow/gap visible between the photos. */
.shopify-section[id$="__how_it_helps"] .multicolumn-card {
  position: relative;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

.shopify-section[id$="__how_it_helps"] .multicolumn-card__image-wrapper {
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.shopify-section[id$="__how_it_helps"] .multicolumn-card__image-wrapper .media,
.shopify-section[id$="__how_it_helps"] .multicolumn-card__image-wrapper img {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* The built-in slide counter here counts groups/pages of visible slides,
   not individual photos — at some widths it groups 3 photos into 2
   pages and shows the wrong fraction (e.g. "1/2" instead of "1/3").
   Hiding just the numeric counter (not the whole .slider-buttons block)
   keeps the working prev/next arrows AND finger-swipe/scroll exactly as
   they were; it just removes the one piece of UI that was miscounting. */
.shopify-section[id$="__how_it_helps"] .slider-buttons .slider-counter {
  display: none !important;
}

/* Text sits a little higher above the bottom edge than a plain flush
   overlay would — gradient scrim still reaches all the way to the
   bottom of the photo, only the caption's baseline moves up (extra
   bottom padding), so it still reads as "low on the picture" but with
   a bit of breathing room underneath it. */
.shopify-section[id$="__how_it_helps"] .multicolumn-card__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.5rem 3rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  box-shadow: none !important;
}

/* Shortened copy in this section is sized down slightly from the theme's
   default h3, giving it comfortable room to sit on a single line inside
   each photo overlay, on both the full 3-up desktop layout and the
   narrower "peek" slider column used on tablet/mobile. */
.shopify-section[id$="__how_it_helps"] .multicolumn-card__info h3 {
  color: #ffd9ec;
  text-shadow: 0 0.15rem 0.8rem rgba(0, 0, 0, 0.5), 0 0.3rem 1.6rem rgba(0, 0, 0, 0.35);
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.3;
}

/* "Three Steps to Relief" — professional DTC-brand step layout: numbered
   circle badges generated purely via CSS counters (no markup needed),
   a connecting horizontal line running through the badges to show
   progression, and card-style panels with subtle border/shadow and a
   gentle lift on hover, similar to Casper/Away/Glossier-style "how it
   works" sections. All three badges are pinned to an identical, fixed
   box size (box-sizing: border-box, flex: none) so none of them can
   render larger than the others regardless of font rendering quirks. */
.shopify-section[id$="__how_it_works"] ul.multicolumn-list {
  counter-reset: step-number;
  align-items: stretch !important;
}

.shopify-section[id$="__how_it_works"] .multicolumn-list__item {
  position: relative;
}

.shopify-section[id$="__how_it_works"] .multicolumn-card {
  background-color: rgb(var(--color-background));
  border-radius: 1.6rem;
  padding: 3.2rem 2rem 2.4rem;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06);
  border: 0.1rem solid rgba(var(--color-foreground), 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shopify-section[id$="__how_it_works"] .multicolumn-card:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.1);
}

.shopify-section[id$="__how_it_works"] .multicolumn-card__info {
  position: relative;
  width: 100%;
}

.shopify-section[id$="__how_it_works"] .multicolumn-card__info::before {
  counter-increment: step-number;
  content: counter(step-number, decimal-leading-zero);
  box-sizing: border-box !important;
  flex: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2rem !important;
  height: 5.2rem !important;
  min-width: 5.2rem;
  min-height: 5.2rem;
  max-width: 5.2rem;
  max-height: 5.2rem;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: rgb(var(--color-button));
  color: #ffffff;
  font-family: var(--font-body-family), sans-serif;
  font-size: 1.7rem !important;
  line-height: 1 !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  box-shadow: 0 0.4rem 1.2rem rgba(var(--color-button), 0.35);
}

.shopify-section[id$="__how_it_works"] .multicolumn-card__info h3 {
  font-size: 1.9rem;
  margin-bottom: 0.6rem;
}

/* Connecting line running behind the badges, only between them (desktop) */
@media screen and (min-width: 750px) {
  .shopify-section[id$="__how_it_works"] ul.multicolumn-list {
    position: relative;
  }

  .shopify-section[id$="__how_it_works"] .multicolumn-list__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 5.8rem;
    right: -3%;
    width: 6%;
    height: 0.2rem;
    background: rgba(var(--color-button), 0.3);
    z-index: 1;
  }
}

/* Trust badges: icon + label side by side, one row, thin dividers between
   items — DESKTOP ONLY (750px and up). On mobile, this section falls
   back entirely to the theme's own normal behavior: badges stack
   vertically and the visitor simply scrolls down the page to see each
   one, same as any other section on the site. */
@media screen and (min-width: 750px) {
  .shopify-section[id$="__multicolumn_trust"] .page-width {
    max-width: 120rem;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .shopify-section[id$="__multicolumn_trust"] ul.multicolumn-list,
  .shopify-section[id$="__multicolumn_trust"] ul.multicolumn-list.grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100%;
  }

  .shopify-section[id$="__multicolumn_trust"] .multicolumn-list__item {
    flex: 0 0 auto !important;
    padding: 0 1.2rem !important;
    border-right: 0.1rem solid rgba(var(--color-foreground), 0.12);
    white-space: nowrap;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .shopify-section[id$="__multicolumn_trust"] .multicolumn-list__item:last-child {
    border-right: none;
  }

  .shopify-section[id$="__multicolumn_trust"] .multicolumn-list__item > * {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .shopify-section[id$="__multicolumn_trust"] .multicolumn-card__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    border-radius: 0.8rem !important;
    width: 3.4rem !important;
    height: 3.4rem !important;
    margin-bottom: 0 !important;
    margin-right: 0.8rem !important;
    flex-shrink: 0;
  }

  .shopify-section[id$="__multicolumn_trust"] .multicolumn-card__icon .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
  }

  .shopify-section[id$="__multicolumn_trust"] .multicolumn-card__info,
  .shopify-section[id$="__multicolumn_trust"] .multicolumn-card__info h3,
  .shopify-section[id$="__multicolumn_trust"] .multicolumn-list__item .card__heading {
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    font-weight: 700;
    margin: 0 !important;
    line-height: 1.2 !important;
    align-self: center !important;
  }
}

/* Hero text legibility: light pink color (readable against the darkened
   photo) plus a soft shadow for extra contrast */
.banner--desktop-transparent .banner__heading,
.banner--desktop-transparent .banner__text {
  color: #ffd9ec;
  text-shadow: 0 0.15rem 0.8rem rgba(0, 0, 0, 0.45), 0 0.3rem 1.6rem rgba(0, 0, 0, 0.3);
}

/* Hero parallax — SCOPED ONLY TO THE FIRST BANNER (image_banner section).
   The background photo stays pinned/frozen in place while the heading,
   subtext, and buttons scroll normally over it. We target the section by
   its JSON key suffix so this never touches the "Introducing Lumared"
   banner or any other image-banner section on the site. We ONLY touch the
   image itself — the theme's own positioning system for the text content
   is left completely untouched, so it stays centered correctly. */
@media (prefers-reduced-motion: no-preference) and (min-width: 750px) {
  .shopify-section[id$="__image_banner"]:has(> .banner) {
    transform: translateZ(0);
    overflow: hidden;
  }

  .shopify-section[id$="__image_banner"] .banner .banner__media img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
}

/* Banner hover-swap: two images set through the normal Shopify image
   pickers (Image / Image 2), crossfading on hover instead of the theme's
   default side-by-side layout. The box itself is sized by the theme's own
   "adapt" height setting (matches the first image's aspect ratio exactly),
   so the image fills the box edge-to-edge with no empty space and nothing
   cropped. object-fit: contain is kept only as a safety net in case the
   two images have slightly different proportions from each other. */
.banner--hover-swap .banner__media--hover-swap {
  overflow: hidden;
  background-color: rgb(var(--color-background));
}

.banner--hover-swap .banner__media--hover-swap img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.banner--hover-swap .banner__media-image--primary {
  opacity: 1;
  transition: opacity 400ms ease;
}

.banner--hover-swap .banner__media-image--secondary {
  opacity: 0;
  transition: opacity 400ms ease;
}

.banner--hover-swap:hover .banner__media-image--primary {
  opacity: 0;
}

.banner--hover-swap:hover .banner__media-image--secondary {
  opacity: 1;
}

/* Trim the "Introducing Lumared" banner's overall height by half an inch
   off the top and half an inch off the bottom. This crops the section
   itself (image + overlay together) evenly from both edges, using the
   section's own ID suffix so nothing else on the page is affected. */
.shopify-section[id$="__featured_collection"] {
  overflow: hidden;
  margin-top: -0.5in;
  margin-bottom: -0.5in;
  position: relative;
  z-index: 1;
}

/* Mobile readability & tap-target improvements */
@media screen and (max-width: 749px) {
  body {
    font-size: 1.6rem;
    line-height: 1.55;
  }

  .button,
  .customer button {
    min-height: 4.8rem;
  }

  .header__icon,
  .header__icon--cart .icon {
    height: 4.8rem;
    width: 4.8rem;
  }

  .banner__buttons .button {
    width: 100%;
  }

  h1, .h1 { font-size: 3rem; }
  h2, .h2 { font-size: 2.2rem; }
}

/* Product page: premium DTC polish. Bigger, more elegant title, refined
   letter-spacing, a softer luxurious price treatment, and a clean
   checkmark-style trust row right under the buy button. */
.product__title h1 {
  font-size: 3.4rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.product__info-wrapper .price {
  font-size: 1.9rem;
  font-weight: 700;
  color: rgb(var(--color-button));
}

.product__info-wrapper .product-form,
.product__info-wrapper > * {
  margin-bottom: 1.8rem;
}

.product__info-wrapper .button {
  min-height: 5.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
}

/* The "trust_row" text block: turn the plain uppercase text into a clean,
   centered row of checkmark reassurances instead of a dense uppercase
   line, matching the reassurance strip you'd see on Glossier/Skims-style
   product pages right under the Buy button. */
.product__info-wrapper .product__text.caption-with-letter-spacing {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(var(--color-button));
  padding: 1.2rem 0;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.product__description {
  font-size: 1.15rem;
  line-height: 1.7;
}

/* "You'll Also Love" related products: airier spacing, matches the rest
   of the site's premium feel */
.shopify-section[id$="__related-products"] .title {
  margin-bottom: 3rem;
}

/* Product card carousel: click arrows (or swipe on touch) to move through
   the first 3 photos. Visibility is controlled ENTIRELY by .is-active,
   no conflicting always-on rules. */
card-carousel.card-carousel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  isolation: isolate;
  z-index: 10;
}

card-carousel.card-carousel img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 0 !important;
  z-index: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

card-carousel.card-carousel img.is-active {
  opacity: 1 !important;
  z-index: 1;
}

card-carousel.card-carousel button.card-carousel__nav {
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  height: 3.4rem !important;
  width: 3.4rem !important;
  transform: translateY(-50%);
  z-index: 20 !important;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  border: 0.1rem solid rgba(0, 0, 0, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform 150ms ease;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
  padding: 0;
}

card-carousel.card-carousel button.card-carousel__nav .svg-wrapper {
  width: 1.2rem;
  height: 1.2rem;
}

card-carousel.card-carousel button.card-carousel__nav--prev .svg-wrapper {
  transform: rotate(90deg);
}

card-carousel.card-carousel button.card-carousel__nav--next .svg-wrapper {
  transform: rotate(-90deg);
}

card-carousel.card-carousel button.card-carousel__nav:hover {
  transform: translateY(-50%) scale(1.1);
}

card-carousel.card-carousel button.card-carousel__nav--prev {
  left: 0.8rem !important;
}

card-carousel.card-carousel button.card-carousel__nav--next {
  left: auto !important;
  right: 0.8rem;
}

/* Neutralize the theme's invisible "stretched link" overlay (from the product
   title) specifically on cards that contain our carousel, so it can never
   swallow clicks meant for the arrows. The visible title link itself still
   works normally — this only removes its enlarged invisible click zone. */
.card__inner:has(.card-carousel) .card__heading a::after,
.card:has(.card-carousel) .card__heading a::after {
  pointer-events: none !important;
}

/* Delicate, feminine header styling */
.header-wrapper {
  border-bottom: none !important;
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-button), 0.25) !important;
}

.header__menu-item span {
  letter-spacing: 0.1em;
  font-weight: 500;
  position: relative;
}

.header__menu-item span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.3rem;
  height: 0.15rem;
  background: rgb(var(--color-button));
  border-radius: 999px;
  transition: right 220ms ease;
}

.header__menu-item:hover span::after {
  right: 0;
}

.header__icon .icon {
  stroke-width: 1.25px;
}

.announcement-bar__message {
  font-style: italic;
  letter-spacing: 0.03em;
  font-weight: 400;
}

.header__heading-logo {
  filter: drop-shadow(0 0.1rem 0.3rem rgba(var(--color-button), 0.2));
}