/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.card {
  position: relative;
  background: var(--alpha-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-default),
              box-shadow var(--dur-base) var(--ease-default);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
}

.card__media {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--alpha-cream);
  overflow: hidden;
}

.card__quick {
  position: absolute;
  top: var(--sp-sm); right: var(--sp-sm);
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: all var(--dur-base) var(--ease-default);
  color: var(--alpha-navy);
}
.card:hover .card__quick { opacity: 1; transform: translateY(0); }
.card__quick:hover { background: var(--alpha-gold); transform: scale(1.1); }

.card__badge {
  position: absolute;
  top: var(--sp-sm); left: var(--sp-sm);
  z-index: 3;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--alpha-gold);
  color: var(--alpha-navy);
  border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(245, 197, 24, 0.4);
}
.card__badge--new { background: var(--alpha-navy); color: var(--alpha-white); box-shadow: 0 4px 12px rgba(11, 31, 58, 0.4); }

/* Mock visual del producto */
.card__mock {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform var(--dur-slow) var(--ease-default);
  background-size: cover;
  background-position: center;
}
.card:hover .card__mock { transform: scale(1.06); }

/* Variante con foto real del producto */
.card__mock--photo {
  background: var(--alpha-cream);
  overflow: hidden;
}
.card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-slow) var(--ease-default);
}
.card:hover .card__photo { transform: scale(1.05); }
.card__mock--photo + .card__add { z-index: 5; }

.card__mock-shape {
  width: 65%;
  aspect-ratio: 3/4;
  position: relative;
  filter: drop-shadow(0 12px 24px rgba(11, 31, 58, 0.18));
  display: grid;
  place-items: center;
  transition: transform var(--dur-slow) var(--ease-default);
}
.card:hover .card__mock-shape { transform: rotate(-2deg) scale(1.04); }

/* Forma: hoodie / sweatshirt */
.card__mock-shape--hoodie {
  clip-path: polygon(15% 8%, 35% 0%, 65% 0%, 85% 8%, 100% 22%, 92% 35%, 92% 100%, 8% 100%, 8% 35%, 0% 22%);
}
/* Forma: tee / jersey */
.card__mock-shape--tee {
  clip-path: polygon(20% 0, 35% 5%, 50% 12%, 65% 5%, 80% 0, 100% 15%, 90% 25%, 90% 100%, 10% 100%, 10% 25%, 0 15%);
}
/* Forma: long sleeve */
.card__mock-shape--long {
  clip-path: polygon(20% 0, 35% 5%, 50% 12%, 65% 5%, 80% 0, 100% 12%, 95% 80%, 88% 80%, 88% 25%, 88% 100%, 12% 100%, 12% 25%, 12% 80%, 5% 80%, 0 12%);
}
/* Forma: sport bra */
.card__mock-shape--bra {
  clip-path: polygon(0 30%, 50% 30%, 100% 30%, 100% 100%, 0 100%);
  border-radius: 12px 12px 50% 50% / 12px 12px 30% 30%;
}
/* Forma: shorts / leggings */
.card__mock-shape--shorts {
  clip-path: polygon(15% 0, 85% 0, 90% 50%, 80% 100%, 55% 100%, 50% 50%, 45% 100%, 20% 100%, 10% 50%);
}
.card__mock-shape--leggings {
  clip-path: polygon(20% 0, 80% 0, 85% 50%, 75% 100%, 55% 100%, 50% 50%, 45% 100%, 25% 100%, 15% 50%);
}
/* Forma: bottle */
.card__mock-shape--bottle {
  width: 30%;
  clip-path: polygon(35% 0, 65% 0, 65% 8%, 70% 12%, 70% 100%, 30% 100%, 30% 12%, 35% 8%);
}
/* Forma: cap */
.card__mock-shape--cap {
  clip-path: polygon(20% 50%, 30% 35%, 50% 25%, 70% 35%, 80% 50%, 100% 60%, 100% 70%, 10% 70%, 0 60%);
}

.card__mock-shape::before {
  content: attr(data-monogram);
  font-family: var(--font-display);
  font-size: 3.5rem;
  letter-spacing: 0.05em;
  color: var(--mock-mono, var(--alpha-gold));
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform var(--dur-slow) var(--ease-default);
}
.card:hover .card__mock-shape::before { transform: scale(1.1) rotate(5deg); }

/* Body */
.card__body {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  flex-grow: 1;
}
.card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--alpha-charcoal);
  line-height: 1.3;
}
.card__sub {
  font-size: var(--text-xs);
  color: var(--alpha-graphite);
  line-height: 1.4;
}
.card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.card__price {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--alpha-navy);
}
.card__price--sale { color: var(--color-error); }
.card__price-old {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--alpha-graphite);
  text-decoration: line-through;
  margin-right: 4px;
}

/* Swatches */
.card__swatches {
  display: flex;
  gap: 6px;
  align-items: center;
}
.swatch {
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-default), border-color var(--dur-base) var(--ease-default);
  position: relative;
}
.swatch:hover { transform: scale(1.2); }
.swatch.is-selected {
  border-color: var(--alpha-navy);
  transform: scale(1.15);
}
.swatch.is-selected::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--alpha-navy);
  border-radius: var(--r-full);
}
.swatch-extra {
  font-size: 10px;
  color: var(--alpha-graphite);
  font-weight: 600;
  margin-left: 4px;
}

/* Product CTA fly-in */
.card__add {
  position: absolute;
  bottom: var(--sp-md);
  left: var(--sp-md);
  right: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--alpha-navy);
  color: var(--alpha-white);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateY(calc(100% + var(--sp-md)));
  opacity: 0;
  transition: all var(--dur-base) var(--ease-default);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
}
.card:hover .card__add,
.card:focus-within .card__add {
  transform: translateY(0);
  opacity: 1;
}
.card__add:hover { background: var(--alpha-gold); color: var(--alpha-navy); }
.card__add.is-added { background: var(--color-success); }

@media (hover: none), (pointer: coarse) {
  .card__add {
    transform: translateY(0);
    opacity: 1;
  }
}