.sst-op-archive,
.sst-op-detail {
  color: #181818;
}

.sst-op-archive__head {
  margin: 0 0 24px;
}

.sst-op-kicker {
  color: #9e2c5f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.sst-op-archive h2,
.sst-op-detail h1,
.sst-op-detail h2,
.sst-op-detail h3 {
  letter-spacing: 0;
}

.sst-op-archive h2 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0;
}

.sst-op-empty {
  color: #666;
  margin: 24px 0;
}

.sst-op-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sst-op-card {
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.sst-op-card__media {
  aspect-ratio: 16 / 10;
  background: #f6f2f4;
  display: block;
  overflow: hidden;
}

.sst-op-card__media img,
.sst-op-card__media video,
.sst-op-detail__media img,
.sst-op-detail__media video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sst-op-card__body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.sst-op-card__status {
  color: #9e2c5f;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sst-op-card h3 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

.sst-op-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sst-op-card__facts span {
  border: 1px solid #ece6e9;
  border-radius: 6px;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 8px;
}

.sst-op-card__hash {
  color: #666;
  display: grid;
  gap: 4px;
  margin: 0;
}

.sst-op-card__hash span,
.sst-op-verification__hash span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sst-op-card__hash code,
.sst-op-verification__hash code,
.sst-op-hash {
  overflow-wrap: anywhere;
}

.sst-op-breadcrumb {
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  margin: 22px 0;
}

.sst-op-detail__hero {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  margin: 0 0 32px;
}

.sst-op-detail__media {
  aspect-ratio: 4 / 3;
  background: #f6f2f4;
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  overflow: hidden;
}

.sst-op-detail__summary {
  align-content: start;
  display: grid;
  gap: 18px;
}

.sst-op-detail h1 {
  font-size: 38px;
  line-height: 1.08;
  margin: 0;
}

.sst-op-facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.sst-op-facts div {
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  padding: 12px;
}

.sst-op-facts dt {
  color: #666;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.sst-op-facts dd {
  font-weight: 800;
  margin: 0;
}

.sst-op-buybox {
  align-items: end;
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
}

.sst-op-buybox label {
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.sst-op-buybox input[type="number"] {
  border: 1px solid #d9d2d6;
  border-radius: 6px;
  min-height: 42px;
  padding: 8px 10px;
  width: 96px;
}

.sst-op-button {
  align-items: center;
  background: #151515;
  border: 1px solid #151515;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 850;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  text-decoration: none;
}

.sst-op-button:hover,
.sst-op-button:focus {
  background: #9e2c5f;
  border-color: #9e2c5f;
  color: #fff;
}

.sst-op-button--secondary {
  background: #fff;
  color: #151515;
}

.sst-op-section {
  border-top: 1px solid #eee8eb;
  padding: 28px 0;
}

.sst-op-section h2 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 16px;
}

.sst-op-highlight-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sst-op-content-card {
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.sst-op-content-card__image {
  aspect-ratio: 4 / 3;
  background: #f6f2f4;
  border-radius: 6px;
  overflow: hidden;
}

.sst-op-content-card__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sst-op-content-card h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.sst-op-content-card p {
  margin: 0;
}

.sst-op-muted {
  color: #666;
}

.sst-op-lineup {
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  overflow-x: auto;
}

.sst-op-lineup table {
  border-collapse: collapse;
  min-width: 680px;
  width: 100%;
}

.sst-op-lineup th,
.sst-op-lineup td {
  border-bottom: 1px solid #eee8eb;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.sst-op-lineup th {
  background: #faf7f9;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.sst-op-lineup td span {
  color: #666;
  display: block;
  margin-top: 4px;
}

.sst-op-verification {
  background: #faf7f9;
  border: 1px solid #e7e0e4;
  border-radius: 8px;
  margin: 0 0 40px;
  padding: 22px;
}

.sst-op-verification__hash {
  background: #fff;
  border: 1px dashed #cbbec5;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  margin: 16px 0;
  padding: 12px;
}

.sst-op-verification__reveal {
  display: grid;
  gap: 12px;
}

.sst-op-verification__reveal label {
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.sst-op-verification__reveal input,
.sst-op-verification__reveal textarea {
  border: 1px solid #d9d2d6;
  border-radius: 6px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 10px;
  width: 100%;
}

.sst-op-verify-result[data-ok="1"] {
  color: #0f7a5f;
  font-weight: 800;
}

.sst-op-verify-result[data-ok="0"] {
  color: #b42318;
  font-weight: 800;
}

.sst-op-media-placeholder {
  align-items: center;
  background: #f6f2f4;
  color: #9e2c5f;
  display: flex;
  font-size: 18px;
  font-weight: 850;
  height: 100%;
  justify-content: center;
  min-height: 220px;
}

@media (max-width: 900px) {
  .sst-op-grid,
  .sst-op-detail__hero,
  .sst-op-highlight-grid {
    grid-template-columns: 1fr;
  }

  .sst-op-detail h1 {
    font-size: 30px;
  }

  .sst-op-facts {
    grid-template-columns: 1fr;
  }
}
