/* ==========================================================================
   CATALOG — filter row and product grid.

   The grid is a rack, not a row of floating cards: cells butt against one
   another and share a single 1px rule, drawn by overlapping card borders so
   a half-filled last row still reads correctly.
   ========================================================================== */

.catalog {
  padding-block: var(--section-y);
  border-bottom: var(--rule);
}

/* --- Section head --------------------------------------------------------- */
.catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-7));
}

.catalog__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}

.catalog__status {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Filter pills --------------------------------------------------------- */
.catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.6rem 1.1rem;
  border: var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.pill:hover {
  color: var(--text);
  border-color: var(--rule-color-strong);
}

.pill__count {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease);
}

.pill[aria-pressed="true"] {
  background: var(--c-porcelain);
  border-color: var(--c-porcelain);
  color: var(--c-black);
}

.pill[aria-pressed="true"] .pill__count { color: rgba(0, 0, 0, 0.5); }

/* --- Grid ----------------------------------------------------------------- */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* --- Card ----------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  border: var(--rule);
  background: var(--bg);
  /* Overlap the neighbour so shared edges stay exactly 1px. */
  margin: 0 calc(var(--rule-width) * -1) calc(var(--rule-width) * -1) 0;
  contain: layout paint;
  transition: background var(--dur-base) var(--ease);
}

.card:hover { background: var(--bg-raised); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: var(--rule);
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transform: scale(1.001); /* avoids a hairline seam on subpixel scaling */
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.card:hover .card__image {
  opacity: 1;
  transform: scale(1.03);
}

/* Stock is a hairline flag, not a badge — it only appears when it matters. */
.card__stock {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  padding: 0.3rem 0.6rem;
  background: var(--bg);
  border: var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.card__stock[data-state="out"] {
  background: var(--accent);
  border-color: var(--accent);
}

/* The corner flag: New Arrival, On Sale, Last Call.
   Same bubble as the stock note in every measurement — position, padding,
   type, tracking — so the two read as one system rather than two. It sits
   top LEFT, opposite the stock note, so however long either label runs they
   cannot meet in the middle. Always the signal red: this is the one thing on
   a card that is allowed to shout. */
.card__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: 0.3rem 0.6rem;
  background: var(--accent);
  border: var(--rule-width) solid var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-porcelain);
  white-space: nowrap;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.card__category {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  line-height: 1.05;
}

.card__price {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.card__description {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- Card actions ---------------------------------------------------------
   Two buttons sharing one row, split by a single hairline. */
.card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: auto;
  border-top: var(--rule);
}

.card__action--details { border-left: var(--rule); }

.card__action--add[disabled] {
  color: var(--text-faint);
  cursor: not-allowed;
}

.card__action--add[disabled]:hover {
  color: var(--text-faint);
  background: transparent;
}

/* Held for a beat after a click so the acknowledgement is legible. */
.card__action--add[data-confirmed] {
  background: var(--c-porcelain);
  color: var(--c-black);
}

.card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.card__action:hover {
  color: var(--c-black);
  background: var(--c-porcelain);
}

/* A drawn plus that becomes a minus when the panel is open. */
.card__action-glyph {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
}

.card__action-glyph::before,
.card__action-glyph::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease),
              opacity var(--dur-base) var(--ease);
}

.card__action-glyph::before {
  top: 5px; left: 0; right: 0;
  height: var(--rule-width);
}

.card__action-glyph::after {
  left: 5px; top: 0; bottom: 0;
  width: var(--rule-width);
}

.card__action[aria-expanded="true"] .card__action-glyph::after {
  transform: scaleY(0);
  opacity: 0;
}

.catalog__head-group { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Stock is stated on every card now, so the healthy case stays quiet and
   only low or zero draws the eye. */
.card__stock[data-state="ok"] {
  color: var(--text-muted);
  border-color: var(--rule-color);
}