/* ═══════════════════════════════════════════════════════════════════════════
   Collection Detail — Professional Design System (v4.0)
   Scope prefix: .cd-
   Theme-aware via central theme.css tokens (--z-*).
   ═══════════════════════════════════════════════════════════════════════════ */

.cd-root-801 {
  /* Local tokens mapped to central theme */
  --cd-bg:          var(--z-bg, #0f172a);
  --cd-bg-alt:      var(--z-bg-deep, #0a101e);
  --cd-surface:     var(--z-surface-1, #1e293b);
  --cd-surface-alt: var(--z-surface-2, #273548);
  --cd-surface-hi:  var(--z-surface-3, #334155);
  --cd-glass:       var(--z-glass, rgba(30,41,59,.72));

  --cd-border:        var(--z-border, rgba(255,255,255,.08));
  --cd-border-hover:  var(--z-border-hover, rgba(255,255,255,.16));
  --cd-border-strong: var(--z-border-hover, rgba(255,255,255,.2));

  --cd-text:     var(--z-text, #f1f5f9);
  --cd-text-sub: var(--z-text-sec, #cbd5e1);
  --cd-text-dim: var(--z-text-muted, #94a3b8);

  --cd-accent:      var(--z-accent, #f59e0b);
  --cd-accent-soft: var(--z-accent-light, #fbbf24);
  --cd-accent-glow: var(--z-accent-glow, rgba(245,158,11,.18));
  --cd-grad:        var(--z-accent-gradient, linear-gradient(135deg,#f59e0b,#fbbf24));

  --cd-shadow-sm:  var(--z-shadow-sm,  0 4px 12px -3px rgba(0,0,0,.35));
  --cd-shadow-md:  var(--z-shadow-md,  0 12px 32px -10px rgba(0,0,0,.5));
  --cd-shadow-lg:  var(--z-shadow-lg,  0 24px 60px -16px rgba(0,0,0,.55));
  --cd-shadow-glow:var(--z-shadow-glow,0 0 0 1px var(--cd-accent), 0 0 32px -6px var(--cd-accent-glow));

  --cd-radius-sm: 8px;
  --cd-radius-md: 14px;
  --cd-radius-lg: 20px;
  --cd-radius-xl: 28px;
  --cd-radius-full: 999px;

  --cd-font: var(--z-font-sans, "Inter", system-ui, sans-serif);
  --cd-speed: var(--z-duration, .25s);
  --cd-speed-slow: var(--z-duration-slow, .4s);
  --cd-ease: var(--z-ease, cubic-bezier(.4,0,.2,1));

  background: var(--cd-bg);
  font-family: var(--cd-font);
  color: var(--cd-text);
  min-height: 100vh;
  padding-bottom: 4rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══ HERO ═══ */
.cd-hero-802 {
  position: relative;
  padding: 4rem 1.5rem 3rem;
  background:
    radial-gradient(ellipse at 15% 0%, var(--cd-accent-glow), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(124,58,237,.16), transparent 60%),
    linear-gradient(180deg, var(--cd-bg-alt), var(--cd-bg));
  overflow: hidden;
  isolation: isolate;
}
.cd-hero-802::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  opacity: .6;
  z-index: -1;
}
.cd-hero-inner-803 {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Visual */
.cd-visual-804 {
  position: relative;
  border-radius: var(--cd-radius-xl);
  border: 1px solid var(--cd-border);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--cd-surface);
  box-shadow: var(--cd-shadow-lg);
  transition: transform .5s var(--cd-ease), box-shadow .5s var(--cd-ease);
}
.cd-visual-804:hover {
  transform: translateY(-4px);
  box-shadow: var(--cd-shadow-lg), 0 0 60px -10px var(--cd-accent-glow);
}
.cd-visual-img-805 {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--cd-ease);
}
.cd-visual-804:hover .cd-visual-img-805 { transform: scale(1.06); }
.cd-visual-fallback-806 {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: .75rem;
  align-items: center; justify-content: center;
  color: var(--cd-text-dim);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background:
    radial-gradient(circle at 50% 50%, var(--cd-surface-alt), var(--cd-surface));
}
.cd-visual-fallback-806 i { font-size: 2.4rem; opacity: .6; }
.cd-featured-badge-807 {
  position: absolute; top: 16px; left: 16px;
  background: var(--cd-grad);
  color: #fff;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 1.1rem;
  box-shadow: 0 6px 18px -4px var(--cd-accent-glow), 0 0 0 1px rgba(255,255,255,.18) inset;
  z-index: 2;
}
.cd-gradient-overlay-808 {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55));
  opacity: .45;
  transition: opacity var(--cd-speed) var(--cd-ease);
  pointer-events: none;
}
.cd-visual-804:hover .cd-gradient-overlay-808 { opacity: .75; }

/* Body */
.cd-body-809 {
  display: flex; flex-direction: column; gap: 1.35rem;
  min-width: 0;
}
.cd-breadcrumbs-810 {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center;
  font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--cd-text-dim);
}
.cd-bc-link-811 {
  display: inline-flex; gap: .4rem; align-items: center;
  color: var(--cd-text-dim);
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: var(--cd-radius-full);
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  transition: all var(--cd-speed) var(--cd-ease);
}
.cd-bc-link-811:hover {
  color: var(--cd-text);
  border-color: var(--cd-border-hover);
  background: var(--cd-surface-alt);
}
.cd-bc-link-811 i { font-size: .95rem; color: var(--cd-accent); }
.cd-bc-sep-812 { font-size: 1rem; opacity: .45; }
.cd-bc-current-813 {
  color: var(--cd-text-sub);
  padding: .35rem .25rem;
  font-weight: 700;
}

.cd-title-814 {
  margin: .35rem 0 .2rem;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -1.2px;
  background: linear-gradient(180deg, var(--cd-text) 35%, var(--cd-text-sub));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.cd-subtitle-815 {
  margin: 0;
  font-size: 1.05rem; font-weight: 500;
  color: var(--cd-text-sub);
  letter-spacing: .1px;
  max-width: 640px;
  line-height: 1.55;
}
.cd-description-816 {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--cd-text-sub);
  max-width: 720px;
  padding: 1rem 1.15rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-left: 3px solid var(--cd-accent);
  border-radius: var(--cd-radius-md);
}

/* Meta bar */
.cd-meta-bar-817 {
  display: flex; flex-wrap: wrap;
  gap: .55rem;
  margin-top: .25rem;
}
.cd-meta-item-818 {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--cd-text-sub);
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: .55rem .8rem;
  border-radius: var(--cd-radius-full);
  transition: all var(--cd-speed) var(--cd-ease);
}
.cd-meta-item-818:hover {
  border-color: var(--cd-border-hover);
  background: var(--cd-surface-alt);
  transform: translateY(-1px);
}
.cd-meta-item-818 i { color: var(--cd-accent); font-size: 1rem; }

/* Tags */
.cd-tags-wrap-819 {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .15rem;
}
.cd-tag-820 {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .02em;
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: .5rem .85rem;
  border-radius: var(--cd-radius-full);
  color: var(--cd-text-sub);
  text-decoration: none;
  transition: all var(--cd-speed) var(--cd-ease);
}
.cd-tag-820:hover {
  color: var(--cd-text);
  border-color: var(--cd-accent);
  background: var(--cd-accent-glow);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px var(--cd-accent-glow);
}
.cd-tag-empty-821 {
  font-size: .72rem; letter-spacing: .04em;
  color: var(--cd-text-dim); font-weight: 500;
  font-style: italic;
}

/* Action buttons */
.cd-actions-822 {
  display: flex; flex-wrap: wrap; gap: .65rem;
  margin-top: .8rem;
}
.cd-btn-823 {
  --_bg: var(--cd-grad);
  --_color: #fff;
  --_border: transparent;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--_bg);
  color: var(--_color);
  font-size: .82rem; font-weight: 600;
  font-family: inherit;
  padding: .8rem 1.25rem;
  border-radius: var(--cd-radius-md);
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid var(--_border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--cd-speed) var(--cd-ease),
              box-shadow var(--cd-speed) var(--cd-ease),
              border-color var(--cd-speed) var(--cd-ease);
  box-shadow: 0 4px 14px -4px var(--cd-accent-glow);
}
.cd-btn-823::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--cd-ease);
  pointer-events: none;
}
.cd-btn-823:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -4px var(--cd-accent-glow);
}
.cd-btn-823:hover::after { transform: translateX(100%); }
.cd-btn-823:active { transform: translateY(0); }
.cd-btn-823 i { font-size: 1.05rem; }

.cd-btn-secondary-824 {
  --_bg: var(--cd-surface);
  --_color: var(--cd-text);
  --_border: var(--cd-border);
  box-shadow: var(--cd-shadow-sm);
}
.cd-btn-secondary-824:hover {
  --_bg: var(--cd-surface-alt);
  --_border: var(--cd-border-hover);
  box-shadow: var(--cd-shadow-md);
}
.cd-btn-glow-825 {
  box-shadow: 0 6px 22px -4px var(--cd-accent-glow), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.cd-btn-outline-826 {
  --_bg: transparent;
  --_color: var(--cd-text-sub);
  --_border: var(--cd-border);
  box-shadow: none;
}
.cd-btn-outline-826:hover {
  --_color: var(--cd-text);
  --_border: var(--cd-accent);
  background: var(--cd-accent-glow);
  box-shadow: none;
}

/* ═══ ITEMS SECTION ═══ */
.cd-items-section-827 {
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}
.cd-section-head-828 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cd-border);
}
.cd-section-title-829 {
  margin: 0;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.4px;
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--cd-text);
}
.cd-section-title-829 i {
  color: var(--cd-accent);
  font-size: 1.5rem;
  background: var(--cd-accent-glow);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--cd-radius-sm);
}
.cd-section-meta-830 {
  font-size: .72rem;
  color: var(--cd-text-dim);
  letter-spacing: .04em;
}
.cd-section-count-831 {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: .5rem .85rem;
  border-radius: var(--cd-radius-full);
  font-weight: 600;
  font-size: .75rem;
  color: var(--cd-text-sub);
}

