/* Product card (grid), its action row, collection count box, price-level and stock meters, badges and price tags */

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ink); /* cards also sit on the dark band */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* White image area: the grey page frames the whole card; a hairline separates it from the title */
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.card__image { position: absolute; inset: 16px 16px 14px; display: block; }
.card__image img { width: 100%; height: 100%; object-fit: contain; }
.card--unavailable .card__image img { filter: grayscale(1); opacity: 0.7; }

.card__media .badge { position: absolute; top: 10px; left: 10px; }

.card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }

.card__meta {
  display: flex;
  gap: 6px;
  height: 16px;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
  white-space: nowrap;
}

.card__meta > span { flex-shrink: 0; }
.card__meta > .card__theme { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }

.card__title {
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.card__price { display: flex; flex-direction: column; gap: 4px; }

.card__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  overflow: hidden;
  white-space: nowrap;
}

.card__amount {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.card__rrp {
  height: 20px;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card__rrp-old { text-decoration: line-through; }

/* Instead of the recommended price when the card shows one shop's price */
.card__at {
  height: 20px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card__at--best { font-weight: 700; color: var(--green); }

/* Price tags next to the price */
.tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1.5px solid var(--cta);
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.tag--discount { background: var(--cta); color: #fff; }
.tag--flag { background: var(--surface); color: var(--cta); }
/* Hero and product page size */
.tag--lg { height: 26px; padding: 0 8px; border-radius: 7px; font-size: 15px; }

/* Badges on the image */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.badge--new { background: var(--ink); color: #fff; }
.badge--drop { background: var(--green-tint); color: var(--green); }
.badge--retiring { background: var(--amber-tint); color: var(--amber); }
.badge--retired { background: var(--line); color: var(--ink-2); }
.badge--exclusive { background: var(--red-tint); color: var(--cta); }

/* On the product page's big image */
.badge--lg { padding: 6px 12px; font-size: 13px; letter-spacing: 0; }

/* Action row: price button plus wishlist and collection */
.card-actions { position: relative; display: flex; gap: 8px; margin-top: auto; }
.card-actions__cta { flex: 1; min-width: 0; }

.card-actions__own { gap: 3px; }
.card-actions__own-count { font-size: 13px; font-weight: 800; line-height: 1; }
.card-actions__own-count[hidden] { display: none; }
/* With two or more in the collection the brick shrinks and the count sits beside it */
.card-actions__own.has-count svg { width: 16px; height: 16px; }

.card-actions--lg .btn { min-height: 52px; border-radius: 14px; font-size: 16px; }
.card-actions--lg .btn--icon { width: 52px; }
.card-actions--lg .btn--icon svg { width: 22px; height: 22px; }

/* Collection count box: opens above the brick (below it with card-actions--below, where there's room under the buttons) */
.qty {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: 224px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  color: var(--ink);
}

.qty[hidden] { display: none; }
.card-actions--below .qty { top: calc(100% + 8px); bottom: auto; }
.qty__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qty__title { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.qty__check { display: flex; color: var(--green); }
.qty__check[hidden] { display: none; }

.qty__close {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
}

.qty__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.qty__step {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.qty__value { font-family: var(--font-display); font-size: 20px; font-weight: 800; }

.qty__done {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.qty__remove {
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cta);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Meters: price level and stock, label · bar · value; the bar takes the room the value leaves */
.meters {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 16px;
}

.meters__label { color: var(--ink-3); }

.meters__value {
  height: 16px;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meters__value--good { color: var(--green); }
.meters__value--warn { color: var(--amber); }
.meters__value--bad { color: var(--cta); }
.meters__value--none, .meters__value--neutral { color: var(--ink); }

/* Price level: green · orange · red with a marker for today's price */
.level { position: relative; display: flex; gap: 2px; height: 4px; }
.level > span:not(.level__marker) { flex: 1; }
.level > span:nth-child(1) { background: var(--lime); border-radius: 2px 0 0 2px; }
.level > span:nth-child(2) { background: var(--orange); }
.level > span:nth-child(3) { background: var(--brand); border-radius: 0 2px 2px 0; }
.level--none > span:not(.level__marker) { background: var(--empty-2) !important; }

.level__marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink);
}

/* Stock: in stock · sold out · removed (hatched) · never had it */
.stockbar { display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--surface); }
.stockbar > span { flex-shrink: 1; flex-basis: 0; min-width: 3px; }
.stockbar__in { background: var(--green); }
.stockbar__out { background: var(--orange); }
.stockbar__removed { background: var(--hatch-light) repeating-linear-gradient(135deg, var(--hatch-dark) 0 2px, var(--hatch-light) 2px 4px); }
.stockbar__never { background: var(--empty); min-width: 0 !important; }

/* Product grids */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* A row of four cards; on phones it scrolls sideways */
.card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card-row__item { min-width: 0; }

/*
 * List view (a listing's "Liste"): the same card markup laid out as a row, image · name and meters · price and buttons.
 * The body's children join the card's grid (display: contents), so no second card template is needed.
 */
.card-grid--list { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.card-grid--list .card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(220px, 280px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "media meta   price"
    "media title  price"
    "media meters actions";
  column-gap: 16px;
  padding: 12px;
}

.card-grid--list .card__body { display: contents; }

.card-grid--list .card__media {
  grid-area: media;
  aspect-ratio: auto;
  min-height: 104px;
  background: var(--image-bg);
  border: 0;
  border-radius: 12px;
}

.card-grid--list .card__image { inset: 10px; }
.card-grid--list .card__media .badge { top: 6px; left: 6px; padding: 3px 7px; font-size: 10px; }
.card-grid--list .card__meta { grid-area: meta; }
.card-grid--list .card__title { grid-area: title; height: auto; margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.card-grid--list .meters { grid-area: meters; align-self: end; margin-top: 12px; padding-top: 0; border-top: 0; }

/* The right column: price on top, buttons at the bottom level with the image, one thin line down its left */
.card-grid--list .card__price { grid-area: price; padding-left: 16px; border-left: 1px solid var(--line-soft); }
.card-grid--list .card__price-row { height: 30px; }
.card-grid--list .card__amount { font-size: 24px; line-height: 30px; }
.card-grid--list .card-actions { grid-area: actions; align-self: stretch; align-items: flex-end; padding: 12px 0 0 16px; border-left: 1px solid var(--line-soft); }

@media (max-width: 767px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .card-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
  .card-row__item { flex: 0 0 270px; }

  /* Phones: name beside a smaller image, then price, buttons, and the meters last */
  .card-grid--list .card {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "media   meta"
      "media   title"
      "price   price"
      "actions actions"
      "meters  meters";
    column-gap: 12px;
  }

  .card-grid--list .card__media { min-height: 0; height: 96px; }
  .card-grid--list .card__meta { align-self: end; }
  .card-grid--list .card__title { align-self: start; }
  .card-grid--list .card__price { margin-top: 12px; padding-left: 0; border-left: 0; }
  .card-grid--list .card-actions { padding: 12px 0 0; border-left: 0; }
  .card-grid--list .meters { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
}