/* ============================================================
   Home page — everything under the banner, to match the banner
   ============================================================ */

/* Section headings: small yellow label, big title, "See all" pill */
.nw-section { padding: 40px 0; }
.nw-section-head { align-items: flex-end; margin-bottom: 20px; }
.nw-section-head h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.5px; margin: 0; }
.nw-more {
  flex-shrink: 0; padding: 9px 18px; border-radius: 99px; background: #fff; color: var(--nw-navy); font-weight: 900; font-size: .92rem;
  box-shadow: 0 1px 0 var(--nw-line), 0 4px 14px rgba(11, 42, 91, .08); transition: background .15s, color .15s, transform .15s;
}
.nw-more:hover { background: var(--nw-navy); color: #fff; text-decoration: none; transform: translateX(3px); }

/* ── Trust strip: one bar, four cells ── */
.nw-trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 0 var(--nw-line), 0 8px 26px rgba(11, 42, 91, .07);
}
.nw-trust-cell { display: flex; align-items: center; gap: 14px; padding: 18px 22px; color: inherit; position: relative; transition: background .15s; }
.nw-trust-cell + .nw-trust-cell::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--nw-line); }
a.nw-trust-cell:hover { background: var(--nw-aqua-soft); text-decoration: none; }
.nw-trust-ico {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: linear-gradient(145deg, #e6f7fd, #cfeefb); box-shadow: inset 0 0 0 1px rgba(29, 116, 208, .12);
}
.nw-trust-txt strong { display: block; color: var(--nw-navy); font-weight: 900; font-size: 1rem; }
.nw-trust-txt small { color: var(--nw-muted); font-weight: 700; font-size: .85rem; }

/* ── Shop by category: dark tiles with a fan of real cards ── */
.nw-cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.nw-cat-card {
  --acc: 60, 200, 236;
  position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--acc), .55), transparent 55%),
    linear-gradient(160deg, #10336e 0%, #0b2a5b 100%);
  box-shadow: 0 10px 26px rgba(11, 42, 91, .18); transition: transform .2s, box-shadow .2s;
}
.nw-cat-card.is-gold   { --acc: 255, 196, 0; }
.nw-cat-card.is-purple { --acc: 150, 110, 255; }
.nw-cat-card.is-pink   { --acc: 255, 90, 150; }
.nw-cat-card.is-green  { --acc: 40, 210, 140; }
.nw-cat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(11, 42, 91, .28); text-decoration: none; color: #fff; }
.nw-cat-fan { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; }
.nw-fan-card {
  position: absolute; width: 86px; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .35); transition: transform .3s ease;
}
.nw-fan-card img { width: 100%; height: 100%; object-fit: contain; }
.nw-cat-fan.n3 .nw-fan-card:nth-child(1) { transform: translateX(-42px) rotate(-14deg); }
.nw-cat-fan.n3 .nw-fan-card:nth-child(2) { transform: translateX(42px) rotate(14deg); }
.nw-cat-fan.n3 .nw-fan-card:nth-child(3) { transform: translateY(-6px); z-index: 2; }
.nw-cat-fan.n2 .nw-fan-card:nth-child(1) { transform: translateX(-24px) rotate(-10deg); }
.nw-cat-fan.n2 .nw-fan-card:nth-child(2) { transform: translateX(24px) rotate(8deg); z-index: 2; }
.nw-cat-card:hover .nw-cat-fan.n3 .nw-fan-card:nth-child(1) { transform: translateX(-56px) rotate(-20deg); }
.nw-cat-card:hover .nw-cat-fan.n3 .nw-fan-card:nth-child(2) { transform: translateX(56px) rotate(20deg); }
.nw-cat-card:hover .nw-cat-fan.n3 .nw-fan-card:nth-child(3) { transform: translateY(-14px) scale(1.06); }
.nw-cat-card:hover .nw-cat-fan.n2 .nw-fan-card:nth-child(1) { transform: translateX(-34px) rotate(-16deg); }
.nw-cat-card:hover .nw-cat-fan.n2 .nw-fan-card:nth-child(2) { transform: translateX(34px) rotate(12deg) scale(1.05); }
.nw-cat-card:hover .nw-cat-fan.n1 .nw-fan-card { transform: translateY(-8px) scale(1.06); }
.nw-fan-none { font-size: 3rem; }
.nw-cat-info { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 16px; background: linear-gradient(0deg, rgba(5, 20, 48, .55), transparent); }
.nw-cat-info small { color: #aac6ee; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-cat-info b { font-size: 1.1rem; font-weight: 900; line-height: 1.2; }
.nw-cat-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: #cfe3ff; font-weight: 800; font-size: .85rem; }
.nw-cat-meta i {
  font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); transition: background .15s, color .15s;
}
.nw-cat-card:hover .nw-cat-meta i { background: var(--nw-yellow); color: var(--nw-navy); }

/* Product cards: see cards.css */

