/* ==========================================================================
   Termékkatalógus (Fázis 3) — archív layout, szűrő-sidebar, kártya, badge.
   Forrás: easybutor-katalogus.html bundle (pixel-értékek verbatim).
   A globális réteg (ul.products grid, .price, .button, tokenek) a main.css-ben van;
   itt csak az archív-specifikus struktúra és a bundle-kártya finomhangolása.
   Enqueue: inc/enqueue.php (is_shop || is_product_taxonomy), dep: easybutor-main.
   ========================================================================== */

/* --- Archív háttér + felső ritmus (bundle: katalógus fehér, kis felső padding) --
   A .section-wrapper közös (F2) — csak az archívra írjuk felül, hogy a header/
   footer gutter ne csússzon el (csak top/bottom). */
body.post-type-archive-product,
body.tax-product_cat {
	background: #fff;
}

body.post-type-archive-product .section-wrapper,
body.tax-product_cat .section-wrapper {
	padding-top: clamp(26px, 3.4vw, 42px);
	padding-bottom: clamp(52px, 6vw, 84px);
	/* A vízszintes gutter a header/footer/szekciók közös insetjére állítva
	   (nem a globális 20/40/80), hogy a katalógus content minden nézeten
	   egy vonalban fusson a header/footerrel — nem csak széles képernyőn. */
	padding-left: var(--container-inset);
	padding-right: var(--container-inset);
}

/* --- Breadcrumb (WC .woocommerce-breadcrumb) ----------------------------- */
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-faint);
	margin: 0 0 clamp(22px, 3vw, 34px);
}

.woocommerce-breadcrumb .eb-ic {
	width: 16px;
	height: 16px;
	color: #c7bfb1;
}

/* Aktív (utolsó) oldalcím félkövér, sötét — bundle. */
.woocommerce-breadcrumb .eb-bc-crumb:last-child {
	color: #3b372f;
	font-weight: 600;
}

.woocommerce-breadcrumb a {
	color: var(--color-text-faint);
	transition: color var(--transition-fast);
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-text);
}

/* --- 2 oszlopos rács: szűrő + terméklista --------------------------------- */
.eb-catgrid {
	display: grid;
	grid-template-columns: 264px 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 860px) {
	.eb-catgrid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Szűrő oldalsáv
   ========================================================================== */
.eb-catfilter {
	display: flex;
	flex-direction: column;
}

.eb-side {
	position: sticky;
	top: 84px;
	align-self: start;
}

@media (max-width: 860px) {
	.eb-side {
		position: static;
		top: auto;
	}
}

/* Mobil szűrő-toggle (desktopon rejtve) */
.eb-catfilter__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 13px 18px;
	border: 1px solid var(--color-border-alt);
	border-radius: var(--radius-input);
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
}

.eb-catfilter__form {
	display: flex;
	flex-direction: column;
}

.eb-catfilter__group {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.eb-catfilter__legend {
	display: block;
	padding: 0;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-faintest);
}

/* Keresőmező */
.eb-catfilter__search {
	position: relative;
}

.eb-catfilter__search .eb-ic {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: #b4ab9c;
	pointer-events: none;
}

/* A bal padding (42px) az ikon elkerülésére — nagyobb specificitás, mert a
   main.css input[type="search"] (0,0,1,1) egyébként felülírná a sima osztályt. */
.eb-catfilter__search .eb-catfilter__search-input {
	width: 100%;
	padding: 12px 14px 12px 42px;
	border: 1.5px solid var(--color-border-alt);
	border-radius: var(--radius-input);
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	outline: none;
	transition: border-color var(--transition-fast);
}

.eb-catfilter__search .eb-catfilter__search-input:focus {
	border-color: var(--acc);
}

.eb-catfilter__divider {
	height: 1px;
	border: 0;
	background: #eee7da;
	margin: 0 0 20px;
}

