/* Corner mark ribbon — start side (right in FA / left in EN), ~45°. Tokens only. */

.mark-ribbon {
  position: absolute;
  top: 0.7rem;
  inset-inline-start: -1.7rem;
  z-index: 2;
  width: 6.75rem;
  margin: 0;
  padding-block: 0.28rem;
  padding-inline: 0.2rem;
  border: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-spot) 92%, #fff),
    color-mix(in srgb, var(--color-accent) 55%, var(--color-spot))
  );
  box-shadow:
    0 0.2rem 0.55rem color-mix(in srgb, var(--color-text) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-spot) 35%, transparent);
  color: #1a120c;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(-45deg);
  transform-origin: center center;
}

[dir="rtl"] .mark-ribbon {
  transform: rotate(45deg);
}

/* New product ribbon — cooler band; same geometry as best-seller. */
.mark-ribbon--new {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 78%, #fff),
    color-mix(in srgb, var(--color-accent) 55%, var(--color-stage-deep))
  );
  box-shadow:
    0 0.2rem 0.55rem color-mix(in srgb, var(--color-text) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: color-mix(in srgb, var(--color-text) 88%, #fff);
}

/* Parent media: position:relative; overflow:hidden — clips the corner band. */