:root {
  --bg: #0F1012;
  --sidebar: #131419;
  --surface: #1A1C22;
  --surface-2: #21232B;
  --border: #2A2C34;
  --border-soft: #212329;
  --text: #EFEFF2;
  --text-muted: #8C8F99;
  --accent-gold: #E3B341;
  --accent-gold-soft: #F3D488;
  --accent-teal: #5FD4C4;
  --accent-magenta: #C87DFF;
  --danger: #E8607A;
  --success: #4ADE80;
  --foil: linear-gradient(135deg, #E3B341 0%, #C87DFF 55%, #5FD4C4 100%);
  --r-common: #7A7D86;
  --r-uncommon: #4ADE80;
  --r-rare: #5B9DF9;
  --r-holo: #C87DFF;
  --r-ultra: #E3B341;
  --shadow-card: 0 14px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 20px 44px -12px rgba(0, 0, 0, 0.65);
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-color: var(--border) var(--bg);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 24px 24px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3d47;
}

h1,
h2,
h3 {
  font-family: 'Barlow Condensed', sans-serif;
  margin: 0;
  letter-spacing: 0.5px;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: 'Inter', sans-serif;
}

/* ---------- Shell ---------- */
.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.shop-brand {
  align-items: center;
  gap: 12px;
}

.shop-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(227, 179, 65, .28));
}

.shop-brand-text {
  min-width: 0;
}

.shop-brand-text h1 {
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

body.owner-mode .owner-only {
  display: flex !important;
}

body.owner-mode a.owner-only {
  display: flex !important;
}

body.owner-mode .card-actions.owner-only {
  display: flex !important;
}

.owner-toggle {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.owner-toggle:hover {
  color: var(--text);
  border-color: var(--accent-gold);
}

body.owner-mode .owner-toggle {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.owner-status {
  font-size: 9px;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 5px;
  display: none;
}

body.owner-mode .owner-status {
  display: block;
}

.shop-region {
  margin-top: 5px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent-gold);
}

.brand-mark {
  font-size: 23px;
  color: var(--accent-gold);
  filter: drop-shadow(0 0 8px rgba(227, 179, 65, 0.55));
}

.brand h1 {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.brand h1 span {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 4px 0 0 4px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

nav.mainnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

nav.mainnav a {
  position: relative;
  padding: 10px 12px 10px 16px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.15s ease, background 0.15s ease;
}

nav.mainnav a .ic {
  width: 16px;
  text-align: center;
  opacity: 0.85;
}

nav.mainnav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

nav.mainnav a.active {
  color: var(--text);
  background: var(--surface);
}

nav.mainnav a.active .ic {
  color: var(--accent-gold);
}

nav.mainnav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--foil);
}

.sidebar-footer {
  margin-top: auto;
  font-size: 11px;
  color: var(--text-muted);
  padding: 12px 4px 0;
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.sidebar-footer b {
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 30px 36px 60px;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.eyebrow {
  font-size: 10.5px;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  margin-bottom: 4px;
}

.page-head h2 {
  font-size: 30px;
}

.page-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

#view {
  animation: none;
}

#view.view-enter {
  animation: viewIn 0.32s ease;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Stat cards ---------- */
.stat-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 150px;
  flex: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.stat-card:nth-child(1) {
  border-top-color: var(--accent-teal);
}

.stat-card:nth-child(2) {
  border-top-color: var(--accent-gold);
}

.stat-card:nth-child(3) {
  border-top-color: var(--accent-magenta);
}

.stat-card:nth-child(4) {
  border-top-color: var(--success);
}

.stat-card .stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 23px;
  font-weight: 700;
}

.stat-card .stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 5px;
}

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 22px;
}

.toolbar input[type="text"],
.toolbar select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 13.5px;
}

.toolbar input[type="text"] {
  flex: 1;
  min-width: 180px;
}

.toolbar select {
  cursor: pointer;
}

.toolbar input:focus,
.toolbar select:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: 1px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-soft));
  color: #1a1608;
  border: none;
  font-weight: 700;
  padding: 10px 17px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(227, 179, 65, 0.45);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.btn-danger-text {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 12.5px;
  padding: 6px 0;
}

/* ---------- Grid / cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px 13px 17px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  gap: 12px;
}

.card:hover {
  transform: translateY(-3px);
  border-color: #3a3d47;
  box-shadow: var(--shadow-card);
}

.card {
  cursor: pointer;
}

.card button,
.card a {
  cursor: pointer;
}

.thumb-wrap {
  width: 112px;
  flex-shrink: 0;
}

@media(max-width:600px) {

  .thumb,
  .thumb-placeholder {
    width: 88px;
    height: 122px;
  }

  .thumb-wrap {
    width: 88px;
  }
}

.card-details-modal {
  max-width: 820px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.detail-title {
  min-width: 0;
}

.detail-title h2 {
  font-size: 28px;
  margin-bottom: 4px;
}

#giveawayDetailsTitle {
  text-transform: none;
}

#giveawayTitle,
#giveawayCardName {
  text-transform: capitalize;
}

.detail-meta {
  color: var(--text-muted);
  font-size: 12.5px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 18px;
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-content: start;
}

.detail-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: zoom-in;
}

.detail-image:first-child {
  grid-column: 1/-1;
  aspect-ratio: 4/3;
}

.detail-empty-image {
  min-height: 180px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.detail-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
}

.detail-label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}

.detail-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.detail-section h3 {
  font-size: 14px;
  margin-bottom: 9px;
}

.grade-entry {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.grade-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.grade-entry:first-child {
  padding-top: 0;
}

.grade-main {
  font-weight: 700;
  color: var(--accent-gold);
}

.grade-cert {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-align: right;
}

.detail-notes {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

@media(max-width:700px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

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

  .detail-image:first-child {
    grid-column: 1/-1;
  }
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--stripe, var(--r-common));
}

.card.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), rgba(192, 132, 252, 0.08) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card.shimmer:hover::after {
  opacity: 1;
}

.thumb {
  width: 112px;
  height: 154px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.thumb-placeholder {
  width: 112px;
  height: 154px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--stripe, var(--r-common));
}

.card-body {
  flex: 1;
  min-width: 0;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  color: var(--text-muted);
  font-size: 11.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--stripe, var(--r-common));
  border: 1px solid currentColor;
}

.badge.foil {
  background: var(--foil);
  color: #171310;
  border: none;
  font-weight: 700;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
}

.qty-price {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.qty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--text-muted);
}

.qty b {
  color: var(--text);
}

.price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-gold);
}

.low-stock {
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 6px;
}

.card-actions {
  display: flex;
  gap: 6px;
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.condition-tag {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.notes {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- Image-first inventory cards ---------- */
.grid .card {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

.grid .card>.thumb-wrap,
.grid .card>.thumb-placeholder {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 7;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.grid .card>.thumb-wrap .thumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0;
  display: block;
}

.grid .card>.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

.grid .card .card-body {
  padding: 12px 13px 13px;
}

.grid .card .card-top {
  display: block;
}

.grid .card .card-name {
  font-size: 18px;
  margin-bottom: 2px;
}

.grid .card .badge {
  display: inline-block;
  margin-top: 7px;
}

.grid .card .card-row {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  display: block;
}

.grid .card .qty-price {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.grid .card .qty {
  order: 2;
  font-size: 11.5px;
}

.grid .card .price {
  order: 1;
  font-size: 17px;
}

.grid .card .card-actions {
  margin-top: 9px;
  justify-content: flex-end;
}

.grid .card .low-stock {
  margin-top: 8px;
}

.grid .card .notes {
  margin-top: 7px;
}

.grid .card .grade-summary {
  margin-top: 6px;
}

@media(max-width:600px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .grid .card .card-body {
    padding: 9px 10px 10px;
  }

  .grid .card .card-name {
    font-size: 16px;
  }

  .grid .card .card-meta,
  .grid .card .condition-tag {
    font-size: 10px;
  }

  .grid .card .price {
    font-size: 14px;
  }

  .grid .card .qty {
    font-size: 10px;
  }
}

/* ---------- Compact card information ---------- */
.grid .card .card-body {
  padding: 7px 10px 9px;
}

.grid .card .card-row {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.grid .card .qty-price {
  line-height: 1.1;
}

.grid .card .price {
  font-size: 15px;
  line-height: 1.15;
}

.grid .card .qty {
  font-size: 10px;
  line-height: 1.15;
}

.grid .card .card-top {
  margin-top: 4px !important;
}

.grid .card .card-name {
  font-size: 16px;
  line-height: 1.05;
  margin: 0;
}

.grid .card .card-meta {
  font-size: 9.5px;
  line-height: 1.15;
  margin-top: 2px;
}

.grid .card .condition-tag {
  font-size: 9px;
  line-height: 1.1;
  margin-top: 2px;
}

.grid .card .badge {
  font-size: 8px;
  padding: 2px 6px;
  margin-top: 4px;
}

.grid .card .grade-summary {
  font-size: 9px;
  margin-top: 3px;
  line-height: 1.15;
}

.grid .card .notes {
  font-size: 9px;
  margin-top: 3px;
  line-height: 1.2;
  -webkit-line-clamp: 1;
}

.grid .card .low-stock {
  font-size: 8px;
  margin-top: 4px;
}

.grid .card .card-actions {
  margin-top: 4px;
}

@media(max-width:600px) {
  .grid .card .card-body {
    padding: 6px 8px 8px;
  }

  .grid .card .price {
    font-size: 13px;
  }

  .grid .card .card-name {
    font-size: 14px;
  }

  .grid .card .card-meta {
    font-size: 8.5px;
  }

  .grid .card .condition-tag {
    font-size: 8px;
  }
}

/* ---------- Tighter price/name + slightly smaller thumbnails ---------- */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 16px;
}

.grid .card>.thumb-wrap,
.grid .card>.thumb-placeholder {
  aspect-ratio: 5 / 6.5;
}

.grid .card>.thumb-wrap .thumb {
  aspect-ratio: 5 / 6.5;
}

.grid .card .card-body {
  padding: 6px 9px 8px;
}

.grid .card .card-row {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.grid .card .qty-price {
  margin: 0;
  padding: 0;
}

.grid .card .price,
.grid .card .qty {
  margin: 0;
  padding: 0;
}

.grid .card .card-top {
  margin-top: 2px !important;
  padding-top: 0;
}

.grid .card .card-name {
  margin: 0;
  padding: 0;
  line-height: 1.05;
}

@media(max-width:600px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .grid .card>.thumb-wrap,
  .grid .card>.thumb-placeholder,
  .grid .card>.thumb-wrap .thumb {
    aspect-ratio: 5 / 6.6;
  }
}

/* ---------- Clean owner controls: no extra card spacing ---------- */
.grid .card {
  position: relative;
}

.grid .card .card-actions.owner-only {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 4;
  margin: 0;
  padding: 4px;
  gap: 4px;
  border-radius: 9px;
  background: rgba(15, 16, 18, .88);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, .10);
}

.grid .card .card-actions.owner-only .icon-btn {
  width: 25px;
  height: 25px;
  background: var(--surface-2);
}

.grid .card .card-row {
  margin: 0;
  padding: 0;
}

.grid .card .card-top {
  margin-top: 3px !important;
}

.grid .card .qty-price {
  min-height: 0;
  line-height: 1;
}

/* ---------- Single-line card metadata ---------- */
.grid .card .card-meta-one-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-muted);
}

.grid .card .card-meta-one-line span {
  flex: 0 0 auto;
}

@media(max-width:600px) {
  .grid .card .card-meta-one-line {
    font-size: 7.5px;
    gap: 2px;
  }
}

.grid .card .grade-summary {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(95, 212, 196, .08);
  border: 1px solid rgba(95, 212, 196, .22);
  color: var(--accent-teal);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
}

/* ---------- Image lightbox ---------- */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.image-lightbox[hidden] {
  display: none !important;
}

.image-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .65);
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(20, 20, 24, .8);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* ---------- Detail image slider ---------- */
.detail-slider {
  position: relative;
  width: 100%;
}

.detail-slider-stage {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-slider-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  display: block;
}

.detail-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(15, 16, 18, .78);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  font-size: 18px;
}

.detail-slider-btn.prev {
  left: 8px;
}

.detail-slider-btn.next {
  right: 8px;
}

.detail-slider-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.detail-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.detail-slider-dot.active {
  background: var(--accent-gold);
}

.detail-slider-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font: 9px 'JetBrains Mono', monospace;
}

.detail-thumb-strip-wrap {
  margin-top: 10px;
}

.detail-thumb-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 10px;
}

.detail-thumb-strip-head strong {
  color: var(--text);
  font-size: 10.5px;
}

.detail-thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  scrollbar-width: thin;
}

.detail-thumb-strip-btn {
  width: 58px;
  height: 74px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  opacity: .62;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}

.detail-thumb-strip-btn:hover {
  opacity: .95;
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

.detail-thumb-strip-btn.active {
  opacity: 1;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 1px var(--accent-gold);
}

.detail-thumb-strip-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---------- About page ---------- */
.information-page-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.information-page-panel {
  margin-inline: auto;
}

.about-panel>h3,
.contact-panel>h3 {
  text-align: center;
}

.about-copy p {
  margin: 0 0 13px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.about-subhead {
  margin-top: 26px !important;
  margin-bottom: 11px !important;
}

.about-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.about-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}

.about-link:hover {
  border-color: var(--accent-gold);
}

.about-link b {
  display: block;
}

.about-link small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 400;
}

.about-link>span:last-child {
  color: var(--accent-gold);
  font-size: 15px;
}

.cod-rules {
  margin: 0;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.cod-rules li {
  padding-left: 5px;
  margin-bottom: 8px;
}

.cod-rules b {
  color: var(--text);
}

@media(max-width:760px) {
  .about-links {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact links ---------- */
.contact-links {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: .15s ease;
}

.contact-link:hover {
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

.contact-arrow {
  color: var(--accent-gold);
  font-size: 15px;
}

/* ---------- Larger card detail view + full gallery lightbox ---------- */
.card-details-modal {
  max-width: 1120px;
  width: min(96vw, 1120px);
  padding: 24px;
}

.detail-layout {
  grid-template-columns: minmax(430px, 1.35fr) minmax(300px, .8fr);
  gap: 24px;
  align-items: start;
}

.detail-slider-stage {
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  background: #111216;
}

.detail-slider-stage img {
  object-fit: contain;
  padding: 6px;
}

.detail-slider-btn {
  width: 42px;
  height: 42px;
  font-size: 25px;
  background: rgba(10, 10, 12, .82);
}

.detail-slider-btn.prev {
  left: 12px;
}

.detail-slider-btn.next {
  right: 12px;
}

.detail-slider-count {
  right: 12px;
  bottom: 12px;
  font-size: 10px;
  padding: 4px 7px;
}

.detail-slider-dots {
  margin-top: 10px;
}

.image-lightbox {
  flex-direction: column;
  gap: 12px;
  padding: 22px 76px 18px;
}

.image-lightbox-main {
  position: relative;
  width: 100%;
  height: calc(100vh - 150px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox img#imageLightboxImg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.image-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(20, 20, 24, .82);
  color: #fff;
  font-size: 31px;
  cursor: pointer;
  z-index: 102;
}

.image-lightbox-prev {
  left: 18px;
}

.image-lightbox-next {
  right: 18px;
}

.image-lightbox-nav:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.image-lightbox-count {
  position: fixed;
  top: 22px;
  left: 24px;
  color: #fff;
  font: 12px 'JetBrains Mono', monospace;
  z-index: 102;
  background: rgba(20, 20, 24, .68);
  padding: 5px 8px;
  border-radius: 7px;
}

.image-lightbox-thumbs {
  width: min(760px, 90vw);
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 7px;
}

.image-lightbox-thumb {
  width: 58px;
  height: 76px;
  flex: 0 0 auto;
  object-fit: cover;
  padding: 0 !important;
  border-radius: 7px !important;
  border: 1px solid var(--border) !important;
  opacity: .55;
  cursor: pointer;
  box-shadow: none !important;
}

.image-lightbox-thumb.active {
  opacity: 1;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 1px var(--accent-gold) !important;
}

.image-lightbox-hint {
  color: rgba(255, 255, 255, .65);
  font-size: 11px;
  text-align: center;
}

@media(max-width:800px) {
  .card-details-modal {
    width: 96vw;
    max-width: 720px;
    padding: 18px;
  }

  .detail-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-slider-stage {
    aspect-ratio: 4/5;
    max-height: 68vh;
  }

  .image-lightbox {
    padding: 18px 48px 14px;
  }

  .image-lightbox-main {
    height: calc(100vh - 130px);
  }

  .image-lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 25px;
  }

  .image-lightbox-prev {
    left: 6px;
  }

  .image-lightbox-next {
    right: 6px;
  }

  .image-lightbox-thumb {
    width: 48px;
    height: 64px;
  }
}

/* ---------- Giveaways ---------- */
.giveaway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.giveaway-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.giveaway-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}

.giveaway-body {
  padding: 14px;
}

.giveaway-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
}

.giveaway-meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 3px;
}

.giveaway-status {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 1px solid var(--accent-teal);
  color: var(--accent-teal);
}

.giveaway-status.closed {
  border-color: var(--text-muted);
  color: var(--text-muted);
}

.giveaway-section {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border-soft);
}

.giveaway-section h4 {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
}

.giveaway-section p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.giveaway-owner-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  margin-top: 12px;
}


/* ---------- Owner Insights ---------- */
.insights-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.insights-controls select,
.insights-controls input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.insights-range-custom {
  display: none;
  gap: 8px;
  align-items: center;
}

.insights-range-custom.show {
  display: flex;
}

.insights-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.insights-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.insights-stat .k {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 5px;
}

.insights-stat .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
}

.insights-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.insights-panel h3 {
  font-size: 16px;
  margin-bottom: 12px;
}

.insights-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(26px, 1fr);
  align-items: end;
  gap: 6px;
  min-height: 180px;
  overflow-x: auto;
  padding: 10px 0 2px;
}

.insights-bar-wrap {
  min-width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 170px;
}

.insights-bar {
  width: 100%;
  min-height: 2px;
  background: var(--accent-gold);
  border-radius: 5px 5px 2px 2px;
}

.insights-bar-label {
  color: var(--text-muted);
  font-size: 8px;
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: center;
  margin-top: 7px;
}

.insights-table-wrap {
  overflow-x: auto;
}

.insights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.insights-table th,
.insights-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
}

.insights-table th {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.insights-rank {
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.insights-card-name {
  font-weight: 700;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trend-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.trend-tag.hot {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.trend-tag.low {
  border-color: var(--danger);
  color: var(--danger);
}

@media(max-width:900px) {
  .insights-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:560px) {
  .insights-stats {
    grid-template-columns: 1fr;
  }

  .insights-controls {
    align-items: stretch;
  }

  .insights-controls>* {
    width: 100%;
  }

  .insights-range-custom.show {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}


/* ---------- Simple buyer filters ---------- */
.quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.quick-filter {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.quick-filter:hover {
  color: var(--text);
  border-color: var(--accent-gold);
}

.quick-filter.active {
  color: #17130a;
  background: var(--accent-gold);
  border-color: var(--accent-gold);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.filter-row input,
.filter-row select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.filter-row input {
  flex: 1;
  min-width: 190px;
}

/* ---------- By-game groups ---------- */
.game-group {
  margin-bottom: 32px;
}

.game-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.game-group-head h3 {
  font-size: 20px;
}

.game-group-head .count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.game-group-head hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--border);
}

/* ---------- Dashboard bars ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}

.panel h3 {
  font-size: 17px;
  margin-bottom: 15px;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 12.5px;
}

.bar-row .lbl {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  background: var(--surface-2);
  border-radius: 6px;
  height: 9px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--accent-teal);
  border-radius: 6px;
  transition: width 0.4s ease;
}

.bar-val {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width:900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.recent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.recent-row:last-child {
  border-bottom: none;
}

.recent-row .rn {
  font-weight: 600;
}

.recent-row .rm {
  color: var(--text-muted);
  font-size: 11.5px;
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-state svg {
  margin-bottom: 14px;
  opacity: 0.9;
}

.empty-state h2 {
  font-size: 24px;
  color: var(--text);
  margin-bottom: 6px;
}

.empty-state p {
  margin: 0 0 18px;
  font-size: 13.5px;
  max-width: 320px;
}


/* ---------- Editable dropdown / combobox ---------- */
.combo {
  position: relative;
  display: flex;
  align-items: stretch;
}

.combo input {
  padding-right: 38px !important;
}

.combo-toggle {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 34px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.combo-toggle:hover {
  color: var(--text);
  background: var(--surface);
}

.combo-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: var(--shadow-pop);
  padding: 5px;
}

.combo-menu[hidden] {
  display: none !important;
}

.combo-option {
  width: 100%;
  display: block;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.combo-option:hover,
.combo-option:focus {
  background: var(--surface);
  outline: none;
}

/* ---------- Form / Add page & Modal ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
  max-width: 640px;
}

#addForm.form-card,
#editForm.form-card {
  margin-left: auto;
  margin-right: auto;
}

.field {
  margin-bottom: 13px;
}

.field label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

label[for="giveawayTitle"],
label[for="giveawayCardName"] {
  text-transform: none !important;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
}

.field textarea {
  resize: vertical;
  min-height: 50px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: 1px;
}

.field-row {
  display: flex;
  gap: 10px;
}

.field-row .field {
  flex: 1;
}

.hint {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.image-field {
  display: block;
  margin-bottom: 18px;
}

.image-gallery-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.image-preview-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 82px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-box .image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .72);
  color: #fff;
  cursor: pointer;
  line-height: 18px;
  padding: 0;
  font-size: 12px;
}

.image-preview-box .image-number {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font: 10px 'JetBrains Mono', monospace;
}

.image-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-controls input[type="file"] {
  font-size: 12px;
  color: var(--text-muted);
}

.image-controls input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
}

.image-url-row {
  display: flex;
  gap: 8px;
}

.image-url-row input {
  flex: 1;
}

.image-gallery-note {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.grading-section {
  margin: 18px 0;
  padding: 14px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.grading-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.grading-head h3 {
  font-size: 15px;
}

.grading-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}

.grading-row:last-child {
  margin-bottom: 0;
}

.grading-row select,
.grading-row input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 12px;
}

.grading-row .field {
  margin-bottom: 0;
}

.grading-remove {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--danger);
  border-radius: 8px;
  cursor: pointer;
}

.grade-summary {
  font-size: 10.5px;
  color: var(--accent-teal);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width:600px) {
  .grading-row {
    grid-template-columns: 1fr 1fr auto;
  }

  .grading-row .cert-field {
    grid-column: 1 / -1;
  }
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions button[type="button"] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
}

.modal-actions button[type="button"]:hover {
  color: var(--text);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-overlay[hidden] {
  display: none !important;
}

.modal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
  animation: viewIn 0.22s ease;
}

.modal h2 {
  font-size: 22px;
  margin-bottom: 16px;
}

/* ---------- Stacked card details: gallery first, info below ---------- */
.modal.card-details-modal {
  width: min(94vw, 900px);
  max-width: min(94vw, 900px);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal.card-details-modal .detail-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100%;
}

.modal.card-details-modal .detail-layout>* {
  min-width: 0;
  width: 100%;
}

.modal.card-details-modal .detail-slider {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.modal.card-details-modal .detail-slider-stage {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
}

.modal.card-details-modal .detail-info {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.modal.card-details-modal .detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media(max-width:760px) {
  .modal.card-details-modal {
    width: 100%;
    max-width: 100%;
    padding: 14px;
  }

  .modal.card-details-modal .detail-slider-stage {
    max-height: 62vh;
  }

  .modal.card-details-modal .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:460px) {
  .modal.card-details-modal .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Responsive card details modal ---------- */
.modal.card-details-modal {
  width: min(94vw, 1080px);
  max-width: min(94vw, 1080px);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px;
}

.modal.card-details-modal .detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: 20px;
  width: 100%;
  min-width: 0;
  align-items: start;
}

.modal.card-details-modal .detail-layout>* {
  min-width: 0;
}

.modal.card-details-modal .detail-slider-stage {
  width: 100%;
  max-height: 68vh;
  aspect-ratio: 4 / 5;
}

.modal.card-details-modal .detail-info {
  min-width: 0;
}


@media(max-width:980px) {
  .modal.card-details-modal {
    width: min(96vw, 820px);
    max-width: min(96vw, 820px);
    padding: 18px;
  }

  .modal.card-details-modal .detail-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 14px;
  }

  .modal.card-details-modal .detail-slider-stage {
    max-height: 60vh;
  }
}

@media(max-width:760px) {
  .modal-overlay {
    padding: 10px;
    align-items: flex-start;
  }

  .modal.card-details-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 20px);
    margin-top: 0;
    padding: 14px;
    border-radius: 12px;
  }

  .modal.card-details-modal .detail-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .modal.card-details-modal .detail-slider-stage {
    max-height: 58vh;
    aspect-ratio: 4 / 5;
  }

}

@media(max-width:460px) {
  .modal.card-details-modal .detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .modal.card-details-modal .detail-item {
    padding: 8px;
  }
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 13px;
  z-index: 60;
  box-shadow: var(--shadow-pop);
}

/* ---------- Mobile ---------- */
.hamburger {
  display: none;
}


@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.modal.card-details-modal .detail-info {
  gap: 8px;
}

.modal.card-details-modal .detail-section {
  margin-top: 2px;
}


/* ---------- Theme toggle (default: dark) ---------- */
body.light-mode {
  --bg: #f4f5f7;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eceff3;
  --border: #d8dce3;
  --border-soft: #e8ebef;
  --text: #15171b;
  --text-muted: #626975;
  --text-dim: #8b929c;
  color-scheme: light;
}

body.light-mode::before {
  opacity: .018;
}

body.light-mode .sidebar {
  box-shadow: 1px 0 0 rgba(0, 0, 0, .04);
}

body.light-mode .modal-overlay,
body.light-mode .lightbox {
  background: rgba(30, 34, 40, .64);
}

.theme-toggle {
  width: 100%;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent-gold);
}


/* ---------- Dual currency prices ---------- */
.dual-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.dual-price .price-myr {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
}

.detail-price-values {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-price-values span {
  color: var(--accent-gold);
  font-size: 16px;
  font-weight: 700;
}

.owner-view-count {
  margin-top: 4px;
  color: var(--accent-gold);
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

/* ---------- Consistent owner-only detail fields ---------- */
body.owner-mode .detail-item.owner-only {
  display: block !important;
}

body.owner-mode .detail-item.owner-only .detail-label {
  display: block;
  margin-bottom: 3px;
}

body.owner-mode .detail-item.owner-only .detail-value {
  display: block;
  line-height: 1.25;
}


/* ---------- Unified dropdown styling ---------- */
.field select,
.filter-row select,
.toolbar select,
.insights-controls select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-height: 38px;
  padding: 9px 38px 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%),
    linear-gradient(to left, var(--surface-2), var(--surface-2));
  background-position: calc(100% - 16px) 50%,
    calc(100% - 11px) 50%,
    100% 0;
  background-size: 5px 5px,
    5px 5px,
    34px 100%;
  background-repeat: no-repeat;
  transition: border-color .15s ease, background-color .15s ease;
}

.field select:hover,
.filter-row select:hover,
.toolbar select:hover,
.insights-controls select:hover {
  border-color: var(--text-muted);
}

.field select:focus,
.filter-row select:focus,
.toolbar select:focus,
.insights-controls select:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: 1px;
  border-color: var(--accent-teal);
}

.field select option,
.filter-row select option,
.toolbar select option,
.insights-controls select option {
  background: var(--surface-2);
  color: var(--text);
}

/* Keep the custom Game combobox and native selects aligned visually */
.combo,
.field select {
  min-height: 38px;
}

.combo input {
  min-height: 38px;
  border-radius: 8px;
}

.combo-toggle {
  width: 34px;
  border-radius: 0 8px 8px 0;
}


/* ---------- Draggable image ordering ---------- */
.image-preview-box[data-image-index] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease;
}

.image-preview-box[data-image-index]:active {
  cursor: grabbing;
}

.image-preview-box.dragging {
  opacity: .45;
  transform: scale(.96);
  border-color: var(--accent-gold);
}

.image-preview-box.drag-over {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 2px rgba(95, 212, 196, .16);
}

.image-drag-handle {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}


/* ---------- Overview filters: horizontal layout ---------- */
.filter-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.filter-row>input,
.filter-row>select {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 150px;
}

.filter-row>input#search {
  flex: 1 1 220px !important;
  min-width: 200px;
}

.filter-row>select {
  min-width: 145px;
}

.filter-row>.btn-primary {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width:700px) {
  .filter-row {
    flex-wrap: wrap !important;
  }

  .filter-row>input#search {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .filter-row>select {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 130px;
  }
}


/* ---------- Overview filter dropdown readability fix ---------- */
.filter-row>select {
  min-width: 175px !important;
  padding-left: 11px !important;
  padding-right: 42px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#filterGame {
  min-width: 185px !important;
}

#filterGrade {
  min-width: 175px !important;
}

#filterSeries {
  min-width: 190px !important;
}

#sortBy {
  min-width: 205px !important;
}

/* Keep the dropdown arrow area separate from the selected text */
.filter-row select {
  background-position: calc(100% - 17px) 50%,
    calc(100% - 12px) 50%,
    100% 0 !important;
  background-size: 5px 5px,
    5px 5px,
    34px 100% !important;
}

@media (max-width:700px) {
  .filter-row>select {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 calc(50% - 8px) !important;
  }

  #filterGame,
  #filterGrade,
  #filterSeries,
  #sortBy {
    min-width: 0 !important;
  }
}


/* ---------- Custom overview dropdowns ----------
     Replaces browser-native select popups so the opened menu visually belongs
     to the control instead of appearing as a floating OS block over the page. */
.filter-row>.overview-select {
  position: relative;
  flex: 0 0 auto;
  min-width: 175px;
}

#filterGameWrap {
  min-width: 185px;
}

#filterGradeWrap {
  min-width: 175px;
}

#filterSeriesWrap {
  min-width: 190px;
}

#sortByWrap {
  min-width: 205px;
}

.overview-select-btn {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.overview-select-btn:hover {
  border-color: var(--text-muted);
}

.overview-select-btn:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: 1px;
  border-color: var(--accent-teal);
}

.overview-select-btn i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
}

.overview-select-menu {
  position: absolute;
  z-index: 500;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
}

.overview-select-menu[hidden] {
  display: none !important;
}

.overview-select-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.overview-select-option:hover,
.overview-select-option:focus {
  background: var(--surface);
  color: var(--text);
  outline: none;
}

@media (max-width:700px) {
  .filter-row>.overview-select {
    flex: 1 1 calc(50% - 8px);
    min-width: 0 !important;
  }

  .overview-select-menu {
    width: 100%;
    max-width: none;
  }
}


/* ---------- PSA population display ---------- */
.pop-summary {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: 5px;
  color: var(--accent-gold);
  font-weight: 700;
}

.pop-owner-status {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.pop-owner-status strong {
  color: var(--text);
}

.pop-syncing {
  color: var(--accent-teal);
}


/* ---------- Cleaner inventory overview ---------- */
.clean-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}

.clean-card-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.clean-card-name {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .15px;
  margin: 0;
}

.clean-card-subrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}

.clean-grade-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent-teal);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clean-series {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clean-price-block {
  padding-top: 9px;
  border-top: 1px solid var(--border-soft);
}

.clean-price-primary {
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.clean-price-secondary {
  margin-top: 4px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.clean-price-secondary span {
  margin: 0 3px;
  color: var(--border);
}

.clean-notes {
  margin-top: 0 !important;
  font-size: 10px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clean-owner-views {
  margin-top: -2px;
  color: var(--text-muted);
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  justify-content: flex-end;
}

/* Hide older overview-only metadata/price elements if any remain from legacy CSS */
.grid .card .card-row,
.grid .card .card-top,
.grid .card .grade-summary,
.grid .card .owner-view-count {
  display: none !important;
}


/* ---------- Home ---------- */
.home-hero {
  background: linear-gradient(180deg, rgba(227, 179, 65, .06), rgba(255, 255, 255, .01));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 18px;
}

.home-hero h2 {
  font-size: 34px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.home-hero p {
  max-width: 720px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.home-section {
  margin-top: 20px;
}

.home-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 10px;
}

.home-section-head h3 {
  font-size: 18px;
}

.home-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-feature {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.home-feature:hover {
  transform: translateY(-1px);
  border-color: var(--accent-gold);
  background: var(--surface-2);
}

.home-feature .kicker {
  color: var(--accent-gold);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.home-feature .title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
}

.home-feature .desc {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.home-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.home-shipping {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-shipping-item {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 14px;
}

.home-shipping-item strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.home-shipping-item span {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

@media(max-width:850px) {
  .home-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-shipping {
    grid-template-columns: 1fr;
  }
}

@media(max-width:520px) {
  .home-hero {
    padding: 20px;
  }

  .home-hero h2 {
    font-size: 28px;
  }

  .home-feature-grid {
    grid-template-columns: 1fr;
  }
}


/* Home featured collection titles: readable in both light and dark mode */
.home-feature .title {
  color: var(--text) !important;
}

.home-feature {
  color: var(--text);
}


/* ---------- Home: Recently Added readability ---------- */
#homeRecentGrid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

#homeRecentGrid .card {
  min-width: 0;
}

#homeRecentGrid .card-body {
  padding: 14px 14px 13px;
  gap: 9px;
}

#homeRecentGrid .clean-card-name {
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 36px;
}

#homeRecentGrid .clean-grade-badge {
  font-size: 10.5px;
  padding: 5px 9px;
}

#homeRecentGrid .clean-series {
  font-size: 11.5px;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 30px;
}

#homeRecentGrid .clean-price-block {
  margin-top: 2px;
  padding-top: 11px;
}

#homeRecentGrid .clean-price-primary {
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

#homeRecentGrid .clean-price-secondary {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

#homeRecentGrid .clean-owner-views {
  font-size: 10px;
  margin-top: 2px;
}

/* Give recent cards more horizontal room on normal desktop screens. */
@media(min-width:1100px) {
  #homeRecentGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(min-width:1450px) {
  #homeRecentGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media(max-width:650px) {
  #homeRecentGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #homeRecentGrid .clean-card-name {
    font-size: 12.5px;
  }
}

@media(max-width:430px) {
  #homeRecentGrid {
    grid-template-columns: 1fr;
  }
}


/* True circular logo asset: no CSS cropping required */
.shop-logo {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
  clip-path: none !important;
}


/* ---------- Video Showcase ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.showcase-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.showcase-card:hover {
  transform: translateY(-2px);
  border-color: #3a3d47;
  box-shadow: var(--shadow-card);
}

.showcase-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #08090b;
  overflow: hidden;
  cursor: pointer;
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  background: radial-gradient(circle at center, rgba(227, 179, 65, .09), transparent 55%),
    var(--bg);
}

.showcase-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 10, 12, .76);
  backdrop-filter: blur(5px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  padding-left: 3px;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.showcase-featured {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-gold);
  color: #17130a;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45px;
}

.showcase-body {
  padding: 14px;
}

.showcase-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text);
}

.showcase-series {
  margin-top: 5px;
  color: var(--accent-teal);
  font-size: 10.5px;
  font-weight: 600;
}

.showcase-description {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showcase-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.showcase-watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-gold);
  font-size: 11px;
  font-weight: 700;
}

.showcase-owner-actions {
  gap: 6px;
}

.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 4, 6, .86);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-overlay[hidden] {
  display: none !important;
}

.video-modal {
  width: min(94vw, 980px);
  max-height: 92vh;
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
}

.video-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.video-modal-head strong {
  color: var(--text);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-close {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
}

.video-close:hover {
  color: var(--text);
}

.video-player-wrap {
  background: #000;
  width: 100%;
  aspect-ratio: 16/9;
}

.video-player-wrap iframe,
.video-player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

.video-modal-copy {
  padding: 14px 16px 18px;
}

.video-modal-copy p {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.55;
  margin: 7px 0 0;
}

.showcase-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  min-height: 38px;
}

.showcase-form-check input {
  width: 16px;
  height: 16px;
}

@media(max-width:600px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .video-overlay {
    padding: 8px;
  }
}


/* Facebook showcase links: reliable external playback */
.showcase-watch {
  white-space: nowrap;
}

.showcase-media-placeholder {
  text-align: center;
  padding: 18px;
  box-sizing: border-box;
}


.showcase-thumb-preview {
  width: 180px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}

.showcase-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Showcase is primarily Reels / Shorts: display portrait previews without cropping */
.showcase-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px)) !important;
  align-items: start;
}

.showcase-card {
  width: 100%;
}

.showcase-media {
  aspect-ratio: 9/16 !important;
  background: #08090b !important;
}

.showcase-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #08090b;
}

.showcase-media-placeholder {
  aspect-ratio: 9/16;
}

.showcase-thumb-preview {
  width: 150px !important;
  aspect-ratio: 9/16 !important;
}

.showcase-thumb-preview img {
  object-fit: contain !important;
  background: #08090b;
}

@media(max-width:600px) {
  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}


/* Showcase category filtering */
.showcase-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
}

.showcase-category-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.showcase-category-btn:hover {
  color: var(--text);
  border-color: #3a3d47;
}

.showcase-category-btn.active {
  color: var(--accent-gold);
  border-color: rgba(227, 179, 65, .45);
  background: rgba(227, 179, 65, .08);
}

.showcase-category-label {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
}


/* ==========================================================
     Mobile responsiveness
     Keep listings readable on narrow phones regardless of DPR,
     browser chrome, or device width.
     ========================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width:800px) {
  .shell {
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    width: 100%;
    max-width: 100vw;
    padding: 9px 10px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .shop-brand {
    flex: 0 0 auto;
    gap: 8px;
  }

  .shop-logo {
    width: 54px !important;
    height: 54px !important;
  }

  .shop-brand-text h1 {
    font-size: 17px;
  }

  .shop-region {
    font-size: 13px;
    margin-top: 3px;
  }

  nav.mainnav {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  nav.mainnav a {
    flex: 0 0 auto;
    padding: 9px 10px;
    font-size: 12px;
    gap: 6px;
  }

  .main {
    width: 100%;
    min-width: 0;
    padding: 18px 12px 46px;
  }

  .home-section-head {
    align-items: center;
  }

  /* One readable listing per row on phones. */
  #homeRecentGrid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
  }

  /* Horizontal mobile listing: image on left, information on right. */
  #homeRecentGrid .card,
  .grid .card {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
  }

  #homeRecentGrid .card>.thumb-wrap,
  #homeRecentGrid .card>.thumb-placeholder,
  .grid .card>.thumb-wrap,
  .grid .card>.thumb-placeholder {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 210px;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: var(--surface-2);
  }

  #homeRecentGrid .card>.thumb-wrap .thumb,
  .grid .card>.thumb-wrap .thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: 210px;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #homeRecentGrid .card .clean-card-body,
  .grid .card .clean-card-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 15px 14px !important;
    gap: 9px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
  }

  #homeRecentGrid .clean-card-name,
  .grid .clean-card-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    min-height: 0 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #homeRecentGrid .clean-grade-badge,
  .grid .clean-grade-badge {
    font-size: 10.5px !important;
    padding: 5px 9px !important;
    width: max-content;
    max-width: 100%;
  }

  #homeRecentGrid .clean-series,
  .grid .clean-series {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  #homeRecentGrid .clean-price-block,
  .grid .clean-price-block {
    width: 100%;
    margin-top: 4px !important;
    padding-top: 10px !important;
  }

  #homeRecentGrid .clean-price-primary,
  .grid .clean-price-primary {
    font-size: 17px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #homeRecentGrid .clean-price-secondary,
  .grid .clean-price-secondary {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px 6px;
    margin-top: 5px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #homeRecentGrid .clean-price-secondary span,
  .grid .clean-price-secondary span {
    margin: 0 !important;
  }

  #homeRecentGrid .clean-notes,
  .grid .clean-notes {
    display: none !important;
  }

  #homeRecentGrid .clean-owner-views,
  .grid .clean-owner-views {
    margin-top: auto !important;
  }

  /* Keep owner buttons compact and away from buyer-facing text. */
  .grid .card .card-actions.owner-only,
  #homeRecentGrid .card .card-actions.owner-only {
    top: 7px;
    right: 7px;
  }

  /* Home sections should not force wide layouts. */
  .home-feature-grid {
    grid-template-columns: 1fr !important;
  }

  .home-hero {
    padding: 18px !important;
  }

  .home-hero h2 {
    font-size: 27px !important;
  }
}

/* Very small phones */



/* Logo + shop name are a Home shortcut */
.brand-home-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand-home-link:hover .shop-brand-text h1,
.brand-home-link:focus-visible .shop-brand-text h1 {
  color: var(--accent-gold);
}

.brand-home-link:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 5px;
  border-radius: 10px;
}


/* Keep the original brand layout; logo and name are independently clickable */
.brand-click-target {
  display: block;
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

.logo-click-target {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.logo-click-target .shop-logo {
  display: block;
  width: 72px;
  height: 72px;
}

.text-click-target {
  min-width: 0;
}

.brand-click-target:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
  border-radius: 8px;
}



/* Cleaner Views Over Time date axis */
.insights-chart {
  min-height: 210px !important;
  padding: 12px 0 4px !important;
  gap: 10px !important;
}

.insights-bar-wrap {
  min-width: 54px !important;
  height: 190px !important;
  gap: 8px !important;
}

.insights-bar-label {
  color: var(--text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
  transform-origin: initial !important;
  margin-top: 2px !important;
  min-height: 14px;
  text-align: center;
}

@media(max-width:700px) {
  .insights-chart {
    grid-auto-columns: minmax(48px, 1fr) !important;
    gap: 7px !important;
  }

  .insights-bar-wrap {
    min-width: 48px !important;
  }

  .insights-bar-label {
    font-size: 9.5px !important;
  }
}


.clean-language {
  color: var(--text-dim);
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .45px;
}


/* Overview metadata pills */
.clean-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 1px;
}

.clean-meta-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clean-series-pill {
  color: var(--text-muted);
}

.clean-language-pill {
  color: var(--accent-gold);
}

@media(max-width:800px) {

  #homeRecentGrid .clean-meta-pills,
  .grid .clean-meta-pills {
    gap: 4px;
  }

  #homeRecentGrid .clean-meta-pill,
  .grid .clean-meta-pill {
    font-size: 9px;
    padding: 4px 7px;
  }
}


/* Series + Language pills: same color treatment as Grade */
.clean-series-pill,
.clean-language-pill {
  color: var(--accent-teal) !important;
  border-color: rgba(78, 210, 199, .18) !important;
  background: rgba(78, 210, 199, .045) !important;
}


/* Grade + Series + Language share one row */
.clean-all-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100%;
  min-width: 0;
}

.clean-all-pills .clean-grade-badge,
.clean-all-pills .clean-meta-pill {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
}

.clean-all-pills .clean-series-pill {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-all-pills .clean-language-pill {
  flex: 0 0 auto;
}

@media(max-width:390px) {
  .clean-all-pills {
    gap: 3px !important;
  }

  .clean-all-pills .clean-grade-badge,
  .clean-all-pills .clean-meta-pill {
    font-size: 8.5px !important;
    padding: 4px 6px !important;
  }
}


/* Responsive Grade / Language / Series pills */
.clean-all-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start;
  gap: 5px !important;
  width: 100%;
  min-width: 0;
}

.clean-all-pills .clean-grade-badge,
.clean-all-pills .clean-language-pill {
  flex: 0 0 auto !important;
}

.clean-all-pills .clean-series-pill {
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 100%;
}

/* If Series has to move to the next row, show its full text instead of
     unnecessarily truncating it. */
.clean-all-pills .clean-series-pill {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15;
}

@media(max-width:390px) {
  .clean-all-pills {
    gap: 4px !important;
  }
}


/* ---------- Mobile navigation: Home / Inventory / Showcase / More ---------- */
.mobile-more-toggle,
.mobile-more-menu {
  display: none;
}


#filterLanguageWrap {
  min-width: 160px;
}

.filter-pill-btn {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.filter-pill-btn:hover {
  border-color: var(--accent-teal) !important;
  background: rgba(78, 210, 199, .10) !important;
}

.filter-pill-btn:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

@media(max-width:700px) {
  #filterLanguageWrap {
    min-width: 0 !important;
  }
}


/* ===== Responsive mobile header/navigation fix =====
     Prevents the navigation from extending beyond the viewport.
     Mobile uses Home / Inventory / Showcase / More with adaptive sizing. */


/* Narrow phones: put brand on its own row, nav below it.
     This guarantees all four navigation choices remain visible. */


/* Very narrow devices: icons sit above labels so text never spills sideways. */



/* Multi-click pill filters */
.pill-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -2px 0 13px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(95, 212, 196, .025);
}

.pill-filter-summary[hidden] {
  display: none !important;
}

.pill-filter-summary-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  margin-right: 2px;
}

.active-pill-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(95, 212, 196, .34);
  border-radius: 999px;
  background: rgba(95, 212, 196, .08);
  color: var(--accent-teal);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.active-pill-filter span {
  font-size: 12px;
  line-height: 1;
  opacity: .7;
}

.clear-pill-filters {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 9.5px;
  cursor: pointer;
  padding: 5px 7px;
}

.clear-pill-filters:hover {
  color: var(--text);
}

.filter-pill-btn.pill-selected {
  border-color: var(--accent-teal) !important;
  background: rgba(95, 212, 196, .16) !important;
  box-shadow: 0 0 0 1px rgba(95, 212, 196, .08);
}


/* ===== Mobile scroll boundary fix =====
     Use a viewport-bounded scroll container on phones so Safari/Chrome cannot
     create a very large blank document area after the final section. */
@media(max-width:800px) {
  html {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior-y: none;
  }

  body {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior-y: none;
  }

  .shell {
    height: 100vh !important;
    /* fallback */
    height: 100dvh !important;
    /* modern mobile browser viewport */
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .main {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 32px !important;
  }

  #view {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Never let the final Home section manufacture extra page height. */
  .home-shipping,
  .home-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Older iOS versions without dynamic viewport units. */
@supports not (height:100dvh) {}


/* ===== Mobile safe bottom breathing room =====
     Keeps the final content above Safari/Chrome's bottom browser controls
     while preserving the bounded mobile scroll behavior. */



/* Raw condition pills share the same interactive treatment as slab grades. */
.clean-grade-badge.filter-pill-btn {
  cursor: pointer;
}


.clean-era-pill {
  color: var(--accent-teal) !important;
  border-color: rgba(78, 210, 199, .18) !important;
  background: rgba(78, 210, 199, .045) !important;
}


#filterEraWrap {
  min-width: 140px;
}

.clean-era-pill.filter-pill-btn {
  cursor: pointer;
}

@media(max-width:700px) {
  #filterEraWrap {
    min-width: 0 !important;
  }
}

/* ===== Integrated card-detail close button ===== */
.modal-card {
  position: relative !important;
}

.modal-close {
  position: sticky !important;
  top: 10px !important;
  z-index: 30 !important;
  margin: 10px 10px -48px auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: rgba(15, 17, 21, .88) !important;
  color: var(--text) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .16s ease, transform .16s ease, border-color .16s ease !important;
}

.modal-close::before {
  content: "×";
  display: block;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px);
}

.modal-close:hover {
  background: rgba(35, 38, 45, .96) !important;
  border-color: rgba(255, 255, 255, .20) !important;
  transform: scale(1.04);
}

.modal-close:active {
  transform: scale(.96);
}

@media(max-width:800px) {
  .modal-close {
    top: 8px !important;
    margin: 8px 8px -46px auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .modal-close::before {
    font-size: 23px;
  }
}


/* ===== Desktop sticky navigation =====
     Keep the left navigation visible while the user scrolls the page. */



/* ===== Consistent active-tab highlighting =====
     Inventory and Showcase now use the exact same active treatment as Home. */
nav.mainnav>a[data-route] {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .72;
}

nav.mainnav>a[data-route].active,
nav.mainnav>a[data-route][aria-current="page"] {
  opacity: 1 !important;
  background: var(--surface-2, rgba(255, 255, 255, .045)) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

nav.mainnav>a[data-route].active::before,
nav.mainnav>a[data-route][aria-current="page"]::before {
  opacity: 1 !important;
}

/* Prevent route-specific icon backgrounds from making Inventory or
     Showcase appear darker/lighter than the other active tabs. */
nav.mainnav>a[data-route] .ic {
  background: transparent !important;
  box-shadow: none !important;
}

nav.mainnav>a[data-route].active .ic,
nav.mainnav>a[data-route][aria-current="page"] .ic {
  background: transparent !important;
  box-shadow: none !important;
}

nav.mainnav>a[data-route]:active {
  background: var(--surface-2, rgba(255, 255, 255, .045)) !important;
}


/* ===== Consistent Inventory + Showcase FILTER highlights =====
     Selected filter = solid gold, dark text.
     Unselected filter = neutral surface/border. */

.quick-filter,
.showcase-filter,
.showcase-category-filter,
.video-filter {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

.quick-filter.active,
.showcase-filter.active,
.showcase-category-filter.active,
.video-filter.active,
.quick-filter[aria-pressed="true"],
.showcase-filter[aria-pressed="true"],
.showcase-category-filter[aria-pressed="true"],
.video-filter[aria-pressed="true"] {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
  color: #111318 !important;
  box-shadow: none !important;
}


/* FINAL: Inventory and Showcase filter buttons use identical styling */
.quick-filter,
.showcase-category-btn {
  appearance: none !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
}

.quick-filter:hover,
.showcase-category-btn:hover {
  color: var(--text) !important;
  border-color: var(--accent-gold) !important;
  background: var(--surface) !important;
}

.quick-filter.active,
.showcase-category-btn.active,
.quick-filter[aria-pressed="true"],
.showcase-category-btn[aria-pressed="true"] {
  color: #17130a !important;
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
  box-shadow: none !important;
}

.quick-filter.active:hover,
.quick-filter.active:focus,
.quick-filter.active:active,
.showcase-category-btn.active:hover,
.showcase-category-btn.active:focus,
.showcase-category-btn.active:active {
  color: #17130a !important;
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
}


/* ===== Desktop fixed left navigation =====
     Keep the full sidebar fixed in place while page content scrolls. */



/* ===== Responsive desktop card layout fix =====
   Prevent card information from being squeezed on narrower PC/browser widths. */

/* Let CSS decide how many cards actually fit instead of forcing too many columns. */
.home-recent-grid,
.inventory-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 14px !important;
}

/* A card must have enough width for both image and information. */
.card-tile {
  min-width: 0 !important;
  width: 100% !important;
}

/* Desktop card internals: reserve sensible space for text. */


/* Medium desktop / laptop widths:
   use fewer, wider cards rather than squeezing 4–5 across. */
@media (min-width: 801px) and (max-width: 1500px) {

  .home-recent-grid,
  .inventory-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  }
}

/* Smaller laptop windows: cap at two comfortable columns. */
@media (min-width: 801px) and (max-width: 1150px) {

  .home-recent-grid,
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card-tile {
    grid-template-columns: minmax(125px, 40%) minmax(0, 1fr) !important;
  }
}

/* Very narrow desktop/browser window: one full-width card per row. */
@media (min-width: 801px) and (max-width: 900px) {

  .home-recent-grid,
  .inventory-grid {
    grid-template-columns: 1fr !important;
  }

  .card-tile {
    grid-template-columns: minmax(145px, 36%) minmax(0, 1fr) !important;
  }
}


/* ===== Cleaner card-detail information ===== */
.details-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.details-info-grid .detail-item {
  min-width: 0;
  padding: 13px 15px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
}

.details-info-grid .detail-label {
  margin-bottom: 6px !important;
  color: var(--text-muted) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .85px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.details-info-grid .detail-value {
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

/* Price gets one strong primary value and quieter secondary currencies. */
.detail-price-item {
  background: linear-gradient(180deg, rgba(227, 179, 65, .075), rgba(227, 179, 65, .018)),
    var(--surface) !important;
  border-color: rgba(227, 179, 65, .28) !important;
}

.detail-price-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detail-price-primary {
  color: var(--accent-gold) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.25px;
}

.detail-price-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.detail-price-secondary span {
  white-space: nowrap;
}

/* Make Grading compact and visually consistent. */
.detail-section {
  margin-top: 12px !important;
  padding: 14px 15px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
}

.detail-section h3 {
  margin: 0 0 10px !important;
  font-size: 13px !important;
}

.grade-entry {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.grade-main {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  padding: 5px 9px !important;
  border: 1px solid rgba(78, 210, 199, .20) !important;
  border-radius: 999px !important;
  background: rgba(78, 210, 199, .055) !important;
  color: var(--accent-teal) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}


/* Security/UI guard: owner controls are hidden unless authenticated owner mode is active. */
.owner-only {
  display: none !important;
}

body.owner-mode .owner-only {
  display: revert !important;
}

body.owner-mode button.owner-only {
  display: inline-flex !important;
}

body.owner-mode div.owner-only {
  display: flex !important;
}


/* Detail modal: Edit is never visible to public viewers */
#detailsEditBtn,
#detailsCloneBtn,
#detailsDeleteBtn {
  display: none !important;
}

body.owner-mode #detailsEditBtn,
body.owner-mode #detailsCloneBtn,
body.owner-mode #detailsDeleteBtn {
  display: inline-flex !important;
}


/* ===== Responsive mobile brand + navigation sizing =====
     Scales logo, shop name and tabs by available device width without overflow. */



/* Standard phones: brand on its own row and larger, easy-to-tap tabs below. */


/* Compact phones: stay readable, but shrink just enough to avoid clipping. */


/* Extremely narrow devices: icon over text to preserve all four tabs. */



.giveaway-image-preview {
  width: 180px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.giveaway-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================================
   RESPONSIVE SYSTEM V2
   Canonical final layout layer. Keep this block LAST.
   Breakpoints:
     Desktop        > 1200px
     Laptop         801–1200px
     Phone          <= 800px
     Compact phone  <= 390px
   ========================================================== */

/* Shared safety: prevent grid/flex children from forcing overflow. */
.main,
.content,
.card-tile,
.card-tile>*,
.detail-item,
.showcase-card,
.giveaway-card {
  min-width: 0;
}

/* ---------- DESKTOP / LAPTOP ---------- */
@media (min-width:801px) {

  /* Fixed navigation column; only content scrolls. */
  .shell {
    display: block !important;
    min-height: 100vh !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 250px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 50 !important;
  }

  .main {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
    min-width: 0 !important;
  }

  /* Cards choose their column count from available content width. */
  .home-recent-grid,
  .inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 14px !important;
  }

  .card-tile {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(135px, 42%) minmax(145px, 1fr) !important;
  }

  .card-title {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .clean-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
}

/* Normal laptops: fewer, wider cards instead of squeezed cards. */
@media (min-width:901px) and (max-width:1200px) {

  .home-recent-grid,
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card-tile {
    grid-template-columns: minmax(125px, 40%) minmax(0, 1fr) !important;
  }
}

/* Narrow desktop window: one comfortable card per row. */
@media (min-width:801px) and (max-width:900px) {


  .card-tile {
    grid-template-columns: minmax(145px, 36%) minmax(0, 1fr) !important;
  }
}

/* ---------- PHONE ---------- */
@media (max-width:800px) {

  /* Mobile returns to normal document flow. */
  .shell {
    display: block !important;
    min-height: 100vh !important;
  }

  .sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    z-index: 30 !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Larger, device-friendly branding. */
  .brand.shop-brand {
    gap: 10px !important;
    max-width: none !important;
  }

  .logo-click-target,
  .logo-click-target .shop-logo {
    width: clamp(60px, 16vw, 68px) !important;
    height: clamp(60px, 16vw, 68px) !important;
    flex: 0 0 clamp(60px, 16vw, 68px) !important;
  }

  .shop-brand-text h1 {
    font-size: clamp(17px, 4.6vw, 19px) !important;
    line-height: 1.05 !important;
  }

  .shop-region {
    margin-top: 4px !important;
    font-size: clamp(12.5px, 3.3vw, 14px) !important;
    line-height: 1.1 !important;
  }

  /* Four primary controls always fit the width. */
  nav.mainnav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="showcase"],
  .mobile-more-toggle {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 5px !important;
    font-size: clamp(10.8px, 3vw, 12px) !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  /* Card grids become width-driven instead of device-name driven. */
  .home-recent-grid,
  .inventory-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: 10px !important;
  }

  .card-tile {
    width: 100% !important;
    min-width: 0 !important;
  }

  .clean-meta-row {
    flex-wrap: wrap !important;
  }

  /* Details remain readable without horizontal overflow. */
  .details-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .modal.card-details-modal {
    max-width: min(94vw, 760px) !important;
    max-height: 92dvh !important;
  }

  .modal.card-details-modal #detailsMount {
    overflow-wrap: anywhere !important;
  }
}

/* ---------- COMPACT PHONE ---------- */
@media (max-width:390px) {
  .sidebar {
    padding: 10px !important;
    gap: 10px !important;
  }

  .logo-click-target,
  .logo-click-target .shop-logo {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }

  .shop-brand-text h1 {
    font-size: 16.5px !important;
  }

  .shop-region {
    font-size: 12px !important;
  }

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="showcase"],
  .mobile-more-toggle {
    min-height: 48px !important;
    padding: 7px 3px !important;
    font-size: 10.3px !important;
  }

  .details-info-grid {
    grid-template-columns: 1fr !important;
  }

  .detail-price-primary {
    font-size: 17px !important;
  }
}

/* Very narrow legacy phones: stack icon/text rather than hide a tab. */
@media (max-width:340px) {

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="showcase"],
  .mobile-more-toggle {
    min-height: 52px !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 9.5px !important;
  }
}


#filterAvailabilityWrap {
  min-width: 165px;
}

.clean-availability-pill {
  font-weight: 800 !important;
}

.clean-availability-pill[data-pill-value="Available"] {
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, .30) !important;
  background: rgba(74, 222, 128, .08) !important;
}

.clean-availability-pill[data-pill-value="Reserved"] {
  color: var(--accent-gold) !important;
  border-color: rgba(227, 179, 65, .34) !important;
  background: rgba(227, 179, 65, .09) !important;
}

.clean-availability-pill[data-pill-value="Sold"] {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, .30) !important;
  background: rgba(248, 113, 113, .08) !important;
}

.clean-availability-pill[data-pill-value="Collection (NFS)"] {
  color: #c084fc !important;
  border-color: rgba(192, 132, 252, .30) !important;
  background: rgba(192, 132, 252, .08) !important;
}

@media(max-width:700px) {
  #filterAvailabilityWrap {
    min-width: 0 !important;
  }
}


/* Automatic status corners — responsive visual overlays only. */
.thumb-wrap,
.detail-slider-stage {
  position: relative !important;
  overflow: hidden !important;
}

.status-corner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 48%;
  max-width: 210px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  container-type: inline-size;
  filter:
    drop-shadow(3px 4px 3px rgba(0, 0, 0, .42)) drop-shadow(7px 9px 7px rgba(0, 0, 0, .48)) drop-shadow(11px 13px 12px rgba(0, 0, 0, .26));
}

.status-corner::before {
  position: absolute;
  top: 31%;
  left: 7%;
  width: 58%;
  transform: rotate(-45deg);
  transform-origin: center;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.status-corner-sold {
  background: #f52b22;
}

.status-corner-sold::before {
  content: "SOLD";
  color: #fff;
  top: 30%;
  left: 4%;
  width: 66%;
  font-size: clamp(10px, 22cqw, 33px);
  letter-spacing: clamp(.05px, .38cqw, .7px);
  text-shadow:
    0 4px 5px rgba(0, 0, 0, .48),
    0 1px 2px rgba(0, 0, 0, .36);
}

.status-corner-reserved {
  background: #ffc928;
}

.status-corner-reserved::before {
  content: "RESERVED";
  color: #171717;
  top: 28%;
  left: -1%;
  width: 76%;
  font-size: clamp(8px, 15.8cqw, 25px);
  letter-spacing: clamp(0px, .05cqw, .25px);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
}

/* Full detail image scales with the image size but keeps the label comfortably inside. */
.detail-slider-stage .status-corner {
  width: 46%;
  max-width: 360px;
}



@media(max-width:800px) {
  .status-corner {
    width: 50%;
    max-width: 170px;
  }



  .detail-slider-stage .status-corner {
    width: 48%;
    max-width: 260px;
  }


}

@media(max-width:390px) {
  .status-corner {
    width: 52%;
    max-width: 150px;
  }


}

/* Small-card safeguard: labels scale with the ribbon and stay fully visible. */
@container (max-width: 105px) {
  .status-corner-sold::before {
    top: 31%;
    left: 5%;
    width: 64%;
    font-size: 20cqw;
    letter-spacing: .18cqw;
  }

  .status-corner-reserved::before {
    top: 31%;
    left: 1%;
    width: 71%;
    font-size: 11.7cqw;
    letter-spacing: 0;
  }
}

@container (max-width: 75px) {
  .status-corner-sold::before {
    top: 32%;
    left: 6%;
    width: 62%;
    font-size: 18cqw;
    letter-spacing: .1cqw;
  }

  .status-corner-reserved::before {
    top: 32%;
    left: 2%;
    width: 69%;
    font-size: 10.5cqw;
    letter-spacing: 0;
  }
}


.clean-card-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
}

.clean-card-reference-dot {
  opacity: .55;
}

@media(max-width:800px) {
  .clean-card-reference {
    font-size: 9px;
    gap: 4px;
  }
}


/* Favorites / shortlist */
.public-card-actions {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 7;
  display: flex;
  gap: 5px;
}

.favorite-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(14, 16, 20, .78);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}

.favorite-btn:hover {
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

.favorite-btn.active {
  color: #ff5d73;
  border-color: rgba(255, 93, 115, .40);
  background: rgba(255, 93, 115, .10);
}

#detailsFavoriteBtn.active {
  color: #ff5d73 !important;
  border-color: rgba(255, 93, 115, .38) !important;
  background: rgba(255, 93, 115, .08) !important;
}

.favorites-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.favorites-summary {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 12px;
}

.favorites-summary strong {
  color: var(--text);
}

@media(max-width:700px) {
  .favorite-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .favorites-actions {
    width: 100%;
  }

  .favorites-actions .btn-primary,
  .favorites-actions .btn-ghost {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* Automatically capitalize visible pill labels without changing stored/filter values. */
.filter-pill-btn,
.clean-meta-pill,
.clean-grade-badge,
.active-pill-filter {
  text-transform: capitalize;
}


/* Canonical pill casing */
.filter-pill-btn,
.clean-meta-pill,
.clean-grade-badge,
.active-pill-filter {
  text-transform: capitalize !important;
}

.clean-language-pill,
[data-pill-filter="language"] {
  text-transform: uppercase !important;
}


/* Polished responsive Favorite control */
.public-card-actions {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 12 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none;
}

.public-card-actions .favorite-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  pointer-events: auto;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  outline: none !important;
  background: rgba(12, 14, 18, .78) !important;
  color: #f4f5f7 !important;
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease !important;
}

.public-card-actions .favorite-btn:hover {
  transform: scale(1.07) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  background: rgba(24, 27, 33, .94) !important;
}

.public-card-actions .favorite-btn.active {
  color: #ff667d !important;
  border-color: rgba(255, 102, 125, .58) !important;
  background: rgba(35, 16, 21, .90) !important;
}

.public-card-actions .favorite-btn:focus-visible {
  outline: 2px solid var(--accent-gold) !important;
  outline-offset: 2px !important;
}

@media(max-width:800px) {
  .public-card-actions {
    top: 7px !important;
    left: 7px !important;
  }

  .public-card-actions .favorite-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 19px !important;
  }
}


/* Reserved / Sold are true navigation tabs on every device. */
nav.mainnav>.status-primary-nav {
  display: flex !important;
}

nav.mainnav>a[data-route="reserved"].active .ic {
  color: #ffc928 !important;
}

nav.mainnav>a[data-route="sold"].active .ic {
  color: #f87171 !important;
}

/* Mobile: six primary controls in two rows, no horizontal scrolling. */
@media(max-width:800px) {
  nav.mainnav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="sold"],
  nav.mainnav>a[data-route="showcase"],
  .mobile-more-toggle {
    display: flex !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 7px 4px !important;
    justify-content: center !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    border-radius: 10px !important;
  }
}

@media(max-width:360px) {

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="sold"],
  nav.mainnav>a[data-route="showcase"],
  .mobile-more-toggle {
    min-height: 48px !important;
    padding: 6px 2px !important;
    font-size: 9.5px !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .mobile-more-caret {
    display: none !important;
  }
}


/* Favorite button beside title — keeps card photography unobstructed. */
.clean-card-title-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.clean-card-title-row .clean-card-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.title-favorite-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  margin: -2px 0 0 2px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: color .15s ease, background .15s ease, transform .15s ease !important;
}

.title-favorite-btn:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .05) !important;
  transform: scale(1.06) !important;
}

.title-favorite-btn.active {
  color: #ff667d !important;
  border-color: transparent !important;
  background: rgba(255, 102, 125, .07) !important;
}

.title-favorite-btn:focus-visible {
  outline: 2px solid var(--accent-gold) !important;
  outline-offset: 2px !important;
}

@media(max-width:800px) {
  .title-favorite-btn {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    font-size: 18px !important;
    margin: -1px 0 0 1px !important;
  }
}


/* Live Inventory / Reserved / Sold navigation counts */
.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

nav.mainnav>a.active .nav-count {
  color: var(--text);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .13);
}

@media(max-width:800px) {
  .nav-count {
    min-width: 19px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    font-size: 9px;
  }
}


/* Automatic NEW badge: cards added in the last 7 days */
.new-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #66f0df, #35c9ba);
  color: #081210;
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(53, 201, 186, .14);
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .8px;
  pointer-events: none;
}

.detail-new-card-badge {
  top: 12px;
  left: 12px;
  right: auto;
  padding: 7px 11px;
  font-size: 14px;
}

@media(max-width:800px) {
  .new-card-badge {
    top: 6px;
    left: 6px;
    right: auto;
    padding: 4px 7px;
    font-size: 10px;
  }

  .detail-new-card-badge {
    top: 9px;
    left: 9px;
    right: auto;
    padding: 6px 9px;
    font-size: 12px;
  }
}


/* ===== Mobile navigation cleanup ===== */
@media(max-width:800px) {
  nav.mainnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  /* Keep only the four most useful destinations visible on mobile. */
  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="sold"] {
    display: flex !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  /* Secondary destinations are available through More instead. */
  nav.mainnav>a[data-route="showcase"],
  nav.mainnav>a[data-route="collection"],
  nav.mainnav>a[data-route="favorites"],
  nav.mainnav>a[data-route="giveaway"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"] {
    display: none !important;
  }

  .mobile-more-toggle {
    display: flex !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 11px !important;
    border: 1px solid var(--border) !important;
    background: var(--panel) !important;
    color: var(--text-muted) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .mobile-more-toggle:hover,
  .mobile-more-toggle:focus {
    background: var(--panel-2) !important;
    color: var(--text) !important;
  }

  .mobile-more-toggle.active {
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, .16) !important;
  }

  .mobile-more-caret {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .nav-count {
    margin-left: auto !important;
  }

  /* More dropdown: clean two-column menu instead of exposing everything in main nav. */
  .mobile-more-menu {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--panel) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
  }

  .mobile-more-menu:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .mobile-more-menu a {
    min-height: 40px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }
}

@media(max-width:380px) {

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="sold"] {
    font-size: 12px !important;
    padding: 8px !important;
  }

  .mobile-more-menu:not([hidden]) {
    grid-template-columns: 1fr !important;
  }
}


/* Home: Collection at a Glance */
.home-collection-stats-section {
  margin-top: 2px;
}

.home-collection-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.home-stat-card {
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

a.home-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 179, 65, .30);
  background: var(--surface-2);
}

.home-stat-value {
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-stat-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
  line-height: 1.15;
}

@media(max-width:1180px) {
  .home-collection-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:700px) {
  .home-collection-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-stat-card {
    padding: 13px 12px;
    border-radius: 11px;
  }

  .home-stat-value {
    font-size: 20px;
  }

  .home-stat-label {
    font-size: 9.5px;
  }
}


/* Related cards in card details */
.related-cards-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.related-cards-head {
  margin-bottom: 11px;
}

.related-cards-head h3 {
  margin: 1px 0 0;
  font-size: 18px;
}

.related-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.related-card {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.related-card:hover {
  transform: translateY(-2px);
  border-color: rgba(78, 210, 199, .30);
  background: var(--surface-2);
}

.related-card-image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0d0f12;
}

.related-card-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.related-card-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 10px;
}

.related-card-info {
  padding: 8px 9px 9px;
  min-width: 0;
}

.related-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.related-card-code {
  margin-top: 4px;
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
}

.related-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.related-card-meta span {
  max-width: 100%;
  padding: 3px 5px;
  border: 1px solid rgba(78, 210, 199, .18);
  border-radius: 999px;
  color: var(--accent-teal);
  background: rgba(78, 210, 199, .045);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media(max-width:900px) {}


/* Polished Collection Overview — desktop emphasis */
@media(min-width:1181px) {
  .home-collection-stats-section {
    position: relative;
    padding: 22px 22px 24px !important;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px;
    background:
      radial-gradient(circle at 12% 0%, rgba(227, 179, 65, .075), transparent 32%),
      linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    overflow: hidden;
  }

  .home-collection-stats-section .home-section-head {
    margin-bottom: 16px !important;
  }

  .home-collection-stats-section .home-section-head h3 {
    margin-top: 3px !important;
    font-size: 22px !important;
    letter-spacing: -.25px;
  }

  .home-collection-stats-section .home-section-head p {
    margin-top: 5px !important;
    color: var(--text-muted);
    font-size: 11px;
  }

  .home-collection-stats {
    gap: 12px !important;
  }

  .home-stat-card {
    position: relative;
    min-height: 104px;
    padding: 18px 17px 16px !important;
    justify-content: flex-end;
    gap: 8px !important;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 8px 20px rgba(0, 0, 0, .13);
    overflow: hidden;
  }

  .home-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-gold), rgba(227, 179, 65, .08));
    opacity: .72;
  }

  .home-stat-card::after {
    content: "";
    position: absolute;
    width: 66px;
    height: 66px;
    right: -24px;
    top: -28px;
    border-radius: 50%;
    background: rgba(227, 179, 65, .055);
    pointer-events: none;
  }

  a.home-stat-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(227, 179, 65, .30) !important;
    background:
      linear-gradient(145deg, rgba(227, 179, 65, .075), rgba(255, 255, 255, .022)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      0 13px 26px rgba(0, 0, 0, .20);
  }

  .home-stat-value {
    position: relative;
    z-index: 1;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    text-shadow: 0 2px 12px rgba(227, 179, 65, .10);
  }

  .home-stat-label {
    position: relative;
    z-index: 1;
    font-size: 10px !important;
    letter-spacing: 1.05px !important;
    color: rgba(255, 255, 255, .62) !important;
  }
}

/* Keep tablet cards visibly card-like too. */
@media(min-width:701px) and (max-width:1180px) {
  .home-stat-card {
    min-height: 82px;
    padding: 15px !important;
    border-color: rgba(255, 255, 255, .085) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .12);
  }
}


/* Premium NEW badge */
.new-card-badge {
  min-width: 48px !important;
  min-height: 25px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, #76f7e6 0%, #42d8c7 55%, #25b7a9 100%) !important;
  color: #061210 !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(55, 218, 199, .18),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

@media(min-width:801px) {
  .new-card-badge {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    min-width: 54px !important;
    min-height: 27px !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    border-radius: 9px !important;
  }

  .detail-new-card-badge {
    left: 12px !important;
    right: auto !important;
    min-width: 68px !important;
    min-height: 32px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
}

@media(max-width:800px) {
  .new-card-badge {
    min-width: 40px !important;
    min-height: 21px !important;
    padding: 4px 7px !important;
    font-size: 9.5px !important;
    letter-spacing: .8px !important;
    border-radius: 7px !important;
  }
}

/* Inventory / Reserved / Sold overview */
.listing-overview-panel {
  margin: 0 0 18px;
  padding: 18px 18px 19px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0%, rgba(78, 210, 199, .07), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .024), rgba(255, 255, 255, .008));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.listing-overview-head {
  margin-bottom: 12px;
}

.listing-overview-head h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.listing-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.listing-overview-card {
  position: relative;
  min-width: 0;
  min-height: 76px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  overflow: hidden;
}

.listing-overview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-teal), rgba(78, 210, 199, .05));
  opacity: .65;
}

.listing-overview-new::before {
  background: linear-gradient(90deg, #66f0df, #35c9ba);
  opacity: 1;
}

.listing-overview-value {
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.listing-overview-new .listing-overview-value {
  color: #66f0df;
}

.listing-overview-label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .7px;
  text-transform: uppercase;
}

@media(max-width:1100px) {
  .listing-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:700px) {
  .listing-overview-panel {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 13px;
  }

  .listing-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .listing-overview-card {
    min-height: 66px;
    padding: 11px;
    border-radius: 10px;
  }

  .listing-overview-value {
    font-size: 20px;
  }

  .listing-overview-label {
    font-size: 8.5px;
  }
}


/* Collection Overview — original blue/teal compact aesthetic */
#view .home-collection-stats-section {
  margin: 18px 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#view .home-collection-stats-section .home-section-head {
  margin-bottom: 12px !important;
}

#view .home-collection-stats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

#view .home-collection-stats .home-stat-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 14px 13px !important;
  gap: 6px !important;
  border: 1px solid rgba(78, 210, 199, .24) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(50, 155, 181, .18), rgba(25, 96, 124, .10)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 6px 16px rgba(0, 0, 0, .12) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

#view .home-collection-stats .home-stat-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #63d9ff, #4ed2c7) !important;
  opacity: .9 !important;
}

#view .home-collection-stats .home-stat-card::after {
  content: "" !important;
  position: absolute !important;
  width: 64px !important;
  height: 64px !important;
  top: -34px !important;
  right: -24px !important;
  border-radius: 50% !important;
  background: rgba(83, 205, 232, .08) !important;
  pointer-events: none !important;
}

#view .home-collection-stats a.home-stat-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(99, 217, 255, .42) !important;
  background: linear-gradient(145deg, rgba(62, 178, 202, .24), rgba(28, 108, 137, .13)) !important;
}

#view .home-collection-stats .home-stat-value {
  position: relative !important;
  z-index: 1 !important;
  color: #6fdcff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.5px !important;
}

#view .home-collection-stats .home-stat-label {
  position: relative !important;
  z-index: 1 !important;
  color: rgba(220, 244, 250, .72) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

@media(max-width:1180px) {
  #view .home-collection-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width:700px) {
  #view .home-collection-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #view .home-collection-stats .home-stat-card {
    min-height: 74px !important;
    padding: 12px 11px !important;
    border-radius: 10px !important;
  }

  #view .home-collection-stats .home-stat-value {
    font-size: 20px !important;
  }

  #view .home-collection-stats .home-stat-label {
    font-size: 9px !important;
  }
}


/* FINAL PC Collection Overview treatment */
@media(min-width:701px) {
  #view .home-collection-stats-section {
    display: block !important;
    margin: 18px 0 26px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  #view .home-collection-stats {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #view .home-collection-stats .home-stat-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 15px 14px !important;
    gap: 6px !important;
    border: 1px solid rgba(78, 210, 199, .25) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(50, 155, 181, .18), rgba(25, 96, 124, .10)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 7px 17px rgba(0, 0, 0, .13) !important;
    color: var(--text) !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  #view .home-collection-stats .home-stat-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #63d9ff, #4ed2c7) !important;
    opacity: .92 !important;
  }

  #view .home-collection-stats .home-stat-card::after {
    content: "" !important;
    position: absolute !important;
    width: 68px !important;
    height: 68px !important;
    top: -36px !important;
    right: -25px !important;
    border-radius: 50% !important;
    background: rgba(83, 205, 232, .08) !important;
    pointer-events: none !important;
  }

  #view .home-collection-stats a.home-stat-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(99, 217, 255, .45) !important;
    background: linear-gradient(145deg, rgba(62, 178, 202, .24), rgba(28, 108, 137, .13)) !important;
  }

  #view .home-collection-stats .home-stat-value {
    position: relative !important;
    z-index: 1 !important;
    color: #6fdcff !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.5px !important;
  }

  #view .home-collection-stats .home-stat-label {
    position: relative !important;
    z-index: 1 !important;
    color: rgba(220, 244, 250, .72) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
  }
}

/* Recently Viewed */
.recently-viewed-grid,
.home-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-recent-section {
  margin-top: 24px;
}

.home-section-link {
  color: var(--accent-teal);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.home-section-link:hover {
  text-decoration: underline;
}

.recent-empty-state {
  min-height: 260px;
}

@media(max-width:1100px) {

  .recently-viewed-grid,
  .home-recent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:700px) {

  .recently-viewed-grid,
  .home-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .home-recent-section {
    margin-top: 18px;
  }

  .recent-clear-btn {
    width: auto !important;
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 10px !important;
  }
}


/* Shareable inventory filters */
.inventory-filter-tools {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.inventory-filter-tools .quick-filters {
  flex: 1 1 auto;
  margin-bottom: 0 !important;
}

.copy-filter-link-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent-teal);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.copy-filter-link-btn:hover {
  border-color: rgba(78, 210, 199, .35);
  background: var(--surface-2);
}

@media(max-width:700px) {
  .inventory-filter-tools {
    display: block;
  }

  .copy-filter-link-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 8px;
    font-size: 11px;
  }
}


/* Sold Archive polish */
.sold-archive-date {
  margin-top: 4px;
  color: #ff8d91;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.sold-detail-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(228, 71, 79, .25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(228, 71, 79, .095), rgba(228, 71, 79, .025));
}

.sold-detail-notice-mark {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(255, 112, 118, .35);
  border-radius: 7px;
  background: rgba(228, 71, 79, .12);
  color: #ff8d91;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.sold-detail-notice strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 12px;
}

.sold-detail-notice span {
  display: block;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.sold-alternatives-section {
  border-top-color: rgba(78, 210, 199, .18);
}

.sold-date-field[hidden] {
  display: none !important;
}

.field-optional {
  color: var(--text-muted);
  font-size: .9em;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.sold-date-hint {
  margin-top: 5px;
  font-size: 9.5px;
  line-height: 1.35;
}

@media(max-width:700px) {
  .sold-detail-notice {
    align-items: flex-start;
    gap: 9px;
    padding: 10px 11px;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .sold-detail-notice-mark {
    padding: 5px 6px;
    font-size: 9px;
  }

  .sold-detail-notice strong {
    font-size: 11px;
  }

  .sold-detail-notice span {
    font-size: 9.5px;
  }

  .sold-archive-date {
    font-size: 8.5px;
  }
}


/* Automatic card-image watermark + public downloads */
.image-lightbox-download {
  position: fixed;
  top: 18px;
  right: 70px;
  z-index: 103;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 9px;
  background: rgba(20, 20, 24, .82);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.image-lightbox-download:hover {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.image-controls button:disabled,
.image-controls input:disabled {
  opacity: .55;
  cursor: wait;
}

@media(max-width:700px) {
  .image-lightbox-download {
    top: 16px;
    right: 62px;
    min-height: 34px;
    padding: 6px 9px;
    font-size: 9.5px;
  }
}

@media(max-width:390px) {
  .image-lightbox-download {
    top: 14px;
    right: 56px;
  }
}


/* Owner-only Facebook Post Generator */
.fb-post-layout {
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(460px, 1.22fr);
  gap: 16px;
  align-items: start;
}

.fb-post-builder,
.fb-post-output-panel {
  margin-bottom: 0;
}

.fb-post-output-panel {
  position: sticky;
  top: 20px;
}

.fb-post-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.fb-post-section-title h3 {
  margin: 2px 0 0;
}

.fb-post-copy-actions,
.fb-post-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fb-post-copy-actions button:disabled,
.fb-post-bottom-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.fb-post-selected-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 15px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}

.fb-post-selected-card[hidden] {
  display: none !important;
}

.fb-post-card-image {
  width: 86px;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
}

.fb-post-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fb-post-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 9px;
}

.fb-post-card-copy {
  min-width: 0;
}

.fb-post-card-copy strong {
  display: block;
  color: var(--text);
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.05;
  text-transform: uppercase;
}

.fb-post-card-copy span {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.fb-post-card-copy small {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 6px;
  border: 1px solid rgba(78, 210, 199, .2);
  border-radius: 999px;
  color: var(--accent-teal);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.fb-post-settings {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.fb-post-settings summary {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.fb-post-settings-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--border-soft);
}

.fb-post-output {
  width: 100%;
  min-height: 620px;
  resize: vertical;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.fb-post-output:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: 1px;
}

.fb-post-bottom-actions {
  margin-top: 10px;
}

.fb-post-bottom-actions a[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

@media(max-width:1050px) {
  .fb-post-layout {
    grid-template-columns: 1fr;
  }

  .fb-post-output-panel {
    position: static;
  }

  .fb-post-output {
    min-height: 520px;
  }
}

@media(max-width:700px) {
  .fb-post-page-head p {
    max-width: 290px;
  }

  .fb-post-layout {
    gap: 12px;
  }

  .fb-post-builder,
  .fb-post-output-panel {
    padding: 14px;
  }

  .fb-post-section-title {
    display: block;
    margin-bottom: 12px;
  }

  .fb-post-copy-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
  }

  .fb-post-copy-actions button,
  .fb-post-bottom-actions button,
  .fb-post-bottom-actions a {
    justify-content: center;
    min-height: 38px;
  }

  .fb-post-selected-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
  }

  .fb-post-card-image {
    width: 70px;
  }

  .fb-post-card-copy strong {
    font-size: 15px;
  }

  .fb-post-output {
    min-height: 500px;
    padding: 12px;
    font-size: 11px;
  }

  .fb-post-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:390px) {

  .fb-post-copy-actions,
  .fb-post-bottom-actions {
    grid-template-columns: 1fr;
  }

  .fb-post-output {
    min-height: 460px;
    font-size: 10.5px;
  }
}



@media(max-width:700px) {
  .fb-post-active-list {
    flex-wrap: wrap;
  }

  .fb-post-active-list a {
    margin-left: 0;
    width: 100%;
  }
}


/* Owner Card List Post Generator */
.card-list-generator-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.card-list-generator-stats>div {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.card-list-generator-stats strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
}

.card-list-generator-stats span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .55px;
}

.fb-card-list-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  gap: 16px;
  align-items: start;
}

.fb-card-list-controls {
  position: sticky;
  top: 20px;
}

.fb-card-list-controls h3 {
  margin: 2px 0 15px;
}

.fb-card-list-preview-panel {
  min-width: 0;
}

.fb-card-list-output {
  min-height: 720px;
}

.fb-card-list-image-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 10px;
  padding: 10px 11px;
  border: 1px solid rgba(78, 210, 199, .18);
  border-radius: 10px;
  background: rgba(78, 210, 199, .045);
}

.fb-card-list-image-note strong {
  color: var(--accent-teal);
  font-size: 10px;
}

.fb-card-list-image-note span {
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.4;
}

.fb-card-list-zip-btn {
  width: 100%;
  justify-content: center;
}

.fb-card-list-zip-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media(max-width:1100px) {
  .fb-card-list-layout {
    grid-template-columns: 1fr;
  }

  .fb-card-list-controls {
    position: static;
  }

  .fb-card-list-output {
    min-height: 620px;
  }
}

@media(max-width:700px) {
  .card-list-generator-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-list-generator-stats>div:last-child {
    grid-column: 1 / -1;
  }

  .fb-card-list-layout {
    gap: 12px;
  }

  .fb-card-list-controls,
  .fb-card-list-preview-panel {
    padding: 14px;
  }

  .fb-card-list-preview-panel .fb-post-section-title {
    display: block;
  }

  .fb-card-list-preview-panel .fb-post-section-title button {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
  }

  .fb-card-list-output {
    min-height: 560px;
    font-size: 10.5px;
  }
}


/* ---------- Unified Facebook Tools ---------- */
.fb-tools-page-head {
  margin-bottom: 12px !important;
}

.fb-tools-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.fb-tools-switch {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.fb-tools-switch:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

.fb-tools-switch.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(227, 179, 65, .10), rgba(95, 212, 196, .07));
  border-color: rgba(227, 179, 65, .42);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.fb-tools-switch-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 15px;
}

.fb-tools-switch.active .fb-tools-switch-icon {
  color: var(--accent-gold);
  border-color: rgba(227, 179, 65, .35);
}

.fb-tools-switch>span:last-child {
  min-width: 0;
}

.fb-tools-switch strong {
  display: block;
  color: inherit;
  font-size: 11.5px;
  line-height: 1.2;
}

.fb-tools-switch small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8.8px;
  line-height: 1.35;
}

/* The inner generator headings are replaced by the shared heading above,
     so both workflows feel like one tool instead of two separate pages. */
#view:has(.fb-tools-switcher) .fb-post-layout,
#view:has(.fb-tools-switcher) .fb-card-list-layout,
#view:has(.fb-tools-switcher) .fb-giveaway-layout {
  margin-top: 0;
}

@media(max-width:700px) {
  .fb-tools-switcher {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 12px;
  }

  .fb-tools-switch {
    padding: 10px;
  }

  .fb-tools-switch-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .fb-tools-switch strong {
    font-size: 11px;
  }

  .fb-tools-switch small {
    font-size: 8.4px;
  }
}


/* ---------- Card List bulk selection ---------- */
.fb-card-list-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 12px;
}

.fb-card-list-control-heading h3 {
  margin: 0;
}

.fb-card-list-selection-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(95, 212, 196, .24);
  border-radius: 999px;
  background: rgba(95, 212, 196, .06);
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
}

.fb-card-list-selection-toolbar {
  margin-bottom: 10px;
}

.fb-card-list-search-field {
  margin-bottom: 8px !important;
}

.fb-card-list-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.fb-card-list-filter-row .field {
  margin-bottom: 8px;
}

.fb-card-list-bulk-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}

.fb-card-list-bulk-actions button {
  min-height: 34px;
  justify-content: center;
  padding: 7px 8px;
  font-size: 9px;
}

.fb-card-list-picker {
  max-height: 390px;
  overflow: auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
}

.fb-card-list-picker-row {
  display: grid;
  grid-template-columns: 18px 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.fb-card-list-picker-row+.fb-card-list-picker-row {
  margin-top: 2px;
}

.fb-card-list-picker-row:hover {
  background: var(--surface);
}

.fb-card-list-picker-row.selected {
  border-color: rgba(95, 212, 196, .20);
  background: rgba(95, 212, 196, .045);
}

.fb-card-list-picker-row input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent-teal);
}

.fb-card-list-picker-thumb {
  width: 42px;
  height: 52px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
}

.fb-card-list-picker-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fb-card-list-picker-copy {
  min-width: 0;
}

.fb-card-list-picker-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 9.5px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-card-list-picker-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 7.6px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-card-list-picker-type {
  max-width: 78px;
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--accent-gold);
  font-size: 7.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-card-list-picker-empty {
  padding: 18px 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  text-align: center;
  font-size: 9px;
}

.fb-card-list-picker-empty[hidden] {
  display: none !important;
}

.fb-card-list-settings-divider {
  height: 1px;
  margin: 16px 0;
  background: var(--border);
}

.fb-card-list-preview-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.fb-card-list-preview-summary span {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 8px;
}

.fb-card-list-preview-summary strong {
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
}

@media(max-width:700px) {
  .fb-card-list-filter-row {
    grid-template-columns: 1fr 1fr;
  }

  .fb-card-list-filter-row .field:last-child {
    grid-column: 1 / -1;
  }

  .fb-card-list-picker {
    max-height: 330px;
  }

  .fb-card-list-picker-row {
    grid-template-columns: 18px 38px minmax(0, 1fr);
  }

  .fb-card-list-picker-thumb {
    width: 38px;
    height: 48px;
  }

  .fb-card-list-picker-type {
    grid-column: 3;
    justify-self: start;
    margin-top: -3px;
    max-width: 100%;
  }
}

@media(max-width:390px) {
  .fb-card-list-bulk-actions {
    grid-template-columns: 1fr;
  }

  .fb-card-list-filter-row {
    grid-template-columns: 1fr;
  }

  .fb-card-list-filter-row .field:last-child {
    grid-column: auto;
  }
}


/* ---------- Card List custom ordering ---------- */
.fb-card-list-order-mode {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(227, 179, 65, .26);
  border-radius: 999px;
  background: rgba(227, 179, 65, .07);
  color: var(--accent-gold);
  font-size: 8.5px;
  font-weight: 700;
}

.fb-card-list-order-list {
  max-height: 410px;
  overflow: auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
}

.fb-card-list-order-empty {
  padding: 18px 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  text-align: center;
  font-size: 9px;
}

.fb-card-list-order-empty[hidden] {
  display: none !important;
}

.fb-card-order-row {
  display: grid;
  grid-template-columns: 22px 26px 38px minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  min-height: 52px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: grab;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}

.fb-card-order-row+.fb-card-order-row {
  margin-top: 2px;
}

.fb-card-order-row:hover,
.fb-card-order-row:focus {
  outline: none;
  border-color: var(--border);
  background: var(--surface);
}

.fb-card-order-row.dragging {
  opacity: .45;
}

.fb-card-order-row.drag-over {
  border-color: var(--accent-gold);
  background: rgba(227, 179, 65, .06);
}

.fb-card-order-grip {
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
  letter-spacing: -3px;
  cursor: grab;
  user-select: none;
}

.fb-card-order-number {
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
}

.fb-card-order-thumb {
  width: 38px;
  height: 46px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 8px;
}

.fb-card-order-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fb-card-order-copy {
  min-width: 0;
}

.fb-card-order-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 9.5px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-card-order-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-card-order-type {
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--accent-gold);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}

.fb-card-order-buttons {
  display: flex;
  gap: 3px;
}

.fb-card-order-move {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.fb-card-order-move:hover:not(:disabled) {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.fb-card-order-move:disabled {
  opacity: .28;
  cursor: not-allowed;
}

@media(max-width:700px) {
  .fb-card-list-order-list {
    max-height: 350px;
  }

  .fb-card-order-row {
    grid-template-columns: 20px 22px 34px minmax(0, 1fr) auto;
    gap: 6px;
    cursor: default;
  }

  .fb-card-order-thumb {
    width: 34px;
    height: 42px;
  }

  .fb-card-order-type {
    display: none;
  }

  .fb-card-order-grip {
    font-size: 12px;
  }
}

@media(max-width:390px) {
  .fb-card-order-row {
    grid-template-columns: 20px 20px 30px minmax(0, 1fr);
  }

  .fb-card-order-thumb {
    width: 30px;
    height: 38px;
  }

  .fb-card-order-buttons {
    grid-column: 4;
    justify-self: start;
    margin-top: -2px;
  }
}


/* ---------- Owner inventory data quality ---------- */
.quality-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.quality-summary-card {
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.quality-summary-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}

.quality-summary-card.active {
  border-color: rgba(95, 212, 196, .45);
  background: linear-gradient(135deg, rgba(95, 212, 196, .08), rgba(227, 179, 65, .035));
}

.quality-summary-card strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
}

.quality-summary-card span {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
}

.quality-summary-card small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.35;
}

.quality-panel {
  padding: 14px;
}

.quality-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
}

.quality-search-field {
  flex: 1 1 auto;
  margin-bottom: 0 !important;
}

.quality-clean-toggle {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
}

.quality-clean-toggle input {
  accent-color: var(--accent-teal);
}

.quality-status-line {
  margin-bottom: 9px;
  color: var(--text-muted);
  font-size: 8.5px;
}

.quality-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quality-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.quality-row.has-issues {
  border-color: rgba(232, 96, 122, .16);
}

.quality-row.is-clean {
  border-color: rgba(74, 222, 128, .15);
}

.quality-row-image {
  width: 54px;
  height: 66px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
}

.quality-row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quality-row-main {
  min-width: 0;
}

.quality-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.quality-row-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-row-title span {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}

.quality-row-meta {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-row-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.quality-issue,
.quality-clean-badge {
  padding: 3px 6px;
  border: 1px solid rgba(227, 179, 65, .20);
  border-radius: 999px;
  background: rgba(227, 179, 65, .05);
  color: var(--accent-gold);
  font-size: 7.3px;
  font-weight: 700;
}

.quality-issue.critical {
  border-color: rgba(232, 96, 122, .26);
  background: rgba(232, 96, 122, .06);
  color: var(--danger);
}

.quality-clean-badge {
  border-color: rgba(74, 222, 128, .22);
  background: rgba(74, 222, 128, .06);
  color: var(--success);
}

.quality-row-actions {
  display: flex;
  gap: 5px;
}

.quality-row-actions button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 8px;
}

.quality-empty {
  padding: 34px 12px;
  text-align: center;
  color: var(--text-muted);
}

.quality-empty[hidden] {
  display: none !important;
}

.quality-empty strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}

.quality-empty span {
  display: block;
  margin-top: 5px;
  font-size: 8.5px;
}

@media(max-width:1100px) {
  .quality-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:700px) {
  .quality-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .quality-clean-toggle {
    justify-content: center;
  }

  .quality-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  .quality-row-image {
    width: 46px;
    height: 58px;
  }

  .quality-row-actions {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:390px) {
  .quality-summary-grid {
    grid-template-columns: 1fr;
  }
}

.clone-card-notice {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(95, 212, 196, .24);
  border-radius: 10px;
  background: rgba(95, 212, 196, .055);
}

.clone-card-notice strong {
  color: var(--accent-teal);
  font-size: 9px;
  white-space: nowrap;
}

.clone-card-notice span {
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

@media(max-width:700px) {
  .clone-card-notice {
    flex-direction: column;
    gap: 4px;
  }
}

/* ---------- One-click Facebook preparation ---------- */
.fb-prepare-btn {
  min-width: 150px;
  font-weight: 800;
}

.fb-post-copy-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media(max-width:700px) {
  .fb-post-copy-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .fb-post-copy-actions .fb-prepare-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .fb-post-copy-actions button {
    justify-content: center;
  }
}


/* ---------- Clone options ---------- */
.clone-options-modal {
  max-width: 620px;
}

.clone-options-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.clone-options-head h2 {
  margin: 2px 0 4px;
}

.clone-options-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 9px;
}

.clone-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.clone-option-card {
  min-height: 104px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.clone-option-card:hover {
  border-color: var(--accent-teal);
  background: rgba(95, 212, 196, .045);
}

.clone-option-card.recommended {
  border-color: rgba(227, 179, 65, .34);
  background: rgba(227, 179, 65, .045);
}

.clone-option-card strong {
  display: block;
  font-size: 10px;
}

.clone-option-card span {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.45;
}

.clone-options-note {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.45;
}

/* ---------- Bulk prices ---------- */
.bulk-price-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.bulk-price-summary>div {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.bulk-price-summary strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
}

.bulk-price-summary span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.bulk-price-panel {
  padding: 14px;
}

.bulk-price-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.bulk-price-toolbar .field {
  margin-bottom: 0;
}

.bulk-price-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.bulk-price-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.bulk-price-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7.5px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.bulk-price-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.bulk-price-table tr:last-child td {
  border-bottom: 0;
}

.bulk-price-table tr.changed {
  background: rgba(95, 212, 196, .035);
}

.bulk-price-table tr.changed td:first-child {
  box-shadow: inset 3px 0 0 rgba(95, 212, 196, .55);
}

.bulk-price-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
}

.bulk-price-thumb {
  width: 36px;
  height: 44px;
  flex: 0 0 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
}

.bulk-price-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bulk-price-card strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 9px;
}

.bulk-price-card small {
  display: block;
  margin-top: 3px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 7.5px;
}

.bulk-price-input {
  width: 118px;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
}

.bulk-price-input:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: 1px;
  border-color: var(--accent-teal);
}

.bulk-price-status {
  display: inline-flex;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.bulk-price-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.bulk-price-save-status {
  color: var(--text-muted);
  font-size: 8.5px;
}

.bulk-price-footer-actions {
  display: flex;
  gap: 6px;
}

.bulk-price-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9px;
}

.bulk-price-empty[hidden] {
  display: none !important;
}

@media(max-width:700px) {
  .clone-options-grid {
    grid-template-columns: 1fr;
  }

  .clone-option-card {
    min-height: 0;
  }

  .bulk-price-toolbar {
    grid-template-columns: 1fr;
  }

  .bulk-price-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bulk-price-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-price-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}


/* ---------- Owner quick actions on inventory cards ---------- */
.quick-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 18;
  display: block !important;
}

body:not(.owner-mode) .quick-card-actions {
  display: none !important;
}

.quick-card-menu-toggle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  background: rgba(8, 12, 15, .82) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 1px;
}

.quick-card-menu-toggle:hover,
.quick-card-menu-toggle[aria-expanded="true"] {
  border-color: var(--accent-gold) !important;
  color: var(--accent-gold) !important;
}

.quick-card-menu {
  position: absolute;
  top: 35px;
  right: 0;
  width: 164px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
  z-index: 30;
}

.quick-card-menu[hidden] {
  display: none !important;
}

.quick-card-menu button {
  width: 100%;
  min-height: 32px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 650;
  cursor: pointer;
}

.quick-card-menu button:hover {
  background: var(--surface-2);
  color: var(--accent-teal);
}

.quick-card-menu .quick-card-danger-soft:hover {
  color: var(--accent-gold);
}

.quick-card-menu .quick-card-danger {
  color: var(--danger);
}

.quick-card-menu .quick-card-danger:hover {
  background: rgba(232, 96, 122, .07);
  color: var(--danger);
}

.quick-card-menu-separator {
  height: 1px;
  margin: 4px 3px;
  background: var(--border);
}

/* NEW badge remains independently top-left; owner menu sits top-right. */
body.owner-mode .card .new-card-badge {
  left: 10px !important;
  right: auto !important;
}

@media(max-width:800px) {
  .quick-card-actions {
    top: 6px;
    right: 6px;
  }

  .quick-card-menu-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .quick-card-menu {
    top: 33px;
    width: 158px;
  }

  body.owner-mode .card .new-card-badge {
    left: 6px !important;
    right: auto !important;
  }
}


/* ---------- Bulk status / Supabase health ---------- */
.bulk-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 12px;
  align-items: start;
}

.bulk-status-panel,
.supabase-health-panel {
  padding: 14px;
}

.bulk-status-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 10px;
}

.bulk-status-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.bulk-status-card {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}

.bulk-status-card.selected {
  border-color: rgba(95, 212, 196, .42);
  background: rgba(95, 212, 196, .035);
}

.bulk-status-card input {
  accent-color: var(--accent-teal);
}

.bulk-status-thumb {
  width: 42px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 7px;
}

.bulk-status-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bulk-status-copy {
  min-width: 0;
}

.bulk-status-copy strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
}

.bulk-status-copy small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-status-badge {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.bulk-status-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-status-actions .btn-primary {
  width: 100%;
}

.supabase-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.supabase-health-grid>div {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.supabase-health-grid strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--accent-teal);
}

.supabase-health-grid span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.capacity-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(227, 179, 65, .24);
  border-radius: 8px;
  background: rgba(227, 179, 65, .06);
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.45;
}

.capacity-warning.danger {
  border-color: rgba(232, 96, 122, .35);
  background: rgba(232, 96, 122, .07);
  color: #fca5a5;
}

@media(max-width:800px) {
  .bulk-status-layout {
    grid-template-columns: 1fr
  }

  .supabase-health-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:450px) {
  .supabase-health-grid {
    grid-template-columns: 1fr
  }

  .bulk-status-card {
    grid-template-columns: auto 38px minmax(0, 1fr)
  }

  .bulk-status-badge {
    grid-column: 3
  }
}

/* ---------- Bulk metadata editor ---------- */
.bulk-meta-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.bulk-meta-summary>div {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.bulk-meta-summary strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
}

.bulk-meta-summary span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.bulk-meta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 12px;
  align-items: start;
}

.bulk-meta-picker-panel,
.bulk-meta-editor-panel {
  padding: 14px;
}

.bulk-meta-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(120px, .7fr));
  gap: 8px;
  margin-bottom: 8px;
}

.bulk-meta-filters .field {
  margin-bottom: 0;
}

.bulk-meta-picker {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.bulk-meta-card {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}

.bulk-meta-card.selected {
  border-color: rgba(95, 212, 196, .42);
  background: rgba(95, 212, 196, .035);
}

.bulk-meta-card>input {
  accent-color: var(--accent-teal);
}

.bulk-meta-thumb {
  width: 44px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
}

.bulk-meta-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bulk-meta-copy {
  min-width: 0;
}

.bulk-meta-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 9px;
}

.bulk-meta-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 7.5px;
}

.bulk-meta-status-badge {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.bulk-meta-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9px;
}

.bulk-meta-empty[hidden] {
  display: none !important;
}

.bulk-meta-help {
  margin: 4px 0 12px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

.bulk-meta-fields {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bulk-meta-field-row {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg);
}

.bulk-meta-enable {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}

.bulk-meta-enable input {
  accent-color: var(--accent-teal);
}

.bulk-meta-value input,
.bulk-meta-value select {
  width: 100%;
  min-height: 34px;
}

.bulk-meta-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(227, 179, 65, .18);
  border-radius: 8px;
  background: rgba(227, 179, 65, .045);
  color: var(--text-muted);
  font-size: 7.8px;
  line-height: 1.45;
}

.bulk-meta-preview {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.5;
}

.bulk-meta-preview strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.bulk-meta-preview span {
  display: block;
}

.bulk-meta-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.bulk-meta-actions .btn-primary {
  min-width: 140px;
}

@media(max-width:1050px) {
  .bulk-meta-layout {
    grid-template-columns: 1fr;
  }
}

@media(max-width:760px) {
  .bulk-meta-filters {
    grid-template-columns: 1fr 1fr;
  }

  .bulk-meta-field-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .bulk-meta-card {
    grid-template-columns: auto 40px minmax(0, 1fr);
  }

  .bulk-meta-status-badge {
    grid-column: 3;
  }
}

@media(max-width:430px) {
  .bulk-meta-summary {
    grid-template-columns: 1fr;
  }

  .bulk-meta-filters {
    grid-template-columns: 1fr;
  }
}


/* ---------- Owner recently edited ---------- */
.recent-edit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.recent-edit-summary>div {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.recent-edit-summary strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
}

.recent-edit-summary span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.recent-edit-panel {
  padding: 14px;
}

.recent-edit-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 150px;
  gap: 8px;
  margin-bottom: 10px;
}

.recent-edit-toolbar .field {
  margin-bottom: 0;
}

.recent-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recent-edit-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.recent-edit-thumb {
  width: 52px;
  height: 64px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
}

.recent-edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-edit-main {
  min-width: 0;
}

.recent-edit-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.recent-edit-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}

.recent-edit-new {
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(95, 212, 196, .12);
  color: var(--accent-teal);
  font-size: 7px;
  font-weight: 800;
}

.recent-edit-meta {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 7.8px;
}

.recent-edit-time {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.recent-edit-status {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.recent-edit-actions {
  display: flex;
  gap: 5px;
}

.recent-edit-actions button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 7.8px;
}

.recent-edit-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9px;
}

.recent-edit-empty[hidden] {
  display: none !important;
}

/* ---------- Owner export ---------- */
.export-owner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.export-owner-card {
  padding: 15px;
}

.export-owner-card h3 {
  margin: 3px 0 5px;
}

.export-owner-card>p {
  margin: 0 0 13px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.5;
}

.export-owner-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 5px;
  color: var(--text);
  font-size: 8.5px;
  cursor: pointer;
}

.export-owner-check input {
  accent-color: var(--accent-teal);
}

.export-owner-sensitive {
  margin-bottom: 12px;
  padding: 8px 9px;
  border: 1px solid rgba(227, 179, 65, .17);
  border-radius: 8px;
  background: rgba(227, 179, 65, .04);
  color: var(--text-muted);
  font-size: 7.7px;
  line-height: 1.45;
}

.export-owner-note {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 13px;
}

.export-owner-note strong {
  color: var(--accent-teal);
  font-size: 8.5px;
  white-space: nowrap;
}

.export-owner-note span {
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.45;
}

@media(max-width:900px) {
  .recent-edit-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .recent-edit-toolbar .field:first-child {
    grid-column: 1/-1;
  }

  .recent-edit-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .recent-edit-actions {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .export-owner-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:520px) {
  .recent-edit-summary {
    grid-template-columns: 1fr;
  }

  .recent-edit-toolbar {
    grid-template-columns: 1fr;
  }

  .recent-edit-toolbar .field:first-child {
    grid-column: auto;
  }

  .recent-edit-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .recent-edit-status {
    grid-column: 2;
    justify-self: start;
  }

  .recent-edit-actions {
    grid-template-columns: 1fr 1fr;
  }

  .export-owner-note {
    flex-direction: column;
  }
}


/* ---------- Combined owner inventory tools ---------- */
.inventory-tools-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: -2px 0 13px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.inventory-tools-switcher a {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.inventory-tools-switcher a:hover {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text);
}

.inventory-tools-switcher a.active {
  border-color: rgba(95, 212, 196, .34);
  background: linear-gradient(135deg, rgba(95, 212, 196, .08), rgba(227, 179, 65, .035));
  color: var(--text);
}

.inventory-tools-switcher strong {
  display: block;
  font-size: 9px;
  line-height: 1.2;
}

.inventory-tools-switcher span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 7.3px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width:700px) {

  .inventory-tools-switcher a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
  }

  .inventory-tools-switcher span {
    margin-top: 0;
    text-align: right;
  }
}


/* ---------- Inventory Tools: 4-mode switcher ---------- */
.inventory-tools-switcher {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Image health checker ---------- */
.image-health-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.image-health-summary-card {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.image-health-summary-card.active {
  border-color: rgba(95, 212, 196, .38);
  background: rgba(95, 212, 196, .055);
}

.image-health-summary-card strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
}

.image-health-summary-card span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.image-health-panel {
  padding: 14px;
}

.image-health-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.image-health-toolbar .field {
  margin-bottom: 0;
}

.image-health-note {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(227, 179, 65, .17);
  border-radius: 8px;
  background: rgba(227, 179, 65, .04);
}

.image-health-note strong {
  flex: 0 0 auto;
  color: var(--accent-gold);
  font-size: 8px;
}

.image-health-note span {
  color: var(--text-muted);
  font-size: 7.8px;
  line-height: 1.45;
}

.image-health-progress {
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 8.5px;
}

.image-health-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.image-health-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.image-health-thumb {
  width: 54px;
  height: 66px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
}

.image-health-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-health-main {
  min-width: 0;
}

.image-health-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.image-health-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}

.image-health-title span {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 700;
}

.image-health-meta {
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 7.8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-health-dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
}

.image-health-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.image-health-issue {
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 7.2px;
  font-weight: 700;
}

.image-health-issue.critical {
  border-color: rgba(232, 96, 122, .25);
  background: rgba(232, 96, 122, .06);
  color: var(--danger);
}

.image-health-issue.warning {
  border-color: rgba(227, 179, 65, .22);
  background: rgba(227, 179, 65, .05);
  color: var(--accent-gold);
}

.image-health-issue.info {
  border-color: rgba(95, 212, 196, .20);
  background: rgba(95, 212, 196, .04);
  color: var(--accent-teal);
}

.image-health-actions {
  display: flex;
  gap: 5px;
}

.image-health-actions button {
  min-height: 31px;
  padding: 6px 8px;
  font-size: 7.8px;
}

.image-health-empty {
  padding: 28px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9px;
}

.image-health-empty[hidden] {
  display: none !important;
}

@media(max-width:1100px) {
  .image-health-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:700px) {
  .inventory-tools-switcher {
    grid-template-columns: 1fr;
  }

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

  .image-health-toolbar {
    grid-template-columns: 1fr;
  }

  .image-health-note {
    flex-direction: column;
    gap: 4px;
  }

  .image-health-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .image-health-thumb {
    width: 46px;
    height: 58px;
  }

  .image-health-actions {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:390px) {
  .image-health-summary {
    grid-template-columns: 1fr;
  }
}


/* ---------- Owner alerts dashboard ---------- */
.owner-alerts-dashboard {
  margin: 0 0 13px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(95, 212, 196, .035), rgba(227, 179, 65, .018));
}

.owner-alerts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.owner-alerts-head h3 {
  margin: 2px 0 0;
  font-size: 12px;
}

.owner-alerts-head>span {
  color: var(--text-muted);
  font-size: 8px;
}

.owner-alerts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.owner-alerts-grid a {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}

.owner-alerts-grid a:hover {
  border-color: var(--accent-teal);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.owner-alerts-grid a.needs-attention {
  border-color: rgba(227, 179, 65, .22);
  background: rgba(227, 179, 65, .035);
}

.owner-alerts-grid strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
}

.owner-alerts-grid a.needs-attention strong {
  color: var(--accent-gold);
}

.owner-alerts-grid span {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  font-weight: 750;
}

.owner-alerts-grid small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width:1000px) {
  .owner-alerts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:520px) {
  .owner-alerts-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .owner-alerts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:360px) {
  .owner-alerts-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------- Buyer UX: currency, search, grade shortcuts ---------- */
.inventory-display-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.currency-preference-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 8px;
}

.currency-preference-control select {
  min-height: 27px;
  padding: 4px 24px 4px 6px;
  border: 0;
  background-color: var(--bg);
  color: var(--text);
  font-size: 8px;
}

.view-mode-toggle {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.view-mode-toggle:hover,
.view-mode-toggle[aria-pressed="true"] {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.inventory-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
}

.inventory-search-wrap>input {
  width: 100% !important;
  min-height: 38px;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 520;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .38);
}

.search-suggestions[hidden] {
  display: none !important;
}

.search-suggestions button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.search-suggestions button:hover,
.search-suggestions button.active {
  background: var(--surface);
}

.search-suggestions button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.search-suggestions button small {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 7px;
}

.grade-shortcuts {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  margin: -1px 0 11px;
  padding: 2px 0 5px;
  scrollbar-width: thin;
}

.grade-shortcuts[hidden] {
  display: none !important;
}

.grade-shortcuts-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.grade-shortcuts button {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 7.5px;
  cursor: pointer;
}

.grade-shortcuts button:hover,
.grade-shortcuts button.active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(95, 212, 196, .05);
}

/* ---------- Image count + faster thumbnails ---------- */
.image-count-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(5, 8, 10, .78);
  color: #fff;
  font: 700 8px 'JetBrains Mono', monospace;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

/* ---------- Compare controls ---------- */
.card-title-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.compare-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.compare-card-btn:hover,
.compare-card-btn.active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(95, 212, 196, .05);
}

.grid .card.compare-selected {
  border-color: rgba(95, 212, 196, .48) !important;
  box-shadow: 0 0 0 1px rgba(95, 212, 196, .10);
}

.compare-tray {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 850;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(95, 212, 196, .32);
  border-radius: 12px;
  background: rgba(18, 20, 25, .94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  backdrop-filter: blur(12px);
}

.compare-tray[hidden] {
  display: none !important;
}

.compare-tray-copy strong {
  display: block;
  color: var(--text);
  font-size: 9px;
}

.compare-tray-copy span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.compare-tray-actions {
  display: flex;
  gap: 6px;
}

.compare-modal {
  width: min(1100px, calc(100vw - 30px));
  max-width: 1100px;
}

.compare-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.compare-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare-table th,
.compare-table td {
  min-width: 155px;
  padding: 9px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  color: var(--text);
  font-size: 8.5px;
  text-align: left;
}

.compare-table tbody th {
  width: 130px;
  min-width: 130px;
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.compare-card-head img,
.compare-card-no-image {
  width: 82px;
  height: 104px;
  display: block;
  object-fit: cover;
  margin-bottom: 7px;
  border-radius: 7px;
  background: var(--surface-2);
}

.compare-card-head strong {
  display: block;
  font-size: 9px;
  line-height: 1.3;
}

.compare-card-head small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.compare-remove {
  margin-top: 7px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 7px;
  cursor: pointer;
}

/* ---------- Compact inventory mode ---------- */
.grid.compact-list {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

.grid.compact-list .card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 118px;
}

.grid.compact-list .card>.thumb-wrap,
.grid.compact-list .card>.thumb-placeholder {
  width: 92px !important;
  height: 118px !important;
  aspect-ratio: auto !important;
  border-right: 1px solid var(--border);
  border-bottom: 0;
}

.grid.compact-list .card>.thumb-wrap .thumb {
  width: 92px !important;
  height: 118px !important;
  aspect-ratio: auto !important;
}

.grid.compact-list .card .card-body {
  padding: 9px 11px !important;
}

.grid.compact-list .clean-card-body {
  gap: 6px;
}

.grid.compact-list .clean-price-block {
  margin-top: auto;
  padding-top: 6px;
}

.grid.compact-list .clean-notes {
  -webkit-line-clamp: 1;
}

/* Extra details action must remain usable on narrow devices. */
@media(max-width:800px) {
  .inventory-filter-tools {
    align-items: stretch;
  }

  .currency-preference-control {
    justify-content: space-between;
  }

  .copy-filter-link-btn {
    grid-column: 1/-1;
    width: 100%;
  }

  .filter-row>.inventory-search-wrap {
    flex: 1 1 100% !important;
    width: 100%;
    min-width: 0;
  }

  .grade-shortcuts {
    margin-top: 2px;
    padding-bottom: 7px;
  }

  .compare-card-btn span {
    display: none;
  }

  .compare-card-btn {
    width: 26px;
    min-width: 26px;
    padding: 4px;
    justify-content: center;
    font-size: 10px;
  }

  .image-count-badge {
    right: 4px;
    bottom: 4px;
    padding: 3px 5px;
    font-size: 7px;
  }

  .compare-tray {
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .compare-modal {
    width: calc(100vw - 16px);
    padding-left: 10px;
    padding-right: 10px;
  }

  .compare-table {
    min-width: 660px;
  }

  .grid.compact-list .card {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 104px;
  }

  .grid.compact-list .card>.thumb-wrap,
  .grid.compact-list .card>.thumb-placeholder,
  .grid.compact-list .card>.thumb-wrap .thumb {
    width: 78px !important;
    height: 104px !important;
  }

  .grid.compact-list .clean-all-pills {
    max-height: 26px;
    overflow: hidden;
  }
}


@media(max-width:800px) and (prefers-reduced-motion:reduce) {

  .filter-drawer-shell,
  .filter-drawer-shell.open {
    transition: none !important;
  }
}

@media(max-width:420px) {
  .compare-tray-copy span {
    display: none;
  }

  .compare-tray-actions button {
    padding: 7px 9px;
  }
}


/* ---------- Draft/archive + owner-private fields ---------- */
.owner-private-fields {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(95, 212, 196, .18);
  border-radius: 10px;
  background: rgba(95, 212, 196, .025);
}

.owner-private-fields-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.owner-private-fields-head strong {
  display: block;
  font-size: 10px;
}

.owner-private-fields-head span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.8px;
}

.owner-private-ready,
.owner-private-warning {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 7px !important;
  font-weight: 800;
}

.owner-private-ready {
  color: var(--accent-teal) !important;
  background: rgba(95, 212, 196, .08);
}

.owner-private-warning {
  color: var(--accent-gold) !important;
  background: rgba(227, 179, 65, .08);
}

.owner-lifecycle-field .hint {
  margin-top: 5px;
}

/* ---------- Inventory Tools categories ---------- */
.inventory-tools-category-switcher {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.inventory-tools-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -6px 0 12px;
  padding: 0 2px;
}

.inventory-tools-subnav a {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 7.5px;
  text-decoration: none;
}

.inventory-tools-subnav a.active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: rgba(95, 212, 196, .05);
}

/* ---------- Lifecycle manager ---------- */
.lifecycle-stats,
.duplicate-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.lifecycle-stats>div,
.duplicate-summary>div {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.lifecycle-stats strong,
.duplicate-summary strong {
  display: block;
  color: var(--accent-teal);
  font: 700 16px 'JetBrains Mono', monospace;
}

.lifecycle-stats span,
.duplicate-summary span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.lifecycle-section {
  padding: 13px;
}

.lifecycle-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.lifecycle-section-head h3 {
  margin: 0;
}

.lifecycle-section-head span {
  color: var(--text-muted);
  font-size: 7.5px;
}

.lifecycle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lifecycle-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}

.lifecycle-thumb {
  width: 48px;
  height: 61px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 7px;
}

.lifecycle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lifecycle-main {
  min-width: 0;
}

.lifecycle-main strong,
.lifecycle-main span,
.lifecycle-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lifecycle-main strong {
  font-size: 9px;
}

.lifecycle-main span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.lifecycle-main small {
  margin-top: 3px;
  color: var(--accent-gold);
  font-size: 7px;
}

.lifecycle-actions {
  display: flex;
  gap: 5px;
}

.lifecycle-actions button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 7.5px;
}

.lifecycle-migration-needed {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lifecycle-migration-needed strong {
  color: var(--accent-gold);
}

.lifecycle-migration-needed span {
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

/* ---------- Duplicate detector ---------- */
.duplicate-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.duplicate-group {
  padding: 12px;
  margin: 0;
}

.duplicate-group-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border-soft);
}

.duplicate-group-head strong {
  color: var(--accent-gold);
  font-size: 8px;
}

.duplicate-group-head span {
  color: var(--text-muted);
  font-size: 8px;
}

.duplicate-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.duplicate-row:last-child {
  border-bottom: 0;
}

.duplicate-row>div:first-child {
  min-width: 0;
}

.duplicate-row strong,
.duplicate-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duplicate-row strong {
  font-size: 9px;
}

.duplicate-row span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.duplicate-actions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}

/* ---------- Inventory Tools: private owner bulk editor ---------- */
.bulk-private-section {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(95, 212, 196, .18);
  border-radius: 10px;
  background: rgba(95, 212, 196, .025);
}

.bulk-private-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.bulk-private-head strong {
  display: block;
  font-size: 9px;
}

.bulk-private-head span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.35;
}

.bulk-private-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-private-field {
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg);
}

.bulk-private-field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.bulk-private-field-top .bulk-meta-enable {
  font-weight: 600;
}

.bulk-private-field-controls {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 7px;
}

.bulk-private-field-controls select,
.bulk-private-field-controls input,
.bulk-private-field-controls textarea {
  width: 100%;
  min-height: 34px;
}

.bulk-private-field-controls textarea {
  min-height: 72px;
  resize: vertical;
}

.bulk-private-field[aria-disabled="true"] .bulk-private-field-controls {
  opacity: .48;
  pointer-events: none;
}

.bulk-private-migration {
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--accent-gold) !important;
  background: rgba(227, 179, 65, .07);
  font-size: 7.2px !important;
}

@media(max-width:500px) {
  .bulk-private-field-controls {
    grid-template-columns: 1fr;
  }
}

/* ---------- Edit history ---------- */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.history-main {
  min-width: 0;
}

.history-main strong,
.history-main span,
.history-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-main strong {
  font-size: 9px;
}

.history-main span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.history-main small {
  margin-top: 4px;
  color: var(--accent-teal);
  font-size: 7px;
}

.history-actions {
  display: flex;
  gap: 5px;
}

.history-actions button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 7.5px;
}

.history-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- Price range + filter drawer ---------- */
.filter-drawer-shell {
  display: contents;
}

.filter-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.filter-drawer-head>div:first-child {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.filter-drawer-head strong {
  font-size: 9px;
}

.filter-drawer-head span {
  color: var(--text-muted);
  font-size: 7.5px;
}

.filter-drawer-head>div:last-child {
  display: flex;
  gap: 5px;
}

.mobile-filter-close-btn,
.mobile-filter-open-btn {
  display: none;
}

.clear-all-filters-btn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 7.5px;
}

.price-range-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.price-range-label {
  color: var(--text-muted);
  font-size: 7.5px;
  white-space: nowrap;
}

.price-range-filter input {
  width: 82px !important;
  min-width: 0 !important;
  padding: 6px 7px !important;
  background: var(--bg) !important;
}

.price-range-filter>span:not(.price-range-label) {
  color: var(--text-muted);
  font-size: 8px;
}

/* ---------- Same-series navigation ---------- */
.same-series-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.same-series-nav>div:first-child {
  min-width: 0;
}

.same-series-nav strong {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.same-series-nav>div:first-child>span {
  margin-left: 7px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.same-series-actions {
  display: flex;
  gap: 6px;
}

.same-series-actions button {
  min-height: 31px;
  padding: 6px 9px;
  font-size: 7.5px;
}

@media(max-width:800px) {
  .inventory-tools-category-switcher {
    display: flex !important;
    overflow-x: auto;
    gap: 6px !important;
    padding: 5px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .inventory-tools-category-switcher>a {
    flex: 0 0 145px;
    scroll-snap-align: start;
  }

  .inventory-tools-category-switcher a {
    display: block !important;
  }

  .inventory-tools-category-switcher span {
    text-align: left !important;
    margin-top: 3px !important;
  }

  .inventory-tools-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .mobile-filter-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 8px;
    cursor: pointer;
  }

  .filter-drawer-shell {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 910;
    height: min(82dvh, 720px);
    max-height: min(82dvh, 720px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    background: var(--bg);
    box-shadow: 0 -18px 45px rgba(0, 0, 0, .48);
    transform: translate3d(0, 105%, 0);
    visibility: hidden;
    will-change: transform;
    contain: layout paint;
    transition: transform .20s cubic-bezier(.22, .8, .32, 1), visibility 0s linear .20s;
  }

  .filter-drawer-shell.open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform .20s cubic-bezier(.22, .8, .32, 1), visibility 0s;
  }

  .mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, .54);
    backdrop-filter: blur(2px);
  }

  .mobile-filter-backdrop[hidden] {
    display: none !important;
  }

  body.mobile-filter-open {
    overflow: hidden;
  }

  .mobile-filter-close-btn {
    display: inline-flex;
  }

  .filter-drawer-head {
    position: sticky;
    top: -14px;
    z-index: 4;
    margin: -14px -12px 11px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  .filter-drawer-head>div:first-child {
    display: block;
  }

  .filter-drawer-head>div:first-child span {
    display: block;
    margin-top: 2px;
  }

  .filter-drawer-shell .filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .filter-drawer-shell .filter-row>.overview-select,
  .filter-drawer-shell .filter-row>.inventory-search-wrap,
  .filter-drawer-shell .filter-row>.price-range-filter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  .filter-drawer-shell .filter-row>.inventory-search-wrap,
  .filter-drawer-shell .filter-row>.price-range-filter {
    grid-column: 1/-1;
  }

  .filter-drawer-shell .overview-select {
    position: relative;
    z-index: 1;
  }

  .filter-drawer-shell .overview-select.menu-open {
    z-index: 80;
  }

  /* Mobile filters use a normal dropdown anchored directly below the
       control. The menu is absolutely positioned, so it does not resize or
       reflow the filter grid. */
  .filter-drawer-shell .overview-select-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    max-height: min(38dvh, 280px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 980 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
  }

  .filter-drawer-shell .grade-shortcuts {
    margin-top: 4px;
  }

  .price-range-filter {
    justify-content: space-between;
  }

  .price-range-filter input {
    width: 35% !important;
  }

  .lifecycle-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .lifecycle-actions {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lifecycle-actions button {
    width: 100%;
  }

  .duplicate-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .duplicate-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .history-row {
    grid-template-columns: 1fr;
  }

  .history-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .same-series-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .same-series-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .same-series-actions button {
    width: 100%;
  }
}

@media(max-width:420px) {

  .lifecycle-stats,
  .duplicate-summary {
    grid-template-columns: 1fr;
  }

  .filter-drawer-shell .filter-row {
    grid-template-columns: 1fr !important;
  }

  .filter-drawer-shell .filter-row>* {
    grid-column: 1 !important;
  }

  .lifecycle-actions {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle-actions button:last-child:nth-child(3) {
    grid-column: 1/-1;
  }
}


.owner-private-detail {
  border-color: rgba(95, 212, 196, .22) !important;
  background: rgba(95, 212, 196, .025) !important;
}

.owner-private-detail h3 {
  color: var(--accent-teal);
}

.owner-private-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.owner-private-detail-tags span {
  padding: 3px 6px;
  border: 1px solid rgba(95, 212, 196, .22);
  border-radius: 999px;
  background: rgba(95, 212, 196, .06);
  color: var(--accent-teal);
  font-size: 7.5px;
  font-weight: 700;
}

.owner-private-detail-notes {
  white-space: pre-wrap;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.5;
}


/* ---------- Mobile inventory view fix ----------
     Mobile already uses one horizontal card per row. The optional compact
     view is desktop-only so it cannot shrink/reflow mobile cards. */
@media(max-width:800px) {
  .desktop-compact-view-toggle {
    display: none !important;
  }

  #invGrid.grid.compact-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #invGrid.grid.compact-list .card {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    min-height: 0 !important;
    width: 100% !important;
    gap: 0 !important;
  }

  #invGrid.grid.compact-list .card>.thumb-wrap,
  #invGrid.grid.compact-list .card>.thumb-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 210px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
  }

  #invGrid.grid.compact-list .card>.thumb-wrap .thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: 210px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  #invGrid.grid.compact-list .card .clean-card-body {
    padding: 15px 14px !important;
    gap: 9px !important;
  }

  #invGrid.grid.compact-list .clean-all-pills {
    max-height: none !important;
    overflow: visible !important;
  }

}


/* Featured Collections are real navigation controls. */
.home-feature {
  cursor: pointer;
}

.home-feature:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
}


.home-shipping-international span b {
  color: var(--accent-gold);
  font-weight: 800;
}


/* ==========================================================
     Home > Recently Added layout fix
     Dedicated rules prevent long titles from overflowing into
     metadata/pills and keep the overview readable on PC/mobile.
     ========================================================== */

/* PC: only create another column when each card still has enough width. */
#homeRecentGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

#homeRecentGrid .card {
  display: grid !important;
  grid-template-columns: minmax(145px, 34%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: 238px !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#homeRecentGrid .card>.thumb-wrap,
#homeRecentGrid .card>.thumb-placeholder {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 238px !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--surface-2) !important;
}

#homeRecentGrid .card>.thumb-wrap .thumb {
  width: 100% !important;
  height: 100% !important;
  min-height: 238px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#homeRecentGrid .card .clean-card-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 15px 15px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow: hidden !important;
}

/* The previous rule used overflow:visible with line-clamp.
     Long names therefore painted over the rows below them. */
#homeRecentGrid .clean-card-title-row {
  min-width: 0 !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

#homeRecentGrid .clean-card-name {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow-wrap: anywhere !important;
}

/* Keep Compare/Favorite useful without stealing half of the title width. */
#homeRecentGrid .card-title-actions {
  flex: 0 0 auto !important;
  gap: 2px !important;
}

#homeRecentGrid .compare-card-btn {
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
  justify-content: center !important;
  font-size: 10px !important;
}

#homeRecentGrid .compare-card-btn span {
  display: none !important;
}

#homeRecentGrid .title-favorite-btn {
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  margin: 0 !important;
}

#homeRecentGrid .clean-card-reference {
  margin-top: 0 !important;
  min-height: 0 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#homeRecentGrid .clean-all-pills {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 5px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#homeRecentGrid .clean-all-pills .clean-grade-badge,
#homeRecentGrid .clean-all-pills .clean-meta-pill {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  padding: 4px 7px !important;
}

#homeRecentGrid .clean-all-pills .clean-series-pill {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#homeRecentGrid .clean-price-block {
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--border-soft) !important;
}

#homeRecentGrid .clean-price-primary {
  font-size: 16px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

#homeRecentGrid .clean-price-secondary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px 6px !important;
  margin-top: 5px !important;
  font-size: 9.5px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

#homeRecentGrid .clean-price-secondary span {
  margin: 0 !important;
}

#homeRecentGrid .clean-notes {
  display: none !important;
}

#homeRecentGrid .clean-owner-views {
  margin-top: 0 !important;
  min-height: 14px !important;
  font-size: 8.5px !important;
  justify-content: flex-end !important;
}

/* Owner kebab remains in the corner without covering the title. */
body.owner-mode #homeRecentGrid .clean-card-body {
  padding-right: 48px !important;
}

#homeRecentGrid .card .quick-card-actions {
  top: 8px !important;
  right: 8px !important;
}

/* Medium PC/laptop: use two comfortable cards instead of squeezing three. */
@media(min-width:801px) and (max-width:1180px) {
  #homeRecentGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #homeRecentGrid .card {
    grid-template-columns: minmax(135px, 35%) minmax(0, 1fr) !important;
  }
}

/* Mobile: the normal site pattern remains one card per row. */
@media(max-width:800px) {
  #homeRecentGrid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  #homeRecentGrid .card {
    grid-template-columns: minmax(112px, 35%) minmax(0, 1fr) !important;
    min-height: 200px !important;
  }

  #homeRecentGrid .card>.thumb-wrap,
  #homeRecentGrid .card>.thumb-placeholder,
  #homeRecentGrid .card>.thumb-wrap .thumb {
    min-height: 200px !important;
  }

  #homeRecentGrid .card .clean-card-body {
    padding: 12px 12px 11px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }

  body.owner-mode #homeRecentGrid .clean-card-body {
    padding-right: 43px !important;
  }

  #homeRecentGrid .clean-card-name {
    font-size: 13.5px !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 3 !important;
  }

  #homeRecentGrid .clean-card-reference {
    font-size: 8.5px !important;
  }

  #homeRecentGrid .clean-all-pills {
    gap: 4px !important;
  }

  #homeRecentGrid .clean-all-pills .clean-grade-badge,
  #homeRecentGrid .clean-all-pills .clean-meta-pill {
    font-size: 8.5px !important;
    padding: 4px 6px !important;
  }

  #homeRecentGrid .clean-price-primary {
    font-size: 15px !important;
  }

  #homeRecentGrid .clean-price-secondary {
    font-size: 9px !important;
    gap: 2px 5px !important;
  }
}

@media(max-width:430px) {
  #homeRecentGrid .card {
    grid-template-columns: minmax(108px, 38%) minmax(0, 1fr) !important;
    min-height: 188px !important;
  }

  #homeRecentGrid .card>.thumb-wrap,
  #homeRecentGrid .card>.thumb-placeholder,
  #homeRecentGrid .card>.thumb-wrap .thumb {
    min-height: 188px !important;
  }

  #homeRecentGrid .card .clean-card-body {
    padding: 10px 9px !important;
    gap: 5px !important;
  }

  body.owner-mode #homeRecentGrid .clean-card-body {
    padding-right: 39px !important;
  }

  #homeRecentGrid .clean-card-name {
    font-size: 12.5px !important;
  }

  #homeRecentGrid .compare-card-btn,
  #homeRecentGrid .title-favorite-btn {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }
}


/* ---------- Collection (NFS) / Not For Sale ---------- */
.nfs-price-hint {
  margin: -3px 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(95, 212, 196, .20);
  border-radius: 8px;
  background: rgba(95, 212, 196, .04);
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

.nfs-price-hint[hidden] {
  display: none !important;
}

.nfs-optional-price label {
  color: var(--accent-teal);
}

.nfs-price-display .clean-price-primary,
.nfs-detail-price {
  color: var(--accent-teal) !important;
  letter-spacing: .4px;
}


/* ---------- Collection (NFS) pill ----------
     Canonical NFS styling must win over generic availability/selected-pill rules. */
.clean-availability-pill[data-pill-value="Collection (NFS)"],
.clean-availability-pill[data-pill-value="Collection (NFS)"].pill-selected {
  color: #d8b4fe !important;
  border-color: rgba(192, 132, 252, .58) !important;
  background: rgba(147, 51, 234, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .08) !important;
  text-transform: none !important;
}

.clean-availability-pill[data-pill-value="Collection (NFS)"]:hover,
.clean-availability-pill[data-pill-value="Collection (NFS)"]:focus-visible {
  color: #ead7ff !important;
  border-color: #c084fc !important;
  background: rgba(147, 51, 234, .26) !important;
}


/* ---------- Dedicated Collection / NFS ---------- */
.collection-primary-nav .ic,
.collection-nav-count {
  color: #d8b4fe;
}

.home-stat-card-collection {
  border-color: rgba(168, 85, 247, .20);
  background: linear-gradient(180deg, rgba(168, 85, 247, .055), var(--surface));
}

.home-stat-card-collection .home-stat-value {
  color: #c084fc;
}

.nfs-collection-card {
  border-color: rgba(168, 85, 247, .34) !important;
  box-shadow:
    inset 3px 0 0 rgba(168, 85, 247, .68),
    0 8px 22px rgba(0, 0, 0, .12) !important;
}

.nfs-collection-card:hover {
  border-color: rgba(192, 132, 252, .55) !important;
}

.nfs-detail-notice {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(168, 85, 247, .32);
  border-radius: 10px;
  background: rgba(126, 34, 206, .09);
}

.nfs-detail-notice-mark {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 7px;
  background: #7e22ce;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
}

.nfs-detail-notice strong,
.nfs-detail-notice span {
  display: block;
}

.nfs-detail-notice strong {
  color: #e9d5ff;
  font-size: 9.5px;
}

.nfs-detail-notice span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.4;
}

/* ---------- Recently Viewed ---------- */
.recent-viewed-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.recent-viewed-summary span {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 8px;
}

.recent-viewed-summary strong {
  color: var(--text);
}

.recent-viewed-item {
  min-width: 0;
}

.recent-viewed-time {
  margin: 5px 2px 0;
  color: var(--text-muted);
  font-size: 7.5px;
  text-align: right;
}

/* ---------- Active filter count ---------- */
.filter-count-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-teal);
  color: #071412;
  font-size: 8px;
  font-weight: 900;
}

.filter-count-badge[hidden] {
  display: none !important;
}

.inventory-no-results {
  max-width: 620px;
  margin: 26px auto !important;
}

.no-results-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
}

.no-results-actions a {
  text-decoration: none;
}

@media(max-width:800px) {

  .recent-page-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .recent-page-head .recent-clear-btn {
    flex: 0 0 auto;
  }

  .recent-viewed-summary {
    gap: 5px;
  }

  .recent-viewed-summary span {
    font-size: 7.5px;
  }

  .nfs-detail-notice {
    align-items: flex-start;
  }

  .no-results-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .no-results-actions>* {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ==========================================================
     Mobile listing-page rhythm
     Shared by Inventory / Reserved / Sold / Collection.
     ========================================================== */
.copy-filter-link-mobile {
  display: none;
}

@media(max-width:800px) {

  /* Keep the whole listing header/control area on one spacing rhythm. */
  .listing-page-head {
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  .listing-page-head .eyebrow {
    margin-bottom: 5px !important;
  }

  .listing-page-head h2 {
    margin: 0 !important;
    line-height: 1.08 !important;
  }

  .listing-page-head p {
    margin-top: 7px !important;
    line-height: 1.45 !important;
  }

  .listing-filter-tools {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }

  /* Quick filters: one clean horizontal row instead of wrapping unevenly. */
  .listing-filter-tools .quick-filters {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 1px 1px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .listing-filter-tools .quick-filters::-webkit-scrollbar {
    display: none;
  }

  .listing-filter-tools .quick-filter {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    scroll-snap-align: start;
  }

  /* Currency + Filters form one balanced row.
       Copy Filter Link uses the same height below them. */
  .listing-filter-tools .inventory-display-tools {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  .listing-filter-tools .currency-preference-control,
  .listing-filter-tools .mobile-filter-open-btn,
  .listing-filter-tools .copy-filter-link-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .listing-filter-tools .currency-preference-control {
    grid-column: 1 !important;
    padding: 5px 7px 5px 12px !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .listing-filter-tools .currency-preference-control>span {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .listing-filter-tools .currency-preference-control select {
    min-width: 76px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 24px 4px 9px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }

  .listing-filter-tools .mobile-filter-open-btn {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
  }

  .listing-filter-tools .copy-filter-link-btn {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
  }

  .copy-filter-link-desktop {
    display: none !important;
  }

  .copy-filter-link-mobile {
    display: inline !important;
  }

  /* Pill summary, when present, should follow the same 10px rhythm. */
  .pill-filter-summary:not([hidden]) {
    margin: 0 0 14px !important;
  }

  /* The hidden drawer must not create visual spacing in the page flow. */
  .filter-drawer-shell:not(.open) {
    margin: 0 !important;
  }

  /* Listings start at a predictable distance from the controls. */
  #invGrid {
    margin-top: 0 !important;
  }

  #invGrid.grid {
    gap: 12px !important;
  }

  #invGrid .card {
    margin: 0 !important;
    border-radius: 13px !important;
  }

  /* Keep the floating filter control clear of Safari's bottom bar and cards. */
}

@media(max-width:390px) {
  .listing-filter-tools {
    gap: 9px !important;
    margin-bottom: 12px !important;
  }

  .listing-filter-tools .inventory-display-tools {
    gap: 8px !important;
  }

  .listing-filter-tools .currency-preference-control,
  .listing-filter-tools .mobile-filter-open-btn,
  .listing-filter-tools .copy-filter-link-btn {
    min-height: 44px !important;
    height: 44px !important;
  }

  .listing-filter-tools .quick-filter {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  #invGrid.grid {
    gap: 10px !important;
  }
}


/* ---------- Previous / Next through current filtered results ---------- */
.filtered-result-nav {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.filtered-result-nav-btn {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 9px;
  white-space: nowrap;
}

.filtered-result-nav-btn:last-child {
  justify-self: stretch;
}

.filtered-result-nav-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.filtered-result-position {
  min-width: 84px;
  text-align: center;
}

.filtered-result-position span,
.filtered-result-position strong {
  display: block;
}

.filtered-result-position span {
  color: var(--text-muted);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .45px;
}

.filtered-result-position strong {
  margin-top: 2px;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

@media(max-width:800px) {
  .filtered-result-nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 11px;
    padding: 6px;
    border-radius: 10px;
  }

  .filtered-result-nav-btn {
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    font-size: 10px;
    border-radius: 8px;
  }

  .filtered-result-position {
    min-width: 62px;
  }

  .filtered-result-position span {
    display: none;
  }

  .filtered-result-position strong {
    margin: 0;
    font-size: 10px;
  }
}

@media(max-width:390px) {
  .filtered-result-nav {
    gap: 4px;
    padding: 5px;
  }

  .filtered-result-nav-btn {
    min-height: 40px;
    font-size: 9px;
    padding: 6px;
  }

  .filtered-result-position {
    min-width: 54px;
  }

  .filtered-result-position strong {
    font-size: 9px;
  }
}


/* ---------- Smooth in-modal card navigation ----------
     Previous/Next changes only the details content. The modal overlay stays
     mounted so there is no close/reopen flash. */
#detailsMount {
  transform: translateX(0);
  opacity: 1;
  will-change: auto;
}

#detailsMount.details-card-transitioning {
  will-change: transform, opacity;
  pointer-events: none;
}

#detailsMount.details-card-slide-out-left {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 105ms ease, transform 105ms ease;
}

#detailsMount.details-card-slide-out-right {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 105ms ease, transform 105ms ease;
}

#detailsMount.details-card-slide-in-right {
  animation: detailsCardInRight 170ms ease both;
}

#detailsMount.details-card-slide-in-left {
  animation: detailsCardInLeft 170ms ease both;
}

@keyframes detailsCardInRight {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes detailsCardInLeft {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media(prefers-reduced-motion:reduce) {

  #detailsMount.details-card-slide-out-left,
  #detailsMount.details-card-slide-out-right {
    transition: none !important;
    transform: none !important;
  }

  #detailsMount.details-card-slide-in-right,
  #detailsMount.details-card-slide-in-left {
    animation: none !important;
  }
}

@media(max-width:800px) {
  #detailsMount.details-card-slide-out-left {
    transform: translateX(-10px);
  }

  #detailsMount.details-card-slide-out-right {
    transform: translateX(10px);
  }

  @keyframes detailsCardInRight {
    from {
      opacity: 0;
      transform: translateX(10px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes detailsCardInLeft {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}


/* ---------- Owner Inventory Health Score ---------- */
.owner-health-overview {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 9px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.owner-health-score strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  line-height: 1;
}

.owner-health-score span {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
}

.owner-health-score small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.35;
}

.owner-health-overview.health-good .owner-health-score strong {
  color: var(--accent-teal);
}

.owner-health-overview.health-watch .owner-health-score strong {
  color: var(--accent-gold);
}

.owner-health-overview.health-needs-work .owner-health-score strong {
  color: #f87171;
}

.owner-health-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.owner-health-breakdown>div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
}

.owner-health-breakdown span {
  display: block;
  color: var(--text-muted);
  font-size: 7px;
}

.owner-health-breakdown strong {
  display: block;
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

/* ---------- Owner Reserved Age Tracker ---------- */
.owner-reserved-age {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px dashed var(--border-soft);
  font-size: 7.5px;
  font-weight: 750;
}

.owner-reserved-age-fresh {
  color: var(--accent-teal);
}

.owner-reserved-age-warning {
  color: var(--accent-gold);
}

.owner-reserved-age-critical {
  color: #f87171;
}

.owner-reserved-age-unknown {
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- Sticky mobile Results · Sort · Filters ---------- */
.sticky-mobile-results-bar {
  display: none;
}

@media(max-width:800px) {

  .sticky-mobile-results-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 780;
    min-height: 50px;
    display: grid;
    grid-template-columns: .8fr 1fr 1fr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(95, 212, 196, .30);
    border-radius: 14px;
    background: rgba(18, 20, 25, .95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }

  .sticky-mobile-results-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.mobile-filter-open .sticky-mobile-results-bar,
  body.compare-tray-open .sticky-mobile-results-bar {
    display: none !important;
  }

  .sticky-mobile-results-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-right: 1px solid var(--border);
  }

  .sticky-mobile-results-count strong {
    color: var(--accent-teal);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1;
  }

  .sticky-mobile-results-count span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  .sticky-mobile-results-action {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    font-family: inherit;
    cursor: pointer;
  }

  .sticky-mobile-results-action:last-child {
    border-right: 0;
  }

  .sticky-mobile-results-action>span {
    font-size: 9px;
    font-weight: 800;
  }

  .sticky-mobile-results-action small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-mobile-filter-count {
    min-width: 20px;
    height: 18px;
    margin-top: 1px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 8px;
  }

  .sticky-mobile-results-action[aria-expanded="true"] {
    background: rgba(95, 212, 196, .06);
    color: var(--accent-teal);
  }

  .owner-health-overview {
    grid-template-columns: 1fr;
    gap: 9px;
  }

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

  #invGrid {
    padding-bottom: 68px;
  }
}

@media(max-width:390px) {
  .sticky-mobile-results-bar {
    left: 9px;
    right: 9px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: .75fr 1fr 1fr;
  }
}


/* ---------- Refactor pass 2: Collection listing controls ---------- */
@media(max-width:800px) {
  .listing-filter-tools .collection-display-tools {
    grid-template-columns: 1fr 1fr !important;
  }

  .listing-filter-tools .collection-display-tools .mobile-filter-open-btn {
    grid-column: 1 !important;
  }

  .listing-filter-tools .collection-display-tools .copy-filter-link-btn {
    grid-column: 2 !important;
  }
}

@media(max-width:800px) and (prefers-reduced-motion:reduce) {
  .sticky-mobile-results-bar {
    transition: none !important;
  }
}


/* ==========================================================
     Card Details action bar — authoritative Phase 3 rules
     Public: Close remains far-right.
     Owner: Close sits immediately left of Edit; Edit is far-right.
     ========================================================== */
.modal.card-details-modal {
  padding: 0 !important;
}

.modal.card-details-modal .details-top-actions {
  position: sticky;
  top: 0;
  z-index: 28;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-radius: 15px 15px 0 0;
  background: rgba(33, 35, 43, .97);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
}

.modal.card-details-modal .details-secondary-actions,
.modal.card-details-modal .details-primary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal.card-details-modal .details-secondary-actions {
  min-width: 0;
  justify-content: flex-start;
  overflow: visible;
}

.modal.card-details-modal .details-primary-actions {
  position: relative;
  z-index: 3;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding-left: 9px;
  border-left: 1px solid var(--border);
}

.modal.card-details-modal .details-top-actions button {
  position: static;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
}

.modal.card-details-modal .details-top-actions button:hover,
.modal.card-details-modal .details-top-actions button:focus-visible {
  border-color: var(--text-muted);
  background: var(--surface-2);
  color: var(--text);
  transform: none;
}

.modal.card-details-modal #detailsFavoriteBtn.active {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(248, 113, 113, .07);
  color: #fca5a5;
}

.modal.card-details-modal .details-contact-btn {
  border-color: rgba(95, 212, 196, .35) !important;
  background: rgba(95, 212, 196, .07) !important;
  color: var(--accent-teal) !important;
}

.modal.card-details-modal .details-contact-btn:hover,
.modal.card-details-modal .details-contact-btn:focus-visible {
  border-color: var(--accent-teal) !important;
  background: rgba(95, 212, 196, .12) !important;
}

.details-action-label-mobile {
  display: none;
}

.details-more-wrap {
  position: relative;
  flex: 0 0 auto;
}

.modal.card-details-modal .details-more-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 48;
  width: max-content;
  min-width: 190px;
  max-width: min(270px, calc(100vw - 28px));
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
}

.modal.card-details-modal .details-more-menu[hidden] {
  display: none !important;
}

.modal.card-details-modal .details-more-menu button {
  width: 100% !important;
  min-height: 38px;
  justify-content: flex-start;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.modal.card-details-modal .details-more-menu button:hover,
.modal.card-details-modal .details-more-menu button:focus-visible {
  border-color: transparent;
  background: var(--surface);
  color: var(--accent-teal);
}

.modal.card-details-modal .details-primary-actions #detailsCloseBtn {
  min-width: 80px;
  border-color: rgba(248, 113, 113, .42);
  background: rgba(248, 113, 113, .08);
  color: #fca5a5;
  font-weight: 800;
}

.modal.card-details-modal .details-primary-actions #detailsCloseBtn span {
  margin-right: 1px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.modal.card-details-modal .details-primary-actions #detailsCloseBtn:hover,
.modal.card-details-modal .details-primary-actions #detailsCloseBtn:focus-visible {
  border-color: #f87171;
  background: rgba(248, 113, 113, .15);
  color: #fff;
}

.modal.card-details-modal .details-primary-actions #detailsEditBtn {
  min-width: 80px;
  border-color: var(--accent-gold) !important;
  background: var(--accent-gold) !important;
  color: #17130a !important;
}

.modal.card-details-modal .details-primary-actions #detailsEditBtn:hover,
.modal.card-details-modal .details-primary-actions #detailsEditBtn:focus-visible {
  border-color: var(--accent-gold-soft) !important;
  background: var(--accent-gold-soft) !important;
  color: #17130a !important;
}

.modal.card-details-modal #detailsMount {
  padding: 18px 22px 22px !important;
}

@media(max-width:800px) {
  .modal.card-details-modal .details-top-actions {
    gap: 6px;
    padding: 7px 8px;
    border-radius: 11px 11px 0 0;
  }

  .modal.card-details-modal .details-secondary-actions {
    gap: 4px;
  }

  .modal.card-details-modal .details-primary-actions {
    gap: 4px;
    padding-left: 6px;
  }

  .modal.card-details-modal .details-top-actions button {
    min-height: 38px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: 9.5px;
  }

  .details-action-label-desktop {
    display: none;
  }

  .details-action-label-mobile {
    display: inline;
  }

  .modal.card-details-modal .details-more-wrap {
    position: static;
  }

  .modal.card-details-modal .details-more-menu {
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% + 6px);
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn {
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn span {
    margin: 0;
    font-size: 22px;
  }

  body.owner-mode .modal.card-details-modal .details-primary-actions #detailsEditBtn {
    min-width: 56px;
    padding: 0 8px;
  }

  .modal.card-details-modal #detailsMount {
    padding: 12px 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media(max-width:430px) {
  .modal.card-details-modal .details-top-actions {
    gap: 4px;
    padding: 6px;
  }

  .modal.card-details-modal .details-secondary-actions,
  .modal.card-details-modal .details-primary-actions {
    gap: 3px;
  }

  .modal.card-details-modal .details-primary-actions {
    padding-left: 4px;
  }

  .modal.card-details-modal .details-top-actions button {
    min-height: 36px;
    padding: 0 6px;
    font-size: 9px;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn {
    width: 39px;
    min-width: 39px;
    height: 36px;
  }

  body.owner-mode .modal.card-details-modal .details-primary-actions #detailsEditBtn {
    min-width: 50px;
    padding: 0 6px;
    font-size: 9px;
  }

  .modal.card-details-modal .details-more-menu {
    left: 6px;
    right: 6px;
    min-width: 0;
  }
}

@media(prefers-reduced-motion:reduce) {
  .modal.card-details-modal .details-top-actions button {
    transition: none !important;
  }
}


@media(max-width:800px) {
  .modal.card-details-modal .details-more-menu {
    box-sizing: border-box;
    overflow: visible;
  }

  .modal.card-details-modal .details-more-menu button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.25 !important;
    padding: 9px 11px !important;
  }
}


/* ---------- Phase 5: deterministic catalogue loading ---------- */
.catalogue-load-state {
  width: min(520px, 100%);
  min-height: 260px;
  margin: 8vh auto 0;
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
}

.catalogue-load-state strong {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

.catalogue-load-state span {
  max-width: 360px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}

.catalogue-load-state .btn-primary {
  margin-top: 7px;
}

.catalogue-load-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-teal);
  border-radius: 50%;
  animation: catalogueLoadSpin .8s linear infinite;
}

@keyframes catalogueLoadSpin {
  to {
    transform: rotate(360deg);
  }
}

.catalogue-load-error .empty-icon {
  color: #fca5a5;
  font: 800 24px 'JetBrains Mono', monospace;
}

@media(max-width:800px) {
  .catalogue-load-state {
    min-height: 220px;
    margin: 28px auto 0;
    padding: 28px 18px;
    border-radius: 12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .catalogue-load-spinner {
    animation: none;
    border-top-color: var(--border);
    background: var(--accent-teal);
  }
}


/* ---------- Mobile pull-to-refresh ---------- */
.pull-refresh-indicator {
  display: none;
}

@media(max-width:800px) {
  .pull-refresh-indicator {
    --pull-offset: 0px;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    z-index: 88;
    min-height: 38px;
    max-width: calc(100vw - 28px);
    padding: 7px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(33, 35, 43, .96);
    color: var(--text-muted);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, calc(-58px + var(--pull-offset)));
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  }

  .pull-refresh-indicator.is-pulling,
  .pull-refresh-indicator.is-refreshing {
    opacity: 1;
    visibility: visible;
  }

  .pull-refresh-indicator.is-ready {
    border-color: rgba(95, 212, 196, .45);
    color: var(--accent-teal);
  }

  .pull-refresh-indicator strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 800;
  }

  .pull-refresh-spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-teal);
    border-radius: 50%;
    transform: rotate(0deg);
  }

  .pull-refresh-indicator.is-pulling .pull-refresh-spinner {
    transform: rotate(calc(var(--pull-progress, 0) * 270deg));
    transition: transform .04s linear;
  }

  .pull-refresh-indicator.is-refreshing .pull-refresh-spinner {
    animation: pullRefreshSpin .7s linear infinite;
  }

  @keyframes pullRefreshSpin {
    to {
      transform: rotate(360deg);
    }
  }
}

@media(max-width:800px) and (prefers-reduced-motion:reduce) {
  .pull-refresh-indicator {
    transition: none !important;
  }

  .pull-refresh-indicator.is-refreshing .pull-refresh-spinner {
    animation: none !important;
    border-top-color: var(--border);
    background: var(--accent-teal);
  }
}


/* ---------- Facebook Giveaway Post Generator ---------- */
.fb-giveaway-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fb-giveaway-link-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 10px 0 12px;
}

.fb-giveaway-link-row {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.35fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg);
}

.fb-giveaway-link-row .field {
  margin-bottom: 0;
}

.fb-giveaway-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 9.5px;
  line-height: 1.4;
}

.fb-giveaway-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--accent-teal);
}

.fb-giveaway-template-note {
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(95, 212, 196, .18);
  border-radius: 9px;
  background: rgba(95, 212, 196, .04);
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

.fb-giveaway-output {
  min-height: 840px;
}

@media(max-width:1100px) {
  .fb-tools-switcher {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  .fb-tools-switch {
    padding: 9px;
    gap: 8px;
  }

  .fb-tools-switch small {
    font-size: 8px;
  }
}

@media(max-width:700px) {

  .fb-giveaway-two-col,
  .fb-giveaway-link-row {
    grid-template-columns: 1fr;
  }

  .fb-giveaway-link-row {
    gap: 4px;
  }

  .fb-giveaway-output {
    min-height: 680px;
  }
}



#addForm button[type="submit"][aria-busy="true"] {
  opacity: .72;
  cursor: wait;
}


/* ---------- Owner card pricing: MYR base + automatic FX ---------- */
.field-required-note {
  color: var(--accent-gold);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.field-required-note.is-optional {
  color: var(--text-muted);
}

.fx-auto-rate {
  margin: -3px 0 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(95, 212, 196, .20);
  border-radius: 9px;
  background: rgba(95, 212, 196, .045);
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.4;
}

.fx-auto-rate:not(.fx-rate-error) span {
  color: var(--accent-teal);
}

.fx-auto-rate.fx-rate-error {
  border-color: rgba(227, 179, 65, .24);
  background: rgba(227, 179, 65, .045);
}

.fx-refresh-rate-btn {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 8px;
}

#addPriceUSD[data-fx-auto="1"],
#addPriceSGD[data-fx-auto="1"],
#editPriceUSD[data-fx-auto="1"],
#editPriceSGD[data-fx-auto="1"] {
  border-color: rgba(95, 212, 196, .30);
  background: rgba(95, 212, 196, .035);
}

@media(max-width:700px) {
  .fx-auto-rate {
    align-items: flex-start;
    flex-direction: column;
  }

  .fx-refresh-rate-btn {
    width: 100%;
    justify-content: center;
  }
}


.bulk-price-fx-refresh {
  min-height: 36px;
  align-self: end;
  white-space: nowrap;
}

.bulk-price-fx-status {
  margin: -4px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(95, 212, 196, .18);
  border-radius: 9px;
  background: rgba(95, 212, 196, .04);
  color: var(--text-muted);
  font-size: 8.6px;
  line-height: 1.45;
}

@media(max-width:700px) {
  .bulk-price-fx-refresh {
    width: 100%;
    justify-content: center;
  }
}


#addPriceNegotiability,
#editPriceNegotiability {
  max-width: 320px;
}

@media(max-width:700px) {

  #addPriceNegotiability,
  #editPriceNegotiability {
    max-width: none;
    width: 100%;
  }
}


/* ---------- Card overview readability ---------- */
/* Slightly larger card code + year, with a more noticeable increase for pills. */
.grid .card .clean-card-reference,
.home-recent-grid .card .clean-card-reference {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

.grid .card .clean-all-pills .clean-grade-badge,
.home-recent-grid .card .clean-all-pills .clean-grade-badge {
  font-size: 12px !important;
  padding: 5px 9px !important;
  line-height: 1.05 !important;
}

.grid .card .clean-all-pills .clean-meta-pill,
.home-recent-grid .card .clean-all-pills .clean-meta-pill {
  font-size: 11.25px !important;
  padding: 5px 8px !important;
  line-height: 1.05 !important;
}

@media(max-width:800px) {

  .grid .card .clean-card-reference,
  .home-recent-grid .card .clean-card-reference {
    font-size: 10px !important;
  }

  .grid .card .clean-all-pills .clean-grade-badge,
  .home-recent-grid .card .clean-all-pills .clean-grade-badge {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  .grid .card .clean-all-pills .clean-meta-pill,
  .home-recent-grid .card .clean-all-pills .clean-meta-pill {
    font-size: 10.5px !important;
    padding: 5px 7px !important;
  }
}

@media(max-width:390px) {

  .grid .card .clean-card-reference,
  .home-recent-grid .card .clean-card-reference {
    font-size: 9.5px !important;
  }

  .grid .card .clean-all-pills .clean-grade-badge,
  .home-recent-grid .card .clean-all-pills .clean-grade-badge {
    font-size: 10.5px !important;
    padding: 4.5px 7px !important;
  }

  .grid .card .clean-all-pills .clean-meta-pill,
  .home-recent-grid .card .clean-all-pills .clean-meta-pill {
    font-size: 10px !important;
    padding: 4.5px 6.5px !important;
  }
}


.fb-card-list-terms-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(95, 212, 196, .18);
  border-radius: 9px;
  background: rgba(95, 212, 196, .04);
  color: var(--text-muted);
  font-size: 8.6px;
  line-height: 1.45;
}

.fb-card-list-terms-note strong {
  color: var(--accent-teal);
}


#addCondition:disabled,
#editCondition:disabled {
  opacity: .78;
  cursor: not-allowed;
  border-color: rgba(95, 212, 196, .24);
  background: rgba(95, 212, 196, .035);
}


/* ---------- Insights chart spacing ---------- */
.insights-chart {
  display: flex !important;
  align-items: flex-end !important;
  gap: 18px !important;
  min-height: 210px !important;
  overflow-x: auto !important;
  padding: 12px 4px 6px !important;
}

.insights-bar-wrap {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.insights-bar {
  width: 24px !important;
  max-width: 24px !important;
  min-width: 24px !important;
  min-height: 2px !important;
  border-radius: 6px 6px 2px 2px !important;
}

.insights-bar-site {
  background: var(--accent-teal) !important;
}

.insights-bar-label {
  transform: none !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  text-align: center !important;
}

@media(max-width:560px) {
  .insights-chart {
    gap: 12px !important;
  }

  .insights-bar-wrap {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
  }

  .insights-bar {
    width: 20px !important;
    max-width: 20px !important;
    min-width: 20px !important;
  }

  .insights-bar-label {
    font-size: 9px !important;
  }
}


.fb-giveaway-condition-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(95, 212, 196, .18);
  border-radius: 10px;
  background: rgba(95, 212, 196, .035);
}

.fb-giveaway-condition-card strong {
  color: var(--accent-teal);
  font-size: 10px;
}

.fb-giveaway-condition-card span {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}

.fb-giveaway-builder .hint a {
  color: var(--accent-teal);
  text-decoration: none;
  font-weight: 700;
}

.fb-giveaway-builder .hint a:hover {
  text-decoration: underline;
}


.carousell-template-links {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.carousell-template-links>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 9px;
}

.carousell-template-links strong {
  color: var(--accent-teal);
}

.carousell-template-links span {
  color: var(--text-muted);
  overflow-wrap: anywhere;
  text-align: right;
}

.carousell-post-output {
  min-height: 720px !important;
}

@media(max-width:700px) {
  .carousell-template-links>div {
    flex-direction: column;
  }

  .carousell-template-links span {
    text-align: left;
  }

  .carousell-post-output {
    min-height: 620px !important;
  }
}


/* Keep Card Views and Website Visits on the exact same x-axis geometry. */
.insights-time-chart {
  --insights-slot-width: 46px;
  --insights-slot-gap: 18px;
  align-items: flex-end !important;
  gap: var(--insights-slot-gap) !important;
}

.insights-time-chart .insights-bar-wrap {
  flex: 0 0 var(--insights-slot-width) !important;
  width: var(--insights-slot-width) !important;
  min-width: var(--insights-slot-width) !important;
}

@media(max-width:560px) {
  .insights-time-chart {
    --insights-slot-width: 40px;
    --insights-slot-gap: 12px;
  }
}


.shop-logo-fallback {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent-teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.shop-logo-fallback[hidden] {
  display: none !important;
}


.storage-migration-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.storage-migration-stats>div {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.storage-migration-stats strong {
  font-size: 18px;
}

.storage-migration-stats span {
  font-size: 9px;
  color: var(--text-muted);
}

.storage-migration-panel {
  max-width: 920px;
}

.storage-migration-warning {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(95, 212, 196, .20);
  border-radius: 10px;
  background: rgba(95, 212, 196, .04);
  margin-bottom: 16px;
}

.storage-migration-warning strong {
  color: var(--accent-teal);
}

.storage-migration-warning span {
  font-size: 9px;
  line-height: 1.6;
  color: var(--text-muted);
}

.storage-migration-progress {
  margin: 14px 0;
}

.storage-migration-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
  margin-bottom: 7px;
}

.storage-migration-progress progress {
  display: block;
  width: 100%;
  height: 10px;
  accent-color: var(--accent-teal);
}

.storage-migration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.storage-migration-result {
  font-size: 9px;
  line-height: 1.6;
  color: var(--text-muted);
}

.storage-migration-notes {
  max-width: 920px;
  margin-top: 12px;
}

.storage-migration-notes p {
  font-size: 9px;
  line-height: 1.65;
  color: var(--text-muted);
}

@media(max-width:700px) {
  .storage-migration-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storage-migration-progress-head {
    flex-direction: column;
  }
}


.storage-migration-preflight {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 9px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.storage-migration-preflight.ok {
  border-color: rgba(95, 212, 196, .30);
  background: rgba(95, 212, 196, .05);
  color: var(--accent-teal);
}

.storage-migration-preflight.error {
  border-color: rgba(239, 68, 68, .30);
  background: rgba(239, 68, 68, .05);
  color: #ef7b7b;
}



/* ---------- High-value direct-contact notice ---------- */
.high-value-contact-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(227, 179, 65, .42);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(227, 179, 65, .10), rgba(95, 212, 196, .045));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.high-value-contact-alert strong {
  grid-column: 1;
  color: var(--accent-gold);
  font-size: 10.5px;
  letter-spacing: .15px;
}

.high-value-contact-alert span {
  grid-column: 1;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

.high-value-contact-btn {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(227, 179, 65, .45);
  border-radius: 8px;
  background: rgba(227, 179, 65, .10);
  color: var(--accent-gold);
  font-size: 8.5px;
  font-weight: 800;
  cursor: pointer;
}

.high-value-contact-btn:hover {
  background: rgba(227, 179, 65, .17);
  border-color: var(--accent-gold);
}

.high-value-contact-alert.compact {
  display: block;
  margin: 7px 0;
  padding: 8px 9px;
}

.high-value-contact-alert.compact strong,
.high-value-contact-alert.compact span {
  display: block;
}

.high-value-contact-alert.compact span {
  margin-top: 3px;
  font-size: 7.5px;
}

.high-value-contact-alert.compact .high-value-contact-btn {
  margin-top: 7px;
  min-height: 29px;
  font-size: 7.5px;
}

/* ---------- Catalogue audit ---------- */
.catalogue-audit-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.catalogue-audit-summary button {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.catalogue-audit-summary strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
}

.catalogue-audit-summary span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
}

.catalogue-audit-panel {
  padding: 13px;
}

.catalogue-audit-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.catalogue-audit-toolbar input {
  flex: 1;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.catalogue-audit-toolbar span {
  color: var(--text-muted);
  font-size: 8.5px;
  white-space: nowrap;
}

.catalogue-audit-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.catalogue-audit-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.catalogue-audit-thumb {
  width: 48px;
  height: 60px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 7px;
}

.catalogue-audit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalogue-audit-copy {
  min-width: 0;
}

.catalogue-audit-copy strong,
.catalogue-audit-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalogue-audit-copy strong {
  font-size: 10px;
}

.catalogue-audit-copy small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.catalogue-audit-copy>div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.catalogue-audit-chip {
  padding: 3px 5px;
  border: 1px solid rgba(227, 179, 65, .22);
  border-radius: 999px;
  color: var(--accent-gold);
  background: rgba(227, 179, 65, .05);
  font-size: 7px;
  font-weight: 700;
}

.catalogue-audit-chip.critical {
  border-color: rgba(232, 96, 122, .3);
  background: rgba(232, 96, 122, .06);
  color: var(--danger);
}

/* ---------- Image reprocessor ---------- */
.image-reprocess-warning {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(227, 179, 65, .32);
  border-radius: 10px;
  background: rgba(227, 179, 65, .05);
}

.image-reprocess-warning strong {
  flex: 0 0 auto;
  color: var(--accent-gold);
  font-size: 9px;
}

.image-reprocess-warning span {
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.5;
}

.image-reprocess-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .5fr);
  gap: 12px;
  align-items: start;
}

.image-reprocess-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.image-reprocess-toolbar span {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 8px;
}

.image-reprocess-list {
  max-height: 620px;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.image-reprocess-row {
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}

.image-reprocess-thumb {
  width: 46px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-reprocess-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-reprocess-row strong,
.image-reprocess-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-reprocess-row strong {
  font-size: 9.5px;
}

.image-reprocess-row small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
}

.image-reprocess-action {
  padding: 14px;
  position: sticky;
  top: 14px;
}

.image-reprocess-action h3 {
  font-size: 18px;
}

.image-reprocess-action p {
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.5;
}

@media(max-width:900px) {
  .catalogue-audit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-reprocess-layout {
    grid-template-columns: 1fr
  }

  .image-reprocess-action {
    position: static
  }

  .high-value-contact-alert {
    grid-template-columns: 1fr
  }

  .high-value-contact-btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start
  }

  .catalogue-audit-row {
    grid-template-columns: 42px minmax(0, 1fr)
  }

  .catalogue-audit-row>.btn-ghost {
    grid-column: 1/-1
  }

  .catalogue-audit-thumb {
    width: 42px;
    height: 54px
  }
}



/* ==========================================================
     Desktop top navigation
     PC/tablet landscape only. Mobile keeps the existing layout.
     ========================================================== */
@media (min-width:801px) {
  .shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
    width: 100%;
  }

  .sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: 88px;
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0;
    z-index: 90;
    padding: 10px 22px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
    background: rgba(14, 15, 18, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .20);
  }

  body.light-mode .sidebar {
    background: rgba(247, 248, 250, .96);
  }

  .sidebar>div:first-child {
    min-width: max-content;
  }

  .sidebar .shop-brand {
    gap: 10px;
    padding: 0;
  }

  .sidebar .logo-click-target,
  .sidebar .logo-click-target .shop-logo {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
  }

  .sidebar .shop-brand-text h1 {
    font-size: 18px;
  }

  .sidebar .shop-region {
    font-size: 13px;
    margin-top: 3px;
  }

  nav.mainnav {
    position: relative;
    min-width: 0;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 3px !important;
    overflow: visible !important;
    padding: 3px 2px 5px;
    white-space: nowrap;
  }

  nav.mainnav>a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 10px !important;
    border-radius: 8px;
    font-size: 11.5px !important;
    gap: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  nav.mainnav>a .ic {
    width: auto !important;
    min-width: 13px;
    font-size: 11px;
  }

  nav.mainnav>a.active {
    background: var(--surface) !important;
    color: var(--text) !important;
  }

  nav.mainnav>a.active::before {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 2px !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--foil) !important;
  }

  nav.mainnav .nav-count {
    margin-left: 1px;
    min-width: 18px;
    padding: 2px 5px;
    font-size: 8px;
  }

  /* Desktop keeps only the core destinations visible. Everything else lives under More. */
  nav.mainnav>a[data-route="by-game"],
  nav.mainnav>a[data-route="showcase"],
  nav.mainnav>a[data-route="favorites"],
  nav.mainnav>a[data-route="giveaway"],
  nav.mainnav>a[data-route="insights"],
  nav.mainnav>a[data-route="fb-tools"],
  nav.mainnav>a[data-route="quality"],
  nav.mainnav>a[data-route="inventory-tools"],
  nav.mainnav>a[data-route="export"],
  nav.mainnav>a[data-route="add"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"],
  nav.mainnav>.mobile-secondary-nav {
    display: none !important;
  }

  nav.mainnav>.mobile-more-toggle {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }

  nav.mainnav>.mobile-more-toggle:hover,
  nav.mainnav>.mobile-more-toggle:focus-visible,
  nav.mainnav>.mobile-more-toggle.open,
  nav.mainnav>.mobile-more-toggle.active {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
    outline: none;
  }

  nav.mainnav>.mobile-more-menu {
    position: absolute !important;
    z-index: 140;
    top: calc(100% + 8px);
    right: 0;
    width: min(430px, calc(100vw - 44px)) !important;
    max-height: min(520px, calc(100vh - 120px));
    overflow-y: auto;
    padding: 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38) !important;
  }

  nav.mainnav>.mobile-more-menu:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  nav.mainnav>.mobile-more-menu a {
    min-height: 40px;
    padding: 8px 10px;
    display: flex !important;
    align-items: center;
    gap: 7px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 11px;
    white-space: normal;
  }

  nav.mainnav>.mobile-more-menu a:hover,
  nav.mainnav>.mobile-more-menu a.active {
    color: var(--text);
    background: var(--surface);
  }

  nav.mainnav>.mobile-more-menu .desktop-more-owner {
    display: none !important;
  }

  body.owner-mode nav.mainnav>.mobile-more-menu .desktop-more-owner {
    display: flex !important;
  }

  .sidebar-footer {
    margin: 0 !important;
    min-width: max-content;
    padding: 0 0 0 14px !important;
    border-top: 0 !important;
    border-left: 1px solid var(--border);
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 3px 9px;
    line-height: 1.3;
    font-size: 9px;
  }

  .sidebar-footer>div:nth-child(2) {
    display: none;
  }

  .sidebar-footer .owner-status {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 7.5px;
  }

  .sidebar-footer .theme-toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    min-width: 88px;
    margin: 0 !important;
    padding: 7px 9px;
    font-size: 9px;
    white-space: nowrap;
  }

  .main {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0;
    padding: 28px clamp(24px, 3vw, 54px) 64px !important;
  }
}

@media (min-width:801px) and (max-width:1120px) {
  .sidebar {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 9px 16px !important;
  }

  .sidebar-footer {
    display: none !important;
  }

  nav.mainnav>a {
    padding: 8px 8px !important;
    font-size: 10.5px !important;
  }

  nav.mainnav>.mobile-more-toggle {
    padding: 8px 9px !important;
    font-size: 10.5px !important;
  }
}



/* ==========================================================
   Desktop top-navigation full-width content fix
   Keep this LAST so the old sidebar layout cannot reserve 250px.
   ========================================================== */
@media (min-width:801px) {
  .shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100vh !important;
  }

  .sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: clamp(18px, 2.25vw, 38px) !important;
    padding-right: clamp(18px, 2.25vw, 38px) !important;
  }
}


/* Desktop navigation arrangement v2 */
@media (min-width:801px) {
  nav.mainnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  nav.mainnav>a[data-route="home"] {
    order: 1 !important;
  }

  nav.mainnav>a[data-route="inventory"] {
    order: 2 !important;
  }

  nav.mainnav>a[data-route="reserved"] {
    order: 3 !important;
  }

  nav.mainnav>a[data-route="sold"] {
    order: 4 !important;
  }

  nav.mainnav>a[data-route="collection"] {
    order: 5 !important;
  }

  nav.mainnav>a[data-route="showcase"] {
    order: 6 !important;
  }

  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav {
    display: flex !important;
    order: 7 !important;
  }

  nav.mainnav>a[data-route="giveaway"].mobile-secondary-nav {
    display: flex !important;
    order: 8 !important;
  }

  nav.mainnav>.mobile-more-toggle {
    order: 20 !important;
  }

  nav.mainnav>.mobile-more-menu {
    order: 21 !important;
  }

  nav.mainnav>a.owner-only:not(.mobile-secondary-nav) {
    display: none !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="collection"],
  nav.mainnav>.mobile-more-menu>a[data-route="favorites"],
  nav.mainnav>.mobile-more-menu>a[data-route="giveaway"],
  nav.mainnav>.mobile-more-menu>a[data-route="showcase"] {
    display: none !important;
  }

  nav.mainnav>a,
  nav.mainnav>.mobile-more-toggle {
    flex: 0 0 auto !important;
  }
}

@media (min-width:801px) and (max-width:1050px) {

  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav,
  nav.mainnav>a[data-route="giveaway"].mobile-secondary-nav {
    display: none !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="favorites"],
  nav.mainnav>.mobile-more-menu>a[data-route="giveaway"] {
    display: flex !important;
  }
}

/* ==========================================================
     UX enhancement pass
     ========================================================== */

/* Result count + quick return links */
.inventory-toolbar-context {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.inventory-result-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.inventory-result-count strong {
  color: var(--text);
  font-size: 11px;
}

.inventory-recent-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-teal);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.inventory-recent-link:hover {
  border-color: var(--accent-teal);
}

/* Active filters: all controls, not only card-pill filters */
.pill-filter-summary {
  margin-top: 8px !important;
  margin-bottom: 14px !important;
}

.pill-filter-summary .active-pill-filter {
  max-width: min(100%, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile filter sheet: sticky controls + sticky Apply footer */
.filter-drawer-footer {
  display: none;
}

@media(max-width:800px) {
  .filter-drawer-shell {
    display: flex !important;
    flex-direction: column !important;
  }

  .filter-drawer-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    flex: 0 0 auto;
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
  }

  .filter-drawer-shell>.filter-row,
  .filter-drawer-shell>.grade-shortcuts {
    flex: 0 0 auto;
  }

  .filter-drawer-footer {
    position: sticky;
    bottom: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(18, 19, 23, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .24);
  }

  .filter-drawer-footer-copy {
    min-width: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
  }

  .filter-drawer-footer-copy strong {
    display: block;
    color: var(--text);
    font-size: 13px;
  }

  .filter-drawer-apply {
    min-width: 92px;
    min-height: 42px;
    padding: 9px 14px;
  }

  .inventory-toolbar-context {
    display: none;
  }

  /* Reduce listing-card clutter on phones while keeping core buying info. */
  .grid .clean-notes,
  #homeRecentGrid .clean-notes {
    display: none !important;
  }

  .grid .clean-era-pill,
  .grid .clean-series-pill,
  #homeRecentGrid .clean-era-pill,
  #homeRecentGrid .clean-series-pill {
    display: none !important;
  }

  /* Clear active-state indicator on the mobile primary navigation. */
  nav.mainnav>a.active {
    box-shadow: inset 0 -3px 0 var(--accent-teal) !important;
  }
}

/* Detail information hierarchy */
.detail-summary-strip {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 9px;
  margin-bottom: 14px;
}

.detail-summary-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.detail-summary-card span,
.detail-info-section-title {
  display: block;
  color: var(--text-muted);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.detail-summary-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.detail-summary-price .detail-price-primary {
  margin-top: 4px;
}

.detail-info-section-title {
  margin: 4px 0 8px;
}

@media(max-width:700px) {
  .detail-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .detail-summary-price {
    grid-column: 1 / -1;
  }

  .detail-summary-card {
    padding: 9px 10px;
  }
}

/* Skeleton loading */
.inventory-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.inventory-skeleton-card {
  min-height: 330px;
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  background: var(--surface);
}

.inventory-skeleton-image,
.inventory-skeleton-line {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}

.inventory-skeleton-image {
  height: 230px;
}

.inventory-skeleton-body {
  padding: 13px;
}

.inventory-skeleton-line {
  height: 11px;
  margin: 8px 0;
  border-radius: 999px;
}

.inventory-skeleton-line.short {
  width: 52%;
}

.inventory-skeleton-line.medium {
  width: 74%;
}

.inventory-skeleton-image::after,
.inventory-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: inventorySkeletonSweep 1.25s infinite;
}

@keyframes inventorySkeletonSweep {
  to {
    transform: translateX(100%);
  }
}

@media(max-width:800px) {
  .inventory-skeleton-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .inventory-skeleton-card {
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(112px, 36%) 1fr;
  }

  .inventory-skeleton-image {
    height: 100%;
    min-height: 210px;
  }

  .inventory-skeleton-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Image-loading polish */
.thumb,
.detail-slider-image,
.detail-thumb-strip-btn img,
.image-lightbox img {
  transition: opacity .22s ease, transform .22s ease;
}

.detail-slider-image.is-switching {
  opacity: .42;
}

.detail-thumb-strip-btn img {
  opacity: .92;
}

.detail-thumb-strip-btn.active img {
  opacity: 1;
}

/* One-time favorites discovery hint */
.favorite-discovery-hint {
  position: fixed;
  z-index: 1200;
  max-width: 210px;
  padding: 9px 11px;
  border: 1px solid rgba(227, 179, 65, .45);
  border-radius: 10px;
  background: rgba(19, 20, 24, .97);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42);
  font-size: 10px;
  line-height: 1.4;
  pointer-events: none;
}

.favorite-discovery-hint strong {
  color: var(--accent-gold);
}

/* Compact high-value badge */
.high-value-contact-alert.compact {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  margin: 7px 0 2px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.high-value-contact-alert.compact strong {
  font-size: 8.5px !important;
  line-height: 1.2;
  white-space: normal;
}


/* ==========================================================
     Mobile UX refinement: persistent search + compact filters
     ========================================================== */
.mobile-inventory-search {
  display: none;
}

@media(max-width:800px) {

  /* Search is a primary browsing action, so expose it without opening Filters. */
  .mobile-inventory-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 12px;
  }

  .mobile-inventory-search input {
    width: 100%;
    min-height: 48px;
    padding: 10px 42px 10px 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: 500 13px/1.2 'Inter', sans-serif;
    outline: none;
  }

  .mobile-inventory-search input:focus {
    border-color: rgba(95, 212, 196, .72);
    box-shadow: 0 0 0 2px rgba(95, 212, 196, .08);
  }

  .mobile-inventory-search-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    color: var(--text-muted);
    font-size: 20px;
    pointer-events: none;
  }

  .mobile-inventory-search-clear {
    position: absolute;
    right: 8px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
  }

  .mobile-search-suggestions {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 850 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    border-radius: 11px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .46) !important;
  }

  /* Search remains in the filter drawer for desktop only; hide duplicate on mobile. */
  .filter-drawer-shell .filter-row>.inventory-search-wrap {
    display: none !important;
  }

  /* Let the sheet size to its controls instead of creating a large empty block. */
  .filter-drawer-shell {
    height: auto !important;
    max-height: min(82dvh, 720px) !important;
    padding-bottom: 0 !important;
  }

  /* Compact filter header: one clean row. Apply is already at the bottom. */
  .filter-drawer-head {
    min-height: 54px !important;
    margin: -14px -12px 10px !important;
    padding: 10px 12px !important;
    align-items: center !important;
    background: var(--surface-2) !important;
  }

  .filter-drawer-head>div:first-child {
    display: flex !important;
    align-items: center !important;
  }

  .filter-drawer-head>div:first-child span {
    display: none !important;
  }

  .filter-drawer-head strong {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .filter-drawer-head>div:last-child {
    margin-left: auto;
    gap: 4px !important;
  }

  .filter-drawer-head .clear-all-filters-btn {
    min-height: 34px !important;
    padding: 6px 9px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 9.5px !important;
  }

  .filter-drawer-head .mobile-filter-close-btn {
    display: none !important;
  }

  /* Footer is the single completion action and should follow content directly. */
  .filter-drawer-footer {
    margin: 12px -12px 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .filter-drawer-footer-copy {
    font-size: 9px !important;
  }

  .filter-drawer-footer-copy strong {
    font-size: 12px !important;
  }

  .filter-drawer-apply {
    min-width: 88px !important;
    min-height: 40px !important;
  }

  /* Long listing names must own their real height. Never let text paint over year/code. */
  #invGrid .card .clean-card-body,
  #homeRecentGrid .card .clean-card-body {
    justify-content: flex-start !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #invGrid .clean-card-title-row,
  #homeRecentGrid .clean-card-title-row {
    align-items: flex-start !important;
  }

  #invGrid .clean-card-name,
  #homeRecentGrid .clean-card-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.24 !important;
    max-height: calc(1.24em * 4) !important;
    min-height: 0 !important;
  }

  #invGrid .clean-card-reference,
  #homeRecentGrid .clean-card-reference {
    position: relative !important;
    z-index: 1;
    margin-top: 2px !important;
    flex: 0 0 auto !important;
  }

  /* Show a richer metadata set on mobile. Keep pills compact and allow two tidy rows. */
  #invGrid .clean-era-pill,
  #invGrid .clean-series-pill,
  #homeRecentGrid .clean-era-pill,
  #homeRecentGrid .clean-series-pill {
    display: inline-flex !important;
  }

  #invGrid .clean-all-pills,
  #homeRecentGrid .clean-all-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    max-height: 68px;
    overflow: hidden;
    align-content: flex-start;
  }

  #invGrid .clean-all-pills .clean-grade-badge,
  #invGrid .clean-all-pills .clean-meta-pill,
  #homeRecentGrid .clean-all-pills .clean-grade-badge,
  #homeRecentGrid .clean-all-pills .clean-meta-pill {
    font-size: 9.5px !important;
    padding: 4px 7px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #invGrid .clean-series-pill,
  #homeRecentGrid .clean-series-pill {
    max-width: 130px !important;
  }
}




/* ==========================================================
     FINAL OWNER SECURITY / VISIBILITY GUARD
     Keep this block last so responsive navigation rules cannot
     accidentally reveal owner-only controls.
     ========================================================== */

/* Respect the HTML hidden attribute everywhere, regardless of component CSS. */
[hidden] {
  display: none !important;
}

/* Fail closed for every owner-only element when owner verification is absent. */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) nav.mainnav .owner-only,
body:not(.owner-mode) nav.mainnav>.mobile-more-menu>a.owner-only,
body:not(.owner-mode) nav.mainnav>a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) #detailsEditBtn,
body:not(.owner-mode) #detailsCloneBtn,
body:not(.owner-mode) #detailsDeleteBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Only a verified owner session may reveal owner navigation. */
body.owner-mode nav.mainnav>.mobile-more-menu>a.owner-only:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media(min-width:801px) {

  /* Desktop owner links belong in More; don't leak them into the main row. */
  body:not(.owner-mode) nav.mainnav .desktop-more-owner {
    display: none !important;
  }

  body.owner-mode nav.mainnav>.mobile-more-menu>a.desktop-more-owner:not([hidden]) {
    display: flex !important;
  }
}

@media(max-width:800px) {

  /* Mobile More menu had a generic "all links = flex" rule. Owner rules win here. */
  body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
  body:not(.owner-mode) #mobileMoreMenu>a.desktop-more-owner {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.owner-mode #mobileMoreMenu>a.owner-only:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* Five UX upgrades + share preview */
.listing-card-gallery {
  touch-action: pan-y;
}

.listing-card-gallery .thumb {
  transition: opacity .18s ease;
}

.listing-card-gallery .thumb.listing-image-switching {
  opacity: .38;
}

.listing-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 30px;
  height: 42px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(8, 9, 12, .72);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}

.listing-gallery-arrow-prev {
  left: 6px;
}

.listing-gallery-arrow-next {
  right: 6px;
}

.listing-card-gallery:hover .listing-gallery-arrow {
  opacity: .92;
}

.listing-gallery-arrow:hover {
  background: rgba(8, 9, 12, .94);
}

.listing-gallery-counter {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 8;
  transform: translateX(-50%);
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(8, 9, 12, .72);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  pointer-events: none;
}

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

.global-currency-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 4px 5px 4px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 8px;
}

.global-currency-control select {
  min-height: 29px;
  padding: 4px 24px 4px 7px;
  border: 0;
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 9px;
}

.detail-currency-control {
  flex: 0 0 auto;
}

.home-storefront-section {
  margin-top: 24px;
}

.home-storefront-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pwa-install-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 890;
  width: min(470px, calc(100vw - 28px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(95, 212, 196, .30);
  border-radius: 12px;
  background: rgba(18, 20, 25, .97);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pwa-install-banner[hidden] {
  display: none !important;
}

.pwa-install-copy strong {
  display: block;
  font-size: 10px;
}

.pwa-install-copy span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.3;
}

.pwa-install-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

@media(max-width:800px) {
  .listing-gallery-arrow {
    width: 28px;
    height: 38px;
    opacity: .82;
  }

  .listing-gallery-counter {
    left: auto;
    right: 6px;
    transform: none;
    opacity: .94;
  }

  .related-cards-grid {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 7px;
  }

  .related-cards-grid>* {
    flex: 0 0 min(76vw, 300px);
    scroll-snap-align: start;
  }

  .detail-header {
    flex-wrap: wrap;
  }

  .detail-currency-control {
    width: auto;
    margin-left: 0;
  }

  .home-storefront-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 7px;
  }

  .home-storefront-grid>.card {
    flex: 0 0 min(82vw, 360px);
    scroll-snap-align: start;
  }

  .pwa-install-banner {
    bottom: 88px;
  }
}

@media(min-width:801px) and (max-width:1250px) {
  .home-storefront-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* Security layer stays last: responsive CSS must not reveal owner UI. */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ---------- Giveaway current / past winners ---------- */
.giveaway-page-section {
  margin-top: 22px;
}

.giveaway-page-section:first-of-type {
  margin-top: 8px;
}

.giveaway-page-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.giveaway-page-section-head h3 {
  font-size: 22px;
}

.giveaway-page-section-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.giveaway-section-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 8.5px;
  font-weight: 700;
}

.giveaway-winner-card {
  position: relative;
}

.giveaway-winner-card::before {
  content: "Winner";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(227, 179, 65, .94);
  color: #17130a;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.giveaway-winner-name {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(227, 179, 65, .22);
  border-radius: 10px;
  background: rgba(227, 179, 65, .055);
}

.giveaway-winner-name span {
  display: block;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.giveaway-winner-name strong {
  display: block;
  margin-top: 4px;
  color: var(--accent-gold);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.giveaway-winner-date {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 8.5px;
}

.giveaway-mark-winner {
  color: var(--accent-gold) !important;
  border-color: rgba(227, 179, 65, .28) !important;
}

.giveaway-empty-section {
  padding: 28px 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  text-align: center;
  font-size: 10px;
  line-height: 1.5;
}

@media(max-width:700px) {
  .giveaway-page-section-head {
    align-items: flex-start;
  }

  .giveaway-page-section-head h3 {
    font-size: 19px;
  }

  .giveaway-grid {
    grid-template-columns: 1fr;
  }
}


/* FINAL giveaway owner visibility guard */
body:not(.owner-mode) .giveaway-owner-actions,
body:not(.owner-mode) [data-giveaway-mark-winner],
body:not(.owner-mode) #addGiveawayBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* FINAL owner visibility guard — PWA update pass */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================================
     Mobile filter dropdown fix
     Use normal in-flow pull-down menus. Opening a filter expands
     the drawer content naturally instead of floating over the
     sticky Apply bar or neighboring controls.
     ========================================================== */
@media(max-width:800px) {
  .filter-drawer-shell {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scroll-padding-bottom: 92px !important;
    -webkit-overflow-scrolling: touch;
  }

  .filter-drawer-shell .filter-row {
    align-items: start !important;
  }

  .filter-drawer-shell .overview-select {
    position: relative !important;
    align-self: start !important;
    z-index: 1 !important;
    min-height: 0 !important;
  }

  .filter-drawer-shell .overview-select.menu-open {
    z-index: 2 !important;
  }

  /* Normal pull-down: menu participates in the drawer flow. */
  .filter-drawer-shell .overview-select-menu {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 230px !important;
    margin: 6px 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30) !important;
  }

  /* Keep the neighboring filter pinned to the top of the row
       when the other dropdown grows taller. */
  .filter-drawer-shell .filter-row>.overview-select {
    align-self: start !important;
  }

  /* The footer remains available, but no longer covers an open menu. */
  .filter-drawer-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 8 !important;
    margin-top: 12px !important;
  }

  .filter-drawer-shell .grade-shortcuts {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* FINAL owner visibility guard — keep security fail-closed */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================================
     Mobile filter sheet: top-aligned full-height presentation
     ========================================================== */
@media(max-width:800px) {
  .filter-drawer-shell {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding:
      calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(0, 100%, 0);
    background: var(--bg) !important;
  }

  .filter-drawer-shell.open {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Header starts at the top of the screen and stays compact. */
  .filter-drawer-head {
    top: calc(-10px - env(safe-area-inset-top)) !important;
    margin:
      calc(-10px - env(safe-area-inset-top)) -12px 12px !important;
    padding:
      calc(12px + env(safe-area-inset-top)) 14px 10px !important;
    min-height: calc(54px + env(safe-area-inset-top)) !important;
    border-radius: 0 !important;
    background: rgba(22, 24, 30, .98) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  }

  .filter-drawer-head>div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Clear All now matches the rounded-pill language used elsewhere. */
  .filter-drawer-head .clear-all-filters-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(95, 212, 196, .30) !important;
    border-radius: 999px !important;
    background: rgba(95, 212, 196, .06) !important;
    color: var(--accent-teal) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1px !important;
    box-shadow: none !important;
  }

  .filter-drawer-head .clear-all-filters-btn:hover,
  .filter-drawer-head .clear-all-filters-btn:focus-visible {
    border-color: var(--accent-teal) !important;
    background: rgba(95, 212, 196, .11) !important;
    color: var(--accent-teal) !important;
  }

  /* Keep Apply anchored to the bottom of the full-height filter sheet. */
  .filter-drawer-footer {
    position: sticky !important;
    bottom: calc(-10px - env(safe-area-inset-bottom)) !important;
    margin:
      14px -12px calc(-10px - env(safe-area-inset-bottom)) !important;
    padding:
      10px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(17, 18, 22, .98) !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .20);
  }

  .filter-drawer-apply {
    border-radius: 12px !important;
  }
}

/* Security remains fail-closed after responsive overrides. */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================================
     Owner image watermark controls
     ========================================================== */
.image-watermark-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.image-watermark-copy {
  min-width: 0;
}

.image-watermark-copy strong {
  display: block;
  font-size: 10px;
  color: var(--text);
}

.image-watermark-copy span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.35;
}

.image-watermark-choice {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
}

.image-watermark-option {
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.image-watermark-option.active {
  background: rgba(95, 212, 196, .10);
  color: var(--accent-teal);
  box-shadow: inset 0 0 0 1px rgba(95, 212, 196, .30);
}

.image-preview-watermark-actions {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(10, 11, 14, .86);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.image-watermark-state {
  flex: 1 1 100%;
  color: var(--text-muted);
  font-size: 6.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.image-watermark-state.with-mark {
  color: var(--accent-gold);
}

.image-watermark-state.without-mark {
  color: var(--accent-teal);
}

.image-preview-watermark-btn {
  flex: 1 1 auto;
  min-height: 25px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  background: rgba(18, 20, 25, .9);
  color: #f1f2f4;
  font-size: 6.5px;
  font-weight: 700;
  cursor: pointer;
}

.image-preview-watermark-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}

@media(max-width:700px) {
  .image-watermark-control {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .image-watermark-choice {
    width: 100%;
  }

  .image-watermark-option {
    min-height: 36px;
    font-size: 8.5px;
  }

  .image-preview-watermark-actions {
    position: static;
    margin: 5px;
    background: var(--surface-2);
  }
}

/* FINAL owner guard: these controls must never appear publicly. */
body:not(.owner-mode) .image-watermark-control,
body:not(.owner-mode) .image-preview-watermark-actions,
body:not(.owner-mode) [data-preview-watermark] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* FINAL FINAL owner visibility guard */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions,
body:not(.owner-mode) .image-watermark-control,
body:not(.owner-mode) .image-preview-watermark-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================================
     Owner bulk reversible watermark
     ========================================================== */
.bulk-watermark-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 14px;
}

.bulk-watermark-copy h3 {
  margin: 3px 0 5px;
  font-size: 19px;
}

.bulk-watermark-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.5;
}

.bulk-watermark-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.bulk-watermark-progress {
  grid-column: 1/-1;
  min-height: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
}

@media(max-width:700px) {
  .bulk-watermark-panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .bulk-watermark-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bulk-watermark-actions button {
    width: 100%;
    min-height: 42px;
  }
}

/* Final owner-only guard */
body:not(.owner-mode) .bulk-watermark-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* FINAL FINAL owner visibility guard */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions,
body:not(.owner-mode) .image-watermark-control,
body:not(.owner-mode) .image-preview-watermark-actions,
body:not(.owner-mode) .bulk-watermark-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================================
     Owner Add/Edit — all photos on this card watermark controls
     ========================================================== */
.image-watermark-all-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(95, 212, 196, .035);
}

.image-watermark-all-actions strong {
  display: block;
  color: var(--text);
  font-size: 9.5px;
}

.image-watermark-all-actions span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 7.8px;
  line-height: 1.35;
}

.image-watermark-all-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.image-watermark-all-buttons button {
  min-height: 34px;
  white-space: nowrap;
}

.image-watermark-all-status {
  grid-column: 1/-1;
  padding-top: 7px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
}

@media(max-width:700px) {
  .image-watermark-all-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .image-watermark-all-buttons {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .image-watermark-all-buttons button {
    width: 100%;
    min-height: 40px;
  }
}

/* Final owner-only guard */
body:not(.owner-mode) .image-watermark-all-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* FINAL FINAL owner visibility guard */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) .image-watermark-all-actions,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions,
body:not(.owner-mode) .image-watermark-control,
body:not(.owner-mode) .image-preview-watermark-actions,
body:not(.owner-mode) .bulk-watermark-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Bulk metadata selection filters — expanded filter set */
.bulk-meta-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.bulk-meta-filters .field {
  min-width: 0;
}

@media(max-width:1100px) {
  .bulk-meta-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:620px) {
  .bulk-meta-filters {
    grid-template-columns: 1fr !important;
  }
}

/* Preserve fail-closed owner controls. */
body:not(.owner-mode) .bulk-meta-layout,
body:not(.owner-mode) .bulk-meta-summary {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* FINAL owner visibility guard */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions,
body:not(.owner-mode) .bulk-meta-layout,
body:not(.owner-mode) .bulk-meta-summary {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.clean-game-pill {
  color: var(--accent-gold) !important;
  border-color: rgba(227, 179, 65, .22) !important;
  background: rgba(227, 179, 65, .045) !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.clean-game-pill.filter-pill-btn {
  cursor: pointer
}

.clean-game-pill.filter-pill-btn:hover {
  color: #ffd76a !important;
  border-color: rgba(255, 211, 88, .92) !important;
  background: rgba(255, 196, 46, .24) !important;
  box-shadow:
    0 0 0 2px rgba(255, 211, 88, .18) !important,
    0 0 14px rgba(255, 196, 46, .28) !important;
}

@media(max-width:700px) {
  .clean-game-pill {
    max-width: min(100%, 190px)
  }
}

/* Bulk Status editor */
.bulk-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.bulk-status-summary>div {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.bulk-status-summary strong {
  display: block;
  color: var(--accent-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
}

.bulk-status-summary span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
}

.bulk-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 12px;
  align-items: start;
}

.bulk-status-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}

.bulk-status-picker {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 620px;
  overflow: auto;
  overscroll-behavior: contain;
}

.bulk-status-empty {
  margin-top: 10px;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  text-align: center;
  font-size: 9px;
}

.bulk-status-editor-panel {
  position: sticky;
  top: 84px;
}

@media(max-width:1050px) {
  .bulk-status-layout {
    grid-template-columns: 1fr;
  }

  .bulk-status-editor-panel {
    position: static;
  }

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

@media(max-width:620px) {
  .bulk-status-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bulk-status-filters {
    grid-template-columns: 1fr;
  }

  .bulk-status-picker {
    max-height: none;
  }
}

/* Fail closed: Bulk Status is owner-only. */
body:not(.owner-mode) .bulk-status-layout,
body:not(.owner-mode) .bulk-status-summary {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* FINAL owner visibility guard */
body:not(.owner-mode) .owner-only,
body:not(.owner-mode) #mobileMoreMenu>a.owner-only,
body:not(.owner-mode) nav.mainnav a.owner-only,
body:not(.owner-mode) .desktop-more-owner,
body:not(.owner-mode) .card-actions.owner-only,
body:not(.owner-mode) .giveaway-owner-actions,
body:not(.owner-mode) .bulk-meta-layout,
body:not(.owner-mode) .bulk-meta-summary,
body:not(.owner-mode) .bulk-status-layout,
body:not(.owner-mode) .bulk-status-summary {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Add / Edit card — larger, easier-to-inspect image previews */
.image-gallery-preview {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}

.image-preview-box {
  min-height: 240px !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 12px !important;
}

.image-preview-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--bg);
}

/* Keep the controls readable now that the preview is larger. */
.image-preview-box .image-remove {
  width: 28px !important;
  height: 28px !important;
  top: 7px !important;
  right: 7px !important;
}

.image-preview-box .image-number {
  bottom: 7px !important;
  left: 7px !important;
  padding: 3px 7px !important;
}

.image-preview-box .image-drag-handle {
  top: 7px !important;
  left: 7px !important;
  padding: 4px 7px !important;
}

/* Mobile: make each card photo very large instead of tiny thumbnails. */
@media(max-width:700px) {
  .image-gallery-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .image-preview-box {
    min-height: 230px !important;
  }
}

@media(max-width:430px) {
  .image-gallery-preview {
    grid-template-columns: 1fr !important;
  }

  .image-preview-box {
    min-height: 390px !important;
    max-height: 520px;
  }
}


/* ==========================================================
     Inventory overview — prominent grading badge on card photo
     ========================================================== */
.overview-grade-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 70px;
  max-width: calc(100% - 16px);
  padding: 6px 9px 5px;
  border: 1px solid rgba(102, 240, 223, .52);
  border-radius: 10px;
  background: rgba(18, 108, 101, .94);
  color: #fff;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .40),
    0 0 0 1px rgba(102, 240, 223, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.overview-grade-overlay strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .35px;
}

.overview-grade-overlay small {
  display: block;
  margin-top: 2px;
  color: rgba(226, 255, 251, .72);
  font-family: 'Inter', sans-serif;
  font-size: 6.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .9px;
}

/* SOLD / RESERVED already own the upper-left corner. */
.overview-grade-overlay-right {
  left: auto;
  right: 8px;
}

/* Keep the NEW marker visible rather than stacking it under the grade badge. */
.new-card-badge-with-grade {
  top: 58px !important;
}

/* Make the existing clickable grade pill easier to scan as well. */
.clean-grade-badge {
  border-color: rgba(95, 212, 196, .34) !important;
  background: rgba(95, 212, 196, .08) !important;
  font-weight: 850 !important;
}

@media(max-width:800px) {
  .overview-grade-overlay {
    top: 6px;
    left: 6px;
    min-width: 66px;
    padding: 6px 8px 5px;
    border-radius: 9px;
  }

  .overview-grade-overlay-right {
    left: auto;
    right: 6px;
  }

  .overview-grade-overlay strong {
    font-size: 14px;
  }

  .overview-grade-overlay small {
    font-size: 6px;
  }

  .new-card-badge-with-grade {
    top: 51px !important;
  }
}

@media(max-width:390px) {
  .overview-grade-overlay {
    min-width: 62px;
    padding: 5px 7px;
  }

  .overview-grade-overlay strong {
    font-size: 13px;
  }

  .new-card-badge-with-grade {
    top: 47px !important;
  }
}


/* Refine the relationship between grade and NEW badges */
.new-card-badge-with-grade {
  top: 54px !important;
  left: 8px !important;
  padding: 4px 8px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .30) !important;
}

@media(max-width:800px) {
  .overview-grade-overlay {
    min-width: 64px !important;
    padding: 5px 8px 4px !important;
  }

  .overview-grade-overlay strong {
    font-size: 13.5px !important;
  }

  .overview-grade-overlay small {
    margin-top: 2px !important;
    font-size: 5.7px !important;
    letter-spacing: .75px !important;
  }

  .new-card-badge-with-grade {
    top: 47px !important;
    left: 6px !important;
  }
}

@media(max-width:390px) {
  .overview-grade-overlay {
    min-width: 60px !important;
    padding: 5px 7px 4px !important;
  }

  .overview-grade-overlay strong {
    font-size: 12.5px !important;
  }

  .new-card-badge-with-grade {
    top: 45px !important;
  }
}


/* Back to top */
.back-to-top-btn {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 1200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(61, 213, 196, .45);
  background: rgba(17, 20, 25, .94);
  color: #66e0d2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  border-color: rgba(61, 213, 196, .8);
}

.back-to-top-btn:focus-visible {
  outline: 2px solid #66e0d2;
  outline-offset: 3px;
}

@media (max-width:700px) {
  .back-to-top-btn {
    right: 14px;
    bottom: 88px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}


/* UX Phase 1: simplified buyer mobile navigation */
@media (max-width:800px) {

  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="collection"],
  nav.mainnav>a[data-route="showcase"],
  nav.mainnav>a[data-route="giveaway"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"],
  nav.mainnav>a[data-route="recent"] {
    display: none !important;
  }

  nav.mainnav>a[data-route="favorites"] {
    display: flex !important;
  }

  .mobile-more-toggle {
    display: flex !important;
  }
}


/* UX Phase 1: bring fresh inventory higher in the home experience */
.home-recently-added-priority {
  order: -20;
}


/* UX Phase 1: sticky mobile enquiry bar */
.mobile-detail-cta {
  display: none;
}

@media (max-width:800px) {
  .mobile-detail-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 12, 15, .96);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-detail-cta[hidden] {
    display: none !important;
  }

  .mobile-detail-cta-price {
    min-width: 0;
    flex: 1;
  }

  .mobile-detail-cta-price small {
    display: block;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
  }

  .mobile-detail-cta-price strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 17px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-detail-cta-action {
    min-height: 44px;
    padding: 11px 16px;
    border: 0;
    border-radius: 11px;
    background: var(--accent-teal);
    color: #061210;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
  }

  .mobile-detail-cta-action:active {
    transform: scale(.98);
  }
}


/* ===== Final condition / NEW badge palette ===== */
.overview-grade-overlay {
  background: rgba(8, 9, 11, .95) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .42) !important;
}

.overview-grade-overlay strong {
  color: #fff !important;
}

.overview-grade-overlay small {
  color: rgba(255, 255, 255, .68) !important;
}

.new-card-badge {
  background: linear-gradient(135deg, #76f7e6 0%, #42d8c7 55%, #25b7a9 100%) !important;
  color: #061210 !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(55, 218, 199, .18),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}


/* ===== Final mobile floating-control spacing ===== */
@media (max-width:800px) {
  .back-to-top-btn {
    right: 14px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    z-index: 1350 !important;
  }
}


/* ===== Home stat cards act as navigation ===== */
a.home-stat-card {
  cursor: pointer;
}

a.home-stat-card::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 800;
  opacity: .55;
}

a.home-stat-card {
  position: relative;
  padding-right: 32px;
}

a.home-stat-card:hover::after {
  opacity: .95;
}


.shipping-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 7px;
}

.shipping-summary-grid>span {
  display: block;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
}

.shipping-summary-grid b,
.shipping-summary-grid small {
  display: block;
}

.shipping-summary-grid b {
  color: var(--text);
  font-size: 10px;
  line-height: 1.3;
}

.shipping-summary-grid small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}

@media(max-width:700px) {
  .shipping-summary-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Mobile tactile card feedback ===== */
@media (hover:none) and (pointer:coarse) {

  .card,
  .home-storefront-grid .card,
  #invGrid .card {
    -webkit-tap-highlight-color: transparent;
    transition: transform .11s ease, border-color .11s ease, box-shadow .11s ease;
  }

  .card:active,
  .home-storefront-grid .card:active,
  #invGrid .card:active {
    border-color: rgba(102, 224, 210, .34);
    box-shadow: 0 0 0 1px rgba(102, 224, 210, .08);
  }
}


/* =========================================================
   UX PHASE 3 — mobile browsing clarity
   ========================================================= */

/* Keep active filters close to the search/results they affect. */
@media(max-width:800px) {
  .pill-filter-summary:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 38;
    display: flex !important;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 8px 3px 9px;
    margin: 0 0 8px;
    background: linear-gradient(180deg, var(--bg) 72%, rgba(0, 0, 0, 0));
    -webkit-overflow-scrolling: touch;
  }

  .pill-filter-summary:not([hidden])::-webkit-scrollbar {
    display: none;
  }

  .pill-filter-summary button,
  .pill-filter-summary .filter-pill,
  .pill-filter-summary [data-active-filter-index] {
    flex: 0 0 auto;
    min-height: 34px;
    white-space: nowrap;
  }

  .mobile-inventory-search {
    margin-bottom: 6px;
  }
}

/* Sticky enquiry bar state clarity */
.mobile-detail-cta-action:disabled {
  cursor: default;
  opacity: .58;
  background: var(--surface-3) !important;
  color: var(--text-muted) !important;
}

.mobile-detail-cta[data-state="sold"] .mobile-detail-cta-price small,
.mobile-detail-cta[data-state="reserved"] .mobile-detail-cta-price small {
  color: var(--text-muted);
}


/* =========================================================
   UX PHASE 4 — accessibility, touch ergonomics & performance
   ========================================================= */

/* Give interactive controls a reliable finger-sized hit area on phones. */
@media(max-width:800px) {

  .listing-gallery-arrow,
  .detail-slider-btn,
  .details-top-actions button,
  .detail-thumb-strip-btn,
  .image-lightbox-thumb,
  .filter-pill,
  .filter-pill-btn,
  .grade-shortcuts button,
  .sticky-mobile-results-action,
  .mobile-more-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .detail-thumb-strip-btn {
    padding: 2px;
  }

  .details-top-actions {
    gap: 7px;
  }
}

/* Render off-screen inventory cards only when they approach the viewport.
   Browsers that do not support this simply ignore it. */
@supports (content-visibility:auto) {
  #invGrid .card {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
  }
}

/* Clear keyboard focus that works in both dark and light themes. */
.card:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
}

/* Avoid hover-only visual assumptions on touch devices. */
@media(hover:none) {
  .card:hover {
    transform: none;
  }
}


/* =========================================================
   UX PHASE 5 — premium storefront & buyer confidence
   ========================================================= */

.detail-buyer-confidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.detail-confidence-item {
  min-width: 0;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
}

.detail-confidence-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(78, 210, 199, .20);
  background: rgba(78, 210, 199, .07);
  color: var(--accent-teal);
  font-size: 12px;
  font-weight: 900;
}

.detail-confidence-item strong,
.detail-confidence-item small {
  display: block;
}

.detail-confidence-item strong {
  color: var(--text);
  font-size: 9.5px;
  line-height: 1.25;
}

.detail-confidence-item small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.4;
}

.detail-summary-card[data-availability="available"] strong {
  color: var(--accent-teal);
}

.detail-summary-card[data-availability="reserved"] strong {
  color: var(--accent-gold);
}

.detail-summary-card[data-availability="sold"] strong {
  color: #ff8d91;
}

.detail-purchase-note {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-left: 3px solid rgba(78, 210, 199, .45);
  border-radius: 0 9px 9px 0;
  background: rgba(78, 210, 199, .045);
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.5;
}

.detail-purchase-note strong {
  color: var(--text);
}

.inventory-no-results h3 {
  color: var(--text);
  font-size: 17px;
  margin: 4px 0 7px;
}

.inventory-no-results .no-results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

@media(max-width:700px) {
  .detail-buyer-confidence {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .detail-confidence-item {
    padding: 9px 10px;
  }

  .detail-confidence-item small {
    font-size: 9px;
  }
}


/* =========================================================
   UX PHASE 6 — final technical polish
   ========================================================= */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Limit paint work for off-screen home/storefront cards too. */
@supports (content-visibility:auto) {

  .home-storefront-grid .card,
  #homeRecentGrid .card,
  .recently-viewed-grid .card {
    content-visibility: auto;
    contain-intrinsic-size: 380px;
  }
}


/* Permanent delete — owner only */
.quick-card-danger-hard,
.details-delete-listing-btn {
  color: #ff8d91 !important;
  font-weight: 900 !important;
}

.quick-card-danger-hard:hover,
.details-delete-listing-btn:hover,
.details-delete-listing-btn:focus-visible {
  background: rgba(228, 71, 79, .13) !important;
  color: #ffd0d2 !important;
}


/* Desktop nav cleanup: Reserved is already a primary desktop tab.
   Keep the duplicate Reserved entry only for mobile More. */
@media (min-width:801px) {
  #mobileMoreMenu>a[data-route="reserved"] {
    display: none !important;
  }
}


/* ==========================================================
   RESPONSIVE OVERVIEW SYSTEM — CANONICAL
   Consolidates the former pill sizing, all-row visibility and
   mobile card-height overrides without changing final behavior.
   Breakpoints:
     Phone / portrait mobile  <= 800px
     Compact phone            <= 390px
     Wide phone / foldable    540–800px
   ========================================================== */

@media (max-width:800px) {

  /* Compact visual pills. Clickable metadata retains an expanded invisible
     hit target while real controls remain visibly finger-sized. */
  #invGrid .clean-all-pills .filter-pill-btn,
  #homeRecentGrid .clean-all-pills .filter-pill-btn,
  .home-storefront-grid .clean-all-pills .filter-pill-btn,
  .recently-viewed-grid .clean-all-pills .filter-pill-btn {
    position: relative !important;
    isolation: isolate;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  #invGrid .clean-all-pills .filter-pill-btn::after,
  #homeRecentGrid .clean-all-pills .filter-pill-btn::after,
  .home-storefront-grid .clean-all-pills .filter-pill-btn::after,
  .recently-viewed-grid .clean-all-pills .filter-pill-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  #invGrid .clean-all-pills,
  #homeRecentGrid .clean-all-pills,
  .home-storefront-grid .clean-all-pills,
  .recently-viewed-grid .clean-all-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  #invGrid .clean-all-pills .clean-grade-badge,
  #invGrid .clean-all-pills .clean-meta-pill,
  #homeRecentGrid .clean-all-pills .clean-grade-badge,
  #homeRecentGrid .clean-all-pills .clean-meta-pill,
  .home-storefront-grid .clean-all-pills .clean-grade-badge,
  .home-storefront-grid .clean-all-pills .clean-meta-pill,
  .recently-viewed-grid .clean-all-pills .clean-grade-badge,
  .recently-viewed-grid .clean-all-pills .clean-meta-pill {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    letter-spacing: .15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #invGrid .clean-game-pill,
  #invGrid .clean-series-pill,
  #homeRecentGrid .clean-game-pill,
  #homeRecentGrid .clean-series-pill,
  .home-storefront-grid .clean-game-pill,
  .home-storefront-grid .clean-series-pill {
    max-width: min(100%, 190px) !important;
  }

  /* General overview cards grow with metadata. */
  .home-storefront-grid .card,
  .recently-viewed-grid .card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .home-storefront-grid .clean-card-body,
  .recently-viewed-grid .clean-card-body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  /* Inventory + Recently Added use the compact content-driven card row. */
  #invGrid .card,
  #homeRecentGrid .card {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    min-height: 220px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #invGrid .clean-card-body,
  #homeRecentGrid .clean-card-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-height: 220px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  #invGrid .card>.thumb-wrap,
  #homeRecentGrid .card>.thumb-wrap {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  #invGrid .card>.thumb-wrap .thumb,
  #homeRecentGrid .card>.thumb-wrap .thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #invGrid .card>.thumb-placeholder,
  #homeRecentGrid .card>.thumb-placeholder {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Price is always after the complete metadata group. */
  #invGrid .clean-price-block,
  #homeRecentGrid .clean-price-block,
  .home-storefront-grid .clean-price-block,
  .recently-viewed-grid .clean-price-block {
    position: relative !important;
    order: initial !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-top: 7px !important;
    clear: both !important;
  }

  #invGrid .clean-price-block,
  #homeRecentGrid .clean-price-block {
    padding-top: 9px !important;
  }

  .home-storefront-grid .clean-price-block,
  .recently-viewed-grid .clean-price-block {
    padding-top: 10px !important;
  }

  #invGrid .clean-price-primary,
  #invGrid .clean-price-secondary,
  #homeRecentGrid .clean-price-primary,
  #homeRecentGrid .clean-price-secondary {
    display: block !important;
    width: 100% !important;
  }

  /* Actual interaction controls keep a visible 44px target. */
  .pill-filter-summary .filter-pill-btn,
  .grade-shortcuts .filter-pill-btn,
  .filter-drawer-shell .overview-select-btn,
  .mobile-filter-open-btn,
  .sticky-mobile-results-action {
    min-height: 44px !important;
  }
}

@media (min-width:391px) and (max-width:800px) {

  #invGrid .clean-all-pills .clean-grade-badge,
  #invGrid .clean-all-pills .clean-meta-pill,
  #homeRecentGrid .clean-all-pills .clean-grade-badge,
  #homeRecentGrid .clean-all-pills .clean-meta-pill {
    padding: 5px 8px !important;
    font-size: 9.5px !important;
  }
}

@media (min-width:540px) and (max-width:800px) {

  #invGrid .clean-all-pills .clean-grade-badge,
  #invGrid .clean-all-pills .clean-meta-pill,
  #homeRecentGrid .clean-all-pills .clean-grade-badge,
  #homeRecentGrid .clean-all-pills .clean-meta-pill {
    padding: 5px 9px !important;
    font-size: 10px !important;
  }
}

@media (max-width:390px) {

  #invGrid .clean-all-pills,
  #homeRecentGrid .clean-all-pills,
  .home-storefront-grid .clean-all-pills,
  .recently-viewed-grid .clean-all-pills {
    gap: 4px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #invGrid .clean-all-pills .clean-grade-badge,
  #invGrid .clean-all-pills .clean-meta-pill,
  #homeRecentGrid .clean-all-pills .clean-grade-badge,
  #homeRecentGrid .clean-all-pills .clean-meta-pill,
  .home-storefront-grid .clean-all-pills .clean-grade-badge,
  .home-storefront-grid .clean-all-pills .clean-meta-pill,
  .recently-viewed-grid .clean-all-pills .clean-grade-badge,
  .recently-viewed-grid .clean-all-pills .clean-meta-pill {
    padding: 4px 6px !important;
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }

  #invGrid .clean-game-pill,
  #invGrid .clean-series-pill,
  #homeRecentGrid .clean-game-pill,
  #homeRecentGrid .clean-series-pill {
    max-width: 145px !important;
  }

  #invGrid .card,
  #homeRecentGrid .card {
    grid-template-columns: minmax(104px, 35%) minmax(0, 1fr) !important;
    min-height: 210px !important;
  }

  #invGrid .clean-card-body,
  #homeRecentGrid .clean-card-body,
  #invGrid .card>.thumb-wrap,
  #homeRecentGrid .card>.thumb-wrap,
  #invGrid .card>.thumb-placeholder,
  #homeRecentGrid .card>.thumb-placeholder {
    min-height: 210px !important;
  }
}

/* =========================================================
   MOBILE CARD ENQUIRY CHOOSER
   Platform-neutral enquiry flow for iPhone / Android.
   ========================================================= */
.interest-contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.interest-contact-overlay[hidden] {
  display: none !important;
}

.interest-contact-sheet {
  width: min(100%, 520px);
  max-height: min(82dvh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: rgba(16, 18, 22, .985);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, .48);
  animation: interestSheetIn .18s ease-out;
}

@keyframes interestSheetIn {
  from {
    transform: translateY(18px);
    opacity: .55;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.interest-contact-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.interest-contact-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.interest-contact-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.interest-contact-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}

.interest-contact-card {
  margin: 0 0 11px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}

.interest-contact-card strong,
.interest-contact-card span {
  display: block;
}

.interest-contact-card strong {
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
}

.interest-contact-card span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.interest-contact-options {
  display: grid;
  gap: 7px;
}

.interest-contact-option {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.interest-contact-option:hover,
.interest-contact-option:focus-visible {
  border-color: rgba(78, 210, 199, .42);
  background: rgba(78, 210, 199, .07);
}

.interest-contact-option-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(78, 210, 199, .20);
  border-radius: 9px;
  background: rgba(78, 210, 199, .07);
  font-size: 15px;
}

.interest-contact-option-copy {
  min-width: 0;
  flex: 1;
}

.interest-contact-option-copy strong,
.interest-contact-option-copy small {
  display: block;
}

.interest-contact-option-copy strong {
  font-size: 11px;
  line-height: 1.25;
}

.interest-contact-option-copy small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.3;
}

.interest-contact-option-arrow {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 14px;
}

.interest-contact-copy {
  margin-top: 9px;
  border-color: rgba(227, 179, 65, .25);
}

.interest-contact-note {
  margin: 10px 2px 0;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
  text-align: center;
}

@media(max-width:390px) {
  .interest-contact-overlay {
    padding: 8px;
  }

  .interest-contact-sheet {
    padding: 13px 11px calc(11px + env(safe-area-inset-bottom));
    border-radius: 16px;
  }

  .interest-contact-option {
    min-height: 48px;
    padding: 9px 10px;
  }
}

@media(min-width:801px) {
  .interest-contact-overlay {
    align-items: center;
  }
}

@media(prefers-reduced-motion:reduce) {
  .interest-contact-sheet {
    animation: none !important;
  }
}


body.interest-contact-open {
  overflow: hidden !important;
}

@media(max-width:800px) {
  body.interest-contact-open .shell {
    overflow: hidden !important;
  }
}


/* =========================================================
   FINAL MOBILE PRIMARY NAV
   Home | Inventory | Favorites | More
   Keep desktop More contents unchanged.
   ========================================================= */
@media (max-width:800px) {
  nav.mainnav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  /* Only these four controls belong in the primary mobile row. */
  nav.mainnav>a[data-route="home"] {
    display: flex !important;
    order: 1 !important;
    grid-column: auto !important;
  }

  nav.mainnav>a[data-route="inventory"] {
    display: flex !important;
    order: 2 !important;
    grid-column: auto !important;
  }

  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav {
    display: flex !important;
    order: 3 !important;
    grid-column: auto !important;
  }

  nav.mainnav>.mobile-more-toggle {
    display: flex !important;
    order: 4 !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Everything else stays out of the primary mobile row. */
  nav.mainnav>a[data-route="collection"],
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="sold"],
  nav.mainnav>a[data-route="showcase"],
  nav.mainnav>a[data-route="giveaway"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"],
  nav.mainnav>a[data-route="recent"],
  nav.mainnav>a[data-route="by-game"],
  nav.mainnav>a.owner-only,
  nav.mainnav>a.mobile-secondary-nav:not([data-route="favorites"]) {
    display: none !important;
  }

  /* Favorites already has its own primary mobile tab, so don't repeat it
     inside the opened More menu. */
  nav.mainnav>.mobile-more-menu>a[data-route="favorites"] {
    display: none !important;
  }

  /* The More dropdown appears underneath all four primary tabs. */
  nav.mainnav>.mobile-more-menu {
    order: 5 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Consistent sizing across narrow Android phones and iPhones. */
  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav,
  nav.mainnav>.mobile-more-toggle {
    min-height: 46px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  nav.mainnav>a[data-route="inventory"] .nav-count {
    flex: 0 0 auto !important;
  }
}

/* Extra-narrow phones: keep four equal tabs without wrapping. */
@media (max-width:360px) {
  nav.mainnav {
    gap: 2px !important;
  }

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav,
  nav.mainnav>.mobile-more-toggle {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 10px !important;
    gap: 2px !important;
  }

  nav.mainnav>a[data-route="inventory"] .nav-count {
    display: none !important;
  }
}


/* =========================================================
   MOBILE NAV FINAL LAYOUT
   Row 1: Home | Inventory
   Row 2: Sold | Favorites
   Row 3: More
   ========================================================= */
@media (max-width:800px) {
  nav.mainnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  nav.mainnav>a[data-route="home"] {
    display: flex !important;
    order: 1 !important;
    grid-column: 1 !important;
  }

  nav.mainnav>a[data-route="inventory"] {
    display: flex !important;
    order: 2 !important;
    grid-column: 2 !important;
  }

  nav.mainnav>a[data-route="sold"] {
    display: flex !important;
    order: 3 !important;
    grid-column: 1 !important;
  }

  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav {
    display: flex !important;
    order: 4 !important;
    grid-column: 2 !important;
  }

  nav.mainnav>.mobile-more-toggle {
    display: flex !important;
    order: 5 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  nav.mainnav>.mobile-more-menu {
    order: 6 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Keep other destinations out of the primary mobile grid. */
  nav.mainnav>a[data-route="collection"],
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="showcase"],
  nav.mainnav>a[data-route="giveaway"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"],
  nav.mainnav>a[data-route="recent"],
  nav.mainnav>a[data-route="by-game"],
  nav.mainnav>a.owner-only,
  nav.mainnav>a.mobile-secondary-nav:not([data-route="favorites"]) {
    display: none !important;
  }

  /* Favorites is already a primary mobile tab. */
  nav.mainnav>.mobile-more-menu>a[data-route="favorites"] {
    display: none !important;
  }

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="sold"],
  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav {
    min-height: 46px !important;
    padding: 9px 10px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  nav.mainnav>.mobile-more-toggle {
    min-height: 42px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }
}

@media (max-width:360px) {
  nav.mainnav {
    gap: 3px !important;
  }

  nav.mainnav>a[data-route="home"],
  nav.mainnav>a[data-route="inventory"],
  nav.mainnav>a[data-route="sold"],
  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav {
    padding: 8px 7px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   MOBILE NAV — COLLECTION PRIMARY
   Row 1: Home | Inventory
   Row 2: Sold | Collection
   Row 3: More
   Favorites remains available through More.
   ========================================================= */
@media (max-width:800px) {
  nav.mainnav>a[data-route="favorites"].mobile-secondary-nav {
    display: none !important;
  }

  nav.mainnav>a[data-route="collection"].collection-primary-nav {
    display: flex !important;
    order: 4 !important;
    grid-column: 2 !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="favorites"] {
    display: flex !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="collection"] {
    display: none !important;
  }
}

@media (max-width:360px) {
  nav.mainnav>a[data-route="collection"].collection-primary-nav {
    padding: 8px 7px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   LARGE INVENTORY PAGINATION
   ========================================================= */
.listing-per-page-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.listing-per-page-control select {
  min-height: 28px;
  padding: 3px 24px 3px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.listing-pagination-shell {
  margin: 12px 0;
}

.listing-pagination-shell[hidden] {
  display: none !important;
}

.listing-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.listing-pagination-summary {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}

.listing-pagination-summary strong {
  color: var(--text);
  font-size: 10.5px;
}

.listing-pagination-pages {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.listing-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.listing-page-btn:hover:not(:disabled),
.listing-page-btn:focus-visible {
  border-color: rgba(78, 210, 199, .42);
  background: rgba(78, 210, 199, .07);
}

.listing-page-btn.active {
  border-color: var(--accent-teal);
  background: rgba(78, 210, 199, .12);
  color: var(--accent-teal);
}

.listing-page-btn:disabled {
  opacity: .4;
  cursor: default;
}

.listing-page-ellipsis {
  min-width: 20px;
  color: var(--text-muted);
  text-align: center;
  font-size: 11px;
}

@media(max-width:800px) {
  .inventory-display-tools {
    flex-wrap: wrap !important;
  }

  .listing-per-page-control {
    min-height: 42px;
    padding: 6px 9px;
  }

  .listing-per-page-control select {
    min-height: 32px;
  }

  .listing-pagination {
    display: block;
    padding: 9px;
  }

  .listing-pagination-summary {
    margin-bottom: 8px;
    text-align: center;
    white-space: normal;
  }

  .listing-pagination-pages {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .listing-page-btn {
    min-width: 40px;
    height: 42px;
    padding: 0 8px;
    font-size: 10px;
  }

  .listing-page-btn[data-page-direction] {
    min-width: 42px;
  }

  .listing-pagination-top {
    margin-top: 8px;
  }
}

@media(max-width:390px) {
  .listing-page-btn {
    min-width: 36px;
    padding: 0 6px;
  }

  .listing-pagination-pages {
    gap: 3px;
  }
}


/* =========================================================
   ACTIVE FILTER PLACEMENT
   Search/Filters/Sort -> Active filters -> Results/Pagination
   ========================================================= */
.active-filter-result-bridge {
  margin: 8px 0 7px !important;
}

@media(max-width:800px) {
  .active-filter-result-bridge:not([hidden]) {
    position: relative !important;
    top: auto !important;
    z-index: 12 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 7px 2px 8px !important;
    margin: 4px 0 7px !important;
    background: transparent !important;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .active-filter-result-bridge:not([hidden])::-webkit-scrollbar {
    display: none;
  }

  .active-filter-result-bridge>* {
    flex: 0 0 auto !important;
  }

  /* Do not let active filters become a multi-row wall on phones. */
  .active-filter-result-bridge .filter-pill,
  .active-filter-result-bridge .filter-pill-btn,
  .active-filter-result-bridge button {
    white-space: nowrap !important;
  }

  /* Mobile search visually comes first, then Filter/Sort drawer actions,
     then this active-filter strip and pagination. */
  .mobile-inventory-search {
    margin-bottom: 6px !important;
  }
}

@media(min-width:801px) {
  .active-filter-result-bridge:not([hidden]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 0 !important;
  }
}


/* =========================================================
   MOBILE SPACE OPTIMIZATION
   Row: Currency | Filters | Show per page
   Footer row: listing count | theme toggle
   ========================================================= */
@media(max-width:800px) {

  /* Three useful controls share one mobile row. */
  .listing-filter-tools .inventory-display-tools {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  .listing-filter-tools .currency-preference-control {
    grid-column: 1 !important;
  }

  .listing-filter-tools .mobile-filter-open-btn {
    grid-column: 2 !important;
  }

  .listing-filter-tools .listing-per-page-control {
    grid-column: 3 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .listing-filter-tools .listing-per-page-control>span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* On phones, "Show 20 per page" is shortened visually to fit naturally. */
  .listing-filter-tools .listing-per-page-control>span:last-child {
    display: none !important;
  }

  .listing-filter-tools .listing-per-page-control select {
    min-width: 52px !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 20px 4px 7px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    flex: 0 0 auto !important;
  }

  .listing-filter-tools .currency-preference-control,
  .listing-filter-tools .mobile-filter-open-btn {
    height: 46px !important;
    min-height: 46px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .listing-filter-tools .currency-preference-control {
    padding: 5px 6px !important;
    gap: 4px !important;
  }

  .listing-filter-tools .currency-preference-control>span {
    font-size: 8px !important;
  }

  .listing-filter-tools .currency-preference-control select {
    min-width: 55px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 19px 4px 6px !important;
    font-size: 10px !important;
  }

  .listing-filter-tools .mobile-filter-open-btn {
    padding: 0 6px !important;
    font-size: 9.5px !important;
    gap: 4px !important;
  }

  /* Keep secondary actions below the compact primary control row. */
  .listing-filter-tools .copy-filter-link-btn {
    grid-column: 1 / -1 !important;
  }

  .listing-filter-tools .desktop-compact-view-toggle {
    display: none !important;
  }

  /* Collection has no currency selector, so use two balanced columns rather
     than leaving an empty first column. */
  .listing-filter-tools .inventory-display-tools.collection-display-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .listing-filter-tools .collection-display-tools .mobile-filter-open-btn {
    grid-column: 1 !important;
  }

  .listing-filter-tools .collection-display-tools .listing-per-page-control {
    grid-column: 2 !important;
  }

  /* Sidebar/footer: make use of the otherwise empty horizontal space. */
  .sidebar-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  .sidebar-footer>div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .sidebar-footer>.theme-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  .sidebar-footer>div:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
  }

  .sidebar-footer>.owner-status {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 0 !important;
  }
}

@media(max-width:390px) {
  .listing-filter-tools .inventory-display-tools {
    gap: 5px !important;
  }

  .listing-filter-tools .currency-preference-control,
  .listing-filter-tools .mobile-filter-open-btn,
  .listing-filter-tools .listing-per-page-control {
    height: 44px !important;
    min-height: 44px !important;
  }

  .listing-filter-tools .currency-preference-control>span,
  .listing-filter-tools .listing-per-page-control>span {
    font-size: 7.5px !important;
  }

  .listing-filter-tools .currency-preference-control select,
  .listing-filter-tools .listing-per-page-control select {
    min-width: 49px !important;
    padding-left: 5px !important;
    padding-right: 17px !important;
    font-size: 9px !important;
  }

  .listing-filter-tools .mobile-filter-open-btn {
    font-size: 9px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .sidebar-footer>.theme-toggle {
    padding: 5px 7px !important;
    font-size: 8.5px !important;
  }
}


/* =========================================================
   MOBILE TOOLBAR ROW FIX
   Explicit row placement prevents CSS Grid auto-flow from
   moving Filters onto a second row because of DOM order.
   ========================================================= */
@media(max-width:800px) {
  .listing-filter-tools .inventory-display-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }

  .listing-filter-tools .currency-preference-control {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .listing-filter-tools .mobile-filter-open-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .listing-filter-tools .listing-per-page-control {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .listing-filter-tools .copy-filter-link-btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  /* Collection does not have Currency: keep Filters + Show together. */
  .listing-filter-tools .inventory-display-tools.collection-display-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .listing-filter-tools .collection-display-tools .mobile-filter-open-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .listing-filter-tools .collection-display-tools .listing-per-page-control {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .listing-filter-tools .collection-display-tools .copy-filter-link-btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}


/* MOBILE: remove redundant SoonSoonTCG footer label to save space. */
@media(max-width:800px) {

  .sidebar-footer .sidebar-footer-brand,
  .sidebar-footer .footer-brand,
  .sidebar-footer .brand-name,
  .sidebar-footer .shop-name {
    display: none !important;
  }
}


@media(max-width:800px) {

  /* Exact redundant footer label: "SoonSoonTCG". */
  .sidebar-footer>div:nth-child(2) {
    display: none !important;
  }

  /* With the brand line removed, keep count + theme button as the only public row. */
  .sidebar-footer>div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .sidebar-footer>.theme-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .sidebar-footer>.owner-status {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}


/* =========================================================
   MOBILE BOTTOM PAGINATION CLEARANCE
   Prevent sticky sort/filter controls from covering pagination.
   ========================================================= */
@media(max-width:800px) {
  .listing-pagination-bottom {
    position: relative !important;
    z-index: 20 !important;
    margin-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    padding-bottom: 2px !important;
  }

  /* Ensure the final inventory content also has breathing room above
     the sticky mobile result controls on phones with taller browser UI. */
  #invGrid {
    scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .sticky-mobile-results-bar {
    z-index: 1200 !important;
  }
}

@media(max-width:390px) {
  .listing-pagination-bottom {
    margin-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
}


/* =========================================================
   CONDITION / GRADE OVERLAY FILTER FIX
   Image badges now use the same pill-filter interaction as
   the metadata pills underneath the card.
   ========================================================= */
.overview-grade-overlay.filter-pill-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit;
  text-align: left;
  margin: 0;
}

.overview-grade-overlay.filter-pill-btn:hover,
.overview-grade-overlay.filter-pill-btn:focus-visible {
  border-color: rgba(102, 240, 223, .62) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .40),
    0 0 0 2px rgba(102, 240, 223, .18) !important;
}

.overview-grade-overlay.filter-pill-btn.pill-selected {
  border-color: var(--accent-teal) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .40),
    0 0 0 2px rgba(95, 212, 196, .28) !important;
}

@media(max-width:800px) {
  .overview-grade-overlay.filter-pill-btn {
    /* Keep the visible badge compact while maintaining a reliable tap target. */
    min-width: 44px;
    min-height: 36px;
    touch-action: manipulation;
  }
}


/* =========================================================
   PAGINATION + CONDITION FILTER FINAL FIX
   ========================================================= */
@media(max-width:800px) {

  #invGrid,
  .listing-pagination-shell {
    overflow-anchor: none;
  }
}


/* =========================================================
   ZERO-JUMP PAGINATION VIEWPORT GUARD
   Keeps the current scroll position valid when a new page is
   shorter than the page being replaced.
   ========================================================= */
.listing-pagination-viewport-guard {
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

@media(max-width:800px) {
  .listing-pagination-viewport-guard {
    width: 100%;
  }
}


.condition-filter-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.overview-grade-overlay.condition-filter-btn {
  margin: 0;
  font: inherit;
  text-align: left;
}

@media(max-width:800px) {
  .condition-filter-btn {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  #invGrid,
  .listing-pagination-shell {
    overflow-anchor: none;
  }
}


/* =========================================================
   CONDITION BADGE VISUAL RESTORE
   Keep condition badges black like grading badges while
   preserving click-to-filter behavior.
   ========================================================= */
.overview-grade-overlay.condition-filter-btn,
.clean-grade-badge.condition-filter-btn {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .34) !important;
}

.overview-grade-overlay.condition-filter-btn:hover,
.overview-grade-overlay.condition-filter-btn:focus-visible,
.clean-grade-badge.condition-filter-btn:hover,
.clean-grade-badge.condition-filter-btn:focus-visible {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .28) !important;
  box-shadow:
    0 5px 14px rgba(0, 0, 0, .34),
    0 0 0 2px rgba(255, 255, 255, .06) !important;
}

/* Do not show teal selected styling on the condition badge itself.
   The active-filter area already communicates the applied filter. */
.overview-grade-overlay.condition-filter-btn.pill-selected,
.clean-grade-badge.condition-filter-btn.pill-selected {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .22) !important;
}


/* CONDITION BADGE SIZE: match the existing grade badge exactly. */
.overview-grade-overlay.condition-filter-btn {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 7px !important;
}

.clean-grade-badge.condition-filter-btn {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
}

@media(max-width:800px) {
  .overview-grade-overlay.condition-filter-btn {
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  .clean-grade-badge.condition-filter-btn {
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
  }
}


/* =========================================================
   MOBILE PAGINATION — NO ARTIFICIAL SCROLL SPACE
   The old viewport-height guard is permanently disabled.
   Bottom pagination now preserves natural bottom distance.
   ========================================================= */
.listing-pagination-viewport-guard {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html {
  scroll-behavior: auto;
}


/* =========================================================
   MOBILE INVENTORY — COMPACT FIRST-CARD LAYOUT
   Goal: get users to the first listing much faster.
   Desktop is unchanged.
   ========================================================= */
@media(max-width:800px) {

  /* 1) Collapse the large page intro. Keep only the title. */
  .listing-page-head {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }

  .listing-page-head .eyebrow,
  .listing-page-head p {
    display: none !important;
  }

  .listing-page-head h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  /* 2) Keep quick filters as one compact horizontal strip. */
  .listing-filter-tools .quick-filters {
    order: 1 !important;
    margin: 0 0 7px !important;
    padding: 0 0 2px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .listing-filter-tools .quick-filters::-webkit-scrollbar {
    display: none;
  }

  .listing-filter-tools .quick-filter {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Hide the standalone toolbar context above the cards.
     Result count is shown in the compact mobile row below. */
  .listing-filter-tools .inventory-toolbar-context {
    display: none !important;
  }

  /* 3) Hide secondary controls from the main mobile surface.
        They remain available inside the existing Filters drawer. */
  .listing-filter-tools .currency-preference-control,
  .listing-filter-tools .listing-per-page-control,
  .listing-filter-tools .copy-filter-link-btn {
    display: none !important;
  }

  /* The old three-column display toolbar no longer needs to consume a row. */
  .listing-filter-tools .inventory-display-tools {
    order: 3 !important;
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  /* Keep only the Filters button from this toolbar. */
  .listing-filter-tools .mobile-filter-open-btn {
    display: flex !important;
    width: auto !important;
    min-width: 96px !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    margin: 0 !important;
  }

  /* Desktop-only view toggle stays hidden on mobile. */
  .listing-filter-tools .desktop-compact-view-toggle {
    display: none !important;
  }

  /* 4) Search becomes the primary mobile action, beside Filters. */
  .mobile-inventory-search {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    align-items: stretch !important;
    margin: 0 0 8px !important;
  }

  .mobile-inventory-search .inventory-search-wrap {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .mobile-inventory-search input[type="search"] {
    min-height: 46px !important;
    height: 46px !important;
  }

  /* Move the existing Filters button visually into the search row. */
  .listing-filter-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "quick quick"
      "search filter"
      "active active"
      "results results" !important;
    gap: 0 7px !important;
  }

  .listing-filter-tools .quick-filters {
    grid-area: quick !important;
  }

  .listing-filter-tools .mobile-inventory-search {
    grid-area: search !important;
  }

  .listing-filter-tools .inventory-display-tools {
    grid-area: filter !important;
    align-self: stretch !important;
  }

  .listing-filter-tools .active-filter-result-bridge {
    grid-area: active !important;
  }

  /* Compact result line directly above first card. */
  .listing-filter-tools .inventory-mobile-compact-result {
    grid-area: results !important;
  }

  /* 5) Top pagination is unnecessary on mobile.
        Users start browsing immediately; bottom pagination remains. */
  #listingPaginationTop {
    display: none !important;
  }

  /* Reduce vertical gaps before the grid. */
  .active-filter-result-bridge {
    margin: 3px 0 5px !important;
  }

  #invGrid {
    margin-top: 5px !important;
  }
}

/* Extra tightening for narrow phones. */
@media(max-width:390px) {
  .listing-page-head h2 {
    font-size: 20px !important;
  }

  .listing-filter-tools .quick-filter {
    min-height: 36px !important;
    padding: 7px 11px !important;
  }

  .mobile-inventory-search input[type="search"],
  .listing-filter-tools .mobile-filter-open-btn {
    min-height: 44px !important;
    height: 44px !important;
  }

  .listing-filter-tools .mobile-filter-open-btn {
    min-width: 88px !important;
    padding: 0 11px !important;
  }
}


.inventory-mobile-compact-result {
  display: none;
}

@media(max-width:800px) {
  .inventory-mobile-compact-result {
    display: flex !important;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    margin: 0 0 2px;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.2;
  }

  .inventory-mobile-compact-result strong {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
  }
}


/* =========================================================
   MOBILE SEARCH + FILTER — TRUE SHARED ROW
   Search uses available width; Filters stays compact beside it.
   ========================================================= */
.mobile-search-filter-row {
  display: none;
}

@media(max-width:800px) {

  /* The display-tools area no longer needs to reserve space for Filters. */
  .listing-filter-tools .inventory-display-tools {
    display: none !important;
  }

  .mobile-search-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
  }

  .mobile-search-filter-row .mobile-inventory-search {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .mobile-search-filter-row .mobile-inventory-search input[type="search"] {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-right: 38px !important;
  }

  .mobile-search-filter-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 88px !important;
    max-width: 112px !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    white-space: nowrap !important;
  }

  /* Previous experimental grid positioning is no longer needed. */
  .listing-filter-tools {
    display: block !important;
  }

  .listing-filter-tools .quick-filters {
    margin-bottom: 7px !important;
  }

  .inventory-mobile-compact-result {
    margin-top: 0 !important;
  }
}

@media(max-width:390px) {
  .mobile-search-filter-row {
    gap: 6px !important;
  }

  .mobile-search-filter-row .mobile-inventory-search input[type="search"],
  .mobile-search-filter-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  .mobile-search-filter-btn {
    min-width: 82px !important;
    padding: 0 10px !important;
  }
}


/* =========================================================
   MOBILE SEARCH + FILTER — REFINED PROPORTIONS
   Compact Filters button, longer Search field, tighter gap.
   ========================================================= */
@media(max-width:800px) {
  .mobile-search-filter-row {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  /* Filters: only as wide as its content needs. */
  .mobile-search-filter-row .mobile-search-filter-btn {
    grid-column: 1 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .1px !important;
    white-space: nowrap !important;
  }

  /* Search takes every remaining pixel. */
  .mobile-search-filter-row .mobile-inventory-search {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-search-filter-row .mobile-inventory-search input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep active filter count compact inside the smaller button. */
  .mobile-search-filter-row .filter-count-badge {
    margin-left: 3px !important;
  }
}

@media(max-width:390px) {
  .mobile-search-filter-row {
    gap: 3px !important;
  }

  .mobile-search-filter-row .mobile-search-filter-btn {
    padding: 0 12px !important;
    font-size: 11.5px !important;
  }
}


/* =========================================================
   MOBILE FOOTER: LISTING COUNT | CURRENCY | THEME
   Use the existing footer row instead of spending inventory
   viewport height on a separate Currency control.
   ========================================================= */
.mobile-footer-currency {
  display: none;
}

@media(max-width:800px) {
  .sidebar-footer {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 6px !important;
  }

  .sidebar-footer>div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .sidebar-footer>.mobile-footer-currency {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    white-space: nowrap !important;
  }

  .sidebar-footer>.mobile-footer-currency>span {
    display: none !important;
  }

  .sidebar-footer>.mobile-footer-currency select {
    width: auto !important;
    min-width: 54px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 2px 18px 2px 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  .sidebar-footer>.theme-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-height: 34px !important;
  }

  .sidebar-footer>.owner-status {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media(max-width:390px) {
  .sidebar-footer {
    column-gap: 4px !important;
  }

  .sidebar-footer>.mobile-footer-currency {
    padding: 3px 4px !important;
  }

  .sidebar-footer>.mobile-footer-currency select {
    min-width: 50px !important;
    font-size: 8.5px !important;
  }

  .sidebar-footer>.theme-toggle {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* =========================================================
   CONDITION BADGE SIZE — MATCH GRADED / SEALED
   Only raw-condition badges are changed.
   ========================================================= */
.overview-grade-overlay.condition-filter-btn {
  min-width: 70px !important;
  max-width: calc(100% - 16px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 9px 5px !important;
  border-radius: 10px !important;
}

@media(max-width:800px) {
  .overview-grade-overlay.condition-filter-btn {
    min-width: 70px !important;
    max-width: calc(100% - 16px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 9px 5px !important;
    border-radius: 10px !important;
  }
}


/* CONDITION BADGE TEXT: center within badge. */
.overview-grade-overlay.condition-filter-btn {
  align-items: center !important;
  text-align: center !important;
}

.overview-grade-overlay.condition-filter-btn strong,
.overview-grade-overlay.condition-filter-btn small {
  width: 100% !important;
  text-align: center !important;
}


/* ALL OVERLAY BADGES: center text for Condition, Sealed, and Graded. */
.overview-grade-overlay {
  align-items: center !important;
  text-align: center !important;
}

.overview-grade-overlay strong,
.overview-grade-overlay small {
  width: 100% !important;
  text-align: center !important;
}


/* =========================================================
   MOBILE HOME — STORE FRONT CARD HEIGHT FIX
   High Value / Vintage / Recently Sold use content-driven
   horizontal cards like Inventory. Removes large empty space.
   ========================================================= */
@media(max-width:800px) {

  /* Match Home metadata pill sizing to Inventory. */
  .home-recent-grid .clean-all-pills .clean-grade-badge,
  .home-recent-grid .clean-all-pills .clean-meta-pill,
  .home-storefront-grid .clean-all-pills .clean-grade-badge,
  .home-storefront-grid .clean-all-pills .clean-meta-pill {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  /* Home storefront sections: one compact horizontal card per row. */
  .home-storefront-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .home-storefront-grid>.card {
    display: grid !important;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 220px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* This is the rule that was causing the large blank area.
     Do NOT let the body be 100% of the entire card height. */
  .home-storefront-grid .clean-card-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 220px !important;
    height: auto !important;
    max-height: none !important;
    padding: 15px 14px !important;
    gap: 9px !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  .home-storefront-grid .card>.thumb-wrap {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .home-storefront-grid .card>.thumb-wrap .thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
  }

  .home-storefront-grid .card>.thumb-placeholder {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 220px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  .home-storefront-grid .clean-price-block {
    position: relative !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-top: 7px !important;
    padding-top: 9px !important;
  }

  .home-storefront-grid .clean-all-pills {
    gap: 4px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media(max-width:390px) {
  .home-storefront-grid>.card {
    grid-template-columns: minmax(104px, 35%) minmax(0, 1fr) !important;
    min-height: 210px !important;
  }

  .home-storefront-grid .clean-card-body,
  .home-storefront-grid .card>.thumb-wrap,
  .home-storefront-grid .card>.thumb-placeholder {
    min-height: 210px !important;
  }

  .home-storefront-grid .clean-card-body {
    padding: 13px 12px !important;
    gap: 8px !important;
  }
}


/* =========================================================
   LIGHT MODE READABILITY PASS
   Dark mode is untouched.
   ========================================================= */
body.light-mode {
  --bg: #f3f1ec;
  --sidebar: #f8f7f3;
  --surface: #ffffff;
  --surface-2: #f6f4ef;
  --surface-3: #ebe8e1;
  --border: #c9c5bc;
  --border-soft: #dedbd4;
  --text: #1f252b;
  --text-muted: #505861;
  --text-dim: #69717a;
  --accent-teal: #176f68;
  --accent-gold: #946b18;
  color-scheme: light;
}

body.light-mode {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(40, 45, 50, .035) 1px, transparent 0);
}

body.light-mode::before {
  opacity: .008 !important;
}

/* General light surfaces */
body.light-mode .sidebar {
  background: rgba(248, 247, 243, .98) !important;
  box-shadow: 1px 0 0 rgba(31, 37, 43, .07) !important;
}

body.light-mode .card,
body.light-mode .panel,
body.light-mode .form-card,
body.light-mode .detail-section,
body.light-mode .detail-summary-card,
body.light-mode .home-shipping-item,
body.light-mode .home-feature {
  background: #fff !important;
  border-color: var(--border) !important;
}

/* ---------------------------------------------------------
   COLLECTION AT A GLANCE — dedicated light-mode treatment
   --------------------------------------------------------- */
body.light-mode #view .home-collection-stats-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.light-mode #view .home-collection-stats-section .home-section-head h3 {
  color: #20262c !important;
}

body.light-mode #view .home-collection-stats-section .home-section-head p {
  color: #59616a !important;
}

body.light-mode #view .home-collection-stats .home-stat-card {
  background:
    linear-gradient(145deg, #f8fbfb, #eef4f3) !important;
  border-color: #aebfbd !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 5px 14px rgba(38, 48, 50, .08) !important;
}

body.light-mode #view .home-collection-stats .home-stat-card::before {
  background: linear-gradient(90deg, #2f8d87, #4c9aa1) !important;
  opacity: .9 !important;
}

body.light-mode #view .home-collection-stats .home-stat-card::after {
  background: rgba(47, 141, 135, .055) !important;
}

body.light-mode #view .home-collection-stats .home-stat-value {
  color: #173c3a !important;
  text-shadow: none !important;
}

body.light-mode #view .home-collection-stats .home-stat-label {
  color: #4e5c61 !important;
  text-shadow: none !important;
}

body.light-mode #view .home-collection-stats .home-stat-card:hover {
  background:
    linear-gradient(145deg, #f1f8f7, #e8f1ef) !important;
  border-color: #7fa9a4 !important;
}

/* Navigation */
body.light-mode nav.mainnav a,
body.light-mode .mobile-more-toggle {
  color: #555d66 !important;
}

body.light-mode nav.mainnav a:hover,
body.light-mode nav.mainnav a:focus-visible,
body.light-mode .mobile-more-toggle:hover,
body.light-mode .mobile-more-toggle:focus-visible {
  color: #20262c !important;
  background: #ece9e2 !important;
}

body.light-mode nav.mainnav a.active {
  color: #163f3b !important;
  background: #e7efed !important;
}

/* Secondary text */
body.light-mode .hint,
body.light-mode .notes,
body.light-mode .clean-card-reference,
body.light-mode .home-section-head p,
body.light-mode .detail-label,
body.light-mode .detail-summary-card span,
body.light-mode .inventory-result-count,
body.light-mode .inventory-mobile-compact-result,
body.light-mode .listing-pagination-summary {
  color: #59616a !important;
}

/* Inputs */
body.light-mode input,
body.light-mode textarea,
body.light-mode select,
body.light-mode .overview-select-btn,
body.light-mode .global-currency-control,
body.light-mode .listing-per-page-control,
body.light-mode .currency-preference-control {
  background: #fffdfa !important;
  color: #22282e !important;
  border-color: #bbb7ae !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: #747c84 !important;
  opacity: 1 !important;
}

/* Buttons */
body.light-mode .btn-ghost,
body.light-mode .theme-toggle,
body.light-mode .mobile-filter-open-btn,
body.light-mode .copy-filter-link-btn,
body.light-mode .view-mode-toggle,
body.light-mode .listing-page-btn {
  background: #f5f3ee !important;
  color: #333a42 !important;
  border-color: #c3bfb6 !important;
}

body.light-mode .btn-primary {
  background: #176f68 !important;
  border-color: #176f68 !important;
  color: #fff !important;
}

/* Price colors */
body.light-mode .clean-price-primary,
body.light-mode .detail-price-primary,
body.light-mode .detail-price-values span,
body.light-mode .owner-view-count {
  color: #795810 !important;
}

body.light-mode .clean-price-secondary,
body.light-mode .detail-price-secondary {
  color: #59616a !important;
}

/* Pills */
body.light-mode .clean-meta-pill,
body.light-mode .clean-grade-badge {
  background: #f1efe9 !important;
  border-color: #c8c3b8 !important;
  color: #343b42 !important;
}

body.light-mode .clean-game-pill {
  color: #72530f !important;
  border-color: #c9b77f !important;
  background: #f7f0dc !important;
}

body.light-mode .clean-era-pill {
  color: #17655f !important;
  border-color: #a8cbc6 !important;
  background: #e9f3f1 !important;
}

body.light-mode .clean-language-pill {
  color: #40546d !important;
  border-color: #b6c2d0 !important;
  background: #edf1f5 !important;
}

body.light-mode .clean-series-pill {
  color: #4e5660 !important;
  border-color: #c6c3bc !important;
  background: #f1f0ec !important;
}

body.light-mode .clean-availability-pill[data-pill-value="Available"] {
  color: #246137 !important;
  border-color: #9fc7aa !important;
  background: #eaf4ed !important;
}

body.light-mode .clean-availability-pill[data-pill-value="Reserved"] {
  color: #775612 !important;
  border-color: #d1bd88 !important;
  background: #f7f0dc !important;
}

body.light-mode .clean-availability-pill[data-pill-value="Sold"] {
  color: #8b3030 !important;
  border-color: #d6aaaa !important;
  background: #f8eaea !important;
}

body.light-mode .clean-availability-pill[data-pill-value="Collection (NFS)"],
body.light-mode .clean-availability-pill[data-pill-value="Collection (NFS)"].pill-selected {
  color: #69408a !important;
  border-color: #c7afd9 !important;
  background: #f2ebf7 !important;
  box-shadow: none !important;
}

/* Menus */
body.light-mode .overview-select-menu,
body.light-mode .search-suggestions,
body.light-mode nav.mainnav>.mobile-more-menu {
  background: #fffdfa !important;
  border-color: #bbb7ae !important;
  box-shadow: 0 14px 32px rgba(41, 45, 49, .13) !important;
}

body.light-mode .overview-select-option:hover,
body.light-mode .overview-select-option:focus,
body.light-mode .search-suggestions button:hover,
body.light-mode .search-suggestions button.active {
  background: #ece9e2 !important;
  color: #20262c !important;
}

/* Mobile sticky controls */
body.light-mode .sticky-mobile-results-bar {
  background: rgba(248, 247, 243, .97) !important;
  border-top-color: #c9c5bc !important;
  box-shadow: 0 -8px 22px rgba(40, 45, 50, .10) !important;
}

body.light-mode .sticky-mobile-results-count strong,
body.light-mode .sticky-mobile-results-action {
  color: #20262c !important;
}

body.light-mode .sticky-mobile-results-count span,
body.light-mode .sticky-mobile-results-action small {
  color: #59616a !important;
}


/* =========================================================
   DESKTOP CARD DETAILS — MORE MENU POSITION FIX
   Open toward the right so the modal's left edge cannot clip it.
   Mobile behavior is unchanged.
   ========================================================= */
@media(min-width:801px) {
  .modal.card-details-modal .details-more-wrap {
    position: relative !important;
    overflow: visible !important;
  }

  .modal.card-details-modal .details-more-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    max-width: min(270px, calc(100vw - 40px)) !important;
  }
}


/* =========================================================
   CARD DETAILS STATUS CORNER — ANCHOR TO VISIBLE PHOTO
   The slider uses object-fit:contain, so the visible card photo
   may not fill the entire stage. JS supplies the real photo bounds.
   ========================================================= */
.modal.card-details-modal .detail-slider-stage .status-corner {
  left: var(--detail-status-left, 0px) !important;
  top: var(--detail-status-top, 0px) !important;
  width: var(--detail-status-size, 46%) !important;
  max-width: none !important;
}


/* =========================================================
   MOBILE LISTING OVERVIEW — RESERVED OVERLAY TEXT BIGGER
   Only affects mobile card/listing overview overlays.
   Desktop and download watermark are unchanged.
   ========================================================= */
@media(max-width:800px) {

  .thumb-wrap .status-corner-reserved::before,
  .thumb-placeholder .status-corner-reserved::before {
    top: 27% !important;
    left: -1% !important;
    width: 79% !important;
    font-size: clamp(9px, 18.5cqw, 28px) !important;
    letter-spacing: clamp(0px, .05cqw, .2px) !important;
  }
}


/* =========================================================
   MOBILE LISTING OVERVIEW — SOLD OVERLAY TEXT BIGGER
   Match the Reserved mobile readability improvement.
   Desktop and download watermark are unchanged.
   ========================================================= */
@media(max-width:800px) {

  .thumb-wrap .status-corner-sold::before,
  .thumb-placeholder .status-corner-sold::before {
    top: 27% !important;
    left: -1% !important;
    width: 79% !important;
    font-size: clamp(9px, 18.5cqw, 28px) !important;
    letter-spacing: clamp(0px, .05cqw, .2px) !important;
  }
}


/* =========================================================
   DESKTOP OWNER MENU — BELOW TOP-RIGHT BADGE ON SOLD/RESERVED
   Mobile behavior is intentionally unchanged.
   ========================================================= */
@media(min-width:801px) {

  .card:has(.status-corner-sold) .quick-card-actions,
  .card:has(.status-corner-reserved) .quick-card-actions {
    top: 62px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 9 !important;
  }
}


/* =========================================================
   MOBILE SECURITY UX — OWNER MODE DISABLED
   JavaScript also blocks authentication/owner state. This CSS is a
   presentation fail-safe so owner controls cannot appear on mobile.
   ========================================================= */
@media(max-width:800px) {

  .owner-toggle,
  .owner-status,
  .owner-only,
  body.owner-mode .owner-only,
  body.owner-mode a.owner-only,
  body.owner-mode .card-actions.owner-only {
    display: none !important;
  }
}


/* =========================================================
   GRADE / SEALED BADGE HOVER — MATCH CONDITION BADGE
   Prevent generic teal hover styling on clickable overview badges.
   ========================================================= */
.overview-grade-overlay.filter-pill-btn:hover,
.clean-grade-badge.filter-pill-btn:hover,
.overview-grade-overlay.filter-pill-btn:focus-visible,
.clean-grade-badge.filter-pill-btn:focus-visible {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .34) !important;
}

.overview-grade-overlay.filter-pill-btn:hover strong,
.overview-grade-overlay.filter-pill-btn:hover small,
.clean-grade-badge.filter-pill-btn:hover strong,
.clean-grade-badge.filter-pill-btn:hover small,
.overview-grade-overlay.filter-pill-btn:focus-visible strong,
.overview-grade-overlay.filter-pill-btn:focus-visible small,
.clean-grade-badge.filter-pill-btn:focus-visible strong,
.clean-grade-badge.filter-pill-btn:focus-visible small {
  color: #fff !important;
}


/* =========================================================
   COLLECTION AT A GLANCE — BALANCED DESKTOP 4 + 3 LAYOUT
   Mobile/tablet rules remain unchanged.
   ========================================================= */
@media(min-width:1001px) {
  #view .home-collection-stats-section .home-collection-stats {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #view .home-collection-stats-section .home-stat-card {
    grid-column: span 2 !important;
    min-width: 0 !important;
  }

  #view .home-collection-stats-section .home-stat-card:nth-child(5) {
    grid-column: 2 / span 2 !important;
  }

  #view .home-collection-stats-section .home-stat-card:nth-child(6) {
    grid-column: 4 / span 2 !important;
  }

  #view .home-collection-stats-section .home-stat-card:nth-child(7) {
    grid-column: 6 / span 2 !important;
  }
}


/* =========================================================
   PC COLLECTION OVERVIEW LABEL — PREVENT LEFT-EDGE CLIPPING
   The rounded section/card styling could visually trim the first letter
   when the eyebrow sits flush against an overflow-clipped boundary.
   ========================================================= */
@media(min-width:1001px) {
  #view .home-collection-stats-section {
    overflow: visible !important;
  }

  #view .home-collection-stats-section .home-section-head {
    overflow: visible !important;
    padding-left: 2px !important;
  }

  #view .home-collection-stats-section .eyebrow {
    display: inline-block !important;
    overflow: visible !important;
    padding-left: 1px !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}


/* =========================================================
   ADD / EDIT LISTING — IMAGE ROTATION CONTROLS
   ========================================================= */
.image-preview-action-divider {
  width: 1px;
  height: 22px;
  flex: 0 0 1px;
  background: var(--border);
  margin: 0 2px;
}

.image-preview-rotate-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.image-preview-rotate-btn:hover {
  border-color: var(--accent-gold);
  background: var(--surface-3);
}

.image-preview-rotate-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media(max-width:800px) {
  .image-preview-watermark-actions {
    flex-wrap: wrap;
  }

  .image-preview-rotate-btn {
    min-width: 36px;
    min-height: 36px;
  }
}


/* =========================================================
   OWNER HIDDEN LISTINGS
   Draft lifecycle = hidden from public visitors, still manageable by owner.
   ========================================================= */
body.owner-mode .card:has(.owner-hidden-listing-badge) {
  border-style: dashed !important;
  border-color: rgba(227, 179, 65, .55) !important;
}

.owner-hidden-listing-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid rgba(227, 179, 65, .55);
  border-radius: 999px;
  background: rgba(227, 179, 65, .12);
  color: var(--accent-gold);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .65px;
  line-height: 1;
  white-space: nowrap;
}

@media(max-width:800px) {
  .owner-hidden-listing-badge {
    font-size: 8px;
    padding: 3px 6px;
  }
}


/* =========================================================
   MOBILE FILTER — CARDS PER PAGE
   ========================================================= */
.mobile-cards-per-page-control {
  display: none;
}

@media(max-width:800px) {
  .filter-drawer-shell .mobile-cards-per-page-control {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 52px;
    padding: 8px 10px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
  }

  .mobile-cards-per-page-control>span {
    min-width: 0;
  }

  .mobile-cards-per-page-control strong,
  .mobile-cards-per-page-control small {
    display: block;
  }

  .mobile-cards-per-page-control strong {
    color: var(--text);
    font-size: 10px;
    line-height: 1.15;
  }

  .mobile-cards-per-page-control small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 7.5px;
    line-height: 1.2;
  }

  .mobile-cards-per-page-control select {
    flex: 0 0 74px;
    width: 74px !important;
    min-width: 74px !important;
    min-height: 36px !important;
    padding: 6px 24px 6px 9px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 700;
  }
}

body.light-mode .mobile-cards-per-page-control {
  background: #fffdfa !important;
  border-color: #bbb7ae !important;
}

body.light-mode .mobile-cards-per-page-control select {
  background: #fffdfa !important;
  color: #22282e !important;
  border-color: #bbb7ae !important;
}


/* Card Details is a reused scrolling modal. Do not let browser scroll anchoring
   restore a previous card's vertical position after its contents are replaced. */
.modal.card-details-modal {
  overflow-anchor: none !important;
}


/* =========================================================
   INSIGHTS V2 — DATA QUALITY + PERIOD COMPARISON
   ========================================================= */
.insights-quality-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid rgba(95, 212, 196, .24);
  border-radius: 11px;
  background: rgba(95, 212, 196, .045);
}

.insights-quality-note strong {
  flex: 0 0 auto;
  color: var(--accent-teal);
  font-size: 10px;
}

.insights-quality-note span {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}

.insights-stats {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}

.insights-stat small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.35;
}

.insights-stat-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

.insights-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.insights-panel-head h3 {
  margin: 0 0 4px !important;
}

.insights-panel-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.4;
}

.insights-status-tag {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 700;
}

.trend-tag.rising {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

@media(max-width:800px) {
  .insights-quality-note {
    display: block;
  }

  .insights-quality-note strong,
  .insights-quality-note span {
    display: block;
  }

  .insights-quality-note span {
    margin-top: 5px;
  }

  .insights-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:430px) {
  .insights-stats {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   INSIGHTS V3 — SIMPLE BUYER-INTENT DASHBOARD
   ========================================================= */
.insights-v3-page-head {
  margin-bottom: 12px !important
}

.insights-v3-trust,
.insights-v3-backend-ok,
.insights-v3-backend-needed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.insights-v3-trust {
  border-color: rgba(95, 212, 196, .25);
  background: rgba(95, 212, 196, .045)
}

.insights-v3-trust-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(95, 212, 196, .12);
  color: var(--accent-teal);
  font-weight: 900
}

.insights-v3-trust strong,
.insights-v3-backend-ok strong,
.insights-v3-backend-needed strong {
  display: block;
  font-size: 10px
}

.insights-v3-trust span,
.insights-v3-backend-ok span,
.insights-v3-backend-needed span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.4
}

.insights-v3-backend-ok {
  border-color: rgba(95, 212, 196, .20)
}

.insights-v3-backend-needed {
  border-color: rgba(227, 179, 65, .32);
  background: rgba(227, 179, 65, .055)
}

.insights-v3-backend-needed strong {
  color: var(--accent-gold)
}

.insights-v3-filterbar {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface)
}

.insights-v3-filter-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end
}

.insights-v3-filter-primary>label {
  display: grid;
  gap: 4px;
  min-width: 130px;
  flex: 1 1 145px
}

.insights-v3-filter-primary>label>span,
.insights-v3-sort>span {
  color: var(--text-muted);
  font-size: 7.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .55px
}

.insights-v3-filter-primary select,
.insights-v3-filter-primary input {
  min-height: 38px
}

.insights-v3-filter-primary .insights-range-custom {
  flex: 2 1 250px
}

.insights-v3-section {
  margin: 0 0 15px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface)
}

.insights-v3-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px
}

.insights-v3-section-head>div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 9px
}

.insights-v3-step {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--accent-teal);
  font: 800 10px 'JetBrains Mono', monospace
}

.insights-v3-section-head h3 {
  margin: 0;
  font-size: 13px
}

.insights-v3-section-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.35
}

.insights-v3-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important
}

.insights-v3-kpi {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.insights-v3-kpi>span {
  display: block;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 700
}

.insights-v3-kpi>strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font: 800 20px 'JetBrains Mono', monospace
}

.insights-v3-kpi>small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.3
}

.insights-v3-kpi.primary {
  border-color: rgba(95, 212, 196, .24)
}

.insights-v3-kpi.accent {
  border-color: rgba(227, 179, 65, .28)
}

.insights-v3-kpi.accent>strong {
  color: var(--accent-gold);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.25
}

.insights-v3-funnel {
  display: grid;
  gap: 7px
}

.insights-v3-funnel-row {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1.2fr) minmax(120px, 2fr) 66px;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border-radius: 9px;
  background: var(--surface-2)
}

.insights-v3-funnel-index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800
}

.insights-v3-funnel-copy strong,
.insights-v3-funnel-copy small {
  display: block
}

.insights-v3-funnel-copy strong {
  font-size: 9px
}

.insights-v3-funnel-copy small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-v3-funnel-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden
}

.insights-v3-funnel-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-teal)
}

.insights-v3-funnel-value {
  text-align: right;
  font: 800 12px 'JetBrains Mono', monospace
}

.insights-v3-attention {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

.insights-v3-alert {
  padding: 10px;
  border: 1px solid rgba(227, 179, 65, .24);
  border-radius: 10px;
  background: rgba(227, 179, 65, .035)
}

.insights-v3-alert span {
  display: block;
  color: var(--accent-gold);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px
}

.insights-v3-alert strong {
  display: block;
  margin-top: 3px;
  font-size: 9.5px
}

.insights-v3-alert small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-v3-alert p {
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.4
}

.insights-v3-empty-good {
  grid-column: 1/-1;
  padding: 13px;
  border: 1px solid rgba(95, 212, 196, .20);
  border-radius: 10px;
  background: rgba(95, 212, 196, .035)
}

.insights-v3-empty-good strong,
.insights-v3-empty-good span {
  display: block
}

.insights-v3-empty-good strong {
  color: var(--accent-teal);
  font-size: 9.5px
}

.insights-v3-empty-good span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px
}

.insights-v3-sort {
  display: grid;
  gap: 4px;
  min-width: 170px
}

.insights-v3-sort select {
  min-height: 36px
}

.insights-v3-formula {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: -2px 0 9px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface-2)
}

.insights-v3-formula strong {
  flex: 0 0 auto;
  color: var(--accent-teal);
  font-size: 7.5px
}

.insights-v3-formula span {
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.35
}

.insights-v3-score {
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace
}

.insights-v3-table th,
.insights-v3-table td {
  white-space: nowrap
}

.insights-v3-table .insights-card-name {
  max-width: 220px;
  white-space: normal
}

.insights-v3-advanced {
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  overflow: hidden
}

.insights-v3-advanced>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none
}

.insights-v3-advanced>summary::-webkit-details-marker {
  display: none
}

.insights-v3-advanced>summary span {
  font-size: 10px;
  font-weight: 800
}

.insights-v3-advanced>summary small {
  color: var(--text-muted);
  font-size: 8px
}

.insights-v3-advanced[open]>summary {
  border-bottom: 1px solid var(--border)
}

.insights-v3-advanced>.insights-panel,
.insights-v3-advanced-grid {
  margin: 12px
}

.insights-v3-advanced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.insights-v3-advanced-grid>.insights-panel {
  margin: 0
}

.insights-v3-price-brackets {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden
}

.insights-v3-bracket-head,
.insights-v3-bracket-row {
  display: grid;
  grid-template-columns: 1.25fr repeat(5, minmax(55px, .7fr));
  gap: 6px;
  align-items: center;
  padding: 8px 9px
}

.insights-v3-bracket-head {
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.insights-v3-bracket-row {
  background: var(--surface-2);
  font-size: 8px
}

.insights-v3-bracket-row strong {
  font-size: 8.5px
}

.insights-v3-sales-speed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px
}

.insights-v3-sales-speed article {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2)
}

.insights-v3-sales-speed span,
.insights-v3-sales-speed strong,
.insights-v3-sales-speed small {
  display: block
}

.insights-v3-sales-speed span {
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-v3-sales-speed strong {
  margin-top: 4px;
  font-size: 12px
}

.insights-v3-sales-speed small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

@media(max-width:800px) {
  .insights-v3-filter-primary {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .insights-v3-filter-primary>label,
  .insights-v3-filter-primary .insights-range-custom {
    min-width: 0;
    width: 100%;
    flex: none
  }

  .insights-v3-filter-primary .insights-range-custom {
    grid-column: 1/-1
  }

  .insights-v3-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .insights-v3-funnel-row {
    grid-template-columns: 26px minmax(0, 1fr) 56px
  }

  .insights-v3-funnel-track {
    grid-column: 2/-1
  }

  .insights-v3-attention {
    grid-template-columns: 1fr
  }

  .insights-v3-section-head {
    flex-direction: column
  }

  .insights-v3-sort {
    width: 100%;
    min-width: 0
  }

  .insights-v3-advanced-grid {
    grid-template-columns: 1fr
  }

  .insights-v3-sales-speed {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .insights-v3-bracket-head,
  .insights-v3-bracket-row {
    grid-template-columns: 1.2fr repeat(5, 58px);
    min-width: 430px
  }

  .insights-v3-price-brackets {
    overflow-x: auto
  }
}

@media(max-width:420px) {
  .insights-v3-kpis {
    grid-template-columns: 1fr !important
  }

  .insights-v3-filter-primary {
    grid-template-columns: 1fr
  }

  .insights-v3-filter-primary .insights-range-custom {
    grid-column: auto
  }

  .insights-v3-sales-speed {
    grid-template-columns: 1fr
  }

  .insights-v3-trust {
    display: block
  }

  .insights-v3-trust-icon {
    margin-bottom: 7px
  }
}


/* =========================================================
   INSIGHTS V4 — FRIENDLY TABBED DECISION DASHBOARD
   ========================================================= */
.insights-v4-page-head {
  margin-bottom: 10px !important
}

.insights-v4-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface)
}

.insights-v4-tabs button {
  min-width: 0;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer
}

.insights-v4-tabs button span,
.insights-v4-tabs button small {
  display: block
}

.insights-v4-tabs button span {
  color: inherit;
  font-size: 9.5px;
  font-weight: 800
}

.insights-v4-tabs button small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.2
}

.insights-v4-tabs button:hover {
  background: var(--surface-2);
  color: var(--text)
}

.insights-v4-tabs button.active {
  border-color: rgba(95, 212, 196, .28);
  background: rgba(95, 212, 196, .07);
  color: var(--accent-teal)
}

.insights-v4-filterbar {
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface)
}

.insights-v4-filterbar>div {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px
}

.insights-v4-filterbar label {
  display: grid;
  gap: 3px;
  flex: 1 1 135px;
  min-width: 120px
}

.insights-v4-filterbar label>span {
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px
}

.insights-v4-filterbar select,
.insights-v4-filterbar input {
  min-height: 36px
}

.insights-v4-filterbar .insights-range-custom {
  flex: 2 1 230px
}

.insights-v4-loading {
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9px
}

.insights-v4-loading[hidden] {
  display: none !important
}

.insights-v4-tab-panel {
  display: none
}

.insights-v4-tab-panel.active {
  display: block
}

.insights-v4-intro,
.insights-v4-tab-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px
}

.insights-v4-intro strong,
.insights-v4-intro span {
  display: block
}

.insights-v4-intro strong {
  font-size: 11px
}

.insights-v4-intro span,
.insights-v4-tab-title p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.35
}

.insights-v4-quality-pill,
.insights-v4-tab-title>span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(95, 212, 196, .25);
  border-radius: 999px;
  color: var(--accent-teal);
  background: rgba(95, 212, 196, .05);
  font-size: 7.5px;
  font-weight: 800
}

.insights-v4-tab-title h3 {
  margin: 0;
  font-size: 13px
}

.insights-v4-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px
}

.insights-v4-kpis.compact {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.insights-v4-kpis article {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.insights-v4-kpis article>span,
.insights-v4-kpis article>strong,
.insights-v4-kpis article>small {
  display: block
}

.insights-v4-kpis article>span {
  color: var(--text-muted);
  font-size: 7.5px;
  font-weight: 700
}

.insights-v4-kpis article>strong {
  margin-top: 4px;
  font: 800 19px 'JetBrains Mono', monospace
}

.insights-v4-kpis article>small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.25
}

.insights-v4-kpis article.highlight {
  border-color: rgba(227, 179, 65, .28)
}

.insights-v4-kpis article.highlight>strong {
  color: var(--accent-gold);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.3
}

.insights-v4-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px
}

.insights-v4-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  min-width: 0
}

.insights-v4-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 9px
}

.insights-v4-card-head h3 {
  margin: 0;
  font-size: 10px
}

.insights-v4-card-head span {
  color: var(--text-muted);
  font-size: 7px
}

.insights-v4-card-head.table-head>div span {
  display: block;
  margin-top: 3px
}

.insights-v4-funnel-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(80px, 1.5fr) 52px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft)
}

.insights-v4-funnel-row:last-child {
  border-bottom: 0
}

.insights-v4-funnel-row>span {
  font-size: 8px
}

.insights-v4-funnel-row>i {
  height: 7px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden
}

.insights-v4-funnel-row>i>b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-teal)
}

.insights-v4-funnel-row>strong {
  text-align: right;
  font: 800 10px 'JetBrains Mono', monospace
}

.insights-v4-winner {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft)
}

.insights-v4-winner:last-child {
  border-bottom: 0
}

.insights-v4-winner span,
.insights-v4-winner strong,
.insights-v4-winner small {
  display: block
}

.insights-v4-winner span {
  color: var(--text-muted);
  font-size: 7px
}

.insights-v4-winner strong {
  margin-top: 2px;
  font-size: 9px
}

.insights-v4-winner small {
  margin-top: 2px;
  color: var(--accent-teal);
  font-size: 7px
}

.insights-v4-details {
  margin: 10px 0 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden
}

.insights-v4-details>summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800
}

.insights-v4-details[open]>summary {
  border-bottom: 1px solid var(--border)
}

.insights-v4-details .details-grid {
  padding: 10px;
  margin: 0
}

.insights-v4-rec-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px
}

.insights-v4-rec-summary article {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface)
}

.insights-v4-rec-summary strong,
.insights-v4-rec-summary span {
  display: block
}

.insights-v4-rec-summary strong {
  font: 800 15px 'JetBrains Mono', monospace
}

.insights-v4-rec-summary span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7px
}

.insights-v4-rec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

.insights-v4-rec {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.insights-v4-rec.high {
  border-color: rgba(248, 113, 113, .28)
}

.insights-v4-rec.medium {
  border-color: rgba(227, 179, 65, .28)
}

.insights-v4-rec.good {
  border-color: rgba(95, 212, 196, .25)
}

.insights-v4-rec-type {
  color: var(--accent-gold);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px
}

.insights-v4-rec.good .insights-v4-rec-type {
  color: var(--accent-teal)
}

.insights-v4-rec h4 {
  margin: 4px 0 0;
  font-size: 10px
}

.insights-v4-rec p {
  margin: 4px 0 8px;
  color: var(--text-muted);
  font-size: 8px
}

.insights-v4-rec>div:not(.insights-v4-rec-type) {
  padding: 7px;
  border-radius: 8px;
  background: var(--surface-2)
}

.insights-v4-rec>div strong,
.insights-v4-rec>div span {
  display: block
}

.insights-v4-rec>div strong {
  font-size: 7px
}

.insights-v4-rec>div span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.35
}

.insights-v4-rec button {
  margin-top: 8px
}

.insights-v4-good-empty {
  grid-column: 1/-1;
  padding: 15px;
  border: 1px solid rgba(95, 212, 196, .22);
  border-radius: 10px;
  background: rgba(95, 212, 196, .04)
}

.insights-v4-good-empty strong,
.insights-v4-good-empty span {
  display: block
}

.insights-v4-good-empty strong {
  color: var(--accent-teal);
  font-size: 10px
}

.insights-v4-good-empty span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px
}

.insights-v4-history-picker {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface)
}

.insights-v4-history-picker label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center
}

.insights-v4-history-picker label>span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800
}

.insights-v4-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px
}

.insights-v4-history-summary article {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface)
}

.insights-v4-history-summary span,
.insights-v4-history-summary strong {
  display: block
}

.insights-v4-history-summary span {
  color: var(--text-muted);
  font-size: 7px
}

.insights-v4-history-summary strong {
  margin-top: 4px;
  font-size: 11px
}

.insights-v4-timeline {
  display: grid;
  gap: 0
}

.insights-v4-timeline>div {
  position: relative;
  padding: 7px 0 7px 17px;
  border-left: 1px solid var(--border)
}

.insights-v4-timeline>div>i {
  position: absolute;
  left: -4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent-teal)
}

.insights-v4-timeline>div span,
.insights-v4-timeline>div strong {
  display: block
}

.insights-v4-timeline>div span {
  color: var(--text-muted);
  font-size: 6.8px
}

.insights-v4-timeline>div strong {
  margin-top: 2px;
  font-size: 7.8px;
  font-weight: 700
}

.insights-v4-backend-ok,
.insights-v4-backend-needed {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface)
}

.insights-v4-backend-ok {
  border-color: rgba(95, 212, 196, .24)
}

.insights-v4-backend-needed {
  border-color: rgba(227, 179, 65, .30);
  background: rgba(227, 179, 65, .04)
}

.insights-v4-backend-ok strong,
.insights-v4-backend-needed strong {
  font-size: 8.5px
}

.insights-v4-backend-ok span,
.insights-v4-backend-needed span {
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-v4-health-score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(227, 179, 65, .28);
  border-radius: 11px;
  background: rgba(227, 179, 65, .04)
}

.insights-v4-health-score.all-good {
  border-color: rgba(95, 212, 196, .28);
  background: rgba(95, 212, 196, .04)
}

.insights-v4-health-score>strong {
  font: 900 24px 'JetBrains Mono', monospace;
  color: var(--accent-gold)
}

.insights-v4-health-score.all-good>strong {
  color: var(--accent-teal)
}

.insights-v4-health-score span,
.insights-v4-health-score small {
  display: block
}

.insights-v4-health-score span {
  font-size: 9px;
  font-weight: 800
}

.insights-v4-health-score small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-v4-health-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px
}

.insights-v4-health-list article {
  display: flex;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface)
}

.insights-v4-health-list article i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  font-style: normal;
  font-weight: 900
}

.insights-v4-health-list article.ok i {
  background: rgba(95, 212, 196, .10);
  color: var(--accent-teal)
}

.insights-v4-health-list article.warn i {
  background: rgba(227, 179, 65, .10);
  color: var(--accent-gold)
}

.insights-v4-health-list strong,
.insights-v4-health-list span {
  display: block
}

.insights-v4-health-list strong {
  font-size: 8.5px
}

.insights-v4-health-list span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 7px;
  line-height: 1.3
}

.health-notes p {
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.45
}

.health-notes p:last-child {
  margin-bottom: 0
}

@media(max-width:800px) {
  .insights-v4-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
  }

  .insights-v4-tabs::-webkit-scrollbar {
    display: none
  }

  .insights-v4-tabs button {
    flex: 0 0 126px;
    min-height: 50px
  }

  .insights-v4-filterbar>div {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .insights-v4-filterbar label,
  .insights-v4-filterbar .insights-range-custom {
    min-width: 0;
    width: 100%;
    flex: none
  }

  .insights-v4-filterbar .insights-range-custom {
    grid-column: 1/-1
  }

  .insights-v4-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .insights-v4-kpis.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .insights-v4-grid-2 {
    grid-template-columns: 1fr
  }

  .insights-v4-rec-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .insights-v4-rec-list {
    grid-template-columns: 1fr
  }

  .insights-v4-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .insights-v4-health-list {
    grid-template-columns: 1fr
  }

  .insights-v4-intro,
  .insights-v4-tab-title {
    align-items: flex-start
  }
}

@media(max-width:420px) {
  .insights-v4-filterbar>div {
    grid-template-columns: 1fr
  }

  .insights-v4-filterbar .insights-range-custom {
    grid-column: auto
  }

  .insights-v4-kpis,
  .insights-v4-kpis.compact {
    grid-template-columns: 1fr
  }

  .insights-v4-rec-summary {
    grid-template-columns: 1fr 1fr
  }

  .insights-v4-history-summary {
    grid-template-columns: 1fr 1fr
  }

  .insights-v4-history-picker label {
    grid-template-columns: 1fr
  }

  .insights-v4-quality-pill,
  .insights-v4-tab-title>span {
    display: none
  }
}



/* Overview traffic charts stay visible directly below the filters,
   while using the site's original Insights chart styling. */
.insights-v4-traffic-primary {
  margin-bottom: 10px !important;
}

.insights-v4-traffic-primary .insights-chart {
  min-height: 190px;
}

@media(max-width:800px) {
  .insights-v4-traffic-primary {
    grid-template-columns: 1fr !important;
  }

  .insights-v4-traffic-primary .insights-chart {
    min-height: 170px;
  }
}


/* Numeric Y-axis for the classic Insights traffic charts */
.insights-v4-traffic-primary .insights-chart {
  position: relative;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

.insights-axis-chart {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  width: 100%;
  height: 190px;
  min-height: 190px;
}

.insights-y-axis {
  position: relative;
  height: calc(100% - 24px);
  margin-top: 2px;
}

.insights-y-axis span {
  position: absolute;
  right: 7px;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 6.5px;
  line-height: 1;
  white-space: nowrap;
}

.insights-y-axis span:first-child {
  transform: translateY(0);
}

.insights-y-axis span:last-child {
  transform: translateY(-100%);
}

.insights-axis-plot {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.insights-y-grid {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: calc(100% - 24px);
  pointer-events: none;
}

.insights-y-grid i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-soft);
  opacity: .65;
}

.insights-axis-bars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 100%;
  height: 100%;
  padding-top: 2px;
}

.insights-axis-bars .insights-bar-wrap {
  height: 100%;
  min-width: 28px;
  flex: 1 0 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.insights-axis-bars .insights-bar {
  max-height: calc(100% - 24px);
}

.insights-axis-bars .insights-bar-label {
  flex: 0 0 20px;
  min-height: 20px;
  padding-top: 4px;
}

@media(max-width:800px) {
  .insights-axis-chart {
    grid-template-columns: 30px minmax(0, 1fr);
    height: 170px;
    min-height: 170px;
  }

  .insights-y-axis span {
    right: 5px;
    font-size: 6px;
  }

  .insights-axis-bars {
    gap: 5px;
  }
}


/* Show numeric values above each traffic-chart bar */
.insights-axis-bars .insights-bar-wrap {
  position: relative;
}

.insights-axis-bars .insights-bar-value {
  flex: 0 0 auto;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 6.5px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.insights-axis-bars .insights-bar {
  margin-top: auto;
}

@media(max-width:800px) {
  .insights-axis-bars .insights-bar-value {
    font-size: 6px;
    margin-bottom: 3px;
  }
}


/* Keep each value directly above its own bar */
.insights-axis-bars .insights-bar-wrap {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 20px;
  justify-items: stretch;
}

.insights-axis-bars .insights-bar-stack {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.insights-axis-bars .insights-bar-value {
  flex: 0 0 auto;
  margin-bottom: 4px;
}

.insights-axis-bars .insights-bar {
  margin-top: 0 !important;
  align-self: stretch;
}


/* Fix percentage bar geometry: plot row has a definite height and both the
   bar and its value label are anchored to the same zero baseline. */
.insights-axis-bars .insights-bar-wrap {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 20px !important;
  height: 100% !important;
  min-height: 0 !important;
  justify-items: stretch !important;
}

.insights-axis-bars .insights-bar-stack {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.insights-axis-bars .insights-bar-stack .insights-bar {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: min(68%, 18px) !important;
  min-width: 7px !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: 4px 4px 1px 1px !important;
}

.insights-axis-bars .insights-bar-stack .insights-bar-value {
  position: absolute !important;
  left: 50% !important;
  z-index: 3 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: var(--text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.insights-axis-bars .insights-bar-label {
  align-self: end !important;
}

@media(max-width:800px) {
  .insights-axis-bars .insights-bar-stack .insights-bar-value {
    font-size: 6.5px !important;
  }
}


.insights-v5-filter-history-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 9px;
  padding: 9px 11px;
  border: 1px solid rgba(227, 179, 65, .28);
  border-radius: 9px;
  background: rgba(227, 179, 65, .045);
}

.insights-v5-filter-history-note strong {
  flex: 0 0 auto;
  color: var(--accent-gold);
  font-size: 8px;
}

.insights-v5-filter-history-note span {
  color: var(--text-muted);
  font-size: 7.5px;
  line-height: 1.4;
}

@media(max-width:800px) {
  .insights-v5-filter-history-note {
    display: block;
  }

  .insights-v5-filter-history-note strong,
  .insights-v5-filter-history-note span {
    display: block;
  }

  .insights-v5-filter-history-note span {
    margin-top: 4px;
  }
}


/* Traffic chart V2 geometry: clean integer ticks for small values and
   permanent headroom for numeric labels above maximum-height bars. */
.insights-axis-chart {
  --insights-label-headroom: 18px;
}

.insights-y-axis,
.insights-y-grid {
  height: calc(100% - 24px - var(--insights-label-headroom)) !important;
  margin-top: var(--insights-label-headroom) !important;
}

.insights-y-grid {
  top: 0 !important;
}

.insights-axis-bars .insights-bar-stack {
  height: calc(100% - var(--insights-label-headroom)) !important;
  margin-top: var(--insights-label-headroom) !important;
}

.insights-axis-bars .insights-bar-stack .insights-bar-value {
  color: var(--text) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px var(--bg) !important;
}


/* =========================================================
   FINAL PILL INTERACTION COLORS
   ========================================================= */

/* Game pills: preserve their gold/orange identity on hover/focus. */
.clean-game-pill.filter-pill-btn:hover,
.clean-game-pill.filter-pill-btn:focus-visible {
  color: var(--accent-gold) !important;
  border-color: rgba(227, 179, 65, .62) !important;
  background: rgba(227, 179, 65, .14) !important;
  box-shadow:
    0 0 0 2px rgba(227, 179, 65, .12),
    0 4px 12px rgba(0, 0, 0, .18) !important;
}

/* OVERVIEW Graded / Sealed / Raw Condition:
   these badges are intentionally black. Hovering and selecting them should
   never turn them teal. The active-filter chips below communicate selection. */
.overview-grade-overlay.filter-pill-btn,
.overview-grade-overlay.filter-pill-btn:hover,
.overview-grade-overlay.filter-pill-btn:focus-visible,
.overview-grade-overlay.filter-pill-btn.pill-selected,
.overview-grade-overlay.condition-filter-btn,
.overview-grade-overlay.condition-filter-btn:hover,
.overview-grade-overlay.condition-filter-btn:focus-visible,
.overview-grade-overlay.condition-filter-btn.pill-selected {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

.overview-grade-overlay.filter-pill-btn:hover,
.overview-grade-overlay.filter-pill-btn:focus-visible,
.overview-grade-overlay.filter-pill-btn.pill-selected {
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .42),
    0 0 0 2px rgba(255, 255, 255, .07) !important;
}

.overview-grade-overlay.filter-pill-btn strong,
.overview-grade-overlay.filter-pill-btn small,
.overview-grade-overlay.condition-filter-btn strong,
.overview-grade-overlay.condition-filter-btn small {
  color: #fff !important;
}

.overview-grade-overlay.filter-pill-btn small,
.overview-grade-overlay.condition-filter-btn small {
  color: rgba(255, 255, 255, .68) !important;
}

/* Availability pills: each status gets its own matching hover light. */
.clean-availability-pill[data-pill-value="Available"]:hover,
.clean-availability-pill[data-pill-value="Available"]:focus-visible {
  color: #6ee7a0 !important;
  border-color: rgba(74, 222, 128, .72) !important;
  background: rgba(74, 222, 128, .14) !important;
  box-shadow:
    0 0 0 2px rgba(74, 222, 128, .12),
    0 0 14px rgba(74, 222, 128, .18) !important;
}

.clean-availability-pill[data-pill-value="Reserved"]:hover,
.clean-availability-pill[data-pill-value="Reserved"]:focus-visible {
  color: #f1c85c !important;
  border-color: rgba(227, 179, 65, .72) !important;
  background: rgba(227, 179, 65, .15) !important;
  box-shadow:
    0 0 0 2px rgba(227, 179, 65, .12),
    0 0 14px rgba(227, 179, 65, .18) !important;
}

.clean-availability-pill[data-pill-value="Sold"]:hover,
.clean-availability-pill[data-pill-value="Sold"]:focus-visible {
  color: #fb8d8d !important;
  border-color: rgba(248, 113, 113, .72) !important;
  background: rgba(248, 113, 113, .14) !important;
  box-shadow:
    0 0 0 2px rgba(248, 113, 113, .12),
    0 0 14px rgba(248, 113, 113, .18) !important;
}

.clean-availability-pill[data-pill-value="Collection (NFS)"]:hover,
.clean-availability-pill[data-pill-value="Collection (NFS)"]:focus-visible {
  color: #ead7ff !important;
  border-color: rgba(192, 132, 252, .78) !important;
  background: rgba(147, 51, 234, .25) !important;
  box-shadow:
    0 0 0 2px rgba(192, 132, 252, .12),
    0 0 14px rgba(192, 132, 252, .20) !important;
}

/* Keep availability selection in the same status family rather than allowing
   the generic selected-pill teal rule to take over. */
.clean-availability-pill[data-pill-value="Available"].pill-selected {
  color: #6ee7a0 !important;
  border-color: rgba(74, 222, 128, .72) !important;
  background: rgba(74, 222, 128, .14) !important;
}

.clean-availability-pill[data-pill-value="Reserved"].pill-selected {
  color: #f1c85c !important;
  border-color: rgba(227, 179, 65, .72) !important;
  background: rgba(227, 179, 65, .15) !important;
}

.clean-availability-pill[data-pill-value="Sold"].pill-selected {
  color: #fb8d8d !important;
  border-color: rgba(248, 113, 113, .72) !important;
  background: rgba(248, 113, 113, .14) !important;
}

.clean-availability-pill[data-pill-value="Collection (NFS)"].pill-selected {
  color: #ead7ff !important;
  border-color: rgba(192, 132, 252, .78) !important;
  background: rgba(147, 51, 234, .25) !important;
}

body.light-mode .clean-game-pill.filter-pill-btn:hover,
body.light-mode .clean-game-pill.filter-pill-btn:focus-visible {
  color: #72530f !important;
  border-color: #b99b4e !important;
  background: #f7f0dc !important;
}


/* =========================================================
   HOVER — PRESERVE EACH PILL'S EXISTING BASE COLOR
   Hover should highlight a pill, not repaint it.
   ========================================================= */

/* Compact Graded / Sealed pills keep their normal teal fill/text. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):hover,
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):focus-visible {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .58) !important;
  box-shadow:
    0 0 0 2px rgba(95, 212, 196, .10),
    0 4px 12px rgba(0, 0, 0, .14) !important;
}

/* Compact raw Condition pills keep their existing black badge appearance. */
.clean-grade-badge.condition-filter-btn:hover,
.clean-grade-badge.condition-filter-btn:focus-visible {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .07),
    0 4px 12px rgba(0, 0, 0, .22) !important;
}

/* Overview image badges are intentionally black in the current design.
   Hover preserves that exact fill/text and only adds an outline/glow. */
.overview-grade-overlay.filter-pill-btn:hover,
.overview-grade-overlay.filter-pill-btn:focus-visible,
.overview-grade-overlay.condition-filter-btn:hover,
.overview-grade-overlay.condition-filter-btn:focus-visible {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .34) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .42),
    0 0 0 2px rgba(255, 255, 255, .08) !important;
}

.overview-grade-overlay.filter-pill-btn:hover strong,
.overview-grade-overlay.filter-pill-btn:hover small,
.overview-grade-overlay.filter-pill-btn:focus-visible strong,
.overview-grade-overlay.filter-pill-btn:focus-visible small,
.overview-grade-overlay.condition-filter-btn:hover strong,
.overview-grade-overlay.condition-filter-btn:hover small,
.overview-grade-overlay.condition-filter-btn:focus-visible strong,
.overview-grade-overlay.condition-filter-btn:focus-visible small {
  color: inherit !important;
}


/* =========================================================
   GAME PILL — HOVER / FOCUS / SELECTED MATCH BASE COLOR
   ========================================================= */

/* Dark mode: exact same foreground, border and fill as .clean-game-pill.
   Only a subtle gold glow is added for interaction feedback. */
.clean-game-pill.filter-pill-btn:hover,
.clean-game-pill.filter-pill-btn:focus-visible,
.clean-game-pill.filter-pill-btn.pill-selected {
  color: var(--accent-gold) !important;
  border-color: rgba(227, 179, 65, .22) !important;
  background: rgba(227, 179, 65, .045) !important;
  box-shadow:
    0 0 0 2px rgba(227, 179, 65, .09),
    0 4px 12px rgba(0, 0, 0, .14) !important;
}

/* Light mode: exact same colors as the normal light-mode Game pill. */
body.light-mode .clean-game-pill.filter-pill-btn:hover,
body.light-mode .clean-game-pill.filter-pill-btn:focus-visible,
body.light-mode .clean-game-pill.filter-pill-btn.pill-selected {
  color: #72530f !important;
  border-color: #c9b77f !important;
  background: #f7f0dc !important;
  box-shadow:
    0 0 0 2px rgba(185, 155, 78, .12),
    0 4px 10px rgba(0, 0, 0, .08) !important;
}


/* =========================================================
   FIX STUCK HOVER LOOK FOR GRADED / CONDITION / SEALED
   ========================================================= */

/* Selected state should NOT inherit hover/focus glow. */
.overview-grade-overlay.filter-pill-btn.pill-selected,
.overview-grade-overlay.condition-filter-btn.pill-selected,
.clean-grade-badge.filter-pill-btn.pill-selected,
.clean-grade-badge.condition-filter-btn.pill-selected {
  box-shadow: none !important;
}

/* Hover/focus keeps a temporary interaction glow only. */
.overview-grade-overlay.filter-pill-btn:hover,
.overview-grade-overlay.filter-pill-btn:focus-visible,
.overview-grade-overlay.condition-filter-btn:hover,
.overview-grade-overlay.condition-filter-btn:focus-visible {
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .42),
    0 0 0 2px rgba(255, 255, 255, .08) !important;
}

.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):hover,
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):focus-visible {
  box-shadow:
    0 0 0 2px rgba(95, 212, 196, .10),
    0 4px 12px rgba(0, 0, 0, .14) !important;
}

.clean-grade-badge.condition-filter-btn:hover,
.clean-grade-badge.condition-filter-btn:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .07),
    0 4px 12px rgba(0, 0, 0, .22) !important;
}

/* Remove persistent focus outline after pointer click, while preserving
   keyboard focus-visible accessibility. */
.filter-pill-btn:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   BADGE INTERACTION STATE FIX
   Inactive = plain. Hover = temporary glow. Selected = persistent glow.
   ========================================================= */

/* OVERVIEW Graded / Sealed / Condition — inactive state must be plain. */
.overview-grade-overlay.filter-pill-btn:not(.pill-selected):not(:hover):not(:focus-visible),
.overview-grade-overlay.condition-filter-btn:not(.pill-selected):not(:hover):not(:focus-visible) {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .42) !important;
}

/* Actual pointer hover / keyboard focus = temporary light ring. */
.overview-grade-overlay.filter-pill-btn:not(.pill-selected):hover,
.overview-grade-overlay.filter-pill-btn:not(.pill-selected):focus-visible,
.overview-grade-overlay.condition-filter-btn:not(.pill-selected):hover,
.overview-grade-overlay.condition-filter-btn:not(.pill-selected):focus-visible {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .36) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .42),
    0 0 0 2px rgba(255, 255, 255, .09) !important;
}

/* Active filter = persistent glow, even after pointer leaves. */
.overview-grade-overlay.filter-pill-btn.pill-selected,
.overview-grade-overlay.condition-filter-btn.pill-selected {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, .42),
    0 0 0 2px rgba(255, 255, 255, .13),
    0 0 12px rgba(255, 255, 255, .08) !important;
}

/* Compact Graded / Sealed — inactive is plain teal without glow. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):not(.pill-selected):not(:hover):not(:focus-visible) {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .28) !important;
  box-shadow: none !important;
}

/* Compact Graded / Sealed — temporary hover. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):not(.pill-selected):hover,
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):not(.pill-selected):focus-visible {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .58) !important;
  box-shadow:
    0 0 0 2px rgba(95, 212, 196, .10),
    0 4px 12px rgba(0, 0, 0, .14) !important;
}

/* Compact Graded / Sealed — persistent active glow. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn).pill-selected {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .62) !important;
  box-shadow:
    0 0 0 2px rgba(95, 212, 196, .13),
    0 0 12px rgba(95, 212, 196, .10) !important;
}

/* Compact Condition — same state behavior, black base. */
.clean-grade-badge.condition-filter-btn:not(.pill-selected):not(:hover):not(:focus-visible) {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}

.clean-grade-badge.condition-filter-btn:not(.pill-selected):hover,
.clean-grade-badge.condition-filter-btn:not(.pill-selected):focus-visible {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .07) !important;
}

.clean-grade-badge.condition-filter-btn.pill-selected {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .38) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .10),
    0 0 12px rgba(255, 255, 255, .07) !important;
}


/* =========================================================
   VERIFIED FINAL STATE RULES — GRADED / CONDITION / SEALED
   These are intentionally last in the stylesheet.
   ========================================================= */

/* ---------- OVERVIEW BADGES ---------- */
/* INACTIVE: preserve base black pill, absolutely no glow/shadow. */
.overview-grade-overlay.filter-pill-btn,
.overview-grade-overlay.condition-filter-btn {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
}

/* HOVER/KEYBOARD FOCUS ONLY: temporary glow. */
.overview-grade-overlay.filter-pill-btn:not(.pill-selected):hover,
.overview-grade-overlay.filter-pill-btn:not(.pill-selected):focus-visible,
.overview-grade-overlay.condition-filter-btn:not(.pill-selected):hover,
.overview-grade-overlay.condition-filter-btn:not(.pill-selected):focus-visible {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .38) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .10),
    0 0 12px rgba(255, 255, 255, .07) !important;
}

/* ACTIVE FILTER: persistent glow after pointer leaves. */
.overview-grade-overlay.filter-pill-btn.pill-selected,
.overview-grade-overlay.condition-filter-btn.pill-selected {
  background: rgba(8, 9, 11, .95) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .46) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .14),
    0 0 14px rgba(255, 255, 255, .10) !important;
}

/* Keep text colors unchanged in every state. */
.overview-grade-overlay.filter-pill-btn strong,
.overview-grade-overlay.condition-filter-btn strong {
  color: #fff !important;
}

.overview-grade-overlay.filter-pill-btn small,
.overview-grade-overlay.condition-filter-btn small {
  color: rgba(255, 255, 255, .68) !important;
}

/* ---------- COMPACT GRADED / SEALED PILLS ---------- */
/* INACTIVE: native teal appearance, no glow. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn) {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .28) !important;
  box-shadow: none !important;
}

/* Temporary hover/focus glow. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):not(.pill-selected):hover,
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn):not(.pill-selected):focus-visible {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .58) !important;
  box-shadow:
    0 0 0 2px rgba(95, 212, 196, .10),
    0 0 12px rgba(95, 212, 196, .08) !important;
}

/* Persistent active glow. */
.clean-grade-badge.filter-pill-btn:not(.condition-filter-btn).pill-selected {
  background: rgba(95, 212, 196, .08) !important;
  color: var(--accent-teal) !important;
  border-color: rgba(95, 212, 196, .64) !important;
  box-shadow:
    0 0 0 2px rgba(95, 212, 196, .14),
    0 0 14px rgba(95, 212, 196, .10) !important;
}

/* ---------- COMPACT CONDITION ---------- */
/* INACTIVE: black, no glow. */
.clean-grade-badge.condition-filter-btn {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}

/* Temporary hover/focus glow. */
.clean-grade-badge.condition-filter-btn:not(.pill-selected):hover,
.clean-grade-badge.condition-filter-btn:not(.pill-selected):focus-visible {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .08),
    0 0 12px rgba(255, 255, 255, .05) !important;
}

/* Persistent active glow. */
.clean-grade-badge.condition-filter-btn.pill-selected {
  background: #0b0c0f !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .40) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .12),
    0 0 14px rgba(255, 255, 255, .08) !important;
}


/* Giveaway form: make How to Enter comfortable for multi-step instructions. */
#giveawayForm .giveaway-how-to-enter-field textarea {
  min-height: 170px !important;
  line-height: 1.55;
}

/* Winner profile link on Past Winners cards. */
.giveaway-winner-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: var(--accent-teal);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.giveaway-winner-profile-link:hover,
.giveaway-winner-profile-link:focus-visible {
  color: var(--accent-gold);
  text-decoration: underline;
}

@media(max-width:600px) {
  #giveawayForm .giveaway-how-to-enter-field textarea {
    min-height: 150px !important;
  }
}


/* Owner-only Past Winners ordering controls. */
.giveaway-winner-order-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 2px;
}

.giveaway-winner-order-btn {
  min-width: 88px;
}

@media(max-width:600px) {
  .giveaway-winner-order-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .giveaway-winner-order-btn {
    min-width: 0;
  }
}


/* =========================================================
   PAST WINNERS — OWNER DRAG REORDER
   ========================================================= */
.giveaway-winner-drag-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 9px;
  user-select: none;
}

.giveaway-winner-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -3px;
  cursor: grab;
  touch-action: none;
}

.giveaway-winner-drag-handle:hover,
.giveaway-winner-drag-handle:focus-visible {
  border-color: rgba(227, 179, 65, .48);
  box-shadow: 0 0 0 2px rgba(227, 179, 65, .08);
}

.giveaway-winner-drag-handle:active {
  cursor: grabbing;
}

.giveaway-winner-card {
  transition:
    transform .14s ease,
    opacity .14s ease,
    box-shadow .14s ease,
    border-color .14s ease;
}

.giveaway-winner-card.giveaway-winner-dragging {
  opacity: .48;
  transform: scale(.985);
  border-color: rgba(227, 179, 65, .48);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .28),
    0 0 0 2px rgba(227, 179, 65, .09);
}

.giveaway-winner-grid-dragging .giveaway-winner-card:not(.giveaway-winner-dragging) {
  transition: transform .12s ease;
}

@media(max-width:700px) {
  .giveaway-winner-drag-hint {
    font-size: 8.5px;
  }

  .giveaway-winner-drag-handle {
    min-width: 34px;
    height: 30px;
  }
}


/* Drag handle is the actual draggable element. */
.giveaway-winner-grid-dragging {
  cursor: grabbing;
}


/* =========================================================
   PAST WINNERS — EXPLICIT REARRANGE MODE
   ========================================================= */
.giveaway-winner-section-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#toggleWinnerRearrangeBtn.active {
  color: var(--accent-gold);
  border-color: rgba(227, 179, 65, .62);
  background: rgba(227, 179, 65, .10);
  box-shadow: 0 0 0 2px rgba(227, 179, 65, .08);
}

.giveaway-rearrange-mode .giveaway-winner-card {
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-color: rgba(227, 179, 65, .24);
}

.giveaway-rearrange-mode .giveaway-winner-card:hover {
  border-color: rgba(227, 179, 65, .52);
  box-shadow: 0 0 0 2px rgba(227, 179, 65, .08);
}

.giveaway-rearrange-mode .giveaway-winner-card:active {
  cursor: grabbing;
}

.giveaway-winner-pointer-dragging {
  opacity: .93;
  transform: scale(.99);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .42),
    0 0 0 2px rgba(227, 179, 65, .24) !important;
}

.giveaway-winner-placeholder {
  border: 2px dashed rgba(227, 179, 65, .52);
  border-radius: 12px;
  background: rgba(227, 179, 65, .055);
  box-sizing: border-box;
}

body.giveaway-rearranging-body {
  cursor: grabbing !important;
  user-select: none !important;
}

.giveaway-rearrange-mode .giveaway-owner-actions {
  pointer-events: none;
  opacity: .38;
}

.giveaway-rearrange-mode .giveaway-winner-profile-link {
  pointer-events: none;
}

@media(max-width:700px) {
  .giveaway-winner-section-actions {
    width: 100%;
    justify-content: space-between;
  }

  #toggleWinnerRearrangeBtn {
    flex: 1;
  }
}


/* =========================================================
   DESKTOP NAV — RESTORE SHOWCASE PRIMARY TAB
   An older desktop rule hid Showcase with display:none!important.
   Keep this final override last so Showcase is visible on PC.
   ========================================================= */
@media (min-width:801px) {
  nav.mainnav>a[data-route="showcase"] {
    display: flex !important;
    order: 6 !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Avoid showing a duplicate Showcase inside More on desktop. */
  nav.mainnav>.mobile-more-menu>a[data-route="showcase"] {
    display: none !important;
  }
}


/* =========================================================
   PAST WINNERS — CONSISTENT CARD ALIGNMENT
   Reserve consistent space for variable-length title/meta text and
   anchor owner controls to the bottom of each winner card.
   ========================================================= */
.giveaway-grid#pastWinnersGrid {
  align-items: stretch;
}

.giveaway-grid#pastWinnersGrid .giveaway-winner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.giveaway-grid#pastWinnersGrid .giveaway-winner-card>img {
  flex: 0 0 auto;
}

.giveaway-grid#pastWinnersGrid .giveaway-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* This is the important part: every card reserves the same amount of
   space before the winner box, even if the card name wraps to 2+ lines. */
.giveaway-grid#pastWinnersGrid .giveaway-winner-summary {
  display: flex;
  flex-direction: column;
  min-height: 96px;
}

.giveaway-grid#pastWinnersGrid .giveaway-winner-summary .giveaway-title {
  line-height: 1.08;
}

.giveaway-grid#pastWinnersGrid .giveaway-winner-summary .giveaway-meta {
  line-height: 1.22;
  min-height: 27px;
}

.giveaway-grid#pastWinnersGrid .giveaway-winner-summary .giveaway-status {
  align-self: flex-start;
  margin-top: auto;
}

/* Winner information begins at the same vertical position. */
.giveaway-grid#pastWinnersGrid .giveaway-winner-name {
  width: 100%;
}

/* Optional giveaway details may vary in length, but owner controls remain
   aligned along the bottom of all cards. */
.giveaway-grid#pastWinnersGrid .giveaway-owner-actions {
  margin-top: auto !important;
  padding-top: 12px;
}

/* Cards without owner controls still stretch cleanly for public visitors. */
body:not(.owner-mode) .giveaway-grid#pastWinnersGrid .giveaway-winner-name {
  margin-bottom: 0;
}

@media(max-width:700px) {
  .giveaway-grid#pastWinnersGrid .giveaway-winner-summary {
    min-height: 88px;
  }
}


/* Current Giveaway owner visibility controls. */
.giveaway-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.giveaway-hidden-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px dashed rgba(227, 179, 65, .56);
  border-radius: 999px;
  background: rgba(227, 179, 65, .08);
  color: var(--accent-gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* =========================================================
   REVIEWS — PUBLIC + OWNER MODERATION
   ========================================================= */
.reviews-desktop-nav {
  display: none !important;
}

.review-page-head {
  align-items: flex-end;
}

.review-summary-panel {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 1px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--border);
}

.review-summary-panel>div {
  min-width: 0;
  padding: 18px;
  background: var(--surface);
}

.review-summary-score {
  display: flex;
  align-items: center;
  gap: 14px;
}

.review-summary-score>strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 38px;
  line-height: 1;
}

.review-summary-score span,
.review-summary-stat span,
.review-summary-trust span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}

.review-summary-stat,
.review-summary-trust {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-summary-stat strong,
.review-summary-trust strong {
  font-size: 16px;
}

.review-stars {
  color: var(--accent-gold);
  font-size: 13px;
  letter-spacing: 1px;
}

.review-stars-large {
  font-size: 15px;
}

.reviews-public-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: 14px;
  align-items: start;
}

.reviews-list-panel,
.review-submit-panel,
.review-owner-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.reviews-list-panel {
  padding: 16px;
}

.reviews-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.reviews-section-head h3 {
  margin: 0;
}

.reviews-section-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.reviews-section-head>span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
}

.reviews-list {
  display: grid;
  gap: 10px;
}

.review-card {
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-2);
}

.review-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-card-top time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 8.5px;
}

.reviewer-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.reviewer-line strong {
  font-size: 11px;
}

.review-verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(95, 212, 196, .32);
  border-radius: 999px;
  background: rgba(95, 212, 196, .07);
  color: var(--accent-teal);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.review-text {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-meta-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.review-meta-row span {
  padding: 4px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 8px;
}

.review-submit-panel {
  position: sticky;
  top: 76px;
  padding: 16px;
}

.review-submit-head h3 {
  margin: 3px 0 4px;
}

.review-submit-head p {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.review-submit-panel .field {
  display: block;
  margin-bottom: 11px;
}

.review-submit-panel .field>span {
  display: block;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 700;
}

.review-submit-panel .field small {
  color: var(--text-muted);
  font-weight: 500;
}

.review-submit-panel input,
.review-submit-panel select,
.review-submit-panel textarea {
  width: 100%;
}

.review-submit-panel textarea {
  min-height: 128px;
  resize: vertical;
}

.review-rating-field {
  margin-top: 2px;
}

.review-star-picker {
  display: flex;
  gap: 3px;
}

.review-star-picker button {
  appearance: none;
  border: 0;
  padding: 2px;
  background: transparent;
  color: var(--text-muted);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, color .12s ease;
}

.review-star-picker button:hover,
.review-star-picker button:focus-visible {
  transform: translateY(-1px) scale(1.06);
}

.review-star-picker button.active {
  color: var(--accent-gold);
}

.review-text-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 8px;
}

.review-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 12px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
}

.review-confirm input {
  width: auto;
  margin-top: 2px;
}

.review-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.review-submit-btn {
  width: 100%;
  justify-content: center;
}

.review-moderation-note {
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.45;
}

.review-submit-notice,
.review-setup-warning {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(95, 212, 196, .24);
  border-radius: 9px;
  background: rgba(95, 212, 196, .055);
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
}

.review-setup-warning {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  border-color: rgba(227, 179, 65, .32);
  background: rgba(227, 179, 65, .06);
}

.review-setup-warning strong {
  color: var(--accent-gold);
}

.reviews-empty,
.review-loading {
  padding: 22px;
  color: var(--text-muted);
  text-align: center;
  font-size: 10px;
}

.review-owner-panel {
  margin-top: 14px;
  padding: 16px;
}

.review-owner-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.review-owner-stats>div {
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.review-owner-stats strong {
  display: block;
  font-size: 16px;
}

.review-owner-stats span {
  color: var(--text-muted);
  font-size: 8px;
  text-transform: capitalize;
}

.review-moderation-list {
  display: grid;
  gap: 9px;
}

.review-moderation-card {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--surface-2);
}

.review-moderation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.review-moderation-head strong {
  display: block;
  margin-top: 4px;
  font-size: 10px;
}

.review-moderation-card>p {
  margin: 10px 0;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-moderation-meta,
.review-moderation-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.review-moderation-meta span {
  color: var(--text-muted);
  font-size: 8px;
}

.review-moderation-actions {
  margin-top: 10px;
}

.review-moderation-actions button {
  min-height: 31px;
}

.review-reject-btn {
  color: var(--danger) !important;
}

.review-status {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 7.5px;
  font-weight: 800;
}

.review-status-approved {
  color: var(--accent-teal);
  border-color: rgba(95, 212, 196, .30);
}

.review-status-pending {
  color: var(--accent-gold);
  border-color: rgba(227, 179, 65, .32);
}

.review-status-rejected {
  color: var(--danger);
  border-color: rgba(248, 113, 113, .28);
}

@media(min-width:801px) {
  nav.mainnav>a.reviews-desktop-nav {
    display: flex !important;
    order: 9 !important;
    flex: 0 0 auto !important;
  }

  nav.mainnav>.mobile-more-menu>a.reviews-more-nav {
    display: none !important;
  }
}

@media(min-width:801px) and (max-width:1180px) {
  nav.mainnav>a.reviews-desktop-nav {
    display: none !important;
  }

  nav.mainnav>.mobile-more-menu>a.reviews-more-nav {
    display: flex !important;
  }
}

@media(max-width:800px) {
  nav.mainnav>a.reviews-desktop-nav {
    display: none !important;
  }

  nav.mainnav>.mobile-more-menu>a.reviews-more-nav {
    display: flex !important;
  }

  .review-page-head {
    align-items: flex-start;
  }

  .review-summary-panel {
    grid-template-columns: 1fr 1fr;
  }

  .review-summary-panel .review-summary-score {
    grid-column: 1 / -1;
  }

  .review-summary-panel>div {
    padding: 13px;
  }

  .review-summary-score>strong {
    font-size: 32px;
  }

  .reviews-public-layout {
    display: flex;
    flex-direction: column;
  }

  .review-submit-panel {
    position: static;
    order: 1;
    width: 100%;
  }

  .reviews-list-panel {
    order: 2;
    width: 100%;
  }

  .review-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .review-star-picker button {
    font-size: 28px;
    min-width: 38px;
    min-height: 38px;
  }

  .review-text-meta {
    font-size: 7.5px;
  }

  .review-card {
    padding: 12px;
  }

  .review-card-top {
    gap: 8px;
  }

  .review-owner-stats {
    grid-template-columns: 1fr 1fr;
  }

  .review-moderation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .review-moderation-actions button {
    width: 100%;
    justify-content: center;
  }
}

@media(max-width:460px) {
  .review-summary-panel {
    grid-template-columns: 1fr;
  }

  .review-summary-panel .review-summary-score {
    grid-column: auto;
  }

  .review-card-top {
    display: block;
  }

  .review-card-top time {
    display: block;
    margin-top: 6px;
  }
}


.review-delete-btn {
  color: var(--danger) !important;
  border-color: rgba(248, 113, 113, .26) !important;
}

.review-delete-btn:hover,
.review-delete-btn:focus-visible {
  background: rgba(248, 113, 113, .08) !important;
  border-color: rgba(248, 113, 113, .48) !important;
}


#reviewSubmitPanel {
  scroll-margin-top: 88px;
}


/* Global social links below every page */
.page-social-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 6px;
  padding: 16px 10px 4px;
  border-top: 1px solid var(--border-soft);
}

.page-social-footer>span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
}

.collect-social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.collect-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.collect-social-icon span {
  min-width: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.collect-social-icon small {
  font-size: 7.5px;
  font-weight: 800;
}

.collect-social-icon:hover,
.collect-social-icon:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(227, 179, 65, .52);
  box-shadow: 0 0 0 2px rgba(227, 179, 65, .08);
}

.details-desktop-contact-socials {
  display: none;
}

@media(min-width:801px) {
  .details-desktop-contact-socials {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--surface-2);
  }

  .details-desktop-contact-socials>span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
  }

  .details-desktop-contact-socials .collect-social-links {
    justify-content: flex-end;
  }
}

@media(max-width:800px) {
  .details-desktop-contact-socials {
    display: none !important;
  }

  .page-social-footer {
    display: block;
    margin-top: 18px;
    padding-top: 14px;
    text-align: center;
  }

  .page-social-footer>span {
    display: block;
    margin-bottom: 9px;
  }

  .page-social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(100%, 360px);
    margin: 0 auto;
  }

  .page-social-links .collect-social-icon {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   CARD DETAILS — PROMINENT DESKTOP CONTACT CTA
   ========================================================= */
@media(min-width:801px) {
  .details-desktop-contact-socials {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(227, 179, 65, .44);
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(227, 179, 65, .09), rgba(227, 179, 65, .025)),
      var(--surface-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  }

  .details-contact-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
  }

  .details-contact-copy strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: -.01em;
    line-height: 1.25;
  }

  .details-contact-location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
  }

  .details-contact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
  }

  .details-contact-via-label {
    color: var(--text-muted) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .details-desktop-contact-socials .collect-social-links {
    gap: 9px;
    justify-content: flex-end;
  }

  .details-desktop-contact-socials .collect-social-icon {
    min-width: 58px;
    height: 42px;
    padding: 0 12px;
    border-color: rgba(227, 179, 65, .28);
    background: var(--surface-1);
    font-weight: 800;
  }

  .details-desktop-contact-socials .collect-social-icon span {
    font-size: 15px;
  }

  .details-desktop-contact-socials .collect-social-icon small {
    font-size: 9px;
  }

  .details-desktop-contact-socials .collect-social-icon:hover,
  .details-desktop-contact-socials .collect-social-icon:focus-visible {
    border-color: rgba(227, 179, 65, .72);
    box-shadow: 0 0 0 3px rgba(227, 179, 65, .10);
    transform: translateY(-2px);
  }
}


@media(min-width:801px) {
  .details-contact-description {
    display: block;
    max-width: 620px;
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.45;
  }
}


/* =========================================================
   MOBILE — KEEP PAGE FOOTER CLEAR OF SORT/FILTER OVERLAY
   ========================================================= */
@media(max-width:800px) {
  .main {
    padding-bottom: 112px !important;
  }

  .page-social-footer {
    margin-bottom: 12px;
  }
}


/* Giveaway form watermark controls */
.giveaway-watermark-control {
  margin-top: 10px;
}

#giveawayWatermarkState {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media(max-width:800px) {
  .giveaway-watermark-control {
    align-items: flex-start;
  }
}


/* =========================================================
   GIVEAWAY IMAGE FIXES
   - Keep giveaway watermark feature intact
   - Show full image in overview and preview (no crop)
   ========================================================= */
.giveaway-card>img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  background: var(--surface-2) !important;
}

.giveaway-grid#pastWinnersGrid .giveaway-winner-card>img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  background: var(--surface-2) !important;
}

.giveaway-image-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: var(--surface-2) !important;
}


/* Showcase owner drag-and-drop order */
.showcase-page-owner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.showcase-rearrange-mode .showcase-card {
  cursor: grab;
  user-select: none;
  touch-action: none;
  outline: 1px dashed rgba(227, 179, 65, .38);
  outline-offset: -3px;
}

.showcase-rearrange-mode .showcase-card:hover {
  border-color: rgba(227, 179, 65, .58);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.showcase-rearrange-mode .showcase-card:active {
  cursor: grabbing;
}

.showcase-rearrange-mode .showcase-card button,
.showcase-rearrange-mode .showcase-card a {
  pointer-events: none;
}

.showcase-pointer-dragging {
  opacity: .96;
  cursor: grabbing !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34) !important;
  transform: rotate(.35deg) scale(1.01);
}

.showcase-reorder-placeholder {
  min-width: 0;
  border: 1px dashed rgba(227, 179, 65, .68);
  border-radius: 14px;
  background: rgba(227, 179, 65, .055);
  box-shadow: inset 0 0 0 1px rgba(227, 179, 65, .05);
}

body.showcase-rearranging-body,
body.showcase-dragging-body {
  user-select: none;
}

@media(max-width:800px) {
  .showcase-page-owner-actions {
    width: 100%;
    justify-content: stretch;
  }

  .showcase-page-owner-actions button {
    flex: 1 1 auto;
  }
}


/* =========================================================
   CURRENT GIVEAWAY — COMPACT HOW-TO-ENTER PREVIEW
   ========================================================= */
.giveaway-how-preview .giveaway-how-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: pre-wrap;
}

.giveaway-how-preview .giveaway-how-text.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.giveaway-how-toggle {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-teal);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.giveaway-how-toggle:hover,
.giveaway-how-toggle:focus-visible {
  text-decoration: underline;
}

.giveaway-how-toggle[hidden] {
  display: none !important;
}


/* Insights — reset qualified view counts */
.insights-reset-views-btn {
  color: var(--danger);
  border-color: rgba(255, 91, 91, .34);
}

.insights-reset-views-btn:hover,
.insights-reset-views-btn:focus-visible {
  border-color: rgba(255, 91, 91, .64);
  box-shadow: 0 0 0 3px rgba(255, 91, 91, .08);
}

.insights-reset-modal {
  max-width: 520px;
}

.insights-reset-warning {
  margin: 10px 0 14px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 91, 91, .28);
  border-radius: 10px;
  background: rgba(255, 91, 91, .06);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.insights-reset-confirm-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

@media(max-width:800px) {
  .insights-v4-page-head .insights-reset-views-btn {
    width: 100%;
  }
}


/* =========================================================
   MOBILE CARD DETAILS PHOTO GALLERY FIX
   ========================================================= */

/* The full-screen photo viewer must sit above the sticky price / Interested bar. */
.image-lightbox {
  z-index: 5000 !important;
}

.image-lightbox-close,
.image-lightbox-download,
.image-lightbox-count,
.image-lightbox-nav {
  z-index: 5002 !important;
}

.image-lightbox-main,
.image-lightbox-thumbs,
.image-lightbox-hint {
  position: relative;
  z-index: 5001;
}

@media(max-width:800px) {

  /* Keep the photo discovery strip fully visible at the bottom of the lightbox. */
  .image-lightbox {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .image-lightbox-main {
    min-height: 0;
    height: calc(100dvh - 150px - env(safe-area-inset-bottom)) !important;
  }

  .image-lightbox-thumbs {
    flex: 0 0 auto;
    max-width: calc(100vw - 20px);
    padding-bottom: 5px;
    scroll-padding-inline: 10px;
  }

  /* Horizontal thumbnail browsing is independent from the main-image swipe. */
  .detail-thumb-strip {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================================
   PSA POP — browser-assisted sync
   ========================================================= */
.detail-psa-pop {
  display: block;
  margin-top: 4px;
  color: var(--accent-teal);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.pop-owner-status a {
  color: var(--accent-teal);
  text-decoration: none;
  font-weight: 700;
}

.pop-owner-status a:hover {
  text-decoration: underline;
}

.owner-only-field-note {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.psa-sync-waiting strong {
  color: var(--accent-teal);
}


.psa-pop-owner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.psa-pop-owner-actions a {
  font-size: 10px;
}


/* =========================================================
   PSA POP — same-tab bulk daily updater
   ========================================================= */
.psa-bulk-result {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.psa-bulk-result.ok {
  border-color: rgba(30, 180, 130, .35);
}

.psa-bulk-result.warn {
  border-color: rgba(230, 160, 50, .42);
}

.psa-bulk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.psa-bulk-stats article {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.psa-bulk-stats span,
.psa-bulk-stats small {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
}

.psa-bulk-stats strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 20px;
}

.psa-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.psa-bulk-note,
.psa-bulk-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 12px;
}

.psa-bulk-note span,
.psa-bulk-progress span {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}

.psa-bulk-list {
  display: grid;
  gap: 8px;
}

.psa-bulk-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.psa-bulk-list article>div:first-child strong,
.psa-bulk-list article>div:first-child span {
  display: block;
}

.psa-bulk-list article>div:first-child span,
.psa-bulk-list article>small {
  color: var(--text-muted);
  font-size: 9px;
}

.psa-bulk-list article>small {
  grid-column: 1/-1;
}

.psa-bulk-values {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 9px;
}

.psa-bulk-values .due {
  color: #d97706;
  font-weight: 800;
}

.psa-bulk-values .fresh {
  color: var(--accent-teal);
  font-weight: 800;
}

@media(max-width:900px) {
  .psa-bulk-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   CARD DETAILS — BACK TO RESULTS HOVER
   Keep the close/back action visually separate from teal actions.
   ========================================================= */
.modal.card-details-modal .details-primary-actions #detailsCloseBtn:hover,
.modal.card-details-modal .details-primary-actions #detailsCloseBtn:focus-visible {
  border-color: #f87171 !important;
  background: rgba(248, 113, 113, .15) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .08) !important;
}

/* A back arrow returns to a listing; it is not a destructive close action. */
@media(max-width:800px) {
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-return-action {
    border-color: rgba(227, 179, 65, .32) !important;
    background: rgba(227, 179, 65, .055) !important;
    color: #e8d39a !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-return-action:hover,
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-return-action:focus-visible {
    border-color: rgba(227, 179, 65, .68) !important;
    background: rgba(227, 179, 65, .11) !important;
    color: #fff0bd !important;
    outline: 2px solid rgba(227, 179, 65, .28) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(227, 179, 65, .06) !important;
  }
}


/* =========================================================
   COMPARE — DESKTOP SIZE IMPROVEMENTS
   Larger card images and more readable typography on PC only.
   ========================================================= */
@media(min-width:1000px) {
  .compare-grid {
    gap: 18px !important;
  }

  .compare-card {
    min-width: 0;
    padding: 16px !important;
  }

  .compare-card img,
  .compare-card-image img,
  .compare-image img,
  .compare-card .card-image {
    width: 100% !important;
    height: auto !important;
    max-height: 440px !important;
    object-fit: contain !important;
  }

  .compare-card .compare-card-image,
  .compare-card-image,
  .compare-image {
    min-height: 300px !important;
    max-height: 460px !important;
  }

  .compare-card h3,
  .compare-card h4,
  .compare-card .card-name,
  .compare-card .compare-name {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .compare-card strong,
  .compare-card .value,
  .compare-card .compare-value {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .compare-card span,
  .compare-card small,
  .compare-card p,
  .compare-card .label,
  .compare-card .compare-label,
  .compare-table,
  .compare-table th,
  .compare-table td {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .compare-table th,
  .compare-table td {
    padding: 11px 12px !important;
  }

  .compare-card .badge,
  .compare-card .pill,
  .compare-card [class*="badge"] {
    font-size: 10px !important;
  }
}


/* =========================================================
   COMPARE — DESKTOP IMAGE SIZE FIX
   Target the actual compare header image constraint.
   ========================================================= */
@media(min-width:1000px) {
  .compare-modal {
    width: min(1380px, calc(100vw - 36px)) !important;
    max-width: 1380px !important;
  }

  .compare-table {
    min-width: 980px !important;
  }

  .compare-table th,
  .compare-table td {
    min-width: 220px !important;
    padding: 14px !important;
  }

  .compare-table tbody th {
    width: 150px !important;
    min-width: 150px !important;
  }

  .compare-card-head img,
  .compare-card-no-image {
    width: 180px !important;
    height: 240px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto 12px !important;
    border-radius: 9px !important;
    background: var(--surface-2) !important;
  }

  .compare-card-head {
    text-align: center;
  }

  .compare-card-head strong {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .compare-card-head small {
    font-size: 11px !important;
  }

  .compare-remove {
    font-size: 10px !important;
    padding: 6px 9px !important;
  }
}


/* =========================================================
   INVENTORY TOOLS — MISSING CERTIFICATE DETECTOR
   ========================================================= */
.missing-cert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.missing-cert-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.missing-cert-thumb {
  width: 72px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.missing-cert-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.missing-cert-no-image {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding: 6px;
}

.missing-cert-main {
  min-width: 0;
}

.missing-cert-title {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
}

.missing-cert-code {
  margin-top: 2px;
  font-size: 11px;
}

.missing-cert-graders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.missing-cert-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, .45);
  background: rgba(248, 113, 113, .10);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 800;
}

.missing-cert-actions {
  display: flex;
  justify-content: flex-end;
}

@media(max-width:700px) {
  .missing-cert-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .missing-cert-thumb {
    width: 58px;
    height: 78px;
  }

  .missing-cert-actions {
    grid-column: 1/-1;
    justify-content: stretch;
  }

  .missing-cert-actions .btn-primary {
    width: 100%;
  }
}


/* =========================================================
   INVENTORY TOOLS — MISSING CERT SUMMARY
   ========================================================= */
.missing-cert-summary {
  display: grid;
  grid-template-columns: minmax(180px, 260px);
  gap: 8px;
  margin-bottom: 12px;
}

.missing-cert-summary article {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.missing-cert-summary span,
.missing-cert-summary small {
  display: block;
  color: var(--text-muted);
}

.missing-cert-summary span {
  font-size: 8px;
}

.missing-cert-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--accent-gold);
  font: 700 18px 'JetBrains Mono', monospace;
}

.missing-cert-summary small {
  margin-top: 3px;
  font-size: 7.5px;
}


/* =========================================================
   ADD / EDIT CARD — GRADING INPUT ALIGNMENT ONLY
   No layout, width, or input-size changes.
   ========================================================= */
@media(min-width:601px) {
  .grading-row {
    align-items: start;
  }

  .grading-row .field>label {
    min-height: 32px;
    display: flex;
    align-items: flex-end;
  }

  .grading-row .grading-remove {
    margin-top: 37px;
  }
}


/* =========================================================
   MULTIPLE GRADED SLABS
   Labels/details only — existing grading layout dimensions unchanged.
   ========================================================= */
.grading-slab-label {
  grid-column: 1 / -1;
  margin: 2px 0 -2px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.grading-row+.grading-row {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.detail-slab-list {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.detail-slab-list-head,
.detail-slab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.detail-slab-list-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.detail-slab-list-head strong {
  font-size: 11px;
}

.detail-slab-list-head span {
  color: var(--text-muted);
  font-size: 9px;
}

.detail-slab-row+.detail-slab-row {
  border-top: 1px solid var(--border);
}

.detail-slab-row>div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.detail-slab-row strong {
  font-size: 11px;
}

.detail-slab-number {
  color: var(--text-muted);
  font-size: 9px;
  white-space: nowrap;
}

.detail-slab-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 10px;
  color: var(--text-muted);
  font-size: 9px;
}

@media(max-width:600px) {
  .detail-slab-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .detail-slab-meta {
    justify-content: flex-start;
  }
}


/* =========================================================
   MULTIPLE GRADED SLABS — MOBILE POP VISIBILITY
   Ensure slab-by-slab POP/Higher metadata remains visible.
   ========================================================= */
@media(max-width:600px) {
  .detail-slab-list {
    display: block !important;
    width: 100%;
    overflow: visible !important;
  }

  .detail-slab-list-head {
    display: flex !important;
    width: 100%;
  }

  .detail-slab-row {
    display: flex !important;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .detail-slab-meta {
    display: flex !important;
    width: 100%;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .detail-slab-meta span {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: normal !important;
  }

  .detail-slab-number {
    font-size: 9px !important;
  }

  .detail-slab-row strong {
    font-size: 11px !important;
  }
}


@media(max-width:600px) {
  .detail-slab-pop {
    display: inline-flex !important;
    color: var(--text) !important;
    font-weight: 700 !important;
  }

  .detail-slab-cert {
    display: inline-flex !important;
    color: var(--text-muted) !important;
  }
}


/* =========================================================
   PSA POP — PER-CERT REFRESH BUTTON
   Replaces the old non-clickable Due/Fresh status label.
   ========================================================= */
.psa-bulk-values .psa-row-refresh {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.psa-bulk-values .psa-row-refresh.due {
  color: #d97706;
}

.psa-bulk-values .psa-row-refresh.fresh {
  color: var(--accent-teal);
}

.psa-bulk-values .psa-row-refresh:hover,
.psa-bulk-values .psa-row-refresh:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.psa-bulk-values .psa-row-refresh:disabled {
  opacity: .5;
  cursor: wait;
  text-decoration: none;
}


/* =========================================================
   CARD DETAILS — FINAL BACK TO RESULTS HOVER OVERRIDE
   Keep this after all global/teal hover rules.
   ========================================================= */
#detailsCloseBtn:hover,
#detailsCloseBtn:focus-visible,
.modal.card-details-modal #detailsCloseBtn:hover,
.modal.card-details-modal #detailsCloseBtn:focus-visible,
.modal.card-details-modal .details-primary-actions #detailsCloseBtn:hover,
.modal.card-details-modal .details-primary-actions #detailsCloseBtn:focus-visible {
  border-color: #f87171 !important;
  background: rgba(248, 113, 113, .15) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .08) !important;
}




/* =========================================================
   NAV VISIBILITY ONLY — PRESERVE ORIGINAL LAYOUT
   PC uses the original full nav layout.
   Mobile uses the original first-four + More layout.
   ========================================================= */
@media(max-width:800px) {
  nav.mainnav>a.desktop-primary-mobile-hidden {
    display: none !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="reserved"],
  nav.mainnav>.mobile-more-menu>a[data-route="showcase"],
  nav.mainnav>.mobile-more-menu>a[data-route="giveaway"],
  nav.mainnav>.mobile-more-menu>a[data-route="favorites"] {
    display: flex !important;
  }
}

@media(min-width:801px) {
  nav.mainnav>a.desktop-primary-mobile-hidden {
    display: flex !important;
  }

  /* Keep mobile-only duplicates out of the desktop layout. */
  nav.mainnav>.mobile-more-menu>a[data-route="reserved"],
  nav.mainnav>.mobile-more-menu>a[data-route="showcase"],
  nav.mainnav>.mobile-more-menu>a[data-route="giveaway"],
  nav.mainnav>.mobile-more-menu>a[data-route="favorites"] {
    display: none !important;
  }
}


/* =========================================================
   MAIN NAV — FINAL VISUAL ORDER
   Override older order rules without changing nav dimensions.
   ========================================================= */

/* ---------- Desktop ---------- */
@media(min-width:801px) {
  nav.mainnav>a[data-route="home"] {
    order: 1 !important;
  }

  nav.mainnav>a[data-route="inventory"] {
    order: 2 !important;
  }

  nav.mainnav>a[data-route="sold"] {
    order: 3 !important;
  }

  nav.mainnav>a[data-route="collection"] {
    order: 4 !important;
  }

  nav.mainnav>a[data-route="reserved"] {
    order: 5 !important;
  }

  nav.mainnav>a[data-route="showcase"] {
    order: 6 !important;
  }

  nav.mainnav>a[data-route="giveaway"] {
    order: 7 !important;
  }

  nav.mainnav>a[data-route="favorites"] {
    order: 8 !important;
  }

  nav.mainnav>a[data-route="reviews"] {
    order: 9 !important;
  }

  nav.mainnav>.mobile-more-toggle {
    order: 10 !important;
  }

  /* Other owner / secondary desktop tools remain after More. */
  nav.mainnav>a[data-route="insights"],
  nav.mainnav>a[data-route="fb-tools"],
  nav.mainnav>a[data-route="quality"],
  nav.mainnav>a[data-route="inventory-tools"],
  nav.mainnav>a[data-route="export"],
  nav.mainnav>a[data-route="add"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"] {
    order: 20 !important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:800px) {
  nav.mainnav>a[data-route="home"] {
    order: 1 !important;
  }

  nav.mainnav>a[data-route="inventory"] {
    order: 2 !important;
  }

  nav.mainnav>a[data-route="sold"] {
    order: 3 !important;
  }

  nav.mainnav>a[data-route="collection"] {
    order: 4 !important;
  }

  nav.mainnav>.mobile-more-toggle {
    order: 5 !important;
  }

  /* Keep only the first four directly visible on mobile. */
  nav.mainnav>a[data-route="reserved"],
  nav.mainnav>a[data-route="showcase"],
  nav.mainnav>a[data-route="giveaway"],
  nav.mainnav>a[data-route="favorites"],
  nav.mainnav>a[data-route="reviews"],
  nav.mainnav>a[data-route="insights"],
  nav.mainnav>a[data-route="fb-tools"],
  nav.mainnav>a[data-route="quality"],
  nav.mainnav>a[data-route="inventory-tools"],
  nav.mainnav>a[data-route="export"],
  nav.mainnav>a[data-route="add"],
  nav.mainnav>a[data-route="about"],
  nav.mainnav>a[data-route="contact"] {
    display: none !important;
  }

  nav.mainnav>.mobile-more-menu {
    order: 6 !important;
  }

  /* Requested mobile More order. */
  nav.mainnav>.mobile-more-menu>a[data-route="reserved"] {
    order: 1 !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="showcase"] {
    order: 2 !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="giveaway"] {
    order: 3 !important;
  }

  nav.mainnav>.mobile-more-menu>a[data-route="favorites"] {
    order: 4 !important;
  }
}


@media(max-width:800px) {
  nav.mainnav>.mobile-more-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
  }
}


/* =========================================================
   MOBILE MORE MENU — USE DOM ORDER
   Reserved → Showcase → Giveaway → Favorite first.
   ========================================================= */
@media(max-width:800px) {
  nav.mainnav>.mobile-more-menu>a {
    order: initial !important;
  }
}


/* =========================================================
   FINAL NAVIGATION ORDER — AUTHORITATIVE
   This block intentionally overrides all older nav order rules.
   It changes order/visibility only, not dimensions or spacing.
   ========================================================= */

/* ---------- PC / desktop ---------- */
@media(min-width:801px) {
  body .shell .sidebar nav#mainnav>a[data-route="home"] {
    order: 1 !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="inventory"] {
    order: 2 !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="sold"] {
    order: 3 !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="collection"] {
    order: 4 !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="reserved"] {
    order: 5 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="showcase"] {
    order: 6 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="giveaway"] {
    order: 7 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="favorites"] {
    order: 8 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="reviews"] {
    order: 9 !important;
  }

  body .shell .sidebar nav#mainnav>#mobileMoreToggle {
    order: 10 !important;
  }

  /* Secondary/owner controls stay after More. */
  body .shell .sidebar nav#mainnav>a[data-route="insights"],
  body .shell .sidebar nav#mainnav>a[data-route="fb-tools"],
  body .shell .sidebar nav#mainnav>a[data-route="quality"],
  body .shell .sidebar nav#mainnav>a[data-route="inventory-tools"],
  body .shell .sidebar nav#mainnav>a[data-route="export"],
  body .shell .sidebar nav#mainnav>a[data-route="add"],
  body .shell .sidebar nav#mainnav>a[data-route="about"],
  body .shell .sidebar nav#mainnav>a[data-route="contact"] {
    order: 20 !important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:800px) {

  /* The original compact layout remains: first 4 + More. */
  body .shell .sidebar nav#mainnav>a[data-route="home"] {
    order: 1 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="inventory"] {
    order: 2 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="sold"] {
    order: 3 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>a[data-route="collection"] {
    order: 4 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>#mobileMoreToggle {
    order: 5 !important;
    display: flex !important;
  }

  body .shell .sidebar nav#mainnav>#mobileMoreMenu {
    order: 6 !important;
  }

  /* Everything after Collection lives inside More on mobile. */
  body .shell .sidebar nav#mainnav>a[data-route="reserved"],
  body .shell .sidebar nav#mainnav>a[data-route="showcase"],
  body .shell .sidebar nav#mainnav>a[data-route="giveaway"],
  body .shell .sidebar nav#mainnav>a[data-route="favorites"],
  body .shell .sidebar nav#mainnav>a[data-route="reviews"],
  body .shell .sidebar nav#mainnav>a[data-route="insights"],
  body .shell .sidebar nav#mainnav>a[data-route="fb-tools"],
  body .shell .sidebar nav#mainnav>a[data-route="quality"],
  body .shell .sidebar nav#mainnav>a[data-route="inventory-tools"],
  body .shell .sidebar nav#mainnav>a[data-route="export"],
  body .shell .sidebar nav#mainnav>a[data-route="add"],
  body .shell .sidebar nav#mainnav>a[data-route="about"],
  body .shell .sidebar nav#mainnav>a[data-route="contact"] {
    display: none !important;
  }

  /* More menu uses its real DOM order, not any old CSS order values. */
  body .shell .sidebar nav#mainnav>#mobileMoreMenu>a {
    order: initial !important;
  }

  body .shell .sidebar nav#mainnav>#mobileMoreMenu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
  }
}


/* =========================================================
   INSIGHTS — VISITOR COUNTRIES
   ========================================================= */
.insights-country-card {
  margin-top: 12px;
}

.insights-country-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insights-country-row {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(120px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.insights-country-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.insights-country-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.insights-country-name span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
}

.insights-country-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.insights-country-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-teal);
}

.insights-country-value {
  min-width: 74px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}

.insights-country-value strong {
  font-size: 11px;
}

.insights-country-value span {
  color: var(--text-muted);
  font-size: 8px;
}

@media(max-width:600px) {
  .insights-country-row {
    grid-template-columns: minmax(100px, 1fr) auto;
    gap: 6px 8px;
  }

  .insights-country-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .insights-country-value {
    min-width: 58px;
  }
}






/* =========================================================
   INSIGHTS OVERVIEW FILTER PILLS — CONSISTENT HOVER BRIGHTNESS
   Preserve each pill's existing hue; normalize hover intensity only.
   ========================================================= */
#insightsOverview .filter-pill-btn:hover,
#insightsOverview button[class*="pill"]:hover,
.insights-v4-controls .filter-pill-btn:hover,
.insights-v4-filters .filter-pill-btn:hover {
  filter: brightness(1.18) saturate(1.08) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, currentColor 18%, transparent) !important,
    0 0 16px color-mix(in srgb, currentColor 28%, transparent) !important;
}




/* =========================================================
   GAME FILTER PILL — MATCH OTHER PILL INTENSITY
   Gold hue preserved; edge-only highlight, no strong inner fill.
   ========================================================= */
.clean-game-pill.filter-pill-btn:hover,
.clean-game-pill.filter-pill-btn:focus-visible,
.clean-game-pill.filter-pill-btn.pill-selected,
.clean-game-pill.filter-pill-btn.pill-selected:hover,
.clean-game-pill.filter-pill-btn.pill-selected:focus-visible {
  color: var(--accent-gold) !important;
  border-color: rgba(227, 179, 65, .48) !important;
  background: rgba(227, 179, 65, .045) !important;
  box-shadow:
    0 0 0 2px rgba(227, 179, 65, .12) !important;
  filter: brightness(1.06) saturate(1.02) !important;
}


/* Specific Past Winner link target */
.giveaway-winner-card.giveaway-linked-winner {
  outline: 2px solid rgba(227, 179, 65, .82);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(227, 179, 65, .10), 0 0 24px rgba(227, 179, 65, .18);
}

/* Giveaway Winner Post Generator */
.fb-card-list-selection-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 620px;
  overflow: auto;
}

.fb-card-list-select-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}

.fb-card-list-select-row:hover {
  border-color: rgba(78, 210, 199, .42);
}

.fb-card-list-select-row input {
  margin-top: 3px;
}

.fb-card-list-select-copy {
  min-width: 0;
}

.fb-card-list-select-copy strong,
.fb-card-list-select-copy small {
  display: block;
}

.fb-card-list-select-copy strong {
  color: var(--text);
  font-size: 12px;
}

.fb-card-list-select-copy small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}


/* Giveaway Winner Post Generator — image preview/download */
.winner-post-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

.winner-post-image-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.winner-post-image-frame {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 7px;
  background: var(--bg);
}

.winner-post-image-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.winner-post-image-copy {
  min-width: 0;
  padding-top: 6px;
}

.winner-post-image-copy strong,
.winner-post-image-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-post-image-copy strong {
  color: var(--text);
  font-size: 10px;
}

.winner-post-image-copy small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8.5px;
}

.winner-post-no-images {
  grid-column: 1/-1;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 9.5px;
  text-align: center;
}


/* =========================================================
   INVENTORY FILTERS — LARGE / HIGH-RES DESKTOP RESPONSIVENESS
   Normal laptop/mobile sizing is unchanged. On very wide CSS
   viewports, filter controls scale up for better readability.
   ========================================================= */
@media (min-width:1750px) {
  .filter-drawer-shell .filter-row {
    gap: clamp(9px, .60vw, 14px) !important;
  }

  .filter-drawer-shell .filter-row>.inventory-search-wrap {
    flex: 1 1 clamp(320px, 23vw, 470px) !important;
    min-width: clamp(300px, 20vw, 400px) !important;
  }

  .inventory-search-wrap>input,
  .filter-drawer-shell .overview-select-btn,
  .filter-drawer-shell .price-range-filter {
    min-height: clamp(42px, 2.75vw, 54px) !important;
  }

  .inventory-search-wrap>input {
    padding: clamp(10px, .70vw, 14px) clamp(12px, .82vw, 16px) !important;
    font-size: clamp(13px, .80vw, 15px) !important;
    border-radius: clamp(9px, .58vw, 11px) !important;
  }

  .filter-drawer-shell .filter-row>.overview-select {
    min-width: clamp(195px, 12.5vw, 245px) !important;
  }

  .filter-drawer-shell .overview-select-btn {
    padding:
      clamp(10px, .68vw, 14px) clamp(12px, .82vw, 17px) !important;
    gap: clamp(13px, .82vw, 17px) !important;
    font-size: clamp(13px, .80vw, 15px) !important;
    border-radius: clamp(9px, .58vw, 11px) !important;
  }

  .filter-drawer-shell .overview-select-btn i {
    width: clamp(9px, .56vw, 11px) !important;
    height: clamp(9px, .56vw, 11px) !important;
  }

  .filter-drawer-shell .overview-select-menu {
    font-size: clamp(12px, .76vw, 14px) !important;
  }

  .filter-drawer-shell .overview-select-menu button {
    min-height: clamp(38px, 2.35vw, 47px) !important;
    padding:
      clamp(8px, .56vw, 11px) clamp(10px, .70vw, 14px) !important;
    font-size: clamp(11px, .72vw, 14px) !important;
  }

  .filter-drawer-shell .price-range-filter {
    gap: clamp(6px, .42vw, 9px) !important;
    padding:
      clamp(5px, .36vw, 8px) clamp(8px, .56vw, 11px) !important;
    border-radius: clamp(9px, .58vw, 11px) !important;
  }

  .filter-drawer-shell .price-range-label {
    font-size: clamp(8.5px, .54vw, 10.5px) !important;
  }

  .filter-drawer-shell .price-range-filter input {
    width: clamp(92px, 6vw, 118px) !important;
    min-height: clamp(31px, 2vw, 40px) !important;
    padding:
      clamp(7px, .44vw, 9px) clamp(8px, .50vw, 10px) !important;
    font-size: clamp(12px, .74vw, 14px) !important;
  }

  .grade-shortcuts {
    gap: clamp(6px, .38vw, 8px) !important;
    margin-bottom: clamp(12px, .78vw, 16px) !important;
  }

  .grade-shortcuts-label {
    font-size: clamp(8.5px, .54vw, 10.5px) !important;
  }

  .grade-shortcuts button {
    padding:
      clamp(6px, .38vw, 8px) clamp(9px, .58vw, 12px) !important;
    font-size: clamp(8.5px, .54vw, 10.5px) !important;
  }

  .listing-filter-tools .quick-filters {
    gap: clamp(8px, .50vw, 11px) !important;
  }

  .listing-filter-tools .quick-filter {
    min-height: clamp(36px, 2.30vw, 46px) !important;
    padding:
      clamp(8px, .54vw, 11px) clamp(12px, .80vw, 17px) !important;
    font-size: clamp(11px, .70vw, 13.5px) !important;
  }

  .listing-filter-tools .inventory-result-count,
  .listing-filter-tools .inventory-recent-link,
  .listing-filter-tools .copy-filter-link-btn,
  .listing-filter-tools .desktop-compact-view-toggle {
    font-size: clamp(11px, .70vw, 13.5px) !important;
  }

  .listing-filter-tools .currency-preference-control,
  .listing-filter-tools .listing-per-page-control,
  .listing-filter-tools .copy-filter-link-btn,
  .listing-filter-tools .desktop-compact-view-toggle {
    min-height: clamp(38px, 2.40vw, 48px) !important;
  }

  .listing-filter-tools .currency-preference-control select,
  .listing-filter-tools .listing-per-page-control select {
    font-size: clamp(11px, .70vw, 13.5px) !important;
  }

  .filter-drawer-head strong {
    font-size: clamp(10px, .62vw, 12px) !important;
  }

  .filter-drawer-head span,
  .clear-all-filters-btn {
    font-size: clamp(8.5px, .54vw, 10.5px) !important;
  }
}

/* Extra-wide / zoomed-out desktop: cap at a comfortable larger size. */
@media (min-width:2200px) {
  .filter-drawer-shell .filter-row>.inventory-search-wrap {
    flex-basis: 500px !important;
    min-width: 430px !important;
  }

  .filter-drawer-shell .filter-row>.overview-select {
    min-width: 255px !important;
  }
}


/* Insights — grade / condition identifier for same-name cards */
.insights-card-name strong {
  display: block;
}

.insights-card-grade-condition {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}


/* Insights — clickable Top Card Performance card names */
.insights-card-link {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.insights-card-link strong {
  transition: color .15s ease, text-decoration-color .15s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

.insights-card-link:hover strong,
.insights-card-link:focus-visible strong {
  color: var(--accent-teal);
  text-decoration-color: currentColor;
}

.insights-card-link:focus-visible {
  outline: 2px solid rgba(78, 210, 199, .45);
  outline-offset: 3px;
  border-radius: 6px;
}


/* Insights — Top Card Performance row-count control */
.insights-top-card-head {
  gap: 12px;
  align-items: center;
}

.insights-top-card-limit {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
}

.insights-top-card-limit select {
  min-width: 72px;
  min-height: 32px;
  padding: 5px 26px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

@media(max-width:600px) {
  .insights-top-card-head {
    align-items: flex-start;
  }

  .insights-top-card-limit {
    width: 100%;
    justify-content: flex-end;
  }
}


/* Insights — Visitor Access Time */
.insights-access-time-card {
  margin-top: 12px;
}

.insights-access-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.insights-access-summary article {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.insights-access-summary span,
.insights-access-summary small {
  display: block;
  color: var(--text-muted);
  font-size: 8.5px;
}

.insights-access-summary strong {
  display: block;
  margin: 3px 0;
  color: var(--text);
  font-size: 17px;
}

.insights-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, .8fr);
  gap: 16px;
}

.insights-access-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.insights-access-subhead strong {
  color: var(--text);
  font-size: 10px;
}

.insights-access-subhead span {
  color: var(--text-muted);
  font-size: 8px;
}

.insights-hour-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  height: 145px;
  align-items: end;
}

.insights-hour-cell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 14px;
  gap: 4px;
  min-width: 0;
  height: 100%;
}

.insights-hour-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  border-bottom: 1px solid var(--border);
}

.insights-hour-bar i {
  display: block;
  width: min(76%, 14px);
  min-height: 0;
  border-radius: 4px 4px 1px 1px;
  background: var(--accent-teal);
  opacity: .86;
}

.insights-hour-bar b {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 7px;
  font-weight: 800;
}

.insights-hour-cell span {
  color: var(--text-muted);
  font-size: 6.5px;
  text-align: center;
  white-space: nowrap;
}

.insights-weekday-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.insights-weekday-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}

.insights-weekday-row>span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
}

.insights-weekday-row>i {
  display: block;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.insights-weekday-row>i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-gold);
}

.insights-weekday-row>strong {
  color: var(--text);
  font-size: 9px;
  text-align: right;
}

@media(max-width:800px) {
  .insights-access-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:600px) {
  .insights-access-summary {
    grid-template-columns: 1fr;
  }

  .insights-hour-grid {
    overflow-x: auto;
    grid-template-columns: repeat(24, minmax(22px, 1fr));
    padding-bottom: 4px;
  }
}


/* Insights — Device Breakdown */
.insights-device-card {
  margin-top: 12px;
}

.insights-device-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insights-device-row {
  display: grid;
  grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
}

.insights-device-copy {
  min-width: 0;
}

.insights-device-copy strong,
.insights-device-copy span {
  display: block;
}

.insights-device-copy strong {
  color: var(--text);
  font-size: 10px;
}

.insights-device-copy span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
}

.insights-device-bar {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.insights-device-bar i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent-teal);
}

.insights-device-pct {
  color: var(--text);
  font-size: 10px;
  text-align: right;
}

@media(max-width:600px) {
  .insights-device-row {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) 42px;
    gap: 7px;
  }
}


/* Insights — personal mobile analytics exclusion */
.analytics-device-exclusion-card {
  margin-top: 12px;
}

.analytics-exclusion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.analytics-exclusion-link-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.analytics-exclusion-link-wrap[hidden] {
  display: none !important;
}

.analytics-exclusion-link-wrap input {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
}

.analytics-exclusion-note {
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid rgba(227, 179, 65, .22);
  border-radius: 9px;
  background: rgba(227, 179, 65, .045);
}

.analytics-exclusion-note strong,
.analytics-exclusion-note span {
  display: block;
}

.analytics-exclusion-note strong {
  color: var(--accent-gold);
  font-size: 9px;
}

.analytics-exclusion-note span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

@media(max-width:600px) {
  .analytics-exclusion-link-wrap {
    grid-template-columns: 1fr;
  }
}


/* Analytics exclusion pairing */
.analytics-pairing-panel {
  max-width: 720px;
}

.analytics-pairing-status {
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.analytics-pairing-status.is-excluded {
  border-color: rgba(78, 210, 199, .42);
  background: rgba(78, 210, 199, .07);
}

.analytics-pairing-status strong,
.analytics-pairing-status span {
  display: block;
}

.analytics-pairing-status strong {
  color: var(--text);
  font-size: 12px;
}

.analytics-pairing-status span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.5;
}

.analytics-pairing-form {
  margin-top: 14px;
}

.analytics-pairing-form input {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
}

.analytics-pairing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.analytics-pairing-code-output {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(227, 179, 65, .34);
  border-radius: 10px;
  background: rgba(227, 179, 65, .055);
}

.analytics-pairing-code-output[hidden] {
  display: none !important;
}

.analytics-pairing-code-output>span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 900;
}

.analytics-pairing-code-output>strong {
  color: var(--accent-gold);
  font-family: monospace;
  font-size: 22px;
  letter-spacing: .12em;
}

.analytics-pairing-code-output>small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 8px;
}

.analytics-pairing-code-output>button {
  grid-column: 3;
  grid-row: 1 / span 2;
}

@media(max-width:600px) {
  .analytics-pairing-code-output {
    grid-template-columns: 1fr;
  }

  .analytics-pairing-code-output>small,
  .analytics-pairing-code-output>button {
    grid-column: 1;
    grid-row: auto;
  }
}


/* Analytics exclusion QR */
.analytics-pairing-code-output.analytics-pairing-qr-output {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.analytics-qr-wrap {
  padding: 10px;
  border: 1px solid rgba(227, 179, 65, .34);
  border-radius: 12px;
  background: #fff;
}

.analytics-qr-canvas {
  width: 220px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analytics-qr-canvas img,
.analytics-qr-canvas canvas {
  display: block;
  width: 220px !important;
  height: 220px !important;
  max-width: 100%;
}

.analytics-qr-copy {
  min-width: 0;
}

.analytics-qr-copy>span,
.analytics-qr-copy>strong,
.analytics-qr-copy>small {
  display: block;
}

.analytics-qr-copy>span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 900;
}

.analytics-qr-copy>strong {
  margin-top: 5px;
  color: var(--accent-gold);
  font-family: monospace;
  font-size: 21px;
  letter-spacing: .11em;
  overflow-wrap: anywhere;
}

.analytics-qr-copy>small {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 8.5px;
  line-height: 1.45;
}

.analytics-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

@media(max-width:700px) {
  .analytics-pairing-code-output.analytics-pairing-qr-output {
    grid-template-columns: 1fr;
  }

  .analytics-qr-wrap {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }
}


/* Insights — Traffic Sources */
.insights-source-card {
  margin-top: 12px;
}

.insights-source-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.insights-source-row {
  display: grid;
  grid-template-columns: 24px minmax(110px, 150px) minmax(0, 1fr) 48px;
  gap: 9px;
  align-items: center;
}

.insights-source-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 8px;
  font-weight: 900;
}

.insights-source-copy {
  min-width: 0;
}

.insights-source-copy strong,
.insights-source-copy span {
  display: block;
}

.insights-source-copy strong {
  color: var(--text);
  font-size: 10px;
}

.insights-source-copy span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
}

.insights-source-bar {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.insights-source-bar i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--accent-gold);
}

.insights-source-pct {
  color: var(--text);
  font-size: 10px;
  text-align: right;
}

@media(max-width:600px) {
  .insights-source-row {
    grid-template-columns: 22px minmax(90px, 110px) minmax(0, 1fr) 42px;
    gap: 6px;
  }
}


/* Insights — Search & Demand */
.insights-search-demand-card {
  margin-top: 12px
}

.insights-search-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px
}

.insights-search-summary article {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.insights-search-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 8px
}

.insights-search-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 17px
}

.insights-search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.insights-search-table {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.insights-search-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2)
}

.insights-search-row>span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 900;
  text-align: center
}

.insights-search-row>strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 9px
}

.insights-search-row>small {
  color: var(--text-muted);
  font-size: 7.5px;
  text-align: right
}

@media(max-width:700px) {
  .insights-search-grid {
    grid-template-columns: 1fr
  }

  .insights-search-summary {
    grid-template-columns: 1fr
  }

  .insights-search-row {
    grid-template-columns: 20px minmax(0, 1fr)
  }

  .insights-search-row>small {
    grid-column: 2;
    text-align: left
  }
}


/* Insights — Returning Visitors + Browsing Depth */
.insights-returning-card {
  margin-top: 12px
}

.insights-return-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 15px
}

.insights-return-summary article {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.insights-return-summary span,
.insights-return-summary small {
  display: block;
  color: var(--text-muted);
  font-size: 8px
}

.insights-return-summary strong {
  display: block;
  margin: 3px 0;
  color: var(--text);
  font-size: 17px
}

.insights-return-grid {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 18px
}

.insights-return-split {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.insights-return-split article {
  display: grid;
  grid-template-columns: 74px 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center
}

.insights-return-split span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800
}

.insights-return-split strong {
  color: var(--text);
  font-size: 10px;
  text-align: right
}

.insights-return-split i,
.insights-depth-row i {
  display: block;
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2)
}

.insights-return-split i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-teal)
}

.insights-return-split article+article i b {
  background: var(--accent-gold)
}

.insights-depth-list {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.insights-depth-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 36px 38px;
  gap: 8px;
  align-items: center
}

.insights-depth-row>span {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800
}

.insights-depth-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-teal)
}

.insights-depth-row>strong {
  color: var(--text);
  font-size: 9px;
  text-align: right
}

.insights-depth-row>small {
  color: var(--text-muted);
  font-size: 7.5px;
  text-align: right
}

@media(max-width:800px) {
  .insights-return-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .insights-return-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:520px) {
  .insights-return-summary {
    grid-template-columns: 1fr
  }

  .insights-depth-row {
    grid-template-columns: 58px minmax(0, 1fr) 30px 34px;
    gap: 6px
  }
}


/* Insights — Engaged Visits */
.insights-engaged-visits-card {
  margin-top: 12px
}

.insights-engaged-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px
}

.insights-engaged-summary article {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.insights-engaged-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 8px
}

.insights-engaged-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 17px
}

.engaged-visit-chart {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.engaged-visit-day {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center
}

.engaged-visit-date {
  color: var(--text);
  font-size: 8.5px;
  font-weight: 900
}

.engaged-visit-bars {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.engaged-visit-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  gap: 7px;
  align-items: center
}

.engaged-visit-line>span {
  color: var(--text-muted);
  font-size: 7.5px
}

.engaged-visit-line>i {
  display: block;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2)
}

.engaged-visit-line>i>b {
  display: block;
  height: 100%;
  border-radius: inherit
}

.engaged-visits-total {
  background: var(--accent-teal)
}

.engaged-visits-active {
  background: var(--accent-gold)
}

.engaged-visit-line>strong {
  color: var(--text);
  font-size: 8px;
  text-align: right
}

.engaged-visit-day>small {
  color: var(--text-muted);
  font-size: 7.5px;
  text-align: right
}

.insights-engaged-note {
  margin-top: 11px
}

.insights-duration-card {
  margin-top: 12px
}

.insights-duration-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px
}

.insights-duration-summary article {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.insights-duration-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 8px
}

.insights-duration-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 17px
}

.insights-duration-summary small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-duration-buckets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px
}

.insights-duration-bucket {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2)
}

.insights-duration-bucket span {
  display: block;
  color: var(--text-muted);
  font-size: 7.5px
}

.insights-duration-bucket strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--text)
}

.insights-duration-bucket i {
  display: block;
  height: 6px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden
}

.insights-duration-bucket i>b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-teal)
}

@media(max-width:760px) {

  .insights-duration-summary,
  .insights-duration-buckets {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px) {
  .insights-engaged-summary {
    grid-template-columns: 1fr
  }

  .engaged-visit-day {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    gap: 7px
  }

  .engaged-visit-line {
    grid-template-columns: 42px minmax(0, 1fr) 32px;
    gap: 5px
  }
}


/* Owner Add/Edit — PSA label privacy masks */
.psa-image-privacy-control {
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.psa-image-privacy-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.psa-image-privacy-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent-teal);
}

.psa-image-privacy-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.psa-image-privacy-toggle strong {
  color: var(--text);
  font-size: 9px;
}

.psa-image-privacy-toggle small {
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.35;
}

.image-preview-privacy-btn {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .66);
  color: #fff;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 7px;
  font-weight: 800;
  cursor: pointer;
}

.image-preview-privacy-btn:hover:not(:disabled) {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.image-preview-privacy-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}


/* Inventory overview — match standard PSA upload framing (1140 × 1905) */
@media(min-width:801px) {

  #invGrid.grid:not(.compact-list) .card>.thumb-wrap,
  #invGrid.grid:not(.compact-list) .card>.thumb-placeholder {
    aspect-ratio: 1140 / 1905;
  }

  #invGrid.grid:not(.compact-list) .card>.thumb-wrap .thumb {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1140 / 1905;
    object-fit: cover;
    object-position: center;
  }
}


/* Add/Edit photo watermark mode choices */
.image-preview-watermark-actions {
  flex-wrap: wrap
}

.image-preview-watermark-btn {
  white-space: nowrap
}


/* Post Generator — NFS single-card mode */
.fb-tools-switch[href*="mode=nfs"] .fb-tools-switch-icon {
  font-size: 15px
}


/* Giveaway watermark choices — Original / Logo + website / Website only */
.giveaway-watermark-choice {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media(max-width:700px) {
  .giveaway-watermark-choice {
    grid-template-columns: 1fr;
  }
}


/* Insights — Recently Viewed Cards */
.insights-recent-qualified-card {
  margin-top: 18px
}

.insights-recent-qualified-count {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.insights-recent-qualified-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.insights-recent-qualified-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  text-align: left;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
}

.insights-recent-qualified-item:hover,
.insights-recent-qualified-item:focus-visible {
  border-color: rgba(227, 179, 65, .62);
  outline: none;
  transform: translateY(-1px);
}

.insights-recent-qualified-image {
  width: 52px;
  aspect-ratio: 1140 / 1905;
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
}

.insights-recent-qualified-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.insights-recent-qualified-image i {
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  color: var(--text-muted);
}

.insights-recent-qualified-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.insights-recent-qualified-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
}

.insights-recent-qualified-copy small,
.insights-recent-qualified-copy>span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 10px;
}

.insights-recent-qualified-copy>span {
  color: var(--accent-gold);
}

.insights-recent-qualified-stats {
  min-width: 68px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.insights-recent-qualified-stats strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
}

.insights-recent-qualified-stats small {
  color: var(--text-muted);
  font-size: 9px;
  white-space: nowrap;
}

@media(max-width:800px) {
  .insights-recent-qualified-list {
    grid-template-columns: 1fr
  }

  .insights-recent-qualified-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .insights-recent-qualified-image {
    width: 48px
  }
}


/* Giveaway growth funnel */
.giveaway-growth-owner-block {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
}

.giveaway-growth-owner-block.giveaway-growth-unavailable {
  border-style: dashed;
}

.giveaway-growth-requirements {
  display: flex;
  gap: 10px 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.giveaway-growth-requirements>strong {
  width: 100%;
  font-size: 12px;
}

.giveaway-growth-requirements label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
}

.giveaway-growth-entry {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(227, 179, 65, .34);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(227, 179, 65, .07), rgba(255, 255, 255, .02));
}

.giveaway-growth-entry-head {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.giveaway-growth-entry-head>span {
  font-size: 20px
}

.giveaway-growth-entry-head h4 {
  margin: 0;
  font-size: 14px
}

.giveaway-growth-entry-head p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 10.5px;
}

.giveaway-growth-steps {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.giveaway-growth-steps>div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.giveaway-growth-steps b {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(227, 179, 65, .14);
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

.giveaway-code-box {
  margin-top: 12px;
  padding: 12px;
  text-align: center;
  border: 1px dashed rgba(227, 179, 65, .58);
  border-radius: 10px;
  background: rgba(0, 0, 0, .15);
}

.giveaway-code-box small,
.giveaway-code-box span {
  display: block;
  color: var(--text-muted);
  font-size: 9.5px;
}

.giveaway-code-box strong {
  display: block;
  margin: 4px 0;
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  letter-spacing: 1.5px;
}

.giveaway-enter-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  text-decoration: none;
}

.giveaway-explore-title {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.giveaway-growth-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.giveaway-growth-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface-1);
}

.giveaway-growth-links a:hover {
  border-color: rgba(227, 179, 65, .65);
}

.fb-giveaway-growth-summary {
  display: flex;
  gap: 5px 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 9px;
}

.fb-giveaway-growth-summary b {
  width: 100%;
  color: var(--text);
  font-size: 9.5px
}

.giveaway-performance-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.giveaway-performance-kpis article,
.giveaway-performance-actions>div {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}

.giveaway-performance-kpis span,
.giveaway-performance-actions span {
  display: block;
  color: var(--text-muted);
  font-size: 9.5px;
}

.giveaway-performance-kpis strong {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
}

.giveaway-performance-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 9px;
}

.giveaway-performance-actions>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.giveaway-performance-actions strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

@media(max-width:800px) {
  .giveaway-growth-links {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .giveaway-performance-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .giveaway-performance-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}


/* Giveaway comment + bonus actions */
.giveaway-bonus-actions-owner {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 7px;
}

.giveaway-bonus-actions-owner>strong {
  font-size: 12px
}

.giveaway-bonus-actions-owner label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
}

.giveaway-bonus-actions-owner label b {
  margin-left: auto;
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
}

.giveaway-action-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
}

.giveaway-action-link:hover {
  border-color: rgba(227, 179, 65, .68)
}

.giveaway-bonus-actions {
  margin-top: 14px;
  display: grid;
  gap: 6px
}

.giveaway-bonus-actions-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: end;
}

.giveaway-bonus-actions-head strong {
  font-size: 11px;
  color: var(--accent-gold)
}

.giveaway-bonus-actions-head span {
  font-size: 9px;
  color: var(--text-muted)
}

.giveaway-bonus-actions>a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(227, 179, 65, .28);
  border-radius: 8px;
  background: rgba(227, 179, 65, .05);
  color: var(--text);
  text-decoration: none;
  font-size: 10px;
}

.giveaway-bonus-actions>a:hover {
  border-color: rgba(227, 179, 65, .7)
}

.giveaway-bonus-actions>a b {
  flex: 0 0 auto;
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}


/* =========================================================
   GIVEAWAY OWNER FORM — ROOMIER GROWTH SETUP
   The global owner-only rule forces divs to flex; override it
   here so Growth Entry Setup stacks vertically as intended.
   ========================================================= */
body.owner-mode #giveawayForm {
  width: min(94vw, 760px);
  max-width: 760px;
  overflow-x: hidden;
}

body.owner-mode #giveawayForm .giveaway-growth-owner-block.owner-only {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
}

#giveawayForm .giveaway-growth-owner-block>.eyebrow {
  display: block;
  margin-bottom: 13px;
}

#giveawayForm .giveaway-growth-owner-block>.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
}

#giveawayForm .giveaway-growth-owner-block>.field-row .field {
  min-width: 0;
  margin: 0;
}

#giveawayForm .giveaway-growth-owner-block input[type="text"],
#giveawayForm .giveaway-growth-owner-block input[type="url"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#giveawayForm .giveaway-growth-requirements,
#giveawayForm .giveaway-bonus-actions-owner {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
}

#giveawayForm .giveaway-growth-requirements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  align-items: start;
}

#giveawayForm .giveaway-growth-requirements>strong {
  grid-column: 1 / -1;
  width: auto;
  margin-bottom: 1px;
}

#giveawayForm .giveaway-growth-requirements label,
#giveawayForm .giveaway-bonus-actions-owner label {
  min-width: 0;
  line-height: 1.35;
}

#giveawayForm .giveaway-bonus-actions-owner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#giveawayForm .giveaway-bonus-actions-owner>.hint {
  margin-top: -2px;
  margin-bottom: 2px;
}

@media(max-width:700px) {
  body.owner-mode #giveawayForm {
    width: 100%;
    max-width: 100%;
  }

  #giveawayForm .giveaway-growth-owner-block>.field-row,
  #giveawayForm .giveaway-growth-requirements {
    grid-template-columns: 1fr;
  }

  #giveawayForm .giveaway-growth-requirements>strong {
    grid-column: auto;
  }
}


/* =========================================================
   COLLECTION (NFS) — GROUP BY GAME
   Scoped entirely to #invGrid.collection-game-grouped.
   Other listing pages are untouched.
   ========================================================= */
#invGrid.collection-game-grouped {
  align-items: start;
}

#invGrid.collection-game-grouped .collection-game-group-header {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 2px;
  padding: 12px 14px;
  border: 1px solid rgba(168, 85, 247, .28);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(168, 85, 247, .075), rgba(168, 85, 247, .025)),
    var(--surface-1);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

#invGrid.collection-game-grouped .collection-game-group-header:first-child {
  margin-top: 0;
}

#invGrid.collection-game-grouped .collection-game-group-header:hover,
#invGrid.collection-game-grouped .collection-game-group-header:focus-visible {
  border-color: rgba(192, 132, 252, .66);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .07);
  outline: none;
}

#invGrid.collection-game-grouped .collection-game-group-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

#invGrid.collection-game-grouped .collection-game-group-main strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  letter-spacing: .15px;
}

#invGrid.collection-game-grouped .collection-game-chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(168, 85, 247, .10);
  color: #c084fc;
  font-size: 17px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}

#invGrid.collection-game-grouped .collection-game-group-header.collapsed .collection-game-chevron {
  transform: rotate(-90deg);
}

#invGrid.collection-game-grouped .collection-game-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}

#invGrid.collection-game-grouped .collection-game-card[hidden] {
  display: none !important;
}

/* Preserve the Collection card's existing PSA-photo ratio now that
   game headers are inserted into the same grid. */
@media(min-width:801px) {

  #invGrid.collection-game-grouped:not(.compact-list) .collection-game-card>.thumb-wrap,
  #invGrid.collection-game-grouped:not(.compact-list) .collection-game-card>.thumb-placeholder {
    aspect-ratio: 1140 / 1905;
  }

  #invGrid.collection-game-grouped:not(.compact-list) .collection-game-card>.thumb-wrap .thumb {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1140 / 1905;
    object-fit: cover;
    object-position: center;
  }
}

@media(max-width:800px) {
  #invGrid.collection-game-grouped .collection-game-group-header {
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 9px;
  }

  #invGrid.collection-game-grouped .collection-game-group-main strong {
    font-size: 12.5px;
  }

  #invGrid.collection-game-grouped .collection-game-count {
    font-size: 9px;
  }
}

body.light-mode #invGrid.collection-game-grouped .collection-game-group-header {
  background:
    linear-gradient(180deg, rgba(168, 85, 247, .07), rgba(168, 85, 247, .02)),
    var(--surface-1);
}


/* =========================================================
   COLLECTION (NFS) — OWNER CUSTOM ORDER
   Collection-only owner controls.
   ========================================================= */
.collection-rearrange-btn {
  min-height: 38px;
  white-space: nowrap;
}

.collection-rearrange-btn.active {
  border-color: rgba(227, 179, 65, .72);
  background: rgba(227, 179, 65, .12);
  color: var(--accent-gold);
}

#invGrid.collection-game-grouped .collection-game-group-header.rearranging {
  cursor: default;
  opacity: .82;
}

#invGrid.collection-game-grouped .collection-rearrange-card {
  position: relative;
  cursor: grab;
  user-select: none;
  outline: 1px dashed rgba(227, 179, 65, .40);
  outline-offset: -3px;
}

#invGrid.collection-game-grouped .collection-rearrange-card:active {
  cursor: grabbing;
}

#invGrid.collection-game-grouped .collection-drag-handle {
  position: absolute;
  z-index: 12;
  top: 7px;
  left: 7px;
  min-width: 34px;
  height: 26px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(227, 179, 65, .58);
  border-radius: 8px;
  background: rgba(10, 11, 14, .88);
  color: var(--accent-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: -2px;
  pointer-events: none;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
}

#invGrid.collection-game-grouped .collection-rearrange-card button,
#invGrid.collection-game-grouped .collection-rearrange-card a {
  pointer-events: none !important;
}

#invGrid.collection-game-grouped .collection-dragging {
  opacity: .55;
  transform: scale(.985);
}

#invGrid.collection-game-grouped .collection-drag-over {
  outline: 2px solid rgba(227, 179, 65, .85);
  outline-offset: -2px;
}

@media(max-width:800px) {
  .collection-rearrange-btn {
    display: none !important;
  }
}


/* Collection rearrange — draggable Game categories */
#invGrid.collection-game-grouped .collection-game-group-header.rearranging {
  cursor: grab;
  opacity: 1;
  border-style: dashed;
}

#invGrid.collection-game-grouped .collection-game-group-header.rearranging:active {
  cursor: grabbing;
}

#invGrid.collection-game-grouped .collection-game-drag-handle {
  width: 27px;
  height: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(227, 179, 65, .52);
  border-radius: 7px;
  color: var(--accent-gold);
  background: rgba(227, 179, 65, .08);
  font-size: 14px;
  line-height: 1;
}

#invGrid.collection-game-grouped .collection-game-dragging {
  opacity: .58;
}

#invGrid.collection-game-grouped .collection-game-drag-over {
  border-color: rgba(227, 179, 65, .90);
  box-shadow: 0 0 0 2px rgba(227, 179, 65, .16);
}

body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-chevron {
  opacity: .45;
}


/* Collection rearrange — Game headers remain expandable/collapsible */
body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-group-header.rearranging {
  cursor: grab;
}

body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-group-header.rearranging .collection-game-chevron {
  opacity: 1;
  cursor: pointer;
}

body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-group-header.rearranging:hover {
  border-color: rgba(227, 179, 65, .72);
}

body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-group-header.collapsed {
  margin-bottom: 8px;
}


/* =========================================================
   COLLECTION MOBILE REARRANGE
   Touch-first controls; general Owner Mode remains disabled.
   ========================================================= */
.collection-mobile-owner-bar {
  display: none;
}

@media(max-width:800px) {
  .collection-mobile-owner-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 0 12px;
  }

  .collection-mobile-owner-btn,
  .collection-mobile-owner-logout {
    min-height: 44px;
    border-radius: 11px;
  }

  .collection-mobile-owner-btn {
    width: 100%;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
  }

  .collection-mobile-owner-btn.active {
    border-color: rgba(227, 179, 65, .72);
    background: rgba(227, 179, 65, .12);
    color: var(--accent-gold);
  }

  .collection-mobile-owner-logout {
    padding-inline: 12px;
    font-size: 10px;
  }

  body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-group-header.rearranging {
    min-height: 48px;
    padding: 10px 11px;
    touch-action: pan-y;
  }

  body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-drag-handle {
    width: 40px;
    height: 36px;
    border-radius: 9px;
    font-size: 17px;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }

  body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-drag-handle {
    width: 42px;
    min-width: 42px;
    height: 38px;
    top: 8px;
    left: 8px;
    padding: 0;
    font-size: 18px;
    letter-spacing: -2px;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }

  body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-rearrange-card {
    cursor: default;
    touch-action: pan-y;
  }

  body.collection-touch-drag-active {
    overscroll-behavior-y: contain;
  }

  #invGrid.collection-game-grouped .collection-touch-dragging {
    opacity: .62;
    outline: 2px solid rgba(227, 179, 65, .82);
    outline-offset: -2px;
  }

  #invGrid.collection-game-grouped .collection-touch-target {
    box-shadow: 0 0 0 2px rgba(227, 179, 65, .45);
  }

  /* Tap the rest of the game header to expand/collapse.
     Only the handle itself captures the drag gesture. */
  body.collection-rearrange-mode #invGrid.collection-game-grouped .collection-game-group-main {
    min-height: 36px;
  }
}


/* =========================================================
   GIVEAWAY — MULTIPLE PHOTOS
   ========================================================= */
.giveaway-photo-editor-note {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.giveaway-photo-editor {
  display: grid;
  gap: 10px;
}

.giveaway-photo-selected {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 10px;
  align-items: start;
}

.giveaway-photo-selected .giveaway-image-preview {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4/3;
  position: relative;
}

.giveaway-photo-number {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font: 9px 'JetBrains Mono', monospace;
}

.giveaway-photo-selected-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.giveaway-photo-thumbs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 5px;
}

.giveaway-photo-thumb {
  position: relative;
  width: 62px;
  height: 78px;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
}

.giveaway-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}

.giveaway-photo-thumb span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 8px;
}

.giveaway-photo-thumb.active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 1px var(--accent-gold);
}

.giveaway-photo-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.giveaway-gallery {
  background: var(--surface-2);
}

.giveaway-gallery-stage {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-2);
}

.giveaway-card .giveaway-gallery-stage>img,
.giveaway-grid#pastWinnersGrid .giveaway-winner-card .giveaway-gallery-stage>img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  background: var(--surface-2) !important;
}

.giveaway-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(8, 9, 12, .68);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.giveaway-gallery-prev {
  left: 8px
}

.giveaway-gallery-next {
  right: 8px
}

.giveaway-gallery-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(8, 9, 12, .72);
  color: #fff;
  font: 9px 'JetBrains Mono', monospace;
}

.giveaway-gallery-thumbs {
  display: flex;
  gap: 6px;
  padding: 7px 8px 9px;
  overflow-x: auto;
  border-top: 1px solid var(--border-soft);
}

.giveaway-gallery-thumb {
  width: 44px;
  height: 54px;
  flex: 0 0 auto;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  opacity: .62;
}

.giveaway-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.giveaway-gallery-thumb.active {
  opacity: 1;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 1px var(--accent-gold);
}

@media(max-width:800px) {
  .giveaway-photo-selected {
    grid-template-columns: 1fr;
  }

  .giveaway-photo-selected .giveaway-image-preview {
    max-width: none;
  }

  .giveaway-photo-selected-actions .btn-ghost {
    flex: 1 1 auto;
    min-height: 40px;
  }

  .giveaway-gallery-nav {
    width: 34px;
    height: 34px;
  }

  .giveaway-gallery-thumbs {
    padding-inline: 7px;
  }
}


/* Manual collage picker: contained styles, independent of catalogue layouts. */
#collageManualPanel[hidden] {
  display: none !important;
}

.collage-picker-list {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  margin: 0;
  list-style: none;
}

.collage-picker-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.collage-picker-row input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.collage-picker-row img {
  width: 42px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.collage-picker-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.collage-picker-row strong,
.collage-picker-row small {
  display: block;
}

.collage-picker-row small {
  color: var(--muted);
  margin-top: 4px;
}

.collage-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.collage-picker-actions button {
  min-height: 38px;
}

.collage-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.collage-selected-row>span {
  min-width: 0;
  overflow-wrap: anywhere;
  flex: 1;
}

.collage-selected-row .collage-picker-actions {
  flex-shrink: 0;
}

@media(max-width:420px) {
  .collage-selected-row {
    flex-wrap: wrap;
  }

  .collage-selected-row>span {
    flex-basis: 100%;
  }
}

/* Inventory discovery: visible game families lead into one buyer-facing grid. */
.inventory-game-browser {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(227, 179, 65, .2);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(227, 179, 65, .055), rgba(255, 255, 255, .018));
}

.inventory-game-browser-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.inventory-game-browser-head .eyebrow {
  display: block;
  margin-bottom: 3px;
}

.inventory-game-browser-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.inventory-game-browser-head>span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.inventory-game-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 9px;
}

.inventory-game-tile {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(14, 16, 21, .72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.inventory-game-tile:hover,
.inventory-game-tile:focus-visible {
  border-color: rgba(227, 179, 65, .72);
  transform: translateY(-1px);
}

.inventory-game-tile.active {
  border-color: var(--accent-gold);
  background: rgba(227, 179, 65, .11);
  box-shadow: inset 0 0 0 1px rgba(227, 179, 65, .2);
}

.inventory-game-art {
  display: block;
  position: relative;
  height: 70px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(71, 88, 113, .58), rgba(20, 22, 29, .9));
}

.inventory-game-art::after {
  content: "";
  position: absolute;
  inset: 8px 31%;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(227, 179, 65, .2), transparent);
  transform: rotate(-8deg);
  pointer-events: none;
}

.inventory-game-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .88;
}

.inventory-game-art.has-game-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(26, 29, 39, .98), rgba(10, 12, 17, .96));
  isolation: isolate;
}

.inventory-game-art.has-game-logo::after {
  display: none;
}

.inventory-game-art img.inventory-game-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .46));
}

.inventory-game-logo-one-piece {
  transform: scale(1.13);
}

body:not(.light-mode) .inventory-game-logo-one-piece {
  filter: invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, .46));
}

body.light-mode .inventory-game-art.has-game-logo {
  background: linear-gradient(135deg, #fffdf8, #f3ead8);
  box-shadow: inset 0 0 0 1px rgba(128, 94, 25, .12);
}

body.light-mode .inventory-game-logo-one-piece {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .30));
}

.inventory-game-logo-hunter {
  transform: scale(1.22);
}

.inventory-game-logo-pokemon {
  transform: scale(1.14);
}

.inventory-game-logo-zatch {
  transform: translateY(-3px) scale(1.15);
}

.inventory-game-art-all {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #5f4817, #181a20);
}

.inventory-game-art>span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--font-display, Impact, sans-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .65);
}

.inventory-game-tile-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  margin-top: 8px;
}

.inventory-game-tile-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.inventory-game-tile-copy small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
}

.inventory-game-series {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.inventory-game-series-label {
  margin-right: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.inventory-game-series-chip {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.inventory-game-series-chip:hover,
.inventory-game-series-chip:focus-visible,
.inventory-game-series-chip.active {
  border-color: rgba(227, 179, 65, .7);
  background: rgba(227, 179, 65, .1);
  color: var(--accent-gold);
}

body.light-mode .inventory-game-browser {
  border-color: rgba(148, 107, 24, .26);
  background: #fbf8ef;
}

body.light-mode .inventory-game-tile {
  background: #fffdf8;
}

@media(max-width:800px) {
  .inventory-game-browser {
    margin-bottom: 12px;
    padding: 12px;
  }

  .inventory-game-browser-head {
    align-items: start;
  }

  .inventory-game-browser-head h3 {
    font-size: 16px;
  }

  .inventory-game-browser-head>span {
    max-width: 130px;
    font-size: 10px;
  }

  .inventory-game-tiles {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .inventory-game-tile {
    flex: 0 0 132px;
  }

  .inventory-game-art {
    height: 64px;
  }

  .inventory-game-art.has-game-logo {
    padding: 4px 7px;
  }

  .inventory-game-logo-one-piece {
    transform: scale(1);
  }

  .inventory-game-series {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .inventory-game-series-label {
    flex: 0 0 auto;
  }

  .inventory-game-series-chip {
    flex: 0 0 auto;
    min-height: 34px;
  }
}

/* ---------- Inventory Tools readability refresh ---------- */
.inventory-tools-switcher {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 4px 0 16px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--surface), rgba(95, 212, 196, .018));
}

.inventory-tools-switcher a {
  min-height: 70px;
  padding: 13px 14px;
  border-color: var(--border);
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}

.inventory-tools-switcher a:hover {
  border-color: rgba(95, 212, 196, .28);
  transform: translateY(-1px);
}

.inventory-tools-switcher a.active {
  border-color: rgba(95, 212, 196, .52);
  background: linear-gradient(135deg, rgba(95, 212, 196, .11), rgba(227, 179, 65, .045));
  box-shadow: 0 0 0 1px rgba(95, 212, 196, .07) inset;
}

.inventory-tools-switcher strong {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .01em;
}

.inventory-tools-switcher span {
  margin-top: 0;
  overflow: visible;
  font-size: 10.5px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

.owner-alerts-dashboard {
  margin: 0 0 18px;
  padding: 16px;
  border-radius: 14px;
}

.owner-alerts-head {
  align-items: center;
  margin-bottom: 12px;
}

.owner-alerts-head h3 {
  font-size: 15px;
  line-height: 1.3;
}

.owner-alerts-head>span {
  font-size: 10px;
}

.owner-alerts-grid {
  gap: 10px;
}

.owner-alerts-grid a {
  min-height: 76px;
  padding: 12px 13px;
  border-radius: 11px;
}

.owner-alerts-grid strong {
  font-size: 18px;
  line-height: 1.2;
}

.owner-alerts-grid span {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.3;
}

.owner-alerts-grid small {
  margin-top: 4px;
  overflow: visible;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

@media(max-width:900px) {
  .inventory-tools-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:600px) {
  .inventory-tools-switcher {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 7px;
  }

  .inventory-tools-switcher a {
    min-height: 68px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
  }

  .inventory-tools-switcher strong {
    font-size: 13px;
  }

  .inventory-tools-switcher span {
    font-size: 10px;
    text-align: left;
  }

  .owner-alerts-dashboard {
    padding: 13px;
  }

  .owner-alerts-head {
    align-items: flex-start;
  }

  .owner-alerts-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .owner-alerts-grid a {
    min-height: 74px;
    padding: 11px;
  }
}

@media(max-width:380px) {
  .owner-alerts-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Inventory Tools screenshot correction ---------- */
.inventory-tools-category-switcher {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.inventory-tools-subnav {
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 2px;
}

.inventory-tools-subnav a {
  min-height: 34px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}

.inventory-tools-subnav a.active {
  border-color: rgba(95, 212, 196, .58);
  background: rgba(95, 212, 196, .08);
  box-shadow: 0 0 0 1px rgba(95, 212, 196, .06) inset;
}

@media(max-width:800px) {
  .inventory-tools-category-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible;
  }

  .inventory-tools-category-switcher>a {
    flex: auto;
  }

  .inventory-tools-subnav {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }
}

@media(max-width:600px) {
  .inventory-tools-category-switcher {
    grid-template-columns: 1fr !important;
  }

  .inventory-tools-subnav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-tools-subnav a {
    justify-content: center;
    text-align: center;
  }
}

@media(max-width:380px) {
  .inventory-tools-subnav {
    grid-template-columns: 1fr;
  }
}