/* ===================================================
   CorsairVideo
   =================================================== */

.CorsairVideo_video-wrapper {
  min-height: 100px;
  max-width: 100%;
  height: 100%;
  width: 100%;
}

.CorsairVideo_video-wrapper video {
  width: 100%;
}

.CorsairVideo_play-pause__btn {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
}

.CorsairVideo_play-pause__btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

.CorsairVideo_play-pause__btn-play-on-hover:hover {
  background: rgba(255, 255, 255, 0.2);
}

.CorsairVideo_overlay-play {
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 5;
}

.CorsairVideo_overlay-play--hidden {
  pointer-events: none;
  opacity: 0;
}

.CorsairVideo_overlay-play__icon {
  width: clamp(48px, 10vw, 96px);
  height: auto;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}


/* ===================================================
   MediaBlock
   =================================================== */

.MediaBlock_youtube-iframe {
  aspect-ratio: 3 / 4;
}

@media (min-width: 768px) {
  .MediaBlock_youtube-iframe {
    aspect-ratio: 16 / 9;
  }
}


/* ===================================================
   CTAPresets
   =================================================== */

.CTAPresets_anim-cta-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --cta-btn-text-color: #000;
}

.CTAPresets_anim-cta-btn span {
  color: var(--cta-btn-text-color);
}

.CTAPresets_anim-cta-btn:not(:disabled):focus-visible::after,
.CTAPresets_anim-cta-btn:not(:disabled):hover::after {
  transition: 0.15s;
  transform: skewX(-45deg) scale(1);
}

.CTAPresets_anim-cta-btn::after {
  background-color: #ff3;
  content: "";
  position: absolute;
  z-index: -1;
  padding: 0 30px;
  display: block;
  transition: 0.2s;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scaleX(0);
}

.CTAPresets_anim-cta-btn.CTAPresets_anim-cta-btn__outline {
  --cta-btn-text-color: #ece81a;
}

.CTAPresets_anim-cta-btn.CTAPresets_anim-cta-btn__outline::after {
  background-color: #ece81a33;
}


/* ===================================================
   TwoColumnBanner
   =================================================== */

.TwoColumnBanner_two-column-banner__item-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

@media (max-width: 767px) {
  .TwoColumnBanner_two-column-banner__item-wrapper {
    aspect-ratio: 1 / 1 !important;
  }
}

.TwoColumnBanner_two-column-banner__item-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #fff 2px, transparent 0) 0 0,
    linear-gradient(90deg, #fff 2px, transparent 0) 0 100%,
    linear-gradient(270deg, #fff 2px, transparent 0) 100% 0,
    linear-gradient(270deg, #fff 2px, transparent 0) 100% 100%,
    linear-gradient(180deg, #fff 2px, transparent 0) 0 0,
    linear-gradient(180deg, #fff 2px, transparent 0) 100% 0,
    linear-gradient(0deg, #fff 2px, transparent 0) 0 100%,
    linear-gradient(0deg, #fff 2px, transparent 0) 100% 100%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  opacity: 0;
  transition: opacity 225ms ease-in-out;
  z-index: 2;
}

.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible,
.TwoColumnBanner_two-column-banner__item-wrapper:hover {
  border-color: #ffffff33;
}

.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible::before,
.TwoColumnBanner_two-column-banner__item-wrapper:hover::before {
  opacity: 1;
}

.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible .TwoColumnBanner_two-column-banner__item-media img,
.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible .TwoColumnBanner_two-column-banner__item-media video,
.TwoColumnBanner_two-column-banner__item-wrapper:hover .TwoColumnBanner_two-column-banner__item-media img,
.TwoColumnBanner_two-column-banner__item-wrapper:hover .TwoColumnBanner_two-column-banner__item-media video {
  transform: scale(1.05);
}

.TwoColumnBanner_two-column-banner__item-media {
  height: 100%;
  width: 100%;
}

.TwoColumnBanner_two-column-banner__item-media img,
.TwoColumnBanner_two-column-banner__item-media video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: 225ms;
}

.TwoColumnBanner_two-column-banner__item-media-gradient {
  background: linear-gradient(180deg, transparent 62.31%, rgba(0, 0, 0, 0.55) 91.31%);
}

.TwoColumnBanner_two-column-banner__item-header> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.TwoColumnBanner_two-column-banner__item-header {
  padding-left: 1rem;
  padding-right: 1rem;
}

.TwoColumnBanner_two-column-banner__item-header h2,
.TwoColumnBanner_two-column-banner__item-header h3 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}


/* ===================================================
   Banner card — product radial background + hover image
   =================================================== */

/* Match the product card radial gradient background */
.TwoColumnBanner_two-column-banner__item-wrapper {
  background: radial-gradient(50% 50% at 50% 50%, #303239 0%, #191919 100%);
}

/* Default image — fills the card, fades out on hover */
.banner-default-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 250ms ease 600ms;
}

.banner-default-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover image — sits below, slides up from bottom on hover */
.banner-hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.banner-hover-img img {
  position: absolute;
  bottom: -20%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: bottom 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms ease;
}

/* On hover: fade out default, slide up hover image */
.TwoColumnBanner_two-column-banner__item-wrapper:hover .banner-default-img,
.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible .banner-default-img {
  opacity: 0;
  transition: opacity 250ms ease;
}

.TwoColumnBanner_two-column-banner__item-wrapper:hover .banner-hover-img img,
.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible .banner-hover-img img {
  bottom: 0;
  transition: bottom 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 300ms ease;
  opacity: 1;
}

/* Remove the old scale effect on hover since we're replacing with slide */
.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible .TwoColumnBanner_two-column-banner__item-media img,
.TwoColumnBanner_two-column-banner__item-wrapper:focus-visible .TwoColumnBanner_two-column-banner__item-media video,
.TwoColumnBanner_two-column-banner__item-wrapper:hover .TwoColumnBanner_two-column-banner__item-media img,
.TwoColumnBanner_two-column-banner__item-wrapper:hover .TwoColumnBanner_two-column-banner__item-media video {
  transform: none;
}

.TwoColumnBanner_two-column-banner__item-wrapper h3.text-header-3 {
  padding-bottom: unset;
}

.TwoColumnBanner_two-column-banner__item-wrapper .text-body-copy-1.mt-4.mx-auto {
  margin-top: unset;
  color: white !important;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  #amazon-prime-day-2026-featured-deals {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}