/*
 * FHEERA — product-card.css
 * New card component: wishlist · badge · overlay · quick-add
 * Non-destructive — loaded after products-page.css
 */

/* ─────────────────────────────────────────────────────
   CARD WRAPPER
───────────────────────────────────────────────────── */
.fh-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  background:      transparent;
  color:           inherit;
  text-decoration: none;

  opacity:   0;
  transform: translateY(16px);
  animation: fhCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered entrance */
.fh-card:nth-child(1)      { animation-delay: 0.05s; }
.fh-card:nth-child(2)      { animation-delay: 0.12s; }
.fh-card:nth-child(3)      { animation-delay: 0.19s; }
.fh-card:nth-child(4)      { animation-delay: 0.26s; }
.fh-card:nth-child(5)      { animation-delay: 0.33s; }
.fh-card:nth-child(6)      { animation-delay: 0.40s; }
.fh-card:nth-child(7)      { animation-delay: 0.47s; }
.fh-card:nth-child(8)      { animation-delay: 0.54s; }
.fh-card:nth-child(n+9)    { animation-delay: 0.58s; }

@keyframes fhCardIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────
   MEDIA — image frame
───────────────────────────────────────────────────── */
.fh-card__media {
  position:     relative;
  width:        100%;
  aspect-ratio: 3 / 4;
  overflow:     hidden;
  background:   #EDEAE4;   /* warm placeholder */
  flex-shrink:  0;
}

/* Front / Back images */
.fh-card__img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
  transition:
    transform 0.80s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.50s ease;
}

.fh-card__img--front { opacity: 1; z-index: 1; }
.fh-card__img--back  { opacity: 0; z-index: 2; }

.fh-card:hover .fh-card__img--front { opacity: 0; transform: scale(1.05); }
.fh-card:hover .fh-card__img--back  { opacity: 1; transform: scale(1.05); }

/* Single image: still zoom */
.fh-card:hover .fh-card__img--front:only-of-type {
  opacity:   1;
  transform: scale(1.05);
}

/* Dark veil on hover */
.fh-card__media::before {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    3;
  background: rgba(10, 10, 8, 0);
  transition: background 0.40s ease;
  pointer-events: none;
}
.fh-card:hover .fh-card__media::before {
  background: rgba(10, 10, 8, 0.22);
}

