/**
 * WC Advanced Filters  – filters.css  v2.0
 * Premium e-commerce UI · Zero external dependencies
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
	--waf-sans:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	/* Palette */
	--waf-ink:           #111827;
	--waf-ink-2:         #374151;
	--waf-ink-3:         #6b7280;
	--waf-ink-4:         #9ca3af;
	--waf-paper:         #ffffff;
	--waf-paper-2:       #f9fafb;
	--waf-paper-3:       #f3f4f6;
	--waf-line:          #e5e7eb;
	--waf-line-2:        #d1d5db;

	--waf-accent:        #4f46e5;   /* indigo */
	--waf-accent-dark:   #3730a3;
	--waf-accent-light:  #eef2ff;
	--waf-sale:          #ef4444;
	--waf-sale-bg:       #fef2f2;
	--waf-success:       #10b981;

	/* Shape */
	--waf-r-sm:    4px;
	--waf-r:       8px;
	--waf-r-md:    12px;
	--waf-r-lg:    16px;
	--waf-r-pill:  999px;

	/* Shadow */
	--waf-s0:  none;
	--waf-s1:  0 1px 2px rgba(0,0,0,.05);
	--waf-s2:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--waf-s3:  0 4px 16px rgba(0,0,0,.09);
	--waf-s4:  0 8px 32px rgba(0,0,0,.14);

	/* Motion */
	--waf-ease:  cubic-bezier(.4,0,.2,1);
	--waf-fast:  140ms;
	--waf-mid:   240ms;
	--waf-slow:  380ms;

	/* Layout */
	--waf-sidebar: 272px;
	--waf-gap:     28px;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.waf-wrapper {
	display: grid;
	grid-template-columns: var(--waf-sidebar) 1fr;
	align-items: start;
	gap: var(--waf-gap);
	font-family: var(--waf-sans);
	font-size: 14px;
	color: var(--waf-ink);
	line-height: 1.5;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.waf-sidebar {
	position: sticky;
	top: 24px;
	max-height: calc(100svh - 48px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--waf-line) transparent;
}
.waf-sidebar::-webkit-scrollbar      { width: 3px; }
.waf-sidebar::-webkit-scrollbar-thumb{ background: var(--waf-line-2); border-radius: 2px; }

.waf-sidebar-inner {
	background:    var(--waf-paper);
	border:        1px solid var(--waf-line);
	border-radius: var(--waf-r-lg);
	overflow:      hidden;
	box-shadow:    var(--waf-s2);
}

/* Header */
.waf-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         18px 20px 14px;
	border-bottom:   1px solid var(--waf-line);
}

.waf-header-title {
	display:     flex;
	align-items: center;
	gap:         7px;
	font-size:   15px;
	font-weight: 700;
	letter-spacing: -.3px;
}
.waf-header-title svg { color: var(--waf-accent); }

.waf-clear-all {
	background:    transparent;
	border:        none;
	padding:       4px 10px;
	border-radius: var(--waf-r-pill);
	font-family:   inherit;
	font-size:     12px;
	font-weight:   500;
	color:         var(--waf-ink-3);
	cursor:        pointer;
	transition:    all var(--waf-fast) var(--waf-ease);
	border:        1px solid var(--waf-line);
}
.waf-clear-all:hover { color: var(--waf-sale); border-color: var(--waf-sale); background: var(--waf-sale-bg); }

/* ============================================================
   PANELS
   ============================================================ */
.waf-panel {
	border-bottom: 1px solid var(--waf-line);
}
.waf-panel:last-child { border-bottom: none; }

.waf-panel-btn {
	display:         flex;
	align-items:     center;
	width:           100%;
	padding:         14px 20px;
	background:      none;
	border:          none;
	font-family:     inherit;
	font-size:       13.5px;
	font-weight:     600;
	color:           var(--waf-ink);
	cursor:          pointer;
	gap:             8px;
	text-align:      left;
	letter-spacing:  -.2px;
	transition:      background var(--waf-fast) var(--waf-ease);
}
.waf-panel-btn:hover { background: var(--waf-paper-2); }

.waf-panel-label { flex: 1; }

.waf-panel-badge {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       18px;
	height:          18px;
	padding:         0 5px;
	background:      var(--waf-accent);
	border-radius:   var(--waf-r-pill);
	color:           #fff;
	font-size:       10px;
	font-weight:     700;
}

