/* ═══════════════════════════════════════════════
   PAGINA DE CATEGORIA (pages/category.html)
   Largura util = <main> (a sidebar fixa ja e descontada
   pelo padding do body em core.css). Os ajustes internos
   usam container queries sobre essa largura real.
   ═══════════════════════════════════════════════ */

.category-page {
  --cat-base: 3 10 22;       /* mesmo tom do body/sidebar */
  --cat-deep: 13 16 36;
  --cat-violet: 45 108 255;
  --cat-magenta: 139 92 246;
  position: relative;
  isolation: isolate;
  padding-bottom: 56px;
}

/* Fundo roxo continuo: comeca roxo sob o header e termina no tom base (sem corte no footer) */
.category-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 72% -60px, rgb(45 108 255 / 0.20), transparent 70%),
    radial-gradient(620px 420px at 100% 32%, rgb(var(--cat-magenta) / 0.06), transparent 70%),
    radial-gradient(760px 520px at 0% 58%, rgb(37 99 235 / 0.08), transparent 70%),
    linear-gradient(180deg, rgb(12 16 38) 0%, rgb(10 13 30) 45%, rgb(var(--cat-base)) 100%);
}

/* Transicao suave sidebar -> conteudo (so existe sidebar fixa no desktop) */
@media (min-width: 769px) {
  .category-page::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(0 0 0 / 0.22), transparent);
  }
}

/* ═══════════════ HERO DE CATEGORIA (components/category-banner.html) ═══════════════
   Camadas: 1 base · 2 aurora · 3 fundo · (sombra) · 4 decoracao · 5 arte · 6 texto · 7 brilho
   Personalizacao por categoria via variaveis: --cat-accent, --cat-accent-2,
   --cat-overlay, --cat-bg-pos (definidas no bloco de configuracao do componente).
   Animacoes: so transform/opacity; desligadas no mobile e com reduced-motion. */
.cat-hero {
  --px: 0;
  --py: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
}

/* Palco: tudo que e fundo se dissolve no fundo da pagina (sem "retangulo") */
.cat-hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

/* 1 · base (tingida pelas cores da categoria, sempre sobre o roxo da loja) */
.cat-hero__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 78% 40%, rgb(45 108 255 / 0.30), transparent 70%),
    linear-gradient(180deg, rgb(13 17 40) 0%, rgb(10 13 30) 100%);
  background:
    radial-gradient(70% 90% at 78% 40%, color-mix(in srgb, var(--cat-accent) 30%, transparent), transparent 70%),
    radial-gradient(50% 70% at 100% 100%, color-mix(in srgb, var(--cat-accent-2) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgb(13 17 40) 0%, rgb(10 13 30) 100%);
}

/* 2 · aurora: manchas de luz (gradiente, sem filter blur — mais leve) */
.cat-hero__aurora span {
  position: absolute;
  width: 60cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(45 108 255 / 0.28), transparent 65%);
  background: radial-gradient(circle, color-mix(in srgb, var(--cat-accent) 30%, transparent), transparent 65%);
  top: -30%;
  right: -10%;
}

.cat-hero__aurora span:last-child {
  width: 45cqi;
  top: 30%;
  right: 25%;
  background: radial-gradient(circle, rgb(139 92 246 / 0.14), transparent 65%);
  background: radial-gradient(circle, color-mix(in srgb, var(--cat-accent-2) 16%, transparent), transparent 65%);
}

/* 3 · imagem de fundo configurada */
.cat-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cat-bg-pos, center);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 90%, transparent 100%);
  transform-origin: 65% 40%;
}

/* escurece o lado do texto: roxo escuro -> translucido -> arte */
.cat-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgb(9 12 28 / var(--cat-overlay, 0.9)) 0%,
    rgb(9 12 28 / calc(var(--cat-overlay, 0.9) * 0.82)) 32%,
    rgb(12 18 44 / calc(var(--cat-overlay, 0.9) * 0.3)) 62%,
    transparent 100%);
}

