/* «علاقه‌مندی‌ها» (inc/favorites.php, assets/js/favorites.js). */

/* Heart on a product card: off the photo, at the left end of the price line (content-product.php),
   a little in from the card's edge so it does not drift towards the next card. */
.ree-fav{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ree-text);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.ree-card__row .ree-fav{ position: relative; z-index: 2; flex: none; width: 36px; height: 36px; margin: -6px 0 -6px 16px }
.ree-card__row .ree-fav svg{ width: 23px; height: 23px }
.ree-fav svg{ width: 20px; height: 20px; display: block }
.ree-fav .ree-fav__on{ display: none }
.ree-fav[aria-pressed="true"]{ color: var(--ree-blue) }
.ree-fav[aria-pressed="true"] .ree-fav__off{ display: none }
.ree-fav[aria-pressed="true"] .ree-fav__on{ display: block }
@media(hover:hover) and (pointer:fine){ .ree-fav:hover{ color: var(--ree-blue) } }
.ree-fav:focus-visible{ outline: 2px solid var(--ree-blue); outline-offset: 2px }
.ree-fav.is-pop{ animation: ree-fav-pop .32s ease }
@keyframes ree-fav-pop{ 40%{ transform: scale(1.22) } }
@media(max-width:768px){
  .ree-card__row .ree-fav{ width: 30px; height: 30px; margin: -5px 0 -5px 4px }
  .ree-card__row .ree-fav svg{ width: 20px; height: 20px }
}

/* Product page: in the top left corner of the white buying box, beside the name. */
.ree-buybox{ position: relative }
.ree-fav--single{ position: absolute; top: clamp(12px, 1.4vw, 20px); left: clamp(12px, 1.4vw, 20px); width: 42px; height: 42px; background: var(--ree-bg) }
.ree-fav--single svg{ width: 22px; height: 22px }
.ree-buybox .product_title{ padding-inline-end: 50px }

/* Phone menu: «علاقه‌مندی‌ها» with its heart and count. */
#ree-layer .ree-mlink--fav{ gap: 10px; margin-top: calc(.5*var(--u)) }
#ree-layer .ree-mlink--fav svg{ width: 20px; height: 20px; flex: none }
#ree-layer .ree-mlink__count{ margin-inline-start: auto; font-size: 12px; font-weight: 400; color: #777 }
#ree-layer .ree-mlink--fav.has-items svg{ color: var(--ree-blue) }

/* The page */
.ree-favs__head{ margin: calc(1.25*var(--u)) 0 calc(1.5*var(--u)) }
.ree-favs__head .ree-page-title{ margin: 0; font-family: var(--ree-font-head); font-size: clamp(24px, 1.6vw + 14px, 34px); font-weight: 400 }
.ree-favs__note{ margin: 6px 0 0; font-size: 13.5px; color: #666 }
.ree-favs__empty{ padding: 28px 22px; background: #fff; font-size: 14px; line-height: 2.1 }
.ree-favs__empty a{ margin-inline-start: 6px; font-weight: 500 }
.ree-favs__list li{ transition: opacity .25s ease, transform .25s ease }
.ree-favs__list li.is-leaving{ opacity: 0; transform: scale(.97) }

/* Account tab: three cards across in the narrower content column, two on phones. */
.ree-favs--account .ree-favs__note{ margin: 0 0 18px }
.ree-favs--account ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media(max-width:768px){ .ree-favs--account ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }