/* =================================================================
   File:    13-archive.css
   Purpose: Shop / category / brand archive — layout, filter sidebar
            (separate glass blocks + Amazon-style step-in category
            drill-down), toolbar, pagination.

   Sidebar width + sticky behaviour come from Theme Options → Shop:
   the layout div carries `--shop-sidebar-w` inline and an optional
   `.liqui-archive__layout--sticky` modifier.
   ================================================================= */

/* Archive content sits close to the header — trims the dead space up top.
   `.liqui-section--archive` is added by liqui_woo_wrapper_start() on shop /
   category / brand pages only, so other pages keep their normal rhythm. */
.liqui-section--archive { padding-top: var(--space-5); }

/* Archive banner — only renders when the title option is enabled. */
.liqui-archive__banner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

/* ---- Layout: sidebar + main grid ---- */
.liqui-archive__layout {
	display: grid;
	grid-template-columns: var(--shop-sidebar-w, 320px) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: start;
}
@media (max-width: 1024px) {
	.liqui-archive__layout { grid-template-columns: 1fr; }
}

/* ---- Sidebar: a column of separate glass blocks ---- */
.liqui-archive__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
/* Sticky is opt-in (Theme Options → Shop). Default: scrolls with the page. */
.liqui-archive__layout--sticky .liqui-archive__sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 1024px) {
	/* Mobile: the sidebar becomes a slide-in drawer. */
	.liqui-archive__sidebar,
	.liqui-archive__layout--sticky .liqui-archive__sidebar {
		position: fixed;
		top: 0; bottom: 0;
		inset-inline-end: 0;
		width: min(360px, 90vw);
		z-index: var(--z-drawer);
		padding: var(--space-4);
		overflow-y: auto;
		background: #fff;
		box-shadow: -12px 0 40px -12px rgba(15, 23, 42, 0.25);
		transform: translateX(100%);
		transition: transform var(--dur-slow) var(--ease-out);
	}
	[dir="rtl"] .liqui-archive__sidebar {
		inset-inline-start: 0;
		inset-inline-end: auto;
		transform: translateX(-100%);
	}
	.liqui-archive__sidebar.is-open { transform: translateX(0); }
}

.liqui-archive__sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* The "Filter" header is only needed for the mobile drawer. */
@media (min-width: 1025px) {
	.liqui-archive__sidebar-header { display: none; }
}

/* ---- Filter blocks (glass) ---- */
.liqui-filter-block {
	padding: var(--space-4);
}
.liqui-filter-block__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-ink-muted);
}

/* ---- Categories — step-in drill-down ---- */
.liqui-cat-nav { display: flex; flex-direction: column; }
.liqui-cat-nav__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-bottom: var(--space-2);
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-accent);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease);
}
.liqui-cat-nav__back:hover { background: color-mix(in oklab, var(--c-accent) 9%, transparent); }
[dir="rtl"] .liqui-cat-nav__back svg { transform: scaleX(-1); }
/* "All {category}" — a distinct blue block under the sub-category list. */
.liqui-cat-nav__current {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-3);
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: var(--c-accent);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	text-decoration: none;
	transition: filter var(--dur-fast) var(--ease);
}
.liqui-cat-nav__current:hover { filter: brightness(1.08); color: #fff; }
.liqui-cat-nav__current svg { flex-shrink: 0; }
.liqui-cat-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.liqui-cat-nav__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	color: var(--c-ink);
	text-decoration: none;
	font-size: var(--fs-sm);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.liqui-cat-nav__item:hover {
	background: var(--c-surface-2);
	color: var(--c-accent);
}
.liqui-cat-nav__name { flex: 1; min-width: 0; }
.liqui-cat-nav__count { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.liqui-cat-nav__chevron {
	flex-shrink: 0;
	color: var(--c-ink-soft);
	transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.liqui-cat-nav__item:hover .liqui-cat-nav__chevron { transform: translateX(2px); color: var(--c-accent); }
[dir="rtl"] .liqui-cat-nav__chevron { transform: scaleX(-1); }
[dir="rtl"] .liqui-cat-nav__item:hover .liqui-cat-nav__chevron { transform: scaleX(-1) translateX(2px); }
.liqui-cat-nav__empty { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* ---- Filter form (search + brands + availability) ---- */
.liqui-archive__filter-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.liqui-archive__filter-form .liqui-field { display: flex; flex-direction: column; gap: 6px; }

/* Checkbox rows — shared by the brand + availability filters */
.liqui-filter-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.liqui-check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.liqui-check:hover { background: var(--c-surface-2); }
.liqui-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--c-accent);
	cursor: pointer;
}
.liqui-check__label { flex: 1; min-width: 0; }
.liqui-check__count { font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* Apply / clear actions */
.liqui-filter-actions { display: flex; flex-direction: column; gap: 8px; }
.liqui-filter-clear {
	align-self: center;
	font-size: var(--fs-xs);
	color: var(--c-ink-muted);
	text-decoration: underline;
}
.liqui-filter-clear:hover { color: var(--c-accent); }

/* ---- Trade-account CTA block ---- */
.liqui-filter-trade { text-align: center; }
.liqui-filter-trade__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-2);
	border-radius: 50%;
	background: color-mix(in oklab, var(--c-accent) 12%, transparent);
	color: var(--c-accent);
}
.liqui-filter-trade__title {
	margin: 0 0 4px;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}
.liqui-filter-trade__text {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-sm);
	color: var(--c-ink-muted);
	line-height: 1.45;
}

