/* /legend-overframe: v2 board (R-Legend-1440). Layout, type, chips, tiles and FAQ use kit.css
   classes; this file holds only what the kit has no class for: the hero stack, the tile
   hover reveal, the quick-view drawer and the toast. Type is the kit's --display/--body only. */

.lea-body {
  --lea-ground: var(--bg);
  --lea-panel: var(--surface);
  --lea-surface: var(--surface-2);
  --lea-line: var(--line-strong);
  --lea-ivory: var(--text);
  --lea-red: var(--red-fill);
  --lea-red-pressed: var(--red-press);
  --lea-ease: cubic-bezier(.16, 1, .3, 1);
}
html:has(.lea-body) { scroll-behavior: smooth; }
.lea-body [id] { scroll-margin-top: 80px; }
.lea-page button, .lea-drawer button { font: inherit; color: inherit; }

/* ───────── Hero: <lea-hero> (filmstrip), styled by hero.js ───────── */
lea-hero { display: block; margin-top: 24px; }

/* ───────── Shop filters ───────── */
.lea-shop__filters { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.lea-shop__group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lea-shop__group .t-label { margin-right: 8px; }
.lea-shop__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lea-shop__result { margin: 0; }
.chip { cursor: pointer; font-family: var(--body); }
.lea-search { position: relative; flex: 1 1 280px; width: 100%; max-width: 360px; }
.lea-search svg { position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; color: var(--muted); }
.lea-search .input { padding-left: 44px; }
.lea-hint { color: var(--muted); font-size: 13px; }

/* ───────── Tiles (kit .tile) ───────── */
.lea-shop__grid { list-style: none; margin: 0; padding: 0; row-gap: 40px; }
.lea-shop__grid > li { min-width: 0; }
.lea-shop .tile__media { position: relative; width: 100%; border: 0; padding: 0; cursor: pointer; aspect-ratio: 757 / 1052; border-radius: 12px; }
.lea-shop .tile__media img { position: absolute; max-width: none; }
.lea-tile__raw {
  left: .86%; top: .62%; width: 98.28%; height: 98.76%; border-radius: 8px; display: block;
  object-fit: cover; filter: none; transform: none;
  transition: filter .5s var(--lea-ease), transform .5s var(--lea-ease);
}
.lea-tile__frame { inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@media (hover: hover) {
  .lea-tile__media:hover .lea-tile__raw { filter: blur(12px) brightness(.4) saturate(.7); transform: scale(.97); }
}
.lea-tile__media.is-revealed .lea-tile__raw { filter: blur(12px) brightness(.4) saturate(.7); transform: scale(.97); }
.lea-tile__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lea-tile__meta > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lea-tile__meta .tile__name { margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lea-tile__bulk { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.lea-tile__add {
  flex: none; width: 44px; height: 44px; margin-top: 4px; border-radius: 9999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-family: var(--display); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s;
}
.lea-tile__add:not(:disabled):hover { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.lea-tile__add:disabled { cursor: not-allowed; opacity: .4; }
@media (max-width: 900px) { .lea-shop__grid.cols-5 { row-gap: 28px; } }

.lea-shop__empty {
  margin-top: 40px; padding: clamp(56px, 10vh, 96px) 24px; border: 1px dashed var(--lea-line); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.lea-shop__empty-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-transform: uppercase; color: var(--lea-ivory);
}
.lea-shop__empty-hint { font-size: 15px; color: rgba(255, 255, 255, .62); max-width: 40ch; }
.lea-shop__empty-btn {
  margin-top: 8px; height: 44px; padding: 0 28px; border-radius: 9999px; border: 1px solid var(--lea-ivory);
  background: transparent; color: var(--lea-ivory);
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}


/* ───────── FAQ (kit .faq rows on <details>) ───────── */
details.faq__row > summary { list-style: none; cursor: pointer; }
details.faq__row > summary::-webkit-details-marker { display: none; }
.faq__q .v { transition: opacity .2s; }
details[open] > .faq__q .v { opacity: 0; }

/* ───────── Quick-view drawer ───────── */
/* Above the sticky site nav (z 100), below the cart drawer (z 120+). */
.lea-drawer { position: fixed; inset: 0; z-index: 110; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
.lea-drawer.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.lea-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(5, 5, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s var(--lea-ease);
}
.lea-drawer.is-open .lea-drawer__backdrop { opacity: 1; }
.lea-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: min(480px, 100vw); max-height: none;
  background: var(--lea-panel); border-left: 1px solid var(--lea-line); border-top: 1px solid var(--lea-line);
  border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .5s var(--lea-ease);
  display: flex; flex-direction: column;
}
.lea-drawer.is-open .lea-drawer__panel { transform: none; }
@media (max-width: 719.98px) {
  .lea-drawer__panel {
    top: auto; left: 0; width: 100%; max-height: 92svh; border-radius: 20px 20px 0 0; border-left: 0;
    transform: translateY(100%);
  }
}
.lea-drawer__top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 14px 24px; background: rgba(15, 15, 24, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lea-drawer__set {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.lea-drawer__close {
  width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--lea-line); background: transparent;
  color: var(--lea-ivory); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lea-drawer__body { padding: 8px 24px 28px; display: flex; flex-direction: column; gap: 24px; }
.lea-drawer__holo { position: relative; width: min(100%, 340px); margin: 12px auto 30px; aspect-ratio: 757 / 1052; }
.lea-drawer__holo img { max-width: none; }

.lea-toggle {
  align-self: center; display: flex; padding: 4px; border-radius: 9999px; border: 1px solid var(--lea-line); background: var(--lea-surface);
}
.lea-toggle button {
  height: 40px; padding: 0 18px; border-radius: 9999px; border: 0; background: transparent; color: var(--lea-ivory);
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.lea-toggle button[aria-pressed="true"] { background: var(--lea-ivory); color: var(--lea-ground); }

.lea-drawer__info { display: flex; flex-direction: column; gap: 10px; }
.lea-drawer__champion {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--lea-ivory);
}
.lea-drawer__title { font-size: 15px; color: rgba(255, 255, 255, .66); }
.lea-drawer__domains { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.lea-badge {
  height: 32px; padding: 0 12px 0 4px; border-radius: 9999px; border: 1px solid var(--lea-line); display: flex; align-items: center;
  gap: 8px; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--lea-ivory);
}
.lea-badge span { width: 24px; height: 24px; display: block; flex: none; background: center / contain no-repeat; }

.lea-box { border-top: 1px solid var(--lea-line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.lea-box__label {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.lea-box__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--lea-ivory); }
.lea-box__list li { display: flex; gap: 10px; align-items: center; }
.lea-box__list li span { width: 6px; height: 6px; border-radius: 9999px; background: var(--lea-ivory); flex: none; }
.lea-box__list li.is-muted { color: rgba(255, 255, 255, .62); }
.lea-box__list li.is-muted span { background: transparent; border: 1px solid rgba(255, 255, 255, .62); }
.lea-box__fits {
  margin-top: 4px; padding: 12px 14px; border-radius: 10px; background: rgba(230, 57, 70, .1);
  border: 1px solid rgba(230, 57, 70, .35); font-size: 14px; color: var(--lea-ivory);
}
.lea-box__fits strong { font-weight: 700; }

.lea-drawer__buy {
  position: sticky; bottom: 0; margin-top: auto; padding: 16px 24px 24px;
  background: linear-gradient(180deg, rgba(15, 15, 24, 0), var(--lea-panel) 30%);
  display: flex; align-items: center; gap: 16px;
}
.lea-drawer__pricewrap { display: flex; flex-direction: column; gap: 2px; }
.lea-drawer__bulk { font-family: var(--display); font-size: 12px; font-weight: 500; color: rgba(237, 230, 214, .62); white-space: nowrap; }
.lea-drawer__bulk[hidden] { display: none; }
.lea-drawer__price { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--lea-ivory); white-space: nowrap; }
.lea-drawer__add {
  flex: 1; height: 54px; border-radius: 6px; border: 0; background: var(--lea-red); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 0 32px rgba(230, 57, 70, .4);
}
.lea-drawer__add:not(:disabled):hover { background: var(--lea-red-pressed); }
.lea-drawer__add:disabled { cursor: not-allowed; background: var(--lea-surface); color: rgba(237, 230, 214, .6); box-shadow: none; border: 1px solid var(--lea-line); }

/* ───────── Toast ───────── */
.lea-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 115; transform: translateX(-50%) translateY(16px); opacity: 0;
  transition: opacity .3s, transform .4s var(--lea-ease); pointer-events: none; padding: 14px 22px; border-radius: 9999px;
  background: var(--lea-ivory); color: var(--lea-ground); font-family: var(--display); font-size: 13px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.lea-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html:has(.lea-body) { scroll-behavior: auto; }
  .lea-body * { transition-duration: .01s !important; }
}

.lea-shop__more { display: flex; justify-content: center; padding-top: 56px; }
.lea-shop__count { text-align: center; padding-top: 16px; }
.lea-shop__more[hidden], .lea-shop__count[hidden] { display: none; }