.items-shell {
  --it-text: rgba(245, 247, 255, 0.96);
  --it-soft: rgba(203, 213, 244, 0.78);
  --it-cyan: #8fd7ff;
  --it-ice: #b6ecff;
  --it-gold: #e8c67b;
  --it-danger: #ff9d8c;
  --it-success: #9fe0b4;
  --it-panel: rgba(9, 14, 30, 0.94);
  --it-panel-2: rgba(13, 20, 40, 0.96);
  --it-line: rgba(149, 211, 255, 0.14);
  --it-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  width: min(1220px, calc(100% - 1.25rem));
  margin: 1.25rem auto 3rem;
  color: var(--it-text);
}

body.items-theme--fighter .items-shell,
body.items-theme--generic .items-shell {
  --it-cyan: #ffb36b;
  --it-ice: #ffd7b1;
  --it-gold: #ffcf70;
  --it-line: rgba(255, 176, 97, 0.18);
}

body.items-theme--marksman .items-shell {
  --it-cyan: #83d7ff;
  --it-ice: #cff6ff;
  --it-gold: #f5de83;
  --it-line: rgba(123, 221, 255, 0.18);
}

body.items-theme--tank .items-shell {
  --it-cyan: #7cd7b2;
  --it-ice: #c9ffe9;
  --it-gold: #d7ef9a;
  --it-line: rgba(129, 221, 177, 0.18);
}

body.items-theme--support .items-shell {
  --it-cyan: #74d8ff;
  --it-ice: #defcff;
  --it-gold: #ffe7a4;
  --it-line: rgba(116, 216, 255, 0.18);
}

body.items-theme--arcane .items-shell {
  --it-cyan: #d88fff;
  --it-ice: #f0d7ff;
  --it-gold: #ffb8ee;
  --it-line: rgba(216, 143, 255, 0.18);
}

body.items-theme--boots .items-shell {
  --it-cyan: #9bb5ff;
  --it-ice: #d9e3ff;
  --it-gold: #d7ddff;
  --it-line: rgba(155, 181, 255, 0.18);
}

.items-shell a {
  color: var(--it-text);
  text-decoration: none;
}

.items-hero,
.items-card,
.items-detail__hero,
.items-detail__panel,
.items-detail__accordion {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--it-line);
  background:
    radial-gradient(circle at top right, rgba(119, 193, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(10, 13, 29, 0.96), rgba(6, 8, 19, 0.98));
  border-radius: 24px;
  box-shadow: var(--it-shadow);
}

.items-hero::before,
.items-card::before,
.items-detail__hero::before,
.items-detail__panel::before,
.items-detail__accordion::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 215, 255, 0), rgba(143, 215, 255, 0.5), rgba(232, 198, 123, 0));
}

.items-hero {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  margin-bottom: 1.15rem;
}

.items-index__hero {
  background:
    radial-gradient(circle at top right, rgba(255, 197, 107, 0.18), transparent 26%),
    radial-gradient(circle at left center, rgba(122, 210, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(11, 17, 36, 0.96), rgba(6, 10, 22, 0.98));
}

.items-hero__editorial {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.items-hero__pitch {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.56;
  color: var(--it-soft);
}

/* ── Featured panel (right column) ── */
.items-featured-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  border: 1px solid rgba(143, 215, 255, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 197, 107, 0.12), transparent 40%),
    radial-gradient(circle at bottom left, rgba(122, 210, 255, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(11, 17, 36, 0.97), rgba(6, 10, 22, 0.99));
}

.items-featured-panel__label {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--it-cyan);
}

.items-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  flex: 1;
}

.items-featured-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: border-color 0.16s, background 0.16s;
}

.items-featured-card:hover {
  border-color: rgba(143, 215, 255, 0.36);
  background: rgba(143, 215, 255, 0.06);
}

.items-featured-card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.items-featured-card__head img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}

.items-featured-card__cat {
  display: block;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--it-cyan);
  margin-bottom: 0.2rem;
}

.items-featured-card__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--it-text);
  line-height: 1.1;
}

