/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 09 2026 | 21:59:12 */
:root {
  --qv-gap: 0.375rem;
}

/* ------------------------------------------------------------------ */
/* 1) Bare eye icon — no background, no border, no radius             */
/* ------------------------------------------------------------------ */
.products .product .product-thumbnail-wrapper .product-buttons.bottom-center,
.products .product .product-thumbnail-wrapper .product-buttons.bottom-center.style-1 {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.products .product .product-thumbnail-wrapper .product-buttons.bottom-center .product-quickview a,
.products .product .product-thumbnail-wrapper .product-buttons.bottom-center.style-1 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--gray-500);
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .products .product .product-thumbnail-wrapper .product-buttons.bottom-center .product-quickview a,
  .products .product .product-thumbnail-wrapper .product-buttons.bottom-center.style-1 a {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.products .product .product-thumbnail-wrapper .product-buttons.bottom-center .product-quickview a:hover {
  color: rgb(var(--theme-color-secondary));
}

/* Hide the "Quickview" label, keep the eye icon */
.products .product .product-thumbnail-wrapper .product-buttons.bottom-center .product-quickview a span {
  display: none;
}

.products .product .product-thumbnail-wrapper .product-buttons.bottom-center .product-quickview a i {
  font-size: 1.0625rem;   /* == wishlist heart glyph size */
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .products .product .product-thumbnail-wrapper .product-buttons.bottom-center .product-quickview a i {
    font-size: 1.3rem;
  }
}

/* ------------------------------------------------------------------ */
/* 2) Pin it in the top-right corner, directly below the wishlist     */
/* ------------------------------------------------------------------ */
.products .product .product-thumbnail-wrapper .product-buttons.bottom-center {
  right: 0.375rem;                                /* == .top-right right */
  bottom: auto;
  left: auto;
  /* wishlist top (0.375) + wishlist height (1.875) + gap */
  top: calc(0.375rem + 1.875rem + var(--qv-gap));
  transform: none;
}

/* Bordered cards on >=768px shift the wishlist heart outwards; match it */
@media screen and (min-width: 768px) {
  .products .product .product-wrapper.bordered .product-thumbnail-wrapper .product-buttons.bottom-center {
    right: calc(-1 * var(--bordered-padding, 1.125rem) / 3);
    top: calc((-1 * var(--bordered-padding, 1.125rem) / 2.5) + 2.25rem + var(--qv-gap));
  }
}

/* ------------------------------------------------------------------ */
/* 3) Desktop: only show on hover (keep theme behaviour, add a-11y)    */
/*    Mobile: always visible (theme already does this < 1024.1px)      */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 1024.1px) {
  .products .product .product-thumbnail-wrapper .product-buttons.bottom-center {
    opacity: 0;
    pointer-events: none;
  }
  .products .product:hover .product-thumbnail-wrapper .product-buttons.bottom-center,
  .products .product:focus-within .product-thumbnail-wrapper .product-buttons.bottom-center {
    opacity: 1;
    pointer-events: auto;
  }
}