/** Shopify CDN: Minification failed

Line 502:1 Expected "}" to go with "{"

**/
/* ============================================================
   WYSP CUSTOM CSS
   Single source of truth for all custom styling.
   Organized by:
     1. Global typography & elements
     2. Header / Nav (site-wide)
     3. Footer (site-wide)
     4. Interactions (site-wide)
     5. Homepage — Hero (image-banner-style-2)
     6. Homepage — Image + text section (img-with-text-8)
     7. About page — Hero (img-with-text-9)
     8. About page — Intro text section (introduction-text)
     9. About page — Botanicals section (img-with-text-5)
    10. About page — How It Works (multi-column-1)
   ============================================================ */


/* ============================================================
   1. GLOBAL TYPOGRAPHY & ELEMENTS
   ============================================================ */

/* Heading kerning fix — Funnel Sans renders cleaner without letter-spacing */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: 0 !important;
}

/* Tighten smaller headline kerning on mobile */
@media (max-width: 749px) {
  h2, h3, h4, h5, h6,
  .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.02em !important;
  }
}

/* Buttons: Funnel Sans Bold, tighter padding, override theme height stretches */
.xo-btn {
  font-family: "Funnel Sans", sans-serif !important;
  font-weight: 700 !important;
}
.xo-btn,
.xo-btn--lg,
.xo-btn__content {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  min-height: 0 !important;
  height: auto !important;
}


/* ============================================================
   2. HEADER / NAV (site-wide)
   ============================================================ */

/* Make header solid on load (no transparent overlay) */
.xo-header__container--transparent {
  background-color: rgb(var(--color-background)) !important;
}

/* Nav: floating rounded white rectangle, 4rem side margins on desktop */
.xo-header__container,
.xo-header__container--transparent {
  background-color: rgb(255, 255, 255) !important;
  border-radius: 24px !important;
  margin: 10px 4rem !important;
  padding: 4px 24px !important;
  width: auto !important;
}

/* Mobile nav: tighter side margins so it doesn't feel cramped */
@media (max-width: 749px) {
  .xo-header__container,
  .xo-header__container--transparent {
    margin: 10px !important;
  }
}


/* ============================================================
   3. FOOTER (site-wide)
   ============================================================ */

/* Footer locked to brand purple */
footer.xo-section {
  background-color: #695c80 !important;
}


/* ============================================================
   4. INTERACTIONS (site-wide)
   ============================================================ */

/* Disable magnetic cursor effect on buttons (was making Shop Wysp drift) */
xo-magnetic xo-magnetic-content {
  transform: none !important;
  transition: none !important;
}

/* Hide the dark mode toggle button */
.xo-dark-mode-toggle,
[class*="dark-mode-toggle"],
button[aria-label*="dark mode" i],
button[aria-label*="color scheme" i] {
  display: none !important;
}


/* ============================================================
  /* ============================================================
   5. HOMEPAGE — HERO (image-banner-style-2)
   "Calm you / can repeat."
   ============================================================ */

