/* Haven product rail card (Home.dc.html "Pieces of the season"): 4-up grid, 22px gap,
   4/5 media, badge top-left, name 16.5px Libre Caslon + muted 13.5px price. */

.hvn-product-rail {
  display: grid;
  /* minmax(0,1fr): the image helper styles .product-image-container to the role width (480px), which a bare 1fr cannot shrink below. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hvn-product-card { display: flex; flex-direction: column; gap: 12px; position: relative; }
/* Wrapper positions the Quick View trigger over the media (a button cannot sit inside the <a>). */
.hvn-product-card-media { position: relative; }
.hvn-product-card-media-link { position: relative; display: block; text-decoration: none; }
.hvn-product-card .product-image-container,
.hvn-product-card .product-image-wrapper { width: 100% !important; max-width: 100%; }
.hvn-product-card-media-link img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
/* Wrapper carries the position so New + Sale stack. */
.hvn-product-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2; /* Luma .product-image-wrapper is z-index 1 */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hvn-product-badge {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--hvn-surface);
  color: var(--hvn-text);
  padding: 6px 12px;
  border: 1px solid var(--hvn-border);
}
.hvn-product-card-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.hvn-product-card-name {
  font-family: var(--hvn-font-display);
  font-size: 16.5px;
  color: var(--hvn-text);
  text-decoration: none;
}
.hvn-product-card-info .price {
  font-size: 13.5px;
  color: var(--hvn-text-subtle);
}
.hvn-product-card-actions { margin-top: auto; padding-top: 2px; }
.hvn-product-unavailable {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--hvn-text-subtle);
}
/* T14 entry: a text link under Add to Cart, posted by mage/dataPost; always visible (not a hover control). */
.hvn-product-card-compare {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--hvn-text-subtle);
  text-decoration: none;
}
.hvn-product-card-compare:hover { color: var(--hvn-text); text-decoration: underline; }

/* Tall tile (T4: the second card spans two rows). The media link takes the height the grid gives the
   card and the image fills it, so the tile ends flush with the row below whatever the row height is. */
.hvn-product-card--tall { grid-row: span 2; }
.hvn-product-card--tall .hvn-product-card-media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hvn-product-card--tall .hvn-product-card-media-link {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
}
.hvn-product-card--tall .product-image-container,
.hvn-product-card--tall .product-image-wrapper {
  position: static;
  display: block;
  height: 100%;
  aspect-ratio: auto;
}
.hvn-product-card--tall .hvn-product-card-media-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* T13 trigger: each state is (0,2,0) to beat Blank's button:hover/:focus/:active (0,1,1); the focus ring is _base.css's. */
.hvn-qv-trigger {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  min-height: 40px;
  padding: 10px 18px;
  font-family: var(--hvn-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--hvn-surface);
  color: var(--hvn-text);
  border: 1px solid var(--hvn-border-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.hvn-qv-trigger:hover,
.hvn-qv-trigger:focus,
.hvn-qv-trigger:active {
  background: var(--hvn-accent-tint);
  color: var(--hvn-text);
  border: 1px solid var(--hvn-text);
}
@media (min-width: 1024px) and (hover: hover) {
  .hvn-qv-trigger { opacity: 0; }
  .hvn-product-card:hover .hvn-qv-trigger,
  .hvn-product-card:focus-within .hvn-qv-trigger { opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hvn-product-card-compare { min-height: 44px; margin-top: 2px; }
}
@media (max-width: 767px) {
  .hvn-qv-trigger { min-height: 44px; padding: 12px 16px; bottom: 10px; }
  .hvn-product-card-compare { min-height: 44px; margin-top: 2px; }
}

@media (max-width: 1023px) {
  .hvn-product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 767px) {
  .hvn-product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hvn-product-card-name { font-size: 15px; }
}