/* --------------------------------------------------
   Bootstrap Overrides
-------------------------------------------------- */

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1920px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1840px
) !default;

@import "_bootstrap";

// ── Holofoil ──────────────────────────────────────────────────────────────
//@import "_holofoil-integration";   // also pulls in _card.scss

/* --------------------------------------------------
   Root Variables
-------------------------------------------------- */
:root {
  --total: 11;
  --radius: 40px;
  --snow: hsl(13, 60%, 97%);
  --lilac: hsl(262, 47%, 63%);
  --purple: hsl(262, 47%, 45%);
  --mauve: hsl(262, 80%, 82%);
  --orchid: hsl(291, 47%, 60%);
  --ice: hsl(160, 24%, 85%);
  --hero-bg: hsl(258, 30%, 10%);
  --edit: hsl(45, 100%, 71%);
  --gold: hsl(45, 94%, 21%);
  --delete: hsl(354, 71%, 63%);
  --dark-red: hsl(354, 61%, 21%);
}

html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------
   Layout
-------------------------------------------------- */
body {
  min-height: 100dvh;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
}

.footer {
  margin-top: auto;
}

/* --------------------------------------------------
   Typography
-------------------------------------------------- */
.copy-small {
  font-size: 0.75rem;
  opacity: 0.87;

  @media (min-width: 768px) { font-size: 0.85rem; }
  @media (min-width: 1400px) { font-size: 1rem; }
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fs-7 { font-size: 0.9rem !important; }
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.hover-white:hover { color: #fff !important; }

$colors: mauve, lilac, "purple", "orchid", "snow";
@each $c in $colors {
  .text-#{$c} { color: var(--#{$c}); }
}

.text-gradient {
  background: linear-gradient(
    90deg,
    var(--mauve),
    var(--lilac),
    var(--purple),
    var(--snow),
    var(--orchid),
    var(--ice)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 12s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* --------------------------------------------------
   Navbar
-------------------------------------------------- */
.navbar {
  background-color: rgb(126, 87, 194) !important;
  border-bottom: #1d1f21 solid 1px;
  z-index: 1030;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath fill='%23FFFAFA' d='M68.1 149.7C68.1 132 82.4 117.7 100.1 117.7C136.4 117.7 172.5 118.9 207.9 120.2C319.4 125.6 429.1 119.8 540.8 119.4C558.5 119.4 572.8 133.7 572.8 151.4C572.8 169.1 558.5 183.4 540.8 183.4C503.3 183.4 465.7 184.2 427.7 185C319 189.4 208.4 183.2 100.1 181.7C82.4 181.7 68.1 167.4 68.1 149.7zM552 348C479.7 341.2 405.9 353.8 333 353.2C254.4 353.3 174.2 342.4 96.9 347.5C79.3 348.7 64 335.3 62.9 317.7C61.8 300.1 75.1 284.8 92.7 283.7C173.8 278.2 253.1 289.1 333 289.2C408 289.4 482.4 276.8 558 284.2C575.6 285.9 588.5 301.5 586.8 319.1C585.1 336.7 569.6 349.6 552 348zM465.5 506.2C414 506.6 162.5 506.4 106.4 506.5C64.7 506.3 64.4 442.7 106.4 442.5C211 442.7 438.9 442.4 540.4 442C558.1 442 572.4 456.3 572.4 474C567.3 525.1 500.2 500.5 465.4 506.2z'/%3e%3c/svg%3e");
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.nav-icon {
  width: 1.85rem;
  height: 1.85rem;

  > svg {
    fill: hsla(210, 11%, 15%, 0.5);
    stroke: hsla(210, 11%, 15%, 0.5);

    &:hover {
      fill: hsla(210, 11%, 15%, 1);
    }
  }
}

.navbar .logo-svg > svg {
  width: 8rem;
  transition: width 0.3s ease;
  animation: logo-shrink linear both;
  animation-timeline: scroll();
  animation-range: 0px 100px;

  @media (max-width: 1024px) { width: 20vw; }
}

@keyframes logo-shrink {
  to {
    width: 5rem;
    @media (max-width: 1024px) { width: 10vw; }
  }
}

/* --------------------------------------------------
   Navigation Tabs & Tier Colors
-------------------------------------------------- */
.nav-link {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.67);
  transition:
    margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
    padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
    padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);

  &:hover,
  &:focus {
    color: rgba(0, 0, 0, 0.87);
  }
}

.navbar-nav > .nav-item > .nav-link:hover {
  color: rgba(255, 255, 255, 1);
}

.nav-tabs {
  .nav-link.active,
  .nav-item.show .nav-link {
    color: rgba(0, 0, 0, 0.94);
  }

  .nav-link:hover,
  .nav-link:focus {
    border-color: transparent;
  }
}

$tiers: (
  nm:     hsla(88, 50%, 67%, 1),
  lp:     hsla(66, 70%, 68%, 1),
  mp:     hsla(54, 100%, 73%, 1),
  hp:     hsla(46, 100%, 65%, 1),
  dmg:    hsla(36, 100%, 65%, 1),
  vendor: hsla(262, 47%, 63%, 1)
);

@each $name, $color in $tiers {
  .nav-link.#{$name} {
    border-bottom: 3px solid $color;

    &:hover,
    &:focus { background-color: rgba($color, 0.67); }

    &.active {
      background-color: $color;
      border-bottom-color: $color;
    }
  }

  .nav-#{$name} div.alert {
    border-left: 3px solid $color;
  }
}

/* --------------------------------------------------
   Search
-------------------------------------------------- */
@media (max-width: 768px) {
  .search-box,
  .search-button {
    min-height: 32px;
  }
}

.search-container {
  @media (max-width: 768px) {
    margin-top: 0.25rem;
    width: 100%;
    animation: search-inline-mobile linear both;
    animation-timeline: scroll();
    animation-range: 0px 100px;
  }
}

@keyframes search-inline-mobile {
  from { width: 100%; }
  to   { margin-top: 0 !important; width: auto; flex: 1; }
}

.navbar .container {
  @media (max-width: 768px) {
    animation: navbar-nowrap linear both;
    animation-timeline: scroll();
    animation-range: 0px 100px;
  }
}

.nav-user-btn {
  animation: hide-user-btn linear both;
  animation-timeline: scroll();
  animation-range: 0px 100px;
}

@keyframes hide-user-btn {
  to {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

.search-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 48px;
  z-index: 1030;
  transform: rotate(180deg);

  @media (min-width: 768px) {
    position: sticky;
    top: 0;
    min-width: 45vw;
    max-width: 45vw;
    transform: rotate(0);
  }
}

.search-input {
  color: rgba(255, 255, 255, .94);
  border: 1px solid rgba(94, 53, 177, 1);
}

::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  font-size: 1rem;
  line-height: 2rem;
}

.form-control:focus {
  border-color: rgb(179, 157, 219);
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgb(179, 157, 219, .67);
}

.facet-list {
  max-height: 185px;
  overflow-y: auto;
}

/* --------------------------------------------------
   Buttons
-------------------------------------------------- */
.btn-purple {
  background-color: var(--lilac);
  border-color: var(--purple);
  color: #fff;
  &:hover { background-color: var(--purple); color: var(--snow); }
}

.btn-purple-secondary {
  background-color: transparent;
  border-color: var(--lilac);
  color: var(--mauve);

  &:hover {
    background-color: hsla(262, 47%, 63%, 0.15);
    border-color: var(--mauve);
    color: var(--mauve);
  }
}

.btn-edit {
  background-color: var(--edit);
  border-color: var(--edit);
  color: #fff;

  > span,
  > svg.nav-icon {
    fill: var(--gold);
    stroke: var(--gold);
    color: var(--gold);
  }

  &:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #fff;

    > span,
    > svg.nav-icon {
      fill: var(--edit);
      stroke: var(--edit);
    }
  }
}

