.viewport[data-deck-filter="0"] {
  background-color: blue;
}

.card-wrapper {
  width: 100px;
}

.category-cards {
  /*
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
*/
}


/*
:root {
  --card-count-width: 1.6rem;
  --card-image-width: 10.8rem;
  --card-controls-width: 2rem;
  --opened-card-height: 14.6rem;
  --filter-row-height: 2.7rem;
}*
.card-controls-wrapper button {
  min-width: 80%;
  font-size: var(--xxsmall-font-size);
  margin-bottom: var(--xxxsmall-margin);
}

.card-image-wrapper {
  background-color: black;
}

.card-image-wrapper img {
  border-radius: var(--large-border-radius);
}


[data-receive=cardFilterDisplay] {
  height: 3.4ch;
}

[data-receive=cardQuantity] {
  padding-block: 0.25rem;
  text-align: center;
}

.card-quantity-buttons {
  padding-left: 0.3rem;
  text-align: center;
}

.card-quantity-buttons button {
  width: 90%;
  margin-bottom: 0.36rem;
}


.card-wrapper {
  background-color: black;
  color: var(--faded-white-color);
  display: grid;
  grid-template-columns: var(--card-image-width) var(--card-controls-width);
  overflow-y: hidden;
  border-radius: var(--large-border-radius);
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
  padding: var(--default-padding);
}

.category-cards {
  background-color: black;
  border-radius: var(--large-border-radius);
}

.category-title {
  padding-block: var(--xxsmall-padding);
  position: sticky;
  top: var(--filter-row-height);
  background-color: var(--background-color);
}

[data-state=active] {
  outline: var(--default-border);
  height: var(--opened-card-height);
}

[data-state=closed] {
  height: 1.9rem;
}

[data-state=closed] .card-contorls-wrapper {
  visibility: hidden;
}

[data-state=closed] .card-quantity-wrapper {
  visibility: hidden;
}

[data-state=opened] {
  height: var(--opened-card-height);
}

[data-state=opened] .card-controls-wrapper {
  visibility: hidden;
}

[data-state=opened] .card-quantity-wrapper {
  visibility: hidden;
}


.deck-wrapper[data-activefilter="0"] button[data-deckfilter="0"] {
  background: var(--accent-color);
}

.deck-wrapper[data-activefilter="1"] button[data-deckfilter="1"] {
  background: var(--accent-color);
}

.deck-wrapper[data-activefilter="2"] button[data-deckfilter="2"] {
  background: var(--accent-color);
}


.filter-wrapper {
  height: var(--filter-row-height);
  padding-block: var(--xxsmall-padding);
  padding-inline: var(--default-padding);
  background-color: var(--background-color);
  position: sticky;
  top: 0;
  z-index: 1;
}
*/