.items-featured-card__why {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--it-soft);
  flex: 1;
}

/* ── Pulse — featured items (legacy, kept for mobile) ── */
.items-index__pulse {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.items-pulse__label {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--it-soft);
}

.items-pulse__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.items-pulse__card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(143, 215, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: border-color 0.16s, background 0.16s;
}

.items-pulse__card:hover {
  border-color: rgba(143, 215, 255, 0.42);
  background: rgba(143, 215, 255, 0.07);
}

.items-pulse__card img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}

.items-pulse__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.items-pulse__card-body strong {
  font-size: 0.8rem;
  color: var(--it-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.items-pulse__card-body span {
  font-size: 0.7rem;
  color: var(--it-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.items-hero__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.items-hero__cat {
  padding: 0.52rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(143, 215, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--it-soft);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
  white-space: nowrap;
}

.items-hero__cat:hover {
  border-color: rgba(143, 215, 255, 0.46);
  background: rgba(143, 215, 255, 0.08);
  color: var(--it-ice);
}

.items-hero__cat.is-active {
  border-color: var(--it-cyan);
  background: rgba(143, 215, 255, 0.14);
  color: var(--it-cyan);
  font-weight: 600;
}

.items-index__hero-links-label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--it-soft);
}

.items-hero__eyebrow {
  margin: 0 0 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--it-cyan);
  font-size: 0.76rem;
}

.items-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.1rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 35%, #00c8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.items-hero p,
.items-detail__intro,
.items-detail__panel p,
.items-detail__panel li,
.items-detail__accordion li,
.items-card__summary,
.items-card__meta,
.entity-inline small {
  color: var(--it-soft);
}

.items-hero__panel {
  border: 1px solid rgba(151, 167, 255, 0.12);
  border-radius: 20px;
  background: rgba(7, 10, 23, 0.72);
  padding: 1rem;
}

.items-index__hero-panel {
  display: grid;
  gap: 1rem;
}

.items-index__hero-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 1rem;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 34%),
    linear-gradient(180deg, rgba(13, 18, 37, 0.96), rgba(7, 11, 23, 0.98));
}

