/* Slide-in panels: mobile menu and mini-cart. */

.st-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.st-drawer[hidden] {
  display: none;
}

.st-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--st-overlay);
}

.st-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;

  /* Fixed from the brief: `min(100%, 420px)` makes the panel exactly as
     wide as the drawer on any viewport <= 420px — including the `mobile`
     project's 390px Pixel 5 profile — so it fully covers `.st-drawer__backdrop`
     underneath it and the backdrop-click-to-close affordance becomes
     unreachable (confirmed: the brief's own "closes on backdrop click" test
     times out at that exact width). Reserving 56px keeps a always-visible,
     always-tappable strip of backdrop past the panel's trailing edge. */
  width: min(calc(100% - 56px), 420px);
  background: var(--st-surface);
  border-inline-end: var(--st-rule);
}

.st-drawer--end .st-drawer__panel {
  inset-inline: auto 0;
  border-inline: var(--st-rule) none;
  border-inline-start: var(--st-rule);
}

.st-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: var(--st-rule);
}

.st-drawer__title {
  font-size: var(--st-size-eyebrow);
  font-weight: var(--st-weight-extrabold);
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
}

.st-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--st-h-touch);
  height: var(--st-h-touch);
  background: none;
  border: 0;
  cursor: pointer;
}

.st-drawer__body {
  flex: 1;
  overflow-y: auto;
}

.st-drawer__foot {
  padding: 16px;
  border-top: var(--st-rule);
}

/* stylelint-disable selector-class-pattern -- .sub-menu is WordPress core's own class,
   emitted by Walker_Nav_Menu::start_lvl() for a nested <ul>; DrawerMenuWalker (see
   drawer.php) only reshapes which items reach this level, it doesn't touch the
   class WordPress gives the wrapping <ul> itself, so this class name isn't ours to
   rename. */
.st-drawer__menu,
.st-drawer__menu .sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.st-drawer__menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--st-h-touch);
  padding: 12px 16px;
  border-bottom: var(--st-rule-thin);
  font-size: 16px;
  font-weight: var(--st-weight-bold);
  text-decoration: none;
}

.st-drawer__menu .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 16px;
  background: var(--st-accent-tint);
}

.st-drawer__menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: var(--st-h-touch);
  padding: 8px 10px;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  font-size: var(--st-size-body-sm);
  text-decoration: none;
}

/*
 * The active item in the mobile menu.
 *
 * Unlike the desktop nav, nothing was broken in the MARKUP here: drawer.php
 * deliberately uses WordPress's default walker, which has been emitting
 * `current-menu-item` and its ancestor siblings on every request all along.
 * There was simply never a rule listening, so the drawer was just as unable
 * to show the shopper where they were.
 *
 * A leading edge rather than the desktop's bottom rule: these are stacked
 * full-width rows, so a 4px bar down the inline start is the same "régua de
 * 4 px" idea turned through ninety degrees, and it survives the row's own
 * `border-bottom` without the two reading as one thick smudge.
 *
 * `:is()` keeps the five core class names to one selector. They are matched
 * directly, not translated into an `st-` modifier the way MegaMenuWalker does,
 * for the reason the enclosing stylelint-disable already gives: these are
 * WordPress's own classes on markup this theme does not build, so there is no
 * seam at which to rename them.
 */
.st-drawer__menu > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a {
  border-inline-start: 4px solid var(--st-accent);
  color: var(--st-accent-deep);
  padding-inline-start: 12px;
}

.st-drawer__menu .sub-menu li:is(.current-menu-item, .current_page_item) > a {
  border-color: var(--st-accent);
  color: var(--st-accent-deep);
  font-weight: var(--st-weight-bold);
}
/* stylelint-enable selector-class-pattern */