/* ═══════════════════════════════════════════════════════════════════════════
   Corner "Epic layout" Item Shop, fortnite.com/item-shop structure, Corner skin.

   Everything here is scoped under `.shop-panel.is-epic-shop` (the Item Shop
   panel). Measurements mirror the fortnite.com Tailwind bundle:
   text-xs .875rem / sm 1rem / md 1.1875rem / lg 1.5rem / xl 1.6875rem / 2xl 2.6875rem,
   radius-xs 8px / sm 12px / lg 20px / xl .75rem, breakpoints 640 / 768 / 1024 / 1280.
   Colours come only from Corner's --sf-* / --brand* tokens; the only hard-coded
   colours are per-item art colours injected (validated) by epicshop.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The stage: the catalogue, or a message in its place ────────────────── */
.shop-panel.is-epic-shop .shop-epic-status {
  display: block;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3rem);
}

.shop-panel.is-epic-shop .shop-epic-status[hidden],
.shop-panel.is-epic-shop #shop-epic[hidden] { display: none !important; }

.shop-panel.is-epic-shop .shop-epic-status-message,
.shop-panel.is-epic-shop .shop-epic-status-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: clamp(1.5rem, 5vw, 3rem) 1rem;
  text-align: center;
}

.shop-panel.is-epic-shop .shop-epic-status-icon {
  display: inline-flex;
  width: 3.4rem;
  height: 3.4rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 236, 205, 0.06);
  box-shadow: inset 0 0 0 1px var(--sf-edge);
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-status-title {
  margin: 0;
  font-family: 'Unbounded', var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-status-sub {
  margin: 0;
  max-width: 44ch;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-status-message .btn { margin-top: 0.9rem; }

/* fortnite's grid, as blanks, while the catalogue comes */
.shop-panel.is-epic-shop .shop-epic-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
}

.shop-panel.is-epic-shop .shop-epic-skeleton-tile {
  aspect-ratio: 0.627;
  border-radius: var(--shop-epic-radius-lg, 20px);
  background: linear-gradient(100deg, rgba(255, 236, 205, 0.05) 30%, rgba(255, 236, 205, 0.11) 50%, rgba(255, 236, 205, 0.05) 70%);
  background-size: 220% 100%;
  box-shadow: inset 0 0 0 1px var(--sf-edge);
  animation: shopEpicShimmer 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes shopEpicShimmer {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}

.shop-panel.is-epic-shop .shop-epic-skeleton-tile:where(html.perf-lite *) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-skeleton-tile { animation: none; }
}

/* a quiet re-sync of a shop that is already up */
.shop-panel.is-epic-shop #shop-epic.is-syncing {
  opacity: 0.72;
  transition: opacity 240ms ease;
}

.shop-panel.is-epic-shop #shop-epic {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
}

.shop-panel.is-epic-shop #shop-epic.hidden,
.shop-panel.is-epic-shop #shop-epic[hidden] {
  display: none;
}

/* ── Page skeleton ──────────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-page {
  position: relative;
  --shop-epic-radius-xs: 8px;
  --shop-epic-radius-sm: 12px;
  --shop-epic-radius-lg: 20px;
  --shop-epic-radius-xl: 0.75rem;
  --shop-epic-paper: rgba(244, 236, 216, 0.88);
  --shop-epic-paper-strong: rgba(244, 236, 216, 0.92);
  --shop-epic-glass: rgba(20, 15, 11, 0.86);
  --shop-epic-outline: rgba(255, 220, 164, 0.45);
  --shop-epic-header-offset: calc(65px + env(safe-area-inset-top, 0px));
  --shop-epic-scroll-offset: calc(var(--shop-epic-header-offset) + 1rem);
  --shop-epic-motion: 150ms;
  --shop-epic-ease: cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: 0.25rem 1rem 2rem;
  box-sizing: border-box;
  color: var(--sf-ink);
  font-family: var(--font-display);
}

.shop-panel.is-epic-shop .shop-epic-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1760px;
}

.shop-panel.is-epic-shop .shop-epic-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shop-panel.is-epic-shop .shop-epic-svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: none;
}

.shop-panel.is-epic-shop .shop-epic-svg--filter { font-size: 1rem; }
.shop-panel.is-epic-shop .shop-epic-svg--chevron,
.shop-panel.is-epic-shop .shop-epic-svg--arrow { font-size: 1.25rem; }
.shop-panel.is-epic-shop .shop-epic-svg--flip { transform: scaleX(-1); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-head {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.shop-panel.is-epic-shop .shop-epic-head-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.shop-panel.is-epic-shop .shop-epic-h1 {
  order: 1;
  margin: 0;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  font-size: 1.6875rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-buy {
  order: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: var(--shop-epic-radius-xl);
  background: linear-gradient(90deg, var(--brand-deep), var(--sf-brass));
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.35), 0 6px 18px rgba(8, 5, 3, 0.35);
  color: #2c1d08;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 10px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), background var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-buy .shop-epic-vbuck {
  width: 20px;
  height: 20px;
  margin: 0;
}

.shop-panel.is-epic-shop .shop-epic-buy:hover,
.shop-panel.is-epic-shop .shop-epic-buy:focus-visible {
  background: linear-gradient(135deg, var(--brand-deep), var(--sf-brass));
  outline-color: var(--shop-epic-outline);
  outline-offset: 4px;
}

.shop-panel.is-epic-shop .shop-epic-powered {
  /* the search below is sized by this row's width, not the screen's */
  container: shop-epic-powered / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-powered-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.shop-panel.is-epic-shop .shop-epic-powered-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-rotation {
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-rotation-timer {
  font-variant-numeric: tabular-nums;
  color: var(--sf-brass-lit);
}

/* "Today's shop is arriving": Epic has the new shop and fortnite.com is a
   minute or two behind; it stands in the countdown's place until the page
   updates by itself. */
.shop-panel.is-epic-shop .shop-epic-arriving {
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-arriving[hidden] {
  display: none;
}

/* inline, so on a phone the dot stays with the first line when the text wraps */
.shop-panel.is-epic-shop .shop-epic-arriving::before {
  content: "";
  display: inline-block;
  vertical-align: 0.05em;
  margin-right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: shopEpicArrivingPulse 1.6s ease-in-out infinite;
}

@keyframes shopEpicArrivingPulse {
  from { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.shop-panel.is-epic-shop .shop-epic-arriving:where(html.perf-lite *)::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-arriving::before {
    animation: none;
  }
}

/* Why no Owned marks show: the Owned check was busy, Epic did not answer, or
   the member cannot be gifted yet. Its own line under the powered row, tucked
   into that row's bottom space; Try again when a retry can help. */
/* inline, like the arriving note's dot: on a phone the icon stays with the
   first line when the text wraps, and Try again follows the words */
.shop-panel.is-epic-shop .shop-epic-owned-note {
  display: block;
  margin: -0.35rem 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sf-ink-soft);
}

/* empty, it is collapsed rather than hidden: its live region stays in the
   page, so a screen reader hears the first words written into it */
.shop-panel.is-epic-shop .shop-epic-owned-note:not(.is-shown) {
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* it takes focus only from script (a pressed Try again hands it back) */
.shop-panel.is-epic-shop .shop-epic-owned-note:focus {
  outline: none;
}

.shop-panel.is-epic-shop .shop-epic-owned-note-icon {
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.4rem;
  width: 1rem;
  height: 1rem;
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-owned-note.is-checking .shop-epic-owned-note-icon {
  animation: shopEpicArrivingPulse 1.6s ease-in-out infinite;
}

.shop-panel.is-epic-shop .shop-epic-owned-retry {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 0 0 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 236, 205, 0.2);
  border-radius: 999px;
  background: var(--shop-epic-glass);
  color: var(--sf-brass-lit);
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), border-color var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-owned-retry[hidden] {
  display: none;
}

.shop-panel.is-epic-shop .shop-epic-owned-retry:hover,
.shop-panel.is-epic-shop .shop-epic-owned-retry:focus-visible {
  border-color: rgba(255, 220, 164, 0.45);
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
}

.shop-panel.is-epic-shop .shop-epic-owned-retry:disabled {
  cursor: default;
  opacity: 0.55;
}

/* a phone has no room beside the words: Try again goes under them, flush left */
@media (max-width: 639px) {
  .shop-panel.is-epic-shop .shop-epic-owned-retry {
    display: flex;
    width: max-content;
    margin: 0.4rem 0 0;
  }
}

.shop-panel.is-epic-shop .shop-epic-owned-note.is-checking:where(html.perf-lite *) .shop-epic-owned-note-icon { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-owned-note.is-checking .shop-epic-owned-note-icon {
    animation: none;
  }
}

/* fortnite.com signed in: [V 400] [⟳] on the title row. The balance pill is the
   Buy V-Bucks link, the round button re-reads the wallet. */
.shop-panel.is-epic-shop .shop-epic-wallet {
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.shop-panel.is-epic-shop .shop-epic-balance,
.shop-panel.is-epic-shop .shop-epic-refresh {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  margin: 0;
  border: 1px solid rgba(255, 236, 205, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58, 41, 27, 0.92), rgba(27, 18, 12, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.1), 0 6px 18px rgba(8, 5, 3, 0.35);
  color: var(--sf-ink);
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 10px;
  -webkit-tap-highlight-color: transparent;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), border-color var(--shop-epic-motion) var(--shop-epic-ease), background var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-balance {
  gap: 0.35rem;
  padding: 0 1rem 0 0.7rem;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}

.shop-panel.is-epic-shop .shop-epic-balance .shop-epic-vbuck {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-refresh {
  width: 2.5rem;
  padding: 0;
}

.shop-panel.is-epic-shop .shop-epic-refresh-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--sf-brass-lit);
  transition: transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-balance:hover,
.shop-panel.is-epic-shop .shop-epic-balance:focus-visible,
.shop-panel.is-epic-shop .shop-epic-refresh:hover,
.shop-panel.is-epic-shop .shop-epic-refresh:focus-visible {
  border-color: rgba(255, 220, 164, 0.4);
  background: linear-gradient(180deg, rgba(74, 52, 33, 0.95), rgba(36, 24, 16, 0.98));
  outline-color: var(--shop-epic-outline);
  outline-offset: 4px;
}

.shop-panel.is-epic-shop .shop-epic-refresh:hover .shop-epic-refresh-icon {
  transform: rotate(-30deg);
}

.shop-panel.is-epic-shop .shop-epic-refresh.is-busy {
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic-refresh.is-busy .shop-epic-refresh-icon {
  animation: shopEpicRefreshSpin 0.8s linear infinite;
}

@keyframes shopEpicRefreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-refresh.is-busy .shop-epic-refresh-icon {
    animation: none;
    opacity: 0.55;
  }
}

.shop-panel.is-epic-shop .shop-epic-search {
  /* Lives at the end of the "Powered by" row so the title → powered line →
     first section heading rhythm matches fortnite.com (which has no search
     bar in the shop body); wraps under it on narrow screens, where it takes
     the row's full width rather than sitting off to the right. */
  position: relative;
  flex: 1 1 14rem;
  width: auto;
  margin-left: auto;
  margin-bottom: 0;
}

/* A row wide enough to hold the field beside the powered line keeps it at
   the row's end, no wider than 20rem. Narrower, it is not capped: beside the
   line it takes what is left, and wrapped under it the whole row. */
@container shop-epic-powered (min-width: 44rem) {
  .shop-panel.is-epic-shop .shop-epic-search {
    max-width: 20rem;
  }
}

.shop-panel.is-epic-shop .shop-epic-search-icon {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--sf-ink-faint);
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.85rem 0.625rem 2.5rem;
  border: 1px solid var(--sf-edge);
  border-radius: var(--shop-epic-radius-sm);
  background: var(--shop-epic-glass);
  color: var(--sf-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  outline: none;
  transition: border-color var(--shop-epic-motion) var(--shop-epic-ease), box-shadow var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-search-input::placeholder {
  color: var(--sf-ink-faint);
}

.shop-panel.is-epic-shop .shop-epic-search-input:focus-visible {
  border-color: var(--sf-brass-dim);
  box-shadow: 0 0 0 2px var(--sf-brass-dim);
}

.shop-panel.is-epic-shop .shop-epic-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-section {
  padding: 0.5rem 0 3rem;
  margin: 0 0 0.5rem;
  scroll-margin-top: var(--shop-epic-scroll-offset);
  min-width: 0;
}

.shop-panel.is-epic-shop .shop-epic-h2,
.shop-panel.is-epic-shop .shop-epic-h3 {
  margin: 0 0 0.5rem;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sf-ink);
  overflow-wrap: anywhere;
}

.shop-panel.is-epic-shop .shop-epic-h2 { font-size: 1.5rem; }
.shop-panel.is-epic-shop .shop-epic-h3 { font-size: 1rem; }

/* ── Grid ───────────────────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  /* No clip here: cells are minmax(0, 1fr) and every scaled/skewed layer lives
     inside an overflow-hidden tile, so nothing but the hover outline crosses the
     edge, and Safari ignores overflow-clip-margin, which would eat it. */
}

.shop-panel.is-epic-shop .shop-epic-cell,
.shop-panel.is-epic-shop .shop-epic-slide {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  --shop-epic-aspect: 0.627;
}

/* col-span from tileSize; capped at the column count by the media queries below */
.shop-panel.is-epic-shop .shop-epic-cell[data-span="2"],
.shop-panel.is-epic-shop .shop-epic-cell[data-span="3"],
.shop-panel.is-epic-shop .shop-epic-cell[data-span="4"],
.shop-panel.is-epic-shop .shop-epic-slide[data-span="2"] {
  grid-column: span 2;
  --shop-epic-aspect: 1.316;
}

/* ── Tile ───────────────────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-tile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--shop-epic-aspect, 0.627);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--sf-ink);
  font: inherit;
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
  white-space: normal;
  --shop-epic-box-h: 100%;
  --shop-epic-frame-w: 100%;
  --shop-epic-frame-ar: auto;
  --shop-epic-frame-left: 0%;
  --shop-epic-img-fit: contain;
  --shop-epic-img-pos: center;
  --shop-epic-img-scale: 1;
  --shop-epic-img-top: 55%;
}

.shop-panel.is-epic-shop .shop-epic-tile > * {
  pointer-events: none;
}

/* image placement per type, mirrors fortnite.com's tile DOM (see TYPE_PLACEMENT in epicshop.js;
   tests/epicShopRenderer.test.js keeps this block and the table in sync) */
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="outfit"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: cover; --shop-epic-img-pos: center; --shop-epic-img-scale: 1.6; --shop-epic-img-top: 80%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="outfit-wide"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 1.6; --shop-epic-img-top: 78.5%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="bundle"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: cover; --shop-epic-img-pos: center; --shop-epic-img-scale: 1; --shop-epic-img-top: 55%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="bundle-wide"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 1.4; --shop-epic-img-top: 75%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="car-bundle"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: cover; --shop-epic-img-pos: 80% 50%; --shop-epic-img-scale: 1; --shop-epic-img-top: 50%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="emote"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.7; --shop-epic-img-top: 38%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="emote-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 43%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="wrap"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.7; --shop-epic-img-top: 38%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="wrap-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 43%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="contrail"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.7; --shop-epic-img-top: 38%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="contrail-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 43%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="car"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.7; --shop-epic-img-top: 38%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="car-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: top; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 43%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="backpack"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.78; --shop-epic-img-top: 42%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="backpack-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 49%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="glider"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.78; --shop-epic-img-top: 42%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="glider-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 49%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="pickaxe"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -30%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.75; --shop-epic-img-top: 37%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="pickaxe-wide"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.85; --shop-epic-img-top: 41%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="instrument"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -30%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.75; --shop-epic-img-top: 37%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="instrument-wide"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.85; --shop-epic-img-top: 41%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="shoe"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: -15%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.8; --shop-epic-img-top: 42%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="shoe-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 49%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="sidekick"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: auto; --shop-epic-frame-ar: 1; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.7; --shop-epic-img-top: 38%; }
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="sidekick-wide"] { --shop-epic-box-h: 85%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.9; --shop-epic-img-top: 43%; }
/* the album art is a square of 86% of the tile width, centred a third of the way
   down the mask: with the mask 2.5rem down it sits whole inside the mask box
   (a mask-image clips at the box edge), at rest and on hover alike */
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="track"] { --shop-epic-box-h: 100%; --shop-epic-frame-w: 100%; --shop-epic-frame-ar: auto; --shop-epic-frame-left: 0%; --shop-epic-img-fit: contain; --shop-epic-img-pos: center; --shop-epic-img-scale: 0.86; --shop-epic-img-top: 34%; }

/* 3- and 4-column bundle tiles grow with fortnite.com's md:/lg: steps
   (scale-[1.4] md:scale-[1.75] lg:scale-[2.28], top-[75%] md:top-[78%] lg:top-[108%]) */
@media screen and (min-width: 768px) {
  .shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="bundle-wide"][data-span="3"],
  .shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="bundle-wide"][data-span="4"] {
    --shop-epic-img-scale: 1.75;
    --shop-epic-img-top: 78%;
  }
}