/* Placeholder */
.fh-card__placeholder {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  color:      #C8C4BE;
  font-family: 'Jost', sans-serif;
  font-size:  0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────
   WISHLIST BUTTON — pojok kanan atas
───────────────────────────────────────────────────── */
.fh-card__wishlist {
  position:   absolute;
  top:        12px;
  right:      12px;
  z-index:    10;
  width:      34px;
  height:     34px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:     none;
  border-radius: 50%;
  display:    flex;
  align-items: center;
  justify-content: center;
  cursor:     pointer;

  /* Hidden at rest, visible on card hover */
  opacity:    0;
  transform:  scale(0.80) translateY(-4px);
  transition:
    opacity   0.30s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.20s ease;
}

.fh-card:hover .fh-card__wishlist {
  opacity:   1;
  transform: scale(1) translateY(0);
}

.fh-card__wishlist:hover {
  background: #fff;
}

/* Heart icon */
.fh-card__wishlist svg {
  width:  14px;
  height: 14px;
  stroke: #1A1A18;
  fill:   none;
  stroke-width: 1.6;
  transition: stroke 0.20s ease, fill 0.20s ease;
  pointer-events: none;
}

/* Active / saved state */
.fh-card__wishlist.is-saved svg {
  stroke: #c0392b;
  fill:   #c0392b;
}

/* ─────────────────────────────────────────────────────
   BADGES — NEW · SALE
───────────────────────────────────────────────────── */
.fh-card__badge {
  position:       absolute;
  z-index:        10;
  font-family:    'Jost', sans-serif;
  font-size:      0.50rem;
  font-weight:    400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:        4px 9px;
  line-height:    1.5;
  pointer-events: none;
  border-radius:  0;
}

/* NEW — bottom left, gold pill */
.fh-card__badge--new {
  bottom:     14px;
  left:       14px;
  background: #B8975A;
  color:      #fff;
}

/* SALE % — top left, dark pill */
.fh-card__badge--sale {
  top:        14px;
  left:       14px;
  background: rgba(10, 10, 8, 0.82);
  color:      rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────
   OVERLAY CTA — Quick Add
   Slides up from bottom on hover
───────────────────────────────────────────────────── */
.fh-card__overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    8;
  padding:    0 14px 14px;

  display:    flex;
  gap:        8px;

  transform:  translateY(100%);
  opacity:    0;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.30s ease;
}

.fh-card:hover .fh-card__overlay {
  transform: translateY(0);
  opacity:   1;
}

/* Quick Add button */
.fh-card__quick-add {
  flex:           1;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            7px;

  height:         38px;
  background:     rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:         1px solid rgba(255, 255, 255, 0.5);
  color:          #1A1A18;
  cursor:         pointer;

  font-family:    'Jost', sans-serif;
  font-size:      0.55rem;
  font-weight:    400;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  transition:
    background 0.22s ease,
    color      0.22s ease,
    border-color 0.22s ease;
}

.fh-card__quick-add:hover {
  background:   rgba(184, 151, 90, 0.92);
  color:        #fff;
  border-color: transparent;
}

.fh-card__quick-add:disabled,
.fh-card__quick-add--soldout {
  background:   rgba(200, 196, 190, 0.75);
  color:        rgba(26, 26, 24, 0.45);
  cursor:       not-allowed;
  border-color: transparent;
}

.fh-card__quick-add svg {
  flex-shrink: 0;
  pointer-events: none;
}

/* Cart-icon only button (small variant, not used by default) */
.fh-card__cart-icon {
  width:      38px;
  height:     38px;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:     1px solid rgba(255, 255, 255, 0.5);
  color:      #1A1A18;
  cursor:     pointer;
  flex-shrink: 0;
  transition: background 0.22s ease, color 0.22s ease;
}
.fh-card__cart-icon:hover {
  background: #B8975A;
  color:      #fff;
}

/* ─────────────────────────────────────────────────────
   CARD INFO — below image
───────────────────────────────────────────────────── */
.fh-card__info {
  padding:        0.80rem 0 0;
  min-width: 0;
  display:        flex;
  flex-direction: column;
  gap:            0.20rem;
}

/* Category label */
.fh-card__cat {
  font-family:    'Jost', sans-serif;
  font-size:      0.50rem;
  font-weight:    300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color:          #8C8880;
  line-height:    1;
  margin-bottom:  0.20rem;
}

/* Product name */
.fh-card__name {
  font-family:    'Cormorant Garamond', Georgia, serif;
  font-size:      clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight:    400;
  line-height:    1.22;
  color:          #1A1A18;
  letter-spacing: 0.01em;
  margin:         0;

  display:           -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp:        2;
  -webkit-box-orient: vertical;
  overflow:          hidden;
}

.fh-card__name a {
  color:           inherit;
  text-decoration: none;
  transition:      color 0.22s ease;
}

.fh-card:hover .fh-card__name a {
  color: #B8975A;
}

/* Price row */
.fh-card__price {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;

  min-width: 0;
}

/* Sale price */
.fh-card__price-now {
  font-family:    'Jost', sans-serif;
   font-size: 0.74rem;
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          #B8975A;  /* gold = sale */
}

/* Normal price (no discount) */
.fh-card__price-normal {
  font-family:    'Jost', sans-serif;
  font-size: 0.74rem;
  font-weight:    300;
  letter-spacing: 0.04em;
  color:          #1A1A18;
}

/* Old / strikethrough price */
.fh-card__price-old {
  font-family:     'Jost', sans-serif;
  font-size:       0.68rem;
  font-weight:     300;
  color:           #C8C4BE;
  text-decoration: line-through;
  letter-spacing:  0.02em;
}

/* ─────────────────────────────────────────────────────
   SOLD-OUT STATE
───────────────────────────────────────────────────── */
.fh-card--soldout .fh-card__media {
  opacity: 0.65;
}

.fh-card__soldout-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.50rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #8A6A2F;
  border: 1px solid rgba(184,151,90,0.35);

  background: rgba(184,151,90,0.08);

  padding: 3px 8px;
  display: inline-block;
  margin-top: 0.35rem;
  width: fit-content;
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* MOBILE ONLY */
  .fh-card__overlay {
    position: static;
    transform: none;
    opacity: 1;

    padding: 0;
    margin-top: 0.55rem;

    display: flex;
    justify-content: flex-start;
  }

  .fh-card__wishlist {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  .fh-card__quick-add {
    width: auto;
    min-width: unset;

    height: 28px;
    padding: 0 10px;

    background: transparent;
    border: 1px solid rgba(0,0,0,0.12);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    font-size: 0.42rem;
    letter-spacing: 0.14em;
  }

  .fh-card__quick-add svg {
    width: 11px;
    height: 11px;
  }

}

@media (min-width: 641px) {

  .fh-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    padding: 0 14px 14px;

    transform: translateY(100%);
    opacity: 0;
  }

  .fh-card:hover .fh-card__overlay {
    transform: translateY(0);
    opacity: 1;
  }

}