/** Shopify CDN: Minification failed

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

**/
/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */

/* Structure */
html { --scrollPadding: var(--headerHeight, 0) }

.product-page {
  --stickTop: 0px;
  border-bottom: var(--globalBorder);
  position: relative;
  z-index: 5;
}
body.hpsticky .product-page { --stickTop: var(--headerHeight, 0px) }
body.overflow-hidden { overflow: hidden }

.unit-price { display: block; padding: 0 }


/* ==========================================================================
   MOBILE BAR
   ========================================================================== */

.bullet-mobile-meta {
  --rowGap: var(--margin);
  border-bottom: var(--globalBorder);
  padding: var(--padding);
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.product-page .bullet-product-content { padding-top: calc(var(--padding) / 2) }

.product-page details .dropdown-caret {
  outline: none;
  padding-inline: var(--padding);
  text-transform: uppercase;
  font-weight: var(--hWeight);
}

.product-page details[open] .text {
  border-top: var(--globalBorder);
  margin-top: var(--padding);
  padding: var(--padding) var(--padding) 0;
}

.product-page .bullet-product-content > product-content section:has(.dropdown-caret) { padding-inline: 0 }
.product-page .bullet-product-content > product-content section.description:has(.rte:empty) { display: none }

.product-page .s-row { padding-block: var(--margin) }

.product-page .bullet-product-content > product-content section {
  padding-inline: var(--padding);
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  padding-block: var(--margin);
}

.product-page .bullet-product-content > product-content :where(.noHas, .description:has(details), .popup, .accordion, .sharing, .paymenticons, .pickup-availability) {
  border-block: var(--globalBorder);
  padding-block: var(--padding) !important;
  margin-bottom: calc(-1 * var(--globalBorderWidth));
}

.product-page .bullet-product-content > product-content section:last-of-type { margin-bottom: calc(-1 * var(--globalBorderWidth)) }

.product-page .bullet-product-content .accordion { padding-inline: 0 }
.product-page .bullet-product-content .subtitle .h5 { text-transform: none; margin: 0; font-weight: 400 }
.product-page .bullet-product-content .sharing li { margin: 0 }
.product-page .bullet-product-content .sharing .mobshare { padding: 0 }

@media (min-width: 778px) {
  .product-page :where([pin-section="content"] product-content, [pin-section="media"] media-gallery) { position: sticky !important; top: var(--stickTop) }
  .product-page .bullet-product-content[order="1"] { border-right: var(--globalBorder) }
  .product-page .bullet-product-content[order="3"] { border-left: var(--globalBorder) }
}


/* ==========================================================================
   STICKY ADD TO CART BAR
   ========================================================================== */

.product-page #add2cart-cta {
  opacity: 0;
  transform: translateY(100vh);
  transition: transform 500ms cubic-bezier(0.83, 0, 0.17, 1);
  width: 100%;
  max-width: 40ch;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  padding: var(--margin);
  margin: 0 auto;
}

.product-page #add2cart-cta .mdash { display: flex }
.product-page #add2cart-cta .mdash::after { content: "\2014"; padding-inline-start: var(--margin) }
.product-page #add2cart-cta.active { opacity: 1; transform: none }
.product-page #add2cart-cta .button { border-radius: var(--radius); border: var(--globalBorder) }
.product-page #add2cart-cta :where(.on-sale .price__regular, .unit-price) { display: none }


/* ==========================================================================
   BUY BUTTON & CART
   ========================================================================== */

bullet-cart-drawer { display: none }
.cartButton { position: relative }
button.loading .cta { color: transparent }
.loading-overlay__spinner { position: absolute; inset: 0 }


/* ==========================================================================
   VARIANT PICKER
   ========================================================================== */

.product-page :where(variant-radios, variant-selects) { display: grid; gap: var(--padding); padding: var(--margin) 0 }
.product-page :where(legend, fieldset) { all: unset }
.product-page legend { margin-bottom: var(--margin) }
.product-page fieldset { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: var(--margin) }

.product-page variant-radios input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.product-page variant-radios input[type="radio"] + label {
  border: var(--globalBorder);
  color: currentColor;
  font-weight: 400;
  border-radius: var(--radius);
  padding: calc(var(--buttonPadding) / 1.4) var(--buttonPadding);
  margin: 0;
  letter-spacing: 0.1rem;
  line-height: 1;
  cursor: pointer;
  position: relative;
}

.product-page variant-radios input[type="radio"]:checked + label {
  background: var(--buyButtonBgColor);
  color: var(--buyButtonColor);
  border-color: var(--buyButtonBorderColor);
  font-weight: 700;
}

.product-page variant-radios input[type="radio"]:where(:disabled, .disabled) + label {
  filter: grayscale(100%);
  cursor: not-allowed;
  opacity: var(--soldOutFade, 0.3);
  text-decoration: line-through;
}

