/*
 * furniture-catalog.css
 * High-end furniture catalog page — card grid, filters, pagination
 * Matches Bold Glass design language from gallery-cards-v2.css
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

.furn-catalog {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 4rem;
  min-height: 70vh;
}

.furn-catalog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.furn-catalog__title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  color: var(--text-primary, #d4d0c8);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  margin: 0;
}

.furn-catalog__count {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
  margin-left: 0.75rem;
}

/* Filter toggle */
.furn-catalog__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.06);
  border: 1px solid rgba(212,176,96,0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.32,.72,0,1);
}
.furn-catalog__filter-btn:hover {
  background: rgba(212,176,96,0.12);
  border-color: rgba(212,176,96,0.4);
  box-shadow: 0 0 20px rgba(212,176,96,0.08);
}
.furn-catalog__filter-icon {
  font-size: 0.85rem;
}

/* Controls row */
.furn-catalog__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Grid density toggle */
.furn-catalog__density {
  display: flex;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.furn-catalog__density-btn {
  padding: 0.5rem 0.65rem;
  background: none;
  border: none;
  color: var(--text-dim, #807c74);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s;
  line-height: 1;
}
.furn-catalog__density-btn + .furn-catalog__density-btn {
  border-left: 1px solid rgba(255,255,255,0.12);
}
.furn-catalog__density-btn:hover {
  color: var(--text-primary, #d4d0c8);
  background: rgba(255,255,255,0.04);
}
.furn-catalog__density-btn.active {
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.08);
}

/* Random / Discover button */
.furn-catalog__random-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(192,158,230,0.85);
  background: rgba(130,80,180,0.06);
  border: 1px solid rgba(192,158,230,0.2);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.32,.72,0,1);
}
.furn-catalog__random-btn:hover {
  background: rgba(130,80,180,0.12);
  border-color: rgba(192,158,230,0.4);
  box-shadow: 0 0 16px rgba(130,80,180,0.1);
}
.furn-catalog__random-icon {
  font-size: 0.8rem;
  animation: furnRandomSpin 4s linear infinite;
}
@keyframes furnRandomSpin {
  0%, 80% { transform: rotate(0deg); }
  90% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════
   2. ACTIVE FILTER CHIPS
   ═══════════════════════════════════════════════════════════════════════ */

.furn-catalog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.furn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.08);
  border: 1px solid rgba(212,176,96,0.2);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.25s;
}
.furn-chip:hover {
  background: rgba(212,176,96,0.15);
  border-color: rgba(212,176,96,0.4);
}
.furn-chip__x {
  font-size: 0.7rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.furn-chip:hover .furn-chip__x {
  opacity: 1;
}
.furn-chip--clear {
  color: var(--text-dim, #807c74);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.furn-chip--clear:hover {
  color: var(--text-primary, #d4d0c8);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. CARD GRID
   ═══════════════════════════════════════════════════════════════════════ */

.furn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Compact density variant */
.furn-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.furn-grid--compact .furn-card__img-wrap {
  aspect-ratio: 4 / 3;
}
.furn-grid--compact .furn-card__body {
  padding: 0.6rem 0.75rem 0.75rem;
}
.furn-grid--compact .furn-card__name {
  font-size: 0.82rem;
}
.furn-grid--compact .furn-card__name-alt {
  font-size: 0.7rem;
  margin-bottom: 0.3rem;
}
.furn-grid--compact .furn-card__desc {
  display: none;
}
.furn-grid--compact .furn-card__acquire {
  display: none;
}
.furn-grid--compact .furn-card__meta {
  margin-bottom: 0.3rem;
}
.furn-grid--compact .furn-card__footer {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
}

@media (max-width: 600px) {
  .furn-grid,
  .furn-grid--compact {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   4. CARD — BOLD GLASS
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card {
  --furn-quality: #a09c94;
  --furn-bg: #12111a;

  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--furn-bg) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--furn-quality) 15%, rgba(255,255,255,0.06));
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    0 0 40px color-mix(in srgb, var(--furn-quality) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.05);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.4s cubic-bezier(.32,.72,0,1),
    border-color 0.4s cubic-bezier(.32,.72,0,1),
    box-shadow 0.4s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}

@media (hover: hover) {
  .furn-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--furn-quality) 40%, rgba(255,255,255,0.06));
    box-shadow:
      0 12px 40px rgba(0,0,0,0.35),
      0 0 48px color-mix(in srgb, var(--furn-quality) 20%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .furn-card:hover .furn-card__img {
    transform: scale(1.04);
  }

  .furn-card:hover .furn-card__icons {
    opacity: 1;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   5. CARD IMAGE
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: rgba(255,255,255,0.03);
}

.furn-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(.32,.72,0,1);
}

/* Bottom gradient for readability */
.furn-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    color-mix(in srgb, var(--furn-bg) 55%, transparent) 75%,
    color-mix(in srgb, var(--furn-bg) 90%, transparent) 100%
  );
  pointer-events: none;
}

/* Quality dot — glowing indicator */
.furn-card__quality-dot {
  position: absolute;
  bottom: 0.6rem;
  left: 0.75rem;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--furn-quality);
  box-shadow:
    0 0 6px var(--furn-quality),
    0 0 14px color-mix(in srgb, var(--furn-quality) 50%, transparent);
}

