/** Shopify CDN: Minification failed

Line 20:1 Unexpected "1667E1"

**/

/*------------------------------------
    BUTTON HOVER
*------------------------------------*/


.slideshow { height: auto; }
@media (max-width: 990px) { .header__heading-logo-wrapper .logo--mobile { width: 140px; } }
.button:hover,
.button:hover {
  background-color: #1667E1; /* change background */
  color: #FFE9F5; /* change text */
  transform: scale(1.05); /* subtle grow effect */
  transition: all 0.3s ease; /* smooth animation */
}1667E1

/*------------------------------------
    HEADER
*------------------------------------*/

@media screen and (max-width:749px) {
section.fullheight-bg .section-background {
 position:absolute !important;
}
}
/* Default: pink everywhere */
.section-header .header-wrapper {
  background-color: #F7AFD8 !important;
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
/* If the theme uses the gradient layer, neutralize it by default too */
.section-header .header-wrapper.gradient::before {
  background: #F6C3E0 !important;
  background-image: none !important;
}

/* HOMEPAGE (you have `is-home`): transparent BEFORE scroll */
body.is-home .section-header:not(.scrolled-past-header) .header-wrapper,
body.is-home .section-header:not(.scrolled-past-header) .header-wrapper.gradient::before {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  position: absolute !important; /* sit over hero */
  top: 0; left: 0; right: 0;
}

/* HOMEPAGE: pink AFTER scroll */
body.is-home .section-header.scrolled-past-header .header-wrapper,
body.is-home .section-header.scrolled-past-header .header-wrapper.gradient::before {
  background: #F7AFD8 !important;
  background-color: #F7AFD8 !important;
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}





/* Hide footer image wrapper on mobile only (<= 749px, Dawn/Craft breakpoint) */
@media screen and (max-width: 749px) {
  .footer .footer-block__image-wrapper  {
    display: none !important;
  }
}


/* Hide footer image wrapper on mobile only (<= 749px, Dawn/Craft breakpoint) */
@media screen and (max-width: 749px) {
  .footer-block .scroll-trigger .animate--slide-in {
    display: none !important;
  }
}

/* iPad & most tablets: 768–1366px + touch */
@media screen and (min-width: 768px) and (max-width: 1366px) and (hover: none) {

  /* 1) Paint the WHOLE section blue */
  .shopify-section:has(.newsletter__wrapper) {
    background: #1667E1 !important;
  }

  /* 2) Neutralize inner white panels/overlays */
  .shopify-section:has(.newsletter__wrapper) .gradient,
  .shopify-section:has(.newsletter__wrapper) .gradient::before,
  .shopify-section:has(.newsletter__wrapper) .content-container,
  .shopify-section:has(.newsletter__wrapper) .content-container::before,
  .shopify-section:has(.newsletter__wrapper) .grid,
  .shopify-section:has(.newsletter__wrapper) .grid__item {
    background: transparent !important;
    background-image: none !important;
  }

  /* 3) Remove side gutters so blue touches edges */
  .shopify-section:has(.newsletter__wrapper) .page-width {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Keep the newsletter box the SAME width, centered */
  .newsletter__wrapper {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;   /* small inner breathing room */
    padding-right: 20px;
  }
}



/* Header should NEVER overlay the product page */
body:not(.template-index) .section-header .header-wrapper {
  position: relative !important;
  z-index: 20 !important;          /* stays above page, but not huge */
}
.product__media-wrapper,
.media-gallery,
.thumbnail-list,
.product__media-list {
  position: relative;
  z-index: 1;
}


/* Phones only (<= 749px) — make the banner image taller */
@media screen and (max-width: 749px) {

  /* 1) Force a tall box, whether the banner is "adapt" or fixed size */
  .banner,
  .banner .banner__media {
    min-height: 80vh !important;   /* try 60–85vh to taste */
  }

  /* 2) If your theme uses aspect-ratio, neutralize it so min-height wins */
  .banner .banner__media {
    aspect-ratio: auto !important;
  }

  /* 3) If your theme uses the padding-bottom trick on ::before, override it */
  .banner .banner__media::before {
    content: "";
    padding-bottom: 0 !important;   /* kill the ratio box */
  }

  /* 4) Make the image actually fill the taller area */
  .banner__media img,
  .banner__media picture,
  .banner__media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;    /* adjust if you want more “headroom” */
    display: block;
  }
}