.product-form__submit[aria-disabled="true"] + .shopify-payment-button .shopify-payment-button__button[disabled],
.product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] {
  filter: grayscale(100%);
  cursor: not-allowed;
  opacity: 0.5;
}

.product-page .product-form__error-message { display: block; text-align: center; padding: var(--margin) }

.product-page .variant-picker modal-opener button { all: unset; cursor: pointer }

[shopify-payment-terms] { display: block; padding: var(--margin) var(--padding) }


/* ==========================================================================
   GIFT CARD
   ========================================================================== */

recipient-form { display: block; padding-block: var(--margin) }
.js #gift-cart-form { display: none; padding-block: var(--padding) }
.no-js .recipient-checkbox { display: none }
recipient-form label span { margin-left: 0; font-weight: 600 }


/* ==========================================================================
   PRODUCT POPUP / MODAL
   ========================================================================== */

.product-page section.popup { padding: 0 !important }
.product-page modal-opener :where(button, .button) { display: block; padding: var(--padding); margin: 0; text-align: start; font-weight: var(--hWeight) }

modal-dialog {
  position: fixed;
  inset: 0;
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  background: var(--globalTransparentBg);
  display: grid;
  place-items: center;
}

modal-dialog[open] { opacity: 1; visibility: visible; z-index: 99; padding: var(--padding) }

modal-dialog .contents {
  border: var(--globalBorder);
  border-radius: calc(var(--radius) / 3);
  background: var(--bgColor);
  color: var(--color);
  overflow: auto;
  overscroll-behavior: contain;
  height: clamp(300px, 95%, 90vh);
  width: clamp(35ch, 90vw, 200ch);
}

modal-dialog .contents > x-grid { gap: var(--globalBorderWidth) }
modal-dialog .contents > x-grid > x-cell { outline: var(--globalBorder); padding: var(--padding) }
modal-dialog .contents h3 { margin: 0 }
modal-dialog .contents .modclose { width: 100%; background: var(--bgColor); padding-block: var(--margin); border-bottom: var(--globalBorder) }
modal-dialog .contents button { border: 0; color: currentColor; width: fit-content }

/* Size chart */
modal-dialog.sizeChart .contents { height: clamp(60%, 90vh, 90%); width: clamp(40ch, 90vw, 80ch) }
modal-dialog.sizeChart .contents > .rte { padding: var(--padding) }

@media (max-width: 777px) { modal-dialog[open].sizeChart { max-height: 100vh } }


/* ==========================================================================
   PICKUP AVAILABILITY
   ========================================================================== */

pickup-availability { display: block }

pickup-availability-drawer {
  background: var(--bgColor);
  border-left: var(--globalBorder);
  width: 100%;
  max-width: 500px;
  height: 100%;
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 111;
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(0.83, 0, 0.17, 1);
}

pickup-availability-drawer[open] { transform: translateX(0) }
pickup-availability-drawer > *:not([data-store-availability-drawer-content]) { padding-inline: var(--padding) }
[data-store-availability-drawer-content] > * { padding-inline: var(--padding) }

pickup-availability-drawer .heading-action { position: sticky; top: 0; background: var(--bgColor); border-bottom: var(--globalBorder) }
pickup-availability-drawer .heading-action h3 { margin: 0; padding-block: var(--padding) }

.pickup-availability-variant { border-bottom: var(--globalBorder); padding-block: var(--padding); margin-bottom: var(--margin) }

.pickup-availability-list__item { padding-block: var(--padding) }
.pickup-availability-list__item:not(:last-child) { border-bottom: var(--globalBorder) }
.pickup-availability-list__item > * { margin: 0 }
.pickup-availability-list__item > * + * { margin-top: var(--padding) }

.pickup-availability-address { font-style: normal; font-size: 1.2rem; line-height: 1.5 }
.pickup-availability-address p { margin: 0 }

/* Availability dot */
.dot {
  --dotBg: 52 200 74;
  background: rgb(var(--dotBg));
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(var(--dotBg) / 0.7);
  margin: 0.5rem;
  height: 1rem;
  width: 1rem;
  aspect-ratio: 1 / 1;
  transform: scale(1);
  animation: pulse-dot 2s infinite;
}

.dot.is-orange { --dotBg: 255 179 64 }
.dot.is-red { --dotBg: 255 105 97 }
.dot.is-grey { --dotBg: 200 200 200 }
.dot.is-paused { animation-play-state: paused }

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgb(var(--dotBg)) }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgb(0 0 0 / 0) }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgb(0 0 0 / 0) }
}


/* ==========================================================================
   QUANTITY INPUT
   ========================================================================== */

.product-page quantity-input {
  --buttonColor: var(--color);
  --boxColor: var(--color);
  background: var(--bgColor);
  color: var(--color);
  border: var(--boxBorderWidth) var(--boxBorderStyle) var(--boxBorderColor);
  gap: var(--globalBorderWidth);
  border-radius: var(--boxRadius);
  overflow: hidden;
}

