/* Centered top controls bar (Filter toggle + Sorting) only on small screens (<=735px) */

/* Default: hide on larger screens */
.top-controls { display: none; }

@media (max-width: 735px){
  /* Host container: sits above products list in content column */
  .top-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* as requested */
    margin: 8px 0 12px 0;
  }

  /* Ensure buttons look consistent when moved */
  .top-controls .filter-toggle-btn,
  .top-controls .sorting-trigger,
  .top-controls .sorting-select { margin: 0; }

  /* Force filter toggle to be visible in the bar on small screens */
  .top-controls .filter-toggle-btn{ display: inline-flex !important; }

  /* Keep the rest of layout untouched; hide original placeholders if we reparent controls */
  .top-controls--hidden { display: none !important; }

  /* On very small screens keep it centered and allow wrapping */
  @media (max-width: 420px){
    .top-controls{ gap: 10px; }
  }

  /* When the centered bar exists, hide the old toolbar and cancel absolute hacks from sorting.css on small screens */
  .top-controls ~ .sorting-toolbar{ display: none; }

  .new-products-page .page-layout::before{ content: none !important; }
  .new-products-page .filters-column,
  .new-products-page .content-column .sorting-toolbar{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0;
  }
}