/* 
 * File: web/themes/custom/websdt_theme_master/components/commerce/ui/product-card/product-card.css
 * Logic: Product Card styling aligned with Theme Design Tokens (09.cards.css).
 */

.wsdt-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-bg);
  box-shadow: var(--shadow-card-idle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: transform var(--transition-base), 
              box-shadow var(--transition-base), 
              border-bottom-color var(--transition-base);
  border-bottom: var(--border-width-heavy) solid var(--color-secondary);
}

.wsdt-product-card:hover {
  transform: translateY(var(--interaction-lift-card));
  box-shadow: var(--shadow-strong);
  border-bottom-color: var(--text-title);
}

.wsdt-product-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--bg-gray-lighter);
  border-bottom: var(--border-width-sm) solid var(--border-subtle);
  display: flex;
}

/* Badge (Προσφορά) Styling */
.wsdt-badge--sale {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 5;
  background-color: var(--color-error); /* Χρησιμοποιούμε το κόκκινο του error (συνήθως #dc3545) για έμφαση, ή το main-color αν προτιμάτε */
  color: var(--text-on-dark);
  padding: calc(var(--space-xs) * 0.5) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-sm);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  pointer-events: none; /* Δεν θέλουμε να μπλοκάρει το κλικ στην εικόνα */
}

.wsdt-product-card__image a {
  display: block;
  flex: 1 1 auto;
}

.wsdt-product-card__image img,
.wsdt-product-card__image picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.wsdt-product-card:hover .wsdt-product-card__image img {
  transform: scale(1.05);
}

.wsdt-product-card__content {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: linear-gradient(
    to bottom,
    var(--surface-bg),
    var(--bg-gray-lighter)
  );
}

.wsdt-product-card__title {
  margin: 0 0 var(--space-sm) 0;
  min-height: 2.6em; /* Ensure 2 lines alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wsdt-product-card__title a {
  text-decoration: none;
  font-weight: var(--h-font-weight);
  font-size: var(--font-size-base);
  color: var(--text-title);
  transition: color var(--transition-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wsdt-product-card__title a > * {
  display: inline;
}

.wsdt-product-card:hover .wsdt-product-card__title a {
  color: var(--color-secondary);
}

.wsdt-product-card__price-block {
  margin-top: auto;
  margin-bottom: var(--space-md);
  text-align: center;
}

.wsdt-product-card__list-price {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-main);
  opacity: 0.6;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.wsdt-product-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-xs);
}

.wsdt-product-card__price-row > * {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.wsdt-product-card__price-row .field__item {
  display: inline-block;
}

.wsdt-product-card__price {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.wsdt-product-card__price > * {
  margin: 0;
}

.wsdt-product-card__tax-label {
  font-size: 0.7em;
  color: var(--text-body);
  opacity: 0.8;
}

.wsdt-product-card__actions {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wsdt-product-card__link {
  flex: 1;
  text-align: center;
}

.wsdt-product-card__wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size-square);
  height: var(--btn-size-square);
  border-radius: var(--radius-circle);
  background-color: var(--bg-gray-lighter);
  color: var(--text-main);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.wsdt-product-card__wishlist-btn:hover {
  background-color: var(--color-primary-light);
  color: var(--color-secondary);
}

.wsdt-product-card__wishlist-btn svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Out of stock state */
.wsdt-product-card--out-of-stock {
  opacity: 0.8;
}

.wsdt-product-card--out-of-stock .wsdt-product-card__image {
  filter: grayscale(0.5);
}