/* No-image placeholder */
.furn-card__no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.04) 100%);
  color: var(--text-dim, #807c74);
  font-size: 2rem;
  opacity: 0.3;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. SOURCE BADGE (top-right of image)
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__source-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(8,8,12,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  transition: all 0.3s;
}
.furn-card__source-icon {
  font-size: 0.65rem;
  color: var(--gold-accent, #d4b060);
}

@media (hover: hover) {
  .furn-card:hover .furn-card__source-badge {
    background: rgba(8,8,12,0.85);
    border-color: rgba(255,255,255,0.18);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   6b. ACQUISITION DETAILS (in card body)
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__acquire {
  margin-top: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}

.furn-card__acquire-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.15rem 0;
}
.furn-card__acquire-row + .furn-card__acquire-row {
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 0.15rem;
  padding-top: 0.25rem;
}

.furn-card__acquire-icon {
  flex-shrink: 0;
  font-size: 0.65rem;
  line-height: 1.3;
  width: 1rem;
  text-align: center;
}
.furn-card__acquire-icon--achievement { color: #f0d35a; }
.furn-card__acquire-icon--gold        { color: #e8c840; }
.furn-card__acquire-icon--vendor      { color: #8ab4d8; }

.furn-card__acquire-text {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(212,208,200,0.7);
}

/* Bind type */
.furn-card__bind {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160,156,148,0.5);
}


/* ═══════════════════════════════════════════════════════════════════════
   7. CARD BODY
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.85rem 1rem 1rem;
  background: color-mix(in srgb, var(--furn-bg) 40%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.furn-card__name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text-primary, #d4d0c8);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  margin-bottom: 0.15rem;
}

.furn-card__name-alt {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.78rem;
  color: var(--text-dim, #807c74);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.furn-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.furn-card__category {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
}

.furn-card__theme {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(192,158,230,0.7);
  border: 1px solid rgba(192,158,230,0.2);
  padding: 0.1em 0.45em;
  border-radius: 3px;
}

.furn-card__desc {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(212,208,200,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.furn-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.furn-card__price {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: #e8c840;
}
.furn-card__price-icon {
  font-size: 0.7rem;
  margin-right: 0.2rem;
}

/* teso-decor link (Russian only) */
.furn-card__decor-link {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
  text-decoration: none;
  transition: color 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.furn-card__decor-link:hover {
  color: var(--gold-accent, #d4b060);
}
.furn-card__decor-arrow {
  font-size: 0.6rem;
  transition: transform 0.25s;
}
.furn-card__decor-link:hover .furn-card__decor-arrow {
  transform: translateX(2px);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. PAGINATION
   ═══════════════════════════════════════════════════════════════════════ */

.furn-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(50,48,58,0.12);
}

.furn-pagination__btn {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  padding: 0.45em 0.9em;
  border: 1px solid var(--border-card, #22212c);
  background: none;
  color: var(--text-dim, #807c74);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(.32,.72,0,1);
}
.furn-pagination__btn:hover {
  border-color: rgba(160,160,170,0.25);
  color: var(--text-primary, #d4d0c8);
  background: rgba(255,255,255,0.03);
}
.furn-pagination__btn.active {
  border-color: rgba(212,176,96,0.35);
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.06);
  box-shadow: 0 0 12px rgba(212,176,96,0.08);
}
.furn-pagination__btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.furn-pagination__dots {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.5rem;
  color: var(--text-dim, #807c74);
  letter-spacing: 0.15em;
  padding: 0 0.3rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */

.furn-empty {
  text-align: center;
  padding: 4rem 2rem;
}

.furn-empty__icon {
  font-size: 2.5rem;
  color: rgba(212,176,96,0.15);
  margin-bottom: 1rem;
  display: block;
}

.furn-empty__title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--text-primary, #d4d0c8);
  margin-bottom: 0.5rem;
}

.furn-empty__divider {
  font-size: 0.45rem;
  letter-spacing: 0.5em;
  color: rgba(212,176,96,0.2);
  margin: 1rem auto;
}

.furn-empty__text {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 1rem;
  color: var(--text-dim, #807c74);
}

.furn-empty__clear {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1.5rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.06);
  border: 1px solid rgba(212,176,96,0.2);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
}
.furn-empty__clear:hover {
  background: rgba(212,176,96,0.12);
  border-color: rgba(212,176,96,0.4);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. FILTER PANEL OVERRIDES (furniture-specific)
   ═══════════════════════════════════════════════════════════════════════ */

/* Re-use community.css .filter-panel base — these are furniture additions */
.furn-filter__quality-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.furn-filter__quality-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .furn-catalog {
    padding: 5rem 1rem 3rem;
  }
  .furn-catalog__title {
    font-size: 1.4rem;
  }
  .furn-catalog__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .furn-catalog__controls {
    width: 100%;
    justify-content: space-between;
  }
  .furn-catalog__random-btn span:not(.furn-catalog__random-icon) {
    display: none;
  }
}

@media (max-width: 480px) {
  .furn-catalog {
    padding: 4.5rem 0.75rem 2rem;
  }
  .furn-catalog__title {
    font-size: 1.2rem;
  }
  .furn-card__name {
    font-size: 0.88rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   12. PREMIUM SEARCH ANIMATION
   ═══════════════════════════════════════════════════════════════════════ */

/* Search overlay with ripple */
.furn-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(.32,.72,0,1);
}
.furn-search-overlay.active {
  opacity: 1;
  pointer-events: auto;
  background: rgba(4,4,8,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Expanding ripple ring from origin point */
.furn-search-overlay__ripple {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212,176,96,0.15) 0%,
    rgba(212,176,96,0.05) 40%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition: none;
}
.furn-search-overlay.active .furn-search-overlay__ripple {
  width: 200vmax;
  height: 200vmax;
  transition: width 0.8s cubic-bezier(.16,.84,.44,1), height 0.8s cubic-bezier(.16,.84,.44,1);
}

/* Loading text */
.furn-search-overlay__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  opacity: 0;
  transition: opacity 0.3s 0.2s, transform 0.4s 0.2s cubic-bezier(.32,.72,0,1);
}
.furn-search-overlay.active .furn-search-overlay__text {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.furn-search-overlay__icon {
  animation: furnSearchPulse 1s ease-in-out infinite;
}
@keyframes furnSearchPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Card visibility animation (IntersectionObserver) */
.furn-card {
  opacity: 0;
  transform: translateY(18px);
}
.furn-card--visible {
  animation: furnCardReveal 0.5s cubic-bezier(.32,.72,0,1) forwards;
  animation-delay: calc(var(--stagger, 0) * 0.04s);
}
@keyframes furnCardReveal {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search input glow when typing */
.filter-panel__input.has-value {
  border-color: rgba(212,176,96,0.4) !important;
  box-shadow: 0 0 0 3px rgba(212,176,96,0.08), 0 0 20px rgba(212,176,96,0.06) !important;
}

/* Shimmer skeleton placeholder for loading */
@keyframes furnShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.furn-card--skeleton {
  pointer-events: none;
}
.furn-card--skeleton .furn-card__img-wrap,
.furn-card--skeleton .furn-card__name,
.furn-card--skeleton .furn-card__desc {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 800px 100%;
  animation: furnShimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
.furn-card--skeleton .furn-card__name {
  height: 1rem;
  width: 80%;
  margin-bottom: 0.5rem;
}
.furn-card--skeleton .furn-card__desc {
  height: 0.7rem;
  width: 60%;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .furn-card {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .furn-card--visible {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .furn-search-overlay,
  .furn-search-overlay__ripple,
  .furn-search-overlay__text,
  .furn-search-overlay__icon {
    transition: none !important;
    animation: none !important;
  }
  .furn-catalog__random-icon {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   14. PRICE RANGE FILTER CHIPS
   ═══════════════════════════════════════════════════════════════════════ */

.furn-price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.furn-price-chip {
  padding: 0.35rem 0.65rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s;
}
.furn-price-chip:hover {
  color: #e8c840;
  border-color: rgba(232,200,64,0.25);
  background: rgba(232,200,64,0.06);
}
.furn-price-chip.active {
  color: #e8c840;
  border-color: rgba(232,200,64,0.4);
  background: rgba(232,200,64,0.1);
  box-shadow: 0 0 12px rgba(232,200,64,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   15. STATS DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */

.furn-catalog__stats-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.furn-catalog__stats-btn:hover,
.furn-catalog__stats-btn.active {
  color: var(--gold-accent, #d4b060);
  border-color: rgba(212,176,96,0.3);
  background: rgba(212,176,96,0.06);
}

.furn-stats {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(8,8,12,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212,176,96,0.1);
  border-radius: 12px;
  animation: furnStatsIn 0.3s cubic-bezier(.32,.72,0,1) both;
}
@keyframes furnStatsIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.furn-stats__row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.furn-stats__total-num {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 2rem;
  color: var(--gold-accent, #d4b060);
  line-height: 1;
}
.furn-stats__total-label {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
  margin-top: 0.3rem;
}
.furn-stats__section-label {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  margin-bottom: 0.5rem;
}
.furn-stats__bar-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.furn-stats__bar-label {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.42rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 5.5rem;
  text-align: right;
}
.furn-stats__bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.furn-stats__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(.32,.72,0,1);
}
.furn-stats__bar-count {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  color: var(--text-dim, #807c74);
  min-width: 2.5rem;
  text-align: right;
}
.furn-stats__list-row {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.furn-stats__list-name {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.8rem;
  color: var(--text-primary, #d4d0c8);
}
.furn-stats__list-count {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  color: var(--text-dim, #807c74);
}

@media (max-width: 768px) {
  .furn-stats__row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .furn-stats__row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   16. RECENTLY VIEWED
   ═══════════════════════════════════════════════════════════════════════ */

.furn-recent {
  margin-bottom: 1.5rem;
}
.furn-recent__label {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(212,176,96,0.5);
  margin-bottom: 0.75rem;
}
.furn-recent__scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,176,96,0.15) transparent;
}
.furn-recent__scroll::-webkit-scrollbar { height: 4px; }
.furn-recent__scroll::-webkit-scrollbar-track { background: transparent; }
.furn-recent__scroll::-webkit-scrollbar-thumb { background: rgba(212,176,96,0.15); border-radius: 2px; }
.furn-recent__card {
  flex-shrink: 0;
  width: 120px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s cubic-bezier(.32,.72,0,1);
  animation: furnRecentIn 0.4s cubic-bezier(.32,.72,0,1) both;
}
@keyframes furnRecentIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.furn-recent__card:hover {
  transform: translateY(-3px);
  border-color: rgba(212,176,96,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.furn-recent__img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.furn-recent__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.furn-recent__no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-dim);
  font-size: 1.2rem;
  opacity: 0.3;
}
.furn-recent__dot {
  position: absolute;
  bottom: 0.3rem;
  left: 0.4rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.furn-recent__name {
  padding: 0.35rem 0.4rem;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.6rem;
  line-height: 1.2;
  color: var(--text-primary, #d4d0c8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.furn-recent__divider {
  text-align: center;
  font-size: 0.45rem;
  letter-spacing: 0.5em;
  color: rgba(212,176,96,0.15);
  margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   17. QUICK PREVIEW PANEL (hover)
   ═══════════════════════════════════════════════════════════════════════ */

.furn-preview {
  display: none !important; /* Disabled - hover preview panel */
  position: fixed;
  z-index: 500;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(8,8,14,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--furn-quality, #a09c94) 20%, rgba(255,255,255,0.08));
  border-radius: 12px;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.5),
    0 0 40px color-mix(in srgb, var(--furn-quality, #a09c94) 8%, transparent);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.furn-preview.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.furn-preview__img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: rgba(255,255,255,0.02);
}
.furn-preview__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.furn-preview__body {
  padding: 0.85rem 1rem 1rem;
}
.furn-preview__name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.95rem;
  color: var(--text-primary, #d4d0c8);
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.furn-preview__alt {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.78rem;
  color: var(--text-dim, #807c74);
  margin-top: 0.15rem;
}
.furn-preview__quality {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.furn-preview__cat {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #807c74);
  margin-top: 0.2rem;
}
.furn-preview__desc {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(212,208,200,0.7);
  margin-top: 0.6rem;
  font-style: italic;
}
.furn-preview__acquire {
  margin-top: 0.6rem;
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.78rem;
  color: rgba(212,208,200,0.6);
  line-height: 1.6;
}
.furn-preview__link {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  text-decoration: none;
  transition: color 0.2s;
}
.furn-preview__link:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   18. FAVORITES
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__fav {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(8,8,12,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  line-height: 1;
}
.furn-card__fav:hover {
  color: var(--gold-accent, #d4b060);
  border-color: rgba(212,176,96,0.3);
  background: rgba(212,176,96,0.15);
}
.furn-card__fav.active {
  color: #e8445a;
  border-color: rgba(232,68,90,0.3);
  background: rgba(232,68,90,0.15);
}
.furn-card__fav.pulse {
  animation: favPulse 0.4s ease;
}
@keyframes favPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ═══════════════════════════════════════════════════════════════════════
   19. ITEM COMPARISON
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__compare {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(8,8,12,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: all 0.25s;
}
.furn-card:hover .furn-card__compare,
.furn-card__compare.active { opacity: 1; }
.furn-card__compare.active {
  color: var(--gold-accent, #d4b060);
  border-color: rgba(212,176,96,0.4);
  background: rgba(212,176,96,0.15);
}
.furn-card--comparing {
  border-color: color-mix(in srgb, var(--furn-quality) 50%, rgba(255,255,255,0.06)) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--furn-quality) 15%, transparent) !important;
}

.furn-compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: rgba(8,8,12,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212,176,96,0.15);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
  animation: compareBarIn 0.3s cubic-bezier(.32,.72,0,1) both;
}
@keyframes compareBarIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.furn-compare-bar__items { display: flex; gap: 0.4rem; }
.furn-compare-bar__thumb {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.furn-compare-bar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.furn-compare-bar__remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(220,60,60,0.8);
  border: none;
  color: #fff;
  font-size: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.furn-compare-bar__btn {
  padding: 0.5rem 1.2rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.08);
  border: 1px solid rgba(212,176,96,0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s;
}
.furn-compare-bar__btn:hover:not(:disabled) {
  background: rgba(212,176,96,0.15);
  border-color: rgba(212,176,96,0.4);
}
.furn-compare-bar__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.furn-compare-bar__clear {
  font-family: var(--font-label);
  font-size: 0.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.furn-compare-bar__clear:hover { color: var(--text-primary); }

.furn-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,2,6,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.furn-compare-modal__inner {
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
  overflow: auto;
  background: rgba(10,10,16,0.95);
  border: 1px solid rgba(212,176,96,0.12);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  padding: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,176,96,0.15) transparent;
}
.furn-compare-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 1;
}
.furn-compare-modal__close:hover {
  border-color: var(--gold-accent);
  color: var(--gold-accent);
}

.furn-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.furn-compare-table th {
  padding: 0.75rem;
  text-align: center;
  vertical-align: bottom;
  border-bottom: 2px solid var(--col-quality, rgba(255,255,255,0.06));
}
.furn-compare-table__img {
  width: 180px;
  height: 135px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto 0.5rem;
  background: rgba(255,255,255,0.02);
}
.furn-compare-table__img img { width: 100%; height: 100%; object-fit: cover; }
.furn-compare-table__name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.85rem;
  color: var(--text-primary);
}
.furn-compare-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.85rem;
  color: var(--text-primary);
  vertical-align: top;
}
.furn-compare-table__label {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(212,176,96,0.5);
  white-space: nowrap;
  width: 100px;
}
.furn-compare-table__diff td { border-left: 2px solid rgba(212,176,96,0.2); }
.furn-compare-table__diff .furn-compare-table__label { border-left: 2px solid rgba(212,176,96,0.4); }

.furn-toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1.2rem;
  background: rgba(8,8,12,0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,176,96,0.2);
  border-radius: 8px;
  font-family: var(--font-label);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  z-index: 800;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 1.7s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

@media (max-width: 768px) {
  .furn-compare-table__img { width: 120px; height: 90px; }
  .furn-compare-modal__inner { padding: 1rem; }
  .furn-compare-table__name { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. CATEGORY HERO
   ═══════════════════════════════════════════════════════════════════════ */

.furn-cat-hero {
  position: relative;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--hero-img) center/cover no-repeat;
  animation: catHeroIn 0.5s cubic-bezier(.32,.72,0,1) both;
}
@keyframes catHeroIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.furn-cat-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,14,0.5) 0%, rgba(8,8,14,0.85) 100%);
  backdrop-filter: blur(4px);
}
.furn-cat-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 1rem;
}
.furn-cat-hero__name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary, #d4d0c8);
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  margin: 0 0 0.4rem;
}
.furn-cat-hero__desc {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(212,208,200,0.65);
  max-width: 500px;
  margin: 0;
}
.furn-cat-hero__count {
  margin-top: 0.6rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(212,176,96,0.2);
  border-radius: 20px;
  background: rgba(212,176,96,0.06);
}

@media (max-width: 768px) {
  .furn-cat-hero { height: 140px; }
  .furn-cat-hero__name { font-size: 1.1rem; }
  .furn-cat-hero__desc { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   21. THEME HERO STATS BAR
   ═══════════════════════════════════════════════════════════════════════ */

.furn-theme-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.6rem;
}
.furn-theme-stats__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212,208,200,0.7);
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}
.furn-theme-stats__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.furn-theme-stats__icon {
  font-size: 0.55rem;
  color: var(--gold-accent, #d4b060);
}

@media (max-width: 768px) {
  .furn-theme-stats { gap: 0.3rem; }
  .furn-theme-stats__pill { font-size: 0.38rem; padding: 0.15rem 0.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   22. POPULARITY BADGE + TRENDING
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__popularity {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.4rem;
  letter-spacing: 0.06em;
  color: rgba(212,176,96,0.5);
  margin-top: 0.3rem;
}
.furn-card__popularity--trending {
  color: #e8833a;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.furn-card__trending-icon {
  font-size: 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   23. WEEKLY SPOTLIGHT BANNER
   ═══════════════════════════════════════════════════════════════════════ */

.furn-spotlight {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 14px;
  background: rgba(10,10,16,0.6);
  border: 1px solid rgba(212,176,96,0.15);
  backdrop-filter: blur(12px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(.32,.72,0,1);
  animation: catHeroIn 0.5s cubic-bezier(.32,.72,0,1) both;
}
.furn-spotlight:hover {
  border-color: rgba(212,176,96,0.35);
  box-shadow: 0 0 30px rgba(212,176,96,0.08);
  transform: translateY(-1px);
}
.furn-spotlight__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, var(--sp-color, #d4b060) 0%, transparent 70%);
  opacity: 0.04;
  pointer-events: none;
}
.furn-spotlight__img-wrap {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(212,176,96,0.2);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(212,176,96,0.1);
}
.furn-spotlight__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.furn-spotlight__body { flex: 1; min-width: 0; }
.furn-spotlight__label {
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.furn-spotlight__diamond {
  animation: spotlight-shimmer 2s ease-in-out infinite;
}
@keyframes spotlight-shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; text-shadow: 0 0 8px rgba(212,176,96,0.5); }
}
.furn-spotlight__staff {
  font-size: 0.38rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  background: rgba(212,176,96,0.1);
  border: 1px solid rgba(212,176,96,0.2);
}
.furn-spotlight__name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.1rem;
  color: var(--text-primary, #d4d0c8);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.furn-spotlight__meta {
  display: flex;
  gap: 0.6rem;
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.82rem;
}
.furn-spotlight__theme { color: rgba(212,208,200,0.5); }
.furn-spotlight__arrow {
  font-size: 1.2rem;
  color: var(--gold-accent, #d4b060);
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s;
}
.furn-spotlight:hover .furn-spotlight__arrow {
  opacity: 0.8;
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .furn-spotlight { padding: 0.8rem 1rem; gap: 0.8rem; }
  .furn-spotlight__img-wrap { width: 60px; height: 60px; }
  .furn-spotlight__name { font-size: 0.9rem; }
  .furn-spotlight__arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. ADD TO COLLECTION MODAL
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__collect {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--text-primary, #d4d0c8);
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  z-index: 2;
}
.furn-card:hover .furn-card__collect { opacity: 1; }
.furn-card__collect:hover { background: rgba(212,176,96,0.2); border-color: rgba(212,176,96,0.3); }

.furn-collect-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.furn-collect-modal__inner {
  width: 380px;
  max-width: 90vw;
  max-height: 70vh;
  background: rgba(10,10,16,0.92);
  border: 1px solid rgba(212,176,96,0.15);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  padding: 1.5rem;
  position: relative;
  overflow-y: auto;
}
.furn-collect-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--text-dim, #807c74);
  font-size: 1rem;
  cursor: pointer;
}
.furn-collect-modal__title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1rem;
  color: var(--text-primary, #d4d0c8);
  margin: 0 0 1rem;
}
.furn-collect-modal__create {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.furn-collect-modal__input {
  flex: 1;
  padding: 0.5rem 0.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-primary, #d4d0c8);
  font-size: 0.8rem;
}
.furn-collect-modal__create-btn {
  padding: 0.5rem 0.8rem;
  background: rgba(212,176,96,0.1);
  border: 1px solid rgba(212,176,96,0.25);
  border-radius: 8px;
  color: var(--gold-accent, #d4b060);
  cursor: pointer;
  font-size: 1rem;
}
.furn-collect-modal__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-primary, #d4d0c8);
}
.furn-collect-modal__count {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-dim, #807c74);
}

/* ═══════════════════════════════════════════════════════════════════════
   25. VIEW MODE TOGGLE + LOAD MORE
   ═══════════════════════════════════════════════════════════════════════ */

.furn-catalog__view-toggle {
  display: flex;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.furn-catalog__view-btn {
  padding: 0.5rem 0.7rem;
  background: none;
  border: none;
  color: var(--text-dim, #807c74);
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  line-height: 1;
}
.furn-catalog__view-btn + .furn-catalog__view-btn {
  border-left: 1px solid rgba(255,255,255,0.12);
}
.furn-catalog__view-btn:hover { color: var(--text-primary, #d4d0c8); background: rgba(255,255,255,0.04); }
.furn-catalog__view-btn.active { color: var(--gold-accent, #d4b060); background: rgba(212,176,96,0.08); }

.furn-load-more {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
.furn-load-more__btn {
  padding: 0.7rem 2rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-accent, #d4b060);
  background: rgba(212,176,96,0.06);
  border: 1px solid rgba(212,176,96,0.2);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.32,.72,0,1);
}
.furn-load-more__btn:hover:not(:disabled) {
  background: rgba(212,176,96,0.12);
  border-color: rgba(212,176,96,0.4);
  box-shadow: 0 0 20px rgba(212,176,96,0.08);
}
.furn-load-more__btn:disabled { opacity: 0.5; cursor: default; }
.furn-load-more__btn.is-loading { pointer-events: none; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════════════
   26. BUDGET CALCULATOR
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__calc {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--gold-accent, #d4b060);
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  z-index: 2;
}
.furn-card:hover .furn-card__calc { opacity: 1; }
.furn-card__calc:hover { background: rgba(212,176,96,0.2); border-color: rgba(212,176,96,0.3); }

.furn-budget-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 700px;
  max-height: 50vh;
  background: rgba(10,10,16,0.92);
  border: 1px solid rgba(212,176,96,0.15);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  backdrop-filter: blur(16px);
  padding: 1rem 1.5rem;
  z-index: 9000;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.4);
  animation: budgetSlideUp 0.3s cubic-bezier(.32,.72,0,1) both;
}
@keyframes budgetSlideUp {
  from { transform: translateX(-50%) translateY(100%); }
  to { transform: translateX(-50%) translateY(0); }
}
.furn-budget-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.furn-budget-bar__title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.85rem;
  color: var(--gold-accent, #d4b060);
}
.furn-budget-bar__actions { display: flex; gap: 0.5rem; }
.furn-budget-bar__copy, .furn-budget-bar__clear {
  padding: 0.3rem 0.8rem;
  font-size: 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-dim, #807c74);
  cursor: pointer;
}
.furn-budget-bar__items {
  max-height: 200px;
  overflow-y: auto;
}
.furn-budget-bar__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.75rem;
  color: var(--text-primary, #d4d0c8);
}
.furn-budget-bar__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.furn-budget-bar__qty { display: flex; align-items: center; gap: 0.3rem; }
.furn-budget-bar__qty button {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary); cursor: pointer; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.furn-budget-bar__price { color: var(--gold-accent, #d4b060); font-family: var(--font-label, 'Cinzel', serif); font-size: 0.6rem; min-width: 60px; text-align: right; }
.furn-budget-bar__remove { background: none; border: none; color: #e06070; cursor: pointer; font-size: 0.7rem; padding: 0.2rem; }
.furn-budget-bar__total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(212,176,96,0.15);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.85rem;
  color: var(--gold-accent, #d4b060);
}

/* ═══════════════════════════════════════════════════════════════════════
   27. NEW ITEM BADGE
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__new-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #2dc50e;
  padding: 0.12rem 0.5rem;
  border-radius: 10px;
  z-index: 2;
  box-shadow: 0 0 8px rgba(45,197,14,0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   28. RATING ON CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__rating {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.4rem;
  color: var(--gold-accent, #d4b060);
  opacity: 0.6;
  margin-top: 0.15rem;
}
.furn-card__rating-star { font-size: 0.55rem; }

/* ═══════════════════════════════════════════════════════════════════════
   29. ALTERNATIVE PRICE BADGE
   ═══════════════════════════════════════════════════════════════════════ */

.furn-card__alt-price {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-label, 'Cinzel', serif);
  font-size: 0.4rem;
  color: var(--gold-accent, #d4b060);
  opacity: 0.5;
  margin-top: 0.1rem;
}
.furn-card__alt-price-icon {
  font-size: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   FURNITURE CODEX REDESIGN — Phase 1 (hero · screenshot spotlight · categories)
   Bold direction. All selectors scoped under .furn-codex so nothing leaks.
   Type: Newsreader (display) · Manrope (body) · JetBrains Mono (labels).
   ═══════════════════════════════════════════════════════════════════════ */
.furn-codex {
  --cx-bg-deep: #0a0b10;
  --cx-bg-card: #14161e;
  --cx-bg-elev: #1a1d27;
  --cx-line:    rgba(255,255,255,.07);
  --cx-line-2:  rgba(255,255,255,.12);
  --cx-ink:      #edeef2;
  --cx-ink-soft: #aab0bd;
  --cx-ink-mute: #71768a;
  --cx-accent:      #e0a64e;
  --cx-accent-ink:  #0c0e14;
  --cx-accent-glow: color-mix(in srgb, var(--cx-accent) 38%, transparent);
  --cx-accent-soft: color-mix(in srgb, var(--cx-accent) 14%, transparent);
  --cx-display: 'Newsreader', Georgia, serif;
  --cx-body:    'Manrope', system-ui, sans-serif;
  --cx-mono:    'JetBrains Mono', ui-monospace, monospace;
  --cx-ease:    cubic-bezier(.22,.78,.27,1);
  --cx-t-fast:  180ms var(--cx-ease);
  --cx-t-med:   340ms var(--cx-ease);
  --cx-t-slow:  600ms var(--cx-ease);
  --cx-r-sm: 8px; --cx-r-md: 14px; --cx-r-lg: 20px;
  --cx-pt: var(--cx-accent);
  /* quality */
  --cx-q-normal: #c2c7d0; --cx-q-fine: #5bd24a; --cx-q-superior: #48a2ff;
  --cx-q-epic: #b163ff; --cx-q-legendary: #e6c069;
  position: relative;
  margin: 0 0 2.5rem;
  font-family: var(--cx-body);
  color: var(--cx-ink);
}
.furn-codex svg { display: block; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.furn-codex-hero {
  position: relative;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-lg);
  background:
    radial-gradient(1100px 420px at 82% -10%, color-mix(in srgb, var(--cx-accent) 13%, transparent), transparent 60%),
    radial-gradient(720px 460px at 2% 6%, rgba(80,110,190,.10), transparent 60%),
    var(--cx-bg-deep);
  overflow: hidden;
  padding: 44px 40px;
}
.furn-codex-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
.furn-codex-hero__copy { min-width: 0; }
.furn-codex-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--cx-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cx-accent); margin-bottom: 18px;
}
.furn-codex-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--cx-accent); opacity: .7; }
.furn-codex-title {
  font-family: var(--cx-display); font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw + .4rem, 4.2rem); line-height: 1;
  letter-spacing: -.018em; margin: 0; color: #fff;
}
.furn-codex-title em {
  font-style: italic; color: color-mix(in srgb, var(--cx-accent) 80%, #fff);
  text-shadow: 0 0 40px color-mix(in srgb, var(--cx-accent) 45%, transparent);
}
.furn-codex-sub { margin: 18px 0 0; max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--cx-ink-soft); }
.furn-codex-stats { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.furn-codex-stat b {
  font-family: var(--cx-display); font-weight: 500; font-size: 27px; color: #fff;
  line-height: 1; display: block; font-variant-numeric: tabular-nums;
}
.furn-codex-stat span {
  font-family: var(--cx-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cx-ink-mute);
}

/* ── featured spotlight (signature, screenshot-led) ───────────────────── */
.furn-codex .spotlight { position: relative; }
.furn-codex .spotlight__frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--cx-r-lg);
  overflow: hidden; cursor: pointer; display: block;
  border: 1px solid var(--cx-line-2);
  box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 0 50px color-mix(in srgb, var(--cx-pt) 16%, transparent);
  isolation: isolate;
}
.furn-codex .spotlight__img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
  animation: cxKenburns 18s ease-in-out infinite alternate;
}
@keyframes cxKenburns { 0% { transform: scale(1.04) translate(0,0); } 100% { transform: scale(1.12) translate(-1.5%, -1.5%); } }
.furn-codex .spotlight__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(7,8,12,.94) 4%, rgba(7,8,12,.4) 38%, rgba(7,8,12,0) 64%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--cx-pt) 30%, transparent), transparent 64%);
}
.furn-codex .spotlight__edge {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-pt) 30%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--cx-pt) 14%, transparent);
}
.furn-codex .spotlight__badge {
  position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex;
  align-items: center; gap: 7px; font-family: var(--cx-mono); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: #fff;
  padding: 7px 12px; border-radius: 99px;
  background: color-mix(in srgb, var(--cx-pt) 26%, rgba(8,9,13,.5));
  border: 1px solid color-mix(in srgb, var(--cx-pt) 52%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cx-pt) 36%, transparent);
}
.furn-codex .spotlight__badge svg { width: 10px; height: 10px; }
.furn-codex .spotlight__staffpick {
  margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.35);
  color: color-mix(in srgb, var(--cx-accent) 90%, #fff);
}
.furn-codex .spotlight__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 24px; }
.furn-codex .spotlight__meta {
  font-family: var(--cx-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cx-ink-soft); margin-bottom: 9px;
  display: flex; align-items: center; gap: 8px;
}
.furn-codex .spotlight__q { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--cx-pt) 75%, #fff); }
.furn-codex .spotlight__q i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--cx-pt); box-shadow: 0 0 8px var(--cx-pt); }
.furn-codex .spotlight__name {
  font-family: var(--cx-display); font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  line-height: 1.05; color: #fff; letter-spacing: -.01em; margin: 0 0 12px;
  text-shadow: 0 2px 22px rgba(0,0,0,.6);
}
.furn-codex .spotlight__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.furn-codex .spotlight__subline { font-family: var(--cx-mono); font-size: 11px; color: var(--cx-ink-mute); }
.furn-codex .spotlight__cta {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--cx-accent-ink); background: var(--cx-accent); padding: 8px 14px; border-radius: 99px;
  box-shadow: 0 8px 22px var(--cx-accent-glow); transition: transform var(--cx-t-fast);
}
.furn-codex .spotlight__cta svg { width: 15px; height: 15px; }
.furn-codex .spotlight__frame:hover .spotlight__cta { transform: translateX(3px); }
.furn-codex .spotlight__frame:hover .spotlight__img { animation-play-state: paused; transform: scale(1.1); transition: transform var(--cx-t-slow); }
.furn-codex .spotlight__dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.furn-codex .spotlight__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-line-2); }
.furn-codex .spotlight__dots span.on { width: 22px; border-radius: 4px; background: var(--cx-accent); box-shadow: 0 0 10px var(--cx-accent-glow); }

/* ── category showcase ────────────────────────────────────────────────── */
.furn-codex-cats { padding: 36px 0 4px; }
.furn-codex-cats__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.furn-codex-kicker {
  font-family: var(--cx-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cx-ink-mute); display: flex; align-items: center; gap: 9px;
}
.furn-codex-kicker b { color: var(--cx-accent); font-weight: 500; }
.furn-codex-cats__link {
  font-family: var(--cx-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cx-ink-soft); display: inline-flex; gap: 7px; align-items: center; transition: color var(--cx-t-fast);
}
.furn-codex-cats__link:hover { color: var(--cx-accent); }
.furn-codex-cats__link svg { width: 14px; height: 14px; }
.furn-codex-cats__row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
}
.furn-codex .cat-tile {
  position: relative; border-radius: var(--cx-r-md); padding: 16px 14px;
  background: var(--cx-bg-card); border: 1px solid var(--cx-line); cursor: pointer;
  transition: transform var(--cx-t-med), border-color var(--cx-t-med), box-shadow var(--cx-t-med);
  overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 12px; min-height: 112px;
  color: var(--cx-ink);
}
.furn-codex .cat-tile::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 90% at 50% 120%, var(--cx-accent-soft), transparent 70%);
  opacity: 0; transition: opacity var(--cx-t-med);
}
.furn-codex .cat-tile svg { width: 28px; height: 28px; color: var(--cx-ink-soft); transition: color var(--cx-t-med), transform var(--cx-t-med); }
.furn-codex .cat-tile__name { font-family: var(--cx-display); font-size: 16px; font-weight: 500; color: #fff; margin-top: auto; }
.furn-codex .cat-tile__count { font-family: var(--cx-mono); font-size: 10.5px; color: var(--cx-ink-mute); letter-spacing: .06em; }
.furn-codex .cat-tile:hover { transform: translateY(-4px); border-color: var(--cx-line-2); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.furn-codex .cat-tile:hover::before { opacity: 1; }
.furn-codex .cat-tile:hover svg { color: var(--cx-accent); transform: scale(1.08); filter: drop-shadow(0 0 10px var(--cx-accent-glow)); }
.furn-codex .cat-tile.is-active { border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent); }
.furn-codex .cat-tile.is-active::before { opacity: 1; }
.furn-codex .cat-tile.is-active svg { color: var(--cx-accent); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .furn-codex-cats__row { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 980px) {
  .furn-codex-hero { padding: 32px 24px; }
  .furn-codex-hero__inner { grid-template-columns: 1fr; gap: 26px; }
  .furn-codex .spotlight { order: -1; }
}
@media (max-width: 760px) {
  .furn-codex-cats__row { grid-template-columns: repeat(3, 1fr); }
  .furn-codex-stats { gap: 22px; }
}
@media (max-width: 460px) {
  .furn-codex-cats__row { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .furn-codex .spotlight__img { animation: none !important; transform: scale(1.04); }
}

/* ═══════════════════════════════════════════════════════════════════════
   FURNITURE CODEX REDESIGN — Phase 2 (sticky controls bar · card skin)
   Bold direction. Scoped under .furn-codex-page (added to <main>).
   Reuses existing JS-bound ids/classes (#densityToggle, .furn-catalog__view-btn…).
   ═══════════════════════════════════════════════════════════════════════ */
.furn-codex-page {
  --cx-bg-deep: #0a0b10; --cx-bg-card: #14161e; --cx-bg-elev: #1a1d27;
  --cx-line: rgba(255,255,255,.07); --cx-line-2: rgba(255,255,255,.12);
  --cx-ink: #edeef2; --cx-ink-soft: #aab0bd; --cx-ink-mute: #71768a;
  --cx-accent: #e0a64e; --cx-accent-ink: #0c0e14;
  --cx-accent-glow: color-mix(in srgb, var(--cx-accent) 38%, transparent);
  --cx-accent-soft: color-mix(in srgb, var(--cx-accent) 14%, transparent);
  --cx-display: 'Newsreader', Georgia, serif;
  --cx-body: 'Manrope', system-ui, sans-serif;
  --cx-mono: 'JetBrains Mono', ui-monospace, monospace;
  --cx-ease: cubic-bezier(.22,.78,.27,1);
  --cx-t-fast: 180ms var(--cx-ease);
}

/* ── sticky controls bar ──────────────────────────────────────────────── */
.furn-codex-controls {
  position: sticky; top: 72px; z-index: 40;
  margin: 0 -1.5rem 1.4rem; padding: 13px 1.5rem;
  background: linear-gradient(180deg, rgba(10,11,16,.97), rgba(10,11,16,.88));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line);
}
.furn-codex-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.furn-codex-bar__spacer { flex: 1; min-width: 0; }

.furn-codex-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; max-width: 360px; }
.furn-codex-search svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--cx-ink-mute); pointer-events: none; }
.furn-codex-search input {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid var(--cx-line); color: var(--cx-ink);
  font-family: var(--cx-body); font-size: 14px; transition: all var(--cx-t-fast);
}
.furn-codex-search input::placeholder { color: var(--cx-ink-mute); }
.furn-codex-search input:focus {
  outline: none; border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent);
  background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px var(--cx-accent-soft);
}

.furn-codex-select { position: relative; }
.furn-codex-select::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--cx-ink-mute); pointer-events: none; font-size: 11px; }
.furn-codex-select select {
  appearance: none; -webkit-appearance: none; padding: 10px 32px 10px 13px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid var(--cx-line); color: var(--cx-ink-soft);
  font-family: var(--cx-body); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all var(--cx-t-fast);
  max-width: 200px;
}
.furn-codex-select select:hover { color: var(--cx-ink); border-color: var(--cx-line-2); }
.furn-codex-select select option { background: var(--cx-bg-elev); color: var(--cx-ink); }

.furn-codex-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid var(--cx-line); color: var(--cx-ink-soft);
  font-family: var(--cx-body); font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all var(--cx-t-fast);
}
.furn-codex-btn:hover, .furn-codex-btn.active { color: var(--cx-ink); border-color: var(--cx-line-2); background: rgba(255,255,255,.07); }
.furn-codex-btn__mark { color: var(--cx-accent); font-size: 11px; }
.furn-codex-btn--ghost { background: transparent; }

/* density + view toggles (original classes kept; restyled) */
.furn-codex-page .furn-catalog__density,
.furn-codex-page .furn-catalog__view-toggle {
  display: flex; gap: 2px; background: rgba(255,255,255,.04); border: 1px solid var(--cx-line);
  border-radius: 10px; padding: 3px; margin: 0;
}
.furn-codex-page .furn-catalog__density-btn {
  width: 36px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  color: var(--cx-ink-mute); background: none; border: none; cursor: pointer; transition: all var(--cx-t-fast);
}
.furn-codex-page .furn-catalog__density-btn svg { width: 16px; height: 16px; }
.furn-codex-page .furn-catalog__density-btn:hover { color: var(--cx-ink-soft); }
.furn-codex-page .furn-catalog__density-btn.active { background: var(--cx-bg-elev); color: var(--cx-ink); box-shadow: none; }
.furn-codex-page .furn-catalog__view-btn {
  padding: 7px 13px; border-radius: 7px; background: none; border: none; cursor: pointer;
  font-family: var(--cx-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink-mute); transition: all var(--cx-t-fast);
}
.furn-codex-page .furn-catalog__view-btn:hover { color: var(--cx-ink-soft); background: none; }
.furn-codex-page .furn-catalog__view-btn.active { background: var(--cx-bg-elev); color: var(--cx-ink); }

/* result count */
.furn-codex-resultbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.furn-codex-resultbar__count { font-family: var(--cx-body); font-size: 14px; color: var(--cx-ink-soft); }
.furn-codex-resultbar__count b { font-family: var(--cx-display); font-weight: 500; color: #fff; font-size: 17px; }

/* ── chips (restyle existing) ─────────────────────────────────────────── */
.furn-codex-page .furn-catalog__chips { gap: 8px; margin: 0 0 1.2rem; }
.furn-codex-page .furn-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 99px;
  font-family: var(--cx-body); font-size: 12.5px; font-weight: 500; color: var(--cx-ink);
  background: var(--cx-accent-soft); border: 1px solid color-mix(in srgb, var(--cx-accent) 32%, transparent);
  text-decoration: none; transition: all var(--cx-t-fast);
}
.furn-codex-page .furn-chip:hover { background: color-mix(in srgb, var(--cx-accent) 20%, transparent); }
.furn-codex-page .furn-chip__x {
  width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--cx-accent) 22%, transparent); color: var(--cx-ink); font-size: 10px;
}
.furn-codex-page .furn-chip:hover .furn-chip__x { background: var(--cx-accent); color: var(--cx-accent-ink); }
.furn-codex-page .furn-chip--clear { background: transparent; border-color: var(--cx-line); color: var(--cx-ink-soft); }
.furn-codex-page .furn-chip--clear:hover { border-color: var(--cx-line-2); color: var(--cx-ink); background: transparent; }

/* ── card skin ────────────────────────────────────────────────────────── */
.furn-codex-page .furn-grid { gap: 18px; }
.furn-codex-page .furn-card { --furn-bg: #14161e; border-radius: 14px; }
.furn-codex-page .furn-card__img-wrap { aspect-ratio: 1 / 1; }
.furn-codex-page .furn-card__no-img { aspect-ratio: 1 / 1; }
/* left rarity edge-bar */
.furn-codex-page .furn-card__img-wrap::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 3;
  background: var(--furn-quality); opacity: .95;
  box-shadow: 0 0 12px color-mix(in srgb, var(--furn-quality) 55%, transparent);
}
/* typography → Newsreader / JetBrains Mono */
.furn-codex-page .furn-card__name {
  font-family: var(--cx-display); font-weight: 500; font-size: 1rem; line-height: 1.2;
  color: #fff; letter-spacing: -.005em; text-shadow: none;
}
.furn-codex-page .furn-card__name-alt { font-family: var(--cx-body); color: var(--cx-ink-mute); font-size: .76rem; }
.furn-codex-page .furn-card__category,
.furn-codex-page .furn-card__theme,
.furn-codex-page .furn-card__bind,
.furn-codex-page .furn-card__source-badge,
.furn-codex-page .furn-card__decor-link {
  font-family: var(--cx-mono); letter-spacing: .08em;
}
.furn-codex-page .furn-card__category { font-size: 10px; color: var(--cx-ink-mute); text-transform: uppercase; }
.furn-codex-page .furn-card__theme {
  font-size: 9.5px; color: color-mix(in srgb, var(--cx-q-epic, #b163ff) 80%, #fff);
  border-color: color-mix(in srgb, #b163ff 26%, transparent);
}
.furn-codex-page .furn-card__source-badge {
  font-size: 9.5px; border-radius: 8px; background: rgba(8,9,13,.62); border: 1px solid rgba(255,255,255,.1);
  color: var(--cx-ink-soft); text-transform: uppercase;
}
.furn-codex-page .furn-card__source-icon { color: var(--cx-accent); }
.furn-codex-page .furn-card__price { font-family: var(--cx-mono); font-size: .8rem; letter-spacing: .04em; color: #f3d27a; }
.furn-codex-page .furn-card__decor-link { font-size: 10px; color: var(--cx-ink-mute); }
.furn-codex-page .furn-card__decor-link:hover { color: var(--cx-accent); }
.furn-codex-page .furn-card__body { background: color-mix(in srgb, var(--furn-bg) 55%, transparent); }
/* favourite → amber when active (keep) */
.furn-codex-page .furn-card__fav.active { color: var(--cx-accent); }

/* empty state */
.furn-codex-page .furn-empty__title { font-family: var(--cx-display); color: var(--cx-ink); }
.furn-codex-page .furn-empty__clear {
  font-family: var(--cx-body); color: var(--cx-accent-ink); background: var(--cx-accent);
  border-radius: 99px; box-shadow: 0 8px 22px var(--cx-accent-glow);
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .furn-codex-controls { top: 60px; margin-left: -1.1rem; margin-right: -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
  .furn-codex-search { max-width: none; flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FURNITURE CODEX REDESIGN — Phase 3 (handoff card layout)
   Quality badge (TL) · fav + hover actions (TR) · source (BL) ·
   name · category · price body. Scoped under .furn-codex-page.
   ═══════════════════════════════════════════════════════════════════════ */
.furn-codex-page .furn-card--codex .furn-card__img-wrap { aspect-ratio: 1 / 1; }

/* quality badge — top-left */
.furn-codex-page .furn-card__quality {
  position: absolute; top: 9px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; padding: 4px 9px 4px 7px; border-radius: 7px;
  background: rgba(8,9,13,.55); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.furn-codex-page .furn-card__qgem { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); flex: none; }

/* top-right stack: favourite + hover action toolbar */
.furn-codex-page .furn-card__tr {
  position: absolute; top: 9px; right: 9px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.furn-codex-page .furn-card__fav,
.furn-codex-page .furn-card__compare,
.furn-codex-page .furn-card__calc,
.furn-codex-page .furn-card__collect {
  position: static; inset: auto; margin: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,9,13,.5); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cx-ink-soft); font-size: 14px; line-height: 1; cursor: pointer;
  transition: color var(--cx-t-fast), transform var(--cx-t-fast), border-color var(--cx-t-fast), opacity var(--cx-t-fast);
}
.furn-codex-page .furn-card__fav:hover,
.furn-codex-page .furn-card__compare:hover,
.furn-codex-page .furn-card__calc:hover,
.furn-codex-page .furn-card__collect:hover {
  color: var(--cx-accent); transform: scale(1.08);
  border-color: color-mix(in srgb, var(--cx-accent) 45%, transparent);
}
.furn-codex-page .furn-card__fav.active { color: var(--cx-accent); }
.furn-codex-page .furn-card__compare.active { color: var(--cx-accent); border-color: color-mix(in srgb, var(--cx-accent) 45%, transparent); }

/* hover-reveal: actions toolbar + (inactive) favourite, on pointer devices only */
.furn-codex-page .furn-card__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
@media (hover: hover) {
  .furn-codex-page .furn-card__actions { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--cx-t-fast), transform var(--cx-t-fast); }
  .furn-codex-page .furn-card:hover .furn-card__actions { opacity: 1; transform: none; pointer-events: auto; }
  .furn-codex-page .furn-card__fav:not(.active) { opacity: 0; }
  .furn-codex-page .furn-card:hover .furn-card__fav { opacity: 1; }
}

/* source badge — bottom-left */
.furn-codex-page .furn-card__source-badge {
  top: auto; right: auto; bottom: 9px; left: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 7px; border-radius: 8px;
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cx-ink-soft); background: rgba(8,9,13,.62); border: 1px solid rgba(255,255,255,.1);
}
.furn-codex-page .furn-card__source-icon { color: var(--cx-accent); font-size: .8rem; }
.furn-codex-page .furn-card__new-badge { z-index: 3; }

/* body: name · category · price */
.furn-codex-page .furn-card__body { gap: 4px; padding: 13px 14px; }
.furn-codex-page .furn-card__name { font-family: var(--cx-display); font-weight: 500; font-size: 16px; line-height: 1.2; color: #fff; letter-spacing: -.005em; text-shadow: none; margin: 0; }
.furn-codex-page .furn-card__name-alt { font-family: var(--cx-body); color: var(--cx-ink-mute); font-size: 11.5px; line-height: 1.3; margin: 0; }
.furn-codex-page .furn-card__cat { font-family: var(--cx-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-ink-mute); margin-top: 2px; }
.furn-codex-page .furn-card__price { margin-top: 8px; padding: 0; border: 0; display: flex; align-items: center; gap: 6px; font-family: var(--cx-mono); font-size: 12.5px; color: var(--cx-ink-soft); }
.furn-codex-page .furn-card__price b { color: #fff; font-weight: 600; }
.furn-codex-page .furn-coin { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.furn-codex-page .furn-coin--gold { background: radial-gradient(circle at 35% 30%, #f3d27a, #b8862e); }
.furn-codex-page .furn-coin--crown { background: radial-gradient(circle at 35% 30%, #8fd0ff, #2f6fb8); }
.furn-codex-page .furn-card__price-tag { color: var(--cx-ink-mute); }

/* compact density: smaller badges */
.furn-codex-page .furn-grid--compact .furn-card__quality { font-size: 9px; }
.furn-codex-page .furn-grid--compact .furn-card__name { font-size: 14px; }