.collection-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.collection-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.collection-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
  transform: translateY(-2px);
}

.collection-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.collection-cover {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    z-index 0s;
  will-change: transform;
  cursor: pointer;
}

.collection-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 75%
  );
  transform: translateX(-160%) skewX(-15deg);
  transition: transform 0s;
  pointer-events: none;
  z-index: 10;
}

.collection-cover:hover::after {
  transform: translateX(160%) skewX(-15deg);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cover-center:hover {
  transform: translateX(-50%) scale(1.12) translateY(-8px) !important;
  z-index: 30 !important;
}

.cover-left:hover {
  transform: translateX(-130%) rotate(-6deg) scale(1.12) translateY(-8px) !important;
  z-index: 30 !important;
}

.cover-right:hover {
  transform: translateX(30%) rotate(6deg) scale(1.12) translateY(-8px) !important;
  z-index: 30 !important;
}

.col-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.col-modal-backdrop.open {
  display: flex;
}

.col-modal {
  background: rgba(15, 15, 20, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  width: 100%;
  max-width: 52rem;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.col-modal-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Sort buttons (collections page) */
.col-sort-btn {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.col-sort-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Collections Splide overrides */
.collections-splide .splide__track {
  overflow: hidden;
}

.collections-splide .splide__slide {
  height: auto;
}