/* Fanki — shop / product archive page. Depends on tokens.css + base.css. */

.fanki-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--fanki-space-6);
	align-items: start;
	padding-bottom: var(--fanki-space-9);
}

.fanki-filters {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
	position: sticky;
	top: calc(var(--fanki-header-height) + var(--fanki-space-4));
}

.fanki-filters__group + .fanki-filters__group {
	margin-top: var(--fanki-space-5);
	padding-top: var(--fanki-space-5);
	border-top: 1px solid var(--fanki-color-border);
}

.fanki-filters__title {
	/* base + bold, not sm + semibold — a real, purpose-built filter panel
	   (pureglamer.com's own is the direct comparison) reads its section
	   headings at a bolder, more prominent size than this theme's own
	   original mockup value; bumped 2026-08-29 alongside the rest of this
	   panel's font-size pass. */
	font-size: var(--fanki-font-size-base);
	font-weight: var(--fanki-font-weight-bold);
	margin-bottom: var(--fanki-space-3);
}

.fanki-filters__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-sm);
	padding-block: var(--fanki-space-2);
}

.fanki-filters__option-label {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
}

.fanki-filters__option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--fanki-color-primary);
}

.fanki-filters__option-count {
	color: var(--fanki-color-text-subtle);
	/* xs -> sm, matching the comparison above (pureglamer's own count badge
	   sits at 13px, not this scale's smallest 11px step). */
	font-size: var(--fanki-font-size-sm);
}

.fanki-filters__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
}

.fanki-swatch {
	width: 28px;
	height: 28px;
	border-radius: var(--fanki-radius-full);
	border: 1px solid var(--fanki-color-border);
}

.fanki-filters__price-inputs {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
}

.fanki-filters__clear {
	margin-top: var(--fanki-space-4);
	display: inline-block;
	color: var(--fanki-color-primary);
	font-size: var(--fanki-font-size-sm);
	text-decoration: underline;
}

/* Caps the category checkbox list so a store with many categories doesn't
   grow the sticky sidebar panel taller than the viewport with no way to
   scroll it independently. */
.fanki-filters__scroll {
	max-height: 260px;
	overflow-y: auto;
	padding-right: var(--fanki-space-1);
}

/* ---------- Shop filter panel (inc/woocommerce/wc-shop-filters.php) ----------
   One real <form method="get"> combining Search/Category/Price/On-Sale,
   submitted to the plain Shop URL, matching pureglamer.com's own filter
   form's behavior. On desktop this renders inline as a plain block inside
   .fanki-filters (no special positioning); below 1024px it becomes a
   slide-out panel behind a "Filters" toggle (assets/js/shop-filters.js
   only handles the open/close interaction — Apply/Reset work with zero JS,
   same as the reference site's own form). */

.fanki-shop-filter__toggle {
	display: none;
	align-items: center;
	gap: var(--fanki-space-2);
	width: 100%;
	padding: var(--fanki-space-3) var(--fanki-space-4);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	background: var(--fanki-color-bg);
	font-size: var(--fanki-font-size-base);
	font-weight: var(--fanki-font-weight-semibold);
	color: var(--fanki-color-text);
	transition: border-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

.fanki-shop-filter__toggle:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.fanki-shop-filter__toggle:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

.fanki-shop-filter__backdrop[hidden] {
	display: none;
}

.fanki-shop-filter__panel-header {
	display: none;
}

.fanki-shop-filter__price-grid {
	display: flex;
	align-items: flex-end;
	gap: var(--fanki-space-3);
}

.fanki-shop-filter__price-field {
	flex: 1;
}

.fanki-shop-filter__price-field label {
	display: block;
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin-bottom: var(--fanki-space-1);
}

.fanki-shop-filter__price-input {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-1);
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
}

.fanki-shop-filter__price-input span {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
}

.fanki-shop-filter__price-input input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text);
}

.fanki-shop-filter__price-input input:focus {
	outline: none;
}

/* The input itself suppresses its own default focus outline above, so the
   wrapper needs to carry a visible focus indicator instead — same pattern
   already used for .fanki-search:focus-within (base.css). Previously
   missing here entirely: a keyboard user tabbing into Min/Max got no
   visible focus state at all. */
.fanki-shop-filter__price-input:focus-within {
	border-color: var(--fanki-color-primary);
}

.fanki-shop-filter__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fanki-space-2);
	margin-top: var(--fanki-space-5);
	padding-top: var(--fanki-space-5);
	border-top: 1px solid var(--fanki-color-border);
}

.fanki-shop-filter__apply {
	width: 100%;
	/* Bold weight kept distinct from the shared button size (this and
	   Filter by Price's own button below both intentionally read bold,
	   as the panel's primary "run the filter" actions), but font-size now
	   comes from the same unified --fanki-button-font-size token as every
	   other button site-wide (2026-08-30) rather than its own override. */
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-font-weight-bold);
}