.btn-delete {
  background-color: var(--delete);
  border-color: var(--delete);
  color: #fff;

  &:hover {
    background-color: var(--dark-red);
    border-color: var(--dark-red);
    color: #fff;
  }
}

.btn-outline-success svg.nav-icon {
  fill: var(--bs-success);
  stroke: var(--bs-success);
}

.btn.btn-outline-success:hover,
.btn.btn-outline-success:hover svg.nav-icon {
  fill: var(--bs-success-border-subtle);
  stroke: var(--bs-success-border-subtle);
}

// ── Inventory form condition buttons ──────────────────────────────────────
$cond-text: (
  nm:  hsla(88, 50%, 67%, 1),
  lp:  hsla(66, 70%, 68%, 1),
  mp:  hsla(54, 100%, 73%, 1),
  hp:  hsla(46, 100%, 65%, 1),
  dmg: hsla(36, 100%, 65%, 1),
);

@each $name, $color in $tiers {
  @if map-has-key($cond-text, $name) {
    .btn-cond-#{$name} {
      border-color: rgba($color, 0.4);
      color: var(--bs-body-color);
      background: transparent;
      font-weight: 600;
      transition: background-color 0.1s, border-color 0.1s;

      &:hover { background-color: rgba($color, 0.67); border-color: transparent; }
    }

    .btn-check:checked + .btn-cond-#{$name} {
      background-color: $color;
      border-color: $color;
      color: rgba(0, 0, 0, 0.94);
    }
  }
}