/* 4 · decoracao (aneis, formas, particulas) — parallax invertido e leve */
.cat-hero__decor {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cat-hero__ring {
  position: absolute;
  top: 50%;
  right: 6%;
  width: min(560px, 50cqi);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  border: 1px solid rgb(120 160 255 / 0.14);
  border-color: color-mix(in srgb, var(--cat-accent) 26%, transparent);
}

.cat-hero__ring--sm {
  right: 14%;
  width: min(360px, 32cqi);
  border-color: rgb(139 92 246 / 0.12);
  border-color: color-mix(in srgb, var(--cat-accent-2) 20%, transparent);
}

.cat-hero__shape {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgb(170 200 255 / 0.35);
  transform: rotate(45deg);
}

.cat-hero__shape--a { top: 20%; right: 44%; }
.cat-hero__shape--b { bottom: 28%; right: 7%; width: 10px; height: 10px; border-color: rgb(139 92 246 / 0.35); }

.cat-hero__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 1px rgb(170 200 255 / 0.8);
  opacity: 0.35;
}

/* Conteudo */
.cat-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 24px;
  min-height: clamp(420px, 56vh, 540px);
  padding-top: 44px;
  padding-bottom: 92px; /* texto fica acima da zona de dissolucao */
}

/* 6 · texto */
.cat-hero__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.cat-hero__label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgb(120 160 255 / 0.18);
  background: rgb(9 12 28 / 0.55);
  color: #bfd4ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cat-hero__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cat-accent), var(--cat-accent-2));
  box-shadow: 0 0 8px var(--cat-accent-2);
}

.cat-hero__label-home {
  transition: color 0.18s ease;
}

.cat-hero__label-home:hover {
  color: #fff;
}

.cat-hero__label-sep {
  color: rgb(170 200 255 / 0.45);
}

.cat-hero__label-cat {
  color: #eef2ff;
}

.cat-hero__title {
  margin-top: 18px;
  color: #fff;
  font-size: clamp(2.4rem, 1rem + 5.2cqi, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
}

.cat-hero__title--long {
  font-size: clamp(2rem, 0.9rem + 3.4cqi, 3.25rem);
}

.cat-hero__title-line {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cat-accent), var(--cat-accent-2));
}

.cat-hero__desc {
  margin-top: 16px;
  max-width: 30rem;
  color: rgb(220 228 255 / 0.7);
  font-size: clamp(0.95rem, 0.85rem + 0.35cqi, 1.1rem);
  line-height: 1.6;
}

.cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.cat-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, #2d6cff 0%, #3b5bff 55%, #6d4aff 100%);
  box-shadow:
    0 12px 30px -12px rgb(45 108 255 / 0.7),
    inset 0 1px 0 rgb(255 255 255 / 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cat-hero__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 18px 38px -12px rgb(45 108 255 / 0.85),
    inset 0 1px 0 rgb(255 255 255 / 0.22);
}

.cat-hero__cta:active {
  transform: translateY(0) scale(0.98);
}

.cat-hero__cta:focus-visible {
  outline: 2px solid #bfd4ff;
  outline-offset: 3px;
}

.cat-hero__cta svg {
  transition: transform 0.2s ease;
}

.cat-hero__cta:hover svg {
  transform: translateY(2px);
}

.cat-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(255 255 255 / 0.55);
  font-size: 13px;
  font-weight: 500;
}

.cat-hero__meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.15);
}

/* 5 + 7 · arte principal e brilho */
.cat-hero__visual {
  position: relative;
  z-index: 1;
  height: clamp(280px, 34cqi, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cat-hero__glow {
  position: absolute;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(45 108 255 / 0.45), rgb(139 92 246 / 0.12) 45%, transparent 70%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cat-accent) 50%, transparent),
    color-mix(in srgb, var(--cat-accent-2) 14%, transparent) 45%,
    transparent 70%);
}

.cat-hero__float {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-hero__fg {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.5));
}