@media (max-width: 1024px) {
	.fanki-shop-filter__toggle {
		display: flex;
	}

	.fanki-shop-filter__backdrop:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: var(--fanki-z-overlay);
		background: var(--fanki-overlay-dark-medium);
	}

	.fanki-shop-filter__panel {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(340px, 88vw);
		z-index: var(--fanki-z-modal);
		background: var(--fanki-color-bg);
		padding: var(--fanki-space-5);
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform var(--fanki-transition-base);
	}

	.fanki-shop-filter.is-open .fanki-shop-filter__panel {
		transform: translateX(0);
	}

	.fanki-shop-filter__panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--fanki-space-5);
	}

	.fanki-shop-filter__panel-header h3 {
		font-size: var(--fanki-font-size-lg);
	}

	.fanki-shop-filter__close {
		width: 32px;
		height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--fanki-color-surface);
		border: 0;
		border-radius: var(--fanki-radius-full);
		color: inherit;
		transition: background-color var(--fanki-transition-fast);
	}

	.fanki-shop-filter__close:hover {
		background: var(--fanki-color-surface-alt);
	}

	.fanki-shop-filter__close:focus-visible {
		outline: 2px solid var(--fanki-color-primary);
		outline-offset: 2px;
	}

	body.fanki-shop-filter-open {
		overflow: hidden;
	}
}

/* WooCommerce's real filter widgets (Filter by Price, Filter by Attribute,
   Filter by Rating) — un-overridden, dropped into the "Shop Sidebar" area
   via dynamic_sidebar() (archive-product.php), each one already wrapped in
   .fanki-filters__group / .fanki-filters__title by inc/setup.php's
   register_sidebar() args. This re-skins their real output classes; the
   .fanki-filters__option/swatches/price-inputs/clear rules above are for a
   possible future custom filter UI and aren't produced by these widgets. */

/* Filter by Price */

.price_slider_wrapper {
	margin-top: var(--fanki-space-2);
}

.price_slider {
	position: relative;
	height: 4px;
	margin-bottom: var(--fanki-space-5);
	background: var(--fanki-color-border);
	border-radius: var(--fanki-radius-full);
}

.price_slider .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--fanki-color-primary);
	border-radius: var(--fanki-radius-full);
}

.price_slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	transform: translateY(-50%);
	background: var(--fanki-color-surface);
	border: 2px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-full);
	cursor: pointer;
	outline: none;
}

.price_slider .ui-slider-handle:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

.price_slider_amount {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	flex-wrap: wrap;
}

.price_slider_amount input#min_price,
.price_slider_amount input#max_price {
	width: 72px;
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	font-size: var(--fanki-font-size-sm);
	background: none;
}

.price_slider_amount .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-2) var(--fanki-space-4);
	/* Bold weight kept (matches the pureglamer.com comparison this was
	   originally tuned against); font-size now comes from the same
	   unified --fanki-button-font-size token as every other button
	   site-wide (2026-08-30) rather than its own override. */
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-font-weight-bold);
	border: 1px solid var(--fanki-color-border);
	/* --fanki-button-radius, not a hardcoded -radius-md, so Corner Style
	   reaches this button too (2026-08-19 button-style chronology audit). */
	border-radius: var(--fanki-button-radius);
	color: var(--fanki-color-text);
}

.price_slider_amount .button:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.price_slider_amount .price_label {
	width: 100%;
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
}

/* Filter by Attribute (layered nav) */

.woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-sm);
	padding-block: var(--fanki-space-1);
}

.woocommerce-widget-layered-nav-list__item a,
.woocommerce-widget-layered-nav-list__item span:not(.count) {
	color: var(--fanki-color-text);
}

.woocommerce-widget-layered-nav-list__item a:hover {
	color: var(--fanki-color-primary);
}

.woocommerce-widget-layered-nav-list__item--chosen a {
	color: var(--fanki-color-primary);
	font-weight: var(--fanki-font-weight-semibold);
}

.woocommerce-widget-layered-nav-list .count {
	color: var(--fanki-color-text-subtle);
	font-size: var(--fanki-font-size-xs);
}

.woocommerce-widget-layered-nav-dropdown select {
	width: 100%;
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	font-size: var(--fanki-font-size-sm);
	background: none;
}

/* Filter by Rating (.star-rating itself already styled in base.css) */

.widget_rating_filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget_rating_filter li {
	padding-block: var(--fanki-space-1);
}

.widget_rating_filter li a {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text);
}

.widget_rating_filter li a:hover {
	color: var(--fanki-color-primary);
}

.widget_rating_filter li.chosen a {
	color: var(--fanki-color-primary);
	font-weight: var(--fanki-font-weight-semibold);
}