/* --------------------------------------------------
   Forms
-------------------------------------------------- */
.form-check-input {
  &:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success-border-subtle);
  }

  &:focus {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
  }
}

/* --------------------------------------------------
   Pricing
-------------------------------------------------- */
.price-row {
  position: relative;
  z-index: 2;
  margin-top: -1.25rem;
  border-radius: 0.33rem;
  background: linear-gradient(
    90deg,
    map-get($tiers, nm)  21%,
    map-get($tiers, lp)  42%,
    map-get($tiers, mp)  63%,
    map-get($tiers, hp)  74%,
    map-get($tiers, dmg) 85%
  );
}

.edit-bar {
  position: relative;
  z-index: 2;
  padding: 0.5rem;
  margin-top: -1.25rem !important;
  border-radius: 0.33rem;
  background: var(--bs-border-color);
}

.price-label {
  font-size: 0.69rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  background-color: hsl(88, 50%, 67%);
  border-radius: 0.33rem 0 0 0.33rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);

  @media (min-width: 768px)  { font-size: 0.72rem; }
  @media (min-width: 996px)  { font-size: 0.75rem; }
  @media (min-width: 1200px) { font-size: 0.8rem; }
  @media (min-width: 1600px) { font-size: 1rem; }

  &:nth-of-type(2) { background-color: hsl(66, 70%, 68%); }
  &:nth-of-type(3) { background-color: hsl(54, 100%, 73%); }
  &:nth-of-type(4) { background-color: hsl(46, 100%, 65%); }
  &:last-of-type   { background-color: hsl(36, 100%, 65%); border-radius: 0.33rem; }
}

.price-area { max-height: 75px; }

.inventory-button,
.btn-vendor {
  background-color: hsl(262, 47%, 63%);
  color: #fff;

  &:hover {
    background-color: hsl(262, 47%, 55%);
    color: #fff;
  }
}

.inventory-button {
  margin-bottom: -2.25rem;
  margin-right: -0.25rem;
  z-index: 2;
  transition: opacity 350ms ease;
}

/* --------------------------------------------------
   Cards & Modal
-------------------------------------------------- */
.card-image {
  aspect-ratio: 23 / 32;
  object-fit: cover;
  z-index: 1;
  cursor: pointer;
}

.image-grow {
  transition: box-shadow 350ms ease, transform 350ms ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);

  &:hover,
  &:focus {
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-0.9rem) scale(1.02);
  }
}

.col:has(.image-grow:hover) .inventory-button {
  opacity: 0.20;
  transition: opacity 350ms ease;
}

.modal-xl {
  @media (min-width: 768px)  { max-width: 95vw; }
  @media (min-width: 1400px) { max-width: 85vw; }
  @media (min-width: 1921px) { max-width: 75vw; }
}

.cl-modalBackdrop {
  background-color: rgba(1, 11, 18, 0.8);
}

.card-modal {
  background-color: rgba(1, 11, 18, 0.8);
  cursor: default;
}

.pokedex-page {
  position: relative;
  top: 50px;
  z-index: 99;

  @media (min-width: 768px) { top: 100px !important; }
}

.modal-nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1060;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(4px);

  &:hover { background: rgba(255, 255, 255, 0.25); }
  &.d-none { display: none !important; }
}

.modal-nav-prev { left: 12px; }
.modal-nav-next { right: 12px; }

