/* Equipment rows reuse the same full-width game panels as the Vassals page. */
.equipment-catalog {
  display: flow-root;
  width: 100%;
}

.equipment-list {
  margin-bottom: 20px;
}

.equipment-premium-heading {
  position: relative;
  clear: both;
  margin: 0 -10px 10px;
}

body.game-list-page .equipment-item .listViewItemDetails dd li em,
body.game-list-page .equipment-item .listViewItemDetails dd li strong {
  display: inline;
}

body.game-list-page .equipment-item .listViewItemDetails dd li strong {
  margin-left: 3px;
}

.panelView .listViewItem.premium .panelHeader {
  background-image: url("../images/game/source/mobilemiddleages/img/panel/premium/panel_top01_2x.png");
}

.panelView .listViewItem.premium .panelSpacer {
  background-image: url("../images/game/source/mobilemiddleages/img/panel/premium/panel_top02_2x.png");
}

.panelView .listViewItem.premium .panelDetails {
  background-image: url("../images/game/source/mobilemiddleages/img/panel/premium/panel_structure_2x.jpg");
}

.panelView .listViewItem.premium .panelTitle {
  background-image: url("../images/game/source/mobilemiddleages/img/panel/premium/panel_structure_top_2x.png");
}

.panelView .listViewItem.premium .panelFooter {
  background-image: url("../images/game/source/mobilemiddleages/img/panel/premium/panel_bottom_2x.png");
}

.panelView .listViewItem.premium dl.listViewItemDetails dt::after {
  top: -2px;
  left: 2px;
  background-image: url("../images/game/source/mobilemiddleages/img/enhancement/premium_frame_2x.png");
}

.panelView .listViewItem.premium .premium-ability {
  display: flex;
  position: relative;
  top: 17px;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  padding: 0;
  color: #fff;
  font: 11px/1.35 "Helvetica Neue", Arial, sans-serif;
}

.panelView .listViewItem.premium .premium-ability-icon {
  display: block;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-position: center;
}

.panelView .listViewItem.premium .premium-ability-icon--attack,
.panelView .listViewItem.premium .premium-ability-icon--income {
  background-image: url("../images/game/source/mobilemiddleages/img/enhancement/sprite_icons_enhancement_2x.png");
  background-size: 35px 250px;
}

.panelView .listViewItem.premium .premium-ability-icon--attack { background-position: 0 0; }
.panelView .listViewItem.premium .premium-ability-icon--income { background-position: 0 -100px; }

.panelView .listViewItem.premium .premium-ability-icon--damage {
  background-image: url("../images/game/source/mobilemiddleages/img/icons/icon_damage_2x.png");
  background-size: 28px 28px;
}

.panelView .listViewItem.premium .premium-ability-icon--fortitude {
  background-image: url("../images/game/source/mobilemiddleages/img/icons/icon_pve_2x.png");
  background-size: 30px 30px;
}

.panelView .listViewItem.premium .premium-ability-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
}

/* Match the in-game .button rules from source-css/style.css and advanced.css. */
.equipment-specials-button {
  display: inline-block;
  margin-top: 5px;
  padding: 10px 12px;
  min-width: 70px;
  border: none;
  border-radius: 4px;
  color: #fff;
  background: url("../images/game/source/mobilemiddleages/img/quest/splatter_2x.png") repeat-x, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0%, #57abf2), color-stop(4%, #2376bc), color-stop(48%, #0e3e66), color-stop(52%, #01080e), color-stop(100%, #082944));
  background-size: 130px 100%;
  font: bold 13px "Times", serif;
  text-decoration: none;
  text-shadow: 0 1px 1px #000;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 2px 1px rgba(0, 0, 0, 0.5), 0 1px 2px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 2px 1px rgba(0, 0, 0, 0.5), 0 1px 2px #000;
  cursor: pointer;
}

.equipment-specials-button:hover,
.equipment-specials-button:focus-visible {
  color: #fff;
  background-color: #2376bc;
}

.equipment-specials-button:active,
.equipment-specials-button.active {
  background: url("../images/game/source/mobilemiddleages/img/quest/splatter_2x.png") repeat-x, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0%, #5bb3fe), color-stop(4%, #2a8bde), color-stop(48%, #145993), color-stop(52%, #0f3e6b), color-stop(100%, #051f34));
  background-size: 130px 100%;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 2px 1px rgba(0, 0, 0, 0.5), 0 1px 10px #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 2px 1px rgba(0, 0, 0, 0.5), 0 1px 10px #000;
}
