@layer components {
  /* ── Panel — opaque surface for content sitting on dark overlay ─ */
  .panel {
    background: var(--color-canvas);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-lg);
  }

  .panel--tight { padding: var(--space-md); }
  .panel--flush { padding: 0; }

  .panel--accent {
    border-top: 3px solid var(--color-primary);
  }

  /* ── Base card ────────────────────────────────────── */
  .card {
    background: var(--color-canvas);
    border: 0.5px solid var(--color-ink-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .card--link {
    display: block;
    transition: box-shadow var(--duration-normal) ease;

    @media (any-hover: hover) {
      &:hover { box-shadow: var(--shadow-md); }
    }
  }

  .card__body {
    padding: var(--space-md);

    @media (min-width: 1024px) {
      padding: var(--space-lg);
    }
  }

  .card__actions {
    padding: var(--space-sm) var(--space-md);
    border-top: 0.5px solid var(--color-ink-border);
    display: flex;
    gap: var(--space-sm);
    align-items: center;

    @media (min-width: 1024px) {
      padding: var(--space-sm) var(--space-lg);
    }
  }

  /* ── Sticker item — the figurinha ──────────────────── */
  .sticker-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--color-ink-border);
    border-radius: var(--radius-md);
    background: var(--color-canvas);
    position: relative;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) ease,
                border-color var(--duration-fast) ease;

    & form { display: contents; }

    @media (any-hover: hover) {
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px oklch(0% 0 0 / 0.08);
        border-color: var(--color-primary-light);
      }
    }

    &:active {
      transform: translateY(0);
    }
  }

  /* Shiny sticker — silver/platinum treatment */
  .sticker-item--shiny {
    background: linear-gradient(135deg, #F4F4F4 0%, #E8E8E8 50%, #F4F4F4 100%);
    border: 2px solid #B8B8C0;
    position: relative;

    /* Chrome shimmer */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        105deg,
        transparent 35%,
        oklch(98% 0.01 240 / 0.5) 42%,
        oklch(100% 0.02 260 / 0.35) 48%,
        oklch(96% 0.01 220 / 0.3) 52%,
        transparent 60%
      );
      background-size: 300% 100%;
      animation: shimmer-sweep 5s ease-in-out infinite;
      pointer-events: none;
    }

    @media (any-hover: hover) {
      &:hover {
        border-color: #9090A0;
        box-shadow: 0 4px 16px oklch(60% 0 0 / 0.18);
      }
    }
  }

  @keyframes shimmer-sweep {
    0%, 100% { background-position: 200% center; }
    50% { background-position: -100% center; }
  }

  /* Album Completo — same gold treatment as original shiny */
  .sticker-item--album {
    background: linear-gradient(135deg, #FDF6E3 0%, var(--color-accent-light) 50%, #FDF6E3 100%);
    border: 2px solid var(--color-accent-border);
    position: relative;
    overflow: hidden;

    /* Gold holographic shimmer */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        105deg,
        transparent 35%,
        oklch(90% 0.1 85 / 0.3) 42%,
        oklch(95% 0.06 60 / 0.2) 48%,
        oklch(90% 0.08 120 / 0.15) 52%,
        transparent 60%
      );
      background-size: 300% 100%;
      animation: shimmer-sweep 4s ease-in-out infinite;
      pointer-events: none;
    }

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-accent);
        box-shadow: 0 4px 20px oklch(70% 0.12 85 / 0.25);
        transform: translateY(-2px);
      }
    }
  }

  .sticker-badge--album {
    background: linear-gradient(145deg, #c9a227 0%, #f0cc5a 45%, #b8911e 100%);
    color: white;
    font-size: 1.25rem;
    line-height: 1;
    min-width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px oklch(55% 0.15 80 / 0.35);
    flex-shrink: 0;
    text-shadow: 0 1px 3px oklch(30% 0.1 80 / 0.4);
  }

  .sticker-price--album {
    color: var(--color-accent-text);
    font-weight: 800;
    font-size: 1.05rem;
  }

  /* Coleção Coca-Cola Completa — red treatment */
  .sticker-item--coca-cola {
    background: linear-gradient(135deg, #FFF0F0 0%, #FFD6D6 50%, #FFF0F0 100%);
    border: 2px solid #E60028;
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(
        105deg,
        transparent 35%,
        oklch(90% 0.08 20 / 0.3) 42%,
        oklch(95% 0.05 15 / 0.2) 48%,
        oklch(90% 0.06 25 / 0.15) 52%,
        transparent 60%
      );
      background-size: 300% 100%;
      animation: shimmer-sweep 4s ease-in-out infinite;
      pointer-events: none;
    }

    @media (any-hover: hover) {
      &:hover {
        border-color: #C4001F;
        box-shadow: 0 4px 20px oklch(45% 0.2 20 / 0.25);
        transform: translateY(-2px);
      }
    }
  }

  .sticker-badge--coca-cola {
    background: linear-gradient(145deg, #C4001F 0%, #E60028 45%, #A8001A 100%);
    color: white;
    font-size: 1.25rem;
    line-height: 1;
    min-width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px oklch(35% 0.2 20 / 0.35);
    flex-shrink: 0;
  }

  .sticker-price--coca-cola {
    color: #C4001F;
    font-weight: 800;
    font-size: 1.05rem;
  }

  .sticker-name__sub {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-ink-subtle);
    display: block;
  }

  /* Sticker thumbnail (when image exists) */
  .sticker-thumb {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-canvas-alt);
  }

  /* Sticker number badge */
  .sticker-number {
    min-width: var(--size-sticker-number);
    width: auto;
    height: var(--size-sticker-number);
    padding: 0 0.35em;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.65rem;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow: 0 0 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
  }

  .sticker-number--shield          { background: var(--color-info); }
  .sticker-number--stadium         { background: var(--color-primary); }
  .sticker-number--shiny           { background: linear-gradient(145deg, #808090, #B8B8C8, #707080); }
  .sticker-number--player          { background: var(--color-category-player); }
  .sticker-number--profile         { background: var(--color-category-profile); }
  .sticker-number--star_player     { background: var(--color-star); }
  .sticker-number--coca_cola       { background: #C8161F; }
  .sticker-number--legends_bronze  { background: #8B4513; }
  .sticker-number--legends_prata   { background: #4B4E55; }
  .sticker-number--legends_ouro    { background: #B8860B; }
  .sticker-number--legends_regular { background: #2D3140; }

  /* ── Seleção nacional — themed sticker list ──────── */
  .sticker-list--team .sticker-item {
    border-left: 3px solid var(--team-c1);
    background: color-mix(in oklch, var(--team-c1) 4%, var(--color-canvas));

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--team-c1);
        box-shadow: 0 4px 12px color-mix(in oklch, var(--team-c1) 20%, transparent);
      }
    }
  }

  .sticker-list--team .sticker-number {
    background: var(--team-bg);
  }

  .sticker-list--team .btn-add {
    background: var(--team-c1);

    @media (any-hover: hover) {
      &:hover { filter: brightness(1.12); }
    }
  }

  .sticker-item--has-team {
    border-left: 3px solid var(--team-c1);
    background: color-mix(in oklch, var(--team-c1) 4%, var(--color-canvas));

    &:not(.sticker-item--emblem) .sticker-number { background: var(--team-bg); }
    & .btn-add { background: var(--team-c1); }

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--team-c1);
        box-shadow: 0 4px 12px color-mix(in oklch, var(--team-c1) 20%, transparent);
      }
      & .btn-add:hover { filter: brightness(1.12); }
    }
  }

  /* Emblema nacional — destaque especial */
  .sticker-item--emblem {
    border-left: 4px solid var(--team-c1);
    border-top: 1px solid color-mix(in oklch, var(--team-c1) 30%, transparent);
    border-right: 1px solid color-mix(in oklch, var(--team-c1) 30%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--team-c1) 30%, transparent);
    background: color-mix(in oklch, var(--team-c1) 8%, var(--color-canvas));

    & .sticker-number {
      box-shadow: 0 1px 4px oklch(0% 0 0 / 0.25);
    }

    @media (any-hover: hover) {
      &:hover {
        box-shadow: 0 4px 16px color-mix(in oklch, var(--team-c1) 30%, transparent);
      }
    }
  }

  .sticker-info {
    flex: 1;
    min-width: 0;
  }

  .sticker-name {
    font-weight: 700;
    font-size: var(--text-small);
    line-height: var(--leading-tight);
  }

  .sticker-price {
    font-weight: 800;
    font-size: var(--text-small);
    color: var(--color-ink);
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .sticker-price--shiny {
    color: #606070;
  }
}