.cat-hero__card {
  position: relative;
  width: clamp(180px, 22cqi, 280px);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px solid rgb(170 200 255 / 0.30);
  background:
    radial-gradient(90% 70% at 30% 20%, rgb(255 255 255 / 0.14), transparent 60%),
    linear-gradient(150deg, #1e4fd8 0%, #3b5bff 50%, #7c3aed 100%);
  background:
    radial-gradient(90% 70% at 30% 20%, rgb(255 255 255 / 0.14), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--cat-accent) 80%, #0b1030) 0%, #3b5bff 50%, color-mix(in srgb, var(--cat-accent-2) 85%, #0b1030) 100%);
  transform: rotate(4deg);
  box-shadow:
    0 30px 60px -22px rgb(0 0 0 / 0.75),
    0 0 70px -18px rgb(45 108 255 / 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* carta de tras: profundidade */
.cat-hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgb(120 160 255 / 0.2);
  background: linear-gradient(160deg, rgb(45 108 255 / 0.25), rgb(139 92 246 / 0.1));
  transform: rotate(-12deg) translate(-16%, 3%);
}

.cat-hero:hover .cat-hero__card {
  transform: rotate(2deg) translateY(-4px);
}

.cat-hero__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.cat-hero__monogram {
  font-size: clamp(4.5rem, 9cqi, 7.5rem);
  font-weight: 800;
  line-height: 1;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 10px 40px rgb(0 0 0 / 0.35);
}

/* Qual arte aparece: fg configurado > fundo configurado (sem carta) > carta da Central Cart/monograma */
.cat-hero.has-fg:not(.fg-error) .cat-hero__card,
.cat-hero.has-bg:not(.bg-error):not(.has-fg) .cat-hero__card,
.cat-hero.has-bg:not(.bg-error).fg-error .cat-hero__card {
  display: none;
}

.cat-hero.has-bg:not(.bg-error) .cat-hero__ring {
  opacity: 0.5;
}

/* ── Animacoes ── */
@keyframes catHeroIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes catHeroVisualIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes catHeroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-6%, 5%, 0) scale(1.12); }
}

@keyframes catHeroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

@keyframes catHeroBreathe {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes catHeroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes catHeroTwinkle {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-14px); }
}

@keyframes catHeroShape {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(90deg) translateY(-10px); }
}