.waf-panel-chevron {
	color:      var(--waf-ink-4);
	flex-shrink: 0;
	transition: transform var(--waf-mid) var(--waf-ease);
}
.waf-panel-btn[aria-expanded="false"] .waf-panel-chevron { transform: rotate(-90deg); }

.waf-panel-body {
	padding:         0 20px 16px;
	overflow:        hidden;
	max-height:      1200px;
	transition:      max-height var(--waf-mid) var(--waf-ease);
}
.waf-panel-btn[aria-expanded="false"] + .waf-panel-body {
	max-height:      0;
	padding-bottom:  0;
}

/* ============================================================
   CATEGORY TREE  – with images
   ============================================================ */
.waf-cat-tree {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

/* ---- Level 0 (top): big card with image ---- */
.waf-cat-l0 > .waf-cat-label { display: block; }

.waf-cat-l0 .waf-cat-card {
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        8px 10px;
	border:         1.5px solid var(--waf-line);
	border-radius:  var(--waf-r-md);
	cursor:         pointer;
	transition:     all var(--waf-fast) var(--waf-ease);
	background:     var(--waf-paper);
}
.waf-cat-l0 .waf-cat-card:hover {
	border-color: var(--waf-accent);
	background:   var(--waf-accent-light);
}
.waf-cat-l0 .waf-filter-input:checked ~ .waf-cat-card {
	border-color: var(--waf-accent);
	background:   var(--waf-accent-light);
	box-shadow:   0 0 0 3px rgba(79,70,229,.12);
}

.waf-cat-img-wrap {
	flex-shrink:   0;
	width:         52px;
	height:        52px;
	border-radius: var(--waf-r);
	overflow:      hidden;
	background:    var(--waf-paper-3);
}
.waf-cat-img-wrap img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--waf-mid) var(--waf-ease);
}
.waf-cat-l0 .waf-cat-card:hover .waf-cat-img-wrap img { transform: scale(1.08); }

/* ---- Level 1 (sub): small thumbnail + row ---- */
.waf-cat-children {
	margin-top:     4px;
	padding-left:   16px;
	overflow:       hidden;
	max-height:     none;
	transition:     max-height var(--waf-mid) var(--waf-ease);
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.waf-cat-l1 .waf-cat-card {
	display:        flex;
	align-items:    center;
	gap:            8px;
	padding:        6px 8px;
	border:         1px solid transparent;
	border-radius:  var(--waf-r);
	cursor:         pointer;
	transition:     all var(--waf-fast) var(--waf-ease);
}
.waf-cat-l1 .waf-cat-card:hover  { background: var(--waf-paper-2); border-color: var(--waf-line); }
.waf-cat-l1 .waf-filter-input:checked ~ .waf-cat-card {
	background:   var(--waf-accent-light);
	border-color: var(--waf-accent);
}

.waf-cat-thumb-sm {
	flex-shrink:   0;
	width:         28px;
	height:        28px;
	border-radius: var(--waf-r-sm);
	overflow:      hidden;
	background:    var(--waf-paper-3);
}
.waf-cat-thumb-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Level 2 (sub-sub): dot + row ---- */
.waf-cat-l2 .waf-cat-card {
	display:        flex;
	align-items:    center;
	gap:            8px;
	padding:        5px 8px;
	border:         1px solid transparent;
	border-radius:  var(--waf-r-sm);
	cursor:         pointer;
	transition:     all var(--waf-fast) var(--waf-ease);
}
.waf-cat-l2 .waf-cat-card:hover { background: var(--waf-paper-3); }
.waf-cat-l2 .waf-filter-input:checked ~ .waf-cat-card { background: var(--waf-accent-light); }

.waf-cat-dot {
	flex-shrink:   0;
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--waf-line-2);
	transition:    background var(--waf-fast);
}
.waf-cat-l2 .waf-filter-input:checked ~ .waf-cat-card .waf-cat-dot { background: var(--waf-accent); }

/* Shared cat text */
.waf-cat-name {
	flex:        1;
	font-size:   13px;
	font-weight: 500;
	color:       var(--waf-ink-2);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}
.waf-cat-l0 .waf-cat-name { font-size: 13.5px; font-weight: 600; color: var(--waf-ink); }
.waf-cat-l0 .waf-filter-input:checked ~ .waf-cat-card .waf-cat-name { color: var(--waf-accent-dark); }

.waf-cat-count {
	font-size:  11px;
	color:      var(--waf-ink-4);
	font-weight: 500;
}

