/* Full HD master: 480 px window, 408 × 224 px cards. Scale visible parts together. */
.enamel-modal { --catalog-window-unit: calc(100cqw / 480); }
.enamel-modal .modal-head.has-helper {
  min-height: calc(112 * var(--catalog-window-unit));
  padding: calc(50 * var(--catalog-window-unit)) calc(78 * var(--catalog-window-unit)) calc(20 * var(--catalog-window-unit));
}
.enamel-modal .modal-title { font-size: calc(25 * var(--catalog-window-unit)); }
.enamel-modal .close-modal {
  top: calc(24 * var(--catalog-window-unit));
  right: calc(17 * var(--catalog-window-unit));
}
.enamel-modal .modal-body {
  --catalog-body-unit: calc(100cqw / 408);
  container-type: inline-size;
  padding: 0 calc(36 * var(--catalog-window-unit)) calc(24 * var(--catalog-window-unit));
  margin-bottom: calc(36 * var(--catalog-window-unit));
}
.enamel-modal .tab-switch {
  --catalog-tab-unit: calc(100cqw / 408);
  container-type: inline-size;
  gap: 2.205882353%;
  margin-bottom: calc(11 * var(--catalog-body-unit));
}
.enamel-modal .tab-switch button {
  height: max(44px, calc(48 * var(--catalog-tab-unit)));
  min-height: 44px;
  align-items: center;
  font-size: calc(14 * var(--catalog-tab-unit));
}
.enamel-modal .tab-switch button > span {
  height: calc(48 * var(--catalog-tab-unit));
  min-height: 0;
  border-width: calc(12 * var(--catalog-tab-unit));
  border-image-width: calc(12 * var(--catalog-tab-unit));
  padding: 0 calc(2 * var(--catalog-tab-unit));
  line-height: 1;
}
.enamel-modal .mentor-intro {
  margin: calc(4 * var(--catalog-body-unit)) calc(6 * var(--catalog-body-unit)) calc(17 * var(--catalog-body-unit));
  font-size: calc(13 * var(--catalog-body-unit));
}
.enamel-modal .enamel-catalog {
  container-type: inline-size;
  gap: calc(14 * var(--catalog-body-unit));
}
.enamel-modal .enamel-item.catalog-card {
  --catalog-unit: calc(100cqw / 408);
  /* Query the unpadded catalog, so card padding never changes its children's scale. */
  container-type: normal;
  grid-template-columns: 30% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  column-gap: calc(12 * var(--catalog-unit));
  row-gap: 0;
  height: calc(224 * var(--catalog-unit));
  min-height: 0;
  padding: calc(23 * var(--catalog-unit)) calc(22 * var(--catalog-unit));
}
.enamel-modal .catalog-card::before {
  border-width: calc(1 * var(--catalog-unit));
  border-image-width: calc(48 * var(--catalog-unit)) calc(53 * var(--catalog-unit)) calc(23 * var(--catalog-unit)) calc(53 * var(--catalog-unit));
}
.enamel-modal .enamel-item.catalog-card .item-art {
  width: 100%;
  height: calc(158 * var(--catalog-unit));
  min-height: 0;
  margin: 0;
  place-items: center;
  align-self: center;
}
.enamel-modal .enamel-item.catalog-card .item-art > img {
  width: 100%;
  height: calc(158 * var(--catalog-unit));
  max-width: 100%;
  object-fit: contain;
}
.enamel-modal .enamel-item.catalog-card .item-art > img.enamel-env {
  width: auto;
  height: calc(158 * var(--catalog-unit));
  max-height: none;
  border-width: calc(1 * var(--catalog-unit));
  border-radius: calc(6 * var(--catalog-unit));
}
.enamel-modal .enamel-item.catalog-card .item-art > .slate-work {
  width: calc(76 * var(--catalog-unit));
  height: calc(76 * var(--catalog-unit));
}
/* Natural-height title, description and action form one group centred on the artwork. */
.enamel-modal .catalog-card .shop-text {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: calc(6 * var(--catalog-unit));
}
.enamel-modal .catalog-card .shop-name {
  margin: 0;
  font-size: calc(20 * var(--catalog-unit));
  line-height: calc(24 * var(--catalog-unit));
  overflow-wrap: normal;
}
.enamel-modal .catalog-card .shop-desc {
  margin: 0;
  font-size: calc(14 * var(--catalog-unit));
  line-height: calc(19 * var(--catalog-unit));
  overflow-wrap: normal;
}
.enamel-modal .catalog-card .item-effect {
  margin: 0;
  font-size: calc(16 * var(--catalog-unit));
  line-height: calc(22 * var(--catalog-unit));
}
.enamel-modal .enamel-item.catalog-card .shop-action {
  position: relative;
  display: block;
  flex: none;
  height: calc(48 * var(--catalog-unit));
  min-height: 0;
  margin: 0;
}
/* Extra touch area extends below the scaled face, without pushing the text apart. */
.enamel-modal .enamel-item.catalog-card .enamel-action {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(128 * var(--catalog-unit));
  height: max(44px, calc(48 * var(--catalog-unit)));
  min-height: 44px;
  align-items: start;
  font-size: calc(16 * var(--catalog-unit));
}
.enamel-modal .catalog-card .enamel-action-face {
  height: calc(48 * var(--catalog-unit));
  min-height: 0;
  gap: calc(6 * var(--catalog-unit));
  padding: calc(10 * var(--catalog-unit)) calc(15 * var(--catalog-unit));
  border-width: calc(1 * var(--catalog-unit));
  border-image-width: calc(11 * var(--catalog-unit)) calc(21 * var(--catalog-unit)) calc(13 * var(--catalog-unit)) calc(21 * var(--catalog-unit));
  line-height: 1;
}
.enamel-modal.modal-cosmetics .catalog-card .enamel-action-face {
  gap: calc(5 * var(--catalog-unit));
  padding: 0 calc(2 * var(--catalog-unit));
  border-width: calc(12 * var(--catalog-unit));
  border-image-width: calc(12 * var(--catalog-unit));
}
.enamel-modal .catalog-card .enamel-action-face .currency-art,
.enamel-modal .catalog-card .faceted-check {
  width: calc(21 * var(--catalog-unit));
  height: calc(21 * var(--catalog-unit));
}
.enamel-modal .catalog-card .faceted-coin {
  width: calc(22 * var(--catalog-unit));
  height: calc(22 * var(--catalog-unit));
}