/* --- Checkbox (bundle 21px box) ------------------------------------------ */
.eb-catfilter__options {
	display: flex;
	flex-direction: column;
}

.eb-check {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 6px 0;
	cursor: pointer;
}

.eb-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.eb-check__box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border: 1.8px solid #cfc6b6;
	border-radius: 6px;
	background: #fff;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.eb-check__box .eb-ic {
	width: 15px;
	height: 15px;
	color: #fff;
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.eb-check__label {
	font-size: 14.5px;
	color: #4a443b;
}

/* Bejelölt állapot: szerver-oldali (.is-checked) + azonnali (:has) */
.eb-check.is-checked .eb-check__box,
.eb-check:has(input:checked) .eb-check__box {
	background: var(--acc);
	border-color: var(--acc);
}

.eb-check.is-checked .eb-check__box .eb-ic,
.eb-check:has(input:checked) .eb-check__box .eb-ic {
	opacity: 1;
}

.eb-check.is-checked .eb-check__label,
.eb-check:has(input:checked) .eb-check__label {
	color: var(--color-text);
	font-weight: 600;
}

.eb-check input:focus-visible + .eb-check__box {
	outline: 2px solid var(--acc);
	outline-offset: 2px;
}

/* Szűrés / törlés */
.eb-catfilter__submit {
	margin-top: 8px;
}

.eb-catfilter__reset {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	color: var(--acc-deep);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.eb-catfilter__reset:hover {
	color: var(--acc);
}

/* Desktopon, ha a JS aktív (auto-submit), a Szűrés gomb rejtve */
@media (min-width: 861px) {
	.eb-catfilter.eb-js .eb-catfilter__submit {
		display: none;
	}
}

/* Mobil: a form a toggle mögé rejtve, kinyitva jelenik meg */
@media (max-width: 860px) {
	.eb-catfilter__toggle {
		display: flex;
	}

	.eb-catfilter__form {
		display: none;
		margin-top: 16px;
	}

	.eb-catfilter.is-open .eb-catfilter__form {
		display: flex;
	}
}

/* ==========================================================================
   Terméklista fejléc
   ========================================================================== */
.eb-cathead__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(32px, 4.8vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin: 0 0 12px;
	text-wrap: balance;
}

.eb-cathead__lead {
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 48ch;
	margin: 0 0 clamp(24px, 3vw, 32px);
}

/* Kategória SEO-szöveg (term_description) */
.eb-cathead__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
	max-width: 68ch;
	margin: 0 0 clamp(24px, 3vw, 32px);
}

.eb-cathead__desc p {
	margin: 0 0 12px;
}

.eb-cathead__desc :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Eredmény-sáv (találatszám + rendezés)
   ========================================================================== */
.eb-catbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: clamp(18px, 2.4vw, 26px);
	border-bottom: 1px solid #eee7da;
	margin-bottom: clamp(24px, 3vw, 34px);
}

.eb-catbar__count {
	font-size: 14px;
	color: var(--color-text-faint);
}

.eb-catbar__count strong {
	color: var(--color-text);
	font-weight: 700;
}

.eb-catbar__sort {
	display: flex;
	align-items: center;
	gap: 9px;
}

.eb-catbar__sort-label {
	font-size: 13px;
	color: var(--color-text-faint);
}

.eb-catbar__sort-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.eb-sortbtn {
	padding: 9px 14px;
	border: 1px solid #e0d7c8;
	border-radius: 9px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.eb-sortbtn:hover {
	border-color: var(--acc);
	color: var(--acc-deep);
}

.eb-sortbtn.is-active {
	border-color: var(--acc);
	background: var(--acc-soft);
	color: var(--acc-deep);
}

/* ==========================================================================
   Termékkártya (bundle) — a globális ul.products rácsban
   ========================================================================== */
.easybutor-product-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	transition: transform 0.18s ease;
}

.easybutor-product-card__link:hover {
	transform: translateY(-4px);
	color: inherit;
}

