/**
 * Cards & Product Card
 */

.v-card {
  display: flex;
  flex-direction: column;
  background: var(--v-color-surface);
  border: 1px solid var(--v-color-border-subtle);
  border-radius: var(--v-radius-card);
  overflow: hidden;
}

.v-card--flush {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.v-card__media {
  position: relative;
  overflow: hidden;
  background: var(--v-color-surface-sunken);
}

.v-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--v-space-2);
  padding: var(--v-space-5);
}

.v-card__footer {
  margin-top: auto;
  padding: 0 var(--v-space-5) var(--v-space-5);
}

/* ==========================================================================
   Product card — luxury editorial (Toteme / COS / Zara / Massimo Dutti)
   No outer border, shadow, background box, or rounded corners.
   Selectors are intentionally specific so section overrides cannot hide
   the reusable foundation (wishlist, quick add, typography, price).
   ========================================================================== */

.v-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* --- Media: locked 4:5 editorial frame ----------------------------------- */

.v-product-card > .v-product-card__media,
article.v-product-card > .v-product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--v-color-paper-warm);
  aspect-ratio: var(--v-product-card-ratio, 4 / 5);
}

.v-product-card > .v-product-card__media > .v-product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-decoration: none;
  color: inherit;
}

.v-product-card > .v-product-card__media > .v-product-card__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--v-color-ink);
}

.v-product-card .v-product-card__imgs {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.v-product-card .v-product-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.v-product-card .v-product-card__img--primary {
  position: relative;
  z-index: 0;
  transition:
    opacity var(--v-duration-slow) var(--v-ease-standard),
    transform var(--v-duration-slower) var(--v-ease-emphasized);
}

.v-product-card .v-product-card__img--secondary {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--v-duration-slow) var(--v-ease-standard);
}

/* Hover: soft zoom, or crossfade when gallery image exists */
@media (hover: hover) and (pointer: fine) {
  .v-product-card:hover .v-product-card__img--primary,
  .v-product-card:focus-within .v-product-card__img--primary {
    transform: scale(1.03);
  }

  .v-product-card--has-hover-image:hover .v-product-card__img--primary,
  .v-product-card--has-hover-image:focus-within .v-product-card__img--primary {
    opacity: 0;
    transform: none;
  }

  .v-product-card--has-hover-image:hover .v-product-card__img--secondary,
  .v-product-card--has-hover-image:focus-within .v-product-card__img--secondary {
    opacity: 1;
  }
}

/* Kill legacy generic img hover from older card rules */
.v-product-card:hover > .v-product-card__media img,
.v-product-card:focus-within > .v-product-card__media img {
  /* Specific primary/secondary rules above own the motion */
}

/* --- Badges: upper left, sharp fashion chips ----------------------------- */

.v-product-card > .v-product-card__media > .v-product-card__badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  pointer-events: none;
}

.v-product-card > .v-product-card__media > .v-product-card__badges .v-badge {
  border-radius: 0;
  min-height: 1.25rem;
  padding: 0 0.45rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  font-weight: var(--v-font-weight-semibold);
  box-shadow: none;
}

/* --- Wishlist: upper right, always quietly visible ----------------------- */

.v-product-card > .v-product-card__media > .v-product-card__wishlist {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--v-color-ink);
  cursor: pointer;
  opacity: 0.78;
  transition:
    opacity var(--v-duration-fast) var(--v-ease-standard),
    background-color var(--v-duration-fast) var(--v-ease-standard),
    color var(--v-duration-fast) var(--v-ease-standard);
}

.v-product-card > .v-product-card__media > .v-product-card__wishlist:hover,
.v-product-card > .v-product-card__media > .v-product-card__wishlist:focus-visible {
  opacity: 1;
  background: rgba(247, 245, 240, 0.82);
  color: var(--v-color-ink);
  outline: none;
}

.v-product-card > .v-product-card__media > .v-product-card__wishlist:focus-visible {
  box-shadow: var(--v-shadow-focus);
}

/* --- Quick Add: full-width bottom bar ------------------------------------ */

.v-product-card > .v-product-card__media > .v-product-card__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(0.35rem);
  pointer-events: none;
  transition:
    opacity var(--v-duration-normal) var(--v-ease-standard),
    transform var(--v-duration-normal) var(--v-ease-standard);
}