@media (max-width: 768px) {
  .modal-nav-btn { display: none !important; }
}

.card-nav-prev,
.card-nav-next {
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0.375rem 0.5rem;
  will-change: opacity;

  &:hover:not(:disabled) {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  &:active:not(:disabled) { transform: translateY(0); }
  &:disabled { cursor: not-allowed; }

  @media (max-width: 768px) {
    min-width: 40px;
    padding: 0.5rem;
  }
}

/* --------------------------------------------------
   SVG Icons
-------------------------------------------------- */
.small-icon svg  { max-height: 16px; width: 100%; margin-top: -0.25rem; }
.medium-icon svg { max-height: 32px; width: 100%; margin-left: -0.25rem; }

.energy-icon svg,
.rarity-icon-large svg,
.set-icon svg,
.edition-icon svg {
  width: 2rem;
  z-index: 999;
  @media (min-width: 1024px) { width: 2.5rem; }
}

.rarity-icon-large svg,
.set-icon svg {
  margin-bottom: -0.25rem;
}

.filter-icon svg,
.search-button {
  width: 1.5rem;
  fill: rgba(255, 255, 255, 0.87);
  stroke: rgba(255, 255, 255, 0.87);
}

.delete-svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--dark-red);
  stroke: var(--dark-red);
  filter: url(#shadow);
}

.edit-svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--gold);
  stroke: var(--gold);
  filter: url(#shadow);
}

.btn:hover .delete-svg {
  fill: var(--delete);
  stroke: var(--delete);
}

.btn:hover .edit-svg {
  fill: var(--edit);
  stroke: var(--edit);
}

.shadow-filter {
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.top-icon svg {
  width: 2rem;
  height: 2rem;
  fill: var(--bs-light-bg-subtle);
  stroke: var(--bs-light-bg-subtle);
}

#btn-back-to-top:hover .top-icon svg {
  fill: var(--bs-light-border-subtle);
  stroke: var(--bs-light-border-subtle);
}

/* --------------------------------------------------
   Back to Top
-------------------------------------------------- */
#btn-back-to-top {
  position: fixed;
  bottom: 5vh;
  right: 5vw;
  display: none;
  z-index: 2;
}

/* --------------------------------------------------
   Tooltips
-------------------------------------------------- */
.tooltip.volatility-popover {
  .tooltip-inner {
    background: #1d1f21;
    color: #e9ecef;
    padding: 0.9rem 1rem;
    border-radius: 0.6rem;
    text-align: left;
    max-width: 260px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .tooltip-arrow::before {
    border-top-color: #1d1f21 !important;
  }
}

/* --------------------------------------------------
   Decorative / Misc
-------------------------------------------------- */
.dark-callout {
  @media (min-width: 768px) {
    background-color: rgba(44, 48, 59, 1);
  }
}

.masked-image {
  z-index: 1;
  opacity: 1;
  filter: brightness(0);
  animation: pokemon-pulse 2s ease-in-out infinite;
}

.starburst,
.whos-that-pokemon {
  mix-blend-mode: lighten;
  opacity: 0.1;
  object-fit: cover;
}

.whos-that-pokemon { aspect-ratio: 1 / 1; }

%circle-base {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position: absolute;
  margin: 0 auto;
  border: 1px solid hsl(210, 11%, 15%);
  mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
  transition: 0.4s;
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a, 8deg));
}

.redCircle    { @extend %circle-base; background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); }
.yellowCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); }
.greenCircle  { @extend %circle-base; background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); }

.redCircle:hover,
.yellowCircle:hover,
.greenCircle:hover,
.blueCircle:hover {
  --i: -1, 1;
  mask-position: 0 0;
}

