/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Products Component                   ║
 * ║  Property cards grid and card layout.           ║
 * ╚══════════════════════════════════════════════════╝
 */

/* ── Product Grid ────────────────────────────────── */
.y-product-grid,
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Product Card ────────────────────────────────── */
.y-product-card,
.property-card,
.product-card {
  background: white;
  border-radius: var(--y-radius-l);
  overflow: hidden;
  border: 1px solid var(--y-color-border);
  box-shadow: var(--y-shadow-s);
  transition: all var(--y-transition-normal);
}

.y-product-card:hover,
.property-card:hover,
.product-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ── Card Image ──────────────────────────────────── */
.property-card-image,
.product-card-image {
  position: relative;
  height: 224px;
  overflow: hidden;
}

.product-card-image-link {
  display: block;
  height: 100%;
}

.property-card-image img,
.product-card-image img,
.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--y-transition-slow);
}

.property-card:hover .property-card-image img,
.product-card:hover .product-card-image img,
.product-card:hover .product-card-img {
  transform: scale(1.05);
}

/* ── Card Info ───────────────────────────────────── */
.property-card-info,
.product-card-body {
  padding: 20px;
}

.property-card-info h3,
.product-card-body .product-card-title {
  font-size: var(--y-font-l);
  font-weight: var(--y-weight-bold);
  margin-block-end: 4px;
}

.product-card-title a {
  color: inherit;
  text-decoration: none;
}

.product-card-title a:hover {
  color: var(--y-color-primary);
}

.property-location,
.product-card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--y-color-text-muted);
  font-size: var(--y-font-s);
  margin-block-end: var(--y-space-m);
}

.product-card-location {
  margin-block-start: 0;
}

.property-features,
.product-card-features {
  display: flex;
  align-items: center;
  gap: var(--y-space-m);
  margin-block-end: var(--y-space-m);
  padding-block-end: var(--y-space-m);
  border-block-end: 1px solid var(--y-color-border);
}

.property-feature,
.product-card-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--y-color-text-muted);
  font-size: var(--y-font-s);
}

.product-card-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-block-end: var(--y-space-m);
  font-size: var(--y-font-s);
}

.product-card-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--y-color-accent);
}

.product-card-rating-count {
  color: var(--y-color-text-muted);
}

/* ── Price Row ───────────────────────────────────── */
.property-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.property-price {
  color: var(--y-color-primary);
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

.property-price-unit {
  color: var(--y-color-text-muted);
  font-size: var(--y-font-s);
  margin-inline-end: 4px;
}

.property-cta {
  background: var(--y-color-primary-subtle);
  color: var(--y-color-primary);
  padding: 8px var(--y-space-m);
  border-radius: var(--y-radius-s);
  font-size: var(--y-font-s);
  transition: all var(--y-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--y-weight-semibold);
  white-space: nowrap;
}

.product-card-action {
  background: var(--y-color-primary-subtle);
  color: var(--y-color-primary);
  padding: 8px var(--y-space-m);
  border-radius: var(--y-radius-s);
  font-size: var(--y-font-s);
  transition: all var(--y-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--y-weight-semibold);
  margin-block-start: var(--y-space-m);
  width: 100%;
  box-sizing: border-box;
}

.property-cta:hover,
.product-card-action:hover {
  background: var(--y-color-primary);
  color: white;
}

.product-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-block-start: var(--y-space-m);
  margin-block-start: var(--y-space-m);
  border-block-start: 1px solid var(--y-color-border);
}

.product-card-price-current {
  color: var(--y-color-primary);
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

.product-card-price-current .woocommerce-Price-amount {
  color: inherit;
}

.product-card-price-unit {
  color: var(--y-color-text-muted);
  font-size: var(--y-font-s);
}

.product-card-price-old {
  color: var(--y-color-text-muted);
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-normal);
  margin-inline-start: auto;
}



/* ── Reviews ─────────────────────────────────────── */
.reviews-section {
  margin-block-start: var(--y-space-xxl);
}

.review-card {
  padding: 20px;
  margin-block-end: var(--y-space-m);
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--y-space-s);
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 36px;
  height: 36px;
  background: var(--y-color-primary-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--y-color-primary);
  font-weight: var(--y-weight-bold);
  font-size: var(--y-font-s);
}

.review-stars {
  display: flex;
  gap: 2px;
  margin-block-end: var(--y-space-s);
}

.review-stars svg {
  width: 14px;
  height: 14px;
  color: var(--y-color-accent);
  fill: var(--y-color-accent);
}

/* ── Star Selector (submit review) ──────────────── */
.star-selector {
  display: flex;
  gap: 4px;
}

.star-selector button svg {
  width: 28px;
  height: 28px;
  color: #d1d5db;
  transition: color var(--y-transition-fast);
}

.star-selector button svg.active {
  color: var(--y-color-accent);
  fill: var(--y-color-accent);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {
  .y-product-grid,
  .properties-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {
  .y-product-grid,
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  .y-product-grid,
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--y-space-m);
  }
  .property-features,
  .product-card-features { gap: var(--y-space-s); }
  .property-card-info,
  .product-card-body { padding: var(--y-space-m); }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  .y-product-grid,
  .properties-grid {
    grid-template-columns: 1fr;
  }
  .property-card-image,
  .product-card-image { height: 200px; }
}