/* =========================================================
   CATEGORIES DIRECTORY (/categories)
   ========================================================= */

.catdir-page {
   --catdir-ink: #1a1a2e;
   --catdir-muted: #667085;
   --catdir-line: rgba(26, 26, 46, 0.08);
   --catdir-pink: var(--theme-primary, #d377b0);
   --catdir-pink-deep: var(--theme-primary-hover, #b95794);
   background: #f6f3f7;
   padding: 20px 0 72px;
}

.catdir-page .container {
   max-width: 1180px;
}

.catdir-breadcrumb {
   margin-bottom: 16px;
}

.catdir-breadcrumb ol {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 13px;
   color: var(--catdir-muted);
}

.catdir-breadcrumb li:not(:last-child)::after {
   content: "/";
   margin-left: 8px;
   color: #aeb8c8;
}

.catdir-breadcrumb a {
   color: var(--catdir-muted);
   text-decoration: none;
}

.catdir-breadcrumb a:hover {
   color: var(--catdir-pink);
}

.catdir-breadcrumb [aria-current="page"] {
   color: var(--catdir-ink);
   font-weight: 700;
}

.catdir-hero {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   min-height: 210px;
   margin-bottom: 28px;
   padding: 36px 40px;
   border-radius: 22px;
   color: #fff;
   background:
      radial-gradient(520px 220px at 88% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
      linear-gradient(120deg, #d377b0 0%, #c45f9e 48%, #1690b8 140%);
}

.catdir-hero__copy {
   position: relative;
   z-index: 1;
   max-width: 34rem;
}

.catdir-hero__eyebrow,
.catdir-kicker {
   margin: 0 0 10px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.catdir-hero__eyebrow {
   color: rgba(255, 255, 255, 0.82);
}

.catdir-kicker {
   color: var(--catdir-pink);
}

.catdir-hero h1 {
   margin: 0 0 12px;
   font-size: clamp(30px, 4vw, 46px);
   line-height: 1.08;
   font-weight: 800;
}

.catdir-hero p {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.86);
}

.catdir-hero__meta {
   margin-top: 14px !important;
   display: inline-flex;
   align-items: center;
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.16);
   font-size: 13px !important;
   font-weight: 700;
}

.catdir-hero__visual {
   position: relative;
   width: 160px;
   height: 160px;
   flex: 0 0 auto;
   z-index: 1;
}

.catdir-hero__orb {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.22);
   background: rgba(255, 255, 255, 0.08);
}

.catdir-hero__orb--a {
   inset: 0;
}

.catdir-hero__orb--b {
   inset: 22px;
}

.catdir-hero__badge {
   position: absolute;
   inset: 42px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.16);
   font-size: 42px;
   color: #fff;
}

.catdir-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 300px;
   gap: 24px;
   align-items: start;
}

.catdir-section-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 18px;
}

.catdir-section-head h2 {
   margin: 0;
   font-size: 24px;
   font-weight: 800;
   color: var(--catdir-ink);
}

.catdir-grid {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
}

.catdir-card {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--catdir-line);
   border-radius: 18px;
   box-shadow: 0 10px 28px rgba(26, 26, 46, 0.05);
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.catdir-card:hover {
   transform: translateY(-3px);
   border-color: rgba(211, 119, 176, 0.35);
   box-shadow: 0 16px 34px rgba(211, 119, 176, 0.14);
}

.catdir-card__media {
   display: block;
   aspect-ratio: 16 / 10;
   overflow: hidden;
   background: #f4f1f5;
}

.catdir-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.35s ease;
}

.catdir-card:hover .catdir-card__media img {
   transform: scale(1.05);
}

.catdir-card__body {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 14px 16px 16px;
   flex: 1;
}

.catdir-card__title {
   font-size: 16px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--catdir-ink);
   text-decoration: none;
   overflow-wrap: anywhere;
}

.catdir-card__title:hover {
   color: var(--catdir-pink-deep);
}

.catdir-card__subs {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.catdir-card__subs a {
   display: inline-flex;
   padding: 5px 10px;
   border-radius: 999px;
   background: #f7f0f5;
   color: #5b6378;
   font-size: 12px;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.15s ease, color 0.15s ease;
}

.catdir-card__subs a:hover,
.catdir-card__subs a.is-more {
   background: rgba(211, 119, 176, 0.14);
   color: var(--catdir-pink-deep);
}

.catdir-card__cta {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
   color: var(--catdir-pink);
   text-decoration: none;
}

.catdir-card__cta i {
   transition: transform 0.18s ease;
}

.catdir-card:hover .catdir-card__cta i {
   transform: translateX(3px);
}

.catdir-empty {
   text-align: center;
   padding: 48px 20px;
   background: #fff;
   border: 1px solid var(--catdir-line);
   border-radius: 18px;
}

.catdir-empty h2 {
   margin: 0 0 8px;
}

.catdir-empty a {
   display: inline-flex;
   margin-top: 12px;
   padding: 10px 16px;
   border-radius: 999px;
   background: var(--catdir-pink);
   color: #fff;
   font-weight: 700;
   text-decoration: none;
}

.catdir-aside {
   display: flex;
   flex-direction: column;
   gap: 16px;
   position: sticky;
   top: 96px;
}

.catdir-aside-card {
   background: #fff;
   border: 1px solid var(--catdir-line);
   border-radius: 18px;
   padding: 16px;
   box-shadow: 0 10px 28px rgba(26, 26, 46, 0.05);
}

.catdir-aside-card__head {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
}

.catdir-aside-card__head h2 {
   margin: 0;
   font-size: 16px;
   font-weight: 800;
   color: var(--catdir-ink);
}

.catdir-aside-card__icon {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(211, 119, 176, 0.12);
   color: var(--catdir-pink-deep);
}

.catdir-aside-card__icon.is-stores {
   background: rgba(22, 144, 184, 0.12);
   color: #1690b8;
}

.catdir-aside-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.catdir-aside-link {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr) 14px;
   align-items: center;
   gap: 10px;
   padding: 8px;
   border-radius: 12px;
   text-decoration: none;
   color: var(--catdir-ink);
   transition: background 0.15s ease;
}

.catdir-aside-link:hover {
   background: #faf5f8;
}

.catdir-aside-link__media {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   overflow: hidden;
   background: #f4f1f5;
   border: 1px solid var(--catdir-line);
}

.catdir-aside-link__media.is-logo {
   background: #fff;
   display: grid;
   place-items: center;
}

.catdir-aside-link__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.catdir-aside-link__media.is-logo img {
   width: 78%;
   height: 78%;
   object-fit: contain;
}

.catdir-aside-link__name {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.3;
   overflow-wrap: anywhere;
}

.catdir-aside-link > i {
   color: var(--catdir-pink);
   opacity: 0.7;
}

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

@media (max-width: 991px) {
   .catdir-layout {
      grid-template-columns: 1fr;
   }

   .catdir-aside {
      position: static;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
   }
}

@media (max-width: 767px) {
   .catdir-page {
      padding: 12px 0 56px;
   }

   .catdir-hero {
      min-height: 0;
      padding: 28px 22px;
      border-radius: 18px;
   }

   .catdir-hero__visual {
      display: none;
   }

   .catdir-hero h1 {
      font-size: 30px;
   }

   .catdir-hero p {
      font-size: 15px;
   }

   .catdir-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .catdir-aside {
      grid-template-columns: 1fr;
   }

   .catdir-section-head h2 {
      font-size: 22px;
   }
}

@media (max-width: 480px) {
   .catdir-hero {
      padding: 24px 18px;
   }

   .catdir-card__body {
      padding: 12px 14px 14px;
   }
}