/* ============================================================
   WINE CARD — shared component styles
   Used by: wines.html (grid), index.html (carousel)
   ============================================================ */

.wine-card {
  background: #fff;
  border: 1px solid #e8e3db;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.wine-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}

/* Top meta row: score badge left */
.wine-card-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px 8px;
  min-height: 36px;
  position: relative;
}
.wine-card-score-badge {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 4px;
}
.wine-card-score-badge .score-star { font-size: 0.65rem; }

/* Producer name — above image, centred, gold */
.wine-card-producer {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  padding: 0 14px 10px;
}

/* Image zone — pure white, generous breathing room */
.wine-card-img-wrap {
  position: relative;
  background: #fff;
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  padding-top: 18px;
  padding-bottom: 10px;
}
.wine-card-img-wrap img {
  height: 220px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(var(--wine-card-image-offset-y, 0px)) scale(var(--wine-card-image-scale, 1));
  transform-origin: center bottom;
  transition: transform 0.35s ease;
}
.wine-card:hover .wine-card-img-wrap img {
  transform: translateY(var(--wine-card-image-offset-y, 0px)) scale(var(--wine-card-image-hover-scale, 1.03));
}
.wine-card-img-wrap.has-no-image img { opacity: 0.18; }

/* Card body */
.wine-card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

/* Wine name — uppercase sans */
.wine-card-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 4px;
}

/* Vintage on its own line */
.wine-card-vintage-line {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

/* Single price */
.wine-card-price {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 18px;
}

/* Full-width outline button */
.wine-card-more-info {
  display: block;
  width: 100%;
  padding: 13px 12px;
  margin-top: auto;
  background: transparent;
  border: 1px solid var(--text);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.wine-card-more-info:hover,
.wine-card:hover .wine-card-more-info {
  background: var(--text);
  color: #fff;
}
.wine-card-more-info:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wine-card-more-info:active { opacity: 0.8; }

/* Sale badge — top-right of card */
.wine-card-sale-badge {
  position: absolute;
  right: 14px;
  top: 10px;
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: #b04040;
  padding: 3px 7px;
  line-height: 1;
}

/* Sale price row */
.wine-card-price--sale {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}
.wine-card-sale-price {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: #b04040;
}
.wine-card-compare-price {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text);
  opacity: 0.45;
  text-decoration: line-through;
}

/* Carousel context — fixed width so cards don't stretch */
.product-carousel .wine-card {
  flex: 0 0 248px;
  scroll-snap-align: start;
}
.product-carousel .wine-card-img-wrap {
  height: 228px;
  padding-top: 22px;
  padding-bottom: 8px;
}
.product-carousel .wine-card-img-wrap img {
  height: 182px;
}