@media (max-width: 1100px) {
  .compact-nav-toggle {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    width: 48px !important;
    min-width: 48px !important;
    justify-items: start !important;
  }

  .compact-nav-toggle-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    width: 25px !important;
    height: 18px !important;
    margin-left: 5px !important;
    display: block !important;
  }

  /* Famous Footwear mobile hamburger: slightly heavier strokes and tighter vertical rhythm. */
  .compact-nav-toggle-icon i {
    position: absolute !important;
    left: 0 !important;
    display: block !important;
    height: 1.6px !important;
    min-height: 1.6px !important;
    border-radius: 0 !important;
    background: #171717 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .compact-nav-toggle-icon i:nth-child(1) {
    top: 0 !important;
    width: 25px !important;
  }

  .compact-nav-toggle-icon i:nth-child(2) {
    top: 8px !important;
    left: 1px !important;
    width: 18px !important;
  }

  .compact-nav-toggle-icon i:nth-child(3) {
    top: 16px !important;
    width: 7px !important;
  }

  /* Famous-style drawer: narrower, flatter, and led by the current store. */
  .compact-nav-menu {
    width: min(340px, 78vw) !important;
    max-width: 340px !important;
    padding: 0 14px 28px !important;
  }

  .compact-nav-menu-head {
    min-height: 86px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #dddddd !important;
  }

  .compact-nav-menu-title {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .compact-nav-menu-title small {
    display: none !important;
  }

  .compact-nav-menu-title strong {
    margin: 0 !important;
    color: #171717 !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
  }

  .compact-nav-menu-body {
    padding-top: 20px !important;
  }

  .compact-nav-section + .compact-nav-section {
    margin-top: 16px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .compact-nav-section-title {
    margin: 0 2px 9px !important;
    color: #666666 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
  }

  .compact-nav-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .compact-nav-item {
    min-height: 88px !important;
    padding: 0 22px 0 17px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f2f2f2 !important;
    color: #171717 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
  }

  .compact-nav-item:hover,
  .compact-nav-item:focus-visible {
    background: #e9e9e9 !important;
    border: 0 !important;
  }

  .compact-nav-item svg {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    stroke: #171717 !important;
  }

  .compact-nav-item .workbench-icon,
  .compact-nav-item .workbench-icon rect,
  .compact-nav-item .power-bi-icon rect,
  .compact-nav-item svg rect[rx="1"] {
    fill: #171717 !important;
    stroke: none !important;
  }

  .compact-nav-item-dot {
    background: #171717 !important;
  }

  .compact-nav-item > span:nth-last-child(2) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Clean Famous-style right-facing chevron on every menu row. */
  .compact-nav-item-chevron {
    display: block !important;
    flex: 0 0 9px !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    margin-left: auto !important;
    border: 0 !important;
    border-right: 1.6px solid #171717 !important;
    border-bottom: 1.6px solid #171717 !important;
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

@media (max-width: 580px) {
  .compact-nav-menu {
    width: min(315px, 82vw) !important;
  }

  .compact-nav-menu-head {
    min-height: 80px !important;
  }

  .compact-nav-item {
    min-height: 76px !important;
    font-size: 16px !important;
  }
}

/* Famous-style X controls across every worksheet dialog and the mobile drawer. */
.dialog-close,
.compact-nav-close {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

.dialog-close::before,
.dialog-close::after,
.compact-nav-close::before,
.compact-nav-close::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 25px !important;
  height: 1.5px !important;
  background: #171717 !important;
  border-radius: 0 !important;
  transform-origin: center !important;
}

.dialog-close::before,
.compact-nav-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.dialog-close::after,
.compact-nav-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.dialog-close:hover,
.dialog-close:focus-visible,
.compact-nav-close:hover,
.compact-nav-close:focus-visible {
  background: transparent !important;
}

/* Desktop / landscape action icons use the same monochrome treatment as the drawer. */
.output-button svg,
.output-button-svg,
.spark-icon,
.shoe-search-icon,
.compact-header-shoe-search svg {
  stroke: #171717 !important;
}

.output-button .workbench-icon,
.output-button .power-bi-icon {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  display: block !important;
}

.output-button .workbench-icon,
.output-button .workbench-icon rect,
.output-button .power-bi-icon rect {
  fill: #171717 !important;
  stroke: none !important;
}

/* Keep the desktop Spark glyph identical to the one cloned into compact navigation. */
@media (min-width: 1101px) {
  .spark-button .spark-icon {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    display: block !important;
    fill: none !important;
    stroke: #171717 !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .spark-button .spark-icon circle,
  .spark-button .spark-icon path {
    fill: none !important;
    stroke: #171717 !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

/* Keep Today's Promotions beside Customer Connection on tablet/compact landscape,
   matching the worksheet's original two-column Culture layout. */
@media (min-width: 581px) {
  .culture-section > .customer-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, .86fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .culture-section .customer-copy,
  .culture-section .promotions-box {
    min-width: 0 !important;
  }
}