/* Shop Filter + Sort bar — styles (morphing/expanding version)
 * Tweak the variables in .sf-bar to match your theme.
 * NOTE: #shop-grid must match your Loop Grid's Advanced > CSS ID.
 */
.sf-bar{
    --sf-open-w:348px;
	--sf-bg:#000; --sf-btn:#000; --sf-fg:#f2f0ef;
	--sf-line:#f2f0ef66; --sf-radius:5px;
	--sf-dur:600ms; --sf-ease:cubic-bezier(0.47, 0.7, 0.36, 1.24);
	display:flex; gap:10px; align-items:flex-start; font-family:inherit;
}

/* Each item reserves its COLLAPSED footprint (JS sets width/height in px). */
.sf-item{ position:relative; box-sizing:border-box; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .25); border-radius: 5px;}

/* The morphing element. Collapsed = looks like a button; open = the panel. */
.sf-panel{
	position:relative; top:0; left:0; box-sizing:border-box; overflow:hidden;
	background:var(--sf-btn); color:var(--sf-fg);
	border-radius:var(--sf-radius);
	width:auto; height:auto; z-index:20;
	transition:width var(--sf-dur) var(--sf-ease),
	           height var(--sf-dur) var(--sf-ease),
	           background-color 300ms ease;
}
.sf-item.open .sf-panel{ background:var(--sf-bg); z-index:9999; }

/* Header row (the clickable toggle). Shrinks to its content when collapsed. */
.sf-head{ display:inline-flex; align-items:center; }
.sf-toggle{
	display:inline-flex; align-items:center; gap:9px;
	background:transparent; border:0; color:inherit;
	padding:13px 16px; font-size:15px; line-height:1; cursor:pointer; white-space:nowrap;
}
.sf-ic{ display:inline-block; font-size:18px; line-height:1; transition:transform var(--sf-dur) var(--sf-ease); }
.sf-item.open .sf-ic{ transform:rotate(135deg); }   /* + becomes x */

/* "Clear all" — absolute so it never affects the collapsed width; fades in when open. */
.sf-clear{
	position:absolute; top:13px; right:16px;
	background:none; border:0; color:var(--sf-fg); font-size:14px; line-height:1; cursor:pointer;
	padding:0; opacity:0; pointer-events:none; transition:opacity 250ms ease;
}
.sf-item.open .sf-clear{ opacity:.9; pointer-events:auto; transition-delay:120ms; }
.sf-clear:hover{ opacity:1; text-decoration:underline; }

/* Options — fade in slightly after the box starts expanding. */
.sf-body{ opacity:0; transition:opacity 300ms ease; padding-bottom: 60px;}
.sf-item.open .sf-body{ opacity:1; transition-delay:120ms; }
.sf-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sf-line); min-width:200px; }
.sf-list label{ display:flex; align-items:center; gap:12px; padding:11px 12px; color:var(--sf-fg); font-size:15px; cursor:pointer; }
.sf-list label:hover{ background:rgba(255,255,255,.04); border-radius:8px; }
.sf-list input{ position:absolute; opacity:0; width:0; height:0; }
.sf-box{ width:15px; height:15px; border:1.5px solid rgba(245,245,245,.6); border-radius:3px; flex:0 0 auto; background:transparent; transition:background .12s ease; }
.sf-list input:checked + .sf-box{ background:var(--sf-fg); border-color:var(--sf-fg); }

/* Grid loading state */
#shop-grid{ transition:opacity .2s ease; }
#shop-grid.sf-loading{ opacity:.45; pointer-events:none; }

.sf-toggle {
    padding: 15px 17px !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #F2F0EF !important;
    height: 50px;
    gap: 20px;
}

.sf-head {
    height: 50px;
}

.sf-clear {
    top: 0px;
    right: 0px;
    padding: 15px 17px!important;
    font-size: 24px !important;
    color: #f2f0ef !important;
    font-weight: 400 !important;
    height: 50px !important;
    display: flex;
    justify-content: end;
    align-items: center;
}

.sf-list label {
    font-size: 24px;
    font-weight: 400;
    white-space: nowrap;
    gap: 20px;
}

ul.sf-list li {
    border-bottom: solid 1px #f2f0ef66;
}

.sf-body {
    padding-inline: 20px;
}

button.sf-toggle {
    border: none !important;
}