/* Product Categories — real WC_Widget_Product_Categories output
   (includes/widgets/class-wc-widget-product-categories.php: a plain
   wp_list_categories() call wrapped in <ul class="product-categories">,
   same core cat-item/current-cat/children markup as any other taxonomy
   list). Added as one of this theme's new default shop-sidebar widgets
   (wc-shop-sidebar-defaults.php) — never had CSS before since nothing
   populated the sidebar with it until now. */

ul.product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.product-categories li {
	padding-block: var(--fanki-space-1);
}

ul.product-categories .children {
	list-style: none;
	margin: var(--fanki-space-1) 0 0 var(--fanki-space-4);
	padding: 0;
}

ul.product-categories a {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text);
}

ul.product-categories a:hover {
	color: var(--fanki-color-primary);
}

ul.product-categories li.current-cat > a {
	color: var(--fanki-color-primary);
	font-weight: var(--fanki-font-weight-semibold);
}

/* Product Search — real get_product_search_form() output
   (woocommerce/templates/product-searchform.php): form.woocommerce-
   product-search > input.search-field + button[type=submit]. Styled
   from the same tokens as .fanki-input/.fanki-btn rather than a bespoke
   look, per this theme's "one look, one focus style, everywhere" rule —
   just applied directly to WC's real classes instead of aliasing them
   onto .fanki-input, since this form only ever renders in this one
   narrow sidebar context. */

.woocommerce-product-search {
	display: flex;
	gap: var(--fanki-space-2);
}

.woocommerce-product-search .search-field {
	flex: 1;
	min-width: 0;
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	font-size: var(--fanki-font-size-sm);
	background: var(--fanki-color-bg);
	color: var(--fanki-color-text);
}

.woocommerce-product-search .search-field:focus {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 1px;
	border-color: var(--fanki-color-primary);
}

.woocommerce-product-search button[type="submit"] {
	flex-shrink: 0;
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	background: var(--fanki-color-surface);
	color: var(--fanki-color-text);
	font-size: var(--fanki-font-size-sm);
	cursor: pointer;
}

.woocommerce-product-search button[type="submit"]:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.fanki-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	margin-bottom: var(--fanki-space-5);
	flex-wrap: wrap;
}

.fanki-toolbar__count {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
}

.fanki-toolbar__controls {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
}

.fanki-view-toggle {
	display: inline-flex;
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
}

.fanki-view-toggle button {
	width: 36px;
	height: 36px;
	background: var(--fanki-color-bg);
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fanki-view-toggle button[aria-pressed="true"] {
	background: var(--fanki-color-surface-alt);
}

.fanki-shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fanki-space-5);
}

/* Real WooCommerce output: ul.products (grid rules in base.css) narrowed to
   3 columns inside the shop layout, matching .fanki-shop-grid above. */

.fanki-shop-layout ul.products {
	grid-template-columns: repeat(3, 1fr);
}

/* woocommerce_result_count() / woocommerce_catalog_ordering() real markup,
   restyled to match .fanki-toolbar__count / .fanki-select. */

.woocommerce-result-count {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
	margin: 0;
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select.orderby {
	width: auto;
	padding: var(--fanki-space-3) var(--fanki-space-4);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	background: var(--fanki-color-bg);
	font-size: var(--fanki-font-size-sm);
}

.woocommerce-ordering select.orderby:focus {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 1px;
	border-color: var(--fanki-color-primary);
}

.fanki-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
	margin-bottom: var(--fanki-space-5);
}

.fanki-active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--fanki-space-2);
	padding: var(--fanki-space-1) var(--fanki-space-3);
	border-radius: var(--fanki-radius-full);
	background: var(--fanki-color-surface-alt);
	color: var(--fanki-color-text);
	font-size: var(--fanki-font-size-xs);
	transition: background-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

.fanki-active-filter-chip svg {
	flex-shrink: 0;
}

.fanki-active-filter-chip:hover {
	background: var(--fanki-color-primary-light);
	color: var(--fanki-color-primary);
}

.fanki-active-filter-chip:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

.fanki-active-filters__clear-all {
	display: inline-flex;
	align-items: center;
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-primary);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.fanki-shop-layout {
		grid-template-columns: 1fr;
	}

	.fanki-filters {
		position: static;
	}

	.fanki-shop-grid,
	.fanki-shop-layout ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.fanki-shop-grid,
	.fanki-shop-layout ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---------- Load More (AJAX pagination, assets/js/shop-ajax.js) ---------- */
/* WooCommerce's own real pagination (woocommerce_pagination(), rendered via
   the core woocommerce_after_shop_loop hook) is left untouched below this
   button — always visible as a fallback if JS fails, not hidden/replaced. */

.fanki-load-more {
	text-align: center;
	margin-bottom: var(--fanki-space-6);
}

.fanki-load-more[hidden] {
	display: none;
}