/* The plugin is enqueued only on the front page. The body class is emitted by
 * the MU plugin before paint so the whole page starts black, without a white
 * flash while JavaScript boots. */
body.pixfluid-page {
  background: #000 !important;
  color: #fff;
}

body.pixfluid-page .wp-site-blocks,
body.pixfluid-page .entry-content,
body.pixfluid-page .entry-content > .wp-block-group,
body.pixfluid-page .wp-block-template-part,
body.pixfluid-page header,
body.pixfluid-page footer {
  background: transparent !important;
  color: #fff;
}

/* ONE header now serves this black front page and the white inner pages, and a
 * navigation block carries a SINGLE set of colours, so the dark page takes the
 * exception and the shared default is the inner-page one. THIS STYLESHEET IS
 * ENQUEUED ONLY ON THE FRONT PAGE, so every inner-page colour must come from
 * the template part and cannot be corrected from here. !important because the
 * block's own preset colour classes are emitted with !important, and the
 * containers are targeted because the links are `color: inherit`. */
body.pixfluid-page .shopmighty-navigation,
body.pixfluid-page .shopmighty-navigation .wp-block-navigation__responsive-container,
body.pixfluid-page .shopmighty-navigation .wp-block-navigation__submenu-container {
  color: #FFFFFE !important;
}

/* The mobile menu paints itself opaque so it can cover the page. The template
 * part gives it a light panel for the white inner pages; here it stays dark,
 * which is what this page has always shown. */
body.pixfluid-page .shopmighty-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #130107 !important;
}

body.pixfluid-page .wp-site-blocks :is(
  .wp-block-group,
  .wp-block-columns,
  .wp-block-column,
  .wp-block-template-part
) {
  background-color: transparent !important;
}

body.pixfluid-page .entry-content > .wp-block-group {
  position: relative;
  z-index: 1;
}

body.pixfluid-page :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: #fff !important;
}

body.pixfluid-page a:not(.wp-block-button__link) {
  color: #ea1e63;
}

body.pixfluid-page .wp-site-blocks {
  position: relative;
  z-index: 1;
}

body.pixfluid-page > .pixfluid-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

body.pixfluid-page.pixfluid-fallback::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgb(153 8 59 / 74%), transparent 36%),
    radial-gradient(circle at 82% 72%, rgb(111 6 43 / 66%), transparent 40%),
    #000;
}

.shopmighty-slider {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 28%, rgb(153 8 59 / 72%), transparent 36%),
    radial-gradient(circle at 76% 72%, rgb(111 6 43 / 62%), transparent 40%),
    #000;
}

.shopmighty-slider.pixfluid-ready {
  background: transparent;
}

.shopmighty-slider > .shopmighty-slider-holder,
.shopmighty-slider > .swiper-pagination {
  position: relative;
  z-index: 1;
}

/* Only hide the source artwork after JS has a working WebGL canvas, or after
 * it explicitly selected the CSS fallback. Otherwise the imported page stays
 * exactly the original 2pink carousel. */
.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .swiper-slide
  > .wp-block-cover__image-background,
.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .swiper-slide
  > .wp-block-cover__background {
  opacity: 0 !important;
}

.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback) .swiper-slide {
  background: transparent !important;
  color: #fff;
}

.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .swiper-slide
  :is(h1, h2, h3, p, a:not(.wp-block-button__link)) {
  color: inherit !important;
  text-shadow: 0 1px 22px rgb(19 1 7 / 28%);
}

.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .wp-block-button__link {
  color: #130107 !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgb(19 1 7 / 24%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgb(19 1 7 / 34%);
}

.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.45;
}

.shopmighty-slider:is(.pixfluid-ready, .pixfluid-fallback)
  .swiper-pagination-bullet-active {
  background: #ea1e63;
  opacity: 1;
}

.shopmighty-slider.pixfluid-fallback {
  background:
    radial-gradient(circle at 20% 25%, rgb(153 8 59 / 88%), transparent 36%),
    radial-gradient(circle at 82% 72%, rgb(111 6 43 / 78%), transparent 40%),
    radial-gradient(circle at 64% 18%, rgb(153 8 59 / 62%), transparent 32%),
    #000;
  background-size: 140% 140%;
  animation: pixfluid-fallback-drift 14s ease-in-out infinite alternate;
}

@keyframes pixfluid-fallback-drift {
  from { background-position: 0% 20%; }
  to { background-position: 100% 75%; }
}

@media (prefers-reduced-motion: reduce) {
  .shopmighty-slider.pixfluid-fallback {
    animation: none;
  }

  .shopmighty-slider .wp-block-button__link {
    transition: none;
  }

  /* The JS brake (#2395) sets Swiper's speed to 0, which is what actually
   * stops the slide. This is the belt to that braces: Swiper writes its
   * transition-duration inline on the wrapper, and any theme or plugin that
   * re-animates the track would otherwise reintroduce the very motion the
   * visitor asked us to remove. Scoped to the hero slider only. */
  .shopmighty-slider .swiper-wrapper {
    transition-duration: 0ms !important;
  }
}

@media (max-width: 781px) {
  .shopmighty-slider .swiper-slide {
    min-height: min(680px, calc(100svh - 84px)) !important;
  }
}