/* ==========================================================================
   STR AJAX Product Filter — storefront panel
   ========================================================================== */

.htrf-wrap{width:100%;box-sizing:border-box;font-family:var(--htrf-font)}
.htrf-wrap *,.htrf-wrap *::before,.htrf-wrap *::after{box-sizing:border-box}
.htrf-wrap svg{flex:0 0 auto}

.htrf-panelbox{
  width:var(--htrf-width);max-width:100%;
  background:var(--htrf-bg);
  border:1px solid var(--htrf-border);
  border-radius:var(--htrf-radius);
  color:var(--htrf-text);
  font-family:var(--htrf-font);
  overflow:hidden;
}
/* Guarded the same way as the sheet itself: a theme's own "fade in on
   scroll" style, or any other generic rule that happens to touch opacity,
   visibility or position on a block-level div, must never be able to leave
   the actual content invisible once it is on screen. Scoped with two
   classes (rather than one) so this reliably outranks the single
   class-or-attribute-plus-tag selectors that kind of rule usually uses. */
.htrf-wrap .htrf-panelbox{opacity:1!important;visibility:visible!important}
.htrf-wrap:not(.is-sticky) .htrf-panelbox{position:static!important}
.htrf-wrap{opacity:1!important;visibility:visible!important}
.htrf-open{opacity:1!important}
.htrf-wrap.is-sticky .htrf-panelbox{position:sticky!important;top:20px}

/* ---------- quick filter presets ---------- */
.htrf-presets{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px;border-bottom:1px solid var(--htrf-border)}
.htrf-panelbox button.htrf-preset{
  appearance:none!important;display:inline-flex!important;align-items:center!important;
  padding:7px 13px!important;margin:0!important;border-radius:99px!important;cursor:pointer!important;
  border:1px solid var(--htrf-primary)!important;background-color:var(--htrf-bg)!important;color:var(--htrf-primary)!important;
  font-family:var(--htrf-font)!important;font-size:12.5px!important;font-weight:var(--htrf-weight)!important;
  box-shadow:none!important;text-shadow:none!important;text-transform:none!important;line-height:1.3!important;
}
.htrf-panelbox button.htrf-preset:hover,
.htrf-panelbox button.htrf-preset.is-on{background-color:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important}

/* ---------- applied filter chips ---------- */
.htrf-chips{padding:14px 16px;border-bottom:1px solid var(--htrf-border)}
.htrf-chips[hidden]{display:none}
.htrf-chips-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.htrf-chips-head span{color:var(--htrf-heading);font-size:var(--htrf-h-size);font-weight:var(--htrf-weight);line-height:1.3}
.htrf-chips-clear{
  appearance:none!important;border:0!important;background:none!important;padding:0!important;margin:0!important;
  color:var(--htrf-primary)!important;font-family:var(--htrf-font)!important;font-size:12px!important;
  text-decoration:underline!important;cursor:pointer!important;box-shadow:none!important;
}
.htrf-chips-list{display:flex;flex-wrap:wrap;gap:6px}
.htrf-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px 5px 10px;border-radius:99px;
  background:var(--htrf-chip);color:var(--htrf-heading);
  font-size:12px;line-height:1.3;max-width:100%;
}
.htrf-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htrf-chip-x{
  appearance:none!important;display:grid!important;place-items:center!important;
  width:16px!important;height:16px!important;min-width:16px!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:50%!important;background:var(--htrf-primary)!important;
  color:var(--htrf-on-primary)!important;cursor:pointer!important;box-shadow:none!important;
}
.htrf-chip-x svg{width:10px;height:10px;stroke-width:2.6}

/* ---------- result count ---------- */
.htrf-count{padding:11px 16px;border-bottom:1px solid var(--htrf-border);color:var(--htrf-count);font-size:12.5px}
.htrf-count[hidden]{display:none}

/* ---------- sections ---------- */
.htrf-sec{border-bottom:1px solid var(--htrf-border);margin-bottom:var(--htrf-gap)}
.htrf-sec:last-of-type{border-bottom:0;margin-bottom:0}
.htrf-sec-head{
  appearance:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;width:100%!important;padding:15px 16px!important;margin:0!important;
  border:0!important;background:none!important;box-shadow:none!important;cursor:pointer!important;text-align:left!important;
  color:var(--htrf-heading)!important;font-family:var(--htrf-font)!important;
  font-size:var(--htrf-h-size)!important;font-weight:var(--htrf-weight)!important;line-height:1.35!important;
}
.htrf-sec-chevron{width:16px;height:16px;color:var(--htrf-primary);transition:transform .18s ease}
.htrf-sec.is-closed .htrf-sec-chevron{transform:rotate(-90deg)}
.htrf-sec-body{padding:0 16px 16px}
.htrf-sec.is-closed .htrf-sec-body{display:none}

