/** Shopify CDN: Minification failed

Line 604:0 Unexpected "}"

**/
/* Orien product-page composition. Static selectors keep this asset cacheable. */
/* Description text spacing */
product-info .product__info-container .product__description {
  font-size: 1.5rem;
  color: rgba(var(--color-foreground), 0.65);
  margin-bottom: 2.4rem;
  line-height: 1.6;
}

/* ── Full-width editorial product header (gen2 reference) ── */
.product-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.12);
  padding-bottom: 2.4rem;
  margin-bottom: 4.8rem;
}

/* Left: vendor tag + title */
.product-page-header__left {
  flex: 1;
  min-width: 0;
}

.product-page-header__vendor {
  font-size: 1.1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(var(--color-foreground), 0.55);
  font-weight: 600;
  display: block;
  margin-bottom: 0.8rem !important;
}

.product-page-header__title h1 {
  font-size: 4.6rem;
  font-weight: 700;
  letter-spacing: -0.15rem;
  line-height: 1.1;
  margin: 0;
}

/* Right: price block */
.product-page-header__right {
  text-align: end;
  flex-shrink: 0;
}

.product-page-header__right .price__container {
  justify-content: flex-end;
}

.product-page-header__right .price-item--regular,
.product-page-header__right .price-item--sale {
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
}

.product-page-header__right .product__tax {
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.55);
  margin-top: 0.2rem;
}

/* Remove the old standalone divider since border is now on the header */
.product-page-header__divider {
  display: none;
}
 /* ── Main image size 530x530 ── */
product-info media-gallery .product__media-item,
product-info media-gallery .product__media-item .media,
product-info media-gallery .product__media-item img {
  width: 530px !important;
  height: 530px !important;
  max-height: 530px !important;
  max-width: 530px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}
product-info media-gallery .product__media-item {
  padding: 0 !important;
}
product-info [id^='GalleryViewer-'] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Desktop columns: proportional (not a fixed 530px) so the image shrinks
   with the container and the info column keeps enough room. */
@media screen and (min-width: 990px) {
  .product:not(.product--no-media) .product__media-wrapper {
    max-width: 44% !important;
    width: 44% !important;
    transform: none !important;
  }
  .product:not(.product--no-media) .product__info-wrapper {
    max-width: 56% !important;
    width: 56% !important;
    padding-inline-start: 7rem !important;
  }
  /* Make the image fill its (now proportional) wrapper instead of the
     hard-coded 530x530px set globally above. */
  product-info media-gallery .product__media-item,
  product-info media-gallery .product__media-item .media,
  product-info media-gallery .product__media-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
}

