/* ─── Archive Page ────────────────────────────────────────── */

.page-archive main {
  background-color: var(--color-gray-medium);
}

.archive-index {
  width: 100%;
}

.archive-entry {
  width: 100%;
}

.archive-index-item {
  width: 100%;
  padding: 0.5vw;
  background-color: var(--color-light-blue);
  color: white;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3vw;
  height: 2vw;
  text-align: left;
}

.archive-index-item:hover {
  background-color: var(--color-blue);
}

.archive-index-arrow {
  display: inline-block;
  transition: transform 0s;
}

.archive-index-item .archive-index-arrow {
  transform: rotate(-90deg);
}

.archive-index-item.is-open .archive-index-arrow {
  transform: rotate(0deg);
}

.archive-grid {
  width: 100%;
}

.archive-grid .product-grid{
    margin-bottom: 2vw;
}

.archive-empty {
  padding: var(--spacing-l);
  color: var(--color-gray-medium);
}

.archive-index-item {
  flex: 1 1 auto;
  padding: 0.5vw ;
  color: white;
  border: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.3vw;
  height: 2vw;
}

.archive-index-item:hover {
  background-color: var(--color-blue);
  color: white;
}

.archive-index-item.is-closed .archive-index-arrow {
  display: inline-block;
  transform: rotate(-90deg);
}

.archive-empty {
  padding: var(--spacing-l);
  color: var(--color-gray-medium);
}
@media (max-width: 768px) {
  .archive-grid .product-grid {
    margin-bottom: 5vw;
  }
  .archive-index-item {
    padding: 0.5vw 3vw;
  }
}