/* ---------- search box ---------- */
.htrf-search{display:flex;width:100%;height:38px}
.htrf-search input{
  flex:1!important;min-width:0!important;width:auto!important;height:38px!important;margin:0!important;
  border:1px solid var(--htrf-border)!important;border-right:0!important;
  border-radius:var(--htrf-ctl-radius) 0 0 var(--htrf-ctl-radius)!important;
  background:var(--htrf-input)!important;padding:0 12px!important;
  color:var(--htrf-text)!important;font-family:var(--htrf-font)!important;font-size:var(--htrf-t-size)!important;
  outline:none!important;box-shadow:none!important;
}
.htrf-search input:focus{border-color:var(--htrf-primary)!important}
.htrf-search-go{
  appearance:none!important;display:grid!important;place-items:center!important;
  width:42px!important;height:38px!important;min-width:42px!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:0 var(--htrf-ctl-radius) var(--htrf-ctl-radius) 0!important;
  background:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important;cursor:pointer!important;box-shadow:none!important;
}
.htrf-search-go svg{width:17px;height:17px}

/* ---------- select ---------- */
.htrf-selectwrap{position:relative;display:block}
.htrf-selectwrap select{
  appearance:none!important;-webkit-appearance:none!important;
  width:100%!important;height:38px!important;margin:0!important;padding:0 36px 0 12px!important;
  border:1px solid var(--htrf-border)!important;border-radius:var(--htrf-ctl-radius)!important;
  background:var(--htrf-input)!important;color:var(--htrf-text)!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-t-size)!important;cursor:pointer!important;box-shadow:none!important;
}
.htrf-selectwrap svg{position:absolute;right:12px;top:50%;margin-top:-8px;width:16px;height:16px;color:var(--htrf-count);pointer-events:none}

/* ---------- list search ---------- */
.htrf-termsearch{position:relative;margin-bottom:9px}
.htrf-termsearch svg{position:absolute;left:10px;top:50%;margin-top:-7px;width:14px;height:14px;color:var(--htrf-count);pointer-events:none}
.htrf-termsearch-input{
  width:100%!important;height:34px!important;margin:0!important;padding:0 10px 0 31px!important;
  border:1px solid var(--htrf-border)!important;border-radius:var(--htrf-ctl-radius)!important;
  background:var(--htrf-input)!important;color:var(--htrf-text)!important;
  font-family:var(--htrf-font)!important;font-size:12.5px!important;box-shadow:none!important;outline:none!important;
}

/* ---------- options ---------- */
.htrf-list{display:flex;flex-direction:column;gap:2px}
.htrf-opt{
  display:flex;align-items:center;gap:9px;
  min-height:30px;width:100%;padding:2px 0;margin:0;
  color:var(--htrf-text);font-size:var(--htrf-t-size);line-height:1.45;cursor:pointer;
}
.htrf-opt.is-over,.htrf-opt.is-filtered{display:none}
.htrf-list.is-expanded .htrf-opt.is-over{display:flex}
.htrf-list.is-expanded .htrf-opt.is-filtered{display:none}
.htrf-opt input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important}
.htrf-box{
  display:grid;place-items:center;
  width:17px;height:17px;flex:0 0 17px;
  border:1.5px solid var(--htrf-border);border-radius:5px;
  background:var(--htrf-bg);transition:background .12s ease,border-color .12s ease;
}
.htrf-box-tick{width:11px;height:11px;color:var(--htrf-on-primary);opacity:0;stroke-width:3}
.htrf-opt input:checked ~ .htrf-box{background:var(--htrf-primary);border-color:var(--htrf-primary)}
.htrf-opt input:checked ~ .htrf-box .htrf-box-tick{opacity:1}
.htrf-opt input:focus-visible ~ .htrf-box{outline:2px solid var(--htrf-primary);outline-offset:2px}
.htrf-opt-text{min-width:0;flex:1}
.htrf-opt em{margin-left:auto;font-style:normal;font-size:12px;color:var(--htrf-count);white-space:nowrap}

