/* Tags pages: contextual accent and tag-specific card content only.
 * Page shell, hero, breadcrumb, section headings, grids, chips, cards and empty
 * states are shared through design-system.css + design-patterns.css.
 */

.tags-layout {
  --theme-accent: var(--parfum-warm, #c97232);
  --ui-context-accent: var(--theme-accent);
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

.tags-hero {
  --ui-context-accent: var(--theme-accent);
}

.tags-stat {
  border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--ui-border));
  background: color-mix(in srgb, var(--theme-accent) 6%, var(--ui-surface-subtle));
  color: color-mix(in srgb, var(--theme-accent) 58%, var(--ui-text));
}

.tags-stat__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ui-radius-pill);
  background: var(--theme-accent);
}

.tags-section__meta {
  margin: 0;
  color: var(--ui-text-muted);
  font-weight: 600;
}

.tags-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags-grid__item {
  min-width: 0;
}

.tag-tile {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  min-height: 100%;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--theme-accent) 48%, transparent), var(--ui-shadow-1);
}

.tag-tile.ui-card--interactive:hover,
.tag-tile.ui-card--interactive:focus-visible {
  border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--ui-border));
  box-shadow: inset 3px 0 0 var(--theme-accent), var(--ui-shadow-2);
}

.tag-tile--empty {
  opacity: 0.72;
}

.tag-tile__name {
  color: var(--ui-text);
  font-size: 1.02rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.tag-tile__count {
  width: fit-content;
  border-color: color-mix(in srgb, var(--theme-accent) 16%, var(--ui-border));
  background: color-mix(in srgb, var(--theme-accent) 5%, var(--ui-surface-muted));
  color: color-mix(in srgb, var(--theme-accent) 62%, var(--ui-text));
}

.tag-tile__description {
  color: var(--ui-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.perfume-grid > article {
  display: flex;
  min-width: 0;
}

.perfume-grid .perfume-card {
  width: 100%;
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-grid__item {
  display: flex;
}

.tags-layout .chip.ui-chip {
  text-decoration: none;
}

@media (max-width: 600px) {
  .tags-layout {
    padding-top: 1rem;
  }

  .tags-layout--detail .perfume-grid.ui-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tags-layout--detail .perfume-grid .perfume-card {
    min-width: 0;
  }
}