/* ---- Toolbar ---- */
.liqui-archive__toolbar {
	margin-bottom: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
}
.liqui-archive__toolbar-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}
/* Result count sits on the left; sort + view-toggle clump to the right. */
.liqui-archive__count { margin-inline-end: auto; }
.liqui-archive__sort select {
	padding: 8px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: var(--fs-sm);
}
.liqui-archive__view-toggle {
	display: inline-flex;
	background: var(--c-surface-2);
	border-radius: var(--radius-pill);
	padding: 2px;
}
.liqui-archive__view-toggle .liqui-icon-btn { width: 44px; height: 44px; }
.liqui-archive__view-toggle .liqui-icon-btn.is-active { background: #fff; color: var(--c-accent); }

@media (min-width: 1025px) {
	.liqui-archive__filter-toggle { display: none; }
}
/* Mobile: hide the entire toolbar (result count + sort + view toggle +
   Filters button) per spec. */
@media (max-width: 768px) {
	.liqui-archive__toolbar { display: none; }
}

/* ---- Mobile category menu — collapsible glass bar at the top of the
   grid on phones (the filter sidebar is desktop-only). ---- */
.liqui-mobcat { display: none; }
@media (max-width: 768px) {
	.liqui-mobcat {
		display: block;
		margin-bottom: var(--space-4);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}
}
.liqui-mobcat__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-ink);
}
.liqui-mobcat__bar::-webkit-details-marker { display: none; }
.liqui-mobcat__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.liqui-mobcat__label svg { color: var(--c-accent); flex-shrink: 0; }
.liqui-mobcat__chevron {
	flex-shrink: 0;
	color: var(--c-ink-muted);
	transition: transform var(--dur) var(--ease);
}
.liqui-mobcat[open] .liqui-mobcat__chevron { transform: rotate(180deg); }
.liqui-mobcat__panel {
	padding: var(--space-2) var(--space-3) var(--space-3);
	border-top: 1px solid var(--c-line);
}

/* Active filter chips */
.liqui-archive__chips { margin-top: var(--space-3); }
.liqui-chip {
	gap: 4px;
	font-weight: var(--fw-medium);
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.liqui-chip:hover { background: rgba(217, 69, 69, 0.10); color: var(--c-danger); }

/* Pagination — paginate_links( type=list ) outputs
   <ul.page-numbers><li><a|span class="page-numbers">…</li>, and each page
   number is itself wrapped in an inner <span class="liqui-pagination__num">.
   Style ONLY the direct page items (li > a / li > span) — never the inner
   number span, or you get a pill drawn inside a pill. */
.liqui-pagination {
	margin-top: var(--space-6);
	display: flex;
	justify-content: center;
}
.liqui-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0;
	margin: 0;
}
/* margin:0 — the global `li + li` top-margin (02-typography.css) would
   otherwise push every item after the first DOWN, breaking the row. */
.liqui-pagination li { display: flex; margin: 0; }
.liqui-pagination li > a,
.liqui-pagination li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: var(--glass-bg-strong);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease);
}
.liqui-pagination li > a:hover {
	background: color-mix(in oklab, var(--c-accent) 10%, transparent);
	border-color: var(--c-accent);
	color: var(--c-accent);
}
/* Current page — solid accent fill. */
.liqui-pagination li > span.current {
	background: var(--c-accent);
	border-color: transparent;
	color: #fff;
}
/* Ellipsis — plain text, no pill box. */
.liqui-pagination li > span.dots {
	min-width: 0;
	padding: 0 4px;
	background: transparent;
	border-color: transparent;
	color: var(--c-ink-soft);
}

/* Archive banner sale-flash style */
.liqui-archive__sale-flash {
	color: #fff;
	background: var(--c-accent);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

/* Body lock when the sidebar is open as a drawer */
html.is-filter-open { overflow: hidden; }