.items-index__hero-panel--fighter .items-index__hero-card,
.items-index__hero-panel--generic .items-index__hero-card {
  background:
    radial-gradient(circle at top right, rgba(255, 184, 95, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(29, 19, 11, 0.96), rgba(10, 10, 19, 0.98));
}

.items-index__hero-panel--support .items-index__hero-card {
  background:
    radial-gradient(circle at top right, rgba(117, 218, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(10, 25, 35, 0.96), rgba(8, 12, 21, 0.98));
}

.items-index__hero-panel--arcane .items-index__hero-card {
  background:
    radial-gradient(circle at top right, rgba(216, 143, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(26, 16, 40, 0.96), rgba(10, 9, 23, 0.98));
}

.items-index__hero-panel--tank .items-index__hero-card {
  background:
    radial-gradient(circle at top right, rgba(126, 218, 165, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(11, 29, 23, 0.96), rgba(8, 14, 17, 0.98));
}

.items-index__hero-panel--marksman .items-index__hero-card {
  background:
    radial-gradient(circle at top right, rgba(114, 213, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(11, 24, 38, 0.96), rgba(8, 11, 24, 0.98));
}

.items-index__hero-panel--boots .items-index__hero-card {
  background:
    radial-gradient(circle at top right, rgba(156, 182, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(18, 21, 39, 0.96), rgba(9, 11, 25, 0.98));
}

.items-index__hero-card-top,
.items-index__rail-head,
.items-index__catalog-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: end;
}

.items-index__hero-label,
.items-index__spotlight-kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--it-cyan);
}

.items-index__hero-spotlight {
  display: grid;
  gap: 1rem;
  margin: 0.9rem 0;
}

.items-index__hero-art {
  position: relative;
  min-height: 210px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.items-index__hero-watermark {
  position: absolute;
  inset: 0.8rem 1rem auto auto;
  font-size: clamp(2rem, 7vw, 4.6rem);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.05);
}

.items-index__hero-art img {
  width: min(180px, 58vw);
  height: auto;
  transform: rotate(-10deg);
  filter: drop-shadow(0 22px 30px rgba(0,0,0,0.36));
}

.items-index__hero-copy h2 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 0.95;
}

.items-index__hero-copy p,
.items-index__rail-head p,
.items-index__catalog-head p {
  margin: 0;
  color: var(--it-soft);
}

.items-index__hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.items-index__hero-tags span {
  padding: 0.42rem 0.68rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--it-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.items-index__hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.items-hero__stats {
  display: grid;
  gap: 0.75rem;
}

.items-hero__stats article,
.items-index__featured-card,
.items-index__footer-card {
  border: 1px solid rgba(149, 211, 255, 0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  padding: 0.9rem;
}

.items-hero__stats strong {
  display: block;
  font-size: 1.5rem;
  color: var(--it-gold);
}

.items-hero__stats span {
  color: var(--it-soft);
  font-size: 0.9rem;
}

.items-search span,
.items-filter span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(186, 200, 255, 0.75);
}

.items-search input,
.items-filter select {
  width: 100%;
  border: 1px solid rgba(151, 167, 255, 0.18);
  border-radius: 14px;
  background: rgba(9, 12, 27, 0.82);
  color: #f4f6ff;
  padding: 0.85rem 0.95rem;
}

.items-filters-shell {
  border: 1px solid rgba(143, 215, 255, 0.28);
  border-radius: 18px;
  background: rgba(143, 215, 255, 0.04);
  overflow: hidden;
  transition: border-color 0.18s, background 0.18s;
}

.items-filters-shell:not([open]):hover {
  border-color: rgba(143, 215, 255, 0.55);
  background: rgba(143, 215, 255, 0.08);
}

.items-filters-shell[open] {
  border-color: rgba(143, 215, 255, 0.5);
  background: rgba(255,255,255,0.03);
}

.items-filters-shell summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  transition: background 0.18s;
  user-select: none;
}

.items-filters-shell summary:hover {
  background: rgba(143, 215, 255, 0.04);
}

.items-filters-shell summary::-webkit-details-marker {
  display: none;
}

.items-filters-shell summary span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--it-ice);
}

.items-filters-shell summary span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 4.5px / 70% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 9px / 40% 1.5px no-repeat;
  flex-shrink: 0;
  opacity: 0.85;
}

.items-filters-shell summary span::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
  opacity: 0.8;
}

.items-filters-shell[open] summary span::after {
  transform: rotate(-135deg) translateY(2px);
}

.items-filters-shell summary small {
  color: var(--it-soft);
  font-size: 0.82rem;
}

.items-filters-shell[open] summary {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.items-filters-shell .items-filters {
  margin-top: 0;
  padding: 1rem;
}

.items-filters,
.items-grid,
.items-detail__signal-strip,
.items-detail__topgrid,
.items-detail__decision,
.items-detail__champions,
.items-detail__mesh {
  display: grid;
  gap: 0.95rem;
}

.items-filters {
  margin-top: 0.9rem;
}

.items-index__featured,
.items-index__footer {
  display: grid;
  gap: 0.95rem;
  margin: 0 0 1rem;
}

.items-index__rail {
  margin: 0 0 1rem;
}

.items-index__rail-head {
  margin-bottom: 0.85rem;
}

.items-index__rail-head h2,
.items-index__catalog-head h2 {
  margin: 0.2rem 0 0;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
}

.items-index__rail-grid {
  display: grid;
  gap: 0.95rem;
}

.items-index__spotlight {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 1rem;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 38%),
    linear-gradient(180deg, rgba(12, 17, 33, 0.96), rgba(7, 10, 23, 0.98));
  box-shadow: var(--it-shadow);
}