/* Headline font on all sizes */
.image-banner-style-2 .img-banner-2__header {
  font-family: var(--font-heading-family), sans-serif !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ---------- Desktop ---------- */
@media (min-width: 750px) {
  .image-banner-style-2 .img-banner-2__inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .image-banner-style-2 .img-banner-2__header {
    font-size: 7rem !important;
    margin-bottom: 2.5rem !important;
  }
  .image-banner-style-2 .img-banner-2__description {
    font-size: 2.1rem !important;
    margin-bottom: 2rem !important;
  }
  .image-banner-style-2 .img-banner-2__brand {
    padding-bottom: 2.5rem;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .image-banner-style-2 .img-banner-2__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 749px) {
  .image-banner-style-2 .img-banner-2 .img-banner-2__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 12rem !important;      /* reduced from 18rem */
    padding-bottom: 3rem !important;
    min-height: 90vh !important;        /* fits iPhone viewport */
  }
  
  /* Kill xo-animate wrapper spacing */
  .image-banner-style-2 .img-banner-2 xo-animate {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Headline */
  .image-banner-style-2 .img-banner-2 .img-banner-2__header {
    font-size: 4.8rem !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
  }
  
  /* Subhead */
  .image-banner-style-2 .img-banner-2 .img-banner-2__description,
  .image-banner-style-2 .img-banner-2 .img-banner-2__box {
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
  }
  
  /* Button wrapper */
  .image-banner-style-2 .img-banner-2 .img-banner-2__button {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Brand (wysp logo) — pinned to bottom */
  .image-banner-style-2 .img-banner-2 .img-banner-2__brand {
    margin-top: auto !important;
    padding-bottom: 0 !important;
  }
  .image-banner-style-2 .img-banner-2 .img-banner-2__description {
  font-size: 1.65rem !important;  /* nudge size to change wrap point */
}
}

/* ============================================================
   6. HOMEPAGE — IMAGE + TEXT SECTION (img-with-text-8)
   Paragraph injected between image and button via ::before
   ============================================================ */

.img-with-text-8__bottom::before {
  content: "With a simple press of a button, Wysp gently disperses ethically and responsibly sourced botanicals, creating a calm, atmospheric reset in minutes.";
  display: block;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
  text-align: center;
  font-family: var(--font-body-family);
  font-size: 1.9rem;
  line-height: 1.5;
  color: inherit;
}

@media (max-width: 749px) {
  .img-with-text-8__bottom::before {
    font-size: 1.5rem;
    padding: 0.5rem 1.5rem 3rem;
  }
}
@media (min-width: 750px) {
  .featured-collection-1__right--product,
  .featured-collection-1__right--collection {
    grid-column: 7 / 13 !important;
  }
  .featured-collection-1__right--collection {
    margin-top: 2rem !important;
  }
}

@media (max-width: 749px) {
  .featured-collection-1__right--product {
    order: 1 !important;
  }
  .featured-collection-1__left {
    order: 2 !important;
  }
  .featured-collection-1__right--collection {
    order: 3 !important;
  }
}


/* ============================================================
   7. ABOUT PAGE — HERO (img-with-text-9)
   ============================================================ */

/* Eyebrow / subheading styling */
.img-with-text-9__subheading {
  font-weight: 700 !important;
  font-size: 1.7rem !important;
  letter-spacing: 0.15rem !important;
  color: #ffffff !important;
  padding-bottom: 3rem !important;
}

/* Force headline and text color to white (overrides theme defaults) */
.img-with-text-9__heading,
.img-with-text-9__heading *,
.img-with-text-9 .xo-text__heading,
.img-with-text-9 .xo-text__word,
.img-with-text-9 .xo-text__char {
  color: #ffffff !important;
}

/* Tablet/mobile: headline size */
@media (max-width: 991px) {
  .img-with-text-9__heading .xo-text__heading {
    font-size: 6rem !important;
    line-height: 1 !important;
  }
  
}


/* ============================================================
   8. ABOUT PAGE — INTRO TEXT SECTION (introduction-text)
   ============================================================ */

/* Hide intro section images on mobile only */
@media (max-width: 749px) {
  .introduction-text__image,
  .introduction-text__image--mobile {
    display: none !important;
  }
}

/* Eyebrow line break on mobile (forces "WE BELIEVE IN THE / POWER OF PAUSE") */
@media (max-width: 749px) {
  .introduction-text__head::before {
    content: "WE BELIEVE IN THE\A POWER OF PAUSE" !important;
    white-space: pre-line !important;
  }
}


/* ============================================================
   9. ABOUT PAGE — BOTANICALS SECTION (img-with-text-5)
   The bg image is hidden via section-level CSS; these rules
   restore normal content positioning at tablet/mobile widths.
   ============================================================ */

@media (max-width: 991px) {
  .img-with-text-5__content {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  .img-with-text-5__box {
    min-height: 22rem !important;
  }
  .img-with-text-5__banner {
    aspect-ratio: auto !important;
  }
}

/* Bump card headlines on mobile */
@media (max-width: 749px) {
  .img-with-text-5__box .img-with-text-5__title,
  .img-with-text-5__box h3,
  .img-with-text-5__box h4 {
    font-size: 2.4rem !important;
    line-height: 1.2 !important;
  }
}


/* ============================================================
   10. ABOUT PAGE HOW IT WORKS (multi-column-1)
   Disable hover transform/scale/opacity/filter on images
   ============================================================ */

.multi-column-1__item .xo-image,
.multi-column-1__item .xo-image img,
.multi-column-1__item:hover .xo-image,
.multi-column-1__item:hover .xo-image img,
.multi-column-1__image,
.multi-column-1__image img,
.multi-column-1__item:hover .multi-column-1__image,
.multi-column-1__item:hover .multi-column-1__image img {
  transform: none !important;
  scale: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

/* ===========================================
   About page hero — fix descender clipping
   on "Ritual, reimagined." headline
   =========================================== */

/* Target only the About page hero, not home hero */
.template-page-about .image-banner-style-2 .img-banner-2__heading,
.template-page-about .image-banner-style-2 .img-banner-2__word,
.template-page-about .image-banner-style-2 .img-banner-2__word xo-animate,
.template-page-about .image-banner-style-2 .img-banner-2__word xo-parallax-scroll {
  overflow: visible !important;
  line-height: 1.15;
}

/* Give the heading itself bottom breathing room so the
   descender on "g" and the period don't kiss the section edge */
.template-page-about .image-banner-style-2 .img-banner-2__heading {
  padding-bottom: 0.18em;
}

/* Ensure the section container doesn't clip the descender.
   If you need overflow:hidden for the video, use clip-path
   or just add bottom padding to the inner wrapper instead. */
.template-page-about .image-banner-style-2 .img-banner-2__inner {
  padding-bottom: 5rem; /* bump from your existing 4rem if needed */
}

/* Belt-and-suspenders: if the section itself is clipping,
   allow vertical overflow while keeping horizontal clipped
   (preserves the video containment) */
.template-page-about .image-banner-style-2 {
  overflow-x: hidden;
  overflow-y: visible;
}
/* About page hero — fix Funnel Sans descender clipping */
.template-page-about .image-banner-style-2 .img-banner-2__heading {
  /* Add padding inside the text's own box so descenders have room */
  padding-bottom: 0.25em;
  /* Override any tight line-height inherited from display-2 */
  line-height: 1.25 !important;
}

/* Force every clipping ancestor in the parallax chain to release */
.template-page-about .image-banner-style-2 .img-banner-2__word,
.template-page-about .image-banner-style-2 .img-banner-2__word > *,
.template-page-about .image-banner-style-2 xo-animate,
.template-page-about .image-banner-style-2 xo-parallax-scroll {
  overflow: visible !important;
  padding-bottom: 0.15em;
}
/* ===========================================
   About hero — anchor mobile video to left edge
   so the diffuser stays in frame on mobile
   =========================================== */

@media screen and (max-width: 767px) {
  #shopify-section-template--21631789269049__image_banner_style_2_9LfQzB .xo-video--modifier,
  #shopify-section-template--21631789269049__image_banner_style_2_9LfQzB .img-banner-2__bg--mobile video,
  #shopify-section-template--21631789269049__image_banner_style_2_9LfQzB .img-banner-2__bg--mobile img {
    object-fit: cover !important;
    object-position: 40% center !important;
    width: 100% !important;
    height: 100% !important;
  }
}
/* About hero — force line break before second word */
/* About hero — stack "Ritual," and "reimagined." on separate lines */
#shopify-section-template--21631789269049__image_banner_style_2_9LfQzB h1.img-banner-2__heading {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}
/* ============================================================
   14. PRODUCT PAGE — IMAGE GALLERY (mobile)
   Cap product image height on mobile so it doesn't dominate
   ============================================================ */

@media (max-width: 749px) {
  /* Cap the gallery image container height */
  .xo-product-info-media-carousel,
  .xo-product-info-media-carousel__image,
  .xo-product-info-media-carousel__image--radius {
    max-height: 50vh !important;
  }
  
  /* The actual image inside */
  .xo-product-info-media-carousel .xo-image,
  .xo-product-info-media-carousel .xo-image img,
  .xo-product-info-media-carousel img {
    max-height: 50vh !important;
    width: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  
  /* The carousel/gallery wrapper */
  .xo-product-info-media-carousel__content,
  xo-gallery,
  xo-carousel,
  xo-carousel-inner,
  xo-carousel-list,
  xo-carousel-slide,
  xo-gallery-item {
    max-height: 50vh !important;
  }
}
/* ============================================================
   14. PRODUCT PAGE
   Hide thumbnail strip on all sizes; center content on mobile
   ============================================================ */

/* Hide thumbnail strip (all sizes) */
.xo-product-info-media-carousel xo-carousel-thumbnail,
xo-carousel-thumbnail {
  display: none !important;
}
/* Product page — Features and Benefits accordion title */
.main-product__content .xo-collapse__trigger-title {
  font-family: var(--font-heading-family), sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.15rem !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  color: #695c80 !important;  /* brand purple to match eyebrow */
}

/* Mobile: center the product image */
@media (max-width: 749px) {
  .xo-product-info-media-carousel,
  .xo-product-info-media-carousel__image,
  .xo-product-info-media-carousel__content {
    text-align: center !important;
  }
  .xo-pro
  
/* ============================================================
   14. PRODUCT PAGE
   Hide thumbnail strip below main product image (all sizes) — THIS WILL NEED TO BE DELETED WHEN THERE ARE PRODUCT OPTIONS
   ============================================================ */

.xo-product-info-media-carousel xo-carousel-thumbnail,
xo-carousel-thumbnail {
  display: none !important;
}