/* Ecom Kraken Edition -- the shared product card (ek_card.php). Agent 3 lane, prefix ekc-.
   Loaded on every Kraken view by ekShellStart(). Colours, radii, shadows and type come from the
   ek-core.css tokens; only layout numbers live here. */

.ekc {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--ek-surface);
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-r);
  box-shadow: var(--ek-shadow-1);
  container-type: inline-size;
  transition: box-shadow var(--ek-dur) var(--ek-ease), border-color var(--ek-dur) var(--ek-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ekc:hover { box-shadow: var(--ek-shadow-2); border-color: var(--ek-line-strong); }
  .ekc:hover .ekc__img { transform: scale(1.03); }
}

/* Image well: a stable square, the packshot contained (never cropped), a neutral backdrop. */
.ekc__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 7%;
  overflow: hidden;
  background: var(--ek-well);
  border-radius: calc(var(--ek-r) - 1px) calc(var(--ek-r) - 1px) 0 0;
}
.ekc__img,
.ekc__ph { grid-area: 1 / 1; }
.ekc__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;          /* white packshot backgrounds melt into the well */
  transition: transform calc(var(--ek-dur) * 1.5) var(--ek-ease);
}
.ekc__ph {
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--ek-surface);
  border: 1px solid var(--ek-line);
  color: var(--ek-muted);
  font-size: clamp(18px, 9cqi, 30px);
  font-weight: 700;
  letter-spacing: .04em;
}
.ekc__media:has(.ekc__img) .ekc__ph { display: none; }
.ekc__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* Text */
.ekc__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  padding: 14px 16px 0;
  min-width: 0;
}
.ekc__brand {
  margin: 0;
  color: var(--ek-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.ekc__name {
  margin: 0;
  font-size: var(--ek-fs-base);
  font-weight: 650;
  line-height: 1.3;
  color: var(--ek-ink);
  overflow-wrap: anywhere;
}
.ekc__link {
  display: block;
  min-height: 24px;          /* WCAG 2.5.8: the link's own box, not just the stretched overlay, is >= 24 px */
  padding-block: 1px;
  color: inherit;
  text-decoration: none;
}
/* The title link covers the whole card (one tab stop, one destination). The action sits above it. */
.ekc__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.ekc__link:focus-visible { outline: none; }
.ekc:has(.ekc__link:focus-visible) {
  outline: 3px solid var(--ek-focus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .ekc:hover .ekc__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.ekc__detail {
  margin: 0;
  color: var(--ek-ink-2);
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ekc__meta {
  margin: 0;
  color: var(--ek-muted);
  font-size: 14px;
}

/* Price block sits at the bottom of the text so prices line up across a row. */
.ekc__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: auto;
  padding-top: 10px;
}
.ekc__price .ek-price__now {
  color: var(--ek-ink);
  font-size: var(--ek-fs-md);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.ekc__from {
  font-size: 14px;
  font-weight: 600;
  color: var(--ek-ink-2);
}
.ekc__msrp {
  color: var(--ek-muted);
  font-size: 13px;
}
.ekc__noprice {
  color: var(--ek-ink-2);
  font-size: 15px;
  font-weight: 650;
}
.ekc__stock {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 650;
}
.ekc__stock--out { color: var(--ek-sale); }
.ekc__stock--low { color: var(--ek-warn); }
.ekc__note {
  margin: 2px 0 0;
  color: var(--ek-muted);
  font-size: 13px;
}

/* Action: above the stretched link, always visible (never hover-only). */
.ekc__actions {
  position: relative;
  z-index: 2;
  padding: 12px 16px 16px;
}
.ekc__btn {
  min-height: var(--ek-ctl);
  gap: 8px;
}
.ekc__btn-ic {
  width: 18px;
  height: 18px;
  flex: none;
}

.ekc.is-out .ekc__img { opacity: .6; }

/* Compact density: homepage rails and the related row. */
.ekc--compact .ekc__body { padding: 12px 14px 0; }
.ekc--compact .ekc__name { font-size: 15px; }
.ekc--compact .ekc__actions { padding: 10px 14px 14px; }
.ekc--compact .ekc__btn { min-height: 44px; }

/* Narrow cards (two columns on a 320-360px phone): tighter padding, the label may wrap. */
@container (max-width: 190px) {
  .ekc__body { padding: 10px 10px 0; }
  .ekc__actions { padding: 10px 10px 12px; }
  .ekc__btn { padding-left: 8px; padding-right: 8px; font-size: 14px; white-space: normal; line-height: 1.2; }
  .ekc__btn-ic { display: none; }
  .ekc__name { font-size: 15px; }
  .ekc__price .ek-price__now { font-size: 17px; }
}

/* Grid list wrapper from ekProductGrid(); the columns come from .ek-grid in ek-core.css. */
.ekc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ekc-grid__item { display: flex; min-width: 0; }
.ekc-grid__item > .ekc { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .ekc, .ekc__img { transition: none; }
  .ekc:hover .ekc__img { transform: none; }
}