.easybutor-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-product-bg);
}

/* A termékfotók 1:1-re normalizálva (#F1F0EE háttér), az életképek életképek —
   ezért cover: a sík fotó hézagmentesen kitölti (négyzet a négyzetben = nincs vágás),
   az enteriőr fotó pedig szépen kitölti a boxot. */
.easybutor-product-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	background: none;
	border-radius: 0;
	transition: transform 0.35s ease;
}

.easybutor-product-card__link:hover .easybutor-product-card__media img {
	transform: scale(1.06);
}

.easybutor-product-card__info {
	padding: 15px 2px 0;
}

.easybutor-product-card__info .woocommerce-loop-product__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--color-text);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.easybutor-product-card__info .price {
	display: block;
	margin-top: 11px;
}

.easybutor-product-card__info .price .eb-price__suffix {
	color: inherit;
}

/* --- Badge (Akció / Új / Népszerű) --------------------------------------- */
.eb-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
}

.eb-badge--white {
	background: #fff;
	color: var(--color-text);
	box-shadow: var(--shadow-badge);
}

.eb-badge--acc {
	background: var(--acc);
	color: #fff;
	box-shadow: 0 4px 12px var(--acc-sh);
}

/* ==========================================================================
   Üres állapot
   ========================================================================== */
.eb-catempty {
	text-align: center;
	padding: clamp(48px, 7vw, 88px) 20px;
	color: var(--color-text-faint);
}

.eb-catempty .eb-ic {
	width: 44px;
	height: 44px;
	color: #cfc6b6;
}

.eb-catempty__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	color: #3b372f;
	margin: 14px 0 6px;
}

.eb-catempty__text {
	font-size: 14.5px;
	margin: 0 0 20px;
}

.eb-catempty__reset {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* --- Ikon segéd ----------------------------------------------------------- */
.eb-ic {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* --- „Összes típus / címke" clear-elem (link, nem input) — a bundle első pipája -- */
.eb-check--all {
	text-decoration: none;
	color: inherit;
}

/* --- Akciós ár: új ár „-tól" elöl, régi áthúzva (a .price ins/del a main.css-ben) -- */
.easybutor-product-card__info .price ins {
	text-decoration: none;
}

.easybutor-product-card__info .price del {
	margin-left: 2px;
}

/* ==========================================================================
   Mobil eredmény-sáv — ne csorduljon túl (≤600px: oszlopba rendez)
   ========================================================================== */
@media (max-width: 600px) {
	.eb-catbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.eb-catbar__sort {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Konfigurátor CTA sötét sáv (bundle: „Nem találtad a méretet?")
   Teljes szélességben, a .section-wrapper-en kívül renderel (archive-product.php).
   ========================================================================== */
.eb-catcta {
	background: var(--color-dark);
	padding: clamp(44px, 5.5vw, 76px) clamp(16px, 4vw, 56px);
}

.eb-catcta__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.eb-catcta__text {
	max-width: 60ch;
}

.eb-catcta__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 40px);
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 10px;
	text-wrap: balance;
}

.eb-catcta__lead {
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}

.eb-catcta__btn {
	padding: 16px 30px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Lazy load (12-esével) — a paginátor helyett
   ========================================================================== */
.eb-loadmore {
	text-align: center;
	margin-top: clamp(28px, 4vw, 48px);
}

.eb-loadmore__sentinel {
	height: 1px;
}

.eb-loadmore__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 14px 0 0;
	min-height: 1.2em;
	font-size: 14px;
	color: var(--color-text-faint);
}

.eb-loadmore.is-loading .eb-loadmore__status::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid var(--color-border-alt);
	border-top-color: var(--acc);
	border-radius: 50%;
	animation: eb-spin 0.7s linear infinite;
}

@keyframes eb-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.eb-loadmore.is-loading .eb-loadmore__status::before {
		animation: none;
	}
}