/* FX78 (TheDekel 19/10, card #78 follow-up + W): filter bar polish. Additive; remove the include to roll back. */
/* the original single Style select stays in the DOM for old code, hidden; the multi-select (.fx78st) takes its place */
#step2 .fbar>label.fx78hid{display:none!important}
/* desktop bar: the Style widget gets the Style (filter-lines) icon, not the Colour palette */
@container dks2 (max-width:700px){
  #step2>.fbar>.p68ms.fx78st::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E")!important;width:16px!important;height:16px!important;background-size:16px!important}
}
.fbar .p68ms.fx78st .p68pop{min-width:180px}
.fbar .p68ms .p68o input:focus-visible{outline:2px solid #0f6f78;outline-offset:2px}
.fbar .p68ms .p68btn:focus-visible{outline:2px solid #0f6f78;outline-offset:2px}
/* active filter = the SAME subtle mark on every filter control: teal border + teal text, same shape/size (no bold jump) */
.fbar .p68ms .p68btn.on{border-color:#0f6f78;color:#0f6f78;font-weight:inherit}

/* #78: no count badges on the quick-filter chips (the grey numbers) */
#xfBar .xf-c>i{display:none!important}
/* #78: one "Clear all" only - the chips row above the grid (fchips) carries it; the old one inside the quick-chips bar is hidden on desktop */
@media (min-width:761px){ #xfBar .xf-clr{display:none!important} }
/* #78: "Clear all" looks like a chip with a × (same height/radius as the filter chips) */
#fchRow .fch-all{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:12px 6px;background:#fff;border:1px solid #e3e9eb;border-radius:999px;box-shadow:0 1px 4px rgba(20,60,70,.10);font:inherit;font-size:13.5px;color:#0f6f78;text-decoration:none;cursor:pointer;line-height:1}
#fchRow .fch-all::after{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#eef3f4 no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%230f6f78' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
#fchRow .fch-all:hover::after{background-color:#dde6e8}
@media (max-width:760px){ #fchRow .fch-all{height:30px;font-size:13px} }

/* W (TheDekel's iPhone): in the phone Filters sheet every filter control is the SAME box - Style, Colour, Sort By, with or without a value.
   Plain CSS (wins over the inline sizes site-ui.js P69CF copies, which did not always run on iOS), so it cannot drift. */
@media (max-width:760px){
  #step2 .fbar.p68-open>label>select:not(.p71msel),
  #step2 .fbar.p68-open>.p68ms .p68btn{
    -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;
    width:100%!important;max-width:none!important;min-width:0!important;height:42px!important;min-height:42px!important;margin:0!important;
    padding:0 14px 0 34px!important;border:1px solid #d7dfe2!important;border-radius:999px!important;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1 5l4-4 4 4M1 9l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat left 14px center!important;
    color:#222!important;font:inherit!important;font-size:16px!important;font-weight:400!important;line-height:40px!important;
    text-align:start!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-shadow:none!important}
  html[dir=ltr] #step2 .fbar.p68-open>label>select:not(.p71msel),
  html[dir=ltr] #step2 .fbar.p68-open>.p68ms .p68btn{padding:0 34px 0 14px!important;background-position:right 14px center!important}
  #step2 .fbar.p68-open>.p68ms .p68btn::after{display:none!important}
  /* the boxes share one width: 60% of the row, the label takes the rest */
  #step2 .fbar.p68-open>label>select:not(.p71msel),
  #step2 .fbar.p68-open>.p68ms>.p68dd{flex:0 0 60%!important;width:60%!important;max-width:60%!important;position:relative!important;display:block!important}
  #step2 .fbar.p68-open>.p68ms{flex-wrap:nowrap!important}
  #step2 .fbar.p68-open>.p68ms>.p68lbl{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important}
  /* active = same subtle mark as on desktop, same shape */
  #step2 .fbar.p68-open>.p68ms .p68btn.on{border-color:#0f6f78!important;color:#0f6f78!important}
  #step2 .fbar.p68-open>label>select:focus-visible,#step2 .fbar.p68-open>.p68ms select.p71msel:focus-visible+*,#step2 .fbar.p68-open>.p68ms .p68btn:focus-visible{outline:2px solid #0f6f78!important;outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){ #fchRow .fch-all{transition:none} }