.categories-page {
  --categories-ink: #171126;
  --categories-muted: #756b82;
  --categories-purple: #5a22a5;
  color: var(--categories-ink);
  background: #fff;
}

.categories-hero {
  position: relative;
  overflow: hidden;
  padding: 2rem 0 2.2rem;
  background:
    radial-gradient(circle at 14% -30%, rgba(126, 66, 197, .15), transparent 38%),
    radial-gradient(circle at 88% 10%, rgba(255, 194, 32, .13), transparent 28%),
    linear-gradient(180deg, #faf8fd, #fff);
}

.categories-hero::after {
  position: absolute;
  inset: auto -8% -90px auto;
  width: 260px;
  height: 260px;
  border: 46px solid rgba(92, 40, 165, .045);
  border-radius: 50%;
  content: "";
}

.categories-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.6rem;
  color: #8e829b;
  font-size: .75rem;
  font-weight: 700;
}

.categories-breadcrumb a { color: #6841a0; text-decoration: none; }
.categories-breadcrumb i { font-size: .56rem; }
.categories-heading { position: relative; z-index: 1; text-align: center; }
.categories-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .45rem; color: #6f3cb1; font-size: .7rem; font-weight: 900; letter-spacing: .13em; }
.categories-heading h1 { margin: 0; color: #171126; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; letter-spacing: -.045em; }
.categories-heading p { margin: .55rem auto 0; color: var(--categories-muted); font-size: clamp(.92rem, 1.5vw, 1.08rem); }

.categories-catalog { padding: 1.25rem 0 2rem; }
.categories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.category-showcase {
  --category-tint: #f0edff;
  --category-accent: #6335aa;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(64, 38, 93, .08);
  border-radius: 20px;
  color: var(--categories-ink);
  background: var(--category-tint);
  box-shadow: 0 12px 28px rgba(39, 22, 63, .07);
  text-decoration: none;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.category-showcase:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--category-accent) 28%, transparent); color: var(--categories-ink); box-shadow: 0 22px 45px rgba(39, 22, 63, .14); }
.category-showcase--2 { --category-tint: #f8efff; --category-accent: #8b3db1; }
.category-showcase--3 { --category-tint: #edf6fb; --category-accent: #287a9c; }
.category-showcase--4 { --category-tint: #fff2e8; --category-accent: #b45e2c; }
.category-showcase--5 { --category-tint: #fff7df; --category-accent: #9d6d05; }
.category-showcase--6 { --category-tint: #fff0f3; --category-accent: #ad4560; }
.category-showcase--7 { --category-tint: #eaf7f2; --category-accent: #278467; }
.category-showcase--8 { --category-tint: #f3effb; --category-accent: #6741a2; }

.category-showcase-media { position: relative; display: grid; height: 190px; flex: 0 0 auto; place-items: center; overflow: hidden; padding: 1rem 1rem .2rem; }
.category-showcase-media::before { position: absolute; top: 18%; left: 17%; width: 66%; height: 66%; border-radius: 50%; background: rgba(255,255,255,.58); filter: blur(2px); content: ""; }
.category-showcase-media > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 13px 12px rgba(29, 18, 42, .16)); transition: transform .35s ease; }
.category-showcase:hover .category-showcase-media > img { transform: scale(1.055); }
.category-showcase-placeholder { position: relative; z-index: 1; display: grid; width: 108px; height: 108px; place-items: center; border: 1px solid rgba(94, 50, 153, .12); border-radius: 30px; color: var(--category-accent); background: rgba(255,255,255,.68); font-size: 2.9rem; }
.category-showcase-thumbs { position: absolute; z-index: 2; inset-inline-end: .8rem; bottom: .45rem; display: flex; gap: .35rem; }
.category-showcase-thumbs img { width: 44px; height: 44px; padding: 3px; border: 2px solid #fff; border-radius: 12px; object-fit: contain; background: rgba(255,255,255,.94); box-shadow: 0 5px 13px rgba(31,20,42,.14); }

.category-showcase-body { display: flex; min-height: 140px; flex: 1; flex-direction: column; padding: .95rem 1rem 1rem; border-radius: 17px 17px 0 0; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.category-showcase-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.category-showcase-topline strong { font-size: 1rem; font-weight: 900; line-height: 1.35; }
.category-showcase-topline i { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(71,42,95,.12); border-radius: 50%; color: var(--category-accent); background: #fff; font-size: .72rem; }
.category-showcase-body > small { margin-top: .2rem; color: var(--categories-muted); font-size: .68rem; font-weight: 700; }
.category-showcase-description { display: -webkit-box; overflow: hidden; margin-top: .45rem; color: #6e647a; font-size: .72rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-showcase-children { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.category-showcase-children b { padding: .25rem .48rem; border-radius: 999px; color: #665873; background: #f5f2f8; font-size: .58rem; font-weight: 800; }
.category-showcase-cta { margin-top: auto; padding-top: .65rem; color: var(--category-accent); font-size: .7rem; font-weight: 900; }
.categories-empty { grid-column: 1 / -1; padding: 4rem 1rem; border: 1px dashed #d9cee4; border-radius: 20px; color: #7c6e8a; text-align: center; background: #faf8fc; }
.categories-empty i { color: #7041ad; font-size: 2rem; }
.categories-empty h2 { margin: .6rem 0 .25rem; color: #2d2138; font-size: 1.25rem; }
.categories-empty p { margin: 0; }

.categories-trust { border-top: 1px solid #ece7f1; background: #f8f7fb; }
.categories-trust-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.categories-trust-grid > div { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 106px; padding: 1rem; border-inline-end: 1px solid #e5deeb; }
.categories-trust-grid > div:last-child { border-inline-end: 0; }
.categories-trust-grid i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #54269a; background: #eee7f8; font-size: 1.35rem; }
.categories-trust-grid span > * { display: block; }
.categories-trust-grid strong { color: #281b36; font-size: .85rem; font-weight: 900; }
.categories-trust-grid small { margin-top: .15rem; color: #84778f; font-size: .66rem; }

@media (max-width: 1199.98px) {
  .categories-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
  .categories-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
  .categories-hero { padding: 1rem 0 1.2rem; }
  .categories-hero .container, .categories-catalog .container { padding-inline: .7rem; }
  .categories-breadcrumb { margin-bottom: .9rem; }
  .categories-heading h1 { font-size: 1.65rem; }
  .categories-heading p { font-size: .82rem; }
  .categories-catalog { padding: .65rem 0 1rem; }
  .categories-grid { gap: .55rem; }
  .category-showcase { min-height: 208px; border-radius: 15px; }
  .category-showcase-media { height: 124px; padding: .55rem .55rem 0; }
  .category-showcase-placeholder { width: 72px; height: 72px; border-radius: 20px; font-size: 2rem; }
  .category-showcase-thumbs { inset-inline-end: .4rem; bottom: .25rem; gap: .2rem; }
  .category-showcase-thumbs img { width: 30px; height: 30px; border-width: 1px; border-radius: 8px; }
  .category-showcase-body { min-height: 84px; padding: .65rem .7rem .7rem; border-radius: 13px 13px 0 0; }
  .category-showcase-topline strong { font-size: .78rem; }
  .category-showcase-topline i { width: 23px; height: 23px; font-size: .62rem; }
  .category-showcase-body > small { font-size: .58rem; }
  .category-showcase-description, .category-showcase-children, .category-showcase-cta { display: none; }
  .categories-trust { display: none; }
}