.cd-items-grid-832 {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cd-item-card-833 {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform var(--cd-speed) var(--cd-ease),
              border-color var(--cd-speed) var(--cd-ease),
              box-shadow var(--cd-speed) var(--cd-ease);
  box-shadow: var(--cd-shadow-sm);
}
.cd-item-card-833:hover {
  transform: translateY(-6px);
  border-color: var(--cd-border-hover);
  box-shadow: var(--cd-shadow-md), 0 0 0 1px var(--cd-accent-glow);
}
.cd-item-media-834 {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cd-surface-alt);
}
.cd-item-media-834 img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .85s var(--cd-ease);
}
.cd-item-card-833:hover .cd-item-media-834 img { transform: scale(1.08); }
.cd-item-fallback-835 {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--cd-surface-alt);
  color: var(--cd-text-dim); font-size: 1.6rem;
}
.cd-item-badge-836 {
  position: absolute; top: 10px; left: 10px;
  background: var(--cd-grad);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #fff; font-size: 1rem;
  box-shadow: 0 4px 14px -4px var(--cd-accent-glow), inset 0 0 0 1px rgba(255,255,255,.2);
  z-index: 2;
}
.cd-item-overlay-837 {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6));
  opacity: 0;
  transition: opacity var(--cd-speed-slow) var(--cd-ease);
  pointer-events: none;
}
.cd-item-card-833:hover .cd-item-overlay-837 { opacity: 1; }

