/* Overwrite existing selected style */
  .usnacks-buybox .pdp-image-carousel-wrapper .gallery-nav-slide {
    transition: all 0.3s ease-in-out;
  }
  .usnacks-buybox .pdp-image-carousel-wrapper .gallery-nav-slide.selected,
  .usnacks-buybox .pdp-image-carousel-wrapper .gallery-nav-slide:hover {
    opacity: 1;
  }

  /* Hide scrollbar while keeping scroll functionality */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  /* Full-width mobile gallery */
  @media (max-width: 991px) {
    .usnacks-buybox.full-width-mobile-gallery .pdp-image-carousel {
      margin-left: -5.556%;
      margin-right: -5.556%;
      border-radius: 0;
      border: none;
    }
  }


  /* XL viewport gallery layout adjustments */
  @media (min-width: 1280px) {
    .usnacks-buybox .pdp-image-carousel-wrapper {
      align-items: flex-start;
    }

    /* Initially hide thumbs nav on xl until max-height is calculated */
    .usnacks-buybox .gallery-thumbs-nav {
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }

    /* Fade in once JS has set max-height */
    .usnacks-buybox .gallery-thumbs-nav.thumbs-nav-ready {
      opacity: 1;
    }

    /* Make the carousel square */
    .usnacks-buybox .pdp-image-carousel-wrapper .pdp-image-carousel {
      aspect-ratio: 1 / 1;
      flex-shrink: 0;
      width: calc(100% - 105px);
    }
  }

  /* Sticky ATC Button Brand Colors */
  #buybox-pdp-sticky-atc .btn-primary {
    background-color: var(--brand-primary, #007e40);
  }

  #buybox-pdp-sticky-atc .btn-primary:hover {
    background-color: color-mix(in srgb, var(--brand-primary, #007e40) 90%, black);
  }

  /* New Nutrition Label (A/B test button — hidden by default; Intelligems reveals it) */
  .new-nutrition-label {
    font-size: 18px;
    transition: background-color 0.3s ease-in-out;
  }
  .new-nutrition-label:hover {
    background-color: var(--color-gray-weak);
  }