/** Shopify CDN: Minification failed

Line 28:72 Expected ":"

**/
/* ==========================================================================
   ECSR-621 — mobile drawer navigation (v2)

   Rebuilt structure, ported from the Horizon-based core theme's
   snippets/header-drawer.liquid + assets/header-drawer.js:

     L1  root list — label left, caret right, one caret column.
     L1  tap  -> full-height panel slides in over the drawer (translateX)
                 with a sticky "back + parent title" header row.
     L2  leaf links ("Shop All ...") render plain; groups with children render
         as in-place accordions (plus/minus), never a second slide level.
     L3  grandchild links, indented under their accordion.

   Loaded from layout/theme.liquid *after* base.css. Everything structural is
   `.js`-scoped so the no-JS nested-details fallback in base.css still works.

   Baltic Born's existing drawer look is intentionally preserved: white
   background, 1.5rem/400 root rows, 1.5rem/300 child links, #ede1dd hairlines
   between root rows, and the untouched search / My Account / social strips.
   ========================================================================== */

.menu-drawer {
  /* Token shim for the ported rules — Dawn has no --drawer-*/--layer-* scale. */
  --menu-drawer-animation-speed: 0.2s;
  --menu-drawer-animation-easing: ease;
  --menu-drawer-icon-size: 1.2rem;
  --menu-drawer-inline-padding: 2rem; /* matches the root list's 0 20px 20px */
  --menu-drawer-row-min-height: 2.4rem;
  --menu-drawer-divider: #ede1dd;
  --menu-drawer-panel-layer: 1;

  /* Geometry tokens declared for parity with the port source. Dawn's own
     .menu-drawer box (full width under the header, 40rem from 750px up) is
     deliberately kept — this ticket restructures the nav, not the drawer. */
  --menu-drawer-width: 95vw;
  --menu-drawer-max-width: 500px;
  --menu-drawer-panel-height: 100%;
}

/* --------------------------------------------------------------------------
   Rows — every level uses the same flex row so labels sit left and icons
   sit in one right-hand column that cannot drift or shrink.
   -------------------------------------------------------------------------- */

.js .menu-drawer .menu-drawer__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: var(--menu-drawer-row-min-height);
  text-decoration: none;
}

/* the caret/plus column must never be pushed around by long labels, and stock
   Dawn's 5.2rem / 3rem right padding (it positioned the arrow absolutely) has
   to go so every icon lands on the same x. */
.js .menu-drawer .menu-drawer__navigation .menu-drawer__menu-item,
.js .menu-drawer .menu-drawer__navigation summary.menu-drawer__menu-item,
.js .menu-drawer .menu-drawer__navigation details summary.menu-drawer__menu-item {
  padding-right: 0;
}

.js .menu-drawer .menu-drawer__menu-item-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.js .menu-drawer .menu-drawer__menu-item > .menu-drawer__icon,
.js .menu-drawer .menu-drawer__back-button > .menu-drawer__icon {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--menu-drawer-icon-size);
  height: var(--menu-drawer-icon-size);
  margin: 0;
  transform: none;
}

/* base.css hides .icon-caret in JS mode (stock Dawn used arrows) — v2 uses
   carets for direction, so opt back in inside the drawer only. */
.js .menu-drawer .menu-drawer__menu-item .menu-drawer__icon svg,
.js .menu-drawer .menu-drawer__back-button .menu-drawer__icon svg {
  display: block;
  width: var(--menu-drawer-icon-size);
  height: var(--menu-drawer-icon-size);
}

.js .menu-drawer .icon-caret--forward svg {
  transform: rotate(-90deg);
}

.js .menu-drawer .icon-caret--backward svg {
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Level 1 — root list
   -------------------------------------------------------------------------- */

.js .menu-drawer .menu-drawer__menu-container,
.js .menu-drawer .menu-drawer__menu-item--mainlist {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Level 1 panel — slides in over the drawer
   -------------------------------------------------------------------------- */

.js .menu-drawer__submenu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--menu-drawer-panel-height);
  background-color: rgb(var(--color-background));
  z-index: var(--menu-drawer-panel-layer);
  transform: translateX(100%);
  visibility: hidden;
  overflow: hidden;
  transition: transform var(--menu-drawer-animation-speed) var(--menu-drawer-animation-easing),
    visibility var(--menu-drawer-animation-speed) var(--menu-drawer-animation-easing);
}

.js details[data-drawer-submenu][open] > .menu-drawer__submenu {
  transition: transform var(--menu-drawer-animation-speed) var(--menu-drawer-animation-easing),
    visibility var(--menu-drawer-animation-speed) var(--menu-drawer-animation-easing);
}

.js details[data-drawer-submenu][open].menu-opening > .menu-drawer__submenu {
  transform: translateX(0);
  visibility: visible;
}

.js .menu-drawer__submenu .menu-drawer__inner-submenu {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* while a panel is open the level-1 list must not scroll behind it */
.js .menu-drawer--submenu-open .menu-drawer__navigation-container {
  overflow: hidden;
}

/* "where am I": the back row stays put while the panel scrolls */
.js .menu-drawer__nav-buttons {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(var(--color-background));
  border-bottom: 1px solid var(--menu-drawer-divider);
}

.js .menu-drawer .menu-drawer__back-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 2rem var(--menu-drawer-inline-padding);
  border: 0;
  box-shadow: none;
  background-color: transparent;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.15px;
  text-align: left;
  text-decoration: none;
}

.js .menu-drawer .menu-drawer__back-button:hover,
.js .menu-drawer .menu-drawer__back-button:focus {
  color: rgb(var(--color-foreground));
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Level 2 — inside the panel
   -------------------------------------------------------------------------- */

.js .menu-drawer__submenu .menu-drawer__menu--childlist {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0.6rem var(--menu-drawer-inline-padding) 2rem;
}

.js .menu-drawer__submenu .menu-drawer__menu--childlist > .menu-drawer__list-item {
  border: 0;
  padding: 0;
}

.js .menu-drawer__submenu .menu-drawer__accordion,
.js .menu-drawer__submenu .menu-drawer__accordion > summary {
  width: 100%;
}

/* level-2 group heading (accordion). Same size as the child links, one step
   heavier, so the group reads as a heading without a new type style. */
.js .menu-drawer__submenu summary.menu-drawer__menu-item--parent {
  padding: 1.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.15px;
}

.js .menu-drawer__submenu details[open] > summary .menu-drawer__icon--plus,
.js .menu-drawer__submenu details:not([open]) > summary .menu-drawer__icon--minus {
  display: none;
}

/* --------------------------------------------------------------------------
   Level 3 — grandchild links under an accordion
   -------------------------------------------------------------------------- */

.js .menu-drawer__submenu .menu-drawer__menu--grandchildlist {
  list-style: none;
  margin: 0;
  padding: 0 0 0.6rem 1.4rem;
}

/* Accordion reveal, ported from the core theme's accordion-custom rules.
   Kept class-based (not ::details-content) so browsers without
   interpolate-size simply snap open instead of hiding the content. */
.js .menu-drawer .details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  interpolate-size: allow-keywords;
  transition: block-size var(--menu-drawer-animation-speed) var(--menu-drawer-animation-easing),
    opacity var(--menu-drawer-animation-speed) var(--menu-drawer-animation-easing);
}

.js .menu-drawer details[open] > .details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .menu-drawer__submenu,
  .js details[data-drawer-submenu][open] > .menu-drawer__submenu,
  .js .menu-drawer .details-content {
    transition: none;
  }
}