.accessories-hub {
  padding: 90px 7vw;
  background: #080808;
  border-block: 1px solid #292929;
}

.accessories-hub__header {
  max-width: 820px;
  margin-bottom: 34px;
}

.accessories-hub__header h2 {
  margin: 12px 0 16px;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.accessories-hub__header > p:last-child {
  color: #8f8f8f;
  line-height: 1.65;
}

.accessories-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.accessories-hub details {
  grid-row: 1;
  border: 1px solid #343434;
  background: linear-gradient(145deg, #111, #090909);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.accessories-hub details:hover,
.accessories-hub details:focus-within {
  border-color: #ff5a00;
  background: linear-gradient(145deg, #17100c, #090909);
  box-shadow: 0 0 32px #ff5a001c;
  transform: translateY(-2px);
}

.accessories-hub details[open] {
  grid-column: 1 / -1;
  grid-row: 2;
  border-color: #ff5a006e;
}

.accessories-hub summary {
  min-height: 180px;
  padding: 26px;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.accessories-hub summary::-webkit-details-marker { display: none; }
.accessories-hub summary small { color: #ff5a00; font-weight: 800; letter-spacing: .14em; }
.accessories-hub summary b { margin: 12px 0 8px; font-size: 1.35rem; text-transform: uppercase; }
.accessories-hub summary span { color: #888; line-height: 1.45; }
.accessories-hub summary em { margin-top: 18px; color: #ddd; font-size: .62rem; font-style: normal; font-weight: 800; letter-spacing: .12em; transition: color .2s ease, transform .2s ease; }
.accessories-hub details:hover summary em,
.accessories-hub details:focus-within summary em,
.accessories-hub details[open] summary em { color: #ff5a00; transform: translateX(4px); }
.accessories-hub summary:focus-visible { outline: 2px solid #ff5a00; outline-offset: -3px; }
.accessories-hub details > section { margin: 0; }

.cap-colors {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 5vw;
  align-items: center;
  background: linear-gradient(135deg, #111, #050505);
}

.cap-colors__copy h2 {
  margin: 12px 0 22px;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.cap-colors__copy > p:not(.eyebrow) { color: #999; line-height: 1.65; }
.cap-colors__copy > small { display: block; margin-top: 24px; color: #666; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.cap-colors__visual { min-width: 0; padding: 22px; border: 1px solid #33271f; background: #050505; }
.cap-colors__visual img { width: 100%; height: auto; object-fit: contain; }

@media (max-width: 800px) {
  .accessories-hub { padding: 72px 22px; }
  .accessories-hub__grid { grid-template-columns: 1fr; }
  .accessories-hub details,
  .accessories-hub details[open] { grid-column: 1; grid-row: auto; }
  .accessories-hub summary { min-height: 145px; }
  .cap-colors { grid-template-columns: 1fr; padding: 65px 22px; }
}