/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
#quickview .quickview-images__item img {
  object-fit: contain !important;
  background-color: #ffffff;
}



@media (max-width: 768px) {
  .product-card__image {
    aspect-ratio: 1 / 1;
  }

  .product-card__image img.main-image {
    object-fit: contain !important;
    background-color: #ffffff;
    padding: 8px;
  }






  .s-product-options-thumbnails-wrapper {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x !important; /* key fix: claim horizontal touch */
    overscroll-behavior-x: contain !important; /* don't bubble scroll to parent */
  }

  .s-product-options-thumbnails-wrapper::-webkit-scrollbar {
    display: none;
  }

  .s-product-options-thumbnails-wrapper > div {
    flex-shrink: 0 !important;
  }



    /* Wrapper around the scroller — needs to be the positioning context */
  .s-product-options-option-content:has(.s-product-options-thumbnails-wrapper) {
    position: relative;
  }


.s-product-options-option-content:has(.s-product-options-thumbnails-wrapper.has-overflow)::before {
  content: "›";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  backdrop-filter: blur(4px); /* frosted glass effect */
  -webkit-backdrop-filter: blur(4px); /* Safari */
  border: none;
  border-radius: 50%;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 5;
}

  /* Arrow only shows on overflowing wrappers */
  .s-product-options-thumbnails-wrapper.has-overflow {
    padding-left: 24px; /* room for the arrow */
  }

  .s-product-options-thumbnails-wrapper.has-overflow::before {
    content: "‹";
    position: sticky;
    left: 0;
    align-self: center;
    flex-shrink: 0;
    width: 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #333;
    background: linear-gradient(to right, #fff 50%, rgba(255,255,255,0));
    pointer-events: none;
    z-index: 2;
  }
}








.offer-countdown-button {
  background: linear-gradient(135deg, #e11d24, #c0000a) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(225, 29, 36, 0.4) !important;
  animation: pulse-red 2s ease-in-out infinite !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.offer-countdown-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}

.offer-countdown-button:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 22px rgba(225, 29, 36, 0.6) !important;
  animation: none !important;
}

.offer-countdown-button:active {
  transform: scale(0.97) !important;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 4px 15px rgba(225, 29, 36, 0.4); }
  50%       { box-shadow: 0 4px 25px rgba(225, 29, 36, 0.75); }
}

@keyframes shimmer {
  0%   { left: -100%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}