/* Checkbox indicator (replaces native) */
.waf-checkbox-indicator {
	flex-shrink: 0;
	width:       15px;
	height:      15px;
	border:      1.5px solid var(--waf-line-2);
	border-radius: 3px;
	background:  var(--waf-paper);
	transition:  all var(--waf-fast);
	display:     inline-flex;
	align-items: center;
	justify-content: center;
}
.waf-filter-input:checked ~ .waf-cat-card .waf-checkbox-indicator {
	background:   var(--waf-accent);
	border-color: var(--waf-accent);
}
.waf-filter-input:checked ~ .waf-cat-card .waf-checkbox-indicator::after {
	content:       '';
	width:         8px;
	height:        5px;
	border-left:   2px solid #fff;
	border-bottom: 2px solid #fff;
	transform:     rotate(-45deg) translateY(-1px);
	display:       block;
}

/* Hidden terms (zero count) */
.waf-unavailable { opacity: .38; pointer-events: none; }

/* ============================================================
   TERM LIST (attributes, tags – checkbox style)
   ============================================================ */
.waf-term-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        2px;
	max-height: 220px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.waf-term-label {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     6px 6px;
	border-radius: var(--waf-r-sm);
	cursor:      pointer;
	transition:  background var(--waf-fast);
}
.waf-term-label:hover { background: var(--waf-paper-2); }

.waf-checkbox {
	flex-shrink: 0;
	width:       15px;
	height:      15px;
	border:      1.5px solid var(--waf-line-2);
	border-radius: 3px;
	background:  var(--waf-paper);
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	transition:  all var(--waf-fast);
}
.waf-filter-input:checked + .waf-checkbox,
.waf-filter-input:checked ~ .waf-checkbox {
	background:   var(--waf-accent);
	border-color: var(--waf-accent);
}
.waf-filter-input:checked + .waf-checkbox::after,
.waf-filter-input:checked ~ .waf-checkbox::after {
	content:       '';
	width:         8px;
	height:        5px;
	border-left:   2px solid #fff;
	border-bottom: 2px solid #fff;
	transform:     rotate(-45deg) translateY(-1px);
	display:       block;
}
.waf-filter-input:focus-visible + .waf-checkbox,
.waf-filter-input:focus-visible ~ .waf-checkbox {
	outline: 2px solid var(--waf-accent);
	outline-offset: 2px;
}

.waf-term-name {
	flex:        1;
	font-size:   13px;
	color:       var(--waf-ink-2);
}
.waf-term-count {
	font-size:  11.5px;
	color:      var(--waf-ink-4);
	font-weight: 500;
}

/* ============================================================
   COLOUR SWATCHES
   ============================================================ */
.waf-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.waf-swatch-label { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.waf-swatch {
	width:         26px;
	height:        26px;
	border-radius: 50%;
	border:        2px solid transparent;
	outline:       1.5px solid var(--waf-line-2);
	transition:    all var(--waf-fast) var(--waf-ease);
}
.waf-swatch:hover { transform: scale(1.18); }
.waf-filter-input:checked + .waf-swatch,
.waf-filter-input:checked ~ .waf-swatch {
	border-color: var(--waf-accent);
	outline:      2px solid var(--waf-accent);
	transform:    scale(1.12);
}

.waf-swatch-name { font-size: 10px; color: var(--waf-ink-4); }

/* ============================================================
   TAG CLOUD
   ============================================================ */
.waf-tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }

.waf-tag-chip {
	display:       inline-block;
	padding:       4px 10px;
	border:        1px solid var(--waf-line-2);
	border-radius: var(--waf-r-pill);
	font-size:     12px;
	color:         var(--waf-ink-2);
	background:    var(--waf-paper);
	transition:    all var(--waf-fast);
	cursor:        pointer;
}
.waf-tag-label:hover .waf-tag-chip { border-color: var(--waf-accent); color: var(--waf-accent); background: var(--waf-accent-light); }
.waf-filter-input:checked + .waf-tag-chip,
.waf-filter-input:checked ~ .waf-tag-chip {
	background:   var(--waf-accent);
	border-color: var(--waf-accent);
	color:        #fff;
}

/* ============================================================
   PRICE SLIDER
   ============================================================ */
.waf-price-slider { padding: 4px 4px 0; }

.waf-price-track {
	position:      relative;
	height:        4px;
	background:    var(--waf-line);
	border-radius: 2px;
	margin:        18px 8px;
}

