/*
Template: flatsome
 Version: 3.0
*/

/*
  NOTE:
  Keep brand colors, typography, header/footer base colors in Flatsome Theme Options.
  This file intentionally contains only code-level fixes that are hard to do from admin.
*/

:root {
  /* Brand dark tone used in gradients/background accents */
  --ca-deep: #0f1d47;
  /* Brand primary purple */
  --ca-primary: #A84AE4;
  /* Brand accent blue */
  --ca-accent: #3676F2;
}

/* Brand identity strip where logo/search/login/cart live */
.header-main {
  background: linear-gradient(135deg, var(--ca-primary), var(--ca-accent));
}

button,
.identity,
.button,
body.home .add_to_cart_button,
body.home .single_add_to_cart_button,
body.home a.button,
body.home .button,
body.home .section-content > .button,
body.home .section-content > .button.is-outline {
  background: linear-gradient(135deg, var(--ca-primary), var(--ca-accent)) !important;
}

/* Trust strip before footer (custom row classes in home content) */
.ca-trust-row {
  /* Trust section container above footer */
  background: linear-gradient(135deg, var(--ca-primary), var(--ca-accent)) !important;

}

/* Footer identity styling */
.footer-wrapper,
.footer,
.footer-1,
.footer-2 {
  background: linear-gradient(135deg, var(--ca-primary), var(--ca-accent)) !important;
}

.absolute-footer {
  background: linear-gradient(135deg, var(--ca-primary), var(--ca-accent)) !important;
}

/* Product card hover image: Flatsome structure is .box-image > .image-cover > a > img.
   Keep both images in the same frame and swap on hover (replace, don't stack). */
.product-small .box-image,
.product-small .box-image .image-cover {
  position: relative;
  overflow: hidden;
}

.product-small .box-image .image-cover > a {
  display: block;
  position: absolute;
  inset: 0;
}

.product-small .box-image .image-cover > a > img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.product-small .box-image .image-cover > a > img.back-image {
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}

.product-small .box-image .image-cover > a > img:not(.back-image) {
  z-index: 1;
  opacity: 1;
  transition: opacity .25s ease;
}

.product-small.has-hover:hover .box-image .image-cover > a > img.back-image,
.product-small .box-image:hover .image-cover > a > img.back-image {
  opacity: 1 !important;
}

/* Hide the primary image only when a hover image exists in the same anchor. */
.product-small.has-hover:hover .box-image .image-cover > a > img.back-image ~ img,
.product-small .box-image:hover .image-cover > a > img.back-image ~ img {
  opacity: 0 !important;
}

@media (max-width: 1024px) { /* Mobile / Tablet Edits */
/* Hide slider/carousel arrows */
  .flickity-prev-next-button,
  .slider-nav-outside .flickity-prev-next-button,
  .slider-nav-circle .flickity-prev-next-button,
  .slider-nav-reveal .flickity-prev-next-button,
  .slider-nav .flickity-prev-next-button,
  .flickity-button,
  .slider-nav-push .flickity-prev-next-button,
  .slider-nav-small .flickity-prev-next-button,
  .slider-nav-large .flickity-prev-next-button,
  .flickity-page-dots .dot[aria-label*="previous"],
  .flickity-page-dots .dot[aria-label*="next"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Flatsome/UX Builder arrow links used in some sliders */
  .slider-nav a,
  .slider-nav .slider-nav-circle,
  .slider-nav .slider-nav-push,
  .row-slider .flickity-prev-next-button,
  .product-section .flickity-prev-next-button {
    display: none !important;
  }
  
    /* Keep header cleaner */
  .header-top,
  #top-bar {
    /* Remove crowded top strip on phones */
    display: none !important;
  }

  /* PC Builder: keep the back-to-top button above the sticky next/prev bar */
  body.page-id-8242 #top-link,
  body.page-id-8242 .back-to-top,
  body.page-id-8242 a#top-link,
  body.page-id-8242 .button.is-outline.circle#top-link {
    bottom: 88px !important;
  }
}