@media screen and (min-width: 1024px) {
  .shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="bundle-wide"][data-span="4"] {
    --shop-epic-img-scale: 2.28;
    --shop-epic-img-top: 108%;
  }
}

/* 1. background, bottom 85%, item gradient or Corner timber fallback */
.shop-panel.is-epic-shop .shop-epic-tile-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 85%;
  border-radius: var(--shop-epic-radius-lg);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  /* a faint edge at rest (the jam track art has one; the card should too), the outline on hover */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  outline: 3px solid transparent;
  outline-offset: 10px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-tile--plain .shop-epic-tile-bg {
  background-image: linear-gradient(var(--sf-wall-lit), var(--sf-timber));
  box-shadow: inset 0 0 0 1px var(--sf-edge);
}

.shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tile-bg,
.shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tile-bg {
  outline-color: var(--shop-epic-outline);
  outline-offset: 4px;
}

.shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tile-bg {
  outline-color: var(--sf-brass-lit);
}

/* 2. image layer, bottom-aligned; the whole tile (100%) so outfits overhang the
   card by 15%, or just the card (85%) for props that must stay inside it */
.shop-panel.is-epic-shop .shop-epic-tile-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--shop-epic-r-box-h);
  z-index: 1;
  border-radius: var(--shop-epic-radius-lg);
  overflow: hidden;
}

.shop-panel.is-epic-shop .shop-epic-tile-mask {
  position: absolute;
  inset: 0;
  border-radius: var(--shop-epic-radius-lg);
  -webkit-mask-image: linear-gradient(#000 0% 80%, #0000 95%);
  mask-image: linear-gradient(#000 0% 80%, #0000 95%);
  /* fortnite.com: transition-transform duration-100 ease-in-out */
  transition: transform 100ms var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tile-mask,
.shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tile-mask {
  transform: scale(1.03);
}

/* the frame: tile-wide, or a card-height square nudged left (fortnite.com's
   "h-full aspect-square w-auto left-[-15%]") */
.shop-panel.is-epic-shop .shop-epic-img-swiper {
  position: absolute;
  top: 0;
  left: var(--shop-epic-r-frame-left);
  width: var(--shop-epic-r-frame-w);
  height: 100%;
  aspect-ratio: var(--shop-epic-r-frame-ar);
}

.shop-panel.is-epic-shop .shop-epic-img {
  position: absolute;
  top: var(--shop-epic-r-img-top);
  left: var(--shop-epic-r-img-left);
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(var(--shop-epic-r-img-scale));
  object-fit: var(--shop-epic-r-img-fit);
  object-position: var(--shop-epic-r-img-pos);
  opacity: 0;
  transition: opacity 100ms ease-out;
}

/* Style wipes, fortnite.com's transition-wipe-tile: every render of a
   multi-style item is stacked in its own swiper; a registered custom property
   drives a diagonal mask, so the next render sweeps in from the top-left over
   0.5s while the old one sweeps out toward the bottom-right. Browsers without
   @property swap instantly. */
@property --shop-epic-wipe {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -25%;
}

.shop-panel.is-epic-shop .shop-epic-tile[data-style-count] .shop-epic-img-swiper {
  --shop-epic-wipe: -25%;
  -webkit-mask-image: linear-gradient(to top left, #000 var(--shop-epic-wipe), transparent calc(var(--shop-epic-wipe) + 25%), transparent);
  mask-image: linear-gradient(to top left, #000 var(--shop-epic-wipe), transparent calc(var(--shop-epic-wipe) + 25%), transparent);
  transition: --shop-epic-wipe 0.5s linear;
}

.shop-panel.is-epic-shop .shop-epic-tile[data-style-count] .shop-epic-img-swiper.is-active {
  --shop-epic-wipe: 100%;
  -webkit-mask-image: linear-gradient(to bottom right, #000 var(--shop-epic-wipe), transparent calc(var(--shop-epic-wipe) + 25%), transparent);
  mask-image: linear-gradient(to bottom right, #000 var(--shop-epic-wipe), transparent calc(var(--shop-epic-wipe) + 25%), transparent);
}

/* jam tracks: the mask sits 2.5rem down and rises 1.5rem with a -2° tilt on
   hover (fortnite.com's top-10 → top-4, -rotate-[2deg]); the rise is a
   transform, so the browser composites it instead of laying the tile out
   again on every frame. The album art is a square near the top of the tile
   with a soft edge, like fortnite.com */
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="track"] .shop-epic-tile-mask {
  top: 2.5rem;
  transition: transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="track"]:hover .shop-epic-tile-mask,
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="track"]:focus-visible .shop-epic-tile-mask {
  transform: translateY(-1.5rem) rotate(-2deg);
}

/* jam tracks: square album art near the top of the tile, soft edge like fortnite.com */
.shop-panel.is-epic-shop .shop-epic-tile[data-epic-type="track"] .shop-epic-img {
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--shop-epic-radius-sm, 6px);
  outline: 2px solid rgba(255, 255, 255, 0.16);
  outline-offset: -2px;
}

.shop-panel.is-epic-shop .shop-epic-img.is-loaded {
  opacity: 1;
}

.shop-panel.is-epic-shop .shop-epic-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sf-ink-faint);
}

.shop-panel.is-epic-shop .shop-epic-img-placeholder .icon {
  width: 34px;
  height: 34px;
}

/* 3. text block, bottom-aligned column inside the 85% card */
.shop-panel.is-epic-shop .shop-epic-tile-body {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 85%;
  min-width: 0;
  overflow: hidden;
}

.shop-panel.is-epic-shop .shop-epic-tile-top {
  display: flex;
  flex: 1 1 auto;
  /* Owned + Leaving today rarely both fit on a 1x1 tile: wrap instead of
     truncating either chip. */
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  min-height: 0;
}

.shop-panel.is-epic-shop .shop-epic-tile-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom-left-radius: var(--shop-epic-radius-lg);
  border-bottom-right-radius: var(--shop-epic-radius-lg);
  overflow: hidden;
}

.shop-panel.is-epic-shop .shop-epic-tile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--sf-timber-dark) 0%, transparent 100%);
}

.shop-panel.is-epic-shop .shop-epic-tile-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: flex-end;
  width: 100%;
  min-width: 0;
  padding: 0 0.5rem 0.5rem;
  box-sizing: border-box;
  transition: padding var(--shop-epic-motion) ease-out, margin var(--shop-epic-motion) ease-out;
}

.shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tile-text,
.shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tile-text {
  padding-bottom: 0.5rem;
}

.shop-panel.is-epic-shop .shop-epic-tile--bundle .shop-epic-tile-text {
  margin-bottom: 1rem;
}

.shop-panel.is-epic-shop .shop-epic-tile--bundle:hover .shop-epic-tile-text,
.shop-panel.is-epic-shop .shop-epic-tile--bundle:focus-visible .shop-epic-tile-text {
  margin-bottom: 0.25rem;
}

.shop-panel.is-epic-shop .shop-epic-badges {
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.15rem;
}

/* fortnite.com's pill: text-xs, px-2 py-1, one line, clipped when the tile is
   too narrow (their marquee scrolls it; we ellipsise). Unbounded is a wide
   face, so a wrapping 14px pill filled half a phone tile. */
.shop-panel.is-epic-shop .shop-epic-badge {
  display: inline-block;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: var(--shop-epic-radius-xs);
  transform: skewX(-12deg);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  hyphens: none;
}

/* two-column phones: ~170px tiles, so the pill drops one more notch */
@media (max-width: 639px) {
  .shop-panel.is-epic-shop .shop-epic-badge {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
  }
}

.shop-panel.is-epic-shop .shop-epic-badge--off {
  background: var(--shop-epic-paper-strong);
  color: var(--sf-paper-ink);
}

.shop-panel.is-epic-shop .shop-epic-badge--feature {
  background: var(--sf-lamp);
  color: #2c1d08;
}

/* fortnite.com: black pill, lime text → near-black timber with lamp text */
.shop-panel.is-epic-shop .shop-epic-badge--leaving {
  background: rgba(12, 8, 5, 0.94);
  color: var(--sf-lamp);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.12);
}

