/* ==========================================================================
   The Street Cred Shop (Stitch c79f)
   ========================================================================== */

.screen-shop .shop { container-type: inline-size; max-width: 72rem; }

/* ---- Hero -------------------------------------------------------------- */
.screen-shop .shop-hero {
  display: grid;
  margin-bottom: 3rem;
  overflow: hidden;
  background: var(--surface-low);
  border: 8px solid var(--surface-high);
  box-shadow: 12px 12px 0 var(--navy);
}
.screen-shop .shop-hero__media {
  position: relative;
  height: 22rem;
  background: #000;
  border-bottom: 8px solid var(--surface-high);
}
.screen-shop .shop-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) brightness(0.75);
}
.screen-shop .shop-hero__name {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.5rem;
  background: var(--peach);
  color: var(--on-peach);
  font: italic 700 1.25rem/1 var(--font-head);
  letter-spacing: -0.02em;
}
.screen-shop .shop-hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}
.screen-shop .shop-hero__dither {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  opacity: 0.35;
  pointer-events: none;
}
.screen-shop .shop-hero__title {
  position: relative;
  margin-bottom: 1rem;
  color: var(--cyan);
  font-size: clamp(2.5rem, 6cqi, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.screen-shop .shop-hero__quote {
  max-width: 28rem;
  margin: 0 0 2rem;
  padding: 1rem;
  background: var(--surface-highest);
  border-left: 4px solid var(--peach);
  color: var(--violet);
  font: 0.875rem/1.45 var(--font-head);
  letter-spacing: 0.1em;
}
.screen-shop .shop-hero__stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.screen-shop .shop-hero__stat {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--surface-lowest);
  border: 2px solid var(--cyan-deep);
}
.screen-shop .shop-hero__stat dt {
  color: rgb(0 220 229 / 0.6);
  font: 0.75rem/1.3 var(--font-head);
  text-transform: uppercase;
}
.screen-shop .shop-hero__stat dd {
  margin: 0;
  color: var(--cyan);
  font: 700 1.5rem/1.2 var(--font-head);
}

@container (min-width: 760px) {
  .screen-shop .shop-hero { grid-template-columns: 5fr 7fr; }
  .screen-shop .shop-hero__media {
    height: auto;
    min-height: 26rem;
    border-bottom: 0;
    border-right: 8px solid var(--surface-high);
  }
}

/* ---- Tabs -------------------------------------------------------------- */
.screen-shop .shop-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.screen-shop .shop-tab {
  padding: 0.75rem 2rem;
  background: var(--surface-high);
  color: var(--on-surface-variant);
  font: 700 0.875rem/1.2 var(--font-head);
  letter-spacing: 0.1em;
  text-decoration: none;
}
.screen-shop .shop-tab:hover { background: var(--surface-bright); color: var(--on-surface); }
.screen-shop .shop-tab.is-active { background: var(--cyan); color: var(--on-cyan); }

/* ---- Grid -------------------------------------------------------------- */
.screen-shop .shop-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.screen-shop .shop-grid:focus { outline: none; }
@container (min-width: 520px) {
  .screen-shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-shop .shop-item--featured { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 780px) {
  .screen-shop .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Item cards -------------------------------------------------------- */
.screen-shop .shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  overflow: hidden;
  background: var(--surface-container);
  border: 4px solid var(--surface-high);
}
.screen-shop .shop-item.is-equipped { border-color: var(--cyan-deep); }
.screen-shop .shop-item:focus { outline: none; }
.screen-shop .shop-item:focus-visible { outline: 3px solid var(--cyan-bright); outline-offset: 3px; }
/* Violet corner shard from the design. */
.screen-shop .shop-item:not(.shop-item--featured):not(.shop-item--booster)::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 6rem;
  height: 6rem;
  background: rgb(213 186 255 / 0.1);
  transform: rotate(45deg);
  pointer-events: none;
}

.screen-shop .shop-item__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.25rem 0.75rem;
  background: var(--peach);
  color: var(--on-peach);
  font: 700 0.75rem/1.2 var(--font-head);
}

.screen-shop .shop-item__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  background: var(--surface-lowest);
  border: 4px solid var(--surface-highest);
}
.screen-shop .shop-item__media img { position: relative; width: 8rem; height: 8rem; object-fit: contain; }
.screen-shop .shop-item__dither { position: absolute; inset: 20%; opacity: 0.4; }
.screen-shop .shop-item__icon { color: var(--cyan); font-size: 3.75rem; }
.screen-shop .shop-item__equipped {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--cyan);
  color: var(--on-cyan);
  font: 700 0.625rem/1.2 var(--font-head);
  letter-spacing: 0.1em;
}

.screen-shop .shop-item__body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 1rem; }
.screen-shop .shop-item__title {
  margin-bottom: 0.5rem;
  color: var(--cyan);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}
.screen-shop .shop-item__desc { color: var(--on-surface-variant); font-size: 0.75rem; line-height: 1.5; }
.screen-shop .shop-item__quote { margin-top: 0.75rem; color: var(--on-surface-variant); font-size: 0.75rem; font-style: italic; }
.screen-shop .shop-item__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding: 0; list-style: none; }
.screen-shop .shop-item__tag {
  padding: 0.25rem 0.5rem;
  background: var(--surface-highest);
  border: 1px solid var(--outline-variant);
  font-size: 0.625rem;
  line-height: 1.3;
}
.screen-shop .shop-item__note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  color: var(--peach);
  font: 700 0.625rem/1.3 var(--font-head);
  letter-spacing: 0.1em;
}
.screen-shop .shop-item__note .ms { font-size: 1rem; }

