/* DILFISH v19 — catalog filters, pagination, variants clipping, viewed products */

.catalog-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.catalog-head p{
  color:var(--muted,#6b7567);
  font-weight:700;
  margin:0;
}

.catalog-layout{
  align-items:start;
}

.catalog-sidebar{
  position:sticky;
  top:10px;
  max-height:calc(100vh - 20px);
  overflow:auto;
  scrollbar-width:thin;
}

.catalog-filter{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

.filter-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.char-filters{
  display:grid;
  gap:8px;
  margin:6px 0;
}

.char-filters>b{
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted,#6b7567);
}

.char-filter{
  border:1px solid var(--line,#e4eadf);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.char-filter summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:800;
  list-style:none;
}

.char-filter summary::-webkit-details-marker{
  display:none;
}

.char-filter summary:after{
  content:'⌄';
  float:right;
  color:var(--muted,#6b7567);
}

.char-filter[open] summary:after{
  content:'⌃';
}

.char-filter-values{
  display:grid;
  max-height:220px;
  overflow:auto;
  padding:0 10px 10px;
  gap:6px;
}

.char-filter-values label{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  font-size:14px;
  cursor:pointer;
}

.char-filter-values span{
  overflow:hidden;
  text-overflow:ellipsis;
}

.char-filter-values em{
  font-style:normal;
  color:var(--muted,#6b7567);
  font-size:12px;
}

.side-cats a.active{
  color:var(--accent,#1f7a3a);
  font-weight:900;
}

.pagination-v19{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:28px 0!important;
  flex-wrap:wrap!important;
  clear:both!important;
}

.pagination-v19 a,
.pagination-v19 span{
  min-width:42px;
  height:42px;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--line,#e4eadf)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--text,#172014)!important;
  font-weight:800!important;
  box-shadow:none!important;
}

.pagination-v19 .current{
  background:var(--accent,#1f7a3a)!important;
  color:#fff!important;
  border-color:var(--accent,#1f7a3a)!important;
}

.pagination-v19 .pagination-arrow{
  min-width:98px;
}

.variants-box{
  clear:both!important;
  overflow:visible!important;
  padding:18px 0 8px!important;
  margin:20px 0 0!important;
  max-width:100%!important;
}

.variants-head{
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-bottom:10px!important;
  min-width:0!important;
}

.variants-head h2{
  margin:0!important;
  padding:0!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

.variants-head span{
  color:var(--muted,#6b7567)!important;
  font-size:15px!important;
  overflow:visible!important;
}

.variant-strip{
  padding-left:2px!important;
  margin-left:0!important;
}

.viewed-section{
  margin-top:34px!important;
}

@media(max-width:900px){
  .catalog-head{display:block}
  .catalog-sidebar{position:static;max-height:none}
  .catalog-layout{grid-template-columns:1fr!important}
}

@media(max-width:560px){
  .pagination-v19 a,
  .pagination-v19 span{
    min-width:38px;
    height:38px;
    border-radius:12px!important;
  }
  .pagination-v19 .pagination-arrow{
    min-width:auto;
  }
}