/* Dekid category navigation — versioned separately from the main theme bundle. */
#category .dekid-category-nav {
  --dekid-category-accent: var(--dekid-coral);
  width: 100%;
  max-width: 320px;
  margin: 0 0 24px;
  padding: 22px 20px 24px;
  border: 1px solid rgba(23, 52, 95, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(23, 52, 95, 0.08);
}

#category .dekid-category-nav.is-sticky {
  position: sticky;
  top: var(--dekid-category-sticky-top, 16px);
}

.dekid-category-nav ul,
.dekid-category-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dekid-category-nav__mobile-toggle,
.dekid-category-nav__section-toggle {
  display: none;
}

.dekid-category-nav__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(23, 52, 95, 0.08);
}

.dekid-category-nav__title-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: var(--dekid-coral-dark);
  border-radius: 13px;
  background: #fff0ef;
}

.dekid-category-nav__title-mark svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#category .dekid-category-nav__title {
  color: var(--dekid-navy);
  font-size: 1.42rem;
  font-weight: 820;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

#category .dekid-category-nav__title:hover,
#category .dekid-category-nav__title:focus {
  color: var(--dekid-coral-dark);
}

.dekid-category-nav__sections {
  display: grid;
  gap: 5px;
}

.dekid-category-nav__section {
  --dekid-category-accent: var(--dekid-coral);
  --dekid-category-soft: #fff0ef;
  padding: 8px 0 11px;
  border-bottom: 1px solid rgba(23, 52, 95, 0.065);
}

.dekid-category-nav__section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.dekid-category-nav__section:nth-child(4n + 2) {
  --dekid-category-accent: #279b83;
  --dekid-category-soft: #eaf9f5;
}

.dekid-category-nav__section:nth-child(4n + 3) {
  --dekid-category-accent: #b98608;
  --dekid-category-soft: #fff7d8;
}

.dekid-category-nav__section:nth-child(4n + 4) {
  --dekid-category-accent: #347fbd;
  --dekid-category-soft: #eaf4fd;
}

.dekid-category-nav__section-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

#category .dekid-category-nav__section-link {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 43px;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--dekid-navy);
  border-radius: 13px;
  font-size: 0.97rem;
  font-weight: 780;
  line-height: 1.3;
  transition: color var(--dekid-transition), background var(--dekid-transition), transform var(--dekid-transition);
}

#category .dekid-category-nav__section-link:hover,
#category .dekid-category-nav__section-link:focus {
  color: var(--dekid-navy);
  background: var(--dekid-category-soft);
  transform: translateX(2px);
}

.dekid-category-nav__section-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--dekid-category-accent);
}

.dekid-category-nav__section.is-in-path .dekid-category-nav__section-link {
  background: var(--dekid-category-soft);
}

.dekid-category-nav__section.is-in-path .dekid-category-nav__section-link::before {
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--dekid-category-accent);
  content: "";
}

.dekid-category-nav__section.is-active .dekid-category-nav__section-link {
  font-weight: 850;
}

.dekid-category-nav__children-wrap {
  display: block;
  padding: 2px 4px 0 19px;
}

.dekid-category-nav__children {
  display: grid;
  gap: 1px;
}

.dekid-category-nav__child {
  position: relative;
}

.dekid-category-nav__child.is-extra {
  display: none;
}

.dekid-category-nav__children[data-expanded="true"] > .dekid-category-nav__child.is-extra {
  display: block;
}

#category .dekid-category-nav__child > a {
  position: relative;
  display: flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 9px 7px 18px;
  color: #50617a;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.38;
  transition: color var(--dekid-transition), background var(--dekid-transition), transform var(--dekid-transition);
}

#category .dekid-category-nav__child > a::before {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c5ceda;
  content: "";
  transform: translateY(-50%);
}

#category .dekid-category-nav__child > a:hover,
#category .dekid-category-nav__child > a:focus {
  color: var(--dekid-navy);
  background: #f4f7fa;
  transform: translateX(2px);
}

#category .dekid-category-nav__child > a:hover::before,
#category .dekid-category-nav__child > a:focus::before,
#category .dekid-category-nav__child.is-in-path > a::before,
#category .dekid-category-nav__child.is-active > a::before {
  background: var(--dekid-category-accent);
}