/* ── Horizontal thumbnail slider (3 items at once) ── */
product-info [id^='GalleryThumbnails-'] .thumbnail-list__item.slider__slide {
  width: 90px !important;
  max-width: 90px !important;
  height: 90px !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Neutralize Dawn's square aspect-ratio spacer: the thumbnail button is
   positioned in normal flow here, so the ::before pushes it out of place. */
product-info [id^='GalleryThumbnails-'] .thumbnail-list__item.slider__slide::before {
  content: none !important;
}
product-info [id^='GalleryThumbnails-'] .thumbnail {
  height: 90px !important;
  width: 90px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  position: relative !important;
  display: block !important;
  border: 1px solid rgba(var(--color-foreground), 0.1) !important;
  background: transparent !important;
}
/* Selected thumbnail gets a solid black border */
product-info [id^='GalleryThumbnails-'] .thumbnail.is-selected,
product-info [id^='GalleryThumbnails-'] .thumbnail[aria-current] {
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
product-info [id^='GalleryThumbnails-'] .thumbnail img {
  position: static !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}
product-info [id^='GalleryThumbnails-'] .thumbnail-list {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 1.2rem !important;
  padding: 0 !important;
  margin: 0 !important;
}
product-info [id^='GalleryThumbnails-'] {
  margin-top: 1.6rem !important; /* Clean close gap below main image */
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}
/* Hide slider navigation arrows for thumbnails */
product-info [id^='GalleryThumbnails-'] .slider-button {
  display: none !important;
}
/* Prevent Dawn JS from hiding non-first duplicate nodes */
product-info [id^='GalleryThumbnails-'] .thumbnail-list__item.slider__slide {
  display: block !important;
}

/* 990–1041px: the media column (44%) is too narrow for 90px thumbnails, so
   one wraps to a second row. Shrink them and keep them on a single line. */
@media screen and (min-width: 990px) and (max-width: 1041px) {
  product-info [id^='GalleryThumbnails-'] .thumbnail-list__item.slider__slide {
    width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
  }
  product-info [id^='GalleryThumbnails-'] .thumbnail {
    width: 70px !important;
    height: 70px !important;
  }
  product-info [id^='GalleryThumbnails-'] .thumbnail-list {
    gap: 0.6rem !important;
    flex-wrap: nowrap !important;
  }
}

/* ── Reduce Accordion Spacing ── */
product-info .product__info-container .product__accordion {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
product-info .product__info-container .product__accordion details {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08) !important;
}
product-info .product__info-container .product__accordion summary {
  padding: 1.2rem 0 !important;
}
/* More breathing room between the leading icon and the accordion label */
product-info .product__info-container .product__accordion .summary__title .svg-wrapper {
  margin-inline-end: 1.6rem !important;
  flex-shrink: 0 !important;
}
/* Keep the icon a fixed square so it doesn't collapse in the flex row */
product-info .product__info-container .product__accordion .summary__title .svg-wrapper svg,
product-info .product__info-container .product__accordion .summary__title .icon-accordion {
  width: 2rem !important;
  height: 2rem !important;
  flex-shrink: 0 !important;
}

/* ── Variant picker: heading + inline wrapping pills + qty readout ── */
product-info .product__info-container .variant-picker__title {
  margin: 0 0 1rem !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
product-info .product__info-container .variant-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
/* Flatten each option fieldset into the inline flex row */
product-info .product__info-container variant-selects fieldset.product-form__input--pill {
  display: contents;
}
product-info .product__info-container variant-selects fieldset.product-form__input--pill legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
product-info .product__info-container variant-selects fieldset.product-form__input--pill input[type='radio'] + label {
  flex: 0 0 auto;
  margin: 0 !important;
  min-width: 0;
  background-color: rgb(var(--color-background)) !important;
  color: rgb(var(--color-foreground)) !important;
  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity)) !important;
}
product-info .product__info-container variant-selects fieldset.product-form__input--pill input[type='radio']:checked + label {
  background-color: rgb(var(--color-foreground)) !important;
  color: rgb(var(--color-background)) !important;
  border-color: rgb(var(--color-foreground)) !important;
}
product-info .product__info-container .variant-picker__qty {
  margin: 0 0 1.2rem !important;
  font-size: 1.3rem !important;
  color: rgba(var(--color-foreground), 0.7) !important;
}

/* ── Quantity + Add to cart on one row, Buy it now full-width below ── */
product-info .product__info-container .qty-buy-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.2rem;
}
/* Flatten the buy-buttons wrappers so the buttons become row items */
product-info .product__info-container .qty-buy-layout .buy-buttons,
product-info .product__info-container .qty-buy-layout .product-form,
product-info .product__info-container .qty-buy-layout .product-form .form,
product-info .product__info-container .qty-buy-layout .product-form__buttons {
  display: contents;
}
product-info .product__info-container .qty-buy-layout .product-form__quantity {
  flex: 0 0 auto;
  margin: 0 !important;
}
/* Match the quantity control to the buttons: same pill radius, pure white bg.
   The visible border ring is the ::after pseudo-element, so round that too. */
