/* ==========================================================================
   CITYMALL — catalogue filter panel (inc/catalogue-filters.php)
   Lives in Shoptimizer's #secondary sidebar; on phones the theme's own
   "Show Filters" button opens it as a drawer. Vars come from header.css.
   ========================================================================== */

.ct-filters{ font-size:14px; color:var(--ct-hdr-ink,#1d2430); }

/* The theme butts the product column straight against the sidebar, and the
   product grid's negative gutter margin pulls the first cards ~20px further
   left, under the sidebar's edge. Keep the panel well clear of it. */
@media (min-width:993px){
	.ct-filters{ padding-right:28px; box-sizing:border-box; }
}

.ct-filters__head{
	display:flex; align-items:center; justify-content:space-between;
	padding:0 0 12px; margin-bottom:6px;
	border-bottom:2px solid var(--ct-hdr-line,#e4e9f0);
}
.ct-filters__title{ font-size:17px; font-weight:800; color:var(--ct-navy,#0e3f6e); }
.ct-filters__clear{ font-size:13px; font-weight:700; color:var(--ct-orange,#ff6a00) !important; text-decoration:none; }
.ct-filters__clear:hover{ text-decoration:underline; }

.ct-filters__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 4px; }
.ct-chip{
	display:inline-flex; align-items:center; gap:6px;
	padding:5px 8px 5px 11px; border-radius:999px;
	background:var(--ct-blue,#1b6fb3); color:#fff !important;
	font-size:12.5px; font-weight:600; text-decoration:none; line-height:1.2;
}
.ct-chip span[aria-hidden]{ font-size:15px; line-height:1; opacity:.85; }
.ct-chip:hover{ background:var(--ct-navy,#0e3f6e); }

/* Sections */
.ct-facet{ border-bottom:1px solid var(--ct-hdr-line,#e4e9f0); padding:4px 0 10px; }
.ct-facet__title{
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 0 8px; cursor:pointer; list-style:none;
	font-size:14px; font-weight:800; color:var(--ct-navy,#0e3f6e);
}
.ct-facet__title::-webkit-details-marker{ display:none; }
.ct-facet__title::after{
	content:""; width:8px; height:8px; margin-right:3px;
	border-right:2px solid currentColor; border-bottom:2px solid currentColor;
	transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; opacity:.6;
}
.ct-facet:not([open]) .ct-facet__title::after{ transform:rotate(-45deg); }

.ct-facet__list{ margin:0; padding:0; list-style:none; }
.ct-facet__list > li{ margin:0; padding:0; list-style:none; }
.ct-facet__list > li.is-extra{ display:none; }
.ct-facet__list.is-expanded > li.is-extra{ display:list-item; }
.ct-facet__more{
	margin:6px 0 0; padding:0; border:0; background:none !important;
	color:var(--ct-blue,#1b6fb3) !important; font-size:13px; font-weight:700; cursor:pointer;
}
.ct-facet__more:hover{ text-decoration:underline; }

/* Checkbox-style option links */
.ct-opt{
	display:flex; align-items:center; gap:9px;
	padding:5px 4px; border-radius:6px;
	color:var(--ct-hdr-ink,#1d2430) !important; text-decoration:none; line-height:1.3;
}
.ct-opt:hover{ background:var(--ct-hdr-tint,#f3f6fb); }
.ct-opt__box{
	flex:none; width:17px; height:17px; box-sizing:border-box;
	border:1.5px solid #b9c3d0; border-radius:4px; background:#fff;
}
.ct-opt.is-on .ct-opt__box{
	border-color:var(--ct-blue,#1b6fb3);
	background:var(--ct-blue,#1b6fb3) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ct-opt.is-on .ct-opt__name{ font-weight:700; color:var(--ct-blue,#1b6fb3); }
.ct-opt__name{ flex:1 1 auto; min-width:0; }
.ct-opt__n{ flex:none; color:#8a93a2; font-size:12px; }

/* Category links */
.ct-cat{ display:block; padding:5px 4px; color:var(--ct-hdr-ink,#1d2430) !important; text-decoration:none; border-radius:6px; }
a.ct-cat:hover{ background:var(--ct-hdr-tint,#f3f6fb); color:var(--ct-blue,#1b6fb3) !important; }
.ct-cat--up{ color:var(--ct-hdr-muted,#6b7280) !important; font-size:13px; }
.ct-cat--here{ font-weight:800; color:var(--ct-navy,#0e3f6e) !important; }
.ct-cat--kid{ padding-left:16px; }

/* Price */
.ct-price{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:2px 0 4px; }
.ct-price label{ flex:1 1 0; min-width:0; margin:0; }
.ct-price input[type="number"]{
	width:100%; height:38px; padding:0 8px; box-sizing:border-box;
	border:1.5px solid var(--ct-hdr-line,#e4e9f0) !important; border-radius:8px; background:#fff;
	font-size:13.5px; -moz-appearance:textfield;
}
.ct-price input::-webkit-outer-spin-button,
.ct-price input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ct-price input:focus{ border-color:var(--ct-blue,#1b6fb3) !important; outline:0; }
.ct-price__to{ color:var(--ct-hdr-muted,#6b7280); font-size:12.5px; }
/* Its own full-width row: beside the inputs it pushed past narrow sidebars. */
.ct-price__go{
	flex:1 0 100%; height:38px; padding:0 14px !important; border:0; border-radius:8px !important;
	background:var(--ct-blue,#1b6fb3) !important; color:#fff !important; font-weight:700; font-size:13.5px; cursor:pointer;
}
.ct-price__go:hover{ background:var(--ct-navy,#0e3f6e) !important; }

/* Phone drawer: the theme's off-canvas panel */
@media (max-width:992px){
	.ct-filters{ padding:4px 2px 40px; }
	.ct-opt, .ct-cat{ padding:8px 4px; }
}