/* LABEL-02 extends the approved paper-label language to six other captions.
   ONE PIECE keeps its exact LABEL-01 stylesheet and markup. No image transforms,
   CTA styles, body copy or heading styles are changed by this overlay. */
.page figcaption.product-label {
  --label-edge: polygon(0 5%, 28% 0, 62% 3%, 100% 0, 98% 48%, 100% 94%, 70% 98%, 40% 96%, 1% 100%);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 5px;
  width: 10rem;
  max-width: calc(100% - 6px);
  margin: 18px 3px 0 0;
  padding: 9px 8px 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  text-align: left;
  overflow: visible;
  transform-origin: center;
}
.page figcaption.product-label::before,
.page figcaption.product-label::after {
  content: '';
  position: absolute;
  pointer-events: none;
  clip-path: var(--label-edge);
}
.page figcaption.product-label::before {
  inset: 0;
  z-index: -1;
  background: var(--paper);
}
.page figcaption.product-label::after {
  inset: 3px -3px -3px 3px;
  z-index: -2;
  background: var(--ink);
}
.page .product-label > .product-label-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.04em;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.page .product-label > .product-label-detail {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: 3px 4px;
  background: var(--ink);
  border-bottom: 2px solid var(--red);
  color: var(--paper);
  font-size: .875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  letter-spacing: .02em;
  /* Narrow cards can break at the real space before the card number. */
  white-space: normal;
  overflow-wrap: normal;
  transform: skewX(4deg);
}
.page .product-label--character > .product-label-name {
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -.06em;
}
.page .product-label--series {
  width: 11rem;
}
.page .product-label--series > .product-label-name {
  font-size: 1.25rem;
  line-height: 1.25;
}
/* Compensate for the original figure rotation: labels end at about -2deg.
   Keep every caption in normal flow, below its real product image. */
.page .activity-newcomer figcaption.product-label {
  transform: rotate(-7deg) skewX(-4deg);
}
.page .activity-daily figcaption.product-label,
.page .series-151 figcaption.product-label {
  transform: rotate(3deg) skewX(-4deg);
}
.page .cosplay-detail figcaption.product-label {
  transform: rotate(4deg) skewX(-4deg);
  margin-left: 3px;
}
.page .festival-detail figcaption.product-label,
.page .series-black figcaption.product-label {
  transform: rotate(-8deg) skewX(-4deg);
  margin-left: auto;
}
@media (min-width: 768px) {
  .page figcaption.product-label {
    padding-block: 10px 9px;
  }
  .page .product-label > .product-label-name {
    font-size: 1.5rem;
  }
  .page .product-label--character > .product-label-name {
    font-size: 1.75rem;
  }
  .page .product-label--activity > .product-label-name {
    /* The existing pack figure is only 112px wide at tablet sizes. */
    font-size: 1.375rem;
  }
  .page .product-label--series > .product-label-name {
    font-size: 1.375rem;
  }
}
@media (forced-colors: active) {
  .page :is(.activity-newcomer, .activity-daily, .cosplay-detail, .festival-detail, .series-151, .series-black) figcaption.product-label {
    outline: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    transform: none;
  }
  .page figcaption.product-label::before,
  .page figcaption.product-label::after {
    display: none;
  }
  .page .product-label > :is(.product-label-name, .product-label-detail) {
    background: Canvas;
    color: CanvasText;
    transform: none;
  }
}