.cd-item-body-838 {
  padding: 1rem 1.05rem 1.1rem;
  display: flex; flex-direction: column;
  gap: .65rem;
  flex: 1;
}
.cd-item-title-839 {
  margin: 0;
  font-size: .95rem; line-height: 1.35;
  font-weight: 600; letter-spacing: -.1px;
}
.cd-item-link-840 {
  text-decoration: none;
  color: var(--cd-text);
  transition: color var(--cd-speed) var(--cd-ease);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-item-link-840:hover { color: var(--cd-accent-soft); }
.cd-item-meta-841 {
  display: flex; justify-content: space-between;
  align-items: center;
  gap: .6rem; flex-wrap: wrap;
  margin-top: auto;
  padding-top: .55rem;
  border-top: 1px dashed var(--cd-border);
}
.cd-item-meta-field-842 {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem;
  letter-spacing: .01em;
  font-weight: 600;
  color: var(--cd-text-dim);
}
.cd-item-meta-field-842:last-child {
  color: var(--cd-text);
  font-weight: 700;
}
.cd-item-meta-field-842 i { color: var(--cd-accent); font-size: .95rem; }

/* ═══ EMPTY STATE ═══ */
.cd-empty-843 {
  border: 1.5px dashed var(--cd-border);
  border-radius: var(--cd-radius-xl);
  padding: 4rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at top, var(--cd-accent-glow), transparent 60%),
    var(--cd-surface);
  margin: 1rem 0;
}
.cd-empty-icon-844 {
  width: 72px; height: 72px;
  border: 1px solid var(--cd-border);
  background: var(--cd-surface-alt);
  color: var(--cd-accent);
  display: grid; place-items: center;
  font-size: 1.9rem;
  border-radius: var(--cd-radius-lg);
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 0 6px var(--cd-bg);
}
.cd-empty-title-845 {
  margin: 0 0 .5rem;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.4px;
  color: var(--cd-text);
}
.cd-empty-text-846 {
  margin: 0;
  font-size: .92rem;
  color: var(--cd-text-sub);
  max-width: 420px;
  margin-inline: auto;
  line-height: 1.55;
}

