@charset "UTF-8";
:root {
  --font-size: 18px;
  --font-size-small: 15px;
  --color-available: green;
  --color-neutral: gray;
  --color-preorder: blue;
  --color-unavailable: orange; }

*,
::before,
::after {
  box-sizing: border-box; }

html {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
  padding: 0.5rem 0; }

body {
  margin: 0; }

a {
  text-decoration: none; }

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button {
  cursor: pointer; }

h1 {
  font-size: 2em; }

table {
  border-collapse: collapse;
  width: 100%; }

.altName + .altName::before {
  content: "•"; }

.availabilityChange {
  background: rgba(0, 128, 0, 0.05);
  border-left: 4px solid green;
  margin-bottom: 1em;
  padding: 8px; }

.availabilityChange__product_info {
  display: flex; }
  .availabilityChange__product_info > * {
    flex: 1 1 0; }

.availabilityChange__details {
  display: flex; }
  .availabilityChange__details > * {
    flex: 1 1 0; }

.availabilityChange__price {
  text-align: right; }

.availabilityChange__productName {
  font-weight: bold; }

.availabilityChanges {
  margin-bottom: 2em; }

.categoryNav {
  font-size: var(--font-size-small); }

.logo {
  font-size: var(--font-size);
  margin-bottom: 0;
  margin-top: 0; }

.main {
  margin-top: 2em;
  margin-bottom: 3em;
  max-width: 60ch; }

.offers {
  list-style: none;
  padding-left: 0;
  margin-top: 2em;
  margin-bottom: 2em; }

.offer--available {
  background: rgba(0, 128, 0, 0.05);
  border-left: 4px solid green;
  margin-bottom: 1em;
  padding: 8px; }
  .offer--available .offerHead__state {
    background: var(--color-available); }

.offer--preorder {
  background: rgba(0, 0, 255, 0.05);
  border-left: 4px solid blue;
  margin-bottom: 1em;
  padding: 8px; }
  .offer--preorder .offerHead__state {
    background: var(--color-preorder); }

.offer--unavailable {
  background: rgba(255, 165, 0, 0.05);
  border-left: 4px solid orange;
  margin-bottom: 1em;
  padding: 8px; }
  .offer--unavailable .offerHead__state {
    background: var(--color-unavailable); }

.offerHead {
  display: flex; }

.offerHead__state {
  padding: 4px 4px 3px;
  background: rgba(128, 128, 128, 0.5); }

.offerHead__tags {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--font-size-small);
  color: white; }

.offerHead__title {
  flex: 3 3 auto; }

.pageFooter {
  margin-top: 2em; }

.pageHeader {
  margin-bottom: 2em; }

.pageHeader__alternativeTitles {
  font-weight: bold;
  margin-bottom: 1rem;
  margin-top: -1rem; }

.pageHeader__title {
  line-height: 1.1;
  margin: 0.2rem 0 1rem; }

.priceAmount {
  text-align: right; }

.priceComponent {
  font-size: var(--font-size-small); }

.priceComponent--total {
  font-size: var(--font-size); }

.product {
  background: rgba(128, 128, 128, 0.05);
  border-left: 4px solid gray;
  margin-bottom: 1em;
  padding: 8px; }

.product__altNames {
  font-size: var(--font-size-small); }

.product__manufacturer {
  font-size: var(--font-size-small); }

.product__name {
  font-weight: bold; }

.product__tags {
  margin-top: 0.5rem; }

.productPrice {
  text-align: right; }

.productPrice__amount {
  display: flex;
  text-align: right; }
  .productPrice__amount > * {
    flex: 1 1 0; }

.productPrice__info {
  font-size: var(--font-size-small);
  text-align: right; }

.products {
  list-style: none;
  padding-left: 0; }

.search {
  padding: 1rem 0; }

.search__button,
.search__input {
  padding: 0.5rem 0.5rem 0.4rem; }

.search__form {
  display: flex;
  flex-direction: row;
  font-size: var(--font-size);
  justify-content: flex-end; }

.search__button {
  border: 2px solid gray; }

.search__input {
  border: 2px solid gray;
  flex: 1; }

.siteFooter {
  font-size: var(--font-size-small); }

.siteHeader {
  max-width: 60ch; }

.supportedSystem {
  display: inline; }
  .supportedSystem:after {
    content: "*"; }

.supportedSystems {
  list-style: none;
  padding-left: 0; }

.tag {
  padding: 4px 4px 3px;
  background: rgba(128, 128, 128, 0.05);
  font-size: var(--font-size-small); }