/* Shared product cards for the catalogue and product detail pages. */
.product-cards .products-card {
  position: relative; /* anchors the whole-card link overlay */
  padding: 0;
  overflow: hidden;
  transition:
    border-color var(--transition-speed-normal),
    box-shadow var(--transition-speed-normal);
}

/* Hover: no border highlight — a soft shadow lifts the card instead (the
   border fades rather than disappears, so the outline never jumps).
   Keyboard focus keeps the accent border + outline as its indicator. */
.product-cards .products-card:hover {
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.product-cards .products-card:focus-within {
  border-color: var(--accent);
  outline: var(--border-width-medium) solid var(--accent);
  outline-offset: 0.2rem;
}

/* Full, uncropped photography. --card-image-ratio (3 / 2, set inline by the
   widget) keeps every image area identical: 80 of the 83 product photos are
   exactly 3:2 and fill the box, the three portrait shots letterbox instead
   of being cropped, and object-fit: contain never distorts. The neutral
   background fills the letterbox area. Local exception: overrides Arch's
   cover crop, bottom margin and rounding so the photo runs flush to the
   card edge (the card clips it into the corner radius). */
.product-cards .widget-card .products-card-image {
  display: block;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  background-color: var(--bg-secondary);
}

.product-cards .products-card-content {
  padding: calc(var(--space-md) * var(--spacing-scale));
  justify-content: space-between; /* title block at the top, CTA aligned across the row */
}

/* "Δείτε το προϊόν" link: stretches across the whole card via its ::after,
   so the card is fully clickable while the accessible name stays the
   product name (aria-label). Keyboard focus is indicated on the card itself
   (rule above), not twice on the link. No underline on hover — the card's
   soft shadow is the hover feedback. */
.product-cards .products-card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-xs);
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.product-cards .products-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-cards .products-card-cta:focus-visible {
  outline: none;
}

.product-cards .products-card-cta-icon {
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
}