/* radio dot for ratings */
.htrf-dotbox{
  display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;
  border:1.5px solid var(--htrf-border);border-radius:50%;background:var(--htrf-bg);
}
.htrf-opt input:checked ~ .htrf-dotbox{border-color:var(--htrf-primary);box-shadow:inset 0 0 0 3.5px var(--htrf-bg);background:var(--htrf-primary)}
.htrf-opt input:focus-visible ~ .htrf-dotbox{outline:2px solid var(--htrf-primary);outline-offset:2px}

/* stars */
.htrf-stars{display:inline-flex;gap:1px;color:#e2b33c}
.htrf-star{width:15px;height:15px}
.htrf-star:not(.is-on){color:var(--htrf-border)}

/* show more */
.htrf-more{
  appearance:none!important;display:inline-flex!important;align-items:center!important;gap:5px!important;
  margin:8px 0 0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;
  color:var(--htrf-primary)!important;font-family:var(--htrf-font)!important;font-size:12.5px!important;cursor:pointer!important;
}
.htrf-more-chevron{width:14px;height:14px;transition:transform .18s ease}
.htrf-more.is-open .htrf-more-chevron{transform:rotate(180deg)}

/* ---------- price ---------- */
.htrf-slider{position:relative;height:30px;margin:6px 0 14px}
.htrf-slider-track{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:4px;background:var(--htrf-border)}
.htrf-slider-fill{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--htrf-primary)}
.htrf-range{
  position:absolute!important;left:0!important;top:9px!important;
  width:100%!important;height:12px!important;margin:0!important;padding:0!important;
  appearance:none!important;-webkit-appearance:none!important;
  background:none!important;border:0!important;box-shadow:none!important;outline:none!important;
  pointer-events:none!important;
}
.htrf-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:50%;cursor:grab;
  background:var(--htrf-bg);border:3px solid var(--htrf-primary);box-shadow:0 1px 3px rgba(15,23,42,.2);
}
.htrf-range::-moz-range-thumb{
  pointer-events:auto;width:16px;height:16px;border-radius:50%;cursor:grab;
  background:var(--htrf-bg);border:3px solid var(--htrf-primary);box-shadow:0 1px 3px rgba(15,23,42,.2);
}
.htrf-range::-moz-range-track{background:none;border:0}
.htrf-pricegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.htrf-pricegrid label{display:block;font-size:12px;color:var(--htrf-heading)}
.htrf-pricegrid input{
  width:100%!important;height:38px!important;margin-top:5px!important;padding:0 10px!important;
  border:1px solid var(--htrf-border)!important;border-radius:var(--htrf-ctl-radius)!important;
  background:var(--htrf-input)!important;color:var(--htrf-text)!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-t-size)!important;box-shadow:none!important;
}
.htrf-pricegrid input:focus{border-color:var(--htrf-primary)!important;outline:none!important}

/* ---------- actions ---------- */
.htrf-actions{display:flex;flex-direction:column;gap:9px;padding:16px;border-top:1px solid var(--htrf-border)}
.htrf-actions:empty{display:none}
.htrf-apply,.htrf-reset{
  appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;width:100%!important;height:40px!important;padding:0 14px!important;margin:0!important;
  border-radius:var(--htrf-ctl-radius)!important;cursor:pointer!important;box-shadow:none!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-b-size)!important;font-weight:var(--htrf-weight)!important;
}
.htrf-apply{border:1px solid var(--htrf-primary)!important;background:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important}
.htrf-reset{border:1px solid var(--htrf-border)!important;background:transparent!important;color:var(--htrf-heading)!important}
.htrf-reset:hover{border-color:var(--htrf-primary)!important;color:var(--htrf-primary)!important}
.htrf-reset svg{width:15px;height:15px}

