/* ===== Clearance page ===== */
.clr-hero {
  background: var(--coral-tint);
  border: 1px solid #FAD9D0;
  border-radius: var(--r-lg);
  padding: var(--s8);
  margin-bottom: var(--s6);
}
.clr-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--coral); text-transform: uppercase; margin-bottom: var(--s3);
}
.clr-hero__eyebrow svg { width: 16px; height: 16px; }
.clr-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--s3); }
.clr-hero p { font-size: var(--text-lg); color: var(--ink-2); max-width: 640px; line-height: 1.55; }

/* Info strip */
.clr-strip {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  padding: var(--s5) var(--s6);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: var(--s8);
}
/* Strip items are bare <span>icon label</span>; align the inline icon left of the
   label (the global `svg { display:block }` reset otherwise stacks it on its own line). */
.clr-strip span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
}
.clr-strip span svg { width: 16px; height: 16px; flex: none; color: var(--coral); }

/* Section heading + count */
.clr-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap;
}
.clr-bar h2 { font-size: var(--text-xl); }
.clr-bar .clr-count { font-size: var(--text-sm); color: var(--ink-3); }

/* Closing note */
.clr-note {
  text-align: center; font-size: var(--text-sm); color: var(--ink-3);
  margin: var(--s10) auto var(--s16); max-width: 560px; line-height: 1.6;
}

/* Mobile */
@media (max-width: 860px) {
  .clr-hero { padding: var(--s6); }
  .clr-hero h1 { font-size: var(--text-2xl); }
  .clr-hero p { font-size: var(--text-base); }
  .clr-strip { gap: var(--s4); }
  .clr-strip__item { flex: 1 1 100%; }
}