/* ═══ RELATED ═══ */
.cd-related-847 {
  max-width: 1320px;
  margin: 1rem auto 3rem;
  padding: 0 1.5rem;
}
.cd-related-row-848 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.cd-related-card-849 {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius-lg);
  text-decoration: none;
  padding: .75rem .8rem .9rem;
  display: flex; flex-direction: column;
  gap: .65rem;
  transition: transform var(--cd-speed) var(--cd-ease),
              border-color var(--cd-speed) var(--cd-ease),
              box-shadow var(--cd-speed) var(--cd-ease);
}
.cd-related-card-849:hover {
  border-color: var(--cd-border-hover);
  box-shadow: var(--cd-shadow-md), 0 0 0 1px var(--cd-accent-glow);
  transform: translateY(-4px);
}
.cd-related-thumb-850 {
  width: 100%; height: 120px;
  background: var(--cd-surface-alt);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius-md);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--cd-text-dim);
  font-size: 1.4rem;
}
.cd-related-thumb-850 img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--cd-ease);
}
.cd-related-card-849:hover .cd-related-thumb-850 img { transform: scale(1.07); }
.cd-related-title-851 {
  font-size: .88rem; font-weight: 600;
  letter-spacing: -.1px; line-height: 1.3;
  color: var(--cd-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-related-meta-852 {
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--cd-text-dim);
  font-weight: 500;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
  .cd-hero-802 { padding: 3rem 1.25rem 2.4rem; }
  .cd-hero-inner-803 { grid-template-columns: 1fr; gap: 2rem; }
  .cd-items-section-827, .cd-related-847 { padding-inline: 1.25rem; }
}
@media (max-width: 640px) {
  .cd-hero-802 { padding: 2.4rem 1rem 2rem; }
  .cd-title-814 { font-size: 2rem; }
  .cd-subtitle-815 { font-size: .95rem; }
  .cd-description-816 { font-size: .9rem; padding: .85rem .95rem; }
  .cd-actions-822 { gap: .5rem; }
  .cd-btn-823 {
    flex: 1 1 auto;
    justify-content: center;
    padding: .75rem .9rem;
    font-size: .78rem;
  }
  .cd-section-title-829 { font-size: 1.2rem; }
  .cd-section-title-829 i { width: 32px; height: 32px; font-size: 1.2rem; }
  .cd-items-grid-832 {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
  }
  .cd-item-body-838 { padding: .85rem .9rem .95rem; }
  .cd-item-title-839 { font-size: .85rem; }
  .cd-related-row-848 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ═══ LIGHT THEME OVERRIDES (when central theme switches to light) ═══ */
[data-theme="light"] .cd-root-801 {
  --cd-shadow-sm: 0 4px 10px -3px rgba(15,23,42,.08);
  --cd-shadow-md: 0 14px 32px -12px rgba(15,23,42,.12);
  --cd-shadow-lg: 0 24px 60px -16px rgba(15,23,42,.16);
}
[data-theme="light"] .cd-hero-802::before { opacity: .35; }
[data-theme="light"] .cd-title-814 {
  background: linear-gradient(180deg, var(--cd-text) 30%, var(--cd-text-sub));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .cd-root-801 *,
  .cd-root-801 *::before,
  .cd-root-801 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ FOCUS STATES (Accessibility) ═══ */
.cd-root-801 a:focus-visible,
.cd-root-801 button:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 3px;
  border-radius: var(--cd-radius-sm);
}