/* ---------- loading & empty ---------- */
.htrf-wrap.is-busy .htrf-panelbox{opacity:.6!important;pointer-events:none;transition:opacity .15s ease}
.htrf-no-results{
  grid-column:1/-1;width:100%;padding:30px;text-align:center;
  border:1px dashed var(--htrf-border,#e2e8f0);border-radius:12px;
  font-family:var(--htrf-font,sans-serif);color:var(--htrf-text,#334155);background:var(--htrf-bg,#fff);
}
.htrf-no-results-reset{
  appearance:none!important;display:inline-block!important;margin:12px 0 0!important;padding:0!important;
  border:0!important;background:none!important;box-shadow:none!important;
  color:var(--htrf-primary,#0f766e)!important;font-family:inherit!important;font-size:13px!important;font-weight:600!important;
  text-decoration:underline!important;cursor:pointer!important;
}

/* ==========================================================================
   Layout: horizontal bar
   ========================================================================== */
.htrf-layout-horizontal .htrf-panelbox{width:100%;max-width:100%}
.htrf-layout-horizontal .htrf-sec{
  border-bottom:0;border-right:1px solid var(--htrf-border);
  flex:1 1 200px;min-width:180px;margin:0;
}
.htrf-layout-horizontal .htrf-sec:last-of-type{border-right:0}
.htrf-layout-horizontal .htrf-sec-body{max-height:230px;overflow:auto}
.htrf-layout-horizontal .htrf-actions{flex-direction:row;border-top:1px solid var(--htrf-border)}
.htrf-layout-horizontal .htrf-apply,
.htrf-layout-horizontal .htrf-reset{width:auto!important;min-width:150px!important}
@media(min-width:768px){
  .htrf-layout-horizontal .htrf-panelbox{display:flex;flex-wrap:wrap;align-items:flex-start}
  .htrf-layout-horizontal .htrf-chips,
  .htrf-layout-horizontal .htrf-count,
  .htrf-layout-horizontal .htrf-actions{flex:1 0 100%}
}

/* ==========================================================================
   Drawer / off-canvas
   ========================================================================== */
.htrf-open{
  align-items:center!important;justify-content:center!important;gap:8px!important;
  width:100%!important;min-height:44px!important;margin:0 0 14px!important;padding:10px 16px!important;
  border:1px solid var(--htrf-primary)!important;border-radius:var(--htrf-ctl-radius)!important;
  background:var(--htrf-bg)!important;color:var(--htrf-primary)!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-b-size)!important;font-weight:var(--htrf-weight)!important;
  cursor:pointer!important;box-shadow:none!important;text-decoration:none!important;line-height:normal!important;
}
.htrf-open svg{width:17px!important;height:17px!important;color:inherit!important}
.htrf-sheet-head{display:none}

/* ---- Base state: off-canvas everywhere, until the "docked" rule below
   turns it back into a plain block on wide screens. !important throughout
   this block on purpose: a theme's own reset or utility classes must never
   be able to leave the panel invisible — that is the single most common
   way this filter can end up "showing nothing" on a real site. ---- */
.htrf-wrap > .htrf-backdrop{
  position:fixed!important;inset:0!important;z-index:2147482990!important;
  display:block!important;
  background:rgba(13,25,38,.5)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .24s ease,visibility .24s ease!important;
}
.htrf-wrap > .htrf-backdrop.is-on{opacity:1!important;visibility:visible!important;pointer-events:auto!important}

.htrf-wrap > .htrf-sheet{
  position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
  z-index:2147483000!important;
  width:min(90vw,400px)!important;max-width:400px!important;height:100%!important;
  display:flex!important;flex-direction:column!important;
  background:var(--htrf-bg)!important;box-shadow:-14px 0 40px rgba(13,25,38,.22)!important;
  transform:translate3d(105%,0,0)!important;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)!important;
  visibility:hidden!important;pointer-events:none!important;overflow:hidden!important;
  margin:0!important;padding:0!important;float:none!important;
}
.htrf-wrap > .htrf-sheet.is-on{transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important}

/* Drawer trigger: hidden on wide "sidebar"/"horizontal" screens, always shown for the "drawer" layout. */
.htrf-open{display:none!important}
.htrf-layout-drawer > .htrf-open{display:flex!important}
@media(max-width:767px){ .htrf-wrap > .htrf-open{display:flex!important} }

/* ---- Docked mode: sidebar / horizontal layouts on screens wide enough
   to show the panel as a normal, static block instead of a drawer. This
   is what most shoppers on desktop actually see, so it is reinforced
   with !important and a positive selector rather than a fragile :not(). ---- */
@media(min-width:768px){
  .htrf-wrap.htrf-layout-sidebar > .htrf-sheet,
  .htrf-wrap.htrf-layout-horizontal > .htrf-sheet{
    position:static!important;z-index:auto!important;
    display:block!important;width:auto!important;max-width:none!important;height:auto!important;
    transform:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
    background:transparent!important;box-shadow:none!important;overflow:visible!important;
  }
  .htrf-wrap.htrf-layout-sidebar > .htrf-sheet .htrf-sheet-body,
  .htrf-wrap.htrf-layout-horizontal > .htrf-sheet .htrf-sheet-body{
    display:block!important;overflow:visible!important;
    opacity:1!important;visibility:visible!important;
  }
  .htrf-wrap.htrf-layout-sidebar > .htrf-backdrop,
  .htrf-wrap.htrf-layout-horizontal > .htrf-backdrop{display:none!important}
}

.htrf-floatbar{display:none}

/* ---- Mobile "always open" mode: the shopper picked this instead of the
   popup button, so on narrow screens the panel renders exactly like the
   desktop docked panel above — every section directly in the page, no
   button, no slide-in sheet — regardless of which desktop layout
   (sidebar / horizontal / drawer) is chosen. Scoped to the mobile
   breakpoint only, so the desktop layout choice still behaves normally
   above 767px. ---- */
@media(max-width:767px){
  .htrf-wrap.htrf-mobile-inline > .htrf-open{display:none!important}
  .htrf-wrap.htrf-mobile-inline > .htrf-backdrop{display:none!important}
  .htrf-wrap.htrf-mobile-inline > .htrf-sheet{
    position:static!important;z-index:auto!important;
    display:block!important;width:auto!important;max-width:none!important;height:auto!important;
    transform:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
    background:transparent!important;box-shadow:none!important;overflow:visible!important;
    margin:0!important;padding:0!important;
  }
  .htrf-wrap.htrf-mobile-inline > .htrf-sheet .htrf-sheet-body{
    display:block!important;overflow:visible!important;
    opacity:1!important;visibility:visible!important;
  }
  .htrf-wrap.htrf-mobile-inline .htrf-sheet-head{display:none!important}
  .htrf-wrap.htrf-mobile-inline .htrf-panelbox{width:100%!important;max-width:100%!important}

  .htrf-wrap.htrf-mobile-inline > .htrf-floatbar{
    display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
    position:fixed!important;left:14px!important;right:14px!important;bottom:14px!important;z-index:2147483000!important;
    padding:13px 18px!important;border-radius:99px!important;
    background:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important;
    font-family:var(--htrf-font)!important;font-size:var(--htrf-b-size)!important;font-weight:var(--htrf-weight)!important;
    box-shadow:0 8px 24px rgba(13,25,38,.28)!important;cursor:pointer!important;
    border:0!important;text-align:center!important;
  }
  .htrf-wrap.htrf-mobile-inline > .htrf-floatbar[hidden]{display:none!important}
  .htrf-floatbar-chevron{width:15px;height:15px;transform:rotate(90deg)}
}

@media(max-width:767px){
  .htrf-wrap .htrf-sheet-head{display:flex}
}
.htrf-layout-drawer .htrf-sheet-head{display:flex}
.htrf-sheet-head{
  flex:0 0 auto;align-items:center;justify-content:space-between;gap:10px;
  min-height:56px;padding:12px 16px;
  border-bottom:1px solid var(--htrf-border);
  color:var(--htrf-heading);font-family:var(--htrf-font);
  font-size:var(--htrf-h-size);font-weight:var(--htrf-weight);
}
.htrf-close{
  appearance:none!important;display:grid!important;place-items:center!important;
  width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;margin:0!important;
  border:1px solid var(--htrf-border)!important;border-radius:50%!important;background:transparent!important;
  color:var(--htrf-heading)!important;cursor:pointer!important;box-shadow:none!important;
}
.htrf-close svg{width:16px;height:16px}
.htrf-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.htrf-wrap > .htrf-sheet .htrf-panelbox{width:100%;max-width:none;border:0;border-radius:0}
body.htrf-locked{overflow:hidden}

@media(max-width:767px){
  .htrf-sec{padding:0}
  .htrf-pricegrid{gap:8px}
  .htrf-layout-horizontal .htrf-sec{border-right:0;border-bottom:1px solid var(--htrf-border)}
}

@media(prefers-reduced-motion:reduce){
  .htrf-wrap *{transition:none!important}
}


/* ==========================================================================
   Category tree
   ========================================================================== */
.htrf-branch{position:relative}
.htrf-tree .htrf-opt{padding-right:24px}
.htrf-twist{
  appearance:none!important;position:absolute!important;right:0!important;top:5px!important;
  display:grid!important;place-items:center!important;
  width:20px!important;height:20px!important;min-width:20px!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:5px!important;background:none!important;
  color:var(--htrf-count)!important;cursor:pointer!important;box-shadow:none!important;
}
.htrf-twist-chevron{width:14px;height:14px;transition:transform .16s ease}
.htrf-branch.is-open > .htrf-twist .htrf-twist-chevron{transform:rotate(180deg)}
.htrf-children{display:none;padding-left:20px;border-left:1px solid var(--htrf-border);margin-left:8px}
.htrf-branch.is-open > .htrf-children{display:block}
.htrf-tree.is-searching .htrf-children{display:block}
.htrf-branch.is-over,.htrf-branch.is-filtered{display:none}
.htrf-list.is-expanded > .htrf-branch.is-over{display:block}
.htrf-tree.is-searching > .htrf-branch.is-over{display:block}

/* ==========================================================================
   Drawer badge + grid loading state
   ========================================================================== */
.htrf-open-badge{
  display:inline-grid!important;place-items:center!important;
  min-width:20px!important;height:20px!important;padding:0 var(--htrf-badge-pad,6px)!important;margin-left:2px!important;
  border-radius:var(--htrf-badge-radius,20px)!important;background:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important;
  font-size:11px!important;font-weight:700!important;font-style:normal!important;line-height:1!important;
  border:0!important;box-shadow:none!important;
}
.htrf-open-badge[hidden]{display:none}

.htrf-grid-busy{position:relative;opacity:.45;transition:opacity .18s ease}
.htrf-spinner{
  position:absolute;left:50%;top:60px;z-index:5;
  width:30px;height:30px;margin-left:-15px;
  border:3px solid var(--htrf-border,#e2e8f0);border-top-color:var(--htrf-primary,#0f766e);
  border-radius:50%;animation:htrfSpin .7s linear infinite;
}
@keyframes htrfSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.htrf-spinner{animation-duration:2.4s}}

/* ==========================================================================
   Button armor
   Real <button> elements are exactly what WooCommerce themes most often
   re-skin with their own high-specificity !important rules (a catch-all
   like ".woocommerce button.button{color:#fff!important}" is extremely
   common). Every property that carries colour or size is re-asserted here
   with the tag name included, so our declarations outrank that pattern
   regardless of load order.
   ========================================================================== */
.htrf-wrap[data-htrf] > button.htrf-open{
  border-color:var(--htrf-primary)!important;background-color:var(--htrf-bg)!important;color:var(--htrf-primary)!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-b-size)!important;font-weight:var(--htrf-weight)!important;
  padding:10px 16px!important;border-radius:var(--htrf-ctl-radius)!important;
  border-width:1px!important;border-style:solid!important;width:100%!important;min-height:44px!important;
  box-shadow:none!important;text-shadow:none!important;text-decoration:none!important;letter-spacing:normal!important;text-transform:none!important;
}
.htrf-wrap[data-htrf] > button.htrf-open:hover,
.htrf-wrap[data-htrf] > button.htrf-open:focus{
  border-color:var(--htrf-primary)!important;background-color:var(--htrf-bg)!important;color:var(--htrf-primary)!important;
}
.htrf-wrap[data-htrf] > button.htrf-open svg{width:17px!important;height:17px!important;color:inherit!important;fill:none!important}
.htrf-wrap[data-htrf] > button.htrf-open b.htrf-open-badge{
  background-color:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important;
  font-size:11px!important;font-weight:700!important;padding:0 var(--htrf-badge-pad,6px)!important;
  min-width:20px!important;height:20px!important;border-radius:var(--htrf-badge-radius,20px)!important;line-height:1!important;
  text-shadow:none!important;text-transform:none!important;
}
.htrf-panelbox button.htrf-apply{
  border-color:var(--htrf-primary)!important;background-color:var(--htrf-primary)!important;color:var(--htrf-on-primary)!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-b-size)!important;font-weight:var(--htrf-weight)!important;
  border-radius:var(--htrf-ctl-radius)!important;box-shadow:none!important;text-shadow:none!important;text-transform:none!important;
}
.htrf-panelbox button.htrf-reset{
  border-color:var(--htrf-border)!important;background-color:transparent!important;color:var(--htrf-heading)!important;
  font-family:var(--htrf-font)!important;font-size:var(--htrf-b-size)!important;font-weight:var(--htrf-weight)!important;
  border-radius:var(--htrf-ctl-radius)!important;box-shadow:none!important;text-shadow:none!important;text-transform:none!important;
}
.htrf-panelbox button.htrf-reset:hover{border-color:var(--htrf-primary)!important;color:var(--htrf-primary)!important}