/* ============================================
   PRODUCT ARCHITECTURE — homepage range tiles and the product card
   Loaded after style.css and category.css; overrides .cat-pcard.
============================================ */

/* --- Homepage: five hero ranges, then the supporting ranges ------------------ */
.ranges__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.range {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  color: var(--text);
}
.range:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--accent); }
.range__img {
  height: 184px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  overflow: hidden;
}
.range__img img { max-width: 82%; max-height: 150px; width: auto; height: auto; object-fit: contain; }
.range__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.range__kicker {
  font-family: var(--font-mono);
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.range__name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.range__sub  { font-size: .8125rem; color: var(--text-2); line-height: 1.5; }
.range__count {
  margin-top: auto; padding-top: .6rem;
  font-family: var(--font-mono); font-size: .6875rem; color: var(--text-3);
}
.range__count b { color: var(--text); font-weight: 600; }

.ranges__more { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.range--minor { flex-direction: row; align-items: center; border-radius: var(--r-lg); }
.range--minor .range__img { width: 96px; height: 96px; flex: 0 0 96px; padding: .75rem; }
.range--minor .range__img img { max-height: 76px; }
.range--minor .range__body { padding: .85rem 1rem; }
.range--minor .range__name { font-size: .95rem; }
.range--minor .range__count { padding-top: .35rem; }

@media (max-width: 1100px) { .ranges__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .ranges__grid { grid-template-columns: repeat(2, 1fr); } .ranges__more { grid-template-columns: 1fr; } }
@media (max-width: 420px)  { .ranges__grid { grid-template-columns: 1fr; } }

/* --- Product card: the thing that was "TX-007 / TX-007 / RRP $60" ------------
   Series tag, a real name, the code in a mono badge, and up to three spec chips
   that answer what an electrician asks first: rating, gangs, size, colour.  */
.cat-pcard { display: flex; flex-direction: column; }
.cat-pcard__img { height: 168px; padding: 1.1rem; position: relative; }
.cat-pcard__img img { max-width: 78%; }
.cat-pcard__img--none img { max-width: 62%; opacity: .55; }
.cat-pcard__info { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .95rem .95rem; flex: 1; }
.cat-pcard__tag {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.cat-pcard__info h4 { margin: 0; font-size: .875rem; line-height: 1.35; font-weight: 700; }
.cat-pcard__sku {
  display: inline-flex; align-self: flex-start; align-items: center;
  margin: .1rem 0 .15rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--bg-alt);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  color: var(--text-2); letter-spacing: .02em;
}
.cat-pcard__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  display: inline-block;
  padding: .12rem .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .6875rem; color: var(--text-2);
  background: var(--surface);
  white-space: nowrap;
}
.cat-pcard__foot {
  margin-top: auto; padding-top: .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border-top: 1px solid var(--border);
  font-size: .6875rem; color: var(--text-3);
}
.cat-pcard__price { font-size: .75rem; font-weight: 600; color: var(--text-2); }
.avail { display: inline-flex; align-items: center; gap: .35rem; }
.avail::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--border-dark); }
.avail--stock::before  { background: #2BA35A; }
.avail--indent::before { background: var(--accent); }
.avail--stock { color: #1F7A43; }

/* Series / type browse cards get a one-line blurb under the count */
.cat-sub-card__blurb {
  display: block; padding: 0 1rem .9rem;
  font-size: .75rem; color: var(--text-2); line-height: 1.45; text-align: center;
}

/* Datasheet badge on a product card that has one — a small labelled pill, not a bare grey word */
.cat-pcard__ds {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
.cat-pcard__ds::before {
  content: ''; width: 7px; height: 9px; flex: 0 0 7px;
  border: 1px solid currentColor; border-radius: 1px;
  border-top-right-radius: 3px;
}