/**
 * Mobile menu drawer (Figma "mega menu — Mobile Menu" / "Mobile 390"): a
 * modal panel at the start edge. Root panel: logo, characters, page links.
 * Character panel: back row, "all products", category accordions.
 */
.c-mobile-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  inline-size: min(20rem, 85vw);
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-text-primary);
}

.c-mobile-menu::backdrop {
  background: rgb(0 0 0 / 40%);
}

.c-mobile-menu__panel {
  display: grid;
  align-content: start;
  padding-block-end: var(--space-6);
}

.c-mobile-menu__panel[hidden] {
  display: none;
}

.c-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: 4rem;
  padding: var(--space-2) var(--space-4);
  border-block-end: 1px solid var(--color-brand);
}

.c-mobile-menu__logo {
  display: block;
  inline-size: auto;
  block-size: 2.75rem;
}

.c-mobile-menu__close,
.c-mobile-menu__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.c-mobile-menu__close {
  justify-content: center;
  min-inline-size: 2.75rem;
  margin-inline-end: calc(-1 * var(--space-3));
}

.c-mobile-menu__list,
.c-mobile-menu__pages,
.c-mobile-menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-mobile-menu__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-block-end: 1px solid var(--color-border-light);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-s);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.c-mobile-menu__row::-webkit-details-marker {
  display: none;
}

.c-mobile-menu__character {
  border-block-end: 0;
}

.c-mobile-menu__row:hover,
.c-mobile-menu__row:focus-visible {
  background: var(--color-gray-50);
}

.c-mobile-menu__label {
  flex: 1;
}

.c-mobile-menu__avatar {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  object-fit: contain;
}

/* vuesax arrow-down, turned to point forward (left in RTL) or back. */
.c-mobile-menu__chevron {
  flex: none;
}

.c-mobile-menu__chevron--forward {
  transform: rotate(90deg);
}

.c-mobile-menu__chevron--back {
  transform: rotate(-90deg);
}

.c-mobile-menu__group details:not([open]) .c-mobile-menu__chevron--toggle {
  transform: rotate(90deg);
}

.c-mobile-menu__all {
  margin: var(--space-2) var(--space-4) 0;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-brand);
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  text-decoration: none;
}

.c-mobile-menu__links {
  padding-block: var(--space-1) var(--space-2);
  border-block-end: 1px solid var(--color-border-light);
}

.c-mobile-menu__links a {
  display: block;
  padding: var(--space-2) var(--space-8);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  text-decoration: none;
}

.c-mobile-menu__pages {
  margin-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-light);
}

.c-mobile-menu__pages a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  text-decoration: none;
}

.c-mobile-menu__pages .current-menu-item > a,
.c-mobile-menu__links a:hover,
.c-mobile-menu__pages a:hover {
  color: var(--color-brand);
}

@media (min-width: 1024px) {
  .c-mobile-menu {
    display: none;
  }
}