.product-page quantity-input svg.icon { pointer-events: none }
.product-page quantity-input > * { outline: var(--globalBorder) }
.product-page quantity-input input { border: none; outline: 0; width: 100%; margin: 0; background: transparent; text-align: center; height: 100%; border-radius: 0 }


/* ==========================================================================
   INVENTORY STATUS
   ========================================================================== */

.product-page inventory-status { display: block }
.product-page .inventory:has(inventory-status:empty) { display: none }
.product-page inventory-status .inventoryStatus { gap: var(--margin); align-items: center; justify-content: var(--inventoryStatusAlign) }


/* ==========================================================================
   REVIEWS (Shopify Product Reviews app)
   ========================================================================== */

#shopify-product-reviews { overflow: visible !important; margin: 0; padding-top: var(--padding) }

.product-page .itsapp:has(#shopify-product-reviews) { padding-inline: 0 }
.product-page #shopify-product-reviews fieldset { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--margin) }
.product-page #shopify-product-reviews .spr-container { border: 0; padding: 0 }
.product-page #shopify-product-reviews .spr-header-title { text-transform: uppercase; font-size: var(--fontSize); font-weight: var(--hWeight); border-bottom: var(--globalBorder); padding-bottom: var(--padding) }
.product-page #shopify-product-reviews .spr-summary-actions-newreview { text-decoration: none; padding: var(--buttonPadding); border: var(--buttonBorderWidth) solid var(--buttonBorderColor); border-radius: var(--radius) }
.product-page #shopify-product-reviews .spr-starrating { display: inline-flex }
.product-page #shopify-product-reviews :where(.spr-review, .spr-form) { border-color: var(--globalBorderColor) }
.product-page #shopify-product-reviews .spr-form { padding-inline: var(--padding) }
.product-page #shopify-product-reviews :where(.spr-header, .spr-reviews) > * { padding-inline: var(--padding) }
.product-page #shopify-product-reviews .spr-review-content-body { font-size: inherit }
.product-page #shopify-product-reviews .spr-form-title { margin-bottom: var(--padding) }

@media (max-width: 480px) {
  .spr-summary { display: flex; flex-direction: column; text-align: start }
  .spr-summary-actions { text-align: end }
  .spr-summary-actions-newreview { display: inline-block }
  .spr-header-title { text-align: start }
}


/* ==========================================================================
   COMPLEMENTARY PRODUCTS
   ========================================================================== */

.complementary:has(details[open]) { padding-bottom: 0 !important }
.complementary details[open] summary { padding-bottom: var(--padding); border-bottom: var(--globalBorder) }

.complementary .cards {
  --scrollWidth: 33%;
  min-height: 200px;
  width: 100%;
  border-bottom: 0;
}
.complementary .cards .actions { --grid-tc: repeat(1, minmax(0, 1fr)) }
.complementary .cards .card-title.h4 { --h4Size: 1.2rem }
.complementary .actions button.cartButton { height: 100%; border: var(--globalBorder); border-radius: var(--radius) }
.complementary .product .cards .card-footer select.productSelect { border-right: 0 }
.complementary .actions { --columnGap: var(--margin) }
.complementary span.new-price { all: unset }
.complementary .cards .card-meta > *:not(.card-footer) { padding: calc(var(--margin) * 2) }
.complementary .cards[card-quickbuy-float="true"] .card-meta .card-footer { border-top: 0; border-right: 0 }
.complementary .cards .card-price > * { padding-inline: 0 }
.complementary .cards > * { flex: none; width: var(--scrollWidth); scroll-snap-align: start }
.complementary .lists { border-bottom: var(--globalBorder); padding: var(--padding) }
.complementary .lists:last-child { border-bottom: 0 }
.complementary .lists img { height: 100px; width: auto; text-align: center; margin: auto }

@media (max-width: 777px) { .complementary .cards { --scrollWidth: 70% } }
@media (min-width: 778px) and (max-width: 1600px) { .complementary .cards { --scrollWidth: 48% } }


/* ==========================================================================
   MEDIA GALLERY
   ========================================================================== */

.product-page [media-position-top="true"] .bullet-product-media { max-height: 100vh }
.product-page media-gallery { display: block; position: relative }
.product-page slider-component { display: block; position: relative; max-width: 100% }

[id^="Slider-Gallery"] { gap: var(--globalBorderWidth) }
.product-page .slider__slide { position: relative; width: 100% }

/* Hide scrollbars on gallery/thumbnail sliders */
html.js [id^="Slider-Gallery-template"],
html.js [id^="Slider-Thumbnails-template"] {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html.js [id^="Slider-Gallery-template"]::-webkit-scrollbar,
html.js [id^="Slider-Thumbnails-template"]::-webkit-scrollbar { display: none }

@media (min-width: 777px) { .product-page .slider__slide { outline: var(--globalBorder) } }
.product-page media-gallery:where([data-slider="false"], [data-slider="desktop"]) .slider__slide { outline: var(--globalBorder) }

.product-page a.imgzoomer { cursor: zoom-in }

/* Slider nav buttons */
.product-page .slider-buttons { display: none; position: absolute; z-index: 1; top: 50%; width: 100%; padding: var(--margin) var(--padding) }
.product-page media-gallery[data-slider="deskmob"] .slider-buttons { display: grid }

.product-page .slider-buttons button { border: var(--globalBorderWidth) solid transparent; width: 51px; height: 51px }
.product-page media-gallery:hover .slider-buttons button,
.product-page .slider-buttons:focus-within button {
  --buttonBgColor: var(--sliderControlsBg, #fff);
  --buttonColor: var(--sliderControlsColor, #000);
  border-color: var(--globalBorderColor);
  --buttonRadius: var(--radius);
}
.product-page .slider-buttons button[disabled] { visibility: hidden }

.product-page .gallery .media:not(:last-child) { border-bottom: var(--globalBorder) }
.product-page .gallery .media :where(img, video, iframe) { width: 100% }

/* Hide variant images when not active */
.product-page .bullet-product-media[data-hide-variant-images="true"] .slider__slide { display: none }
.product-page .bullet-product-media[data-hide-variant-images="true"] .slider__slide:first-child { display: block; border: 0 }
.product-page .bullet-product-media[data-hide-variant-images="true"] :is(.slider-buttons, .thumbnail-slider) { display: none }


/* ==========================================================================
   THUMBNAIL SLIDER
   ========================================================================== */

.product-page slider-component.thumbnail-slider {
  border-block: var(--globalBorder);
  overflow: hidden;
  margin-bottom: calc(-1 * var(--globalBorderWidth));
}

.product-page slider-component.thumbnail-slider [type="button"] { height: 100% }
.product-page slider-component.thumbnail-slider [type="button"][disabled] { opacity: 0; pointer-events: none }
.product-page slider-component.thumbnail-slider .thumbnail-list { gap: var(--globalBorderWidth); border-inline: var(--globalBorder) }
.product-page slider-component.thumbnail-slider .thumbnail-slider__slide { position: relative; margin: 0; outline: none }
.product-page slider-component.thumbnail-slider .thumbnail-slider__slide .thumbnail__badge { display: grid; place-items: center; position: absolute; inset: 0; pointer-events: none }
.product-page slider-component.thumbnail-slider button.thumbnail { display: block; padding: 0 }
.product-page slider-component.thumbnail-slider button.thumbnail img { object-fit: cover; object-position: center;}

.product-page media-gallery:where([data-slider="desktop"], [data-slider="deskmob"]) { border-bottom: var(--globalBorder); margin-bottom: calc(-1 * var(--globalBorderWidth)) }


/* ==========================================================================
   FULL-WIDTH MEDIA LAYOUT
   ========================================================================== */

@media (min-width: 778px) {
  .product-page x-grid[full-media-width] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  .product-page x-grid[full-media-width] .slider__slide { display: grid; place-items: center }

  .product-page x-grid[full-media-width] .bullet-product-media {
    order: 1;
    height: calc(calc(var(--vh, 1vh) * 100) - calc(var(--headerHeight) + var(--noticerHeight)));
    grid-column: 1 / -1;
  }

  .product-page x-grid[full-media-width] .bullet-product-content {
    order: 2;
    grid-column-start: 2;
    grid-column-end: span 2;
    border-inline: var(--globalBorder);
  }

  .product-page x-grid[full-media-width] slider-component { height: calc(calc(var(--vh, 1vh) * 100) - calc(var(--headerHeight, 0px) + var(--noticerHeight, 0px))) }
  .product-page x-grid[full-media-width] .bullet-product-media :is(img, video, iframe) { max-height: calc(calc(var(--vh, 1vh) * 100) - calc(var(--headerHeight, 0px) + var(--noticerHeight, 0px))) }
}


/* ==========================================================================
   MEDIA VIEWERS (video / 3D / iframe)
   ========================================================================== */

/* Poster / play button */
.product-page :where([data-media-layout="row2"], [data-media-layout="row2full"]) [id^="Deferred-Poster"] { display: block; height: 100% }
[id^="Deferred-Poster"] { all: unset }
poster-button { position: absolute; inset: 0; display: grid; place-items: center }
poster-button :is(svg.icon) { height: 5rem; width: 5rem; filter: drop-shadow(0px 5px 5px rgb(0 0 0 / 0.5)); cursor: pointer }
poster-button svg.icon path { fill: var(--posterButtonBg, #fff) }
[data-shopify-xr] { display: none }

/* 3D model viewer */
product-model { display: block }
product-model[loaded="true"] [id^="Deferred-Poster"] { opacity: 0 }
product-model[loaded="true"] .shopify-model-viewer-ui { display: block; position: absolute; inset: 0 }
product-model[loaded="true"] model-viewer { width: 100%; height: 100% }

/* Deferred iframe / video */
deferred-media { display: block }
deferred-media[loaded="true"] [id^="Deferred-Poster"] { opacity: 0 }
deferred-media[loaded="true"] :where(iframe, video) { display: block; position: absolute; inset: 0; width: 100%; height: 100% }


/* ==========================================================================
   MOBILE MEDIA
   ========================================================================== */

@media (max-width: 777px) {
  .product-page media-gallery:where([data-slider="mobile"], [data-slider="deskmob"]) { border-bottom: var(--globalBorder) }
  .product-page media-gallery:where([data-slider="mobile"], [data-slider="deskmob"]) .slider-buttons { position: relative; display: grid }
.product-page media-gallery:where([data-slider="mobile"], [data-slider="deskmob"]) .slider__slide { max-width: 100% }
  [data-shopify-xr] { display: block; position: absolute; bottom: var(--padding); left: var(--margin); z-index: 1; width: fit-content; border-radius: 100vh }
}


/* ==========================================================================
   DESKTOP MEDIA (2-column row layouts)
   ========================================================================== */

@media (min-width: 778px) {
  .product-page media-gallery[data-slider="desktop"] .slider-buttons { display: grid }

  .product-page media-gallery:where([data-media-layout="row2"], [data-media-layout="row2full"]) slider-component > x-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--globalBorderWidth);
    height: fit-content;
  }

  .product-page media-gallery:where([data-media-layout="row2"], [data-media-layout="row2full"]) slider-component > x-flex > * { outline: var(--globalBorder) }
  .product-page media-gallery[data-media-layout="row2full"] slider-component > x-flex > *:first-child { grid-column: 1 / -1 }
}


/* ==========================================================================
   DESKTOP THUMBNAIL RAIL (left column, sticky, 4:5 aspect)
   ========================================================================== */

@media (min-width: 778px) and (hover: hover) and (pointer: fine) {

  /* Two-column layout: thumbs left, main gallery right */
  .product-page .bullet-product-media,
  x-cell.bullet-product-media {
    --ehThumbW: 86px;
    display: grid !important;
    grid-template-columns: var(--ehThumbW) minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: start !important;
  }

  /* Sticky thumbnail rail — must NOT be overflow:hidden */
  .product-page slider-component.thumbnail-slider { overflow: visible !important }

  .product-page .bullet-product-media slider-component.thumbnail-slider,
  x-cell.bullet-product-media slider-component.thumbnail-slider {
    grid-column: 1 !important;
    position: sticky !important;
    top: var(--stickTop, 0px) !important;
    align-self: start !important;
    border: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 2;
  }

  /* Scrollable vertical thumb list inside the sticky rail */
  .product-page .bullet-product-media slider-component.thumbnail-slider .thumbnail-list,
  x-cell.bullet-product-media slider-component.thumbnail-slider .thumbnail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    max-height: calc(100vh - var(--stickTop, 0px) - 24px) !important;
    overflow: auto !important;
  }

  /* Thumb slide: 4:5 ratio, no double borders */
  .product-page .bullet-product-media .thumbnail-slider__slide,
  x-cell.bullet-product-media .thumbnail-slider__slide,
  .product-page .bullet-product-media .thumbnail-list__item,
  x-cell.bullet-product-media .thumbnail-list__item {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Main gallery goes in column 2 */
  .product-page .bullet-product-media media-gallery,
  x-cell.bullet-product-media media-gallery,
  .product-page .bullet-product-media slider-component:not(.thumbnail-slider),
  x-cell.bullet-product-media slider-component:not(.thumbnail-slider) {
    grid-column: 2 !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  /* Default thumb: transparent stroke placeholder (prevents layout shift on select) */
  .product-page .bullet-product-media button.thumbnail,
  x-cell.bullet-product-media button.thumbnail {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: var(--bgColor) !important;
    border-radius: var(--radius) !important;
    box-shadow: inset 0 0 0 var(--globalBorderWidth) transparent !important;
  }

  /* Thumb image fills the 4:5 box */
  .product-page .bullet-product-media button.thumbnail img,
  x-cell.bullet-product-media button.thumbnail img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* Selected thumb: visible stroke */
  .product-page .bullet-product-media .thumbnail-slider__slide[aria-current="true"] button.thumbnail,
  x-cell.bullet-product-media .thumbnail-slider__slide[aria-current="true"] button.thumbnail,
  .product-page .bullet-product-media .thumbnail-list__item[aria-current="true"] button.thumbnail,
  x-cell.bullet-product-media .thumbnail-list__item[aria-current="true"] button.thumbnail,
  .product-page .bullet-product-media button.thumbnail[aria-current="true"],
  x-cell.bullet-product-media button.thumbnail[aria-current="true"] {
    box-shadow: inset 0 0 0 var(--globalBorderWidth) var(--globalBorderColor) !important;
  }
}


/* ==========================================================================
   FEATURED PRODUCT SECTION
   ========================================================================== */

.featured-product { --expandMediaHeight: 700px }

.featured-product .is-xpand { position: absolute; z-index: 2; top: calc(var(--expandMediaHeight) - 70px); width: 100%; margin: 0 auto; text-align: center }
.featured-product [data-menu]:checked + .is-xpand { top: unset; bottom: calc(var(--padding) + var(--margin)) }
.featured-product .is-xpand .viewless { display: none }
.featured-product [data-menu]:checked + .is-xpand .viewless { display: inline }
.featured-product [data-menu]:checked + .is-xpand .viewall { display: none }

.featured-product .xpand { height: var(--expandMediaHeight); overflow: hidden }
.featured-product [data-menu]:checked ~ .xpand { height: 100%; pointer-events: all }

.featured-product .xpand::after {
  content: "";
  display: block;
  position: sticky;
  bottom: -3px;
  left: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, var(--bgColor) 100%);
  width: 100%;
}

.featured-product [data-menu]:checked ~ .xpand::after { height: 0; background: none }

@media (max-width: 777px) { .featured-product.placeholder { padding-bottom: var(--padding) } }


/* ==========================================================================
   PHOTOSWIPE LIGHTBOX
   ========================================================================== */

.pswp {
  --pswp-bg: var(--bgColor);
  --pswp-placeholder-bg: var(--bgColor);
  --pswp-root-z-index: 100000;
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  --pswp-icon-color: var(--color);
  --pswp-icon-color-secondary: var(--bgColor);
  --pswp-icon-stroke-color: var(--bgColor);
  --pswp-icon-stroke-width: 1px;
  --pswp-error-text-color: var(--pswp-icon-color);
}

body:has(.pswp--open) { overflow: hidden }

.modal-pagination {
  position: fixed;
  bottom: var(--padding);
  left: var(--padding);
  right: var(--padding);
  width: fit-content;
  margin: 0 auto;
  background: var(--bgColor);
  border-radius: var(--radius);
  border: var(--globalBorder);
}

.pswp__button {
  position: relative;
  width: fit-content;
  padding: var(--margin);
  height: fit-content;
  margin: 0;
  border: none;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  background: var(--bgColor);
  color: var(--color);
  border-radius: var(--radius);
}

.pswp__top-bar {
  position: absolute;
  top: 0;
  width: 100%;
  padding: var(--buttonPadding);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--margin);
  z-index: 10;
  pointer-events: none !important;
}

.pswp { position: fixed; inset: 0; z-index: var(--pswp-root-z-index); display: none; touch-action: none; outline: 0; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }
.pswp:focus { outline: 0 }
.pswp img { max-width: none }
.pswp--open { display: block }
.pswp, .pswp__bg { transform: translateZ(0); will-change: opacity }
.pswp__bg { background: var(--pswp-bg) }
.pswp, .pswp__scroll-wrap { overflow: hidden }

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100% }

.pswp__img, .pswp__zoom-wrap { width: auto; height: auto }
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: zoom-in }
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: grab }
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { cursor: grabbing }
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img { cursor: zoom-out }

