/*
 * The product card.
 *
 * Shared by the homepage rail, the shop and category archives, and the
 * wishlist — see inc/product-card.php. Keep the styling here rather than in a
 * component stylesheet so every grid stays identical.
 */

.nesa-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /*
   * Full cell, always. The loop <li> is a centred column flexbox
   * (bp-shop.css + bp-flow-fix.css), so without an explicit width the card
   * shrinks to its image's natural width — a product whose photo happens to
   * be small got a narrow card, a shorter media frame, and a title floating
   * above the row's line.
   */
  width: 100%;
}

/* ── Media ─────────────────────────────────────────────────────────────── */

/*
 * The frame lives on the WRAPPER, not the image. With the ratio on the img,
 * one card whose image slipped past the class (or lost the height fight to
 * WooCommerce's higher-specificity `li.product a img` rules) came out shorter
 * than its neighbours and pushed its title off the row's line. The media box
 * is now 2:3 no matter what lands inside it, so the body below always starts
 * at the same height across a row.
 */
.nesa-card__media {
  position: relative;
  overflow: hidden;
  background: var(--nesa-cream);
  aspect-ratio: 2 / 3;
}

.nesa-card__link { display: block; height: 100%; }

/* Every image in the frame fills it — the front photo, the hover photo, a
 * placeholder, or anything a plugin injects. Doubled with the .woocommerce
 * loop selector so WooCommerce core's (0,3,2) img rules cannot out-rank it.
 *
 * ABSOLUTE, not height:100% — the frame's height comes from aspect-ratio,
 * which percentage heights treat as indefinite, so height:100% resolved to
 * auto and a shorter photo left a bare strip between itself and the title.
 * An absolutely-positioned box measures the frame after layout, so inset:0
 * always fills it. */
.nesa-card__media img,
.nesa-card__img,
.woocommerce ul.products li.product a .nesa-card__media img,
.woocommerce ul.products li.product .nesa-card__media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  /* cover, per the client's call: card photos fill the frame edge-to-edge
   * (a sliver trimmed off odd-shaped photos), the PDP stage stays contain. */
  object-fit: cover;
}

/*
 * Win back the margin inside a WooCommerce loop.
 *
 * woocommerce.css sets `margin: 0 0 1em` on `.woocommerce ul.products
 * li.product a img` — specificity (0,3,2), which beats the (0,1,0) rule above.
 * bp-shop.css used to neutralise it with `margin: 0 !important` as part of a
 * block that also forced a fixed image height; removing that block for the
 * height took the margin reset with it, and a ~16px gap opened under every
 * card image in the shop grid.
 *
 * The selector has to carry `.woocommerce` to win. WooCommerce's is
 * `.woocommerce ul.products li.product a img` = 3 classes + 4 elements; without
 * the leading class ours was 3 classes + 3 elements and quietly lost, so the
 * ~16px gap stayed. Four classes beats three regardless of element count.
 */
.woocommerce ul.products li.product a .nesa-card__img,
.woocommerce-page ul.products li.product a .nesa-card__img {
  margin: 0;
}

/* The second image sits on top and fades in — a crossfade rather than a swap,
 * which is the "animacion i lehtë" the ticket asks for. */
.nesa-card__img--back {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity var(--nesa-dur-slow) var(--oxa-ease);
}

.nesa-card--has-hover:hover .nesa-card__img--back,
.nesa-card--has-hover:focus-within .nesa-card__img--back { opacity: 1; }

/* ── Badge ─────────────────────────────────────────────────────────────── */

.nesa-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: .4rem .7rem;
  background: #fff;
  color: var(--nesa-ink);
  font-family: var(--nesa-font-sans);
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
}

.nesa-card__badge--sale { background: var(--nesa-sale); color: #fff; }

/* ── Wishlist ──────────────────────────────────────────────────────────── */

/* The ticket asks for a bigger, working heart. It sits top-right over the
 * photo, above the hover image. */
.nesa-card__media .bp-wish-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nesa-ink);
  cursor: pointer;
}

.nesa-card__media .bp-wish-ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: fill var(--oxa-dur) var(--oxa-ease), scale var(--oxa-dur) var(--oxa-ease);
}

.nesa-card__media .bp-wish-btn:hover .bp-wish-ico { scale: 1.12; }
.nesa-card__media .bp-wish-btn[aria-pressed="true"] .bp-wish-ico { fill: currentColor; }

/* ── Body ──────────────────────────────────────────────────────────────── */

.nesa-card__body {
  padding-top: var(--oxa-space-2);
  text-align: center;
}

.nesa-card__name {
  margin: 0 0 .3rem;
  font-family: var(--nesa-font-serif);
  font-size: var(--oxa-fs-lg);
  font-weight: 400;
  line-height: 1.25;
  color: var(--nesa-ink);
}
.nesa-card__name a { color: inherit; }
.nesa-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nesa-card__price {
  margin: 0 0 .3rem;
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-md);
  color: var(--nesa-ink);
}

/* WooCommerce renders a sale price as <del> old <ins> new. */
.nesa-card__price del {
  margin-right: .4rem;
  color: var(--nesa-ink-soft);
  text-decoration: line-through;
}
.nesa-card__price ins {
  color: var(--nesa-sale);
  text-decoration: none;
  font-weight: 500;
}

.nesa-card__colours {
  margin: 0;
  font-family: var(--nesa-font-sans);
  font-size: var(--oxa-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--nesa-track-ui);
  color: var(--nesa-ink-soft);
}

/*
 * No downsizing of the name on phones — at --oxa-fs-md the serif title read
 * as fine print under the photo. The desktop size (--oxa-fs-lg) holds at
 * every width.
 */

/* ── Sizes on hover ────────────────────────────────────────────────────
 *
 * Task item 9: "pjesa e madhësive shfaqet në hover, por të ketë një animacion
 * të vogël". The strip sits just past the frame's bottom edge and slides up
 * over the photo when the card is hovered or focused. Hover-capable devices
 * only — on touch the strip would either never show or cover the photo
 * permanently, so it simply stays off.
 */
.nesa-card__sizes {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 0.625rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--nesa-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--nesa-ink);
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

@media (hover: hover) {
  .nesa-card:hover .nesa-card__sizes,
  .nesa-card:focus-within .nesa-card__sizes {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: no-preference) {
    .nesa-card__sizes {
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
  }
}