/**
 * WTDS — Theme-owned ProductCard support layer.
 *
 * ProductCard anatomy/geometry/interaction are owned by Wapuos8 Theme.
 * Playground may provide badge payload HTML through `wapu_product_card_badge`,
 * but it does not own card layout, media, actions or visual settings.
 */

.wapu-product-card,
.wapu-product-card *,
.wapu-product-card *::before,
.wapu-product-card *::after {
  box-sizing: border-box;
}

.wapu-product-card__img-wrap {
  position: relative;
}

/* 7.7.80 · Availability moves out of media and into the information stack. */
.wapu-product-card__availability {
  --wapu-card-availability-color: var(--wtds-success);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 .3125rem;
  color: var(--wtds-ink-2);
  font-family: var(--wtds-font-text);
  font-size: 8px;
  font-weight: var(--wtds-fw-medium);
  line-height: 1.2;
}

.wapu-product-card__availability--on_demand,
.wapu-product-card__availability--preorder {
  --wapu-card-availability-color: var(--wtds-warning);
}

.wapu-product-card__availability-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--wapu-card-availability-color);
}

.wapu-product-card__availability-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Legacy extension badge slot. Core availability no longer renders here. */
.wapu-product-card > .wapu-product-card__badges {
  position: absolute;
  top: var(--wtds-s-1, .75rem);
  left: var(--wtds-s-1, .75rem);
  right: var(--wtds-s-1, .75rem);
  z-index: var(--wtds-layer-raised, 5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .375rem;
  min-width: 0;
  pointer-events: none;
}

.wapu-product-card > .wapu-product-card__badges > .wa-badge,
.wapu-product-card > .wapu-product-card__badges > .wapu-kit-badge,
.wapu-product-card > .wapu-product-card__badges > .wapu-wc-product-tag--archive,
.wapu-product-card > .wapu-product-card__badges > .wapu-product-card__wholesale-badge,
.wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges,
.wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges > * {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  max-width: 100%;
}

.wapu-product-card > .wapu-product-card__badges > .wa-product-card__badges {
  display: contents !important;
}

.wapu-product-card > .wapu-product-card__badges .wa-badge__label,
.wapu-product-card > .wapu-product-card__badges .wapu-kit-badge__text,
.wapu-product-card > .wapu-product-card__badges .wapu-wc-product-tag__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 37.5rem) {
  .wapu-product-card > .wapu-product-card__badges {
    top: .5rem;
    left: .5rem;
    right: .5rem;
    gap: .3125rem;
  }
}

/* 7.7.39 · ProductCard media + availability contract */
.wapu-product-card__img-link {
  padding: 0;
}

.wapu-product-card__img-wrap,
.wapu-product-card__img-wrap img,
.wapu-product-card__img {
  width: 100%;
  height: 100%;
}

.wapu-product-card__img-wrap img,
.wapu-product-card__img,
.wapu-product-card__media.has-gallery-hover .wapu-product-card__img--hover,
.wapu-sw__img {
  object-fit: cover;
  object-position: center;
}

/* Legacy fallback for extension-injected availability badges. ProductCard core no longer uses this slot. */
.wapu-product-card > .wapu-product-card__badges > .wa-badge--availability {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0 .625rem;
  border-radius: var(--wtds-r-pill);
  background: var(--wtds-primary);
  color: var(--wtds-primary-ink);
  font-family: var(--wtds-font-text);
  font-size: var(--wtds-fs-caption-2);
  font-weight: var(--wtds-fw-semibold);
  letter-spacing: .06em;
  line-height: 1;
}

.wapu-product-card > .wapu-product-card__badges > .wa-badge--availability-on_demand {
  background: var(--wtds-warning);
  color: var(--wtds-warning-ink);
}

.wapu-product-card > .wapu-product-card__badges > .wa-badge--availability-preorder {
  background: var(--wtds-info);
  color: var(--wtds-info-ink);
}

@media (max-width: 48rem), (hover: none) {
  /* Mobile card is navigational only: no add-to-cart overlay. */
  .wapu-product-card .wapu-product-card__cta {
    display: none !important;
  }

  /* Keep only the canonical thumbnail; gallery-hover stays desktop-only. */
  .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--hover {
    display: none !important;
    opacity: 0 !important;
  }

  .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--featured,
  .wapu-product-card:hover .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--featured,
  .wapu-product-card:focus-within .wapu-product-card__media.has-gallery-hover .wapu-product-card__img--featured {
    opacity: 1 !important;
    transform: none !important;
  }

  .wapu-product-card:hover .wapu-product-card__media img,
  .wapu-product-card:hover .wapu-product-card__img,
  .wapu-product-card:hover .wapu-product-card__img-wrap img {
    transform: none;
  }
}

/* 7.7.40 · Card navigation + sold-out media treatment */
.wapu-product-card.is-out-of-stock .wapu-product-card__media,
.wapu-product-card.is-out-of-stock:hover .wapu-product-card__media {
  filter: none !important;
  opacity: 1 !important;
}

.wapu-product-card.is-out-of-stock .wapu-product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--wtds-ink) 60%, transparent);
  pointer-events: none;
}

.wapu-product-card.is-out-of-stock .wapu-product-card__img-wrap img,
.wapu-product-card.is-out-of-stock .wapu-product-card__img {
  filter: grayscale(100%);
  opacity: 1;
}

.wapu-product-card.is-out-of-stock .wapu-stock-overlay {
  z-index: 3;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wtds-on-image, var(--wtds-surface));
  font-family: var(--wtds-font-text);
  font-size: var(--wtds-fs-footnote);
  font-weight: var(--wtds-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ProductCard is a navigation surface; variants never render inside the card. */
.wapu-product-card .wapu-sw-row {
  display: none !important;
}

/* 7.7.52 · Sold-out is a media state, never a standalone badge. */
.wapu-product-card.is-out-of-stock .wapu-product-card__media::after {
  display: none;
  content: none;
}

.wapu-product-card.is-out-of-stock .wapu-product-card__img-wrap img,
.wapu-product-card.is-out-of-stock .wapu-product-card__img,
.wapu-product-card.is-out-of-stock .wapu-sw__img {
  filter: grayscale(100%);
  opacity: 1;
}

.wapu-product-card.is-out-of-stock .wapu-stock-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wtds-s-2);
  background: transparent;
  color: var(--wtds-on-image, var(--wtds-surface));
  text-shadow: 0 .0625rem .25rem var(--wtds-shadow-color-strong);
  pointer-events: none;
}