.waf-price-fill {
	position:      absolute;
	height:        100%;
	background:    var(--waf-accent);
	border-radius: 2px;
}

.waf-price-thumbs {
	position: relative;
	height:   0;
}

.waf-price-input {
	position:      absolute;
	width:         calc(100% + 16px);
	left:          -8px;
	top:           -18px;
	height:        4px;
	background:    transparent;
	border:        none;
	outline:       none;
	pointer-events: none;
	appearance:    none;
	-webkit-appearance: none;
}
.waf-price-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events:     all;
	width:              18px;
	height:             18px;
	border-radius:      50%;
	background:         var(--waf-paper);
	border:             2px solid var(--waf-accent);
	box-shadow:         var(--waf-s3);
	cursor:             grab;
	transition:         transform var(--waf-fast), box-shadow var(--waf-fast);
}
.waf-price-input::-webkit-slider-thumb:hover,
.waf-price-input::-webkit-slider-thumb:active {
	transform:  scale(1.2);
	box-shadow: var(--waf-s4);
	cursor:     grabbing;
}
.waf-price-input::-moz-range-thumb {
	pointer-events: all;
	width:          18px;
	height:         18px;
	border-radius:  50%;
	background:     var(--waf-paper);
	border:         2px solid var(--waf-accent);
	box-shadow:     var(--waf-s3);
	cursor:         grab;
}

.waf-price-labels {
	display:         flex;
	justify-content: space-between;
	margin-top:      14px;
	font-size:       13px;
	font-weight:     600;
	color:           var(--waf-ink);
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.waf-content { min-width: 0; }

.waf-toolbar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             10px;
	padding-bottom:  14px;
	border-bottom:   1px solid var(--waf-line);
	margin-bottom:   14px;
}

.waf-results-count {
	margin:     0;
	font-size:  13px;
	color:      var(--waf-ink-3);
	font-weight: 500;
}

.waf-sort-wrap {
	position:    relative;
	display:     inline-flex;
	align-items: center;
}
.waf-sort {
	padding:       8px 34px 8px 12px;
	border:        1px solid var(--waf-line-2);
	border-radius: var(--waf-r);
	font-family:   inherit;
	font-size:     13px;
	font-weight:   500;
	color:         var(--waf-ink);
	background:    var(--waf-paper);
	appearance:    none;
	-webkit-appearance: none;
	cursor:        pointer;
	min-width:     170px;
	transition:    border-color var(--waf-fast);
}
.waf-sort:hover  { border-color: var(--waf-accent); }
.waf-sort:focus  { outline: 2px solid var(--waf-accent); outline-offset: 1px; }
.waf-sort-icon {
	position:       absolute;
	right:          10px;
	pointer-events: none;
	color:          var(--waf-ink-4);
}

/* ============================================================
   ACTIVE CHIP BAR
   ============================================================ */
.waf-active-bar {
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
	min-height: 0;
	margin-bottom: 10px;
}

.waf-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       5px 8px 5px 11px;
	background:    var(--waf-ink);
	color:         #fff;
	border-radius: var(--waf-r-pill);
	font-size:     12px;
	font-weight:   500;
	animation:     waf-pop var(--waf-mid) var(--waf-ease) both;
}

.waf-chip-x {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           16px;
	height:          16px;
	background:      rgba(255,255,255,.18);
	border:          none;
	border-radius:   50%;
	cursor:          pointer;
	color:           #fff;
	padding:         0;
	transition:      background var(--waf-fast);
	flex-shrink:     0;
}
.waf-chip-x:hover { background: rgba(255,255,255,.35); }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.waf-grid {
	display:               grid;
	grid-template-columns: repeat(var(--cols,3),1fr);
	gap:                   20px;
	transition:            opacity var(--waf-mid);
}
.waf-grid.cols-1 { --cols: 1; }
.waf-grid.cols-2 { --cols: 2; }
.waf-grid.cols-3 { --cols: 3; }
.waf-grid.cols-4 { --cols: 4; }
.waf-grid.cols-5 { --cols: 5; }

.waf-products.is-loading { pointer-events: none; }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.waf-card {
	background:    var(--waf-paper);
	border:        1px solid var(--waf-line);
	border-radius: var(--waf-r-lg);
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
	transition:    transform var(--waf-mid) var(--waf-ease),
	               box-shadow var(--waf-mid) var(--waf-ease),
	               border-color var(--waf-mid) var(--waf-ease);
	box-shadow:    var(--waf-s1);
}
.waf-card:hover {
	transform:    translateY(-4px);
	box-shadow:   var(--waf-s4);
	border-color: var(--waf-line-2);
}

