/**
 * WTDS — Canonical ProductCard presentation.
 *
 * Playground owns ProductCard anatomy + state. Theme/WTDS paints the single
 * canonical card. Presets are configuration seeds only and never CSS variants.
 */

.wapu-product-card[data-product-view-template="custom"] {
  --wapu-product-card-gap: var(--wtds-s-2, .75rem);
  position: relative;
  box-sizing: border-box;
  gap: var(--wapu-product-card-gap);
  color: var(--wtds-ink);
  background: transparent !important;
  box-shadow: none !important;
  transition: none;
}

.wapu-product-card[data-product-view-template="custom"] *,
.wapu-product-card[data-product-view-template="custom"] *::before,
.wapu-product-card[data-product-view-template="custom"] *::after {
  box-sizing: border-box;
}

/* One appearance contract: neutral border or no border. */
.wapu-product-card[data-product-view-template="custom"][data-product-view-border="on"] {
  padding: var(--wtds-s-2, .75rem) !important;
  border: var(--wtds-border-thin, 1px) solid var(--wtds-separator-soft) !important;
  border-radius: var(--wapu-product-view-radius, var(--wtds-r-md, 12px)) !important;
  background: var(--wtds-surface) !important;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-border="off"] {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Media is always full-bleed and always cover. */
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--wapu-product-view-radius, var(--wtds-r-md, 12px));
  background: transparent;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-aspect="portrait"] .wapu-product-card__media {
  aspect-ratio: 4 / 5;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-aspect="tall"] .wapu-product-card__media {
  aspect-ratio: 3 / 4;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-media-background="soft"] .wapu-product-card__media {
  background: var(--wtds-fill-2, var(--wtds-surface-2));
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-media-background="transparent"] .wapu-product-card__media {
  background: transparent;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__img-link,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__img-wrap {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__img-wrap img,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__img,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__img--featured,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__img--hover {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  transform: none !important;
  box-shadow: none !important;
  transition: opacity var(--wtds-motion-normal, .2s) var(--wtds-motion-easing-out, ease) !important;
}

.wapu-product-card[data-product-view-template="custom"]:hover .wapu-product-card__media,
.wapu-product-card[data-product-view-template="custom"]:focus-within .wapu-product-card__media {
  transform: none !important;
  box-shadow: none !important;
}

.wapu-product-card[data-product-view-template="custom"]:hover .wapu-product-card__media img,
.wapu-product-card[data-product-view-template="custom"]:hover .wapu-product-card__img,
.wapu-product-card[data-product-view-template="custom"]:hover .wapu-product-card__img-wrap img {
  transform: none !important;
}

/* Content is one ordered slot stack. */
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__info {
  width: 100%;
  min-width: 0;
  padding: 0;
  gap: var(--wtds-s-1, .5rem);
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__brand,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__name-link,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__desc,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__price-wrap,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__swatches-slot {
  max-width: 100%;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__brand {
  margin: 0;
  font-size: var(--wtds-fs-caption-2, .68rem);
  font-weight: var(--wtds-fw-semibold, 600);
  letter-spacing: var(--wtds-ls-wide, .12em);
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__name {
  margin: 0;
  font-size: var(--wtds-fs-body, 1rem);
  font-weight: var(--wtds-fw-semibold, 600);
  line-height: var(--wtds-lh-snug, 1.3);
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__desc {
  margin: 0;
  font-size: var(--wtds-fs-footnote, .8125rem);
  line-height: var(--wtds-lh-base, 1.45);
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__price-wrap {
  margin-top: 0;
  min-height: 0;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__info {
  align-items: flex-start;
  text-align: left;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__brand,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__name-link,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__name,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__desc {
  text-align: left;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__price-wrap,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__swatches-slot,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-sw-row,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="left"] .wapu-product-card__actions {
  justify-content: flex-start;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__info {
  align-items: center;
  text-align: center;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__brand,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__name-link,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__name,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__desc {
  width: 100%;
  text-align: center;
}

.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__price-wrap,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__swatches-slot,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-sw-row,
.wapu-product-card[data-product-view-template="custom"][data-product-view-alignment="center"] .wapu-product-card__actions {
  justify-content: center;
}

/* The old media CTA is not part of the configurable card composer. */
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__media > .wapu-product-card__cta,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__media .wapu-product-card__cta {
  display: none !important;
}

/* Action slot: none is no markup; button and quick-actions share this anatomy. */
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__actions {
  width: 100%;
  margin-top: var(--wtds-s-1, .5rem);
  display: flex;
  align-items: center;
  gap: var(--wtds-s-1, .5rem);
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__actions--button {
  display: block;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-cta {
  min-height: var(--wtds-control-min, 2.625rem);
  width: 100%;
  padding: var(--wtds-s-1, .5rem) var(--wtds-s-2, .75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wtds-s-1, .5rem);
  border: 0;
  border-radius: max(var(--wtds-r-xs, .5rem), calc(var(--wapu-product-view-radius, 12px) - .125rem));
  background: var(--wtds-action, var(--wtds-ink));
  color: var(--wtds-action-ink, var(--wtds-surface));
  box-shadow: none !important;
  text-decoration: none;
  font-family: var(--wtds-font-text, sans-serif);
  font-size: var(--wtds-fs-caption-1, .78rem);
  font-weight: var(--wtds-fw-bold, 700);
  line-height: 1;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-cta:hover {
  opacity: .88;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-button {
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 2.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--wtds-border-thin, 1px) solid var(--wtds-separator-soft);
  border-radius: var(--wtds-r-pill, 999px);
  background: var(--wtds-ink);
  color: var(--wtds-surface);
  box-shadow: none !important;
  text-decoration: none;
  font: var(--wtds-fw-bold, 700) 1.125rem/1 var(--wtds-font-text, sans-serif);
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-button:hover {
  opacity: .82;
}

.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-button:focus-visible,
.wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-cta:focus-visible {
  outline: 2px solid var(--wtds-focus-ring-color, currentColor);
  outline-offset: 2px;
  box-shadow: none !important;
}

.wapu-product-card[data-product-view-template="custom"] > .wapu-product-card__badges {
  z-index: var(--wtds-layer-raised, 5);
}

@media (max-width: 48rem) {
  .wapu-product-card[data-product-view-template="custom"][data-product-view-border="on"] {
    padding: var(--wtds-s-1, .5rem) !important;
  }
  .wapu-product-card[data-product-view-template="custom"] .wapu-product-card__action-button {
    width: 2.375rem;
    height: 2.375rem;
    flex-basis: 2.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wapu-product-card[data-product-view-template="custom"] *,
  .wapu-product-card[data-product-view-template="custom"] *::before,
  .wapu-product-card[data-product-view-template="custom"] *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mixed-version selector aliases kept for the ProductCard boundary contract.
 * Current Playground always publishes transparent surface + custom template. */
.wapu-product-card[data-product-view-template] .wapu-product-card__media {
  box-shadow: none !important;
}
.wapu-product-card[data-product-view-surface="soft"] {
  background: var(--wtds-fill-2, var(--wtds-surface-2)) !important;
}