/* iConnect redesign — category left filter column (live Smart Filter parity) */

/* layout: filters column + product grid */
.ic-cat-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start;}
.ic-cat-layout--full{display:block;}
.ic-cat-main{min-width:0;}

/* filters column */
.ic-filters{display:flex;flex-direction:column;gap:16px;min-width:0;}

/* filter box = white card with plum uppercase heading */
.ic-fbox{background:var(--ic-card);border-radius:var(--ic-r-lg);box-shadow:var(--ic-shadow-card);padding:16px;}
/* symmetric top/bottom: the gap between head and list belongs to the list, so a
   collapsed box closes flush against its heading instead of leaving a dead 12px */
.ic-fbox__list{padding-bottom:0;margin-top:12px;}
.ic-fbox__list > :last-child{margin-bottom:0;}
.ic-fbox__head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none;font-family:var(--ic-head);font-weight:800;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--ic-magenta-dark);margin-bottom:0;}
.ic-fbox__sign{flex:0 0 auto;color:var(--ic-magenta);font-size:18px;font-weight:400;line-height:1;}
.ic-fbox__list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;overscroll-behavior:contain;}
/* collapsible accordion body (one-open, JS-animated — mirrors PDP .ic-acc__body) */
.ic-fbox__list[hidden]{display:none;}
.ic-fbox__list.is-anim{overflow:hidden;transition:max-height .28s ease,opacity .28s ease;}

/* value row: [checkbox][value][count] */
.ic-fbox__row{display:flex;flex-direction:row;align-items:center;gap:8px;padding:5px 4px;font-size:13px;color:var(--ic-text);cursor:pointer;border-radius:var(--ic-r-sm);margin:0;}
.ic-fbox__row:hover{background:#FAF4F8;color:var(--ic-magenta);}
.ic-fbox__row input{accent-color:var(--ic-magenta);width:15px;height:15px;flex:0 0 auto;cursor:pointer;margin:0;}
.ic-fbox__label{flex:1 1 auto;line-height:1.35;word-break:break-word;}
.ic-fbox__count{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ic-muted);background:var(--ic-page);border-radius:var(--ic-pill);padding:1px 8px;}

/* category navigation: no card, no chrome, always open. It sits above the filters and
   has to read as "go here", which a bordered panel with a +/- sign actively fought. */
.ic-cats{display:flex;flex-direction:column;}
.ic-cats__head{
  font-family:var(--ic-head);font-weight:800;font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ic-magenta);margin:0;
}
.ic-cats__list{display:flex;flex-direction:column;gap:4px;margin-top:12px;}
.ic-cats a{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;font-size:13px;font-weight:600;color:var(--ic-text);
  background:#fff;border:1px solid var(--ic-line);border-radius:999px;
}
.ic-cats a::after{content:'\203a';font-size:16px;line-height:1;color:var(--ic-magenta);flex:0 0 auto;}
.ic-cats a:hover{background:var(--ic-magenta);border-color:var(--ic-magenta);color:#fff;}
.ic-cats a:hover::after{color:#fff;}

/* selected filter chips above the grid */
.ic-fchips{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;}
.ic-fchip{display:inline-flex;flex-direction:row;align-items:center;gap:8px;background:#fff;border:1px solid var(--ic-magenta);color:var(--ic-magenta);border-radius:var(--ic-pill);padding:6px 14px;font-size:12.5px;font-weight:600;box-shadow:var(--ic-shadow-card);}
.ic-fchip span{font-size:15px;line-height:1;}
.ic-fchip:hover{background:var(--ic-magenta);color:#fff;}
.ic-fchips__clear{font-size:12.5px;font-weight:700;color:var(--ic-muted);text-decoration:underline;}
.ic-fchips__clear:hover{color:var(--ic-magenta);}

/* mobile-only controls hidden on desktop */
.ic-filters__toggle{display:none;}
.ic-filters__apply{display:none;}

/* mobile: hide the column, show the ΦΙΛΤΡΑ pill that slides the panel down */
@media (max-width:991px){
  /* align-items:stretch overrides the base grid rule's align-items:start (which
     leaks into this flex column and lets .ic-cat-main size to content, pushing
     the toolbar off-screen); stretch pins every child to the viewport width */
  .ic-cat-layout{display:flex;flex-direction:column;gap:0;align-items:stretch;}

  .ic-filters__toggle{
    display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;
    background:#fff;border:1px solid var(--ic-magenta);border-radius:var(--ic-pill);box-shadow:var(--ic-shadow-card);
    color:var(--ic-magenta);font-family:var(--ic-head);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;
    cursor:pointer;margin-bottom:14px;
  }
  .ic-filters__badge{
    display:inline-flex;flex-direction:row;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;
    background:var(--ic-grad-btn);color:#fff;border-radius:var(--ic-pill);font-size:12px;font-weight:700;
  }

  .ic-filters{max-height:0;overflow:hidden;margin-bottom:0;transition:max-height .35s ease,margin-bottom .35s ease;}
  .ic-filters.ic-filters--open{max-height:4000px;margin-bottom:18px;}

  .ic-filters__apply{display:block;width:100%;text-align:center;cursor:pointer;}
}

/* ---------- availability switch (top of the rail) ---------- */
.ic-fbox--stock{padding:12px 14px;}
.ic-fbox__switch{
  display:flex;flex-direction:row;align-items:center;gap:10px;cursor:pointer;user-select:none;
}
.ic-fbox__switch input{position:absolute;opacity:0;width:0;height:0;}
.ic-fbox__switch-face{
  position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:999px;
  background:var(--ic-line);transition:background .18s ease;
}
.ic-fbox__switch-face::after{
  content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(20,10,30,.35);transition:transform .18s ease;
}
.ic-fbox__switch input:checked + .ic-fbox__switch-face{background:var(--ic-magenta);}
.ic-fbox__switch input:checked + .ic-fbox__switch-face::after{transform:translateX(18px);}
.ic-fbox__switch input:focus-visible + .ic-fbox__switch-face{outline:2px solid var(--ic-magenta);outline-offset:2px;}
.ic-fbox__switch-label{font-size:13.5px;font-weight:700;color:var(--ic-text);}