#category .dekid-category-nav__child.is-in-path > a,
#category .dekid-category-nav__child.is-active > a {
  color: var(--dekid-navy);
  background: var(--dekid-category-soft);
  font-weight: 760;
}

.dekid-category-nav__grandchildren {
  display: grid;
  gap: 2px;
  padding: 4px 0 3px 18px !important;
}

#category .dekid-category-nav__grandchildren a {
  display: block;
  padding: 5px 9px;
  color: var(--dekid-muted);
  border-radius: 8px;
  font-size: 0.81rem;
  line-height: 1.35;
}

#category .dekid-category-nav__grandchildren a:hover,
#category .dekid-category-nav__grandchildren a:focus,
#category .dekid-category-nav__grandchildren .is-active a {
  color: var(--dekid-navy);
  background: #f4f7fa;
}

.dekid-category-nav__more {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  margin-top: 3px;
  color: var(--dekid-category-accent);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 0.81rem;
  font-weight: 760;
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--dekid-transition), background var(--dekid-transition);
}

.dekid-category-nav__more:hover,
.dekid-category-nav__more:focus {
  color: var(--dekid-navy);
  background: var(--dekid-category-soft);
}

.dekid-category-nav__more svg,
.dekid-category-nav__section-toggle svg,
.dekid-category-nav__chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform var(--dekid-transition);
}

.dekid-category-nav__more[aria-expanded="true"] svg,
.dekid-category-nav__section-toggle[aria-expanded="true"] svg,
.dekid-category-nav[data-mobile-open="true"] .dekid-category-nav__mobile-toggle .dekid-category-nav__chevron {
  transform: rotate(180deg);
}

.dekid-category-nav__more-label--close,
.dekid-category-nav__more[aria-expanded="true"] .dekid-category-nav__more-label--open {
  display: none;
}

.dekid-category-nav__more[aria-expanded="true"] .dekid-category-nav__more-label--close {
  display: inline;
}

@media (max-width: 991px) {
  #category #left-column,
  #category #content-wrapper {
    float: none;
    width: 100%;
    max-width: 100%;
  }

  #category #left-column {
    margin-bottom: 18px;
  }

  #category .dekid-category-nav {
    max-width: none;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
  }

  #category .dekid-category-nav__mobile-toggle {
    display: flex;
    width: 100%;
    min-height: 62px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--dekid-navy);
    border: 0;
    background: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  .dekid-category-nav__mobile-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: var(--dekid-coral-dark);
    border-radius: 12px;
    background: #fff0ef;
  }

  .dekid-category-nav__mobile-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
  }

  .dekid-category-nav__mobile-toggle .dekid-category-nav__chevron {
    margin-left: auto;
  }

  .dekid-category-nav__panel {
    padding: 18px 16px 20px;
    border-top: 1px solid rgba(23, 52, 95, 0.08);
    background: #fff;
  }

  .dekid-category-nav[data-mobile-open="false"] .dekid-category-nav__panel,
  .dekid-category-nav__children-wrap[aria-hidden="true"] {
    display: none;
  }

  .dekid-category-nav__title-row {
    padding-bottom: 14px;
    margin-bottom: 4px;
  }

  #category .dekid-category-nav__title {
    font-size: 1.2rem;
  }

  .dekid-category-nav__section {
    padding: 6px 0 8px;
  }

  #category .dekid-category-nav__section-link {
    min-height: 48px;
    padding: 10px 12px;
  }

  .dekid-category-nav__section-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    padding: 0;
    color: var(--dekid-category-accent);
    border: 0;
    border-radius: 12px;
    background: var(--dekid-category-soft);
    cursor: pointer;
  }

  .dekid-category-nav__children-wrap {
    padding: 3px 2px 2px 18px;
  }

  #category .dekid-category-nav__child > a,
  .dekid-category-nav__more {
    min-height: 44px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #category #left-column #search_filters_wrapper {
    display: none;
  }
}

@media (max-width: 575px) {
  #category #subcategories ul {
    margin-right: -5px;
    margin-left: -5px;
  }

  #category #subcategories ul li {
    width: calc(50% - 10px);
    min-width: 0;
    margin: 5px;
  }

  #category #subcategories .subcategory-name {
    overflow-wrap: anywhere;
  }
}
