/* Shared public catalog controls. Keep behavior-specific data hooks in templates. */
.ff-filters{
  --filter-height:42px;
  --filter-border:#bbb2a5;
  --filter-ink:#27241f;
  position:relative;
  top:auto;
  z-index:20;
  padding:16px 0 12px;
  border-top:1px solid var(--line,#ded8cd);
  border-bottom:1px solid var(--line,#ded8cd);
  background:#f5f2ec;
  color:var(--filter-ink);
  backdrop-filter:none;
}
.ff-filters>.wrap{padding:0}
.ff-filters .spell-filter-form{display:block;margin:0}
.ff-filters .ff-filter-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:0;
  margin:0;
}
.ff-filters .ff-filter-grid>.ff-filter-field{
  flex:1 1 135px;
  min-width:0;
  max-width:none;
  margin:0;
  grid-column:auto;
}
.ff-filters .ff-filter-grid>.ff-filter-search{flex:2 1 260px}
.ff-filters .ff-filter-field input[type="search"],
.ff-filters .ff-filter-field select,
.ff-filters .catalog-multi-filter>summary,
.ff-filters .ff-filter-extra>summary,
.ff-filters .articles-tag{
  box-sizing:border-box;
  height:var(--filter-height);
  min-height:var(--filter-height);
  padding:0 12px;
  border:1px solid var(--filter-border);
  border-radius:0;
  background:#fff;
  color:var(--filter-ink);
  font:400 13px/1.3 Arial,sans-serif;
  letter-spacing:normal;
  text-transform:none;
  box-shadow:none;
}
.ff-filters .ff-filter-field input[type="search"],
.ff-filters .ff-filter-field select{display:block;width:100%;max-width:100%;margin:0}
.ff-filters .ff-filter-field select{
  appearance:none;
  padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,#756d61 50%),linear-gradient(135deg,#756d61 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 12px) 18px;
  background-size:4px 4px;
  background-repeat:no-repeat;
}
.ff-filters .ff-filter-field input::placeholder{color:#736b60;opacity:1}
.ff-filters :is(input,select,button,a,summary):focus-visible{outline:2px solid #8e6a41;outline-offset:3px}
.ff-filters .ff-filter-field select:disabled{color:#92897d;background-color:#ece8e1;cursor:not-allowed}
.ff-filters .ff-filter-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0;min-height:24px}
.ff-filters .ff-filter-count{display:block;margin:0;text-transform:none;letter-spacing:normal;white-space:normal;color:#635c52;font:400 12px/1.4 Arial,sans-serif}
.ff-filters .ff-filter-reset{display:inline-block;flex-shrink:0;padding:4px 0;border:0;background:transparent;color:#635c52;cursor:pointer;font:700 11px/1.4 Arial,sans-serif;letter-spacing:normal;text-transform:none;text-decoration:underline;text-underline-offset:3px}
.ff-filters .ff-filter-reset:hover{color:#17191e}
.ff-filters .ff-filter-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.ff-filters .ff-filter-apply{min-height:var(--filter-height);padding:0 16px;display:inline-flex;align-items:center;border-radius:0;font:700 12px/1.3 Arial,sans-serif;text-transform:none}
/* Extra spell parameters use the same fields as the main row. */
.ff-filters .ff-filter-extra{grid-row:auto;grid-column:auto;margin:10px 0 0;border:0;padding:0}
.ff-filters .ff-filter-extra>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:fit-content;max-width:100%;cursor:pointer;list-style:none}
.ff-filters .ff-filter-extra>summary::after{content:"";width:7px;height:7px;flex:0 0 7px;border-right:1.5px solid #756d61;border-bottom:1.5px solid #756d61;transform:rotate(45deg) translateY(-2px)}
.ff-filters .ff-filter-extra[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.ff-filters .ff-filter-extra>.ff-filter-grid{padding-top:10px}
/* Item filters allow several values; their trigger matches native selects. */
.ff-filters .catalog-multi-filter{position:relative;height:var(--filter-height);margin:0;border:0;background:transparent}
.ff-filters .catalog-multi-filter>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;user-select:none}
.ff-filters summary::-webkit-details-marker{display:none}
.ff-filters .catalog-multi-filter summary i{width:7px;height:7px;flex:0 0 7px;border-right:1.5px solid #756d61;border-bottom:1.5px solid #756d61;transform:rotate(45deg) translateY(-2px)}
.ff-filters .catalog-multi-filter[open] summary i{transform:rotate(225deg) translate(-1px,-1px)}
.ff-filters .catalog-multi-filter.has-selection>summary{border-color:#17191e;box-shadow:inset 0 -2px 0 #17191e}
.ff-filters .catalog-multi-filter.is-disabled>summary{color:#92897d;background:#ece8e1;cursor:not-allowed}
.ff-filters .catalog-multi-options{position:absolute;z-index:80;top:calc(100% + 5px);left:0;min-width:220px;max-width:min(340px,calc(100vw - 32px));max-height:min(330px,60vh);overflow:auto;padding:6px;background:#fff;border:1px solid var(--filter-border);box-shadow:0 12px 26px #211b1420}
.ff-filters .catalog-multi-options label{display:flex;align-items:flex-start;gap:9px;min-height:36px;padding:8px;color:var(--filter-ink);font:400 13px/1.4 Arial,sans-serif;cursor:pointer;white-space:normal}
.ff-filters .catalog-multi-options label:hover{background:#f3efe8}
.ff-filters .catalog-multi-options input{width:16px;height:16px;flex:0 0 16px;margin:1px 0 0;accent-color:#17191e}
.ff-filters .catalog-multi-options label.is-disabled{color:#aaa39a;background:#f7f5f1;cursor:not-allowed}
.ff-filters .catalog-multi-options label.is-disabled input{opacity:.4}
/* Article topics are toggles, using the same control surface and active state. */
.ff-filters.ff-filters--embedded{padding:14px;margin-bottom:24px}
.ff-filters .articles-filter-head{margin-bottom:12px;max-width:none}
.ff-filters .articles-filter-head p{font-size:13px}
.ff-filters .articles-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ff-filters .articles-tag{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.ff-filters .articles-tag:hover{border-color:#756d61}
.ff-filters .articles-tag.is-active{background:#17191e;border-color:#17191e;color:#fff}
.ff-filters .articles-tag span{height:22px;min-width:22px;border-radius:0;font-size:11px}
.catalog-load-more-wrap{display:flex;justify-content:center;margin-top:28px}
.catalog-load-more-wrap[hidden]{display:none}
.catalog-load-more-wrap .button{min-width:170px}
@media(max-width:700px){
  .ff-filters{--filter-height:44px;padding:12px 0}
  .ff-filters .ff-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ff-filters .ff-filter-grid>.ff-filter-search{grid-column:1/-1}
  .ff-filters .ff-filter-grid>.ff-filter-field:last-child:nth-child(2){grid-column:1/-1}
  .ff-filters .ff-filter-field input[type="search"],.ff-filters .ff-filter-field select,.ff-filters .catalog-multi-filter>summary,.ff-filters .ff-filter-extra>summary,.ff-filters .articles-tag{font-size:16px}
  .ff-filters .ff-filter-field select{background-position:calc(100% - 16px) 19px,calc(100% - 12px) 19px}
  .ff-filters .ff-filter-meta{gap:10px;flex-wrap:wrap}
  .ff-filters .ff-filter-actions{justify-content:flex-start}
  .ff-filters .ff-filter-extra>summary{width:100%}
  .ff-filters .ff-filter-extra>.ff-filter-grid{grid-template-columns:minmax(0,1fr)}
  .ff-filters.ff-filters--embedded{padding:12px}
}
@media(max-width:420px){
  .ff-filters .ff-filter-grid{grid-template-columns:minmax(0,1fr)}
  .ff-filters .ff-filter-grid>.ff-filter-field{grid-column:auto}
  .ff-filters .articles-tag{padding:0 10px}
  .catalog-load-more-wrap .button{width:100%}
}