.v-product-card:hover > .v-product-card__media > .v-product-card__actions,
.v-product-card:focus-within > .v-product-card__media > .v-product-card__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Touch: Quick Add always available — no hover dependence */
@media (hover: none), (pointer: coarse) {
  .v-product-card > .v-product-card__media > .v-product-card__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .v-product-card > .v-product-card__media > .v-product-card__wishlist {
    opacity: 0.9;
    background: rgba(247, 245, 240, 0.72);
  }
}

.v-product-card .v-product-card__quick-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0;
  background: rgba(247, 245, 240, 0.96);
  color: var(--v-color-ink);
  font-family: var(--v-font-body);
  font-size: 0.6875rem;
  font-weight: var(--v-font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--v-duration-fast) var(--v-ease-standard),
    color var(--v-duration-fast) var(--v-ease-standard),
    letter-spacing var(--v-duration-fast) var(--v-ease-standard);
}

.v-product-card .v-product-card__quick-add:hover,
.v-product-card .v-product-card__quick-add:focus-visible {
  background: #ffffff;
  color: var(--v-color-ink);
  text-decoration: none;
  letter-spacing: 0.2em;
  outline: none;
}

.v-product-card .v-product-card__quick-add:focus-visible {
  box-shadow: var(--v-shadow-focus);
}

/* --- Body: title, price hierarchy, swatches ------------------------------ */

.v-product-card > .v-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0.85rem 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.v-product-card .v-product-card__vendor {
  font-size: 0.625rem;
  letter-spacing: var(--v-letter-wider);
  text-transform: uppercase;
  color: var(--v-color-text-muted);
}

.v-product-card > .v-product-card__body > .v-product-card__title {
  margin: 0;
  font-family: var(--v-font-body);
  font-size: 0.8125rem; /* 13px — Zara / Reformation register */
  font-weight: var(--v-font-weight-regular);
  line-height: 1.35;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v-color-ink);
}

.v-product-card > .v-product-card__body > .v-product-card__title a {
  color: inherit;
  text-decoration: none;
}

.v-product-card > .v-product-card__body > .v-product-card__title a:hover {
  color: var(--v-color-ink-soft);
}

.v-product-card > .v-product-card__body > .v-product-card__title a:focus-visible {
  outline: none;
  box-shadow: var(--v-shadow-focus);
}

/* Price hierarchy: muted regular; sale in danger; compare struck through */
.v-product-card > .v-product-card__body > .v-product-card__meta,
.v-product-card > .v-product-card__body > .v-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.1rem 0 0;
  font-family: var(--v-font-body);
  font-size: 0.8125rem;
  font-weight: var(--v-font-weight-regular);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--v-color-ink-muted);
  line-height: 1.3;
}

.v-product-card > .v-product-card__body > .v-product-card__meta del,
.v-product-card > .v-product-card__body > .v-product-card__meta .price del {
  color: var(--v-color-ink-muted);
  opacity: 0.65;
  text-decoration: line-through;
  font-weight: var(--v-font-weight-regular);
}

.v-product-card > .v-product-card__body > .v-product-card__meta ins,
.v-product-card > .v-product-card__body > .v-product-card__meta .price ins {
  text-decoration: none;
  color: var(--v-color-danger);
  font-weight: var(--v-font-weight-medium);
}

.v-product-card .v-product-card__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

.v-product-card .v-product-card__swatch {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid rgba(18, 20, 18, 0.16);
  background: var(--v-color-paper-warm);
}

.v-product-card .v-product-card__swatch--muted {
  background: repeating-linear-gradient(
    -45deg,
    #e8e4dc,
    #e8e4dc 2px,
    #f7f5f0 2px,
    #f7f5f0 4px
  );
}

.v-product-card--sold-out .v-product-card__img--primary {
  opacity: 0.68;
}

@media (prefers-reduced-motion: reduce) {
  .v-product-card .v-product-card__img,
  .v-product-card > .v-product-card__media > .v-product-card__actions,
  .v-product-card > .v-product-card__media > .v-product-card__wishlist {
    transition: none !important;
  }

  .v-product-card:hover .v-product-card__img--primary,
  .v-product-card:focus-within .v-product-card__img--primary {
    transform: none;
  }
}