/* --------------------------------------------------
   Hero
-------------------------------------------------- */
.hero { background-color: var(--hero-bg); }

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, hsla(262, 70%, 40%, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, hsla(190, 70%, 30%, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-wrapper { isolation: isolate; }

.hero-cards-mockup {
  position: relative;
  height: 340px;
}

.mockup-card {
  position: absolute;
  width: 225px;
  aspect-ratio: 23 / 32;
  overflow: hidden;
  border: 1px solid hsla(262, 50%, 50%, 0.3);
}

.mockup-card--1 { left: 20%; top: 2.5%; transform: rotate(-8deg); }
.mockup-card--2 { left: 40%; top: 7%;   transform: rotate(2deg);  z-index: 1; }
.mockup-card--3 { left: 60%; top: 0;    transform: rotate(10deg); }

.price-chip {
  position: absolute;
  bottom: 2.5%;
  padding: 0.35rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  z-index: 2;
}

.price-chip--nm { left: 30%; background: hsl(88, 50%, 67%); color: rgba(0, 0, 0, .87); }
.price-chip--lp { left: 64%; background: hsl(66, 70%, 68%); color: rgba(0, 0, 0, .87); }

.stats-bar { background-color: hsla(262, 20%, 12%, 0.6); }

/* --------------------------------------------------
   Feature Cards
-------------------------------------------------- */
.feature-card {
  background-color: hsla(262, 20%, 12%, 0.6);
  border: 1px solid hsla(262, 30%, 40%, 0.2);
  transition: border-color 0.2s, transform 0.2s;

  &:hover {
    border-color: hsla(262, 50%, 60%, 0.5);
    transform: translateY(-2px);
  }
}

.feature-icon {
  color: var(--mauve);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------
   Premium Section
-------------------------------------------------- */
.premium-section {
  background-color: hsla(258, 30%, 8%, 0.8);
  overflow-x: clip;
}

.premium-item {
  background-color: hsla(262, 20%, 14%, 0.8);
  border: 1px solid hsla(262, 30%, 35%, 0.2);
  transition: border-color 0.2s;

  &:hover { border-color: hsla(262, 50%, 60%, 0.4); }
}

.badge-coming {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 2rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: hsla(262, 60%, 60%, 0.2);
  color: var(--mauve);
  border: 1px solid hsla(262, 50%, 60%, 0.3);
  margin-top: 0.1rem;
}

.compare-icon { font-size: 2.5rem; line-height: 1; }

.cta-section {
  background: linear-gradient(180deg, transparent, hsla(262, 30%, 10%, 0.8));
}

footer .logo-svg > svg { width: var(--logo-width, 8rem); }

/* --------------------------------------------------
   Energy Wheel
-------------------------------------------------- */
.energy-wheel {
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  margin: 5px 0 10px;
}

.energy-wheel-item {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  --angle: calc(360deg / var(--total) * var(--i));
  transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));

  &:first-of-type { z-index: 100; }
}

/* --------------------------------------------------
   Inventory Grid & List
-------------------------------------------------- */
#gridView { row-gap: 1.5rem; }

.inv-grid-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.inv-grid-media { cursor: pointer; }

.inv-grid-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .85rem .15rem 0;
}

.inv-grid-main {
  min-width: 0;
  flex: 1;
}

.inv-grid-title {
  font-size: 1.9rem;
  line-height: 1.05;
  font-weight: 500;
  margin-bottom: .4rem;
  color: var(--bs-emphasis-color);
}

.inv-grid-meta { display: flex; flex-direction: column; gap: .2rem; }

.inv-grid-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .9rem;
  color: var(--snow);
}

.inv-grid-price {
  min-width: 112px;
  text-align: right;
  flex-shrink: 0;
  color: #f3f3f3 !important;
}

.inv-grid-trend,
.inv-list-price-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  font-weight: 700;
  line-height: 1.1;
}

.inv-grid-value,
.inv-list-price {
  font-size: 1.15rem;
  color: #111;
}

