/*
 * BOOM APPROVED -- a rubber stamp, banged on a product he has vouched for.
 *
 * A different OBJECT from the JUST DROPPED strip beside it, and that is the
 * whole reason it looks like this. The two can land on the same card -- a new
 * product Boom likes is exactly the card you would expect both on -- so they
 * must not read as two of the same kind of label. One is a torn strip of paper
 * with a shadow behind it; this is ink pressed straight into the card: a ring,
 * a hard tilt, no fill, no shadow.
 *
 * Opposite corner from the strip for the same reason: the strip is pinned
 * top-left, so this sits bottom-right and the two never argue about the space.
 *
 * Not on the home page, matching the drop strip -- its racks are painted comic
 * covers, where a stamp would have to be drawn into the artwork.
 *
 * Placement lives here, so the feature is one file. The `position: relative`
 * that the grid card's art needs is set by drop-stamp.css; both stylesheets
 * ship together on every page that has a card, and setting it twice would be
 * two owners for one rule.
 */

.boom-pick {
  display: inline-block;
  /* Horizontal padding scales with the viewport for the reason the drop
     strip's does: two cards fit across a phone, and at a fixed 10px the ring
     took two thirds of the art it is pressed on. */
  padding: 6px clamp(6px, .9vw, 10px) 7px;
  color: var(--ink, #0c0b0e);
  /* The ring IS the stamp. No fill, because a stamp is ink on the surface
     rather than a sticker laid over it -- and because a filled badge in the
     corner of a card is the shape of every "sale" flag on every other site. */
  background: none;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-display);
  /* Smaller than the drop strip. The strip is news and this is an opinion. */
  font-size: clamp(.5rem, 1.7vw, .66rem);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Decoration under a link on every surface it appears on: without this the
     stamp is a dead patch inside the card's own tap target. */
  pointer-events: none;
  /* Banged on by hand, not typeset. Enough tilt to read as pressed, not enough
     to look like it fell over. */
  transform: rotate(-9deg);
}

/*
 * The grid card. Bottom-right, over the category-colour stage.
 *
 * Ink on all seven stages: every one of them was chosen to be sat on, and the
 * card's own type is already ink over the same colours (catalog.css measures
 * them). The faint disc behind the ring is what keeps it off a busy product
 * photo, which the flat stages do not need but an uploaded picture does.
 */
.catalog-compact-stage .boom-pick {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 9px;
  background: rgba(255, 255, 255, .58);
}

/*
 * The poster. In the copy column beside the drop strip, not slammed on the
 * cover art -- all four corners of that art are taken (issue tag, corner box,
 * price circle, barcode) and the sold-out slam lands across the middle.
 */
.product-poster-copy .boom-pick {
  margin: 0 0 12px 10px;
  vertical-align: middle;
}
/* Alone in the copy column it has no strip to sit beside, so it loses the gap
   that was separating them. */
.product-poster-copy .drop-stamp + .boom-pick { margin-left: 10px; }
.product-poster-copy .boom-pick:first-child { margin-left: 0; }

/* The quick-look panel, which renders the ring beside the strip and had no rule
   for either -- so both fell into the flow of a `place-items: center` grid and
   became extra rows under the artwork.

   Top right, not the grid card's bottom right. This panel's art column is
   .8fr of min(560px, 100%), which between the phone breakpoint and 560px is
   narrower than the strip and the ring laid end to end -- so the two bottom
   corners are not two corners here. Top left is the issue tag, which leaves
   this one. The faint disc is the grid card's, and for the same reason: the
   ground is a category colour under a halftone or an uploaded photograph, and
   the ring needs lifting off both. */
.product-peek-art .boom-pick {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, .58);
}

/* The pull-list row: bottom-right of the same 52x68 thumb the strip takes
   top-left of, cut down the same way. */
.catalog-pull-thumb .boom-pick {
  position: absolute;
  z-index: 3;
  right: 3px;
  bottom: 3px;
  padding: 1px 3px 2px;
  font-size: .34rem;
  background: rgba(255, 255, 255, .58);
}