/* Image area */
.waf-card-img-wrap {
	position:      relative;
	aspect-ratio:  1/1;
	overflow:      hidden;
	background:    var(--waf-paper-3);
}
.waf-card-img {
	width: 100%; height: 100%;
	object-fit:  cover;
	display:     block;
	transition:  transform .5s var(--waf-ease);
}
.waf-card:hover .waf-card-img { transform: scale(1.05); }

.waf-card-overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.25));
	opacity:    0;
	transition: opacity var(--waf-mid);
}
.waf-card:hover .waf-card-overlay { opacity: 1; }

/* Badges */
.waf-badge {
	position:      absolute;
	top:           10px;
	left:          10px;
	padding:       3px 9px;
	border-radius: var(--waf-r-pill);
	font-size:     11px;
	font-weight:   700;
	letter-spacing: .04em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}
.waf-badge-sale { background: var(--waf-sale); color: #fff; }
.waf-badge-oos  { background: rgba(0,0,0,.6);  color: #fff; top: auto; bottom: 10px; }

/* Body */
.waf-card-body {
	padding:        14px 14px 14px;
	display:        flex;
	flex-direction: column;
	gap:            4px;
	flex:           1;
}
.waf-card-cats {
	margin:      0;
	font-size:   11px;
	color:       var(--waf-ink-4);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}
.waf-card-cats a { color: inherit; text-decoration: none; }
.waf-card-cats a:hover { color: var(--waf-accent); }

.waf-card-title {
	margin:      0;
	font-size:   14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.15px;
}
.waf-card-title a { color: var(--waf-ink); text-decoration: none; }
.waf-card-title a:hover { color: var(--waf-accent); }

/* Footer */
.waf-card-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      auto;
	padding-top:     10px;
	gap:             6px;
}
.waf-card-price { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.waf-card-price .price ins { text-decoration: none; color: var(--waf-sale); }
.waf-card-price .price del { color: var(--waf-ink-4); font-size: .8em; font-weight: 400; }

.waf-atc,
.waf-view-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border-radius:   var(--waf-r);
	background:      var(--waf-ink);
	border:          none;
	color:           #fff;
	cursor:          pointer;
	font-family:     inherit;
	transition:      background var(--waf-fast), transform var(--waf-fast);
	flex-shrink:     0;
	text-decoration: none;
	font-size:       12px;
	font-weight:     600;
}
.waf-atc:hover,
.waf-view-btn:hover { background: var(--waf-accent); transform: scale(1.06); }
.waf-atc.is-busy    { opacity: .5; pointer-events: none; }
.waf-atc.is-done    { background: var(--waf-success); }

.waf-view-btn { width: auto; padding: 0 12px; font-size: 11.5px; }

/* ============================================================
   SKELETON  (shimmer)
   ============================================================ */
@keyframes waf-shimmer {
	0%   { background-position: -300% center; }
	100% { background-position:  300% center; }
}
.waf-sk {
	border-radius: var(--waf-r-sm);
	background:    linear-gradient(90deg,#f0f0f0 25%,#e4e4e4 50%,#f0f0f0 75%);
	background-size: 300% 100%;
	animation:     waf-shimmer 1.5s ease infinite;
}
.waf-skeleton-card {
	border:        1px solid var(--waf-line);
	border-radius: var(--waf-r-lg);
	overflow:      hidden;
}
.waf-sk-img  { aspect-ratio: 1/1; width: 100%; border-radius: 0; }
.waf-sk-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.waf-sk-cat  { height: 10px; width: 40%; }
.waf-sk-title{ height: 14px; width: 80%; }
.waf-sk-price{ height: 18px; width: 50%; }
.waf-sk-btn  { height: 32px; width: 44px; margin-top: 4px; border-radius: var(--waf-r); }

/* ============================================================
   EMPTY / ERROR
   ============================================================ */
.waf-empty {
	grid-column: 1/-1;
	text-align:  center;
	padding:     48px 24px;
}
.waf-empty-icon { margin-bottom: 16px; color: var(--waf-ink-4); }
.waf-empty-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.waf-empty-sub   { font-size: 13px; color: var(--waf-ink-3); margin: 0 0 20px; }
.waf-empty-btn {
	display:     inline-block;
	padding:     10px 22px;
	background:  var(--waf-ink);
	color:       #fff;
	border:      none;
	border-radius: var(--waf-r-pill);
	font-family: inherit;
	font-size:   13px;
	font-weight: 600;
	cursor:      pointer;
	transition:  background var(--waf-fast);
}
.waf-empty-btn:hover { background: var(--waf-accent); }

.waf-error {
	grid-column: 1/-1;
	padding:     20px;
	background:  var(--waf-sale-bg);
	border:      1px solid #fca5a5;
	border-radius: var(--waf-r);
	color:       var(--waf-sale);
	font-size:   13px;
	text-align:  center;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.waf-pagination { margin-top: 28px; }
.waf-pages {
	display:         flex;
	flex-wrap:       wrap;
	gap:             6px;
	list-style:      none;
	margin:          0;
	padding:         0;
	justify-content: center;
}
.waf-pages .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       36px;
	height:          36px;
	padding:         0 8px;
	border:          1px solid var(--waf-line-2);
	border-radius:   var(--waf-r);
	color:           var(--waf-ink);
	text-decoration: none;
	font-size:       13px;
	font-weight:     500;
	background:      var(--waf-paper);
	transition:      all var(--waf-fast);
}
.waf-pages .page-numbers:hover { border-color: var(--waf-accent); color: var(--waf-accent); }
.waf-page-item.is-active .page-numbers,
.waf-pages .page-numbers.current {
	background: var(--waf-accent);
	border-color: var(--waf-accent);
	color: #fff;
}

/* ============================================================
   ACCESSIBILITY HELPERS
   ============================================================ */
.waf-sr-only {
	position: absolute;
	width:    1px;
	height:   1px;
	padding:  0;
	margin:   -1px;
	overflow: hidden;
	clip:     rect(0,0,0,0);
	border:   0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes waf-pop {
	from { transform: scale(.8); opacity: 0; }
	60%  { transform: scale(1.05); }
	to   { transform: scale(1);   opacity: 1; }
}

@keyframes waf-enter {
	from { transform: translateY(10px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.waf-enter { animation: waf-enter .3s var(--waf-ease) both; }

/* ============================================================
   MOBILE
   ============================================================ */
.waf-mobile-btn {
	display:     none;
	align-items: center;
	gap:         7px;
	padding:     10px 16px;
	background:  var(--waf-ink);
	border:      none;
	border-radius: var(--waf-r-pill);
	color:       #fff;
	font-family: inherit;
	font-size:   13px;
	font-weight: 600;
	cursor:      pointer;
	margin-bottom: 14px;
	transition:  background var(--waf-fast);
}
.waf-mobile-btn:hover { background: var(--waf-accent); }
.waf-mobile-count {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       17px;
	height:          17px;
	padding:         0 4px;
	background:      var(--waf-accent);
	border-radius:   var(--waf-r-pill);
	font-size:       10px;
	font-weight:     700;
}

@media (max-width: 1100px) {
	.waf-wrapper { grid-template-columns: 240px 1fr; gap: 20px; }
}

@media (max-width: 768px) {
	.waf-wrapper { grid-template-columns: 1fr; }
	.waf-mobile-btn { display: inline-flex; }

	.waf-sidebar {
		position:   fixed;
		inset:      0 auto 0 0;
		width:      min(82vw, 310px);
		max-height: 100svh;
		top:        0;
		transform:  translateX(-110%);
		background: var(--waf-paper);
		box-shadow: var(--waf-s4);
		z-index:    400;
		border-radius: 0 var(--waf-r-lg) var(--waf-r-lg) 0;
		transition: transform var(--waf-mid) var(--waf-ease);
	}
	.waf-sidebar.is-open { transform: translateX(0); }

	body.waf-sidebar-open::after {
		content:    '';
		position:   fixed;
		inset:      0;
		background: rgba(0,0,0,.45);
		z-index:    399;
	}

	.waf-sidebar-inner { border: none; border-radius: 0; box-shadow: none; min-height: 100%; }
	.waf-grid { --cols: 2 !important; }
}

@media (max-width: 480px) {
	.waf-grid { --cols: 1 !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Print */
@media print {
	.waf-sidebar, .waf-toolbar, .waf-pagination,
	.waf-active-bar, .waf-mobile-btn { display: none !important; }
	.waf-wrapper { grid-template-columns: 1fr; }
}