.inv-grid-trend,
.inv-list-price-line {
  &.up .inv-grid-arrow { color: #2e7d32; }
  &.down { color: #c62828; }
}

.inv-grid-delta,
.inv-list-delta {
  text-align: right;
  &.up   { color: #2e7d32; }
  &.down { color: #c62828; }
}

.inv-grid-qty,
.inv-list-qty {
  margin-top: .35rem;
  font-size: .9rem;
  color: #1ea7a1;
}

.inv-grid-cart,
.inv-list-cart {
  position: absolute;
  right: .35rem;
  bottom: .1rem;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 1px solid #4cb7b3;
  background: transparent;
  color: #38a9a5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s ease;

  &:hover { background: rgba(76, 183, 179, .08); color: #2a9a96; }
}

#tableView { background: transparent; }

.inv-list-wrap { border-radius: 0; overflow: visible; }

.inv-list-table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: transparent;
  --bs-table-color: inherit;
  margin: 0;

  tbody,
  tr,
  td { border: 0 !important; background: transparent !important; }
}

.inv-list-row + .inv-list-row .inv-list-cardcell {
  border-top: 1px solid rgba(0, 0, 0, .08) !important;
}

.inv-list-cardcell { padding: 0; }

.inv-list-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 116px;
  padding: .8rem 4.5rem .8rem .35rem;
  background: #f3f3f3;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: .35rem;
}

.inv-list-thumb {
  width: 70px;
  flex: 0 0 70px;
  cursor: pointer;

  img { width: 100%; display: block; border-radius: .25rem; }
}

.inv-list-info { min-width: 0; flex: 1; }

.inv-list-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;

  &:hover { text-decoration: underline; }
}

.inv-list-meta { display: flex; flex-direction: column; gap: .1rem; font-size: .95rem; color: #4b5563; }

.inv-list-setlink { color: #5b6f8f; text-decoration: underline; text-underline-offset: 2px; }

.inv-list-condition {
  margin-top: .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .95rem;
  color: #2b7a78;
}

.inv-list-right { margin-left: auto; min-width: 140px; text-align: right; padding-right: 1rem; }

@media (max-width: 768px) {
  .inv-grid-body    { flex-direction: column; gap: .5rem; }
  .inv-grid-price   { min-width: 0; text-align: left; }
  .inv-grid-trend   { justify-content: flex-start; }
  .inv-list-card    { align-items: flex-start; padding-right: 3.75rem; }
  .inv-list-right   { min-width: 0; padding-right: .25rem; }
}

/* --------------------------------------------------
   Pokémon / Interactive
-------------------------------------------------- */
.pokemon-transition { transition: opacity 0.4s ease; }

.pokemon-clickable {
  cursor: pointer;

  &:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 4px;
    border-radius: 4px;
  }
}

@keyframes pokemon-pulse {
  0%, 100% { filter: brightness(0) drop-shadow(0 0 6px var(--bs-info-border-subtle)); }
  50%       { filter: brightness(0) drop-shadow(0 0 18px var(--bs-info)); }
}

.view-toggle-btn {
  text-decoration: none;
  color: var(--bs-secondary-color) !important;

  &.active,
  &:hover { color: var(--bs-body-color) !important; }

  &.active svg,
  &:hover svg { color: var(--bs-body-color); }
}

#catalogList .list-group-item.active {
  background-color: rgba(186, 104, 200, .5) !important;
  color: var(--snow) !important;
}

/* --------------------------------------------------
   View Transitions
-------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-group(card-image) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(card-image),
::view-transition-new(card-image) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}

::view-transition-group(card-hero) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(card-hero) { display: none; }

::view-transition-new(card-hero) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root),
::view-transition-new(root) { animation: none; }

::view-transition-old(.modal-content) { animation: slide-out 200ms ease-in forwards; }
::view-transition-new(.modal-content) { animation: slide-in 200ms ease-out forwards; }

#cardModal[data-nav-direction="next"]::view-transition-old(.modal-content) { animation: slide-out-left 200ms ease-in forwards; }
#cardModal[data-nav-direction="next"]::view-transition-new(.modal-content) { animation: slide-in-right 200ms ease-out forwards; }
#cardModal[data-nav-direction="prev"]::view-transition-old(.modal-content) { animation: slide-out-right 200ms ease-in forwards; }
#cardModal[data-nav-direction="prev"]::view-transition-new(.modal-content) { animation: slide-in-left 200ms ease-out forwards; }

::view-transition-old(pokemon-reveal) { animation: 300ms ease-in both fade-to-white; }
::view-transition-new(pokemon-reveal) { animation: 500ms ease-out both bloom-in; }

@keyframes fade-to-white {
  to { opacity: 0; filter: brightness(3); }
}

@keyframes bloom-in {
  from { opacity: 0; filter: brightness(2) saturate(0); transform: scale(0.95); }
  to   { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); }
}

/* --------------------------------------------------
Input Fix (Safari)

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1rem;
  width: 1rem;
  display: block;
  background-repeat: no-repeat;
  background-size: 1rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
}
-------------------------------------------------- */
