@keyframes galleryLoaded {
    0% {
        transform: translateZ(1px);
    }

    100% {
        transform: translateZ(0px);
    }
}

.quick-add-modal__content media-gallery {
    animation: 0.1s galleryLoaded;
}

.product__media-item>* {
    display: block;
    position: relative;
}

.media--transparent {
    background-color: transparent;
}

.media-modal {
    cursor: zoom-out;
}

.product__media-item .placeholder {
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-text), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product__media-item .placeholder .product-image-placeholder {
    width: 100%;
    height: 100%;
}

.product__media-list .media>img {
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product__media-item .media>img,
.product__media-wrapper .deferred-media>*:not(.deferred-media__poster-button) {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.product__media-item .media>.deferred-media__poster {
    display: flex;
    align-items: center;
    justify-content: center;

    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.product__media-toggle {
    display: flex;
    border: none;
    background-color: transparent;
    color: currentColor;
    padding: 0;
}

.product__media-toggle:after {
    content: "";
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
}

.global-media-settings {
    position: relative;
    border: none;
    overflow: visible !important;
}

.global-media-settings--no-shadow {
    overflow: hidden !important;
}

.thumbnail-list {
    flex-wrap: wrap;
    grid-gap: 10px;
}

.product__media-wrapper .thumbnail-list__item {
    position: relative;
}

.product__media-wrapper .thumbnail-list__item .thumbnail[data-current] {
    border: 2px solid rgb(var(--color-text));
}

.product__media-wrapper .thumbnail-list__item:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.product__media-wrapper .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    color: rgb(var(--color-text));
    cursor: pointer;
    background-color: transparent;
}

.product__media-wrapper .thumbnail--wide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    pointer-events: none;
}

.product__media-wrapper .thumbnail--narrow img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    pointer-events: none;
}

.product__media-wrapper .product__media-icon,
.product__media-wrapper .thumbnail__badge {
    position: absolute;
    background-color: rgb(var(--color-page-background));
    border-radius: 50%;
    color: rgb(var(--color-light-text));
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--media-icon-width);
    width: var(--media-icon-width);
    right: 21px;
    bottom: 21px;
    z-index: 1;
    border: 1px solid rgba(var(--color-light-text), 0.05);
}

.product__media-wrapper .product__media-icon {
    width: 10%;
    min-width: 30px;
    max-width: 60px;
    height: auto;
    box-sizing: content-box;
}

.product__media-wrapper .product__media-icon::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.product__media-wrapper .product__media-icon .icon {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.product__media-wrapper .product__media-icon .icon:not(.icon-zoom) {
    color: rgb(var(--color-text));
    width: 1em;
    height: 1em;
}

.product__media-wrapper .thumbnail__badge {
    left: auto;
    right: 1em;
    top: 1em;
}

.product__media-wrapper .thumbnail__badge .icon {
    width: 12px;
    height: 12px;
}

.product__media-wrapper .deferred-media__poster {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.product__media-wrapper .deferred-media__poster img {
    width: auto;
    max-width: 100%;
    height: 100%;
}

.product__media-wrapper .product__media-list .deferred-media {
    display: none;
}

/* Tiled thumbnails / Carousel with thumbnails desktop overlay arrows:
   hidden by default (mobile), shown as an overlay only at desktop widths
   below. */
.pdp-tf-nav__btn {
    display: none;
}

/* Dot-pagination overlay on the main gallery image. Positioned relative to
   slider-component (the viewer), which it's nested inside of and which
   already carries display:block + position:relative — see
   product-media-gallery.html for why that specific nesting matters. */
.pdp-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 32px);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / 75%);
    overflow-x: auto;
    scrollbar-width: none;
}

.pdp-dots::-webkit-scrollbar {
    display: none;
}

.pdp-dots__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 999px;
    padding: 0;
    background: #000;
    opacity: 0.35;
    cursor: pointer;
}

.pdp-dots__dot.is-active {
    width: 16px;
    opacity: 1;
}

@media screen and (min-width: 960px) {
    .pdp-dots {
        display: none;
    }
}

