html {
   box-sizing: border-box;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}

.easyzoom {
   display: inline-block;
   position: relative;
}

.easyzoom-flyout {
   position: absolute;
   z-index: 100;
   overflow: hidden;
   background: #fff;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   pointer-events: none;
}

.easyzoom.is-active .easyzoom-flyout {
   opacity: 1;
}

.easyzoom-flyout img {
   max-width: none;
   transition: transform 0.2s ease-out;
}

.easyzoom-notice {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 150;
   width: 10em;
   margin: -1em 0 0 -5em;
   line-height: 2em;
   text-align: center;
   background: #fff;
   box-shadow: 0 0 10px #888;
}

.easyzoom {
   display: inline-block;
   position: relative;
   overflow: hidden;
   border: 1px solid #fff;
   max-height: 100vmin;
   max-width: 100vmin;
   transition: border-color 0.3s ease;
}

.easyzoom--overlay:hover {
   border: 1px solid black;
}

.easyzoom a {
   display: block;
   width: 100%;
   max-width: 100vmin;
   text-decoration: none;
}

.easyzoom.is-ready img {
   cursor: zoom-in;
}

.easyzoom a img {
   vertical-align: bottom;
   width: 100% !important;
   height: auto;
   max-height: 100vmin;
   max-width: 100vmin;
   margin-left: auto !important;
   object-fit: scale-down;
   transition: transform 0.3s ease;
}

.easyzoom img {
   vertical-align: bottom;
}

.thumbnails {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
   gap: 0.5rem;
   margin: 0 auto;
   height: fit-content;
}

.thumbnails .thumbnail {
   display: flex;
   position: relative;
   width: 100%;
   border: 1px solid #333;
   padding: 0 !important;
   aspect-ratio: 1 / 1;
   transition: transform 0.2s ease, border-color 0.2s ease;
   overflow: hidden;
   align-items: center;
   justify-content: center;
}

.thumbnails .thumbnail:hover {
   transform: scale(1.05);
   border-color: #000;
}

.thumbnails .thumbnail img {
   object-fit: cover;
   min-width: 100% !important;
   min-height: 100% !important;
   max-width: none;
   max-height: none;
   display: block;
   transition: opacity .2s ease;
   flex: 1;
}

.thumbnails .thumbnail:hover img {
   opacity: 0.8;
}

.product-container {
   position: relative;
   width: fit-content;
}

/* Media query para pantallas extra grandes */
@media (min-width: 1200px) {
   .product-container {
      display: flex;
      align-items: flex-start;
      flex-direction: row-reverse;
      gap: 10px;
      position: relative;
   }

   .easyzoom {
      flex: 1;
   }

   .thumbnails {
      max-height: 100%;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      padding: .5%;
      width: min-content;
   }

   .thumbnails a {
      scroll-snap-align: start;
   }

   .thumbnails::-webkit-scrollbar {
      width: 6px;
   }

   .thumbnails::-webkit-scrollbar-track {
      background: #f1f1f1;
   }

   .thumbnails::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 3px;
   }

   .thumbnails::-webkit-scrollbar-thumb:hover {
      background: #555;
   }
}