.product-detail__media-gallery {
  --padding-inline-start: calc(
    var(--detail-padding-inline-start, 0px) + var(--page-padding, 0px)
  );
  --padding-inline-end: calc(
    var(--detail-padding-inline-end, 0px) + var(--page-padding, 0px)
  );

  display: block;
  overflow: hidden;
}

.media-gallery__media {
    border-radius: 30px;
}

@media (max-width: 959px) {
  .product-detail__media-gallery {
    margin-inline: calc(-1 * var(--padding-inline-start))
      calc(-1 * var(--padding-inline-end));
  }
}

.product-detail__media-gallery .media-gallery__placeholder {
  width: 100%;
  cursor: default;
  background-color: rgb(var(--color-image-background));
}

.product-detail__media-gallery .media-gallery__placeholder svg {
  width: 100%;
  height: 100%;
}

.product-detail__media-gallery .media-gallery__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.product-detail__media-gallery .media-gallery__list-wrapper {
  --gap: 10px;

  position: relative;
  width: 100%;
}

.product-detail__media-gallery .media-gallery__sticky-wrapper {
  display: none;
}

.product-detail__media-gallery .media-gallery__list {
  gap: var(--gap, 0);
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  list-style: none;
}

@media (min-width: 960px) {
  .product-detail__media-gallery .media-gallery__list {
    scroll-behavior: auto;
  }
}

.product-detail__media-gallery .media-gallery__list::before {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: var(--min-aspect-ratio);
  content: "";
}

.product-detail__media-gallery .media-gallery__preview-icon {
  position: absolute;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  min-width: 30px;
  max-width: 60px;
  pointer-events: none;
  transition: opacity 0.2s;
}

@media (min-width: 960px) {
  .product-detail__media-gallery .media-gallery__preview-icon {
    opacity: 0;
  }
}

.product-detail__media-gallery .media-gallery__preview-icon .icon {
  width: 100%;
  height: 100%;
}

.product-detail__media-gallery .media-gallery__item {
  display: none;
  align-items: center;
  width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

.product-detail__media-gallery
  .media-gallery__item:hover
  .media-gallery__preview-icon {
  opacity: 1;
}

@media (max-width: 959px) {
  .product-detail__media-gallery
    .media-gallery__item:not(
      [data-media-type="video"],
      [data-media-type="external_video"]
    )
    .media-gallery__media::after {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
  }
}

.product-detail__media-gallery .media-gallery__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-detail__media-gallery .media-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}

.product-detail__media-gallery
  .media-gallery__video[data-loaded]
  + .media-gallery__preview-icon {
  display: none;
}

@media (max-width: 959px) {
  .product-detail__media-gallery
    .media-gallery__video
    + .media-gallery__preview-icon {
    display: none;
  }

  .product-detail__media-gallery
    .media-gallery__video
    .theme-video-media__play-button {
    inset-block-start: unset;
    inset-block-end: 20px;
    inset-inline-start: unset;
    inset-inline-end: 20px;
    width: 10%;
    min-width: 30px;
    max-width: 60px;
    transform: none;
  }
}

.product-detail__media-gallery .media-gallery__arrows {
  display: flex;
  gap: 14px;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 100%;
  justify-content: space-between;
  z-index: 4;
}

.product-detail__media-gallery .media-gallery__arrow {
  display: flex;
  align-items: center;
  padding: 6px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
}

.product-detail__media-gallery .media-gallery__arrow .icon {
  width: 10px;
  height: 10px;
}

.product-detail__media-gallery .media-gallery__arrow[name="previous"] .icon {
  transform: rotate(90deg);
}

.product-detail__media-gallery .media-gallery__arrow[name="next"] .icon {
  transform: rotate(-90deg);
}

.product-detail__media-gallery .media-gallery__arrow:disabled {
  cursor: not-allowed;
}

.product-detail__media-gallery .media-gallery__status {
  display: none;
  align-items: center;
  line-height: 1;
}

.product-detail__media-gallery .media-gallery__pagination {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  max-width: 85%;
  padding: 2px 0;
}

.product-detail__media-gallery .media-gallery__pagination button[name="pager"] {
  flex: 1 0 0;
  width: 30px;
  max-width: 30px;
  height: 2px;
  background-color: rgba(var(--color-text), 0.2);
  border: none;
  transition: background-color 0.3s;
}

.product-detail__media-gallery
  .media-gallery__pagination
  button[name="pager"].is-active {
  background-color: rgb(var(--color-text));
}

.product-detail__media-gallery .media-gallery__thumbnails {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 32px;
}

.product-detail__media-gallery .media-gallery__thumbnail-list {
  --gap: 10px;
  --columns: 5.6;
  --gap-columns: 6;

  gap: var(--gap, 0);
  width: 100%;
}

