/** Shopify CDN: Minification failed

Line 135:16 Unexpected "{"
Line 135:25 Expected ":"
Line 139:16 Unexpected "{"
Line 139:25 Expected ":"

**/
@media screen and (max-width:767px) {
   .product__info-container {
    display: flex;
    flex-direction: column;
  }

  /* Review stars sit ABOVE the product title. The breadcrumb needs pinning
     too, otherwise the stars would also jump above it. Everything else
     keeps the order it already had, so the column reads breadcrumb,
     stars, title, scent notes, price. The same order is applied to
     desktop in the min-width block at the end of this file. */
   .product__info-container .custom-breadcrumbs {
    order: -4;
   }

   .product__info-container .shopify-app-block:has(.jdgm-widget) {
    order: -3;
    margin:10px 0;
   }

     .product__info-container .product__text-wrapper:has(>div.product__text.caption-with-letter-spacing:first-child) {
    order:-2;
    margin-top:12px;
   }

      .product__info-container .product__title {
    order: 0;
    /* 12px -> 10px. With the inventory-status margins fixed above, this
       bottom margin is the whole gap between the title and the scent
       notes: the notes wrapper sets its own margin-top to 0 and flex does
       not collapse margins. Measured 51px before, 10px now. 10 matches the
       notes wrapper's own bottom margin, so the rhythm stays even. */
            margin: 0 0 10px 0;
  }

  .product__info-container .product__text-wrapper:has(>div.product__text:first-child)  {
    order: 1;
    margin: 0 0 10px 0;
  }

  .product__info-container [id^="price-template"],
  .product__info-container .product__tax,
  .product__info-container div:has(form),
  .product__info-container #shopify-block-ATE1VNzJVYlRpKzZTb__4647bad5-8870-4ca6-88df-57cb80bd9f3c {
    order: 2;
    margin:6px 0;
  }

  /* soi-ship is the free shipping progress bar. It had no order, so it fell
     to the end of the default order:0 group and landed between the rating
     and the Notes Of line, pushing the notes away from the product title.
     Order 3 puts it after the price and before the quantity selector, which
     is also where a cart-threshold nudge is most use. */
  .product__info-container .soi-ship {
    order: 3;
    margin: 6px 0 10px;
  }

   /* These named two template ids by hand and had gone stale: neither
      matched anything on the current templates, so the inventory block kept
      its 1.5rem top and bottom margins. It is invisible once JS hides it,
      but in a flex column those margins still take up space, and it sits
      between the title and the scent notes, so it was adding 39px of dead
      gap right where the spacing mattered. Matching on the id prefix keeps
      working when the template id changes. */
   .product__info-container [id^="product__inventory_status"] {
    margin:0 ;
   }

   /* .product__info-container .product__text-wrapper:has(>div.product__text:first-child),
   .product__info-container .product__text-wrapper:has(>div.product__text.caption-with-letter-spacing:first-child)  {
    order: 3;
    margin-top:12px;
  } */

   .product__info-container .product-form__quantity {
    order:4;
   }

      .product__info-container #shopify-block-AVjlXNEVwaHdNZDE2d__subscriptions_app_block_VNzdaf {
    order:5;
    margin:0;
   }

    .product__info-container div:has(.product-form) {
      order:6;
   }

    .product__info-container .product-form {
      margin:1.2rem 0 !important;
    }

  .product__info-container p[data-handle] {
    order: 7;
  }

  .product__info-container .product__text-wrapper:has(>svg.icon-accordion:first-child) {
    order:11;
  }

  .product__info-container .product__accordion {
    order:14;
  }

  .product__info-container share-button {
    order:15;
  }

  .slider-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
  .slider-dot{
  width:8px;height:8px;border-radius:999px;
  border:1px solid #000000;
  background:transparent;
  opacity:.4;
  padding:0;
}
  .slider-dot.is-active{
  opacity:1;
  background:#000000;
}

#GalleryViewer-{{ section.id }} .slider-buttons {
  height:44px;
}

#GalleryViewer-{{ section.id }} .slider-buttons .slider-button{
  display:none;
}

.sticky-addtocart-wrapper .sticky-addtocart-button-wrapper {
  flex-shrink:0;
}
}

/* Desktop gets the same review-stars-above-title order as mobile.

   `order` only does anything inside a flex container, and this column is
   normal block flow above 767px, so it has to become a flex column here.
   The catch: section-main-product.css puts `margin: 1.5rem 0` on every
   child via `> * + *`. Block flow collapses those adjacent margins to a
   single 1.5rem; flex does not, so they stack to 3rem and the column grew
   by 294px in testing. Clearing the top margin restores the original
   rhythm, each gap then being set by the preceding element's bottom margin
   alone. Measured against the block-flow baseline the first four gaps come
   out identical (30, 20, 20, 19px) and total height differs by 14px.

   !important is required: the theme's rule has the same specificity and
   its stylesheet loads later in the document, so it wins otherwise.

   Scoped to min-width so it cannot touch mobile, which already flexes this
   container in the max-width block above. */
@media screen and (min-width: 768px) {
  .product__info-container {
    display: flex;
    flex-direction: column;
  }

  .product__info-container > * + * {
    margin-top: 0 !important;
  }

  .product__info-container .custom-breadcrumbs {
    order: -4;
  }

  .product__info-container .shopify-app-block:has(.jdgm-widget) {
    order: -3;
  }
}

/* Hide the Shopify Subscriptions app embed, all widths, all products.

   It renders as a direct child of <body>, outside the theme layout, so it
   lands unstyled below the footer on every product page on desktop as well
   as mobile. Subscriptions are handled in the cart now, so none of it needs
   to show.

   display:none, not visibility or opacity, so it leaves no gap behind. The
   wrapper is hidden as well as the container, since the wrapper carries its
   own height.

   Targeted on the app's own class rather than the block id: those ids are
   generated per install, and the one referenced further up this file has
   already gone stale once.

   NOTE: this only hides it. The app still loads its script on every page.
   The permanent fix is switching the Subscriptions app embed off in the
   theme editor, which stops it loading at all. */
[id^="shopify-block-"]:has(.shopify_subscriptions_app_block_container),
.shopify_subscriptions_app_block_container {
  display: none !important;
}