product-info .product__info-container .product-form__quantity .quantity {
  border-radius: var(--buttons-radius) !important;
  background-color: #fff !important;
}
product-info .product__info-container .product-form__quantity .quantity::after {
  border-radius: var(--buttons-radius) !important;
  z-index: 3 !important;
}
/* Keep the border ring visible above the buttons/input on focus */
product-info .product__info-container .product-form__quantity .quantity__button,
product-info .product__info-container .product-form__quantity .quantity__input {
  z-index: 1 !important;
}
product-info .product__info-container .product-form__quantity .quantity__button:focus,
product-info .product__info-container .product-form__quantity .quantity__button:focus-visible,
product-info .product__info-container .product-form__quantity .quantity__input:focus,
product-info .product__info-container .product-form__quantity .quantity__input:focus-visible {
  z-index: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Keep the input constrained inside the rounded container */
product-info .product__info-container .product-form__quantity .quantity__input {
  width: 4rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
product-info .product__info-container .qty-buy-layout .product-form__submit {
  flex: 1 1 12rem;
  width: auto !important;
  margin: 0 !important;
}
/* These stay on their own full-width row below the quantity/ATC row */
product-info .product__info-container .qty-buy-layout .shopify-payment-button,
product-info .product__info-container .qty-buy-layout .product-form__error-message-wrapper,
product-info .product__info-container .qty-buy-layout .product__pickup-availabilities {
  flex: 1 1 100%;
}
product-info .product__info-container .product__accordion .accordion__content {
  padding: 0 0 1.2rem 0 !important;
  opacity: 0;
  transform: translateY(-0.8rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
product-info .product__info-container .product__accordion details[open] .accordion__content {
  opacity: 1;
  transform: translateY(0);
}

/* Align this section's container with the rest of the page (matches
   related-products / "You may also like") instead of a narrower 70%. */
@media screen and (min-width: 990px) {
  product-info .page-width {
    max-width: var(--page-width) !important;
    width: auto !important;
    margin-inline: auto !important;
  }
}

/* Tablet (749–989px): original layout — header on top, image left, details right */
@media screen and (min-width: 749px) and (max-width: 989.98px) {
  product-info media-gallery .product__media-item,
  product-info media-gallery .product__media-item .media {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
  }
  product-info media-gallery .product__media-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* Smaller main image (left) + wider gap between image and details (right) */
  product-info .product.grid {
    column-gap: 4rem !important;
  }
  product-info .product.grid > .product__media-wrapper.grid__item {
    width: 40% !important;
    max-width: 40% !important;
    flex: 0 0 40% !important;
  }
  product-info .product.grid > .product__info-wrapper.grid__item {
    width: calc(60% - 4rem) !important;
    max-width: calc(60% - 4rem) !important;
    flex: 0 0 calc(60% - 4rem) !important;
  }
  /* Cancel Dawn's default 5rem info-wrapper left padding (applied ≥750px),
     which otherwise stacks on top of the column-gap and widens the gap. */
  product-info .product__info-wrapper,
  product-info .product__info-wrapper--extra-padding,
  product-info .product--right .product__info-wrapper {
    padding-inline: 0 !important;
  }

  /* Remove the arrow / counter slider controls under the main image */
  product-info media-gallery .slider-buttons {
    display: none !important;
  }

  /* Remove the gap between the main image and the thumbnail strip */
  product-info media-gallery .product__media-list {
    margin-bottom: 0 !important;
  }
  product-info media-gallery product-info [id^='GalleryThumbnails-'] {
    margin-top: 0.4rem !important;
    display: block !important;
  }

  /* Shrink thumbnails to 75px in the tablet range. The global block above
     sizes them at 90px via the .thumbnail button (in normal flow, ::before
     spacer removed), so we must override the button, item and gap here
     using the same #GalleryThumbnails selector to win in this range. */
  product-info [id^='GalleryThumbnails-'] .thumbnail-list__item.slider__slide {
    width: 75px !important;
    max-width: 75px !important;
    height: 75px !important;
  }
  product-info [id^='GalleryThumbnails-'] .thumbnail {
    width: 75px !important;
    height: 75px !important;
  }
  product-info [id^='GalleryThumbnails-'] .thumbnail-list {
    gap: 0.9rem !important;
  }
}


  /* Revert 530px constraints on mobile and make main image fit naturally */
  product-info media-gallery .product__media-item {

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Neutralize the padding-top aspect-ratio height trick on the container */
  product-info media-gallery .product-media-container .media,
  product-info media-gallery .product__media-item .media {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* The image is normally position:absolute inside the padding-top box.
     Make it flow naturally now that the padding-top trick is disabled. */
  product-info media-gallery .product-media-container .media img,
  product-info media-gallery .product__media-item img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 12px !important;
    display: block !important;
  }

  /* Also fix the outer containers that may still enforce height */
  product-info media-gallery .product-media-container {
    height: auto !important;
    max-width: 100% !important;
    position: static !important;
  }

  product-info media-gallery .product__modal-opener {
    height: auto !important;
    position: static !important;
    display: block !important;
  }

  /* Disable cropping wrapper and zoom magnifier on mobile */
  product-info media-gallery .product__media {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }
  product-info media-gallery .product__media-icon {
    display: none !important;
  }

  /* Disable slider arrows and swiping on mobile */
  product-info .slider-buttons {
    display: none !important;
  }
  product-info media-gallery .product__media-list {
    overflow: hidden !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
  }

  
  /* Enable custom element ordering on mobile using display: contents */
  product-info .page-width {
    display: flex !important;
    flex-direction: column !important;
  }
  
  product-info .product-page-header {
    display: contents !important;
  }
  
  product-info .product {
    display: contents !important;
  }
  
  product-info .product-page-header__divider {
    display: none !important;
  }
  
  /* Order 2: Image (95% width, centered) */
  product-info .product__media-wrapper,
  product-info .product__media-wrapper.grid__item {
    order: 2 !important;
    width: 95% !important;
    max-width: 95% !important;
    flex: 0 0 95% !important;
    margin-inline: auto !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }
  
  product-info media-gallery,
  product-info media-gallery slider-component,
  product-info media-gallery .product__media-list,
  product-info media-gallery .product-media-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  
  /* Order 3: Price */
  product-info .product-page-header__right {
    order: 3 !important;
    text-align: start !important;
    margin-bottom: 0 !important;
    padding: 0 1.5rem !important;
  }
  
  product-info .product-page-header__right .price__container {
    justify-content: flex-start !important;
  }
  
  product-info .product-page-header__right .price-item--regular,
  product-info .product-page-header__right .price-item--sale {
    font-size: 2.2rem !important;
  }

  .mobile-price-divider {
    border: none !important;
    border-top: 1px solid rgba(var(--color-foreground), 0.12) !important;
    margin: 1.5rem 1.5rem 0rem 1.5rem !important;
    order: 3 !important;
    display: block !important;
  }
  
  /* Order 1: Caption (Vendor + Title) */
  product-info .product-page-header__left {
    order: 1 !important;
    text-align: start !important;
    margin-bottom: 0.6rem !important;
    padding: 0 1.5rem !important;
  }
  
  product-info .product-page-header__vendor {
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
  }
  
  product-info .product-page-header__title h1 {
    font-size: 3rem !important;
    letter-spacing: -0.1rem !important;
  }
  
  /* Order 4: Rest of variant selectors & product form */
  product-info .product__info-wrapper,
  product-info .product__info-wrapper.grid__item {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1.5rem !important;
    margin-top: 0 !important;
  }
  
  product-info .product__info-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Adjust mobile thumbnail sizes to 60px */
  product-info [id^='GalleryThumbnails-'] .thumbnail-list__item.slider__slide {
    width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
  }
  product-info [id^='GalleryThumbnails-'] .thumbnail {
    height: 60px !important;
    width: 60px !important;
  }
}

/* ── Zoom modal: show only the clicked image, fitted to the viewport ──
   Dawn's default desktop modal stacks every media item at width:100%
   (huge, cropped via the padding-top aspect box, scrollable). For the
   casual PDP we want a true zoom: only the .active image (set by
   product-modal.js from the clicked magnifier's data-media-id), shown
   whole with its natural ratio, contained within the viewport, on a
   transparent backdrop, with prev/next arrows when there's >1 media. */
/* Frosted backdrop: a light tint + blur so the page shows through softly
   while the zoomed image stays readable. The dialog/content stay
   transparent so the effect comes from the modal element only. */
product-info [id^='ProductModal-'] {
  background: rgb(var(--color-foreground) / 0.2) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
product-info [id^='ProductModal-'] .product-media-modal__dialog,
product-info [id^='ProductModal-'] .product-media-modal__content {
  background: transparent !important;
  background-image: none !important;
}
product-info [id^='ProductModal-'] .product-media-modal__dialog {
  position: relative;
}
/* Centered column layout for the active media; arrows sit at the screen
   edges via absolute positioning on the dialog (see below). */
product-info [id^='ProductModal-'] .product-media-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 0;
}
product-info [id^='ProductModal-'] .product-media-modal__content > *:not(.active) {
  display: none !important;
}
/* Image sized 20% smaller than the viewport-fit version (80% of the
   former max-width / max-height), with the same rounded corners used
   on the gallery imagery. */
product-info [id^='ProductModal-'] .product-media-modal__content > .active {
  width: auto;
  max-width: 80%;
  max-height: calc(80vh - 3.2rem);
  margin: auto;
  border-radius: 12px;
}
/* Drop Dawn's padding-top aspect-ratio spacer so the image can size to
   its natural ratio and fit the viewport instead of being cropped. */
product-info [id^='ProductModal-'] .product-media-modal__content .media {
  padding-top: 0 !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  max-width: 80%;
  max-height: calc(80vh - 3.2rem);
  background: none !important;
}
product-info [id^='ProductModal-'] .product-media-modal__content .media img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(80vh - 3.2rem) !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  display: block !important;
}
/* Prev/next arrows pinned to the left/right edges of the dialog. */
product-info [id^='ProductModal-'] .product-media-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid rgba(var(--color-foreground), 0.12);
  border-radius: 50%;
  background: rgb(var(--color-background) / 0.92);
  color: rgb(var(--color-foreground));
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease;
}
product-info [id^='ProductModal-'] .product-media-modal__arrow:hover {
  transform: translateY(-50%) scale(1.06);
}
product-info [id^='ProductModal-'] .product-media-modal__arrow .svg-wrapper {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
}
product-info [id^='ProductModal-'] .product-media-modal__arrow--prev {
  inset-inline-start: 2rem;
}
product-info [id^='ProductModal-'] .product-media-modal__arrow--next {
  inset-inline-end: 2rem;
}
product-info [id^='ProductModal-'] .product-media-modal__arrow--prev .svg-wrapper {
  transform: rotate(90deg);
}
product-info [id^='ProductModal-'] .product-media-modal__arrow--next .svg-wrapper {
  transform: rotate(-90deg);
}