.card-name {
  color: white;
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-family: 'Beleren';
}

/* Badges overlay the image: in flow, a badge present on some cards only
   would misalign the rows of a grid. */
.already-in-cart-badge {
  position: absolute;
  /* Bottom right: the hot seal and the on-request badge hold the other corners. */
  bottom: 6px;
  right: 6px;
  z-index: 2;
  background-color: var(--shop-green);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
}

.card-price-pill {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 6px;
  gap: 4px;
  margin-bottom: 8px;
}

.debug-raw-price {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  color: #ff0000;
  opacity: 1;
}

.card-set-info {
  color: white;
  font-weight: bold;
  margin: 5px auto 0 auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
}

.card-all-editions {
  background: rgba(120, 90, 0, 0.72);
}

.card-range {
  display: block;
  font-weight: normal;
  font-size: 0.85em;
  opacity: 0.9;
}

select.card-set-info,
button.card-set-info {
  max-width: 100%;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  /* Single line, like the <select> that replaces it: wrapping would make the
     tile jump when the selector opens. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.condition-select,
.language-select {
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
  padding: 2px;
}

/* Cardmarket's condition colours. Duplicated as the --condition-* tokens in
   outils/src/styles/tokens.css (site/ does not load it): change both together;
   check:tokens refuses a divergence. */
.condition-select[data-condition] {
  color: #fff;
  border-color: transparent;
}

.condition-select[data-condition='NM'],
.condition-option-nm {
  background-color: #3caf56;
}

.condition-select[data-condition='EX'],
.condition-option-ex {
  background-color: #82891e;
}

.condition-select[data-condition='GD'],
.condition-option-gd {
  background-color: #ffc107;
}

/* Light enough that white text is unreadable: dark text here only. */
.condition-select[data-condition='GD'],
.condition-select option.condition-option-gd,
.condition-chip.condition-option-gd {
  color: #212529;
}

.condition-select[data-condition='LP'],
.condition-option-lp {
  background-color: #fd8b2b;
}

.condition-select[data-condition='PL'],
.condition-option-pl {
  background-color: #e56874;
}

.condition-select[data-condition='PO'],
.condition-option-po {
  background-color: #dc3545;
}

/* Options do not inherit the closed select's colours; without this, white
   text would land on the white dropdown. */
.condition-select option {
  color: #fff;
}

.condition-select:not([data-condition]) {
  color: #333;
  background: #fff;
}

.condition-chip {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: bold;
  color: #fff;
}

/* opacity/filter on the host element apply across the shadow boundary. */
.slide.not-bought card-tile {
  opacity: 0.3;
  filter: grayscale(100%);
}

.slide.not-bought .price-display {
  color: var(--danger);
}

.price-estimated {
  opacity: 0.6;
  margin-right: 0.1em;
}

.slide.not-bought .btn-add {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

/* The font is set here, not left to the user agent: a <button> would get its own
   13.33px while the <a> of .btn-contact inherits the page's 16px. */
.btn-add {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* An <a> styled as .btn-add: it gets neither the box nor the light background
   a <button> receives from the user agent. */
.btn-contact {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: #efefef;
  color: #111;
}

.btn-contact:hover {
  background-color: #e0e0e0;
}

.condition-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #eee;
  color: #333;
}

.language-select {
  max-width: 70px;
}

/* Over the image rather than in the price row, where the label wrapped and pushed
   the image below its neighbours. */
.contact-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 85%;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: #007b00;
  border: 1px solid #005a00;
  border-radius: 4px;
  padding: 3px 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: help;
}

.card-tile-wrap {
  position: relative;
}

/* 12-point star in %, so the outline scales with the seal's size. */
.hot-seal {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--danger);
  color: white;
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: help;
  clip-path: polygon(
    50% 0%,
    60% 13%,
    75% 7%,
    77% 23%,
    93% 25%,
    87% 40%,
    100% 50%,
    87% 60%,
    93% 75%,
    77% 77%,
    75% 93%,
    60% 87%,
    50% 100%,
    40% 87%,
    25% 93%,
    23% 77%,
    7% 75%,
    13% 60%,
    0% 50%,
    13% 40%,
    7% 25%,
    23% 23%,
    25% 7%,
    40% 10%
  );
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  animation: hotPulse 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes hotPulse {
  0%,
  100% {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 0 rgba(204, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(204, 0, 0, 0.9));
  }
}

.status-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ccc;
  flex-shrink: 0;
}

.status-option {
  border: none;
  background-color: #e8e8e8;
  color: #888;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  /* Tight: the finish / condition / language / price row must fit on one line
     at 320 px. */
  letter-spacing: 0.3px;
  padding: 4px 7px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.status-option:not(.active):hover {
  background-color: #ddd;
}
.status-option.active {
  background-color: #222;
  color: white;
}
.status-option.foil-option.active {
  background: var(--foil-gradient);
  color: #111;
}