/* ============================================================
   Bookzilla -- the wishlist heart on product tiles and on the
   single product page.
   ------------------------------------------------------------
   Why this file exists: TI was configured to give its button the
   class "button", and on a card that collides head-on with the
   tile's own quick-add control, which claims
   a.button:not(.bz-hovercart) and pins it bottom-right as a 36px
   square with a plus. The heart was rendering on every tile --
   fifty of them on the home page -- directly underneath that plus,
   same size, same corner, invisible.

   The fix is in two parts. TI's button class option is now empty,
   so the card rules no longer claim it; and the rules below give
   the heart its own place, top-right over the cover, opposite the
   sale badge. The hardening block repeats the contested
   declarations at higher specificity, so the heart survives even
   if that plugin setting is ever restored.

   The heart is an inline SVG mask, not the plugin's icon font, so
   it matches every other icon in the design and keeps its shape
   whether or not that font loads.

   Loaded only while TI is active.
   ============================================================ */

:root{
  --bz-heart-o:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/></svg>");
  --bz-heart-f:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

/* ---------- the tile ---------- */
ul.products li.product{position:relative}

ul.products li.product .tinv-wraper{
  position:static;display:block;margin:0;padding:0;line-height:0;
}
ul.products li.product .tinv-wraper .tinv-wishlist-clear,
ul.products li.product .tinvwl-tooltip{display:none}

ul.products li.product a.tinvwl_add_to_wishlist_button{
  position:absolute;top:16px;right:16px;left:auto;bottom:auto;z-index:5;
  width:34px;height:34px;min-height:0;
  padding:0;margin:0;
  display:grid;place-items:center;overflow:visible;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--bz-line);
  color:var(--bz-muted);
  font-size:0;line-height:0;
  box-shadow:var(--bz-sh-sm);text-shadow:none;
  transition:background var(--bz-t1),color var(--bz-t1),
             border-color var(--bz-t1),transform var(--bz-t1);
}
ul.products li.product a.tinvwl_add_to_wishlist_button:hover,
ul.products li.product a.tinvwl_add_to_wishlist_button:focus{
  background:#fff;color:var(--bz-orange);
  border-color:var(--bz-orange-200);transform:translateY(-1px);
}

/* the heart, drawn rather than typed */
ul.products li.product a.tinvwl_add_to_wishlist_button::before{
  content:"";display:block;
  width:17px;height:17px;font-size:0;line-height:0;margin:0;
  background-color:currentColor;
  -webkit-mask:var(--bz-heart-o) center/contain no-repeat;
          mask:var(--bz-heart-o) center/contain no-repeat;
}
ul.products li.product a.tinvwl_add_to_wishlist_button::after{content:none}

/* already saved: the heart fills, in the house orange */
ul.products li.product a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list{
  color:var(--bz-orange);border-color:var(--bz-orange-200);background:#fff;
}
ul.products li.product a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before{
  -webkit-mask:var(--bz-heart-f) center/contain no-repeat;
          mask:var(--bz-heart-f) center/contain no-repeat;
}

/* the label is for screen readers here; the icon carries the meaning */
ul.products li.product a.tinvwl_add_to_wishlist_button span{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- hardening ----------
   Only bites if TI's button class option is ever set back to "button".
   The card's quick-add rule is (0,4,2) and marks nine declarations
   important; these selectors are (0,5,3) and answer each one. */
ul.products li.product a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart){
  padding:0!important;margin:0!important;
  border-radius:999px!important;
  background-color:rgba(255,255,255,.92)!important;background-image:none!important;
  color:var(--bz-muted)!important;
  font-size:0!important;line-height:0!important;
  box-shadow:var(--bz-sh-sm)!important;
  right:16px!important;bottom:auto!important;top:16px!important;
}
ul.products li.product a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart):hover{
  background-color:#fff!important;color:var(--bz-orange)!important;
}
ul.products li.product a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart).tinvwl-product-in-list{
  color:var(--bz-orange)!important;background-color:#fff!important;
}
ul.products li.product a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart)::before{
  content:""!important;
}
ul.products li.product a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart)::after{
  content:none!important;
}
ul.products li.product:hover a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart){
  background-color:rgba(255,255,255,.92)!important;color:var(--bz-muted)!important;
}
ul.products li.product:hover a.button.tinvwl_add_to_wishlist_button:not(.bz-hovercart):hover{
  background-color:#fff!important;color:var(--bz-orange)!important;
}

/* ---------- single product page ---------- */
.single-product .tinv-wraper{display:inline-block;margin:0 0 0 .6rem;vertical-align:middle}
.single-product .tinv-wraper .tinvwl-tooltip,
.single-product .tinv-wraper .tinv-wishlist-clear{display:none}
.single-product a.tinvwl_add_to_wishlist_button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.7rem 1.2rem;
  border-radius:var(--bz-r-sm);
  background:#fff;color:var(--bz-ink);
  border:1.5px solid var(--bz-line-2);
  font-family:var(--bz-ff);font-weight:700;font-size:.94rem;line-height:1.2;
  text-decoration:none;text-shadow:none;cursor:pointer;
  transition:background var(--bz-t1),color var(--bz-t1),border-color var(--bz-t1);
}
.single-product a.tinvwl_add_to_wishlist_button:hover{
  background:var(--bz-surface);color:var(--bz-orange-700);border-color:var(--bz-orange-200);
}
.single-product a.tinvwl_add_to_wishlist_button::before{
  content:"";flex:none;width:18px;height:18px;font-size:0;line-height:0;margin:0;
  background-color:currentColor;
  -webkit-mask:var(--bz-heart-o) center/contain no-repeat;
          mask:var(--bz-heart-o) center/contain no-repeat;
}
.single-product a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list{color:var(--bz-orange)}
.single-product a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before{
  -webkit-mask:var(--bz-heart-f) center/contain no-repeat;
          mask:var(--bz-heart-f) center/contain no-repeat;
}

/* ---------- the confirmation dialog ---------- */
.tinvwl_added_to_wishlist .tinv-modal-inner{
  border-radius:var(--bz-r);border:1px solid var(--bz-line);
  box-shadow:var(--bz-sh-lg);font-family:var(--bz-ff);color:var(--bz-ink-2);
}
.tinvwl_added_to_wishlist .tinv-modal-inner .tinv-txt{color:var(--bz-ink);font-weight:600}
.tinvwl_added_to_wishlist .tinvwl-buttons-group button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.6rem 1.15rem;border-radius:var(--bz-r-sm);
  background:var(--bz-orange);color:#fff;border:1.5px solid transparent;
  font-family:var(--bz-ff);font-weight:700;font-size:.9rem;text-shadow:none;
}
.tinvwl_added_to_wishlist .tinvwl-buttons-group button.button:hover{background:var(--bz-orange-600);color:#fff}
.tinvwl_added_to_wishlist .tinvwl-buttons-group button.tinvwl_button_close{
  background:#fff;color:var(--bz-ink);border-color:var(--bz-line-2);
}
.tinvwl_added_to_wishlist .tinvwl-buttons-group button.tinvwl_button_close:hover{
  background:var(--bz-surface);color:var(--bz-ink);
}