/*
 * Product archive extras that are not part of the generated layers (archives.css).
 */

/* Sub-category tiles grow slightly on hover (Elementor's container hover transform). */
.ew-ah__tile { transition: background .3s, border .3s, box-shadow .3s, transform .4s; transform: scale(var(--e-con-transform-scale, 1)); }
.ew-ah__tile:hover { --e-con-transform-scale: 1.05; }
.ew-pgrid__empty { text-align: center; }

/* Saws: "reactive" tiles with an animated glow that follows the pointer (from the original page). */
@property --bgrotate {
  initial-value: 120deg;
  inherits: false;
  syntax: "<angle>";
}
@property --bgrotate2 {
  initial-value: 255deg;
  inherits: false;
  syntax: "<angle>";
}
@property --text {
  initial-value: 220deg;
  inherits: false;
  syntax: "<angle>";
}

.ew-arch--saws {
  --br: 4.55% / 3.5%;
  --hl: 0;
  --bg: hsl(254, 42%, 21%); /* Remains #2A1F4C */
  --t: all .66s linear(0, 0.007, 0.028 2.1%, 0.112 4.6%, 0.224 6.9%, 0.604 14.2%, 0.713, 0.803, 0.879, 0.939, 0.985 26.2%, 1.019 28.9%, 1.034 30.7%, 1.045, 1.051 34.8%, 1.053 37.2%, 1.046 41.6%, 1.012 54.7%, 1.001 62.8%, 0.997 73%, 1);
}

.ew-reactive {
  border-radius: var(--br);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  position: relative;
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 50% 50%, 0px 0px, 0px 0px;
  background-image: 
    radial-gradient(
      farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(270, 100%, 94%, var(--hl)) 8%, /* Light purple for glow */
      hsla(270, 100%, 80%, var(--hl)) 22%,
      hsla(270, 100%, 70%, 0) 66%
    ),
    radial-gradient(40% 51% at 7% 32%, hsla(60, 100%, 80%, 1) 0%, hsla(60, 100%, 50%, 0) 100%), /* Light yellow */
    radial-gradient(40% 52% at 85% 67%, hsla(60, 100%, 60%, 0.77) 0%, hsla(60, 100%, 50%, 0) 100%), /* Medium yellow */
    radial-gradient(80% 80% at 50% 50%, hsla(60, 100%, 50%, 1) 27%, hsla(60, 100%, 50%, 0) 58%), /* Base yellow */
    conic-gradient(
      from var(--bgrotate) at 50% 50%,
      #a94cff 5%, /* Purple */
      hsla(60, 100%, 50%, 0) 17%, /* Transparent yellow */
      hsla(60, 100%, 50%, 0) 40%,
      hsla(60, 100%, 60%, 1) 48%, /* Medium yellow */
      hsla(60, 100%, 60%, 1) 51%,
      hsla(60, 100%, 50%, 0) 59%,
      hsla(60, 100%, 50%, 0) 83%,
      #a94cff 95% /* Purple */
    ),
    conic-gradient(
      from var(--bgrotate2) at 50% 50%,
      hsla(60, 100%, 75%, 1) 0%, /* Light yellow */
      #be78ff 34%, /* Purple */
      #be78ff 64%, /* Purple */
      hsla(60, 100%, 75%, 1) 100% /* Light yellow */
    );
  background-blend-mode: color-dodge, normal, normal, normal, normal;
  animation: ew-glow-bg 44s linear infinite;
  transform: translate3d(0, 0, 0.1px);
  z-index: 1;
}

.ew-reactive:hover {
  --hl: 1;
}

.ew-reactive::before,
.ew-reactive::after,
.ew-ah__tile-inside {
  border-radius: inherit;
  content: "";
  grid-column: 1/-1;
  grid-row: 1/-1;
  inset: 1px;
  position: absolute;
}

.ew-ah__tile-inside {
  display: flex;
  align-items: center;
  border-radius: inherit;
  overflow: hidden;
  justify-content: center;
  background: hsl(254, 42%, 21%); /* Remains #2A1F4C */
  z-index: 2;
}

.ew-ah__tile-inside::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(270, 25%, 80%) 12%, /* Light purple */
      hsla(60, 40%, 30%, 0.2) 90% /* Darker yellow with transparency */
    );
  mix-blend-mode: overlay;
  filter: brightness(1) contrast(1.2);
  opacity: var(--hl);
  transition: var(--t);
}

.ew-reactive::after {
  background: inherit;
  inset: -10px;
  scale: 0.8;
  filter: blur(36px) brightness(1) contrast(0.85) saturate(1.4);
  z-index: 0;
  transition: var(--t);
}

.ew-reactive:hover::after {
  scale: 0.9;
  filter: blur(36px) brightness(1) contrast(1) saturate(1);
}

.ew-reactive::before {
  content: "";
  inset: 0;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 10px 20px -5px;
  z-index: 1;
}

@keyframes ew-glow-bg {
  0% {
    --bgrotate: 0deg;
    --bgrotate2: 0deg;
    --text: 90deg;
  }
  25% {
    --bgrotate2: 360deg;
    --text: 260deg;
  }
  50% {
    --bgrotate2: 720deg;
  }
  100% {
    --bgrotate: 720deg;
    --bgrotate2: 0deg;
    --text: 90deg;
  }
}
.ew-loadmore { display: flex; justify-content: center; margin-top: 30px; }
.ew-loadmore__btn.is-loading { opacity: .6; pointer-events: none; }