@media (max-width: 959px) {
  .product-detail__media-gallery .media-gallery__thumbnail-list {
    --columns: 3;
    --gap-columns: 3;
  }
}

.product-detail__media-gallery .media-gallery__thumbnail {
  position: relative;
  width: calc(
    (100% - var(--gap, 0px) * (var(--gap-columns) - 1)) / var(--columns)
  );
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

.product-detail__media-gallery .media-gallery__thumbnail::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  content: "";
  box-shadow: inset 0 0 0 var(--border-thickness, 0) rgb(var(--color-text));
  transition: box-shadow 0.2s;
}

.product-detail__media-gallery .media-gallery__thumbnail:hover,
.product-detail__media-gallery .media-gallery__thumbnail:focus,
.product-detail__media-gallery .media-gallery__thumbnail.is-select {
  --border-thickness: 2px;
}

.product-detail__media-gallery .media-gallery__thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="previous"],
.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="next"] {
  position: absolute;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
}

.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="previous"] {
  inset-inline-start: 16px;
}

.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="next"] {
  inset-inline-start: calc(100% - 16px);
}

.product-detail__media-gallery .media-gallery__thumbnail-play-icon {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 50%;
}

.product-detail__media-gallery[data-init="true"] .media-gallery__item,
.product-detail__media-gallery .media-gallery__item.is-active {
  display: flex;
}

.product-detail__media-gallery[data-init="true"] .media-gallery__list::before {
  display: none;
}

.product-detail__media-gallery[data-disabled-preview="true"]
  .media-gallery__item {
  cursor: default;
}

.product-detail__media-gallery[data-disabled-preview="true"]
  .media-gallery__preview-icon {
  display: none;
}