.pswp__container, .pswp__img, .pswp__button, .pswp__counter { user-select: none }
.pswp__item { z-index: 1; overflow: hidden }
.pswp__hidden { display: none !important }
.pswp__content { pointer-events: none }
.pswp__content > * { pointer-events: auto }
.pswp__error-msg-container { display: grid }
.pswp__error-msg { margin: auto }

.pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10; pointer-events: none }
.pswp--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto }

.pswp__button:disabled { opacity: 0.3; cursor: auto }
.pswp__icn { fill: var(--pswp-icon-color); color: var(--pswp-icon-color-secondary); pointer-events: none }
.pswp__icn-shadow { stroke: var(--pswp-icon-stroke-color); stroke-width: var(--pswp-icon-stroke-width); fill: none }
.pswp__icn:focus { outline: 0 }
div.pswp__img--placeholder, .pswp__img--with-bg { background: var(--pswp-placeholder-bg) }

.pswp__top-bar > * { pointer-events: auto; will-change: opacity }
.pswp__preloader { overflow: hidden }
.pswp__preloader .pswp__icn { opacity: 0; transition: opacity 0.2s linear; animation: pswp-clockwise 600ms linear infinite }
.pswp__preloader--active .pswp__icn { opacity: 0.85 }

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
/* ======================================================================
   EH PDP — NUCLEAR TOUCH RESET (paste LAST)
   ====================================================================== */

