/* Zelax Core — Favorites. Matches the storefront's ink-outline / hard-shadow look. */

.zx-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 11px 24px;
  border: 2px solid var(--z-ink, #111114);
  border-radius: 999px;
  background: #fff;
  color: var(--z-ink, #111114);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--z-ink, #111114);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.zx-fav:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--z-ink, #111114); }
.zx-fav:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--z-ink, #111114); }
.zx-fav:focus-visible { outline: 3px solid var(--z-ink, #111114); outline-offset: 3px; }
/* Saved reads as a confirmed secondary state — yellow stays reserved for
   "add to cart", so the primary action never has to compete. */
.zx-fav.is-on { background: var(--z-cream, #FFF9E8); }
.zx-fav.is-busy { opacity: .55; pointer-events: none; }

.zx-fav-heart { font-size: 17px; line-height: 1; }
.zx-fav.is-on .zx-fav-heart { color: var(--z-red, #e51c21); }

/* Pop the heart the moment it is saved. */
@keyframes zx-fav-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.zx-fav.just-saved .zx-fav-heart { animation: zx-fav-pop .32s ease; }
@media (prefers-reduced-motion: reduce) {
  .zx-fav, .zx-fav .zx-fav-heart { transition: none; animation: none; }
}

.zx-fav-msg {
  min-height: 0;
  margin: 8px 2px 0;
  font-size: 13px;
  font-weight: 700;
  color: #55555e;
}
.zx-fav-msg.is-err { color: var(--z-red, #e51c21); }
.zx-fav-msg:empty { margin: 0; }

/* --- /my-account/favorites/ ------------------------------------------------ */

.zx-fav-intro {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b6b63;
  text-transform: lowercase;
  margin: 0 0 14px;
}

.zx-favs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
/* display:grid would otherwise beat the UA's [hidden] rule. */
.zx-favs[hidden] { display: none; }

.zx-favcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--z-ink, #111114);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--z-ink, #111114);
  overflow: hidden;
}
.zx-favcard.is-going { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }

.zx-favthumb { display: block; background: var(--z-cream, #FFF9E8); border-bottom: 2px solid var(--z-ink, #111114); }
.zx-favthumb img, .zx-favimg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* flex:1 + margin-top:auto keeps every card's action row on the same line,
   however long the glove's name runs. */
.zx-favbody { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }

.zx-favname {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--z-ink, #111114);
  text-decoration: none;
}
.zx-favname:hover { text-decoration: underline; }

.zx-favprice { font-size: 14px; font-weight: 800; color: #55555e; }
.zx-favprice .amount { color: var(--z-ink, #111114); }

.zx-favacts { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.zx-favview { padding: 7px 18px !important; font-size: 13px !important; }

/* The theme styles every bare <button> inside .za-wrap as a yellow pill, so
   these selectors have to out-specify it — remove is a quiet action. */
.zx-favx,
.za-wrap .zx-favx,
.woocommerce-MyAccount-content .zx-favx {
  display: inline-block;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a8a94;
  text-decoration: underline;
  cursor: pointer;
}
.za-wrap .zx-favx:hover,
.woocommerce-MyAccount-content .zx-favx:hover { color: var(--z-red, #e51c21); }
.zx-favx.is-busy { opacity: .5; pointer-events: none; }

.zx-fav-empty {
  max-width: 460px;
  margin: 10px 0;
  padding: 30px 28px;
  background: #fff;
  border: 2px solid var(--z-ink, #111114);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--z-ink, #111114);
}
.zx-fav-empty b { display: block; font-size: 17px; font-weight: 900; margin-bottom: 8px; }
.zx-fav-empty p { margin: 0 0 18px; font-size: 14.5px; color: #55555e; line-height: 1.55; }

@media (max-width: 560px) {
  .zx-favs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .zx-favthumb img, .zx-favimg { height: 150px; }
}