/* Layout */
.collections-info { margin-bottom: var(--space-50); }
.collections-info__body { display: grid; grid-template-columns: minmax(0, 588px) minmax(0, 1fr); gap: 156px; align-items: start; margin-bottom: 100px; }
.collections-info .swiper { margin-inline: 0; overflow: hidden; }

/* Viewer */
.collections-info__viewer { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* Common Arrow Styles for Stage and Thumbs */
.collections-info__arrow { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.collections-info__arrow.swiper-button-disabled { opacity: 0.2; pointer-events: none; }

/* Stage */
.collections-info__stage { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; }
.collections-info__stage .collections-info__arrow { position: absolute; z-index: 2; top: 50%; width: clamp(46px, 5vw ,56px); height: clamp(46px, 5vw ,56px); border: 1px solid #343537; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); transform: translateY(-50%); transition: border-color 0.2s ease-in-out, color 0.15s ease-in-out; }
.collections-info__stage .collections-info__arrow--prev { left: 10px; }
.collections-info__stage .collections-info__arrow--next { right: 10px; }
.collections-info__stage .collections-info__arrow .icon-l-arrow,
.collections-info__stage .collections-info__arrow .icon-r-arrow { width: 1.5rem; height: 1.5rem; max-width: none; color: var(--color-text-default); transition: color 0.15s ease-in-out; }
.collections-info__stage .collections-info__arrow:hover { border-color: var(--color-text-default); }
.collections-info__stage .collections-info__arrow:hover .icon-arrow { color: var(--color-text-default); }
.collections-info__stage-swiper { width: 100%; aspect-ratio: 588 / 606; }
.collections-info__stage-list { height: 100%; }
.collections-info__stage-item { width: 100%; height: 100%; }
.collections-info__stage-image { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }

/* Thumbs */
.collections-info__thumbs { display: flex; align-items: center; gap: var(--space-32); min-width: 0; }
.collections-info__thumbs .collections-info__arrow { display: none; width: 44px; height: 44px; }
.collections-info__thumbs .collections-info__arrow .icon-arrow { width: 19px; height: 38px; max-width: none; color: #8a8178; transition: color 0.15s ease-in-out; }
.collections-info__thumbs .collections-info__arrow:hover .icon-arrow { color: var(--color-text-accent); }
.collections-info__thumbs-swiper { width: 100%; max-width: 100%; }
.collections-info__thumbs-list { margin: 0; padding: 0; list-style: none; }
.collections-info__thumbs-item { position: relative; overflow: hidden; }
.collections-info__thumbs-item:last-child { margin-right: 0 !important; }
.collections-info__thumbs-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background-color: #f7f7f7; cursor: pointer; }
.collections-info__thumbs-image { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; -webkit-user-drag: none; user-select: none; }
.collections-info__thumbs-button:hover .collections-info__thumbs-image,
.collections-info__thumbs-button:focus-visible .collections-info__thumbs-image,
.collections-info__thumbs-item.is-active .collections-info__thumbs-image { opacity: 1; }
.collections-info__thumbs-item.is-active::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 2px var(--color-brand-accent); pointer-events: none; }
.collections-info__thumbs-swiper--static { overflow: visible; }
.collections-info__thumbs-swiper--static .collections-info__thumbs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(11px, 1.3vw ,20px); width: 100%; transform: none !important; }
.collections-info__thumbs-swiper--static .collections-info__thumbs-item { width: 100% !important; height: auto !important; margin: 0 !important; aspect-ratio: 1 / 1; }

/* Content */
.collections-info__content { min-width: 0; }
.collections-info__header { margin-bottom: var(--space-60); }
.collections-info__title { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-30); color: var(--color-text-default); font-size: clamp(1.5rem, 3.8vw, 2.5rem); font-weight: 700; line-height: var(--line-height-h3); word-break: keep-all; }
.collections-info__meta { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-24); row-gap: var(--space-16); align-items: start; margin: 0; padding-block: var(--space-40); border-top: 1px solid var(--color-border-divider); border-bottom: 1px solid var(--color-border-divider); }
.collections-info__meta-term { margin: 0; color: var(--color-text-default); font-size: var(--font-size-h3); font-weight: 700; }
.collections-info__meta-desc { margin: 0; min-width: 0; color: var(--color-text-muted); font-size: var(--font-size-h3); font-weight: 500; }
.collections-info__desc { font-size: var(--font-size-h3); line-height: var(--line-height-body-lg); letter-spacing: -0.03em; word-break: keep-all; color: var(--color-text-muted); }
.collections-info__desc p{ overflow-wrap: break-word; }
.collections-info__desc p + p { margin-top: var(--space-40); }

/* Navigation */
.collections-info__nav { display: flex; align-items: center; gap: var(--space-12); border-top: 1px solid #e8e3da; border-bottom: 1px solid #e8e3da; padding-block: var(--space-32); }
.collections-info__nav-link { display: flex; align-items: center; gap: var(--space-12); flex: 1 1 0; min-width: 0; color: inherit; text-decoration: none; }
.collections-info__nav-link--prev { justify-content: flex-start; }
.collections-info__nav-link--next { justify-content: flex-end; }
.collections-info__nav-link[aria-disabled="true"] { color: var(--color-text-muted); cursor: default; pointer-events: none; }
.collections-info__nav-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: var(--color-text-meta); }
.collections-info__nav-icon .icon-l-arrow,
.collections-info__nav-icon .icon-r-arrow { width: 100%; height: 100%; max-width: none; }
.collections-info__nav-text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.collections-info__nav-text--next { align-items: flex-end; text-align: right; }
.collections-info__nav-label { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-muted); }
.collections-info__nav-title { font-size: var(--font-size-h4); font-weight: 500; line-height: 1.5; color: var(--color-text-default); }

@media (max-width: 1200px) {
  /* Layout */
  .collections-info__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-50); }
}

@media (max-width: 768px) {
  /* Layout */
  .collections-info { margin-bottom: var(--space-20); }
  .collections-info__body { grid-template-columns: 1fr; margin-bottom: 60px; }

  /* Viewer */
  .collections-info__viewer { gap: var(--space-20); }

  /* Stage */
  .collections-info__stage .collections-info__arrow { display: none; }
  .collections-info__stage-swiper { aspect-ratio: 358 / 369; }

  /* Thumbs */
  .collections-info__thumbs { gap: var(--space-10); }
  .collections-info__thumbs .collections-info__arrow { display: inline-flex; }
  .collections-info__thumbs .collections-info__arrow .icon-arrow { width: 20px; height: 20px; max-width: none; }
  .collections-info__thumbs-swiper { width: fit-content; max-width: 100%; }
  .collections-info__thumbs-item { width: 62px; height: 62px; }
  .collections-info__thumbs-item.is-active::after { box-shadow: inset 0 0 0 1px var(--color-brand-accent); }

  /* Content */
  .collections-info__header { margin-bottom: var(--space-30); }
  .collections-info__title { margin-bottom: var(--space-20); }
  .collections-info__meta { row-gap: var(--space-12); padding-block: var(--space-20); }
  .collections-info__meta-term,
  .collections-info__meta-desc { font-size: var(--font-size-h4); line-height: 26px; }
  .collections-info__desc { font-size: var(--font-size-h3); }

  /* Navigation */
  .collections-info__nav { padding-inline: var(--space-16); }
  .collections-info__nav-link { gap: var(--space-8); }
  .collections-info__nav-icon { width: 1.5rem; height: 1.5rem; }
}