/**
 * Ünlü Boya – Ürün listeleme sol kategori ağacı (sidebar).
 * Marka rengi = Woodmart --wd-primary-color (rgb(73,51,209)).
 * Yalnızca stabil sınıflar hedeflenir → güncelleme güvenli.
 */

.ub-cat-layout {
	--ubc-accent: var(--wd-primary-color, #4933d1);
	--ubc-accent-soft: rgba(73, 51, 209, .08);
	--ubc-accent-softer: rgba(73, 51, 209, .05);
	--ubc-ink: #1f2328;
	--ubc-muted: #6b7280;
	--ubc-faint: #9aa1ab;
	--ubc-border: #e9ebf0;
	--ubc-soft: #f5f6f8;
	--ubc-card: #ffffff;
	--ubc-sidebar-w: 288px;
	--ubc-gap: 32px;

	display: flex;
	align-items: flex-start;
	gap: var(--ubc-gap);
	width: 100%;
}

/* İçerik sütunu (Woodmart) — kalan alanı doldursun, taşmasın. */
.ub-cat-layout > .wd-content-area {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	max-width: 100%;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.ub-cat-sidebar {
	flex: 0 0 var(--ubc-sidebar-w);
	width: var(--ubc-sidebar-w);
	position: sticky;
	top: 24px;
	align-self: flex-start;
}

/* Tema `button` stillerinin ikon düğmelerimizi kutu gibi göstermesini engelle. */
.ub-cat-sidebar button {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	font-family: inherit;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
}

.ub-cat-panel {
	border: 1px solid var(--ubc-border);
	border-radius: 16px;
	background: var(--ubc-card);
	padding: 8px;
	box-shadow: 0 6px 24px rgba(16, 24, 40, .05);
}

.ub-cat-heading {
	margin: 6px 8px 10px;
	padding: 8px 8px 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ubc-ink);
	border-bottom: 1px solid var(--ubc-border);
	line-height: 1.2;
}

/* Mobil panel aç/kapa düğmesi — masaüstünde gizli. */
.ub-cat-panel-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--ubc-border);
	border-radius: 12px;
	background: var(--ubc-card);
	color: var(--ubc-ink);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.ub-cat-panel-toggle .ub-cat-chevron {
	transition: transform .25s ease;
	flex: 0 0 auto;
}

.ub-cat-panel-toggle[aria-expanded="true"] .ub-cat-chevron {
	transform: rotate(180deg);
}

/* ============================================================
   AĞAÇ
   ============================================================ */
.ub-cat-tree,
.ub-cat-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-cat-item {
	position: relative;
}

/* Satır: link + ok */
.ub-cat-row {
	display: flex;
	align-items: stretch;
	border-radius: 10px;
	transition: background-color .18s ease;
}

.ub-cat-item.is-active > .ub-cat-row,
.ub-cat-row:hover {
	background: var(--ubc-accent-softer);
}

.ub-cat-link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 10px 10px 10px 12px;
	color: var(--ubc-ink);
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
	text-decoration: none;
	transition: color .18s ease;
}

.ub-cat-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ub-cat-link:hover {
	color: var(--ubc-accent);
}

/* 1. seviye (ana gruplar) — belirgin, marka rengine yakın koyu */
.ub-cat-level-0 > .ub-cat-row > .ub-cat-link {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ubc-ink);
	letter-spacing: -.005em;
}

/* Aktif izdeki 1. seviye başlık — marka rengi */
.ub-cat-level-0.in-trail > .ub-cat-row > .ub-cat-link {
	color: var(--ubc-accent);
}

/* Aktif (görüntülenen) kategori — güçlü vurgu */
.ub-cat-item.is-active > .ub-cat-row > .ub-cat-link {
	color: var(--ubc-accent);
	font-weight: 700;
}

.ub-cat-item.is-active > .ub-cat-row {
	background: var(--ubc-accent-soft);
	box-shadow: inset 3px 0 0 var(--ubc-accent);
}