.items-index__spotlight--fighter,
.items-card--fighter,
.items-card--generic {
  background:
    radial-gradient(circle at top right, rgba(255, 184, 95, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(29, 19, 11, 0.96), rgba(10, 10, 19, 0.98));
}

.items-index__spotlight--marksman,
.items-card--marksman {
  background:
    radial-gradient(circle at top right, rgba(120, 216, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(11, 24, 38, 0.96), rgba(8, 11, 24, 0.98));
}

.items-index__spotlight--tank,
.items-card--tank {
  background:
    radial-gradient(circle at top right, rgba(126, 218, 165, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(11, 29, 23, 0.96), rgba(8, 14, 17, 0.98));
}

.items-index__spotlight--support,
.items-card--support {
  background:
    radial-gradient(circle at top right, rgba(117, 218, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(10, 25, 35, 0.96), rgba(8, 12, 21, 0.98));
}

.items-index__spotlight--arcane,
.items-card--arcane {
  background:
    radial-gradient(circle at top right, rgba(216, 143, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(26, 16, 40, 0.96), rgba(10, 9, 23, 0.98));
}

.items-index__spotlight--boots,
.items-card--boots {
  background:
    radial-gradient(circle at top right, rgba(156, 182, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(18, 21, 39, 0.96), rgba(9, 11, 25, 0.98));
}

.items-index__spotlight-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.items-index__spotlight h3 {
  margin: 0 0 0.7rem;
  font-size: 1.08rem;
}

.items-index__spotlight p {
  margin: 0 0 0.85rem;
  color: var(--it-soft);
}

.items-index__catalog-head {
  margin: 1.1rem 0 0.95rem;
}

.items-index__featured-card h2,
.items-index__footer-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.items-index__featured-card p,
.items-index__footer-card p {
  margin: 0;
  color: var(--it-soft);
}

.items-index__featured-card {
  min-height: 100%;
}

.items-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.95rem;
  padding: 1rem;
}

.items-card__media,
.items-detail__visual {
  display: flex;
  align-items: start;
  justify-content: center;
}

.items-card__media img,
.items-detail__visual img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255,255,255,0.08);
}

.items-card__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.items-card__top h2 {
  margin: 0;
  font-size: 1.18rem;
}

.items-card__kicker {
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: #98d0ff;
}

.items-card__cost {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  font-size: 1.16rem;
  color: var(--it-gold);
}

.items-card__cost::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url('/assets/images/moneyShop.webp') center / contain no-repeat;
  flex-shrink: 0;
}

.items-card__badges,
.items-detail__facts,
.items-detail__links,
.items-detail__related-builds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.items-card__badges span,
.items-detail__facts span {
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  background: rgba(143, 203, 255, 0.1);
  border: 1px solid rgba(143, 203, 255, 0.15);
  font-size: 0.8rem;
}

.items-card__quickline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.75rem 0 0.1rem;
}

.items-card__quickline span {
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--it-soft);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.items-card__summary {
  margin: 0.7rem 0 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.items-card__meta {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
}

.items-card__link {
  display: inline-flex;
  padding: 0.62rem 0.92rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(145, 209, 255, 0.18), rgba(245, 210, 138, 0.18));
}

.items-empty {
  margin: 1rem 0 0;
  color: rgba(255, 213, 165, 0.9);
}

.items-detail__hero {
  padding: 1.1rem;
  margin-bottom: 1rem;
  background:
    radial-gradient(circle at top right, rgba(255, 217, 149, 0.18), transparent 28%),
    radial-gradient(circle at left center, rgba(91, 187, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(14, 21, 44, 0.96), rgba(6, 10, 23, 0.98));
}

.items-detail__hero--fighter,
.items-detail__hero--generic {
  background:
    radial-gradient(circle at top right, rgba(255, 168, 91, 0.24), transparent 28%),
    radial-gradient(circle at left center, rgba(255, 214, 112, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(31, 20, 12, 0.96), rgba(11, 9, 16, 0.98));
}

.items-detail__hero--marksman {
  background:
    radial-gradient(circle at top right, rgba(112, 204, 255, 0.24), transparent 28%),
    radial-gradient(circle at left center, rgba(255, 224, 142, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(11, 24, 38, 0.96), rgba(7, 10, 23, 0.98));
}

.items-detail__hero--tank {
  background:
    radial-gradient(circle at top right, rgba(126, 218, 165, 0.24), transparent 28%),
    radial-gradient(circle at left center, rgba(188, 255, 214, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(12, 28, 22, 0.96), rgba(8, 14, 15, 0.98));
}

.items-detail__hero--support {
  background:
    radial-gradient(circle at top right, rgba(117, 219, 255, 0.24), transparent 28%),
    radial-gradient(circle at left center, rgba(255, 240, 170, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(11, 24, 34, 0.96), rgba(7, 12, 20, 0.98));
}

.items-detail__hero--arcane {
  background:
    radial-gradient(circle at top right, rgba(223, 133, 255, 0.24), transparent 28%),
    radial-gradient(circle at left center, rgba(255, 189, 240, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(28, 15, 39, 0.96), rgba(11, 8, 24, 0.98));
}

.items-detail__hero--boots {
  background:
    radial-gradient(circle at top right, rgba(154, 180, 255, 0.24), transparent 28%),
    radial-gradient(circle at left center, rgba(199, 213, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(18, 20, 38, 0.96), rgba(10, 11, 25, 0.98));
}

.items-detail__hero-topline {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.items-detail__hero-kicker,
.items-detail__hero-patch {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.78rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(149, 211, 255, 0.12);
  color: var(--it-ice);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

.items-detail__hero-grid {
  display: grid;
  gap: 1rem;
}

.items-detail__visual {
  position: relative;
  min-height: 320px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at top, rgba(255, 214, 144, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(14, 20, 42, 0.9), rgba(8, 10, 22, 0.92));
  padding: 1rem;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}

.items-detail__visual--fighter,
.items-detail__visual--generic {
  background:
    radial-gradient(circle at top, rgba(255, 195, 96, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(34, 20, 10, 0.92), rgba(12, 9, 18, 0.94));
}

.items-detail__visual--marksman {
  background:
    radial-gradient(circle at top, rgba(120, 216, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(12, 23, 40, 0.92), rgba(8, 11, 24, 0.94));
}

.items-detail__visual--tank {
  background:
    radial-gradient(circle at top, rgba(124, 215, 178, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(10, 30, 22, 0.92), rgba(9, 14, 16, 0.94));
}

.items-detail__visual--support {
  background:
    radial-gradient(circle at top, rgba(126, 231, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(10, 28, 37, 0.92), rgba(9, 13, 22, 0.94));
}

.items-detail__visual--arcane {
  background:
    radial-gradient(circle at top, rgba(214, 143, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(28, 15, 44, 0.92), rgba(11, 8, 26, 0.94));
}

.items-detail__visual--boots {
  background:
    radial-gradient(circle at top, rgba(165, 186, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(19, 23, 41, 0.92), rgba(10, 12, 23, 0.94));
}

.items-detail__visual-watermark {
  position: absolute;
  inset: 1rem 1rem auto auto;
  font-size: clamp(2.3rem, 9vw, 5.6rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.items-detail__visual-orbit {
  position: absolute;
  inset: 14% auto auto 50%;
  width: min(240px, 72%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.015),
    0 0 0 44px rgba(255, 255, 255, 0.01);
}

.items-detail__visual-halo {
  position: absolute;
  inset: 19% 10% auto 10%;
  height: 150px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(114, 213, 255, 0.28), transparent 62%);
  filter: blur(10px);
}

.items-detail__visual img {
  width: min(220px, 62vw);
  height: auto;
  aspect-ratio: 1;
  transform: rotate(-8deg);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.4));
  z-index: 1;
}

.items-detail__visual-rail {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.85rem;
  align-self: end;
}

.items-detail__rail-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--it-ice);
}

.items-detail__visual-entities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.items-detail__copy {
  display: grid;
  gap: 0.85rem;
}

.items-detail__copy h1 {
  margin: 0;
  font-size: clamp(2.35rem, 9vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  max-width: 10ch;
}

.items-detail__summary {
  margin: 0;
  font-size: clamp(1.08rem, 3vw, 1.28rem);
  line-height: 1.45;
  color: var(--it-text);
}

.items-detail__intro {
  margin: 0;
  font-size: clamp(1rem, 3vw, 1.16rem);
}

.items-detail__deck {
  margin: 0;
  line-height: 1.55;
}

.items-detail__signal {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  padding: 0.9rem;
}

.items-detail__signal em {
  display: block;
  margin-bottom: 0.45rem;
  font-style: normal;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.items-detail__signal strong {
  display: block;
  font-size: 1rem;
}

.items-detail__signal--positive {
  border-color: rgba(159, 224, 180, 0.24);
}

.items-detail__signal--positive em {
  color: var(--it-success);
}

.items-detail__signal--negative {
  border-color: rgba(255, 157, 140, 0.24);
}

.items-detail__signal--negative em {
  color: var(--it-danger);
}

.items-detail__signal--neutral em {
  color: var(--it-gold);
}

.items-detail__toc {
  position: sticky;
  top: 118px;
  z-index: 18;
  margin: 1rem 0;
  padding: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  border-radius: 18px;
  border: 1px solid var(--it-line);
  background: rgba(7, 11, 24, 0.84);
  backdrop-filter: blur(10px);
}

.items-detail__toc a {
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--it-soft);
  font-size: 0.84rem;
}

.items-detail__panel,
.items-detail__accordion {
  padding: 1rem;
}

.items-detail__panel h2 {
  margin: 0 0 0.9rem;
  font-size: 1.04rem;
  letter-spacing: 0.03em;
}

.items-detail__panel--summary {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(14, 18, 34, 0.96), rgba(8, 11, 24, 0.98));
}

.items-detail__panel--snapshot {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(16, 20, 40, 0.96), rgba(7, 11, 24, 0.98));
}

.items-detail__snapshot-grid {
  display: grid;
  gap: 0.65rem;
}

.items-detail__snapshot-card {
  padding: 0.85rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.items-detail__snapshot-card em {
  display: block;
  margin-bottom: 0.4rem;
  font-style: normal;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--it-cyan);
}

.items-detail__snapshot-card strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.items-detail__quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.items-detail__quick-tags span {
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--it-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.items-detail__stats,
.items-detail__panel ul {
  margin: 0;
  padding-left: 1.1rem;
}

.items-detail__stats li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.38rem 0;
}

.items-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.items-path__sep {
  color: rgba(186, 200, 255, 0.5);
}

.items-detail__champions article,
.items-detail__stack article {
  padding: 0.95rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255,255,255,0.05);
}

.items-detail__entity-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
}

.items-detail__entity-top img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}

.items-detail__entity-top h3,
.items-detail__stack h3 {
  margin: 0;
}

.items-detail__compare-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.items-detail__compare-vs {
  color: var(--it-gold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.items-detail__accordion summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.items-detail__accordion summary::-webkit-details-marker {
  display: none;
}

.items-detail__accordion summary::after {
  content: "+";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--it-gold);
  font-size: 1.18rem;
  flex: 0 0 auto;
}

.items-detail__accordion[open] summary::after {
  content: "−";
}

.items-detail__accordion > div {
  margin-top: 0.95rem;
}

.items-detail__mesh {
  margin-top: 1rem;
}

.entity-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(143, 215, 255, 0.12);
}

.entity-inline img {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
  flex: 0 0 auto;
}

.entity-inline span {
  color: var(--it-text);
}

.entity-inline small {
  font-size: 0.76rem;
}

.entity-inline--path {
  padding: 0.35rem 0.55rem;
}

.entity-inline--compare {
  border-radius: 14px;
}

.entity-inline--build {
  justify-content: flex-start;
}

.entity-inline--featured {
  padding: 0;
  border: 0;
  background: none;
}

.entity-inline--featured img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.entity-inline--ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.items-hover-tooltip {
  position: absolute;
  z-index: 2000;
  width: min(420px, calc(100vw - 2rem));
  border: 1px solid rgba(79, 241, 214, 0.85);
  background:
    radial-gradient(circle at top right, rgba(81, 201, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(16, 24, 58, 0.98), rgba(8, 12, 31, 0.99));
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.46);
  padding: 1rem 1rem 0.95rem;
  color: #f4f7ff;
  pointer-events: none;
}

.items-hover-tooltip__head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.items-hover-tooltip__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.items-hover-tooltip h4 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.items-hover-tooltip__lead {
  margin: 0.22rem 0 0;
  color: #f6d772;
  font-weight: 700;
}

.items-hover-tooltip__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
}

.items-hover-tooltip__stats li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.94rem;
}

.items-hover-tooltip__stats span {
  color: rgba(219, 233, 255, 0.78);
}

.items-hover-tooltip__stats strong {
  color: #7ff0a9;
}

.items-hover-tooltip__effects {
  display: grid;
  gap: 0.65rem;
}

.items-hover-tooltip__effects article {
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.items-hover-tooltip__effects strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #f7f4ff;
}

.items-hover-tooltip__effects p,
.items-hover-tooltip__tips {
  margin: 0;
  color: rgba(229, 236, 255, 0.86);
  line-height: 1.45;
}

.items-hover-tooltip__cost {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  margin: 0.85rem 0 0.55rem;
  color: #f6d772;
  font-weight: 800;
  font-size: 1rem;
}

.items-hover-tooltip__cost::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url('/assets/images/moneyShop.webp') center / contain no-repeat;
  flex-shrink: 0;
}

.items-hover-tooltip__tips {
  margin-top: 0.2rem;
  font-size: 0.95rem;
}

@media (min-width: 760px) {
  .items-hero {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .items-hero__stats,
  .items-index__featured,
  .items-index__footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .items-index__hero-spotlight {
    grid-template-columns: 220px 1fr;
    align-items: center;
  }

  .items-index__rail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-detail__signal-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .items-detail__topgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-detail__decision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-detail__champions,
  .items-detail__mesh {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .items-index__footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .items-detail__snapshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .items-detail__hero-grid {
    grid-template-columns: 300px 1fr;
    align-items: stretch;
  }

  .items-detail__topgrid {
    grid-template-columns: 1.15fr 1fr;
  }

  .items-index__rail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  .items-shell {
    width: min(100% - 0.8rem, 1220px);
    margin: 0.8rem auto 2rem;
  }

  .items-hero,
  .items-card,
  .items-detail__hero,
  .items-detail__panel,
  .items-detail__accordion {
    border-radius: 20px;
  }

  .items-hero {
    padding: 0.9rem;
  }

  .items-hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .items-index__hero-card,
  .items-hero__panel,
  .items-index__spotlight,
  .items-index__featured-card {
    padding: 0.9rem;
  }

  .items-index__hero-art {
    min-height: 170px;
  }

  .items-index__hero-art img {
    width: min(144px, 46vw);
  }

  .items-index__hero-links,
  .items-index__pulse {
    gap: 0.4rem;
  }

  .items-index__hero-links .entity-inline,
  .items-index__pulse .entity-inline {
    padding: 0.35rem 0.55rem;
  }

  .items-index__hero-links .entity-inline span,
  .items-index__pulse .entity-inline span {
    font-size: 0.82rem;
  }

  .items-filters-shell summary {
    padding: 0.85rem 0.9rem;
    align-items: start;
    flex-direction: column;
  }

  .items-filters-shell .items-filters {
    padding: 0.85rem;
  }

  .items-index__catalog-head {
    margin-top: 0.95rem;
  }

  .items-card {
    grid-template-columns: 76px 1fr;
    gap: 0.8rem;
    padding: 0.9rem;
  }

  .items-card__media img {
    width: 76px;
    height: 76px;
    border-radius: 16px;
  }

  .items-card__top h2 {
    font-size: 1.04rem;
  }

  .items-card__summary {
    -webkit-line-clamp: 3;
    font-size: 0.95rem;
  }

  .items-card__meta {
    margin-bottom: 0.7rem;
    font-size: 0.84rem;
  }

  .items-card__badges span,
  .items-detail__facts span,
  .items-card__quickline span,
  .items-index__hero-tags span {
    font-size: 0.72rem;
  }
}