/* 1) Touch/coarse-pointer devices: kill rail grid, hide thumbnails */
@media (hover: none), (pointer: coarse) {

  .product-page .bullet-product-media,
  x-cell.bullet-product-media {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    align-items: stretch !important;
  }

  .product-page slider-component.thumbnail-slider,
  x-cell.bullet-product-media slider-component.thumbnail-slider,
  .product-page .thumbnail-slider,
  .product-page .thumbnail-list,
  .product-page .thumbnail-list__item,
  .product-page .thumbnail-slider__slide {
    display: none !important;
  }

  .product-page .bullet-product-media media-gallery,
  x-cell.bullet-product-media media-gallery,
  .product-page .bullet-product-media slider-component:not(.thumbnail-slider),
  x-cell.bullet-product-media slider-component:not(.thumbnail-slider) {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .product-page .slider__slide {
    max-width: 100% !important;
    width: 100% !important;
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .product-page .gallery .media :where(img, video, iframe) {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* 2) Small screens (mobile only, under 778px) — hide thumbnails regardless of pointer type */
@media (max-width: 777px) {

  .product-page .bullet-product-media,
  x-cell.bullet-product-media {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
  }

  .product-page slider-component.thumbnail-slider,
  x-cell.bullet-product-media slider-component.thumbnail-slider {
    display: none !important;
  }

  .product-page .slider__slide {
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* ==========================================================================
   MOBILE: no thumbnails, dots only (AGMES-ish)
   Paste LAST in product.css
   ========================================================================== */

@media (max-width: 777px) {

  /* Hide thumbnail rail + thumbnails (all likely selectors) */
  .product-page slider-component.thumbnail-slider,
  .product-page .thumbnail-slider,
  .product-page .thumbnail-list,
  .product-page .thumbnail-list__item,
  .product-page .thumbnail-slider__slide,
  .product-page .product__thumbnails {
    display: none !important;
  }

  /* Ensure gallery is full width and not grid-squeezed */
  .product-page .bullet-product-media,
  x-cell.bullet-product-media {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
  }

  .product-page media-gallery,
  .product-page slider-component {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-page .slider__slide {
    width: 100% !important;
    max-width: 100% !important;
    outline: none !important;
  }

  .product-page .gallery .media :where(img, video, iframe) {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Dots (Dawn-style + common slider styles) */
  .product-page .slider-counter,
  .product-page .slider-counter--dots {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 0 0 !important;
  }

  .product-page .slider-counter__link {
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #bdbdbd !important;
    opacity: 1 !important;
  }

  .product-page .slider-counter__link[aria-current="true"] {
    background: #000 !important;
  }

  /* If your theme shows numbers too, hide them */
  .product-page .slider-counter__current,
  .product-page .slider-counter__total,
  .product-page .slider-counter__separator {
    display: none !important;
  }
}
/* ==========================================================================
   MOBILE — HIDE DESKTOP THUMBNAILS (PASTE LAST)
   ========================================================================== */

@media (max-width: 777px) {

  /* Hide the entire thumbnail slider/rail */
  .product-page slider-component.thumbnail-slider,
  .product-page .thumbnail-slider,
  .product-page [id^="Slider-Thumbnails"],
  .product-page [id^="Slider-Thumbnails-template"],
  .product-page .thumbnail-list,
  .product-page .thumbnail-list__item,
  .product-page .thumbnail-slider__slide,
  .product-page button.thumbnail,
  .product-page .product__thumbnails {
    display: none !important;
  }

  /* Optional: hide the big prev/next arrow buttons you’re seeing */
  .product-page .slider-buttons {
    display: none !important;
  }
}
/* Hide on mobile (used by Liquid: small-hide class) */
@media (max-width: 777px){
  .small-hide { display: none !important; }
}/* ==========================================================================
   EH PDP — MOBILE: FORCE MEDIA TO COVER EXISTING FRAME (PASTE LAST)
   ========================================================================== */

@media (max-width: 777px) {

  /* The “frame” in Dawn/Bullet markup is usually .media (often with ratio padding) */
  .product-page .gallery .media,
  .product-page media-gallery .media {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Kill any height:auto rules you added earlier */
  .product-page .gallery .media :where(img, video, iframe),
  .product-page media-gallery .media :where(img, video, iframe) {
    height: 100% !important;
  }

  /* Make the actual media cover the frame */
  .product-page .gallery .media > img,
  .product-page .gallery .media img,
  .product-page .gallery .media picture,
  .product-page .gallery .media picture > img,
  .product-page media-gallery .media > img,
  .product-page media-gallery .media img,
  .product-page media-gallery .media picture,
  .product-page media-gallery .media picture > img,
  .product-page media-gallery deferred-media :where(video, iframe),
  .product-page media-gallery product-model model-viewer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}
/* ==========================================================================
   MOBILE PDP — MAKE SLIDE MATCH TRACK HEIGHT + TRUE COVER
   Paste LAST (this fixes the white space under the image)
   ========================================================================== */

@media (max-width: 777px) {

  /* The track is tall; make everything inside actually stretch to that height */
  .product-page media-gallery,
  .product-page media-gallery slider-component,
  .product-page media-gallery slider-component > x-flex {
    height: 100% !important;
    min-height: 100% !important;
  }

  /* Slides (x-cell) must stretch to the track height */
  .product-page media-gallery x-cell.slider__slide,
  .product-page media-gallery .slider__slide {
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    position: relative !important;
    overflow: hidden !important; /* so cover crops */
    padding: 0 !important;
  }

  /* Your markup is: x-cell.slider__slide > picture > img */
  .product-page media-gallery x-cell.slider__slide > picture,
  .product-page media-gallery .slider__slide > picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Force the image to cover the full slide height */
  .product-page media-gallery x-cell.slider__slide > picture > img,
  .product-page media-gallery .slider__slide > picture > img,
  .product-page media-gallery .slider__slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}
/* ==========================================================================
   MOBILE PDP — FORCE GALLERY TO 4:5 RATIO
   Paste AFTER the previous working fix
   ========================================================================== */

@media (max-width: 777px) {

  /* Make the entire mobile gallery a 4:5 frame */
  .product-page media-gallery,
  .product-page media-gallery slider-component,
  .product-page media-gallery slider-component > x-flex {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Ensure slides fill that 4:5 frame */
  .product-page media-gallery .slider__slide,
  .product-page media-gallery x-cell.slider__slide {
    height: 100% !important;
  }

  /* Ensure image still covers */
  .product-page media-gallery .slider__slide img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
/* ==========================================================================
   MOBILE DOT SLIDER (PDP)
   ========================================================================== */

@media (max-width: 776px) {

  /* Hide arrow buttons if you don’t want them */
  .product-page .slider-buttons {
    display: none !important;
  }

  /* Dot container */
  .product-page .eh-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 0 8px;
    width: 100%;
  }

  /* Individual dot */
  .product-page .eh-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--globalBorderColor, #000);
    background: transparent;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  /* Active dot */
  .product-page .eh-slider-dot[aria-current="true"] {
    background: var(--globalBorderColor, #000);
  }
}


/* === Product slider dots (mobile) === */

.media-gallery .slider-counter {
  display: flex;
  justify-content: center;
  gap: 10px; /* 10px apart */
  margin-top: 12px;
}

.media-gallery .slider-counter__link {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: #bdbdbd; /* grey */
  border: none;
  min-width: 0;
}

.media-gallery .slider-counter__link--active {
  background: #000; /* black active */
}

/* remove numbers if they're still visible */
.media-gallery .slider-counter__current,
.media-gallery .slider-counter__total {
  display: none;
}


/* =========================
   MOBILE SLIDER DOTS (AGMES STYLE)
   ========================= */

/* wrapper alignment */
.product-page .slider-buttons,
.product-page .slider-counter {
  justify-content: center !important;
}

/* make dots sit closer together */
.product-page .slider-counter--dots {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 !important;
}

/* base dot */
.product-page .slider-counter--dots .slider-counter__link {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  border: 1px solid #9a9a9a !important; /* grey */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* active dot = black filled */
.product-page .slider-counter--dots .slider-counter__link--active,
.product-page .slider-counter--dots .slider-counter__link[aria-current="true"] {
  border-color: #000 !important;
  background: #000 !important;
}

/* if theme uses inner span for the dot */
.product-page .slider-counter--dots .slider-counter__link span,
.product-page .slider-counter--dots .slider-counter__link .dot {
  display: none !important; /* prevents double-dot styling */
}
  /* ==========================================================================
   MOBILE PDP DOTS — CORRECT TARGET (.eh-slider-dots)
   ========================================================================== */

@media (max-width: 777px) {

  /* Dot wrapper */
  .product-page .eh-slider-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;        /* 10px apart */
    padding: 14px 0 8px !important;
  }

  /* Base dot (covers button or span) */
  .product-page .eh-slider-dots > * {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    border: 1px solid #9a9a9a !important;  /* grey outline */
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Active dot */
  .product-page .eh-slider-dots > *[aria-current="true"],
  .product-page .eh-slider-dots > *.is-active {
    background: #000 !important;
    border-color: #000 !important;
  }
}
/* =========================================================
   DESKTOP: FULL-WIDTH MEDIA — RATIO CONTROL (PASTE LAST)
   ========================================================= */
@media (min-width: 778px){

  /* Pick your ratio */
  .product-page x-grid[full-media-width]{ --ehMediaAR: 4/5; } /* change to 3/4 if you want */

  /* Remove the viewport height lock */
  .product-page x-grid[full-media-width] .bullet-product-media,
  .product-page x-grid[full-media-width] slider-component{
    height: auto !important;
    max-height: none !important;
  }

  /* Apply the ratio to the gallery frame */
  .product-page x-grid[full-media-width] slider-component{
    aspect-ratio: var(--ehMediaAR) !important;
    overflow: hidden !important;
  }

  /* Make slides + media actually fill the frame */
  .product-page x-grid[full-media-width] .slider__slide,
  .product-page x-grid[full-media-width] .slider__slide > picture{
    height: 100% !important;
  }

  .product-page x-grid[full-media-width] .slider__slide img,
  .product-page x-grid[full-media-width] .slider__slide video,
  .product-page x-grid[full-media-width] .slider__slide iframe{
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Remove your existing max-height limiter */
  .product-page x-grid[full-media-width] .bullet-product-media :is(img,video,iframe){
    max-height: none !important;
  }
}