/** Shopify CDN: Minification failed

Line 459:0 Expected "}" to go with "{"

**/
/* =========================================================
   Dawn product gallery: thumbnails LEFT of main image (desktop)
   Works when "Layout" is set to "Thumbnails"
   Dawn 15.x markup uses:
   - media-gallery > slider-component.slider-mobile-gutter (main viewer)
   - media-gallery > slider-component.thumbnail-slider (thumbnails)
   ========================================================= */

@media screen and (min-width: 750px) {
  /* Tweak this value to increase/decrease space between thumbnails and main image */
  .product.product--thumbnail .product__media-wrapper {
    --thumb-main-gap: 0.6rem; /* try 1.8rem / 2.2rem / 3rem */
    --thumb-col-width: 68px; /* thumbnail column width */
  }

  /* GRID CONTAINER */
  .product.product--thumbnail .product__media-wrapper media-gallery {
    display: grid !important;
    grid-template-columns: var(--thumb-col-width) minmax(0, 1fr) !important;
    column-gap: var(--thumb-main-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100%;
  }

  /* Status should not break the grid */
  .product.product--thumbnail .product__media-wrapper media-gallery > .visually-hidden {
    grid-column: 1 / -1;
  }

  /* MAIN VIEWER (GalleryViewer) — keep it in column 2 and in normal flow */
  .product.product--thumbnail .product__media-wrapper media-gallery > slider-component.slider-mobile-gutter {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    /* Hard reset anything that can cause overlap/misalignment */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
  }

  /* THUMBNAILS (GalleryThumbnails) — force it to be a true grid item */
  .product.product--thumbnail .product__media-wrapper media-gallery > slider-component.thumbnail-slider {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: var(--thumb-col-width) !important;
    min-width: var(--thumb-col-width) !important;

    /* CRITICAL: keep in flow (Dawn base CSS can position this in ways that overlap) */
    position: relative !important; /* you can also set static; relative is safest */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: min(
      520px,
      calc(100vh - var(--sticky-stack-height, var(--header-height, 72px)) - 120px)
    ) !important;

    /* Ensure it doesn't layer over the viewer */
    z-index: 0 !important;
  }

  /* Extra hard reset: if any child applies transforms/positioning, neutralize */
  .product.product--thumbnail .product__media-wrapper media-gallery > slider-component.thumbnail-slider,
  .product.product--thumbnail .product__media-wrapper media-gallery > slider-component.thumbnail-slider * {
    transform: none !important;
  }

  /* Thumbnail list layout */
  .product.product--thumbnail .product__media-wrapper .thumbnail-list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .product.product--thumbnail .product__media-wrapper .thumbnail-list__item {
    width: 100%;
  }

  .product.product--thumbnail .product__media-wrapper .thumbnail {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0.6rem;
  }

  .product.product--thumbnail .product__media-wrapper .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* =========================================================
   PDP thumbnails-left: tighten thumbnail rail + spacing (desktop)
   ========================================================= */
@media screen and (min-width: 750px) {
  /* Make thumbnails smaller */
  .product--thumbnail .thumbnail {
    max-width: 68px;
  }

  /* Tighten spacing between thumbnail items */
  .product--thumbnail .thumbnail-list {
    gap: 0.6rem;
  }

  /* Remove extra left/right padding inside the thumbnail slider if present */
  .product--thumbnail .thumbnail-slider {
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* =========================================================
   Product title: allow wrapping (no forced ellipsis)
   ========================================================= */
.product__title .product__title-text {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;

  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  max-height: none !important;
}


/* =========================================================
   Mobile product zoom: keep Dawn modal, but make it a small dialog
   (prevents fullscreen takeover)
   ========================================================= */
@media screen and (max-width: 749px) {
  /* The overlay: still dims the page */
  product-media-modal {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: calc(var(--sticky-stack-height, var(--header-height, 72px)) + 12px) 12px 12px !important;
    box-sizing: border-box;
  }

  /* The dialog/container */
  product-media-modal .product-media-modal__content {
    width: min(520px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - var(--sticky-stack-height, var(--header-height, 72px)) - 24px) !important;

    margin: 0 auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;

    background: rgb(var(--color-background)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25) !important;

    /* stop it from behaving like a full screen sheet */
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* Make the media area scroll inside if needed */
  product-media-modal .product-media-modal__content .product-media-modal__dialog {
    max-height: inherit !important;
    overflow: auto !important;
  }

  /* Close button stays visible */
  product-media-modal .product-media-modal__toggle {
    top: 10px !important;
    right: 10px !important;
    z-index: 2;
  }
}


/* ============================
   FIX: Dawn 15.x main product media not visible
   Keeps the active slide visible even if animations/custom CSS break it
   ============================ */
.product__media-wrapper .product__media-item.is-active,
.product__media-wrapper .product__media-item[aria-current="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* If reveal-on-scroll is enabled, Dawn can start slides at opacity:0. */
.product__media-wrapper .scroll-trigger {
  opacity: 1 !important;
  transform: none !important;
}

/* Prevent zero-height viewer issues caused by custom overrides */
.product__media-wrapper .product__media-list {
  min-height: 1px;
}

/* Ensure images can actually paint inside the media wrapper */
.product__media-wrapper .media,
.product__media-wrapper .media img {
  display: block;
}


/* =========================================================
   Make the main media area use the available width cleanly (desktop)
   ========================================================= */
@media screen and (min-width: 990px) {
  .product__media-wrapper {
    max-width: none !important;
  }

  .product__media-wrapper .product__media-list {
    width: 100% !important;
  }

  /* If your images look "boxed", reduce frame padding */
  .product__media-wrapper .product__media-item {
    padding: 0 !important;
  }
}

/* =========================================================
   Product price styling (Dawn) — sitewide
   - Sale (current) price: LEFT + bold
   - Compare-at price: RIGHT + lighter + struck-through
   ========================================================= */

/* On-sale layout: show sale first, compare-at second */
.price.price--on-sale .price__sale {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;          /* space between sale and compare-at */
  flex-wrap: wrap;
  flex-direction: row-reverse; /* ✅ reverses DOM order: sale appears left */
}

/* Sale (current) price — bold (and optional color) */
.price .price-item--sale.price-item--last {
  font-weight: 800 !important;
  color: #8d2a2b;
  /* optional: keep your brand color */
}

/* Compare-at (old) price — lighter + struck-through (now on the right) */
.price.price--on-sale .price__sale s.price-item--regular,
.price.price--on-sale .price__sale s.price-item--regular.variant-item__old-price {
  font-weight: 400 !important;
  opacity: 0.65;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}

/* Not on sale: regular price should be bold */
.price:not(.price--on-sale) .price__regular .price-item--regular {
  font-weight: 800 !important;
}

/* Safety: if any other old-price class appears, keep it light + struck-through */
.price s.variant-item__old-price {
  font-weight: 400 !important;
  opacity: 0.65;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
}

/* =========================================================
   Mobile: make Dawn product-modal (product-media modal) a centered popup
   IMPORTANT: element is <product-modal class="product-media-modal ...">
   ========================================================= */
@media screen and (max-width: 749px) {
  /* The modal root (NOT product-media-modal) */
  product-modal.product-media-modal {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: calc(var(--sticky-stack-height, var(--header-height, 72px)) + 12px) 12px 12px !important;
    box-sizing: border-box;
  }

  /* The dialog wrapper */
  product-modal.product-media-modal .product-media-modal__dialog {
    width: min(560px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - var(--sticky-stack-height, var(--header-height, 72px)) - 48px) !important;

    border-radius: 14px !important;
    overflow: hidden !important;

    background: rgb(var(--color-background)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25) !important;
  }

  /* The content area becomes scrollable inside the popup */
  product-modal.product-media-modal .product-media-modal__content {
    max-height: inherit !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Close button stays visible */
  product-modal.product-media-modal .product-media-modal__toggle {
    top: 125px !important;
    right: 25px !important;
    z-index: 10 !important;
  }

  /* Zoom container (we'll inject via JS) */
  .pz-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;      /* keep pan inside popup */
    touch-action: none;    /* allow custom pinch/drag */
  }

  .pz-stage {
    transform-origin: 0 0;
    will-change: transform;
  }

  .pz-stage img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* gestures handled by viewport */
  }
}

/* =========================================================
   Keep announcement bar + header on top, even when modals open
   ========================================================= */
@media screen and (max-width: 749px) {
  /* Announcement bar */
  .announcement-bar,
  .announcement-bar-section {
    top: 0;
    z-index: 1000 !important;
  }


/* =========================================================
   Put product modal overlay BELOW announcement/header
   ========================================================= */
@media screen and (max-width: 749px) {
  /* The modal overlay container */
  product-modal.product-media-modal {
    z-index: 999 !important; /* must be LOWER than announcement/header */
  }

  /* If Dawn uses an additional overlay element */
  .media-modal {
    z-index: 999 !important;
  }
}

@media screen and (max-width: 749px) {
  .product__media-wrapper .media {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    min-height: 12vh !important;
    min-width: min(52vh, 92vw) !important;
    overflow: hidden;
    border-radius: 1.6rem;
  }

  .product__media-wrapper .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
}
/* =========================================================
   PDP (Mobile): STOP Dawn "peek" (main gallery only)
   This targets the MAIN viewer slider, not the thumbnails
   ========================================================= */
@media screen and (max-width: 749px) {

  /* Main viewer slider wrapper */
  .product__media-wrapper slider-component.slider-mobile-gutter {
    overflow: hidden !important;      /* clip anything outside the viewport */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Dawn mobile viewer list is typically a grid with "peek" behavior.
     Force each slide column to be full width so no neighbor can peek. */
  .product__media-wrapper slider-component.slider-mobile-gutter .product__media-list {
    grid-auto-columns: 100% !important;   /* ✅ key: remove peek */
    column-gap: 0 !important;             /* tighten spacing between slides */
    padding-left: 0 !important;
    padding-right: 90px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
  }

  /* Some Dawn builds apply peek via grid "gap" instead of column-gap */
  .product__media-wrapper slider-component.slider-mobile-gutter .product__media-list {
    gap: 120px !important;
  }
}

/* =========================================================
   FIX: Hide faint seam while keeping centered "peek" layout
   Make all underlying layers match the page background
   ========================================================= */

@media screen and (max-width: 749px) {
  /* 1) The main slider wrapper */
  .product__media-wrapper slider-component.slider-mobile-gutter {
    background: rgb(var(--color-background)) !important;
  }

  /* 2) The scrolling list that has your padding-right/gap */
  .product__media-wrapper slider-component.slider-mobile-gutter .product__media-list {
    background: rgb(var(--color-background)) !important;
  }

  /* 3) Each slide/item area */
  .product__media-wrapper .product__media-item {
    background: rgb(var(--color-background)) !important;
  }

  /* 4) The media frame itself */
  .product__media-wrapper .media {
    background: rgb(var(--color-background)) !important;
  }
}