/* fortnite.com: green OWNED where the price would be → Corner's sage */
.shop-panel.is-epic-shop .shop-epic-owned-text {
  color: var(--sf-ok);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-panel.is-epic-shop .shop-epic-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--sf-ink);
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(8, 5, 3, 0.35);
}

.shop-panel.is-epic-shop .shop-epic-tile--bundle .shop-epic-title {
  -webkit-line-clamp: 1;
}

.shop-panel.is-epic-shop .shop-epic-subtitle {
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--sf-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-panel.is-epic-shop .shop-epic-price {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-price-current {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.shop-panel.is-epic-shop .shop-epic-price-current--none {
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-vbuck {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
  flex: none;
  fill: currentColor;
}

.shop-panel.is-epic-shop .shop-epic-price-original {
  position: relative;
  margin-left: 0.75rem;
  padding: 0 0.25rem;
  opacity: 0.93;
  text-decoration: none;
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-price-original::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--sf-ink);
  transform: rotate(-7deg);
}

/* 4. tag banner, plus icon at rest, "<type> + <features>" strip on hover */
.shop-panel.is-epic-shop .shop-epic-tag {
  position: relative;
  z-index: 10;
  width: 100%;
}

.shop-panel.is-epic-shop .shop-epic-tag-plusrow {
  position: absolute;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0;
  box-sizing: border-box;
  opacity: 1;
  transform: translateY(-100%);
  transition: opacity var(--shop-epic-motion) ease-out, transform var(--shop-epic-motion) ease-out;
}

.shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tag-plusrow,
.shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tag-plusrow {
  opacity: 0;
  transform: translateY(0);
}

.shop-panel.is-epic-shop .shop-epic-tag-wedgewrap {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-tag-wedge {
  display: block;
}

.shop-panel.is-epic-shop .shop-epic-plus {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.75rem;
  transform: skewX(-4deg);
  color: var(--sf-ink);
  stroke: var(--sf-timber-dark);
  stroke-width: 6;
  stroke-linejoin: round;
  paint-order: stroke;
  transition: opacity var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-tile--gift-disabled .shop-epic-plus {
  opacity: 0.45;
}

.shop-panel.is-epic-shop .shop-epic-tag-strip {
  width: 100%;
  max-height: 0;
  padding: 0 0.5rem;
  box-sizing: border-box;
  border-top: 0 solid transparent;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(244, 236, 216, 1) 0%, rgba(244, 236, 216, 0.55) 25%, rgba(244, 236, 216, 1) 50%, rgba(244, 236, 216, 0.55) 75%, rgba(244, 236, 216, 1) 100%);
  color: var(--sf-paper-ink);
  transition: max-height var(--shop-epic-motion) ease-out, padding var(--shop-epic-motion) ease-out, border-top-width var(--shop-epic-motion) ease-out;
}

.shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tag-strip,
.shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tag-strip {
  max-height: 50px;
  padding: 0.25rem 0.5rem;
  border-top: 2px solid var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-tag-strip-text {
  display: block;
  width: 100%;
  max-height: 2.6em;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal;
}

.shop-panel.is-epic-shop .shop-epic-tag-plusglyph {
  display: inline-block;
  margin: 0 0.25rem 0 0.75rem;
}

/* ── Best sellers carousel ──────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
}

.shop-panel.is-epic-shop .shop-epic-carousel-viewport {
  position: relative;
  width: 100%;
  /* Still a scroll container (clip on one axis computes to hidden when the other
     axis is hidden); keyboard focus-scroll is undone in epicshop.js. */
  overflow: hidden;
  padding: 0.25rem 0;
}

.shop-panel.is-epic-shop .shop-epic-carousel-track {
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: minmax(50%, 1fr);
  align-items: start;
  width: 100%;
  white-space: nowrap;
  transition: transform 300ms ease;
  will-change: transform;
}

.shop-panel.is-epic-shop .shop-epic-carousel-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic-carousel-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  border: 0;
  border-radius: 999px;
  background: var(--shop-epic-paper);
  box-shadow: 0 4px 14px rgba(8, 5, 3, 0.35);
  color: var(--sf-paper-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  outline: 3px solid transparent;
  outline-offset: 10px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), opacity var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-carousel-btn:hover:not(:disabled),
.shop-panel.is-epic-shop .shop-epic-carousel-btn:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 4px;
}

.shop-panel.is-epic-shop .shop-epic-carousel-btn:disabled {
  opacity: 0.4;
  background: rgba(236, 237, 238, 0.3);
  color: var(--sf-paper);
  cursor: default;
  box-shadow: none;
}

/* ── Pills (View all) ───────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-viewall-row {
  display: flex;
  justify-content: center;
  padding-top: 0.75rem;
}

.shop-panel.is-epic-shop .shop-epic-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: var(--shop-epic-radius-xl);
  background: var(--shop-epic-paper);
  color: var(--sf-paper-ink);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 10px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-pill:hover,
.shop-panel.is-epic-shop .shop-epic-pill:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 4px;
}

/* ── Rail (mobile first: sticky bar + accordion) ────────────────────────── */
/* Below lg the whole slot is the sticky bar: its containing block is
   .shop-epic-page (the full shop height), so it can ride down the page. From lg
   the slot is a full-height column and the inner is what sticks (see the
   1024px block). Native sticky needs body { overflow-x: clip } (set above while
   the epic shop is mounted); browsers without `clip` get `is-shimmed` from
   epicshop.js, which positions the inner absolutely on scroll instead. */
.shop-panel.is-epic-shop .shop-epic-rail {
  position: sticky;
  top: var(--shop-epic-header-offset);
  z-index: 30;
  width: 100%;
  min-width: 0;
  min-height: 45px;
  margin-bottom: 0.75rem;
}

.shop-panel.is-epic-shop .shop-epic-rail-inner {
  position: relative;
  z-index: 30;
  width: 100%;
  min-width: 0;
}

.shop-panel.is-epic-shop .shop-epic-rail.is-shimmed {
  position: relative;
  top: auto;
}

.shop-panel.is-epic-shop .shop-epic-rail.is-shimmed .shop-epic-rail-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: none;
}

.shop-panel.is-epic-shop .shop-epic-page.has-rail {
  flex-direction: column;
}

.shop-panel.is-epic-shop .shop-epic-page.has-rail .shop-epic-section {
  scroll-margin-top: calc(var(--shop-epic-scroll-offset) + 45px);
}

.shop-panel.is-epic-shop .shop-epic-rail-bar {
  display: flex;
  align-items: center;
  height: 45px;
  border: 1px solid var(--sf-edge);
  border-radius: var(--shop-epic-radius-sm);
  background: var(--shop-epic-glass);
  box-sizing: border-box;
}

.shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-bar {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.shop-panel.is-epic-shop .shop-epic-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 2rem;
  aspect-ratio: 1;
  margin: 0 0.25rem 0 0.5rem;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--shop-epic-radius-xs);
  background: var(--shop-epic-paper);
  color: var(--sf-paper-ink);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 10px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-filters:hover,
.shop-panel.is-epic-shop .shop-epic-filters:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 4px;
}

.shop-panel.is-epic-shop .shop-epic-filters-text {
  display: none;
  margin-right: 0.5rem;
  text-transform: uppercase;
}

.shop-panel.is-epic-shop .shop-epic-rail-trigger {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  height: 100%;
  padding: 0.75rem;
  border: 0;
  background: none;
  color: var(--sf-ink);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.shop-panel.is-epic-shop .shop-epic-rail-trigger:focus-visible {
  outline: 2px solid var(--sf-brass-lit);
  outline-offset: -3px;
  border-radius: var(--shop-epic-radius-xs);
}

.shop-panel.is-epic-shop .shop-epic-rail-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-panel.is-epic-shop .shop-epic-rail-trigger .shop-epic-svg--chevron {
  transition: transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-trigger .shop-epic-svg--chevron {
  transform: rotate(180deg);
}

.shop-panel.is-epic-shop .shop-epic-rail-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: min(60vh, calc(100dvh - var(--shop-epic-header-offset) - 45px - 5rem));
  overflow: auto;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid var(--sf-edge);
  border-top: 0;
  border-bottom-left-radius: var(--shop-epic-radius-sm);
  border-bottom-right-radius: var(--shop-epic-radius-sm);
  background: var(--shop-epic-glass);
  box-shadow: 0 14px 30px rgba(8, 5, 3, 0.45);
}

.shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-list {
  display: block;
}

.shop-panel.is-epic-shop .shop-epic-rail-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

/* category dropdown (fortnite.com's category-dropdown row): label + chevron,
   sections underneath while open */
.shop-panel.is-epic-shop .shop-epic-rail-cat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.shop-panel.is-epic-shop .shop-epic-rail-row--cat {
  justify-content: space-between;
}

.shop-panel.is-epic-shop .shop-epic-rail-chev {
  display: inline-flex;
  flex: none;
  margin-right: 1.25rem;
  color: inherit;
}

.shop-panel.is-epic-shop .shop-epic-rail-chev .shop-epic-svg--chevron {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-rail-cat.is-open .shop-epic-rail-chev .shop-epic-svg--chevron {
  transform: rotate(180deg);
}

.shop-panel.is-epic-shop .shop-epic-rail-sub {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.shop-panel.is-epic-shop .shop-epic-rail-cat.is-open > .shop-epic-rail-sub {
  display: flex;
}

.shop-panel.is-epic-shop .shop-epic-rail-row--sub .shop-epic-rail-label {
  padding-left: 2.5rem;
}

.shop-panel.is-epic-shop .shop-epic-rail-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--shop-epic-radius-sm);
  background: transparent;
  color: var(--sf-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 10px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), background-color var(--shop-epic-motion) var(--shop-epic-ease), color var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-rail-row:hover,
.shop-panel.is-epic-shop .shop-epic-rail-row:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
}

.shop-panel.is-epic-shop .shop-epic-rail-row.is-active {
  background: rgba(244, 236, 216, 0.9);
  color: var(--sf-paper-ink);
}

.shop-panel.is-epic-shop .shop-epic-rail-dot {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  margin: 4px 12px;
  border-radius: 50%;
  background: rgba(247, 239, 225, 0.4);
  transition: background-color var(--shop-epic-motion) var(--shop-epic-ease), transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-rail-row.is-active .shop-epic-rail-dot {
  background: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-rail-label {
  display: block;
  min-width: 0;
  padding: 0.5rem 1.25rem;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.shop-panel.is-epic-shop .shop-epic-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 28rem;
  margin: 1rem 0 2rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--sf-edge);
  border-radius: var(--shop-epic-radius-lg);
  background: linear-gradient(180deg, var(--sf-timber) 0%, #241811 100%);
  box-shadow: 0 10px 30px rgba(8, 5, 3, 0.35);
  text-align: center;
}

.shop-panel.is-epic-shop .shop-epic-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--sf-brass-dim);
  background: rgba(20, 15, 11, 0.6);
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-empty-title {
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-empty-body {
  font-size: 0.9rem;
  color: var(--sf-ink-soft);
}

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .shop-panel.is-epic-shop .shop-epic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* the cell widens to 3 columns; its aspect stays the 2-wide one until 768px (the site's md:aspect) */
  .shop-panel.is-epic-shop .shop-epic-cell[data-span="3"],
  .shop-panel.is-epic-shop .shop-epic-cell[data-span="4"] {
    grid-column: span 3;
  }

  .shop-panel.is-epic-shop .shop-epic-carousel-track {
    grid-auto-columns: minmax(33.333%, 1fr);
  }

  .shop-panel.is-epic-shop .shop-epic-tile-text {
    gap: 0.25rem;
  }
}

@media (min-width: 768px) {
  .shop-panel.is-epic-shop .shop-epic-page {
    padding: 0.25rem 1.25rem 2.5rem;
  }

  .shop-panel.is-epic-shop .shop-epic-head-row {
    flex-direction: row;
    align-items: center;
  }

  .shop-panel.is-epic-shop .shop-epic-h1 { order: 0; }
  .shop-panel.is-epic-shop .shop-epic-buy,
  .shop-panel.is-epic-shop .shop-epic-wallet { order: 1; }

  .shop-panel.is-epic-shop .shop-epic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shop-panel.is-epic-shop .shop-epic-cell[data-span="3"],
  .shop-panel.is-epic-shop .shop-epic-cell[data-span="4"] {
    --shop-epic-aspect: 1.938;
  }

  .shop-panel.is-epic-shop .shop-epic-cell[data-span="4"] {
    grid-column: span 4;
  }

  .shop-panel.is-epic-shop .shop-epic-carousel-track {
    grid-auto-columns: minmax(25%, 1fr);
  }

  .shop-panel.is-epic-shop .shop-epic-carousel-btn--prev { transform: translateX(-50%); }
  .shop-panel.is-epic-shop .shop-epic-carousel-btn--next { transform: translateX(50%); }

  .shop-panel.is-epic-shop .shop-epic-title { font-size: 1.1875rem; }
  .shop-panel.is-epic-shop .shop-epic-tile--bundle .shop-epic-title { font-size: 1rem; }
  .shop-panel.is-epic-shop .shop-epic-price { font-size: 1.1875rem; }
}

@media (min-width: 1024px) {
  .shop-panel.is-epic-shop .shop-epic-cell[data-span="4"] {
    --shop-epic-aspect: 2.589;
  }

  .shop-panel.is-epic-shop .shop-epic-h1 { font-size: 2.6875rem; }
  .shop-panel.is-epic-shop .shop-epic-h2 { font-size: 2.6875rem; }
  .shop-panel.is-epic-shop .shop-epic-h3 { font-size: 1.5rem; }

  .shop-panel.is-epic-shop .shop-epic-section {
    padding-bottom: 3.75rem;
  }

  .shop-panel.is-epic-shop .shop-epic-page.has-rail .shop-epic-section {
    scroll-margin-top: var(--shop-epic-scroll-offset);
  }

  .shop-panel.is-epic-shop .shop-epic-tile-text {
    padding: 0 1rem 1rem;
  }

  .shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tile-text,
  .shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tile-text {
    padding-bottom: 0.5rem;
  }

  .shop-panel.is-epic-shop .shop-epic-title {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  .shop-panel.is-epic-shop .shop-epic-tile--bundle .shop-epic-title {
    font-size: 1.1875rem;
    -webkit-line-clamp: 2;
  }

  .shop-panel.is-epic-shop .shop-epic-cell,
  .shop-panel.is-epic-shop .shop-epic-slide {
    container-type: inline-size;
  }

  @container (max-width: 200px) {
    .shop-panel.is-epic-shop .shop-epic-title {
      font-size: 1.1875rem;
      line-height: 1.5rem;
    }

    .shop-panel.is-epic-shop .shop-epic-tile--bundle .shop-epic-title {
      font-size: 1rem;
    }

    .shop-panel.is-epic-shop .shop-epic-price {
      font-size: 1rem;
    }

    .shop-panel.is-epic-shop .shop-epic-badge {
      font-size: 0.7rem;
    }

    .shop-panel.is-epic-shop .shop-epic-tile-text {
      padding: 0 0.75rem 0.75rem;
    }
  }

  /* desktop: sticky 48px left rail with dots + hover-expanding labels */
  .shop-panel.is-epic-shop .shop-epic-page.has-rail {
    flex-direction: row;
  }

  .shop-panel.is-epic-shop .shop-epic-page.has-rail .shop-epic-main {
    margin-left: 2rem;
  }

  .shop-panel.is-epic-shop .shop-epic-rail {
    /* full-height column in flow; the inner sticks inside it. The column
       itself takes no pointer: the flyout opens from the pill and the
       filters button (is-hover, set by the renderer with a little intent),
       never from the empty gutter beside the tiles. */
    position: relative;
    top: auto;
    z-index: 5;
    flex: 0 0 48px;
    align-self: stretch;
    width: 48px;
    min-height: 0;
    margin-bottom: 0;
    pointer-events: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-inner {
    /* fortnite.com floats the rail at the middle of the viewport (sticky
       top-1/2 -translate-y-1/2). A transform would push it under the header
       before sticky engages at the top of the page, so this is a
       viewport-tall sticky box that centres its content instead; the dot
       pill and flyout stay capped at 50vh. */
    position: sticky;
    top: var(--shop-epic-scroll-offset);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    width: 48px;
    height: calc(100dvh - var(--shop-epic-scroll-offset));
    max-height: 100%;
    pointer-events: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-inner > * {
    pointer-events: auto;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-shimmed .shop-epic-rail-inner {
    right: auto;
    top: 0;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-bar {
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .shop-panel.is-epic-shop .shop-epic-filters {
    width: 48px;
    height: auto;
    margin: 0;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-trigger {
    display: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-list,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-list {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: max-content;
    max-width: 18rem;
    min-height: 0;
    max-height: 50vh;
    padding: 0.5rem 7px; /* 8px dot + 2 x 12px margins + 2 x 7px + 2 x 1px border = 48px */
    border: 1px solid var(--sf-edge);
    border-radius: var(--shop-epic-radius-sm);
    box-shadow: 0 10px 30px rgba(8, 5, 3, 0.35);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(#0000 0, #000 8px calc(100% - 8px), #0000 100%);
    mask-image: linear-gradient(#0000 0, #000 8px calc(100% - 8px), #0000 100%);
  }

  .shop-panel.is-epic-shop .shop-epic-rail-list::-webkit-scrollbar {
    display: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-row {
    width: auto;
    max-width: 100%;
    min-height: 16px;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-scroll {
    gap: 0.25rem; /* fortnite.com gap-1 between dots; the flyout restores gap-3 */
    padding: 0;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-dot {
    display: block;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-row.is-active .shop-epic-rail-dot {
    transform: scale(1.25);
  }

  .shop-panel.is-epic-shop .shop-epic-rail-row.is-active {
    background: transparent;
    color: var(--sf-ink);
  }

  .shop-panel.is-epic-shop .shop-epic-rail-label {
    width: 0;
    height: 0;
    padding: 0;
    opacity: 0;
    line-height: 1.5;
    transition: opacity var(--shop-epic-motion) var(--shop-epic-ease);
  }

  /* collapsed dot rail: one dot per category, no chevrons, no section rows */
  .shop-panel.is-epic-shop .shop-epic-rail-chev,
  .shop-panel.is-epic-shop .shop-epic-rail-cat.is-open > .shop-epic-rail-sub {
    display: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-cat {
    gap: 0.25rem;
  }

  .shop-panel.is-epic-shop .shop-epic-rail-cat.is-active > .shop-epic-rail-row--cat .shop-epic-rail-dot {
    background: var(--sf-brass-lit);
    transform: scale(1.25);
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-label {
    width: auto;
    height: auto;
    padding: 0.5rem 1.25rem 0.5rem 0;
    opacity: 1;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-chev,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-chev,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-chev {
    display: inline-flex;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-cat.is-open > .shop-epic-rail-sub,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-cat.is-open > .shop-epic-rail-sub,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-cat.is-open > .shop-epic-rail-sub {
    display: flex;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-cat,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-cat,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-cat {
    gap: 0.75rem;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-cat.is-active > .shop-epic-rail-row--cat .shop-epic-rail-dot,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-cat.is-active > .shop-epic-rail-row--cat .shop-epic-rail-dot,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-cat.is-active > .shop-epic-rail-row--cat .shop-epic-rail-dot {
    transform: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row.is-active,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row.is-active,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row.is-active {
    background: rgba(244, 236, 216, 0.9);
    color: var(--sf-paper-ink);
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row.is-active .shop-epic-rail-dot,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row.is-active .shop-epic-rail-dot,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row.is-active .shop-epic-rail-dot {
    background: var(--sf-paper-ink);
    transform: none;
  }
}

@media (min-width: 1024px) {
  /* Expanded: fortnite.com's side-nav, a 450px black/70 blurred panel
     (p-3 + p-2 around the rows) that replaces the dot rail and overlays the
     first tile column; rows are labels only, wrapping, with a visible
     scrollbar when the list is taller than half the viewport. */
  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-list,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-list,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-list {
    width: min(450px, calc(100vw - 5rem));
    max-width: none;
    padding: 0.75rem;
    border-color: rgba(255, 236, 205, 0.12);
    background: rgba(12, 9, 7, 0.84);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(8, 5, 3, 0.6);
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 236, 216, 0.7) rgba(244, 236, 216, 0.14);
    scrollbar-gutter: stable;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-list::-webkit-scrollbar,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-list::-webkit-scrollbar,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-list::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-list::-webkit-scrollbar-track,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-list::-webkit-scrollbar-track,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-list::-webkit-scrollbar-track {
    background: rgba(244, 236, 216, 0.14);
    border-radius: 20px;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-list::-webkit-scrollbar-thumb,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-list::-webkit-scrollbar-thumb,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-list::-webkit-scrollbar-thumb {
    background: rgba(244, 236, 216, 0.7);
    border-radius: 20px;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-scroll,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-scroll,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-scroll {
    gap: 0.75rem;
    padding: 0.5rem;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-dot,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-dot,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-dot {
    display: none;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row {
    width: 100%;
    border-radius: var(--shop-epic-radius-xs);
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-label {
    padding: 0.5rem 1.25rem;
  }

  /* the flyout slides out of the pill */
  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-scroll,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-scroll,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-scroll {
    animation: shopEpicRailIn 180ms var(--shop-epic-ease, ease-out) both;
  }

  /* rows in the flyout: a soft fill and a nudge under the cursor, brass
     text; the active one stays the paper chip. The boxy focus ring is for
     the keyboard only. */
  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row {
    outline: 0;
    transition: background-color 140ms ease, color 140ms ease;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row:not(.is-active):hover,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row:not(.is-active):hover,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row:not(.is-active):hover {
    background: rgba(244, 236, 216, 0.1);
    color: var(--sf-brass-lit);
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row:focus-visible,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row:focus-visible,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row:focus-visible {
    outline: 2px solid var(--shop-epic-outline);
    outline-offset: -2px;
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-label {
    transition: transform 160ms ease, opacity var(--shop-epic-motion) var(--shop-epic-ease);
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row:not(.is-active):hover .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row:not(.is-active):hover .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row:not(.is-active):hover .shop-epic-rail-label {
    transform: translateX(4px);
  }

  /* sections under an open category hang off a thin rule */
  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-sub,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-sub,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-sub {
    margin-left: 1.25rem;
    padding-left: 0.25rem;
    border-left: 1px solid rgba(244, 236, 216, 0.18);
  }

  .shop-panel.is-epic-shop .shop-epic-rail.is-hover .shop-epic-rail-row--sub .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail:focus-within .shop-epic-rail-row--sub .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail.is-open .shop-epic-rail-row--sub .shop-epic-rail-label {
    padding-left: 1rem;
    font-size: 0.8rem;
  }
}

/* ── Width: fortnite.com's shop runs edge to edge (content capped at 1760px).
   The portal centres every tab in a 1200px column, which squeezed the grid
   to ~500px on a 1080p screen. Open the column up only while the epic shop
   is mounted; every other tab keeps its width. ── */
#main:has(.shop-panel.is-epic-shop) {
  max-width: none;
}

/* ── Native sticky rail: style.css puts overflow-x: hidden on html AND body,
   which makes body a (never-scrolling) scroll container and defeats
   position: sticky for everything inside it. clip keeps the horizontal
   clipping without creating a scroll container, so the rail pins on the
   compositor with no scroll-driven repositioning. Scoped to the epic shop;
   browsers without clip keep the JS pin shim in epicshop.js. ── */
body:has(.shop-panel.is-epic-shop) {
  overflow-x: clip;
}

/* No always-visible label column: fortnite.com shows only the dot rail at
   every desktop width (labels appear on hover/focus), and a fixed 290px
   label column was what starved the grid on wide screens. */

/* ── Touch: swipe the carousel with scroll-snap instead of translate paging ─ */
@media (pointer: coarse) {
  .shop-panel.is-epic-shop .shop-epic-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .shop-panel.is-epic-shop .shop-epic-carousel-viewport::-webkit-scrollbar {
    display: none;
  }

  .shop-panel.is-epic-shop .shop-epic-carousel-track {
    transform: none !important;
    transition: none;
  }

  .shop-panel.is-epic-shop .shop-epic-slide {
    scroll-snap-align: start;
  }
}

/* ── Motion: honour reduced motion and Corner's perf-lite tier ──────────── */
@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-page {
    --shop-epic-motion: 0ms;
  }

  .shop-panel.is-epic-shop .shop-epic-tile-mask,
  .shop-panel.is-epic-shop .shop-epic-img-swiper,
  .shop-panel.is-epic-shop .shop-epic-carousel-track,
  .shop-panel.is-epic-shop .shop-epic-img,
  .shop-panel.is-epic-shop .shop-epic-tile-text,
  .shop-panel.is-epic-shop .shop-epic-tag-plusrow,
  .shop-panel.is-epic-shop .shop-epic-tag-strip,
  .shop-panel.is-epic-shop .shop-epic-rail-label,
  .shop-panel.is-epic-shop .shop-epic-rail-dot {
    transition: none;
  }

  .shop-panel.is-epic-shop .shop-epic-tile:hover .shop-epic-tile-mask,
  .shop-panel.is-epic-shop .shop-epic-tile:focus-visible .shop-epic-tile-mask {
    transform: none;
  }
}

.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-page {
  --shop-epic-motion: 0ms;
}

.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-tile-mask,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-img-swiper,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-carousel-track,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-img,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-tile-text,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-tag-plusrow,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-tag-strip,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-rail-label,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-rail-dot {
  transition: none;
  will-change: auto;
}

.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-tile:hover .shop-epic-tile-mask,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-tile:focus-visible .shop-epic-tile-mask {
  transform: none;
}

.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-carousel-btn,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-pill,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-filters,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-rail-bar,
.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-rail-list {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.shop-panel.is-epic-shop:where(html.perf-lite *) .shop-epic-title {
  text-shadow: none;
}

/* ── Filter Shop dialog ──────────────────────────────────────────────────
   fortnite.com's filter modal: title, "Ownership" with one big box, "Item
   Type" as a three-column list of boxes with counts, a full-width Show
   button, then Clear and Close. It hangs off <body> (the shop panel is
   layout-contained, which would trap a fixed overlay), so it carries the
   page tokens itself and reads only the room's --sf-* palette. */
.shop-epic-filter {
  --shop-epic-radius-xs: 8px;
  --shop-epic-radius-sm: 12px;
  --shop-epic-radius-lg: 20px;
  --shop-epic-outline: rgba(255, 220, 164, 0.45);
  --shop-epic-motion: 150ms;
  --shop-epic-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  inset: 0;
  z-index: 620;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  font-family: var(--font-display);
  color: var(--sf-ink);
}

/* set on <body> while the dialog is up */
.shop-epic-filter-open {
  overflow: hidden;
}

.shop-epic-filter-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 3, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: shopEpicFilterFade 180ms ease-out both;
}

.shop-epic-filter-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 2rem 2rem 2rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 226, 184, 0.14);
  border-radius: var(--shop-epic-radius-sm);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(207, 160, 89, 0.14), transparent 60%),
    linear-gradient(180deg, #2b1d13 0%, #1f150e 60%, #1a120c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.14), 0 30px 80px rgba(8, 5, 3, 0.7);
  animation: shopEpicFilterIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes shopEpicFilterFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shopEpicFilterIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.shop-epic-filter-title {
  margin: 0 0 1.25rem;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  font-size: 1.6875rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-epic-filter-h {
  margin: 1.25rem 0 0.75rem;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-epic-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 1rem;
}

.shop-epic-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.25rem 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-epic-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.shop-epic-check-box {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--sf-ink);
  border-radius: var(--shop-epic-radius-xs);
  background: rgba(8, 5, 3, 0.35);
  color: #2c1d08;
  transition: background var(--shop-epic-motion) var(--shop-epic-ease), border-color var(--shop-epic-motion) var(--shop-epic-ease), box-shadow var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-epic-check--lg .shop-epic-check-box {
  width: 2.75rem;
  height: 2.75rem;
  border-width: 3px;
  border-radius: var(--shop-epic-radius-sm);
}

.shop-epic-check-glyph {
  width: 70%;
  height: 70%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--shop-epic-motion) var(--shop-epic-ease), transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-epic-check-input:checked + .shop-epic-check-box {
  border-color: var(--sf-brass-lit);
  background: linear-gradient(135deg, var(--sf-brass-lit), var(--sf-brass));
  box-shadow: 0 0 0 1px rgba(8, 5, 3, 0.4), 0 6px 16px rgba(207, 160, 89, 0.3);
}

.shop-epic-check-input:checked + .shop-epic-check-box .shop-epic-check-glyph {
  opacity: 1;
  transform: none;
}

.shop-epic-check:hover .shop-epic-check-box {
  border-color: var(--sf-brass-lit);
}

.shop-epic-check-input:focus-visible + .shop-epic-check-box {
  outline: 3px solid var(--shop-epic-outline);
  outline-offset: 3px;
}

.shop-epic-check-text {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--sf-ink);
}

.shop-epic-check-count {
  color: var(--sf-ink-soft);
  font-variant-numeric: tabular-nums;
}

.shop-epic-filter-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.shop-epic-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.shop-epic-filter-show,
.shop-epic-filter-clear,
.shop-epic-filter-closebtn,
.shop-epic-empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--shop-epic-radius-xs);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), filter var(--shop-epic-motion) var(--shop-epic-ease), opacity var(--shop-epic-motion) var(--shop-epic-ease);
}

/* fortnite's yellow → the lamp */
.shop-epic-filter-show,
.shop-epic-empty-action {
  background: linear-gradient(90deg, var(--sf-lamp), var(--sf-brass-lit));
  color: #2c1d08;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.4), 0 8px 22px rgba(255, 184, 92, 0.25);
}

.shop-epic-filter-clear {
  background: rgba(8, 5, 3, 0.45);
  color: var(--sf-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.14);
}

.shop-epic-filter-closebtn {
  background: var(--sf-paper);
  color: var(--sf-paper-ink);
}

.shop-epic-filter-show:hover,
.shop-epic-filter-show:focus-visible,
.shop-epic-filter-clear:hover,
.shop-epic-filter-clear:focus-visible,
.shop-epic-filter-closebtn:hover,
.shop-epic-filter-closebtn:focus-visible,
.shop-epic-empty-action:hover,
.shop-epic-empty-action:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
  filter: brightness(1.06);
}

.shop-epic-filter-show:disabled,
.shop-epic-filter-clear:disabled {
  opacity: 0.4;
  cursor: default;
  filter: none;
  outline-color: transparent;
}

.shop-panel.is-epic-shop .shop-epic-empty-action {
  margin-top: 1.25rem;
}

/* The Filters button wears a count once anything is switched on. */
.shop-panel.is-epic-shop .shop-epic-filters {
  position: relative;
}

.shop-panel.is-epic-shop .shop-epic-filters.is-active {
  background: linear-gradient(135deg, var(--sf-brass-lit), var(--sf-brass));
}

.shop-panel.is-epic-shop .shop-epic-filters.is-active::after {
  content: attr(data-count);
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--sf-lamp);
  box-shadow: 0 0 0 2px #1b120c;
  color: #2c1d08;
  font-family: 'Unbounded', var(--font-brand);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .shop-epic-filter {
    padding: 0;
    align-items: flex-end;
  }

  .shop-epic-filter-panel {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 1rem);
    padding: 1.5rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--shop-epic-radius-lg) var(--shop-epic-radius-lg) 0 0;
  }

  .shop-epic-filter-title { font-size: 1.4rem; }
  .shop-epic-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.75rem; }
  .shop-epic-check-text { font-size: 0.9rem; }
  .shop-epic-filter-show, .shop-epic-filter-clear, .shop-epic-filter-closebtn { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-epic-filter-backdrop,
  .shop-epic-filter-panel {
    animation: none;
  }
}

.shop-epic-filter-backdrop:where(html.perf-balanced *),
.shop-epic-filter-backdrop:where(html.perf-lite *) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(8, 5, 3, 0.78);
}

/* ── Item page ───────────────────────────────────────────────────────────
   fortnite.com/item-shop/<type>/<slug>: the offer's own colours flood a hero,
   copy on the left (back link, badges, title, price, until-when, one CTA),
   the render on the right, then what the offer includes. */
.shop-panel.is-epic-shop .shop-epic-page.is-detail {
  padding: 0.25rem 0 2rem;
}

.shop-panel.is-epic-shop .shop-epic-detail {
  --shop-epic-c1: var(--sf-wall-lit);
  --shop-epic-c2: var(--sf-timber);
  --shop-epic-c3: var(--sf-timber-dark);
  position: relative;
  width: 100%;
  min-width: 0;
  animation: shopEpicDetailIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes shopEpicDetailIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.shop-panel.is-epic-shop .shop-epic-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 2rem;
  min-height: min(78vh, 760px);
  padding: 1.25rem 1.5rem 0;
  overflow: hidden;
  border-radius: var(--shop-epic-radius-lg);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 56px),
    radial-gradient(ellipse 70% 80% at 72% 60%, rgba(255, 255, 255, 0.16), transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
    linear-gradient(160deg, var(--shop-epic-c1) 0%, var(--shop-epic-c2) 55%, var(--shop-epic-c3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px rgba(8, 5, 3, 0.45);
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(180deg, transparent, rgba(8, 5, 3, 0.42));
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic-detail-top {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.shop-panel.is-epic-shop .shop-epic-detail-back,
.shop-panel.is-epic-shop .shop-epic-detail-share {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 5, 3, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--sf-ink);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), background var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-back { padding: 0 1rem 0 0.5rem; }
.shop-panel.is-epic-shop .shop-epic-detail-back .shop-epic-svg--arrow { font-size: 1.1rem; }
.shop-panel.is-epic-shop .shop-epic-detail-back-icon { width: 1.1rem; height: 1.1rem; color: var(--sf-brass-lit); }

.shop-panel.is-epic-shop .shop-epic-detail-share {
  justify-content: center;
  width: 2.5rem;
  padding: 0;
  overflow: hidden;
  transition: width var(--shop-epic-motion) var(--shop-epic-ease), outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-share-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.shop-panel.is-epic-shop .shop-epic-detail-share-text { display: none; white-space: nowrap; font-size: 0.7rem; }
.shop-panel.is-epic-shop .shop-epic-detail-share.is-copied { width: auto; padding: 0 0.9rem 0 0.7rem; background: rgba(127, 201, 138, 0.28); }
.shop-panel.is-epic-shop .shop-epic-detail-share.is-copied .shop-epic-detail-share-text { display: inline; }

.shop-panel.is-epic-shop .shop-epic-detail-back:hover,
.shop-panel.is-epic-shop .shop-epic-detail-back:focus-visible,
.shop-panel.is-epic-shop .shop-epic-detail-share:hover,
.shop-panel.is-epic-shop .shop-epic-detail-share:focus-visible {
  background: rgba(8, 5, 3, 0.6);
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
}

.shop-panel.is-epic-shop .shop-epic-detail-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.5rem 0 2.5rem;
}

.shop-panel.is-epic-shop .shop-epic-detail-copy .shop-epic-badges { margin-bottom: 0; }

.shop-panel.is-epic-shop .shop-epic-detail-title {
  margin: 0;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sf-ink);
  text-shadow: 0 2px 12px rgba(8, 5, 3, 0.35);
  overflow-wrap: anywhere;
}

.shop-panel.is-epic-shop .shop-epic-detail-subtitle {
  margin-top: -0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-detail-pricenote {
  margin: 0.25rem 0 -0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-detail-price .shop-epic-price { font-size: 1.7rem; }
.shop-panel.is-epic-shop .shop-epic-detail-price .shop-epic-vbuck { width: 2rem; height: 2rem; }
.shop-panel.is-epic-shop .shop-epic-detail-price .shop-epic-price-original { font-size: 1.3rem; }
.shop-panel.is-epic-shop .shop-epic-detail-price .shop-epic-owned-text { font-size: 1.5rem; }

.shop-panel.is-epic-shop .shop-epic-detail-until {
  margin: 0.4rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--shop-epic-radius-sm);
  background: rgba(8, 5, 3, 0.42);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.4rem;
  margin-top: 0.25rem;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-radius: var(--shop-epic-radius-xs);
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), filter var(--shop-epic-motion) var(--shop-epic-ease), transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-cta.is-lamp {
  background: linear-gradient(90deg, var(--sf-lamp), var(--sf-brass-lit));
  color: #2c1d08;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.4), 0 10px 26px rgba(8, 5, 3, 0.35);
}

.shop-panel.is-epic-shop .shop-epic-detail-cta.is-paper {
  background: var(--sf-paper);
  color: var(--sf-paper-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-cta.is-muted {
  background: rgba(8, 5, 3, 0.5);
  color: var(--sf-ink-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, 0.16);
}

.shop-panel.is-epic-shop .shop-epic-detail-cta:hover,
.shop-panel.is-epic-shop .shop-epic-detail-cta:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
  filter: brightness(1.05);
}

.shop-panel.is-epic-shop .shop-epic-detail-cta:active { transform: translateY(1px); }

/* Add to gift list: the item page's way onto a list, under the gift button */
.shop-panel.is-epic-shop .shop-epic-detail-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.15rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255, 236, 205, 0.28);
  border-radius: var(--shop-epic-radius-xs);
  background: rgba(8, 5, 3, 0.42);
  color: var(--sf-ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), background-color var(--shop-epic-motion) var(--shop-epic-ease), border-color var(--shop-epic-motion) var(--shop-epic-ease), transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-pick[hidden] { display: none; }

.shop-panel.is-epic-shop .shop-epic-detail-pick:hover,
.shop-panel.is-epic-shop .shop-epic-detail-pick:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
  border-color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-detail-pick:active { transform: translateY(1px); }

.shop-panel.is-epic-shop .shop-epic-detail-pick-box {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid currentColor;
  border-radius: 0.35rem;
}

.shop-panel.is-epic-shop .shop-epic-detail-pick-box svg {
  grid-area: 1 / 1;
  width: 70%;
  height: 70%;
  transition: opacity var(--shop-epic-motion) var(--shop-epic-ease), transform var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-pick .shop-epic-detail-pick-plus { opacity: 1; transform: none; }
.shop-panel.is-epic-shop .shop-epic-detail-pick .shop-epic-check-glyph { opacity: 0; transform: scale(0.6); }

.shop-panel.is-epic-shop .shop-epic-detail-pick.is-picked {
  border-color: var(--sf-lamp);
  background: rgba(8, 5, 3, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 92, 0.35);
}

.shop-panel.is-epic-shop .shop-epic-detail-pick.is-picked .shop-epic-detail-pick-box {
  border-color: var(--sf-lamp);
  background: var(--sf-lamp);
  color: #2c1d08;
}

.shop-panel.is-epic-shop .shop-epic-detail-pick.is-picked .shop-epic-detail-pick-plus { opacity: 0; transform: rotate(90deg) scale(0.6); }
.shop-panel.is-epic-shop .shop-epic-detail-pick.is-picked .shop-epic-check-glyph { opacity: 1; transform: none; }

/* a bundle Epic refuses because part of it is owned: amber, not the owned green */
.shop-panel.is-epic-shop .shop-epic-price--partly .shop-epic-owned-text {
  color: var(--sf-lamp);
  /* amber on a pale tile needs the lift the title gets */
  text-shadow: 0 1px 2px rgba(8, 5, 3, 0.55), 0 0 10px rgba(8, 5, 3, 0.25);
}

.shop-panel.is-epic-shop .shop-epic-detail-ownnote {
  margin: 0.15rem 0 0;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--sf-lamp);
  border-radius: var(--shop-epic-radius-sm);
  background: rgba(8, 5, 3, 0.42);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sf-ink);
}

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-detail-pick,
  .shop-panel.is-epic-shop .shop-epic-detail-pick-box svg { transition: none; }
}

.shop-panel.is-epic-shop .shop-epic-detail-art {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 760px;
  min-width: 0;
}

/* a page without a turntable shows its render here; like the turntable stage
   below, it is not a thing on the page to select or drag (see the showcase) */
.shop-panel.is-epic-shop .shop-epic-detail-frame {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-height: min(70vh, 700px);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-panel.is-epic-shop .shop-epic-detail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 40px rgba(8, 5, 3, 0.45));
  transition: opacity var(--shop-epic-motion) var(--shop-epic-ease);
  -webkit-user-drag: none;
}

/* a bundle / car render is a composition: give it the full frame, no bottom hug */
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type^="bundle"] .shop-epic-detail-img,
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="car-bundle"] .shop-epic-detail-img,
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-img {
  object-position: center;
}

/* a jam track: fortnite.com sets the cover in a glowing frame (the preview's
   play button sits over it); the video, when the page has one, stays out */
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-frame,
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-showcase {
  position: relative;
  width: 100%;
  /* square, and never taller than the room: the width gives way, so the whole cover shows */
  max-width: min(520px, 60vh);
  max-height: none;
  aspect-ratio: 1;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #8fe3ff 0%, #6f7bff 48%, #ff7ad9 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 70px rgba(122, 140, 255, 0.35), 0 24px 60px rgba(8, 5, 3, 0.45);
}

.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-art {
  align-self: center;
  margin-bottom: 1.5rem;
}

.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-frame { align-items: stretch; }

.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-img,
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-audio .shop-epic-detail-video {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
  outline: none;
  filter: none;
}

/* the preview's stage fills its box: inset by the frame's padding so the ring shows around the cover */
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-stage { inset: 12px; align-items: stretch; }
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-audio { align-items: stretch; }
.shop-panel.is-epic-shop .shop-epic-detail[data-epic-type="track"] .shop-epic-detail-caption { display: none; }

.shop-panel.is-epic-shop .shop-epic-detail-styles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-panel.is-epic-shop .shop-epic-detail-style {
  width: 4rem;
  height: 4rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--shop-epic-radius-xs);
  background: rgba(8, 5, 3, 0.35);
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 6px;
  transition: border-color var(--shop-epic-motion) var(--shop-epic-ease), outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  -webkit-user-drag: none;
}

.shop-panel.is-epic-shop .shop-epic-detail-style.is-active { border-color: var(--sf-brass-lit); }
.shop-panel.is-epic-shop .shop-epic-detail-style:hover,
.shop-panel.is-epic-shop .shop-epic-detail-style:focus-visible { outline-color: var(--shop-epic-outline); outline-offset: 2px; }

.shop-panel.is-epic-shop .shop-epic-detail-section {
  margin-top: 2rem;
  padding: 0 0.5rem;
}

.shop-panel.is-epic-shop .shop-epic-detail-count {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 236, 205, 0.12);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  vertical-align: middle;
  color: var(--sf-ink-soft);
}

.shop-panel.is-epic-shop .shop-epic-detail-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.shop-panel.is-epic-shop .shop-epic-detail-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 0.6rem;
  border: 1px solid var(--sf-edge);
  border-radius: var(--shop-epic-radius-sm);
  background: linear-gradient(180deg, var(--sf-timber) 0%, #241811 100%);
  color: var(--sf-ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 8px 22px rgba(8, 5, 3, 0.3);
}

.shop-panel.is-epic-shop .shop-epic-detail-item.is-link {
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), border-color var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-item.is-link:hover,
.shop-panel.is-epic-shop .shop-epic-detail-item.is-link:focus-visible {
  border-color: var(--sf-brass-dim);
  outline-color: var(--shop-epic-outline);
  outline-offset: 3px;
}

.shop-panel.is-epic-shop .shop-epic-detail-item-art {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.25rem;
  height: 4.25rem;
  overflow: hidden;
  border-radius: var(--shop-epic-radius-xs);
  background: rgba(255, 255, 255, 0.06);
}

.shop-panel.is-epic-shop .shop-epic-detail-item-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.shop-panel.is-epic-shop .shop-epic-detail-item-art .icon { width: 1.5rem; height: 1.5rem; color: var(--sf-brass-lit); opacity: 0.8; }

.shop-panel.is-epic-shop .shop-epic-detail-item-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.shop-panel.is-epic-shop .shop-epic-detail-item-type {
  font-family: 'Unbounded', var(--font-brand);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-brass-lit);
}

.shop-panel.is-epic-shop .shop-epic-detail-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .shop-panel.is-epic-shop .shop-epic-detail-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding: 1rem 1rem 0;
  }

  .shop-panel.is-epic-shop .shop-epic-detail-copy { padding: 1rem 0 1.5rem; }
  .shop-panel.is-epic-shop .shop-epic-detail-art { max-width: 520px; }
  .shop-panel.is-epic-shop .shop-epic-detail-frame { max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-detail { animation: none; }
}

/* ── Item page: fortnite.com's turntable video and page background ─────── */
.shop-panel.is-epic-shop .shop-epic-detail.has-bg .shop-epic-detail-hero {
  background-image:
    linear-gradient(90deg, rgba(8, 5, 3, 0.55) 0%, rgba(8, 5, 3, 0.18) 45%, rgba(8, 5, 3, 0) 70%),
    var(--shop-epic-bg);
  background-size: cover, cover;
  background-position: center, center;
}

.shop-panel.is-epic-shop .shop-epic-detail-tagline {
  margin: -0.2rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sf-ink-soft);
}

/* the turntable is a player, not a thing on the page to select: a click that
   moves a pixel, a double-click, or a selection swept across the page must
   never paint the browser's blue selection tint over the video or its still,
   a long press never offers to save the frame, and the still never drags as
   an image. A click still pauses and plays: the handler is on the click,
   which user-select does not touch. */
.shop-panel.is-epic-shop .shop-epic-detail-showcase {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1;
  max-height: min(70vh, 700px);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-panel.is-epic-shop .shop-epic-detail-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic-detail-stage.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* no CSS filter on the <video>: on iOS a filter sends an alpha HEVC through a
   compositing path that flattens it onto black (the still under it carries the shadow) */
.shop-panel.is-epic-shop .shop-epic-detail-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  -webkit-user-drag: none;
}

.shop-panel.is-epic-shop img.shop-epic-detail-video { filter: drop-shadow(0 24px 40px rgba(8, 5, 3, 0.4)); }

/* the still sits under the video: seen until the first frame paints, and when nothing plays */
.shop-panel.is-epic-shop .shop-epic-detail-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  object-position: center bottom;
  filter: drop-shadow(0 24px 40px rgba(8, 5, 3, 0.4));
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic-detail-still.is-missing { visibility: hidden; }
.shop-panel.is-epic-shop .shop-epic-detail-stage.is-playing .shop-epic-detail-still { opacity: 0; transition: opacity 240ms ease; }

.shop-panel.is-epic-shop .shop-epic-detail-item-desc {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sf-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 899px) {
  .shop-panel.is-epic-shop .shop-epic-detail-showcase { max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-detail-stage { transition: none; }
}

/* ── Showcase controls (fortnite.com: arrows, a pause / sound pill, the item's name, dots) ── */
.shop-panel.is-epic-shop .shop-epic-detail-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--shop-epic-radius-xs);
  background: var(--shop-epic-paper);
  color: var(--sf-paper-ink);
  transform: translateY(-50%);
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 8px;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), opacity var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-arrow--prev { left: 0; }
.shop-panel.is-epic-shop .shop-epic-detail-arrow--next { right: 0; }
.shop-panel.is-epic-shop .shop-epic-detail-arrow .shop-epic-svg { font-size: 1.2rem; }

.shop-panel.is-epic-shop .shop-epic-detail-controls {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  /* no backdrop blur over the turntable: WebKit composites the video flat (onto black) to sample it */
  background: rgba(8, 5, 3, 0.72);
  transform: translateX(-50%);
}

.shop-panel.is-epic-shop .shop-epic-detail-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sf-ink);
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 4px;
  transition: background var(--shop-epic-motion) var(--shop-epic-ease), outline-color var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-ctl { width: 1.15rem; height: 1.15rem; }
.shop-panel.is-epic-shop .shop-epic-ctl--play,
.shop-panel.is-epic-shop .shop-epic-ctl--sound { display: none; }
.shop-panel.is-epic-shop .shop-epic-detail-showcase.is-paused .shop-epic-ctl--play { display: block; }
.shop-panel.is-epic-shop .shop-epic-detail-showcase.is-paused .shop-epic-ctl--pause { display: none; }
.shop-panel.is-epic-shop .shop-epic-detail-showcase.has-sound .shop-epic-ctl--sound { display: block; }
.shop-panel.is-epic-shop .shop-epic-detail-showcase.has-sound .shop-epic-ctl--muted { display: none; }

.shop-panel.is-epic-shop .shop-epic-detail-arrow:hover,
.shop-panel.is-epic-shop .shop-epic-detail-arrow:focus-visible,
.shop-panel.is-epic-shop .shop-epic-detail-control:hover,
.shop-panel.is-epic-shop .shop-epic-detail-control:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 2px;
}

.shop-panel.is-epic-shop .shop-epic-detail-control:hover { background: rgba(255, 255, 255, 0.12); }

.shop-panel.is-epic-shop .shop-epic-detail-video { cursor: pointer; }

.shop-panel.is-epic-shop .shop-epic-detail-caption {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--sf-ink);
  text-shadow: 0 1px 8px rgba(8, 5, 3, 0.5);
}

.shop-panel.is-epic-shop .shop-epic-detail-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding-bottom: 1.25rem;
}

.shop-panel.is-epic-shop .shop-epic-detail-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 4px;
  transition: background var(--shop-epic-motion) var(--shop-epic-ease), transform var(--shop-epic-motion) var(--shop-epic-ease), outline-color var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-detail-dot.is-active { background: var(--sf-ink); transform: scale(1.25); }
.shop-panel.is-epic-shop .shop-epic-detail-dot:hover,
.shop-panel.is-epic-shop .shop-epic-detail-dot:focus-visible { outline-color: var(--shop-epic-outline); outline-offset: 2px; }

.shop-panel.is-epic-shop .shop-epic-detail-stage.is-failed .shop-epic-detail-video { opacity: 0.85; }

/* a jam track: album art with fortnite's play button over it; no mute toggle (the preview is the sound) */
.shop-panel.is-epic-shop .shop-epic-detail-audio {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.shop-panel.is-epic-shop .shop-epic-detail-audio .shop-epic-detail-video {
  border-radius: 18px;
  object-position: center;
  cursor: pointer;
}

.shop-panel.is-epic-shop .shop-epic-detail-audio-blank {
  background: linear-gradient(160deg, var(--shop-epic-c1, #2a2340), var(--shop-epic-c2, #16121f));
}

.shop-panel.is-epic-shop .shop-epic-detail-playbig {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #14100c;
  box-shadow: 0 12px 30px rgba(8, 5, 3, 0.45);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 140ms ease, background 140ms ease;
}

.shop-panel.is-epic-shop .shop-epic-detail-playbig .shop-epic-ctl { display: block; width: 2.2rem; height: 2.2rem; margin-left: 0.2rem; }
.shop-panel.is-epic-shop .shop-epic-detail-playbig:hover,
.shop-panel.is-epic-shop .shop-epic-detail-playbig:focus-visible { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.shop-panel.is-epic-shop .shop-epic-detail-playbig:focus-visible { outline: 3px solid var(--shop-epic-outline); outline-offset: 3px; }
.shop-panel.is-epic-shop .shop-epic-detail-showcase:not(.is-paused) .shop-epic-detail-playbig { display: none; }
.shop-panel.is-epic-shop .shop-epic-detail-showcase.is-audio .shop-epic-detail-control--mute { display: none; }

/* ── Section backdrop ────────────────────────────────────────────────────
   fortnite.com's background per section, painted behind the whole portal
   (above the room, below the content) and cross-faded as the active section
   changes. The shop panel turns to glass so the picture shows through. */
.shop-epic-backdrop {
  position: fixed;
  inset: 0;
  /* on <body>, outside #app (z 1): over the body's room, under every panel; a
     fixed layer inside the app view would be sized to the page, not the
     viewport, because the view's entrance animation leaves a transform on it */
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 650ms ease;
}

.shop-epic-backdrop.is-on { opacity: 1; }

/* the layer is the shop's picture only: any other tab gets the room back */
.shop-epic-backdrop.is-on:where(body:not([data-active-tab="shop"]) *) { opacity: 0; }

.shop-epic-backdrop-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 650ms ease;
}

.shop-epic-backdrop-layer.is-front { opacity: 1; }

/* fortnite.com shows the picture as it is; a whisper of shade at the very top
   (under the site header) and the foot keeps the chrome legible, nothing more */
.shop-epic-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 11, 0.28) 0%, rgba(20, 15, 11, 0.04) 18%, rgba(20, 15, 11, 0.04) 82%, rgba(20, 15, 11, 0.3) 100%);
}

/* a Light picture is one fortnite pairs with dark copy; ours stays light, so it gets a touch more shade */
.shop-epic-backdrop[data-tone="light"]::after {
  background: linear-gradient(180deg, rgba(20, 15, 11, 0.36) 0%, rgba(20, 15, 11, 0.14) 18%, rgba(20, 15, 11, 0.14) 82%, rgba(20, 15, 11, 0.38) 100%);
}

/* with a picture up, the panel is no panel at all: the content sits on the picture */
.shop-panel.is-epic-shop.card:where(html.shop-epic-has-backdrop *) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* copy on a picture keeps a soft shadow, like fortnite's headings */
.shop-panel.is-epic-shop:where(html.shop-epic-has-backdrop *) .shop-epic-h1,
.shop-panel.is-epic-shop:where(html.shop-epic-has-backdrop *) .shop-epic-h2,
.shop-panel.is-epic-shop:where(html.shop-epic-has-backdrop *) .shop-epic-title,
.shop-panel.is-epic-shop:where(html.shop-epic-has-backdrop *) .shop-epic-subtitle,
.shop-panel.is-epic-shop:where(html.shop-epic-has-backdrop *) .shop-epic-powered,
.shop-panel.is-epic-shop:where(html.shop-epic-has-backdrop *) .shop-epic-owned-note-text {
  text-shadow: 0 1px 2px rgba(8, 5, 3, 0.5), 0 8px 26px rgba(8, 5, 3, 0.35);
}

.shop-panel.is-epic-shop.panel:where(html.shop-epic-has-backdrop *)::before { display: none; }

.shop-epic-backdrop:where(html.perf-lite *),
.shop-epic-backdrop-layer:where(html.perf-lite *) { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .shop-epic-backdrop,
  .shop-epic-backdrop-layer { transition: none; }
}

/* the lite tier keeps the picture (it is one image, no cheaper thing to show) and only loses the cross-fade */
.shop-epic-backdrop:where(html.perf-lite *) { transition: none; }

@keyframes shopEpicRailIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

.shop-epic-rail-scroll:where(html.perf-lite *) { animation: none !important; }
.shop-epic-rail-label:where(html.perf-lite *) { transition: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic-rail-scroll { animation: none !important; }
  .shop-panel.is-epic-shop .shop-epic-rail-label { transition: none !important; transform: none !important; }
}

/* ── Jam tracks: fortnite.com's rows, and its All Jam Tracks page ───────── */
.shop-panel.is-epic-shop .shop-epic-jam-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1279px) {
  .shop-panel.is-epic-shop .shop-epic-jam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .shop-panel.is-epic-shop .shop-epic-jam-grid { grid-template-columns: minmax(0, 1fr); }
}

.shop-panel.is-epic-shop .shop-epic-jamrow {
  position: relative;
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--shop-epic-radius-sm);
  background: rgba(11, 21, 58, 0.78);
  color: var(--sf-ink);
  font: inherit;
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  outline: 3px solid transparent;
  outline-offset: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), background var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic-jamrow > * { pointer-events: none; }

.shop-panel.is-epic-shop .shop-epic-jamrow:hover,
.shop-panel.is-epic-shop .shop-epic-jamrow:focus-visible {
  outline-color: var(--shop-epic-outline);
  outline-offset: 2px;
  background: rgba(16, 30, 82, 0.9);
}

.shop-panel.is-epic-shop .shop-epic-jamrow-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-width: 0;
  background: rgba(8, 5, 3, 0.35);
}

.shop-panel.is-epic-shop .shop-epic-jamrow-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-panel.is-epic-shop .shop-epic-jamrow-art .shop-epic-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sf-ink-soft);
}

/* lyrics that stay off some islands: fortnite.com's yellow warning on the cover */
.shop-panel.is-epic-shop .shop-epic-jamrow-explicit {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  color: #ffd400;
  filter: drop-shadow(0 1px 2px rgba(8, 5, 3, 0.7));
}

.shop-panel.is-epic-shop .shop-epic-warn { display: block; width: 100%; height: 100%; }

.shop-panel.is-epic-shop .shop-epic-jamrow-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0.9rem 0.7rem 0;
}

.shop-panel.is-epic-shop .shop-epic-jamrow-title {
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-panel.is-epic-shop .shop-epic-jamrow-artist {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--sf-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-panel.is-epic-shop .shop-epic-jamrow-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  min-width: 0;
}

.shop-panel.is-epic-shop .shop-epic-jamrow-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sf-ink-soft);
  white-space: nowrap;
}

.shop-panel.is-epic-shop .shop-epic-jamrow-sep { opacity: 0.5; }

.shop-panel.is-epic-shop .shop-epic-jamrow .shop-epic-price { font-size: 1.05rem; }
.shop-panel.is-epic-shop .shop-epic-jamrow .shop-epic-price--owned .shop-epic-owned-text { color: var(--shop-epic-owned, #7fc98a); }

.shop-panel.is-epic-shop .shop-epic-jamrow-leaving {
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(8, 5, 3, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* the page: fortnite.com's night sky behind "All Jam Tracks" */
.shop-panel.is-epic-shop .shop-epic-page.is-jam { padding: 0.25rem 0 2rem; }

.shop-panel.is-epic-shop .shop-epic-jampage {
  position: relative;
  padding: 1.25rem 1.5rem 2rem;
  border-radius: var(--shop-epic-radius-lg);
  background:
    radial-gradient(ellipse 55% 45% at 18% 0%, rgba(126, 96, 255, 0.4), transparent 62%),
    radial-gradient(ellipse 40% 35% at 90% 20%, rgba(90, 150, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #0c2070 0%, #0a1852 55%, #071238 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px rgba(8, 5, 3, 0.45);
  color: var(--sf-ink);
  animation: shopEpicDetailIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.shop-panel.is-epic-shop .shop-epic-jampage-h1 {
  margin: 1.25rem 0 1.1rem;
  font-size: 2.25rem;
}

.shop-panel.is-epic-shop .shop-epic-jampage-empty {
  margin: 0;
  font-weight: 600;
  color: var(--sf-ink-soft);
}

@media (max-width: 719px) {
  .shop-panel.is-epic-shop .shop-epic-jampage { padding: 1rem 0.9rem 1.5rem; }
  .shop-panel.is-epic-shop .shop-epic-jampage-h1 { font-size: 1.6rem; }
}

/* the track page's copy: "Jam Track" over the song, the artist, the notice, the box */
.shop-panel.is-epic-shop .shop-epic-detail-eyebrow {
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 800;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-artist {
  margin-top: -0.35rem;
  font-family: 'Unbounded', var(--font-brand);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  max-width: 620px;
  padding: 0.95rem 1.1rem;
  box-sizing: border-box;
  border-radius: var(--shop-epic-radius-sm);
  background: rgba(8, 5, 3, 0.45);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-notice .shop-epic-warn {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  color: #ffd400;
}

.shop-panel.is-epic-shop .shop-epic-detail-metabox {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  max-width: 620px;
  padding: 0.95rem 1.1rem;
  box-sizing: border-box;
  border-radius: var(--shop-epic-radius-sm);
  background: rgba(8, 5, 3, 0.45);
}

.shop-panel.is-epic-shop .shop-epic-detail-metarow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--sf-ink);
}

.shop-panel.is-epic-shop .shop-epic-detail-metasep {
  width: 1px;
  height: 1.15rem;
  background: rgba(255, 255, 255, 0.35);
}

.shop-panel.is-epic-shop .shop-epic-detail-metanote {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.shop-panel.is-epic-shop .shop-epic-detail-metabox .shop-epic-detail-until {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.8rem;
}

/* fortnite.com places a tile per viewport width: a 3- or 4-wide tile carries
   its 2-wide placement as the base and the wider placements from 768px and
   1024px (Tailwind's md: and lg:). The tile's inline variables come in four
   layers (plain, -sm, -md, -lg); these resolve the layer for the width. */
.shop-panel.is-epic-shop .shop-epic-tile {
  --shop-epic-r-box-h: var(--shop-epic-box-h);
  --shop-epic-r-frame-w: var(--shop-epic-frame-w);
  --shop-epic-r-frame-ar: var(--shop-epic-frame-ar);
  --shop-epic-r-frame-left: var(--shop-epic-frame-left);
  --shop-epic-r-img-fit: var(--shop-epic-img-fit);
  --shop-epic-r-img-pos: var(--shop-epic-img-pos);
  --shop-epic-r-img-scale: var(--shop-epic-img-scale);
  --shop-epic-r-img-top: var(--shop-epic-img-top);
  --shop-epic-r-img-left: var(--shop-epic-img-left, 50%);
}

@media (min-width: 640px) {
  .shop-panel.is-epic-shop .shop-epic-tile {
    --shop-epic-r-box-h: var(--shop-epic-box-h-sm, var(--shop-epic-box-h));
    --shop-epic-r-frame-w: var(--shop-epic-frame-w-sm, var(--shop-epic-frame-w));
    --shop-epic-r-frame-ar: var(--shop-epic-frame-ar-sm, var(--shop-epic-frame-ar));
    --shop-epic-r-frame-left: var(--shop-epic-frame-left-sm, var(--shop-epic-frame-left));
    --shop-epic-r-img-fit: var(--shop-epic-img-fit-sm, var(--shop-epic-img-fit));
    --shop-epic-r-img-pos: var(--shop-epic-img-pos-sm, var(--shop-epic-img-pos));
    --shop-epic-r-img-scale: var(--shop-epic-img-scale-sm, var(--shop-epic-img-scale));
    --shop-epic-r-img-top: var(--shop-epic-img-top-sm, var(--shop-epic-img-top));
    --shop-epic-r-img-left: var(--shop-epic-img-left-sm, var(--shop-epic-img-left, 50%));
  }
}

@media (min-width: 768px) {
  .shop-panel.is-epic-shop .shop-epic-tile {
    --shop-epic-r-box-h: var(--shop-epic-box-h-md, var(--shop-epic-box-h-sm, var(--shop-epic-box-h)));
    --shop-epic-r-frame-w: var(--shop-epic-frame-w-md, var(--shop-epic-frame-w-sm, var(--shop-epic-frame-w)));
    --shop-epic-r-frame-ar: var(--shop-epic-frame-ar-md, var(--shop-epic-frame-ar-sm, var(--shop-epic-frame-ar)));
    --shop-epic-r-frame-left: var(--shop-epic-frame-left-md, var(--shop-epic-frame-left-sm, var(--shop-epic-frame-left)));
    --shop-epic-r-img-fit: var(--shop-epic-img-fit-md, var(--shop-epic-img-fit-sm, var(--shop-epic-img-fit)));
    --shop-epic-r-img-pos: var(--shop-epic-img-pos-md, var(--shop-epic-img-pos-sm, var(--shop-epic-img-pos)));
    --shop-epic-r-img-scale: var(--shop-epic-img-scale-md, var(--shop-epic-img-scale-sm, var(--shop-epic-img-scale)));
    --shop-epic-r-img-top: var(--shop-epic-img-top-md, var(--shop-epic-img-top-sm, var(--shop-epic-img-top)));
    --shop-epic-r-img-left: var(--shop-epic-img-left-md, var(--shop-epic-img-left-sm, var(--shop-epic-img-left, 50%)));
  }
}

@media (min-width: 1024px) {
  .shop-panel.is-epic-shop .shop-epic-tile {
    --shop-epic-r-box-h: var(--shop-epic-box-h-lg, var(--shop-epic-box-h-md, var(--shop-epic-box-h-sm, var(--shop-epic-box-h))));
    --shop-epic-r-frame-w: var(--shop-epic-frame-w-lg, var(--shop-epic-frame-w-md, var(--shop-epic-frame-w-sm, var(--shop-epic-frame-w))));
    --shop-epic-r-frame-ar: var(--shop-epic-frame-ar-lg, var(--shop-epic-frame-ar-md, var(--shop-epic-frame-ar-sm, var(--shop-epic-frame-ar))));
    --shop-epic-r-frame-left: var(--shop-epic-frame-left-lg, var(--shop-epic-frame-left-md, var(--shop-epic-frame-left-sm, var(--shop-epic-frame-left))));
    --shop-epic-r-img-fit: var(--shop-epic-img-fit-lg, var(--shop-epic-img-fit-md, var(--shop-epic-img-fit-sm, var(--shop-epic-img-fit))));
    --shop-epic-r-img-pos: var(--shop-epic-img-pos-lg, var(--shop-epic-img-pos-md, var(--shop-epic-img-pos-sm, var(--shop-epic-img-pos))));
    --shop-epic-r-img-scale: var(--shop-epic-img-scale-lg, var(--shop-epic-img-scale-md, var(--shop-epic-img-scale-sm, var(--shop-epic-img-scale))));
    --shop-epic-r-img-top: var(--shop-epic-img-top-lg, var(--shop-epic-img-top-md, var(--shop-epic-img-top-sm, var(--shop-epic-img-top))));
    --shop-epic-r-img-left: var(--shop-epic-img-left-lg, var(--shop-epic-img-left-md, var(--shop-epic-img-left-sm, var(--shop-epic-img-left, 50%))));
  }
}

/* ── Press and hold to pick several gifts ────────────────────────────────
   Developers only for now: the tick and the bar are drawn solely when the
   app turns picking on, and everything here sits behind .is-selectable,
   .is-selecting or .is-selected so a shop without picking looks exactly as
   it did. The tiles live in the panel, so their rules are scoped to it like
   every other tile rule; only the bar, which hangs off <body>, is not. */

.shop-panel.is-epic-shop .shop-epic .shop-epic-pick {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-pick-box {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: var(--shop-epic-glass, rgba(20, 15, 11, 0.86));
  color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* a tile's card starts 15% down the button; the tick rides the card */
.shop-panel.is-epic-shop .shop-epic .shop-epic-tile .shop-epic-pick {
  top: calc(15% + 0.55rem);
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-pick-box .icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* picking mode: every tile offers an empty circle, the picked ones fill it */
.shop-panel.is-epic-shop .shop-epic.is-selecting .shop-epic-pick {
  opacity: 1;
  transform: scale(1);
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-tile.is-selected .shop-epic-pick,
.shop-panel.is-epic-shop .shop-epic .shop-epic-jamrow.is-selected .shop-epic-pick {
  opacity: 1;
  transform: scale(1);
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-tile.is-selected .shop-epic-pick-box,
.shop-panel.is-epic-shop .shop-epic .shop-epic-jamrow.is-selected .shop-epic-pick-box {
  border-color: var(--sf-brass-lit, #ffdca4);
  background: var(--sf-brass, #cfa059);
  color: #1a1209;
}

/* the ring, drawn on top of the tile's own art and gradient. A tile's card
   is .shop-epic-tile-bg: the bottom 85% of the button, rounded; the ring
   follows that box, not the taller button the art overflows. */
.shop-panel.is-epic-shop .shop-epic .shop-epic-tile.is-selected::after,
.shop-panel.is-epic-shop .shop-epic .shop-epic-jamrow.is-selected::after {
  content: '';
  position: absolute;
  z-index: 5;
  border: 2px solid var(--sf-brass, #cfa059);
  box-shadow: 0 0 0 3px rgba(207, 160, 89, 0.22), inset 0 0 26px rgba(207, 160, 89, 0.18);
  pointer-events: none;
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-tile.is-selected::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 85%;
  border-radius: var(--shop-epic-radius-lg, 20px);
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-jamrow.is-selected::after {
  inset: 0;
  border-radius: inherit;
}

/* A hold is a gesture, not a text selection or an image drag. This has to
   hold from the first paint, not from the first pick: the very first hold
   is the one that would otherwise raise iOS's copy and save-image callout.
   Everything inside a tile takes it from the tile, and never takes the
   touch itself (every child of a tile is pointer-events: none). */
.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile,
.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-jamrow {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-img,
.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-jamrow-img {
  -webkit-user-drag: none;
}

/* The press, the pick and the unpick all ease. A transition is timed by the
   style being changed to, so one declared only on the pressed state sank the
   tile smoothly and then snapped it back up. A jam row keeps its own outline
   and background fades alongside. */
.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile {
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-jamrow {
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1), outline-color var(--shop-epic-motion) var(--shop-epic-ease), outline-offset var(--shop-epic-motion) var(--shop-epic-ease), background var(--shop-epic-motion) var(--shop-epic-ease);
}

.shop-panel.is-epic-shop .shop-epic .shop-epic-tile.is-selected {
  transform: scale(0.975);
}

/* The hold takes 420ms. Until the tile moved, that was 420ms of nothing, which
   reads as a dead tap, so it sinks once the finger has rested a moment and
   springs back however the hold ends. transform only: no layout, no repaint. */
.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile.is-pressing,
.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-jamrow.is-pressing {
  transform: scale(0.955);
}

.shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile.is-pressing.is-selected {
  transform: scale(0.94);
}

/* every scale above, the picked-and-pressed one included, stands down */
@media (prefers-reduced-motion: reduce) {
  .shop-panel.is-epic-shop .shop-epic .shop-epic-pick {
    transition: none;
  }

  .shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile {
    transition: none;
  }

  .shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile.is-pressing,
  .shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-tile.is-pressing.is-selected,
  .shop-panel.is-epic-shop .shop-epic.is-selectable .shop-epic-jamrow.is-pressing {
    transform: none;
    transition: none;
  }

  .shop-panel.is-epic-shop .shop-epic .shop-epic-tile.is-selected {
    transform: none;
  }
}

/* ── The picking bar ─────────────────────────────────────────────────────
   Floats over the shop, above the phone dock, and only while something is
   picked. */

.shop-epic-selectbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--app-tabs-mobile-h, 5.9rem) + 0.6rem);
  z-index: 480;
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 1.6rem));
  pointer-events: none;
  animation: shop-epic-selectbar-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-epic-selectbar-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.65rem 0.6rem 0.95rem;
  border: 1px solid var(--sf-edge-strong, rgba(207, 160, 89, 0.34));
  border-radius: 999px;
  background: var(--shop-epic-glass, rgba(20, 15, 11, 0.86));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.shop-epic-selectbar-count {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-right: auto;
  min-width: 0;
  color: #f4e7d2;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.shop-epic-selectbar-n {
  color: var(--sf-brass-lit, #ffdca4);
  font-size: 1rem;
}

.shop-epic-selectbar-of {
  color: rgba(244, 231, 210, 0.72);
  font-size: 0.7rem;
  font-weight: 600;
}

.shop-epic-selectbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(207, 160, 89, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #e9d9be;
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.shop-epic-selectbar-btn:hover {
  border-color: rgba(207, 160, 89, 0.55);
  background: rgba(207, 160, 89, 0.12);
  color: #ffdca4;
}

.shop-epic-selectbar-btn:active {
  transform: translateY(1px);
}

.shop-epic-selectbar-btn.is-primary {
  border-color: transparent;
  background: linear-gradient(180deg, #ffdca4 0%, #cfa059 100%);
  color: #1a1209;
  box-shadow: 0 6px 18px rgba(207, 160, 89, 0.3);
}

.shop-epic-selectbar-btn.is-primary:hover {
  background: linear-gradient(180deg, #ffe9c4 0%, #dcb070 100%);
  color: #1a1209;
}

.shop-epic-selectbar-btn .icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* more picked than the day has slots left for: the slots dropped under them */
.shop-epic-selectbar.is-over .shop-epic-selectbar-n {
  color: #e5794f;
}

/* the day's slots are all picked */
.shop-epic-selectbar.is-full .shop-epic-selectbar-inner {
  animation: shop-epic-selectbar-full 620ms ease;
}

@keyframes shop-epic-selectbar-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0.9rem);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes shop-epic-selectbar-full {
  0% {
    border-color: var(--sf-edge-strong, rgba(207, 160, 89, 0.34));
  }

  25% {
    border-color: #e5794f;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(229, 121, 79, 0.22);
  }

  75% {
    border-color: #e5794f;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(229, 121, 79, 0.22);
  }

  100% {
    border-color: var(--sf-edge-strong, rgba(207, 160, 89, 0.34));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-epic-selectbar,
  .shop-epic-selectbar.is-full .shop-epic-selectbar-inner {
    animation: none;
  }
}

/* on desktop the dock is a side rail, so the bar sits near the bottom edge */
@media (min-width: 1024px) {
  .shop-epic-selectbar {
    bottom: 1.5rem;
  }
}

@media (max-width: 420px) {
  .shop-epic-selectbar-inner {
    padding: 0.5rem 0.5rem 0.5rem 0.8rem;
    gap: 0.4rem;
  }

  .shop-epic-selectbar-btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.66rem;
  }
}

/* ── The picking tip ─────────────────────────────────────────────────────
   Once per device, where the picking bar will stand: the word that picking
   exists at all. On <body> like the bar, for the same reason. */
.shop-epic-picktip {
  position: fixed;
  left: 50%;
  bottom: calc(var(--app-tabs-mobile-h, 5.9rem) + 0.6rem);
  z-index: 480;
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 1.6rem));
  pointer-events: none;
  animation: shop-epic-selectbar-in 260ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both;
}

.shop-epic-picktip-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 0.85rem;
  border: 1px solid var(--sf-edge-strong, rgba(207, 160, 89, 0.34));
  border-radius: 1.1rem;
  background: var(--shop-epic-glass, rgba(20, 15, 11, 0.92));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.shop-epic-picktip-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffdca4 0%, #cfa059 100%);
  color: #1a1209;
}

.shop-epic-picktip-icon .icon {
  width: 1rem;
  height: 1rem;
}

.shop-epic-picktip-text {
  margin: 0;
  min-width: 0;
  color: rgba(244, 231, 210, 0.78);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.shop-epic-picktip-text strong {
  display: block;
  color: #f4e7d2;
  font-size: 0.84rem;
  font-weight: 700;
}

.shop-epic-picktip-close {
  flex: none;
  min-height: 2.25rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdca4 0%, #cfa059 100%);
  color: #1a1209;
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms ease, filter 140ms ease;
}

.shop-epic-picktip-close:hover {
  filter: brightness(1.06);
}

.shop-epic-picktip-close:active {
  transform: translateY(1px);
}

.shop-epic-picktip-close:focus-visible {
  outline: 2px solid #ffdca4;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .shop-epic-picktip {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .shop-epic-picktip {
    bottom: 1.5rem;
  }
}

@media (max-width: 420px) {
  .shop-epic-picktip-inner {
    gap: 0.55rem;
    padding: 0.65rem 0.6rem 0.65rem 0.7rem;
  }

  .shop-epic-picktip-icon {
    display: none;
  }
}