/* ==========================================================================
   YCART PRODUCT FILTERS

   Layout pattern: boxed panel, tinted header bar, full-bleed dividers,
   <details>/<summary> groups with a CSS chevron, per-group active badge.
   Colour + type: the Crafts by Ycart homepage system — walnut, cream,
   parchment, brass, ink, Lora + Manrope. No navy, no red.
   ========================================================================== */

.ycfilt{
  --ycfilt-wood:#7A5634;      /* primary — the logo's wooden frame */
  --ycfilt-wood-d:#5B3E24;
  --ycfilt-ink:#3A2A1C;       /* the logo lettering */
  --ycfilt-mute:#7A6A57;
  --ycfilt-brass:#8F7220;     /* the tacks */
  --ycfilt-line:#E5DAC4;
  --ycfilt-soft:#FBF6EC;      /* cream */
  --ycfilt-parch:#F1E7D5;
  --ycfilt-white:#FFFFFF;
  --ycfilt-radius:6px;

  --ycfilt-display:'Lora',Georgia,'Times New Roman',serif;
  --ycfilt-body:'Manrope',-apple-system,'Segoe UI',Helvetica,sans-serif;

  display:block;
  font-family:var(--ycfilt-body);
  color:var(--ycfilt-ink);
  font-size:15px;
  line-height:1.6;
}
.ycfilt *,.ycfilt *::before,.ycfilt *::after{box-sizing:border-box}
/* Astra underlines links inside content — not in here. */
.ycfilt a,.ycfilt a:hover,.ycfilt a:focus{text-decoration:none!important;box-shadow:none!important}

/* Defensive: full-bleed widgets on this site use
   width:100vw; margin-left:calc(50% - 50vw) to break out of their container.
   If such a rule ever matches this panel it blows it to viewport width and
   shifts it off-screen. Pin the panel to its container so that cannot happen. */
.ycfilt{
  width:auto!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  float:none!important;
  transform:none!important;
}

/* ── panel ─────────────────────────────────────────────────────────────── */

.ycfilt__panel{
  border:1px solid var(--ycfilt-line);
  border-radius:var(--ycfilt-radius);
  background:var(--ycfilt-white);
  overflow:hidden;
}

/* ── header bar ────────────────────────────────────────────────────────── */

.ycfilt__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--ycfilt-line);
  background:var(--ycfilt-soft);
}
.ycfilt__title{
  margin:0;
  font-family:var(--ycfilt-body);
  color:var(--ycfilt-ink);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ycfilt__clear{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ycfilt-wood);
  white-space:nowrap;
}
.ycfilt__clear:hover{color:var(--ycfilt-wood-d)}

/* ── active chips ──────────────────────────────────────────────────────── */

