/* "youth" marker — one visual, every surface.

   A kids garment and its adult twin carry the SAME garment type and the SAME
   saying: "real t · and a 5 6 7 8" exists in both, so without a marker the two
   are indistinguishable on any list that shows them together. This is
   identification, not decoration.

   Two forms, chosen by what the surface leads with:
     .youth-ribbon — a corner banner for IMAGE-led cards (shop grid, wholesale
                     collection). Top-RIGHT: the shop card's status stamp
                     ("just dropped") owns the top-left, and so does the
                     wholesale card's select checkbox.
     .youth-chip   — an inline pill for TEXT-led headers (PDP, wholesale product
                     and build pages), where the garment type is spelled out and
                     that is exactly the word needing qualification. A ribbon on
                     a 64px header thumbnail would be unreadable.

   Both are rendered from templates/includes/youth_mark.html — do not hand-write
   the markup on a new surface. */

/* ---- ribbon ---------------------------------------------------------- */

.youth-ribbon {
  --yr-size: 88px;                 /* per-surface: bigger card, bigger ribbon */
  --yr-bg: #b0576f;                /* dance accent */
  position: absolute;
  top: 0;
  right: 0;
  width: var(--yr-size);
  height: var(--yr-size);
  overflow: hidden;                /* clips the rotated band to the corner */
  pointer-events: none;            /* never swallows a click meant for the card */
  z-index: 3;
}

.youth-ribbon span {
  position: absolute;
  top: calc(var(--yr-size) * 0.16);
  right: calc(var(--yr-size) * -0.3);
  width: calc(var(--yr-size) * 1.28);
  transform: rotate(45deg);
  background: var(--yr-bg);
  color: #fff;
  font-size: calc(var(--yr-size) * 0.128);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  text-align: center;
  padding: 3px 0;
  box-shadow: 0 1px 4px rgba(24, 18, 15, 0.22);
}

/* ---- chip ------------------------------------------------------------ */

.youth-chip {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.12em 0.5em;
  border-radius: 999px;
  background: #b0576f;
  color: #fff;
  /* Absolute, not em: this sits inside eyebrows as small as 0.62rem, where a
     relative size rendered it at about 7px. */
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  vertical-align: middle;
  white-space: nowrap;
}