/* Shared compact filter control for mobile module views. */
details.app-filter-menu{position:relative;min-width:0}
details.app-filter-menu>summary.app-filter-trigger{list-style:none;cursor:pointer}
details.app-filter-menu>summary.app-filter-trigger::-webkit-details-marker{display:none}
.app-filter-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-filter-popover{box-sizing:border-box;min-width:0}

@media(max-width:700px){
  details.app-filter-menu{overflow:visible!important}
  details.app-filter-menu>summary.app-filter-trigger{
    position:relative!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--line)!important;
    border-radius:10px!important;
    background:var(--theme-surface)!important;
    color:var(--ink)!important;
    box-sizing:border-box!important;
  }
  details.app-filter-menu[open]>summary.app-filter-trigger{
    border-color:var(--ink)!important;
    background:var(--theme-surface-soft)!important;
  }
  details.app-filter-menu>summary.app-filter-trigger .app-filter-icon{
    width:18px!important;
    height:18px!important;
  }
  details.app-filter-menu>summary.app-filter-trigger .app-filter-text,
  details.app-filter-menu>summary.app-filter-trigger .app-filter-chevron,
  details.app-filter-menu>summary.app-filter-trigger .app-filter-count-word{
    display:none!important;
  }
  details.app-filter-menu>summary.app-filter-trigger .app-filter-count{
    position:absolute!important;
    top:-5px!important;
    right:-5px!important;
    width:17px!important;
    min-width:17px!important;
    height:17px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    border:2px solid var(--paper)!important;
    border-radius:50%!important;
    background:var(--green)!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:800!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }
  details.app-filter-menu>.app-filter-popover{
    position:absolute!important;
    z-index:70!important;
    top:calc(100% + 6px)!important;
    right:0!important;
    left:auto!important;
    width:min(340px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    min-width:0!important;
    margin:0!important;
    padding:12px!important;
    overflow:hidden!important;
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    background:var(--theme-surface)!important;
    box-shadow:0 12px 30px #173b341f!important;
    box-sizing:border-box!important;
  }
  details.app-filter-menu>.app-filter-popover>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  details.app-filter-menu>.app-filter-popover input,
  details.app-filter-menu>.app-filter-popover select,
  details.app-filter-menu>.app-filter-popover textarea{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:16px!important;
  }

  /* Event Scout previously positioned its popover against the page instead of the trigger. */
  .scout-control-panel>details.scout-filters.app-filter-menu{
    position:relative!important;
    grid-column:4!important;
    margin:0!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
  }
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover{
    right:0!important;
    left:auto!important;
    width:min(340px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover>div{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
  }
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover label{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover input,
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover select{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    font-size:16px!important;
  }
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover>button{
    width:100%!important;
    margin:0!important;
  }
  .scout-control-panel>details.scout-filters.app-filter-menu>.filters.app-filter-popover>a{
    display:block!important;
    width:100%!important;
    margin:0!important;
    text-align:center!important;
  }

  /* Shopping history uses the same trigger while staying in the page header flow. */
  .shopping-history-head>details.shopping-history-filter-panel.app-filter-menu{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    flex:0 0 40px!important;
    margin-right:6px!important;
  }
}