/* ===========================
   PRODUCT SCROLLY STYLES
   Fixed center image with left/right alternating content sections
   =========================== */

/* Main wrapper */
.single-product-custom-wrapper {
  position: relative;
  min-height: 100vh;
}

/* Fixed center product image - always visible */
.scrolly-bottle-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  width: auto;
  max-height: 60vh;
}

.scrolly-bottle {
  display: block;
  width: 130px;
  height: auto;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 2;
}

/* Ingredient images around the bottle */
.ingredient-image-secondary {
  position: absolute;
  left: 10%;
  bottom: -6%;
  width: auto;
  height: 170px !important;
  z-index: 2;
  opacity: 1;
  max-width: 400px !important;
}

@media (max-width: 1024px) {
  .ingredient-image-secondary {
    left: -60%;
    height: 150%;
  }
}

@media (max-width: 768px) {
  .ingredient-image-secondary {
    left: -50%;
    height: 130%;
  }
}

/* Decorative assets container */
.scrolly-assets-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.scrolly-asset {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(80px, 10vw, 150px);
  height: auto;
  opacity: 0;
  transition: all 0.6s ease-out;
}

/* Scrollable sections container */
.hero-scrolly-container {
  position: relative;
  z-index: 8; /* above assets (5), below bottle (10) */
}

.scrolly-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  scroll-snap-align: start;
  padding: 120px 40px;
}

/* Hero intro section - full viewport with centered content */
.scrolly-section-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
}

.hero-intro-content {
  max-width: 800px;
  width: 100%;
  z-index: 15;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.hero-main-title {
  font-size: clamp(60px, 12vw, 140px);
  font-weight: 700;
  letter-spacing: -3px;
  margin: 0 0 40px;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  line-height: 0.9;
}

.hero-description {
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 0 auto 40px;
  max-width: 700px;
  font-weight: 500;
}

.hero-cta {
  margin-top: 30px;
}

/* Content positioning */
.scrolly-content {
  max-width: 480px;
  width: 100%;
}

/* Center content (intro section) */
.scrolly-content-intro {
  margin: 0 auto;
  text-align: center;
}

/* Left content */
.scrolly-content-left {
  margin-right: auto;
  margin-left: clamp(20px, 5vw, 80px);
}

/* Right content */
.scrolly-content-right {
  margin-left: auto;
  margin-right: clamp(20px, 5vw, 80px);
}

/* Split layout (ingredients section with 3 left, 3 right) */
.scrolly-section[data-position="split"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px clamp(20px, 8vw, 120px);
}

.scrolly-section[data-position="split"] .scrolly-content-left {
  justify-self: end;
  margin: 0;
}

.scrolly-section[data-position="split"] .scrolly-content-right {
  justify-self: end;
  margin: 0;
  text-align: right;
}

/* Content inner styling */
.scrolly-content-inner {
  padding: 32px 28px;
}

/* Typography */
.scrolly-title {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.scrolly-ingredient {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 600;
  margin: 0 0 24px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.scrolly-subtitle {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.scrolly-wysiwyg {
  font-size: 18px;
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.scrolly-wysiwyg p {
  margin: 0 0 16px;
}

.scrolly-wysiwyg p:last-child {
  margin-bottom: 0;
}

/* Callout items (ingredients) */
.scrolly-callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.scrolly-callout {
  padding: 0;
}

.callout-headline {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.callout-text {
  font-size: 16px;
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  opacity: 0.95;
}

/* Scroll snap behavior */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  scroll-snap-type: y mandatory;
}

/* Ensure the last section still snaps first; require an extra scroll to reach footer */
.scrolly-section:last-of-type,
.scrolly-section:last-child {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Provide a snap point at the footer wrapper so viewport can settle there */
.site-footer {
  scroll-snap-align: start;
}

/* Provide a snap point at the header wrapper so viewport can settle at top */
.site-header {
  scroll-snap-align: start;
}

/* ===========================
   MOBILE RESPONSIVE
   Stack everything vertically with product image on top
   =========================== */
@media (max-width: 768px) {
  /* Product image at top, not fixed */
  .scrolly-bottle-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto 30px;
    width: auto;
    max-height: 350px;
    z-index: 1;
  }

  .scrolly-bottle {
    height: clamp(250px, 40vh, 350px);
  }

  /* Assets less prominent on mobile */
  .scrolly-assets-container {
    opacity: 0.3;
  }

  .scrolly-asset {
    width: clamp(60px, 15vw, 120px);
  }

  /* Stack all content vertically */
  .scrolly-section {
    min-height: auto;
    padding: 40px 20px;
    display: block;
  }

  /* Hero section mobile adjustments */
  .scrolly-section-hero {
    padding: 60px 20px 100px;
  }

  .hero-main-title {
    font-size: clamp(48px, 15vw, 80px);
    margin-bottom: 30px;
  }

  .hero-description {
    font-size: clamp(16px, 4vw, 20px);
    margin-bottom: 30px;
  }

  .scrolly-section[data-position="split"] {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 20px;
  }

  .scrolly-content,
  .scrolly-content-left,
  .scrolly-content-right,
  .scrolly-content-intro {
    margin: 0 auto 20px;
    max-width: 100%;
  }

  .scrolly-section[data-position="split"] .scrolly-content-left,
  .scrolly-section[data-position="split"] .scrolly-content-right {
    justify-self: stretch;
    text-align: left;
  }

  /* Typography adjustments */
  .scrolly-title {
    font-size: clamp(32px, 10vw, 48px);
  }

  .scrolly-ingredient {
    font-size: clamp(20px, 8vw, 32px);
  }

  .scrolly-subtitle {
    font-size: clamp(20px, 6vw, 28px);
  }

  .scrolly-content-inner {
    padding: 24px 20px;
  }

  /* Disable scroll snap on mobile for smoother experience */
  html,
  body {
    scroll-snap-type: none;
  }

  .scrolly-section {
    scroll-snap-align: none;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .scrolly-bottle-wrap {
    max-width: 320px;
    width: 28vw;
  }

  .scrolly-content {
    max-width: 400px;
  }

  .scrolly-section[data-position="split"] {
    gap: 40px;
    padding: 60px 40px;
  }
}

.single-product .site-header-row-container-inner {
  margin-top: 40px;
}