/**
 * Category / Feature tiles (mixlax Feature Image)
 * Always show titles; animate on hover instead of revealing text.
 */

.vs-features-layout2 .vs-feature {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}

.vs-features-layout2 .vs-feature-img {
  overflow: hidden;
}

.vs-features-layout2 .vs-feature-img img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.45s ease;
  will-change: transform;
}

/* Always visible title overlay */
.vs-features-layout2 .vs-feature-content {
  opacity: 1 !important;
  visibility: visible !important;
  bottom: 0 !important;
  padding-top: 80px;
  transition: padding 0.45s ease, background 0.45s ease;
}

.vs-features-layout2 .vs-feature-content:before {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 35%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  transition: opacity 0.45s ease, height 0.45s ease;
}

.vs-features-layout2 .vs-feature-content .feature-title {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              letter-spacing 0.45s ease;
}

.vs-features-layout2 .vs-feature-content .feature-text {
  opacity: 0.95;
  color: #fff;
  transition: opacity 0.35s ease, transform 0.45s ease;
}

/* Price box (if used) — keep visible */
.vs-features-layout2 .vs-price-box1 {
  opacity: 1 !important;
  visibility: visible !important;
  top: 20px !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Hover animation ---- */
.vs-features-layout2 .vs-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.vs-features-layout2 .vs-feature:hover .vs-feature-img img {
  transform: scale(1.08);
  filter: brightness(1.05) saturate(1.05);
}

.vs-features-layout2 .vs-feature:hover .vs-feature-content {
  padding-top: 100px;
}

.vs-features-layout2 .vs-feature:hover .vs-feature-content:before {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 40%,
    rgba(0, 0, 0, 0.35) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

.vs-features-layout2 .vs-feature:hover .vs-feature-content .feature-title {
  transform: translateY(-4px);
  letter-spacing: 0.02em;
}

.vs-features-layout2 .vs-feature:hover .vs-price-box1 {
  transform: scale(1.06) rotate(-3deg);
}

/* Soft focus ring for keyboard / touch feel */
.vs-features-layout2 .vs-feature:focus-within,
.vs-features-layout2 .vs-feature:hover {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .vs-features-layout2 .vs-feature,
  .vs-features-layout2 .vs-feature-img img,
  .vs-features-layout2 .vs-feature-content,
  .vs-features-layout2 .vs-feature-content .feature-title,
  .vs-features-layout2 .vs-price-box1 {
    transition: none !important;
  }

  .vs-features-layout2 .vs-feature:hover {
    transform: none;
  }

  .vs-features-layout2 .vs-feature:hover .vs-feature-img img {
    transform: none;
  }
}

/* ==========================================================================
   Explore Our Products — EAEL Woo Product Carousel (preset-2)
   Always show name + price; keep add-to-cart / quick view on hover only.
   ========================================================================== */

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .image-wrap img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
}

/* Always-visible title & price bar */
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .product-overlay-content {
  bottom: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 48px 16px 16px;
  z-index: 4;
  background: linear-gradient(
    to top,
    rgba(20, 40, 30, 0.55) 0%,
    rgba(20, 40, 30, 0.28) 55%,
    rgba(20, 40, 30, 0) 100%
  );
  transition: padding 0.4s ease, background 0.4s ease;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .eael-product-title *,
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .eael-product-title h2 {
  color: #fff !important;
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .eael-product-price,
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .eael-product-price .amount,
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .eael-product-price ins .amount {
  color: #fff !important;
  margin-top: 6px !important;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Don't wash out the whole card with purple overlay by default;
   keep a light tint only on hover so buttons read clearly */
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .carousel-overlay {
  opacity: 0 !important;
  background: rgba(46, 125, 80, 0.28) !important;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .carousel-overlay {
  opacity: 1 !important;
}

/* Keep product image readable on hover (plugin dims it to 0.2) */
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .image-wrap a {
  opacity: 1 !important;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .image-wrap img {
  transform: scale(1.06);
  filter: brightness(1.03);
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .product-overlay-content {
  padding-top: 56px;
  background: linear-gradient(
    to top,
    rgba(20, 40, 30, 0.68) 0%,
    rgba(20, 40, 30, 0.35) 55%,
    rgba(20, 40, 30, 0) 100%
  );
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .eael-product-title h2 {
  transform: translateY(-2px);
}

/* Action icons (add to cart / quick view / link): hover only — keep EAEL slide-in */
.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .icons-wrap.box-style-list {
  z-index: 6;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel .icons-wrap.box-style-list li a {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .icons-wrap.box-style-list li a {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .icons-wrap.box-style-list li a:hover {
  transform: scale(1.08);
  background-color: #2e7d50;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .eael-woo-product-carousel-container.preset-2 .eael-product-carousel,
  .eael-woo-product-carousel-container.preset-2 .eael-product-carousel .image-wrap img,
  .eael-woo-product-carousel-container.preset-2 .eael-product-carousel .product-overlay-content {
    transition: none !important;
  }

  .eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover {
    transform: none;
  }

  .eael-woo-product-carousel-container.preset-2 .eael-product-carousel:hover .image-wrap img {
    transform: none;
  }
}