/* PC */

@media screen and (min-width: 960px) {

    /* Set container gap */
    .product__media-wrapper {
        --media-icon-width: 58px;
        --media-grid-horizontal-space: 4px;
        --media-grid-vertical-space: 4px;
    }

    .product__media-wrapper .large-up-hide {
        display: none !important;
    }

    .product__media-item.grid__item {
        //max-width: calc(50% - var(--media-grid-horizontal-space) / 2);
        width: calc(50% - var(--media-grid-horizontal-space) / 2);
    }

    /* PC layout */
    /* Flatten */
    .product__media-list {
        column-gap: var(--media-grid-horizontal-space);
        row-gap: var(--media-grid-horizontal-space);
    }

    .product__media-list.grid>* {
        margin-top: 0;
        padding: 0;
    }

    .product__media-list.grid {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding: 0;
        list-style: none;
    }

    .product__media-list> :nth-child(-n+2) {
        flex: 0 0 calc(50% - 2px);
    }

    .product__media-list> :nth-child(3),
    .product__media-list> :nth-child(9) {
        flex: 0 0 100%;
    }

    .product__media-list> :nth-child(n+4):nth-child(-n+6),
    .product__media-list> :nth-child(n+10):nth-child(-n+12) {
        flex: 0 0 calc(33.333% - 3px);
    }

    /*.product--columns
    .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: calc(50% - var(--media-grid-horizontal-space) / 2);
  }

  .product--flatten .product__media-item {
    max-width: calc(50% - var(--media-grid-horizontal-space) / 2);
  }
  */

    .product--thumbnail_flatten .product__media-item:not(.is-active),
    .product--carousel .product__media-item:not(.is-active) {
        display: none;
    }

    /* The active item is the only one visible in these two modes, so it
     shouldn't inherit the Tiled/Two row grid's 50%/33% item widths above. */
    .product--thumbnail_flatten .product__media-item.is-active,
    .product--carousel .product__media-item.is-active {
        width: 100%;
        flex: 0 0 100%;
    }

    /* Tiled thumbnails: cap the main image so a 4:5 product photo never
     renders taller than ~680px (680 / 1.25 = 544px wide), and center it
     since the media column can be wider than that on large screens.
     Capped directly on the aspect-ratio box (.product__media, the element
     that actually carries the padding-top percentage that produces the
     rendered height) rather than only the <li>, since the <li>'s width
     has to pass through the <modal-opener> custom element (default
     display: inline, no explicit width rule on desktop) to reach it. */
    .product--thumbnail_flatten .product__media-item.is-active {
        max-width: 544px !important;
        margin: 0 auto !important;
    }

    .product--thumbnail_flatten .product__media-item.is-active .product__media {
        max-width: 544px !important;
        margin: 0 auto !important;
    }

    /* Thumbnail */
    .product__media-wrapper .slider-mobile-gutter .slider-button {
        display: none;
    }

    /* Tiled thumbnails + Carousel with thumbnails: dedicated overlay arrows
     on the main image (see .pdp-tf-nav markup in product-media-gallery.html)
     instead of the theme's native inline .slider-button row — for carousel
     mode specifically, that native row is superseded here since it never
     actually worked (its click handler calls slideTo(), which scrolls to
     a slide's offsetLeft, but inactive slides are display:none below and
     display:none elements report offsetLeft 0, so it always "scrolled" to
     the same place). Desktop only — .pdp-tf-nav__btn defaults to
     display:none below, outside this media query, so it's hidden on
     mobile, where every slide stays visible and swipeable natively. */
    .product--thumbnail_flatten slider-component[id^="GalleryViewer"],
    .product--carousel slider-component[id^="GalleryViewer"] {
        position: relative;
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn,
    .product--carousel .pdp-tf-nav__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
        color: #000;
        cursor: pointer;
        z-index: 2;
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn:hover,
    .product--carousel .pdp-tf-nav__btn:hover {
        background: #f5f5f5;
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn .icon,
    .product--carousel .pdp-tf-nav__btn .icon {
        height: 0.85em;
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn--prev,
    .product--carousel .pdp-tf-nav__btn--prev {
        left: 16px;
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn--prev .icon,
    .product--carousel .pdp-tf-nav__btn--prev .icon {
        transform: rotate(90deg);
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn--next,
    .product--carousel .pdp-tf-nav__btn--next {
        right: 16px;
    }

    .product--thumbnail_flatten .pdp-tf-nav__btn--next .icon,
    .product--carousel .pdp-tf-nav__btn--next .icon {
        transform: rotate(-90deg);
    }

    /* Cursor hint for the drag-to-swipe gesture on the main image (desktop
     only, added by setupViewerDrag in component-media-gallery.js). */
    .product--thumbnail_flatten [id^="Slider-Gallery"],
    .product--carousel [id^="Slider-Gallery"] {
        cursor: grab;
    }

    .product--thumbnail_flatten [id^="Slider-Gallery"].is-dragging,
    .product--carousel [id^="Slider-Gallery"].is-dragging {
        cursor: grabbing;
    }

    .product__media--empty .slider-mobile-gutter .slider-button {
        display: none;
    }

    /* The old counter/arrow bar sits right above the thumbnail strip in these
     two modes and duplicates the .pdp-tf-nav overlay arrows above — its own
     arrows don't even work here (see the setupViewerArrows comment in
     component-media-gallery.js), so hide it and reuse the same dot
     pagination the mobile main image already has instead. */
    .product--thumbnail_flatten .slider-buttons,
    .product--carousel .slider-buttons {
        display: none !important;
    }

    .product--thumbnail_flatten .pdp-dots,
    .product--carousel .pdp-dots {
        display: flex;
    }

    .product--carousel .thumbnail-slider {
        display: flex;
        align-items: center;
    }

    .product__media-wrapper .thumbnail-slider .thumbnail-list.slider--tablet-up {
        display: flex;
        padding: 5px;
        flex: 1;
        scroll-padding-left: 5px;
    }

    .product__media-wrapper .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
        width: calc(20% - 8px);
    }

    .product__media-wrapper .thumbnail-list {
        display: grid;
    }

    .product--large .thumbnail-list {
        grid-template-columns: repeat(6, 1fr);
    }

    .product--medium .thumbnail-list {
        grid-template-columns: repeat(5, 1fr);
    }

    .product--small .thumbnail-list {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Tiled thumbnails: smaller thumbnails than the large/medium/small sizing
     above provides, and no more grid-gap whitespace than needed. Chaining
     both classes (they land on the same element) keeps this ahead of the
     size-based rules above regardless of source order. */
    .product--thumbnail_flatten.product--large .thumbnail-list,
    .product--thumbnail_flatten.product--medium .thumbnail-list,
    .product--thumbnail_flatten.product--small .thumbnail-list {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
        gap: 8px;
    }

    /* Active thumbnail: underline instead of a full border, to match. */
    .product--thumbnail_flatten .product__media-wrapper .thumbnail-list__item .thumbnail[data-current] {
        border: none !important;
        border-bottom: 2px solid rgb(var(--color-text)) !important;
    }

    /* Thumbnails: natural width instead of a forced square (or, previously,
     4:5) box, capped at 60px, with images fit inside rather than cropped to
     fill — matches across every desktop layout mode, so no .product--*
     scoping needed here. */
    .product__media-wrapper .thumbnail-list__item {
        max-width: 60px;
    }

    .product__media-wrapper .thumbnail-list__item:before {
        content: none;
    }

    .product__media-wrapper .thumbnail {
        position: static;
        height: auto;
        width: auto;
        max-width: 60px;
    }

    .product__media-wrapper .thumbnail--wide img,
    .product__media-wrapper .thumbnail--narrow img {
        position: static;
        height: auto;
        width: auto;
        max-width: 60px;
        object-fit: contain;
    }

    /* Offset shrunk to fit inside the 60px-capped thumbnail above — the base
     right:21px/bottom:21px (in base.css) was sized for the old, much larger
     forced-square thumbnail and would push this outside the new bounds. */
    .product:not(.product--small) .thumbnail__badge {
        width: 22px;
        height: 22px;
        right: 4px;
        bottom: 4px;
    }

    .product.product--small .thumbnail__badge {
        width: 1em;
        height: 1em;
        right: 0.5em;
        top: 0.5em;
    }

    .product.product--small .thumbnail__badge .icon {
        width: 0.5em;
        height: 0.5em;
    }

    .product__modal-opener .product__media-icon {
        opacity: 0;
    }

    /* Video */
    .product__media-wrapper .product__media-list .deferred-media {
        display: block;
    }

    .product__modal-opener:not(.product__modal-opener--image) {
        display: none;
    }

    .product__modal-opener:hover .product__media-icon,
    .product__modal-opener:focus .product__media-icon {
        opacity: 1;
    }

    //.product:not(.product--columns)
    //.product__media-list
    //.product__media-item:first-child,
    .product:not(.product--columns) .product__media-list .product__media-item--full {
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile */

@media screen and (max-width: 959px) {

    /* Set container gap */
    .product__media-wrapper {
        --media-icon-width: 38px;
        --media-grid-horizontal-space: 0;
        --media-grid-vertical-space: 0;
    }

    .product__media-wrapper .slider-counter {
        font-size: 13px;
    }

    .product__media-wrapper .slider-buttons {
        padding-bottom: 0;
    }

    .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
        margin-left: calc(var(--media-grid-horizontal-space) * -1);
        margin-right: calc(var(--media-grid-horizontal-space) * -1);
    }

    .product__media-wrapper .thumbnail-slider .thumbnail-list.slider {
        scroll-padding-left: var(--media-grid-horizontal-space);
        padding: 5px;
    }

    .product__media-wrapper .thumbnail-list__item.slider__slide {
        width: calc(33% - 6px);
    }

    .product__media-list.grid {
        column-gap: var(--media-grid-horizontal-space);
        row-gap: var(--media-grid-vertical-space);
    }

    .product__media-list.grid>* {
        margin-top: 0;
        padding: 0;
    }

    .product__media-item {
        display: flex;
        align-items: center;
    }

    .product__modal-opener {
        width: 100%;
    }

    /* Video: mirrors the desktop override above — without it, .deferred-media
     stays permanently display:none (line 230) and the static modal-opener
     poster is all that's ever visible, even once the video has loaded and
     started playing underneath. Explicit width (matching .product__modal-opener
     below) is required because .product__media-item is display:flex with no
     align-items:stretch — without it, deferred-media has no in-flow content
     to size itself against (its children are all position:absolute) and
     collapses to width:0, rendering nothing despite a correct padding-top
     height. */
    .product__media-wrapper .product__media-list .deferred-media {
        display: block;
        width: 100%;
    }

    .product__modal-opener:not(.product__modal-opener--image) {
        display: none;
    }
}

.grid-cols-1 .grid__item {
    //max-width: 100%;
    //width: 100%;
}

@media screen and (max-width: 959px) {
    .product.grid {
        margin: 0;
    }

    .grid--peek.slider--mobile {
        margin: 0;
        width: 100%;
        /* padding-top: 20px; */
        /* padding-bottom: 20px;
    padding-right: 20px; */
    }

    .grid--peek.slider .grid__item:first-of-type {
        /* margin-left: 12px; */
    }

    .grid--peek .grid__item {
        min-width: 35%;
    }

    .product__media-list .product__media-item {
        /* width: calc(100% - var(--media-grid-horizontal-space)); */
        width: 95%;
    }

    /* .product--mobile-columns .product__media-item:not(:only-child) {
    width: calc(50% - var(--media-grid-horizontal-space));
  } */
    .slider-mobile-gutter.no-featured-media .product__media-list {
        scroll-padding-left: 15px;
    }

    .grid--peek.slider--mobile {
        margin: 0;
        width: 100%;
    }

    .product__media-wrapper .slider-buttons {
        display: none;
    }
}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */