/** Shopify CDN: Minification failed

Line 204:0 Unexpected "("
Line 207:57 Comments in CSS use "/* ... */" instead of "//"
Line 208:59 Comments in CSS use "/* ... */" instead of "//"
Line 213:4 Comments in CSS use "/* ... */" instead of "//"
Line 219:24 Comments in CSS use "/* ... */" instead of "//"
Line 221:4 Comments in CSS use "/* ... */" instead of "//"
Line 224:4 Comments in CSS use "/* ... */" instead of "//"
Line 230:40 Comments in CSS use "/* ... */" instead of "//"
Line 243:41 Comments in CSS use "/* ... */" instead of "//"

**/
/* Product Page Custom
   NOTE: every rule that targets a standard theme element is now scoped to
   `.product-has-video` (added by custom.js only when a product actually has a
   video). This keeps the cinematic layout on video products and leaves all
   normal products with their standard 9.6.0 gallery. */

.product-has-video .is-product-main.content,
.product-has-video .is-product-sidebar.content {
  padding-top: 0;
}

.product-has-video .product__images .gallery-wrap,
.product-has-video .product__details--product-page + .sixteen.columns.rte {
  display: none;
}

.product-has-video .section-wrapper--product {
  display: block;
  max-width: none;
  width: 100%;
  overflow: hidden;
}

.product-has-video .section-wrapper--product .shopify-section {
  max-width: 1200px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.custom-full-width {
  margin: 0;
  max-width: 100%;
  width: 100%;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.product-has-video .product__details--product-page {
  width: 50%;
  position: absolute;
  top: 7.5vh;
  background: #fff;
  padding: 0 2.5em;
  right: -10vw;
  max-height: 86vh;
  max-width: 550px;
  margin-top: 0;
  margin-bottom: 0;
  overflow-y: auto;
}

.product-has-video .product__details--product-page .product_name + .feature_divider {
  display: none;
}

.product-has-video .product__details--product-page .product-block--price {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #aaaaaa;
}

.custom-full-height,
#custom-background-height {
  height: none;
  padding-bottom: 15px;
  max-height: 100vh;
}

.custom-product-container {
  flex-direction: column;
}


.custom-description {
  padding: 0 2em 0 2em;
  margin-bottom: 20px;
}

@media screen and (max-width: 1536px) {
  .product-has-video .product__details--product-page {
    right: -7vw;
  }
}

@media screen and (max-width: 1440px) {
  .product-has-video .product__details--product-page {
    right: 0;
  }
}

@media screen and (max-width: 1024px) {
  .product-has-video .product__details--product-page {
    width: 70%;
    top: 1.25vh;
  }
}

@media screen and (max-width: 768px) {
  .product-has-video .section-wrapper--product {
    width: 100%;
  }

  .product-has-video .product__details--product-page {
    width: 100%;
    position: initial;
    padding: 0 1em;
    overflow-y: visible;
    max-height: none;
  }

  .product-has-video .section-wrapper--product .shopify-section {
    width: 100%;
  }

  .custom-full-width {
    left: 0;
    margin-left: 0;
    margin-right: 0;
  }


  .custom-full-height {
    padding-bottom: 0;
  }
}


@media only screen and (min-width: 480px) {
  .custom-description {
    margin: auto;
    min-height: 200px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 798px) {
  .custom-description {
      max-width: 80em;
      padding-inline: 2em;
      margin-inline: 10px;
  }
}

@media only screen and (min-width: 798px) {
  .custom-description {

    width: 100%;
    max-width: 80em;
  }
}


/* Custom - Video background */
.video-background video {
  z-index: 0;
  background-size: 100% 100%;
  top: 0px;
  left: 0px; /* fixed to left. Replace it by right if you want.*/
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 798px) {
  .video-background video {
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .custom-full-width.image__container>img {
    max-width: 100vw;
    height: auto;
  }
}
/* ============================================================
   STOCK FRAGRANCE — Product video background
   Restores the "video plays in place of the image" feature.
   Reads the video URL stored in the primary product image's
   alt text (format:  "image description; https://.../file.mp4")
   and plays it full-width, with the product details floating
   over it. Products WITHOUT a video URL are left untouched.
   Paste this at the very END of assets/custom.js
   ============================================================ */
(function () {
  function initProductVideo() {
    var imgCol = document.querySelector('.product__images');
    if (!imgCol) return;                                 // not a product page
    if (imgCol.querySelector('.sf-product-video')) return; // already injected

    var primary = imgCol.querySelector('img');
    if (!primary) return;

    // Pull the video URL out of the alt text (a .mp4 or /videos/ link)
    var alt = primary.getAttribute('alt') || '';
    var url = alt.split(';')
      .map(function (s) { return s.trim(); })
      .find(function (p) { return /^https?:\/\/.*(\/videos\/|\.mp4)/i.test(p); });

    if (!url) return;   // no video on this product -> leave the normal gallery alone

    // Flag the page so the video layout CSS turns on
    document.body.classList.add('product-has-video');

    // Build and insert the full-width video
    var wrap = document.createElement('div');
    wrap.className = 'custom-full-width video-background sf-product-video';

    var video = document.createElement('video');
    video.autoplay = true;
    video.muted = true;                 // required for autoplay
    video.loop = true;
    video.setAttribute('playsinline', '');
    video.setAttribute('preload', 'auto');

    var source = document.createElement('source');
    source.src = url;
    source.type = 'video/mp4';

    video.appendChild(source);
    wrap.appendChild(video);
    imgCol.appendChild(wrap);

    video.play().catch(function () {});  // some browsers need an explicit play()
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initProductVideo);
  } else {
    initProductVideo();
  }
})();