/* Compact search actions and an explicit collection disclosure. */
form.catalog-search .search-modes {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px; margin:12px 0 18px;
}
form.catalog-search .search-by-filters {
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  width:100%; min-height:44px; margin:0; padding:10px 12px;
  border:1px solid #dedfe3; border-radius:6px; background:#f7f7f8;
  color:#505460; font-family:inherit; font-size:14px; line-height:20px;
  white-space:normal; text-align:center; text-decoration:none; cursor:pointer;
}
form.catalog-search .search-by-filters:hover { background:#eeeff3; border-color:#c4c7d1; color:#293f99; }
form.catalog-search .search-by-filters:focus-visible { outline:2px solid #293f99; outline-offset:2px; }
.catalog-search-panel .genres_link,
.catalog-search-panel .genres_link.open {
  box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%; max-width:680px; min-height:48px;
  margin:24px auto 0; padding:12px 16px; border:1px solid #dedfe3;
  border-radius:6px; background:#fff; text-align:left; color:#505460;
}
.catalog-search-panel .genres_link > span {
  display:block; border:0; margin:0; padding:0;
  font-size:16px; line-height:22px; color:inherit;
}
.catalog-search-panel .genres_link::after {
  content:""; display:block; width:8px; height:8px; flex:0 0 8px;
  border-right:2px solid #858997; border-bottom:2px solid #858997;
  transform:rotate(45deg); margin:-4px 2px 0 0;
}
.catalog-search-panel .genres_link.open { border-color:#aeb6cf; background:#f7f8fc; }
.catalog-search-panel .genres_link.open::after { transform:rotate(225deg); margin-top:4px; }
.catalog-search-panel .genres_link:hover { border-color:#aeb6cf; }
@media(max-width:600px) {
  form.catalog-search .search-modes { gap:8px; margin:10px 0 14px; }
  form.catalog-search .search-by-filters { padding:10px 6px; font-size:13px; }
  .catalog-search-panel .genres_link { padding:12px; }
  .catalog-search-panel .genres_link > span { font-size:16px; line-height:22px; }
}
@media(max-width:350px) {
  form.catalog-search .search-by-filters { font-size:12px; }
}

/* The search input used inline layout, while the availability tabs had fixed
   300px inline widths. Give all three rows the same centered 680px boundary. */
form.catalog-search {
  text-align:left;
}
form.catalog-search > input[name="search"] {
  display:inline-block;
  box-sizing:border-box;
  width:100%;
  margin-left:0;
  margin-right:0;
}
.catalog-search-panel .tabs-wrapper {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  box-sizing:border-box;
  width:100%;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.catalog-search-panel .tabs-wrapper > div {
  width:auto;
  min-width:0;
}
.catalog-search-panel .tabs-wrapper > div > span {
  box-sizing:border-box;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100% !important;
  height:100% !important;
  min-height:44px;
  padding:10px 8px !important;
}