/* ==========================================================================
   Tarhee — category.css
   Product category page: header, filters, grid, pagination, description.
   Loaded only on category pages that use the theme layout.
   ========================================================================== */

.tarhee-cat {
	padding-block: 8px 24px;
	--cat-cols: 4;
	--cat-cols-t: 3;
	--cat-cols-m: 2;
}

/* ---------- Header ---------- */
.tarhee-cat__header { padding: 20px 0 8px; }

.tarhee-cat__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 1.7rem;
	font-weight: var(--fw-heading);
	line-height: 1.5;
	color: var(--navy);
}
.tarhee-cat__title::before {
	content: '';
	flex: none;
	width: 6px;
	height: 28px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--gold), var(--gold-light));
}

/* Sub-categories */
.tarhee-cat__subcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	list-style: none;
}
.tarhee-cat__subcats a {
	display: inline-block;
	padding: 6px 16px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: .86rem;
	font-weight: var(--fw-label);
	transition: border-color .2s, background-color .2s;
}
.tarhee-cat__subcats a:hover,
.tarhee-cat__subcats a:focus-visible {
	border-color: var(--gold);
	background: var(--gold-soft);
}

/* ---------- Bar (filters button + result count) ---------- */
.tarhee-cat__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 16px;
}
.tarhee-cat__bar:empty { display: none; }
.tarhee-cat__count .woocommerce-result-count { margin: 0; font-size: .86rem; color: var(--muted); }
.tarhee-cat__filters-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-weight: var(--fw-strong);
	transition: border-color .2s, background-color .2s;
}
.tarhee-cat__filters-toggle:hover,
.tarhee-cat__filters-toggle:focus-visible,
.tarhee-cat__filters-toggle[aria-expanded='true'] {
	border-color: var(--gold);
	background: var(--gold-soft);
}

/* ---------- Layout ---------- */
.tarhee-cat__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.tarhee-cat__products { min-width: 0; }
.tarhee-cat__products.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* ---------- Filters ---------- */
.tarhee-filters {
	display: none;
	padding: 20px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.tarhee-filters.is-open { display: block; }
.tarhee-filters__form { display: flex; flex-direction: column; gap: 18px; }
.tarhee-filters__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.tarhee-filters__label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-size: .92rem;
	font-weight: var(--fw-heading);
	color: var(--navy);
}
.tarhee-filters select,
.tarhee-filters input[type='number'] { width: 100%; min-height: 42px; }
.tarhee-filters__price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tarhee-filters__checks { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.tarhee-filters__check { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.tarhee-filters__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.tarhee-filters__actions { display: flex; align-items: center; gap: 12px; }
.tarhee-filters__apply {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 20px;
	background: var(--cta);
	border: 0;
	border-radius: var(--radius-sm);
	color: #fff;
	font-weight: var(--fw-strong);
	transition: transform .25s var(--ease), background-color .25s;
}
.tarhee-filters__apply:hover,
.tarhee-filters__apply:focus-visible { background: var(--cta-2); transform: translateY(-1px); }
.tarhee-filters__reset { font-size: .86rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tarhee-filters__reset:hover { color: var(--gold-dark); }

/* ---------- Product grid (cards come from woocommerce.css) ---------- */
.tarhee-cat ul.products {
	grid-template-columns: repeat(var(--cat-cols-m), minmax(0, 1fr));
	gap: 14px;
}
.tarhee-cat ul.products::before,
.tarhee-cat ul.products::after { display: none; }

/* ---------- Pagination ---------- */
.tarhee-cat .woocommerce-pagination { margin-top: 28px; }
.tarhee-cat .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	list-style: none;
}
.tarhee-cat .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; float: none; }

/* ---------- Description ---------- */
.tarhee-cat__desc {
	margin-top: 32px;
	padding: 22px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.tarhee-cat__header .tarhee-cat__desc { margin-top: 8px; }
.tarhee-cat__desc-body { position: relative; line-height: 1.9; overflow-wrap: anywhere; }
.tarhee-cat__desc-body > :first-child { margin-top: 0; }
.tarhee-cat__desc-body > :last-child { margin-bottom: 0; }
.tarhee-cat__desc-body h2,
.tarhee-cat__desc-body h3 { margin: 1.2em 0 .5em; line-height: 1.5; color: var(--navy); }
.tarhee-cat__desc-body img { max-width: 100%; height: auto; }
.tarhee-cat__desc-body table { display: block; max-width: 100%; overflow-x: auto; }
.tarhee-cat__desc.is-collapsed .tarhee-cat__desc-body { max-height: var(--cat-desc-h, 140px); overflow: hidden; }
.tarhee-cat__desc.is-collapsed .tarhee-cat__desc-body::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 56px;
	background: linear-gradient(to bottom, transparent, var(--card));
	pointer-events: none;
}
.tarhee-cat__desc-toggle {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	padding: 8px 20px;
	background: var(--card);
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--gold-dark);
	font-size: .86rem;
	font-weight: var(--fw-strong);
	transition: background-color .2s, color .2s;
}
.tarhee-cat__desc-toggle:hover,
.tarhee-cat__desc-toggle:focus-visible { background: var(--gold); color: var(--navy); }

/* "Characters" mode: the whole text is in the HTML; the part after the limit is hidden while collapsed. */
.tarhee-cat__ellipsis { display: none; }
.tarhee-cat__desc.is-collapsed .tarhee-cat__ellipsis { display: inline; }
.tarhee-cat__desc.is-chars.is-collapsed .tarhee-cat__more { display: none; }
.tarhee-cat__desc.is-chars .tarhee-cat__desc-body { max-height: none; overflow: visible; }
.tarhee-cat__desc.is-chars .tarhee-cat__desc-body::after { content: none; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
	.tarhee-cat ul.products { grid-template-columns: repeat(var(--cat-cols-t), minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1024px) {
	.tarhee-cat ul.products { grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr)); gap: 20px; }
	.tarhee-cat__title { font-size: 1.9rem; }

	/* Sidebar layout: filters always visible on desktop. */
	.tarhee-cat__layout--sidebar { grid-template-columns: 280px minmax(0, 1fr); }
	.tarhee-cat__layout--sidebar .tarhee-filters {
		position: sticky;
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h) + 24px);
		display: block;
	}
	.tarhee-cat__bar .tarhee-cat__filters-toggle { display: none; }

	/* Top layout: filters as a horizontal panel above the products. */
	.tarhee-cat__layout--top { grid-template-columns: minmax(0, 1fr); }
	.tarhee-cat__layout--top .tarhee-filters { display: block; }
	.tarhee-cat__layout--top .tarhee-filters__form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 18px 24px; }
	.tarhee-cat__layout--top .tarhee-filters__group { flex: 0 1 220px; }
	.tarhee-cat__layout--top .tarhee-filters__actions { flex: 0 0 auto; }
}

@media (max-width: 560px) {
	.tarhee-cat__title { font-size: 1.35rem; }
	.tarhee-cat__desc { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tarhee-cat__subcats a,
	.tarhee-filters__apply,
	.tarhee-cat__desc-toggle { transition: none; }
	.tarhee-filters__apply:hover { transform: none; }
}