/* Dark showcase band (graded slabs) — full width like the banner */
.nw-band-dark {
  margin: 20px 0; padding: 50px 0; color: #fff;
  background:
    radial-gradient(circle at 15% 0%, rgba(60, 200, 236, .28), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(255, 196, 0, .16), transparent 40%),
    linear-gradient(160deg, #0b2a5b, #10336e 60%, #0b2a5b);
}
.nw-band-dark .nw-section-head h2 { color: #fff; }
.nw-band-dark .nw-more { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.nw-band-dark .nw-more:hover { background: var(--nw-yellow); color: var(--nw-navy); }
.nw-band-dark .nw-pcard { border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }

/* ── Popular sets: picture tiles ── */
.nw-set-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.nw-set-card {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 14px; border-radius: 18px; background: #fff; color: var(--nw-ink);
  box-shadow: 0 1px 0 var(--nw-line), 0 6px 18px rgba(11, 42, 91, .06); border: 2px solid transparent;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.nw-set-card:hover { transform: translateY(-4px); border-color: var(--nw-aqua); box-shadow: 0 14px 28px rgba(11, 42, 91, .14); text-decoration: none; color: var(--nw-ink); }
.nw-set-card-pic {
  height: 118px; border-radius: 12px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #d8f4fc, #eaf3fb 70%);
}
.nw-set-card-pic img { height: 100px; width: auto; object-fit: contain; transform: rotate(-6deg); filter: drop-shadow(0 6px 8px rgba(11, 42, 91, .28)); transition: transform .25s; }
.nw-set-card:hover .nw-set-card-pic img { transform: rotate(0deg) scale(1.08); }
.nw-set-card-name { font-weight: 900; color: var(--nw-navy); font-size: .92rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.nw-set-card-count { color: var(--nw-muted); font-weight: 700; font-size: .8rem; }

/* ── Nerd Coins band ── */
.nw-coins-band {
  display: grid; grid-template-columns: 200px minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: center;
  padding: 40px 44px; border-radius: 28px; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 196, 0, .35), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(60, 200, 236, .25), transparent 40%),
    linear-gradient(135deg, #0b2a5b, #123d80);
  box-shadow: 0 18px 40px rgba(11, 42, 91, .25);
}
.nw-coins-art { display: flex; justify-content: center; }
.nw-big-coin { font-size: 7.5rem; line-height: 1; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); animation: nwCoinBob 4s ease-in-out infinite; }
@keyframes nwCoinBob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
.nw-coins-copy h2 { color: #fff; font-size: 2.2rem; margin: 0 0 8px; }
.nw-coins-copy p { color: #cfe3ff; font-size: 1.05rem; font-weight: 700; margin: 0 0 20px; }
.nw-coin-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nw-coin-steps li {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.nw-coin-steps span {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--nw-yellow); color: var(--nw-navy); font-weight: 900; font-size: 1.2rem;
}
.nw-coin-steps b { font-size: 1.05rem; }
.nw-coin-steps small { color: #aac6ee; font-weight: 700; }

/* ── Smaller screens ── */
@media (max-width: 1100px) {
  .nw-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nw-set-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nw-trust-bar { grid-template-columns: repeat(2, 1fr); }
  .nw-trust-cell:nth-child(3)::before { display: none; }
  .nw-coins-band { grid-template-columns: 1fr 1fr; }
  .nw-coins-art { display: none; }
}
@media (max-width: 900px) {
  .nw-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nw-set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nw-coins-band { grid-template-columns: 1fr; }
  .nw-coins-band { padding: 30px 24px; }
}
@media (max-width: 600px) {
  .nw-cat-grid, .nw-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-trust-bar { grid-template-columns: 1fr; }
  .nw-trust-cell::before { display: none; }
  .nw-cat-fan { height: 140px; }
  .nw-fan-card { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-big-coin { animation: none; }
}

/* Category tiles: rows always fill the full width (a short last row stretches). */
.nw-cat-grid { display: flex; flex-wrap: wrap; }
.nw-cat-grid > .nw-cat-card { flex: 1 1 calc(20% - 16px); min-width: 0; }
@media (max-width: 1100px) { .nw-cat-grid > .nw-cat-card { flex-basis: calc(25% - 16px); } }
@media (max-width: 900px)  { .nw-cat-grid > .nw-cat-card { flex-basis: calc(33.333% - 16px); } }
@media (max-width: 600px)  { .nw-cat-grid > .nw-cat-card { flex-basis: calc(50% - 16px); } }

/* Balanced rows: the page works out how many tiles per row (--per). */
.nw-cat-grid > .nw-cat-card { flex: 1 1 calc(100% / var(--per, 5) - 16px); }
@media (max-width: 1100px) { .nw-cat-grid > .nw-cat-card { flex-basis: calc(25% - 16px); } }
@media (max-width: 900px)  { .nw-cat-grid > .nw-cat-card { flex-basis: calc(33.333% - 16px); } }
@media (max-width: 600px)  { .nw-cat-grid > .nw-cat-card { flex-basis: calc(50% - 16px); } }