.availability-tabs {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.availability-tab {
  min-width: 0;
  border: 1px solid #dfd2da;
  border-radius: 12px;
  background: #fff;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #5e5159;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.availability-tab b { font-size: 11px; color: #8a7d85; }
.availability-tab.active { border-color: #3d3038; background: #332a30; color: #fff; }
.availability-tab.active b { color: #fff; }
.availability-tab-buyable:not(.active) { border-color: #b8dccb; background: #f5fcf8; color: #176b4b; }
.availability-tab-ended:not(.active) { border-color: #d8d4d6; background: #f8f7f7; color: #6f666b; }
.availability-tab-pending:not(.active) { border-color: #d9d1e7; background: #faf8fd; color: #675d78; }

.availability-badge {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  max-width: calc(100% - 18px);
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: 0 3px 12px rgba(36,34,42,.08);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.availability-line {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.35;
}
.availability-line strong { font-size: 12px; }
.availability-line span { opacity: .82; }
.availability-available { color: #176b4b; background: #eef9f3; border-color: #b9dec9; }
.availability-reserve { color: #9c3d70; background: #fff0f7; border-color: #edc2d8; }
.availability-low { color: #87541f; background: #fff6e9; border-color: #efd3a6; }
.availability-ended { color: #625a5f; background: #f3f1f2; border-color: #d8d3d6; }
.availability-unknown { color: #655d75; background: #f6f3fb; border-color: #d9d1e7; }

.card-ended { border-color: #dfdbdd; background: #fcfbfb; }
.card-ended .card-image img { opacity: .76; filter: grayscale(.12); }
.card-ended .price-ended { color: #756d72; font-size: 16px; }
.card-unknown .price { color: #655d75; }

.product-modal-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.availability-pill,
.shop-status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.availability-pill { padding: 6px 9px; font-size: 11px; }
.shop-status-pill { padding: 4px 7px; font-size: 9px; }
.product-modal-status-detail { color: #746971; font-size: 10px; font-weight: 700; }

.product-modal-shop-list { gap: 12px; }
.product-modal-shop-group {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #eadfe5;
  border-radius: 14px;
  background: #fff;
}
.product-modal-shop-group-title,
.product-modal-shop-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #554950;
  font-size: 11px;
}
.product-modal-shop-group-title span,
.product-modal-shop-group > summary span {
  color: #8c8088;
  font-size: 10px;
  font-weight: 700;
}
.product-modal-shop-group > summary {
  cursor: pointer;
  list-style: none;
}
.product-modal-shop-group > summary::-webkit-details-marker { display: none; }
.product-modal-shop-group-collapsible > summary::after {
  content: "＋";
  margin-left: 4px;
  color: #8c8088;
}
.product-modal-shop-group-collapsible[open] > summary::after { content: "−"; }
.product-modal-shop-group-body { display: grid; gap: 7px; }
.product-modal-shop-group-collapsible:not([open]) .product-modal-shop-group-body { display: none; }
.product-modal-shop-group-collapsible[open] .product-modal-shop-group-body { margin-top: 2px; }
.product-modal-shop-link.shop-ended { background: #fbfafa; border-color: #dfdbdd; }
.product-modal-shop-link.shop-ended .product-modal-shop-side strong { color: #777075; }
.product-modal-shop-link.shop-unknown { background: #fcfbfe; }
.product-modal-shop-side small b { color: #b04e81; }

@media (max-width: 680px) {
  .availability-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .availability-tab { padding: 9px 10px; font-size: 11px; }
  .availability-badge { top: 7px; left: 7px; padding: 5px 7px; font-size: 9px; }
  .availability-line { padding: 7px 8px; font-size: 9px; }
  .availability-line strong { font-size: 11px; }
  .product-modal-shop-group { padding: 8px; }
  .availability-pill { font-size: 10px; }
}