.ycfilt__chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:14px 16px;
  border-bottom:1px solid var(--ycfilt-line);
}
.ycfilt__chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border-radius:999px;
  background:var(--ycfilt-wood);
  color:#fff!important;
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  transition:background-color .2s ease;
}
.ycfilt__chip:hover{background:var(--ycfilt-wood-d);color:#fff!important}
.ycfilt__chip svg{width:11px;height:11px;opacity:.85;flex:none}

/* ── groups (open by default, still collapsible) ───────────────────────── */

.ycfilt__group{border-bottom:1px solid var(--ycfilt-line)}
.ycfilt__group:last-of-type{border-bottom:0}

.ycfilt__summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:var(--ycfilt-ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
  transition:background-color .2s ease;
}
.ycfilt__summary::-webkit-details-marker{display:none}
.ycfilt__summary:hover{background:var(--ycfilt-soft)}

/* chevron drawn in CSS, so there is no icon file to load */
.ycfilt__summary::after{
  content:"";
  flex:0 0 8px;
  width:8px;height:8px;
  margin-left:auto;
  border-right:2px solid var(--ycfilt-wood);
  border-bottom:2px solid var(--ycfilt-wood);
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .25s ease,margin-top .25s ease;
}
.ycfilt__group[open] > .ycfilt__summary::after{transform:rotate(-135deg);margin-top:2px}

/* how many filters are on inside this group */
.ycfilt__on{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:19px;height:19px;
  padding:0 5px;
  border-radius:999px;
  background:var(--ycfilt-brass);
  color:#fff;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.ycfilt__list{
  padding:2px 16px 14px;
  max-height:290px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.ycfilt__list::-webkit-scrollbar{width:6px}
.ycfilt__list::-webkit-scrollbar-thumb{background:var(--ycfilt-line);border-radius:6px}
.ycfilt__list--price{max-height:none;overflow:visible;padding-top:6px}

/* ── checkbox rows ─────────────────────────────────────────────────────── */

.ycfilt__check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  cursor:pointer;
  line-height:1.4;
  color:var(--ycfilt-mute);
  transition:color .18s ease;
}
.ycfilt__check:hover{color:var(--ycfilt-ink)}
.ycfilt__check input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.ycfilt__box{
  flex:0 0 18px;
  width:18px;height:18px;
  border:1.5px solid #D6C9AF;
  border-radius:5px;
  background:var(--ycfilt-white);
  position:relative;
  transition:background-color .18s ease,border-color .18s ease;
}
.ycfilt__box::after{
  content:"";
  position:absolute;
  left:5px;top:1px;
  width:5px;height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .18s ease;
}
.ycfilt__check input:checked + .ycfilt__box{
  background:var(--ycfilt-wood);
  border-color:var(--ycfilt-wood);
}
.ycfilt__check input:checked + .ycfilt__box::after{transform:rotate(45deg) scale(1)}
.ycfilt__check input:focus-visible + .ycfilt__box{
  outline:2px solid var(--ycfilt-brass);
  outline-offset:2px;
}
.ycfilt__check:hover .ycfilt__box{border-color:var(--ycfilt-wood)}
.ycfilt__check input:checked ~ .ycfilt__label{color:var(--ycfilt-ink);font-weight:600}

.ycfilt__label{flex:1 1 auto;min-width:0;font-size:14.5px}
.ycfilt__count{
  flex:0 0 auto;
  color:var(--ycfilt-mute);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* ── price ─────────────────────────────────────────────────────────────── */

.ycfilt__flat{margin:0;color:var(--ycfilt-mute);font-size:14.5px}
.ycfilt__flat .amount,.ycfilt__flat bdi{color:var(--ycfilt-wood);font-weight:700}

.ycfilt__slider{position:relative;height:28px;margin:2px 2px 12px}
.ycfilt__track{
  position:absolute;
  left:0;right:0;top:50%;
  height:4px;
  margin-top:-2px;
  background:var(--ycfilt-parch);
  border-radius:4px;
}
.ycfilt__fill{
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  background:var(--ycfilt-wood);
  border-radius:4px;
}
.ycfilt__thumb{
  position:absolute;
  left:0;right:0;top:0;
  width:100%;
  height:28px;
  margin:0;
  background:none;
  -webkit-appearance:none;
  appearance:none;
  pointer-events:none;
}
.ycfilt__thumb:focus{outline:0}
.ycfilt__thumb::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--ycfilt-wood);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(58,42,28,.30);
  cursor:grab;
}
.ycfilt__thumb::-moz-range-thumb{
  pointer-events:auto;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--ycfilt-wood);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(58,42,28,.30);
  cursor:grab;
}
.ycfilt__thumb::-moz-range-track{background:none;border:0}

.ycfilt__range{display:flex;align-items:flex-end;gap:9px}
.ycfilt__range label{flex:1 1 0;min-width:0}
.ycfilt__range-label{
  display:block;
  margin-bottom:5px;
  color:var(--ycfilt-mute);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
/* the currency symbol sits inside the box, out of the tab order and out of
   the way of clicks, so the field still behaves like a plain number input */
.ycfilt__field{position:relative;display:block}
.ycfilt__cur{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--ycfilt-mute);
  font-family:var(--ycfilt-body);
  font-size:14px;
  font-weight:600;
  line-height:1;
}
.ycfilt__range input{
  width:100%;
  height:40px;
  padding:0 11px 0 27px;
  border:1px solid var(--ycfilt-line);
  border-radius:8px;
  background:var(--ycfilt-white);
  color:var(--ycfilt-ink);
  font-family:var(--ycfilt-body);
  font-size:14.5px;
  font-variant-numeric:tabular-nums;
}
/* the placeholder is the shop's floor / ceiling, so it must read as a hint,
   not as a value the shopper has chosen */
