/* Approved mobile return-skin gallery C. Existing DOM, data and desktop retained. */
@media (max-width: 860px) {
  .skin-hero-card.is-clickable,
  .skin-hero-card.is-clickable:hover {
    --gallery-art-height: clamp(128px, 37vw, 210px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--gallery-art-height) auto auto auto auto auto;
    gap: 0; padding: 0; border: 0; border-radius: 12px;
    overflow: hidden; background: #faf9f6; box-shadow: none;
    align-content: start; isolation: isolate;
  }
  .skin-hero-card.is-clickable .hero-avatar {
    grid-column: 1; grid-row: 1; width: 100%; height: var(--gallery-art-height);
    aspect-ratio: auto; border-radius: 0; margin: 0;
    position: relative; overflow: hidden; background: #514b41;
  }
  .skin-hero-card.is-clickable .hero-avatar img {
    border-radius: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  }
  .skin-hero-card.is-clickable .hero-avatar::after {
    content: ""; position: absolute; inset: 28% 0 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.68) 65%, rgba(0,0,0,.86) 100%);
  }
  .skin-hero-card.is-clickable .hero-rank {
    top: 8px; left: 8px; min-width: 23px; height: 23px;
    font-size: 12px; font-weight: 600; background: #fff; color: #302c27;
    border: 0; z-index: 2;
  }
  .skin-hero-card.is-clickable .hero-card-top {
    grid-column: 1; grid-row: 1; align-self: end; z-index: 1;
    margin: 0 12px 30px; pointer-events: none;
  }
  .skin-hero-card.is-clickable .hero-name {
    color: #fff; font-size: 17px; line-height: 1.4; font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
  }
  .skin-hero-card.is-clickable .hero-role-tags {
    grid-column: 1; grid-row: 1; align-self: end; z-index: 1;
    margin: 0 12px 11px; gap: 3px 6px; pointer-events: none;
  }
  .skin-hero-card.is-clickable .role-chip {
    color: #fff; font-size: 11px; line-height: 1.4; background: transparent;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
  }
  /* Keep the redundant label available to assistive technology, outside the visual grid. */
  .skin-hero-card.is-clickable .latest-skin {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .skin-hero-card.is-clickable .skin-name-row {
    grid-column: 1; grid-row: 2; margin: 12px 12px 0;
    min-height: 28px; gap: 4px 6px; align-items: center; justify-content: space-between;
  }
  .skin-hero-card.is-clickable .skin-name { font-size: 16px; font-weight: 600; line-height: 1.4; }
  .skin-hero-card.is-clickable .skin-tag-img { width: 38px; max-height: 20px; }
  .skin-hero-card.is-clickable .wait-days,
  .skin-hero-card.is-clickable .wait-days.is-active {
    grid-column: 1; grid-row: 3; margin: 6px 12px 8px; padding: 0;
    width: auto; border: 0; background: transparent; border-radius: 0;
    gap: 4px; color: #80571c; align-items: baseline; justify-content: flex-start;
  }
  .skin-hero-card.is-clickable .wait-days strong { font-size: 24px; letter-spacing: -.5px; line-height: 1.3; }
  .skin-hero-card.is-clickable .wait-days span { font-size: 12px; color: #80571c; }
  .skin-hero-card.is-clickable .wait-days.is-active strong { font-size: 22px; }
  .skin-hero-card.is-clickable .skin-date {
    grid-column: 1; grid-row: 4; margin: 0 12px; font-size: 12px; line-height: 1.7;
    color: #716b62; overflow-wrap: anywhere;
  }
  .skin-hero-card.is-clickable .skin-date + .skin-date { grid-row: 5; }
  .skin-hero-card.is-clickable .return-meta-row {
    grid-column: 1; grid-row: 6; margin: 10px 12px 12px; gap: 5px;
  }
  .skin-hero-card.is-clickable .return-count { background: #fff; color: #716b62; font-size: 11px; }
  .skin-hero-card.is-clickable .no-direct-sale-badge { font-size: 11px; }
  .skin-hero-card.is-clickable:focus-visible { outline: 2px solid #80571c; outline-offset: 3px; }
}