/**
 * Split from numart_main.css for maintainability.
 */

/* Wishlist icon - visible by default, positioned by JavaScript if needed */
.layout__region--second .block-extra-field-blockcommerce-productmyproductflag-wishlist {
  position: relative;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: grid;
  place-items: center;
  border: 1px solid lightgray;
  color: black;
  background-color: white;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.2s ease;
}


.fav-icon {
  color: black !important;
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist .content,
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist {
  width: 100%;
  height: 100%;
}

.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}


/* Style for Font Awesome <i> icons inside wishlist */
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a > i,
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a > .fa,
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a > .far,
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a > .fas,
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a > .fav-icon {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 24px !important;
  color: black !important;
  font-family: "Font Awesome 6 Free" !important;
}

/* Regular (outline) heart icon */
.block-extra-field-blockcommerce-productmyproductflag-wishlist .flag-wishlist a > .far {
  font-weight: 400 !important;
}

/* Solid (filled) heart icon */


/* Hide AJAX throbber/spinner for all flag links (wishlist, etc.) */


/* Hide AJAX throbber on commerce variation selection - feels faster */


/* Ensure flag link doesn't shift during AJAX */
.flag-wishlist,
.flag-wrapper,
.flag,
[class*="flag-"]:not([class*="flag-icon"]) {
  position: relative;
  display: inline-block;
}

/* Fixed size for flag links to prevent shifting */
.flag-wishlist a,
.flag a.use-ajax,
[class*="flag-"]:not([class*="flag-icon"]) a.use-ajax {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Prevent layout shift from throbber insertion */
.flag-wishlist a svg,
.flag a svg,
[class*="flag-"] a svg,
.flag-wishlist a .svg-inline--fa,
.flag a .svg-inline--fa {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}