.ycfilt__range input::placeholder{color:var(--ycfilt-mute);opacity:.62}
.ycfilt__range input:focus{
  border-color:var(--ycfilt-wood);
  outline:0;
  box-shadow:0 0 0 3px rgba(122,86,52,.13);
}

/* ── apply ─────────────────────────────────────────────────────────────── */

.ycfilt__actions{
  padding:14px 16px;
  border-top:1px solid var(--ycfilt-line);
  background:var(--ycfilt-soft);
}
.ycfilt__apply{
  display:block;
  width:100%;
  font-family:var(--ycfilt-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ycfilt-wood);
  border:1px solid var(--ycfilt-wood);
  border-radius:3px;
  padding:14px 18px;
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease;
}
.ycfilt__apply:hover{background:var(--ycfilt-wood-d);border-color:var(--ycfilt-wood-d)}

/* With instant filtering the Apply button is only the no-JS fallback,
   so JS quietly demotes it once it takes over. */
.ycfilt.is-instant .ycfilt__actions{padding:12px 16px}
.ycfilt.is-instant .ycfilt__apply{
  background:transparent;
  color:var(--ycfilt-mute);
  border-color:var(--ycfilt-line);
  font-size:11.5px;
}
.ycfilt.is-instant .ycfilt__apply:hover{
  background:var(--ycfilt-ink);
  border-color:var(--ycfilt-ink);
  color:#fff;
}

/* while a filter request is in flight */
.ycfilt.is-busy{opacity:.55;pointer-events:none;transition:opacity .15s ease}

/* ── mobile bar ────────────────────────────────────────────────────────── */
/* On desktop the panel is simply always there and this button never shows. */

.ycfilt__toggle{display:none}

/* Astra's tablet/mobile breakpoint. Below it, JS lifts the whole panel to the
   top of the product list and the panel collapses behind this bar. */
@media (max-width:921px){

  .ycfilt{margin:0 0 22px}

  .ycfilt__toggle{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:14px 16px;
    border:1px solid var(--ycfilt-line);
    border-radius:var(--ycfilt-radius);
    background:var(--ycfilt-soft);
    color:var(--ycfilt-ink);
    font-family:var(--ycfilt-body);
    font-size:12.5px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background-color .2s ease;
  }
  .ycfilt__toggle:hover{background:var(--ycfilt-parch)}
  .ycfilt__toggle svg{width:18px;height:18px;flex:none;color:var(--ycfilt-wood)}
  .ycfilt__toggle-text{flex:1 1 auto;text-align:left}

  /* chevron, matching the group summaries */
  .ycfilt__toggle-arrow{
    flex:0 0 8px;
    width:8px;height:8px;
    border-right:2px solid var(--ycfilt-wood);
    border-bottom:2px solid var(--ycfilt-wood);
    transform:rotate(45deg);
    margin-top:-3px;
    transition:transform .25s ease,margin-top .25s ease;
  }
  .ycfilt.is-open .ycfilt__toggle-arrow{transform:rotate(-135deg);margin-top:2px}
  .ycfilt.is-open .ycfilt__toggle{
    border-radius:var(--ycfilt-radius) var(--ycfilt-radius) 0 0;
    border-bottom-color:transparent;
  }

  /* the panel itself is closed until the bar is tapped */
  .ycfilt__panel{display:none;border-radius:0 0 var(--ycfilt-radius) var(--ycfilt-radius)}
  .ycfilt.is-open .ycfilt__panel{display:block}

  /* no JS? then never hide it — the panel just sits open */
  .no-js .ycfilt__panel{display:block}
}

@media (max-width:640px){
  .ycfilt__head{padding:13px 14px}
  .ycfilt__summary{padding:13px 14px}
  .ycfilt__list{padding:2px 14px 12px;max-height:250px}
  .ycfilt__actions{padding:12px 14px}
  .ycfilt__toggle{padding:13px 14px}
}