@media (min-width: 960px) {
  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__list,
  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__list {
    aspect-ratio: var(--aspect-ratio);
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__item {
    height: 100%;
  }
  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__thumbnails {
    flex-wrap: wrap;
    padding: 0;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__thumbnail-list {
    --gap: 10px;
    --columns: 6;
    --gap-columns: 6;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__thumbnail-arrows {
    display: none;
  }

  

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__pagination {
    display: none;
  }
  

  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__pagination {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list-wrapper {
    --gap: 4px;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__sticky-wrapper {
    align-items: flex-start;
    width: calc((100% - var(--gap, 0)) / 2);
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="two-columns"][data-media-total="1"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="two-columns"][data-media-total="1"]
    .media-gallery__sticky-wrapper {
    width: 100%;
  }
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 0);
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__item {
    align-items: flex-start;
    width: calc((100% - var(--gap, 0)) / 2);
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__sticky-wrapper {
    width: 100%;
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list-wrapper,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 0);
    align-items: flex-start;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__sticky-wrapper,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__sticky-wrapper {
    display: block;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__sticky-wrapper
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__sticky-wrapper
    .media-gallery__item {
    display: flex;
    width: 100%;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list {
    display: contents;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list::before,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list::before {
    content: unset;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list
    .is-select,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list
    .is-select {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__item {
    display: flex;
  }
}

@media (max-width: 959px) {
  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__list {
    padding: 0 var(--padding-inline-start);
    scroll-padding-left: var(--padding-inline-start);
  }

  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__item,
  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__list::before {
    width: calc((100% - var(--gap, 0)) / 2);
  }

  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="two-columns"][data-media-total="1"]
    .media-gallery__item,
  .product-detail__media-gallery[data-mobile-layout="two-columns"][data-media-total="1"]
    .media-gallery__list::before {
    width: 100%;
  }
  .product-detail__media-gallery[data-mobile-layout="two-columns"]:not(
      [data-init="true"]
    )
    .media-gallery__item.is-active
    + .media-gallery__item {
    display: flex;
  }
  .product-detail__media-gallery[data-mobile-layout="hide-thumbnail"]
    .media-gallery__list {
    padding: 0 var(--padding-inline-start);
    scroll-padding-left: var(--padding-inline-start);
  }

  .product-detail__media-gallery[data-mobile-layout="hide-thumbnail"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-mobile-layout="hide-thumbnail"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail"]
    .media-gallery__list,
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__list {
    padding: 0 var(--padding-inline-start);
    scroll-padding-left: var(--padding-inline-start);
  }


  .product-detail__media-gallery[data-mobile-layout="show-thumbnail"]
    .media-gallery__pagination,
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__pagination {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__list {
    padding: 0;
    scroll-padding-left: 0;
  }

  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__thumbnails {
    flex-wrap: wrap;
    padding: 0 var(--page-padding);
  }
}

@media (max-width: 959px) {
    .product-detail__media-gallery .media-gallery__content {
        width: 100% !important;
        max-width: 100vw !important;
        /* overrides the inline 100vw */
        box-sizing: border-box;
        margin: 0 auto;
    }

    /* keep everything clipped if the track is wider */
    .product-detail__media-gallery,
    .product-detail__media-gallery .media-gallery__list-wrapper {
        overflow: hidden;
    }

    /* be strict about the image */
    .product-detail__media-gallery .media-gallery__image {
        width: 100%;
        max-width: 100vw;
        height: auto;
        border-radius: 30px !important;
    }
}
/* --- PDP gallery: stop mobile overflow without breaking layout --- */
@media (max-width: 959px) {

    /* 1) kill the bleed-to-edge negative margins that can push past the viewport */
    .product-detail__media-gallery {
        margin-inline: 0 !important;
        /* clip any odd child overflows on iOS */
        overflow-x: hidden;
    }

    /* 2) hard-cap widths inside the carousel subtree */
    .product-detail__media-gallery theme-carousel,
    .product-detail__media-gallery .media-gallery__content,
    .product-detail__media-gallery .media-gallery__list-wrapper,
    .product-detail__media-gallery .media-gallery__list,
    .product-detail__media-gallery .media-gallery__item,
    .product-detail__media-gallery .media-gallery__media {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    /* reserve height without creating extra width */
    .product-detail__media-gallery .media-gallery__list::before {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* images themselves must never exceed the viewport */
    .product-detail__media-gallery .media-gallery__image {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 30px !important;
    }

    /* safety guard for any inline 100vw styles coming from JS */
    .product-detail__media-gallery [style*="100vw"] {
        max-width: 100% !important;
    }
}

/* if your browser supports it, clip instead of hide */
@supports (overflow: clip) {
    @media (max-width: 959px) {
        .product-detail__media-gallery {
            overflow-x: clip;
        }
    }
}

/* Make the main image smaller on mobile */
@media (max-width: 959px) {

    /* Optional: kill the tall placeholder that inflates height */
    .product-detail__media-gallery .media-gallery__list::before {
        display: none !important;
    }

    /* Center the media and cap its height */
    .product-detail__media-gallery .media-gallery__media {
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: var(--pdp-mobile-img-maxvh, 70vh);
        /* tweak */
        overflow: hidden;
    }

    /* Let the image shrink to fit the cap */
    .product-detail__media-gallery .media-gallery__image {
        width: auto !important;
        max-width: var(--pdp-mobile-img-maxvw, 88vw) !important;
        height: auto !important;
        max-height: var(--pdp-mobile-img-maxvh, 70vh) !important;
        margin: 0 auto;
        object-fit: contain;
        border-radius: 30px !important;
    }

    /* The zoom icon can also push visual scale—make it smaller */
    .product-detail__media-gallery .media-gallery__preview-icon {
        max-width: 44px;
    }
}

.media-gallery__pagination {
    display: none !important;
}

/* Make sure the carousel track and slides are a clean horizontal strip */
@media (max-width: 768px) {
  /* The <theme-carousel> outer container */
  .media-gallery__content {
    overflow: hidden;
  }

  /* The scroll container (ul.carousel__track) */
  .media-gallery__content .carousel__track {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    /* If scroll-snap is on globally, try disabling it here first */
    scroll-snap-type: none !important;
  }

  /* Each slide (li) should be exactly one screen/page wide */
  .media-gallery__content .carousel__track > li {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Optional: kill horizontal margins that create gaps */
    margin-left: 0;
    margin-right: 0;
  }

  /* If your media item adds extra padding/margins, flatten them on mobile */
  .media-gallery__item {
    margin: 0;
  }
}

@media (min-width: 960px) {
    .product-detail__media-gallery .media-gallery__list::before {
        display: none !important;
        content: none;
    }
}

@media (min-width: 960px) {

    .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"] .media-gallery__list,
    .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"] .media-gallery__list {
        aspect-ratio: var(--aspect-ratio);
    }
}

@media (min-width: 960px) {
  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__media {
    overflow: hidden; /* crop the image */
  }
    .product-detail__media-gallery .media-gallery__list::before {
    display: none !important;
    content: none;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__item.is-active
    .media-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(-10%); /* adjust this %, e.g. -5% / -15% */
    border-radius: 30px !important;
  }
}

/* Desktop: remove extra spacer height for thumbnail-flatten layout */
@media (min-width: 960px) {
  /* Let the content (image) control the height instead of the aspect-ratio container */
  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__list {
    aspect-ratio: auto;
  }

  /* Kill the empty pseudo-element that sits above the real media item */
  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__list::before {
    display: none !important;
    content: none;
  }
}