body > header {
  display: flex;
  align-items: center;
  gap: var(--pico-spacing);
  height: 80px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  color: var(--pico-contrast)
}

#tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#tags > div {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 15px;
  padding-right: 10px;
  border: solid 1px;
  border-radius: 20px;
  user-select: none;
}

#tags > div.active {
  border-color: transparent;
  background: #FF299B;
  color: white;
}

#searchResult {
  border-collapse: collapse;
  user-select: none;
}

#searchResult tr:hover td {
  background-color: var(--pico-table-row-stripped-background-color);
}

#searchResult .tags a {
  font-size: 14px;
  color: var(--pico-secondary);
  text-decoration: none;
}

#searchResult .tags a:hover {
  text-decoration: underline;
}

#shoppingCartButton {
  position: relative;
}

#shoppingCartButton .label {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  border: solid 1px;
  border-radius: 100%;
  border-color: transparent;
  width: 20px;
  height: 20px;
  font-size: 10px;
  background: #FE59B0;
  color: white;
  pointer-events: none;
}

#orderMenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pico-spacing)
}

#orderMenu a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#orderItems {
  border-collapse: collapse;
  user-select: none;
}

#orderItems tr:hover td {
  background-color: var(--pico-table-row-stripped-background-color);
}

#downloadPreview {
  footer {
    display: flex;
    align-items: center;  
    gap: 10px;

    button,
    [role=button] {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-wrap: nowrap;
      margin-left: 0;  
    }
  }
}

@media (max-width:576px) {
  #downloadPreview footer {
    flex-direction: column;
    align-items: stretch;
  }
}

.duration {
  color: var(--pico-secondary)
}

@media (max-width:576px) {
  .duration {
    display: none;
  }
}

.snackbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px;
}

.pauseIcon {
  display: none
}

.playing {
  .pauseIcon {
    display: block
  }
  .playIcon {
    display: none
  }
}

#cart {
  user-select: none;
}

#cart .cartItems {
  display: flex;
  flex-direction: column;
}

#cart .cartItem {
  display: flex;
  align-items: center;
  padding: 5px;
  gap: var(--pico-spacing)
}

#cart .cartItem:hover {
  background-color: var(--pico-table-row-stripped-background-color);
}

#cart .total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;  
}

.roundButton {
  display: grid;
  place-items: center;
  width: calc(var(--pico-spacing) * 2.5);
  height: calc(var(--pico-spacing) * 2.5);
  border-radius: 100%;
  cursor: pointer;
  flex-shrink: 0;
}

.roundButton:hover {
  background-color: var(--pico-dropdown-hover-background-color);
}

button.small,
[role=button].small  {
  width: 24px;
  height: 24px;
  padding: 0;
}

button.round,
[role=button].round  {
  border-radius: 50%;
}

button.ghost,
[role=button].ghost {
  background-color: transparent;
  border: transparent;
  color: light-dark(#373c44, #c2c7d0);
}

button.ghost:hover,
[role=button].ghost:hover {
  background-color: var(--pico-dropdown-hover-background-color);
}

dialog article header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#player > article {
  max-width: 600px;
  margin: auto;
  margin-bottom: 0;
  padding: var(--pico-spacing);
  pointer-events: all;
  user-select: none;
}

#playerName {
  text-align: center;
}

#playerCurrentTime,
#playerDuration {
  font-family: monospace;
}

#playerButtons {
  display: flex;
  align-items: center;
  gap: var(--pico-spacing);
}

#playerProgress {
  position: relative;
  flex: 1;
  height: 20px;
}

#playerProgress > div {
  position: relative;
  width: 0;
  height: 20px;
  overflow: hidden;
}

#playerProgress img {
  position: absolute;
  display: block;
  max-width: none;
  height: 20px;
  pointer-events: none;
  user-select: none;
}

#checkoutPage main {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pico-spacing) * 2);
}

#checkoutPage section {
  flex: 1;
  min-width: 300px;
}

#checkoutForm label {
  font-size: 14px;
}

#checkoutForm label.hidden {
  display: none
}

#adminItemPage label {
  color: var(--pico-secondary);
  font-size: small;
}