/* ===================================================================
   Style Detail Page — PixRemix v2.1
   Page-specific styles wrapped in @layer pages.
   Uses design tokens from variables.css.
   =================================================================== */

@layer pages {

  .style-detail {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
  }

  .style-detail-back {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--neutral-600);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--duration-fast) var(--ease-out);
  }

  .style-detail-back:hover {
    color: var(--accent);
  }

  .style-detail-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .style-detail-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .style-detail-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .style-detail-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .style-detail-badge--retired {
    background: var(--neutral-200);
    color: var(--neutral-700);
  }

  .style-detail-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .style-detail-info h1 {
    margin: 0;
  }

  .style-detail-desc {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--neutral-700);
  }

  .style-detail-cta {
    margin-top: var(--space-2);
  }

  .style-detail-voted {
    font-weight: var(--weight-semibold);
    color: var(--accent);
  }

  .style-detail-comeback {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Responsive: stack on mobile */
  @media (max-width: 768px) {
    .style-detail-hero {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
  }
}