/* entrada rapida (tambem ao trocar de categoria) */
@media (prefers-reduced-motion: no-preference) {
  .cat-hero__content > * {
    animation: catHeroIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .cat-hero__content > :nth-child(2) { animation-delay: 0.04s; }
  .cat-hero__content > :nth-child(3) { animation-delay: 0.08s; }
  .cat-hero__content > :nth-child(4) { animation-delay: 0.12s; }
  .cat-hero__content > :nth-child(5) { animation-delay: 0.16s; }
  .cat-hero__float {
    animation: catHeroVisualIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

/* movimento continuo: so desktop (poupa bateria no mobile) */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .cat-hero--anim-aurora .cat-hero__aurora span {
    animation: catHeroDrift 22s ease-in-out infinite alternate;
  }
  .cat-hero--anim-aurora .cat-hero__aurora span:last-child {
    animation-duration: 28s;
    animation-direction: alternate-reverse;
  }
  .cat-hero--anim-aurora .cat-hero__bg {
    animation: catHeroZoom 26s ease-in-out infinite alternate;
  }
  .cat-hero--anim-aurora .cat-hero__dot {
    animation: catHeroTwinkle 10s ease-in-out infinite;
    animation-delay: var(--d);
  }
  .cat-hero--anim-aurora .cat-hero__shape {
    animation: catHeroShape 14s ease-in-out infinite;
  }
  .cat-hero--anim-aurora .cat-hero__shape--b {
    animation-duration: 18s;
    animation-delay: -6s;
  }
  .cat-hero:not(.cat-hero--anim-none) .cat-hero__glow {
    animation: catHeroBreathe 8s ease-in-out infinite;
  }
  .cat-hero:not(.cat-hero--anim-none) .cat-hero__float {
    animation:
      catHeroVisualIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both,
      catHeroFloat 7s ease-in-out 0.7s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-hero__visual,
  .cat-hero__decor,
  .cat-hero__card {
    transition: none;
    transform: none;
  }
  .cat-hero__card { transform: rotate(4deg); }
}

/* ── Intermediario (notebook pequeno / tablet com sidebar) ── */
@container (max-width: 900px) {
  .cat-hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    min-height: 400px;
  }
  .cat-hero__card {
    width: clamp(150px, 24cqi, 220px);
  }
  .cat-hero__bg {
    width: 90%;
  }
  .cat-hero__shade {
    background: linear-gradient(90deg,
      rgb(9 12 28 / var(--cat-overlay, 0.9)) 0%,
      rgb(9 12 28 / calc(var(--cat-overlay, 0.9) * 0.88)) 45%,
      rgb(12 18 44 / calc(var(--cat-overlay, 0.9) * 0.45)) 75%,
      rgb(12 18 44 / calc(var(--cat-overlay, 0.9) * 0.2)) 100%);
  }
  .cat-hero__shape--a {
    display: none;
  }
}

/* ── Compacto (mobile, ou tablet com a sidebar ocupando espaco) ── */
@container (max-width: 640px) {
  .cat-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 64px;
  }
  .cat-hero__visual {
    order: -1;
    height: 110px;
    justify-content: flex-start;
    transform: none;
  }
  .cat-hero.has-fg:not(.fg-error) .cat-hero__visual {
    height: 190px;
    justify-content: center;
  }
  .cat-hero__glow {
    width: 180px;
    left: -30px;
  }
  .cat-hero.has-fg .cat-hero__glow {
    left: auto;
    width: 240px;
  }
  .cat-hero__card {
    width: 92px;
    aspect-ratio: 1;
    border-radius: 18px;
    transform: rotate(3deg);
  }
  .cat-hero__card::before {
    transform: rotate(-10deg) translate(-10%, 4%);
  }
  .cat-hero__monogram {
    font-size: 2.6rem;
  }
  .cat-hero__bg {
    width: 100%;
    height: 72%;
    object-position: var(--cat-bg-pos, center);
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
  }
  .cat-hero.has-bg:not(.bg-error):not(.has-fg) .cat-hero__visual {
    height: 120px; /* deixa a arte de fundo aparecer no topo */
  }
  .cat-hero__shade {
    background: linear-gradient(180deg,
      rgb(9 12 28 / calc(var(--cat-overlay, 0.9) * 0.3)) 0%,
      rgb(9 12 28 / calc(var(--cat-overlay, 0.9) * 0.85)) 45%,
      rgb(9 12 28 / var(--cat-overlay, 0.9)) 100%);
  }
  .cat-hero__ring {
    top: 18%;
    right: -20%;
    width: 90cqi;
  }
  .cat-hero__ring--sm,
  .cat-hero__shape {
    display: none;
  }
  .cat-hero__label {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .cat-hero__title {
    margin-top: 14px;
    font-size: clamp(2rem, 1.1rem + 5cqi, 2.6rem);
  }
  .cat-hero__title--long {
    font-size: clamp(1.6rem, 1rem + 4cqi, 2.1rem);
  }
  .cat-hero__title-line {
    margin-top: 14px;
  }
  .cat-hero__desc {
    margin-top: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-hero__actions {
    margin-top: 20px;
    gap: 12px;
  }
}

@container (max-width: 380px) {
  .cat-hero__cta {
    flex: 1 1 100%;
  }
}

/* ═══════════════ PRODUTOS ═══════════════ */
.category-products {
  position: relative;
  container-type: inline-size;
  margin-top: -24px; /* sobe para dentro da dissolucao do hero: sem linha entre hero e produtos */
}

.category-products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.category-products__eyebrow {
  color: #60a5fa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.category-products__title {
  margin-top: 6px;
  color: #fff;
  font-size: clamp(1.35rem, 1rem + 1.4cqi, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.category-products__title span {
  background: linear-gradient(90deg, #60a5fa, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.category-products__count {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgb(120 160 255 / 0.18);
  background: rgb(45 108 255 / 0.08);
  color: #bfd4ff;
  font-size: 12px;
  font-weight: 600;
}

/* Grid pela largura real disponivel (com ou sem sidebar) */
.category-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* o card mantem tudo (preco, estoque, link...), so passa a ocupar a celula */
.category-products__grid .package {
  max-width: none;
}

@container (min-width: 560px) {
  .category-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@container (min-width: 860px) {
  .category-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

@container (min-width: 1240px) {
  .category-products__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.category-products__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: rgb(203 213 245 / 0.55);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.18s ease;
}

.category-products__back:hover {
  color: #fff;
}

/* ═══ Grupos em carrossel (o componente .pc fica em styles/core.css) ═══ */
.category-groups {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.category-reco {
  margin-top: 64px;
}

/* Estado vazio */
.category-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border-radius: 22px;
  border: 1px dashed rgb(120 160 255 / 0.22);
  background: rgb(45 108 255 / 0.04);
}

.category-empty__icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid rgb(120 160 255 / 0.22);
  background: rgb(45 108 255 / 0.12);
  color: #bfd4ff;
  margin-bottom: 18px;
}

.category-empty__title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.category-empty__text {
  margin-top: 6px;
  max-width: 26rem;
  color: rgb(255 255 255 / 0.5);
  font-size: 0.9rem;
}

.category-empty__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgb(120 160 255 / 0.25);
  color: #ddd6fe;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.category-empty__link:hover {
  background: rgb(45 108 255 / 0.12);
  border-color: rgb(120 160 255 / 0.45);
}