/* Featured: wide hero card, image left / details right. */
.screen-shop .shop-item--featured { display: grid; padding: 0; }
.screen-shop .shop-item--featured .shop-item__media {
  aspect-ratio: auto;
  min-height: 16rem;
  margin: 0;
  padding: 1.5rem;
  border: 0;
  border-bottom: 4px solid var(--surface-high);
}
.screen-shop .shop-item--featured .shop-item__media img { width: 12rem; height: 12rem; }
.screen-shop .shop-item--featured .shop-item__icon { font-size: 6rem; }
.screen-shop .shop-item--featured .shop-item__body { padding: 1.5rem; }
.screen-shop .shop-item--featured .shop-item__title { padding-right: 6.5rem; font-size: 1.5rem; }
.screen-shop .shop-item--featured .shop-item__desc { font-size: 0.875rem; }
@container (min-width: 520px) {
  .screen-shop .shop-item--featured .shop-item__media { border-bottom: 0; border-right: 4px solid var(--surface-high); }
}

/* Booster: tinted header block instead of a media tile. */
.screen-shop .shop-item__head {
  margin: -1.5rem -1.5rem 1rem;
  padding: 1.5rem;
  background: rgb(0 220 229 / 0.1);
  border-bottom: 4px solid var(--surface-high);
}
.screen-shop .shop-item__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: var(--cyan);
}
.screen-shop .shop-item__flag {
  padding: 0.125rem 0.5rem;
  background: var(--cyan);
  color: var(--on-cyan);
  font: 700 0.625rem/1.4 var(--font-head);
}
.screen-shop .shop-item__head .shop-item__title { margin: 0; }

/* Locked */
.screen-shop .shop-item.is-locked { background: var(--surface-low); opacity: 0.6; }
.screen-shop .shop-item__lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgb(18 18 29 / 0.4);
  color: var(--peach);
  font: 700 0.75rem/1.2 var(--font-head);
  text-transform: uppercase;
}
.screen-shop .shop-item__lock .ms { font-size: 3rem; }

/* ---- Item buttons ------------------------------------------------------ */
.screen-shop .shop-item__action { margin: 0; }
.screen-shop .shop-btn {
  --edge: var(--cyan-deep);
  width: 100%;
  padding: 1rem;
  box-shadow: inset 0 -4px 0 var(--edge);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.screen-shop .shop-btn:active { transform: translateY(2px); box-shadow: none; }
.screen-shop .shop-btn--peach { --btn-bg: var(--peach); --btn-ink: var(--on-peach); --edge: #7f2b00; }
.screen-shop .shop-btn--dark { --btn-bg: var(--surface-highest); --btn-ink: var(--cyan); }
.screen-shop .shop-btn--dark:hover { --btn-bg: var(--cyan-deep); filter: none; }
.screen-shop .shop-btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--cyan);
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.screen-shop .shop-btn--ghost:hover { --btn-bg: rgb(0 220 229 / 0.12); filter: none; }
.screen-shop .shop-btn--equipped { --btn-bg: var(--cyan); --btn-ink: var(--on-cyan); }
.screen-shop .shop-btn--equipped[disabled] { cursor: default; filter: none; opacity: 1; box-shadow: inset 0 -4px 0 var(--edge); }
.screen-shop .shop-btn--locked,
.screen-shop .shop-btn--locked[disabled] {
  --btn-bg: var(--surface-highest);
  --btn-ink: var(--on-surface-variant);
  box-shadow: none;
  filter: none;
  opacity: 1;
}

/* ---- Shop status terminal ---------------------------------------------- */
.screen-shop .shop-status { position: relative; margin-top: 3rem; }
.screen-shop .shop-status__title {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  z-index: 1;
  padding: 0 0.5rem;
  background: var(--surface-lowest);
  color: var(--peach);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
.screen-shop .shop-status__body { border: 4px solid var(--navy); font-size: 0.75rem; }
.screen-shop .shop-status__body .terminal__line { margin-bottom: 0.25rem; }
.screen-shop .terminal__line.is-new { animation: shop-line 0.6s steps(4); }
@keyframes shop-line { 0%, 50% { background: rgb(0 220 229 / 0.18); } }
.screen-shop .shop-status__prompt { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.screen-shop .shop-status__cursor { flex-shrink: 0; width: 0.5rem; height: 1rem; background: var(--cyan); animation: pulse 1.2s steps(2) infinite; }
.screen-shop .shop-status__prompt span:last-child { color: var(--on-surface-variant); font-style: italic; }

@media (max-width: 640px) {
  .screen-shop .shop-hero__body { padding: 1.5rem 1.25rem; }
  .screen-shop .shop-hero__stat dd { font-size: 1.25rem; }
  .screen-shop .shop-tab { flex: 1 1 auto; padding-inline: 1rem; text-align: center; }
  .screen-shop .shop-item--featured .shop-item__title { padding-right: 0; margin-top: 1.5rem; }
}