/* Ok düğmesi — yalın aşağı-ok ikonu (arka plan/çip yok) */
.ub-cat-toggle {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 6px 0 2px;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--ubc-muted);
	cursor: pointer;
	transition: color .18s ease;
}

.ub-cat-toggle:hover {
	color: var(--ubc-accent);
	background: transparent !important;
}

/* Chevron'u tema `svg{fill:currentColor}` kuralına rağmen ÇİZGİ (stroke)
   olarak render ettir; boyutu ve rengini sabitle. */
.ub-cat-chevron {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 auto;
	overflow: visible;
	fill: none !important;
	stroke: currentColor !important;
	color: inherit;
	transition: transform .28s ease;
}

.ub-cat-chevron path {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2.4 !important;
}

.ub-cat-item.is-open > .ub-cat-row > .ub-cat-toggle .ub-cat-chevron {
	transform: rotate(180deg);
}

.ub-cat-item.is-open > .ub-cat-row > .ub-cat-toggle {
	color: var(--ubc-accent);
}

/* Açılır/kapanır alt liste — grid-rows animasyonu */
.ub-cat-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s ease;
}

.ub-cat-item.is-open > .ub-cat-sub {
	grid-template-rows: 1fr;
}

.ub-cat-sub > .ub-cat-sublist {
	overflow: hidden;
	min-height: 0;
}

/* Girinti + alt seviye çizgisi */
.ub-cat-sublist {
	margin-left: 12px;
	padding-left: 10px;
	border-left: 1px solid var(--ubc-border);
}

.ub-cat-sublist .ub-cat-link {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ubc-muted);
	padding-top: 8px;
	padding-bottom: 8px;
}

.ub-cat-sublist .ub-cat-item.is-active > .ub-cat-row > .ub-cat-link,
.ub-cat-sublist .ub-cat-link:hover {
	color: var(--ubc-accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ub-cat-sub,
	.ub-cat-chevron,
	.ub-cat-row {
		transition: none;
	}
}

/* ============================================================
   DUYARLI (responsive)
   ============================================================ */
@media (max-width: 1024px) {
	.ub-cat-layout {
		--ubc-sidebar-w: 250px;
		--ubc-gap: 22px;
	}
}

/* Tablet ve altı: sidebar üstte, açılır panel */
@media (max-width: 768.98px) {
	.ub-cat-layout {
		display: block;
	}

	.ub-cat-sidebar {
		width: 100%;
		flex: none;
		position: static;
		margin-bottom: 20px;
	}

	.ub-cat-panel-toggle {
		display: flex;
	}

	.ub-cat-panel {
		display: none;
		margin-top: 8px;
	}

	.ub-cat-sidebar.is-panel-open .ub-cat-panel {
		display: block;
	}

	/* Mobilde başlık düğmesi zaten var → panel içi başlığı gizle */
	.ub-cat-panel .ub-cat-heading {
		display: none;
	}
}

/* ============================================================
   TEMA ARŞİV SIDEBAR'INI GİZLE
   Woodmart mağaza arşivi (Elementor layout) kendi sol sütununda
   "Kategoriler + Fiyata Göre Listele" widget'larını gösterir.
   Kendi sol kategori ağacımız onun yerini aldığı için o sütunu
   (ve ona bağlı "Filtrele" off-canvas düğmesini) gizleyip ürün
   sütununu tam genişliğe çıkarıyoruz. Stabil Woodmart sınıfları
   hedeflenir (hash'li Elementor ID'lerine bağımlı değil).
   ============================================================ */
.wd-content-area .wd-col-offcanvas-sm,
.wd-content-area .elementor-widget-wd_sidebar,
.wd-content-area .elementor-widget-wd_builder_off_canvas_column_btn {
	display: none !important;
}

.wd-content-area .wd-col-content-sm {
	-webkit-box-flex: 1 !important;
	-ms-flex: 0 0 100% !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}