/* Vysúvací panel kategórií (13. 11. 2026, návrh podľa vzoru reklamnepredmetysketch.sk) – partials/category-drawer.blade.php.
   Farby webu: oranžová #fc8801 / #e57a00, text #1d1d1d / #3b3b3b / #6b6b6b, svetlý podklad zoznamu #f5f5f3, zaoblenie var(--radius). */

/* ---------- Tlačidlo „☰ Produkty“ ---------- */
.header-logo-with-menu { display: flex; align-items: center; gap: 22px; }
.cat-open-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius);
	background: #1d1d1d;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.cat-open-btn svg { width: 20px; height: 20px; }
.cat-open-btn:hover { background: #000; }
.cat-open-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* mobil: tlačidlo vedľa vyhľadávania */
.container:has(> .cat-open-mobile) { display: flex; align-items: center; gap: 8px; }
.container:has(> .cat-open-mobile) > .dropdown_search { flex: 1; min-width: 0; }
/* 13. 11.: oranžové a dlhšie – čierne splývalo s čiernym logom nad ním */
.cat-open-mobile {
	flex: none;
	min-width: 128px;
	height: 46px;
	padding: 0 18px;
	justify-content: center;
	background: #f08a24;
	font-size: 16px;
	box-shadow: 0 6px 14px rgba(240, 138, 36, .28);
}
.cat-open-mobile:hover, .cat-open-mobile:focus-visible { background: #e57a00; }
.cat-open-mobile:focus-visible { outline-color: #1d1d1d; }

/* ---------- Panel ---------- */
html.cat-drawer-open { overflow: hidden; }
.cat-drawer[hidden] { display: none; }
.cat-drawer { position: fixed; inset: 0; z-index: 10050; }
.cat-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(29, 29, 29, .5);
	animation: cat-fade .2s ease;
}
.cat-drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	width: min(1320px, calc(100vw - 100px));
	background: #fff;
	box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
	animation: cat-slide .24s ease;
}
@keyframes cat-fade { from { opacity: 0; } }
@keyframes cat-slide { from { transform: translateX(-24px); opacity: 0; } }

/* ľavý stĺpec – hlavné kategórie */
.cat-drawer-list {
	flex: 0 0 380px;
	overflow-y: auto;
	background: #f5f5f3;
	border-right: 1px solid #ebebe8;
}
.cat-drawer-title { margin: 0; padding: 22px 24px 10px; color: #6b6b6b; font-size: 14px; }
.cat-drawer-list ul { margin: 0; padding: 0 0 20px; list-style: none; }
.cat-l1 {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px 12px 24px;
	border-bottom: 1px solid #ebebe8;
	color: #1d1d1d;
	font-size: 16px;
	line-height: 1.3;
}
.cat-l1:hover, .cat-l1.is-active { background: #fff; color: #1d1d1d; }
.cat-l1.is-active { font-weight: 600; box-shadow: inset 3px 0 0 #fc8801; }
.cat-l1-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cat-l1-img img { width: 38px; height: 38px; object-fit: contain; }
.cat-l1-name { flex: 1; }
.cat-l1-arrow { flex: none; width: 18px; height: 18px; color: #8a8a8a; }

/* pravá časť – podkategórie vybranej kategórie */
.cat-drawer-detail { flex: 1; min-width: 0; overflow-y: auto; }
.cat-panel { padding: 26px 40px 40px; }
.cat-panel[hidden] { display: none; }
.cat-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 56px 22px 0; }
.cat-panel-title { margin: 0; color: #1d1d1d; font-size: 26px; font-weight: 600; line-height: 1.2; }
.cat-all { display: inline-flex; align-items: center; gap: 4px; color: #c86a0a; font-size: 15px; font-weight: 600; white-space: nowrap; }
.cat-all svg { width: 16px; height: 16px; }
.cat-all:hover { color: #fc8801; }
.cat-back { display: none; }
.cat-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 30px;
}
.cat-group-head { display: flex; align-items: center; gap: 12px; color: #1d1d1d; font-size: 16px; font-weight: 600; line-height: 1.3; }
.cat-group-head:hover { color: #e57a00; }
.cat-group-img {
	display: inline-flex;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: #fff;
	border: 1px solid #f0f0f0;
	overflow: hidden;
}
.cat-group-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-subs { margin: 8px 0 0 60px; padding: 0; list-style: none; }
.cat-subs li { margin: 0 0 5px; }
.cat-subs a { color: #3b3b3b; font-size: 15px; line-height: 1.35; }
.cat-subs a:hover { color: #e57a00; }
.cat-drawer-close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #f5f5f3;
	color: #1d1d1d;
	cursor: pointer;
}
.cat-drawer-close:hover { background: #ebebe8; }
.cat-drawer-close svg { width: 20px; height: 20px; }
.cat-drawer a:focus-visible, .cat-drawer button:focus-visible { outline: 2px solid #fc8801; outline-offset: 2px; }

@media (max-width: 1199.98px) {
	.cat-drawer-list { flex-basis: 320px; }
	.cat-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobil / tablet: jeden stĺpec, podkategórie po kliknutí s „Späť“ ---------- */
@media (max-width: 991.98px) {
	.cat-drawer-panel { width: min(480px, 100vw); }
	.cat-drawer-list { flex: 1 1 100%; border-right: 0; }
	.cat-drawer-detail { display: none; }
	.cat-drawer.is-sub .cat-drawer-list { display: none; }
	.cat-drawer.is-sub .cat-drawer-detail { display: block; flex: 1 1 100%; }
	.cat-panel { padding: 18px 18px 30px; }
	.cat-panel-head { flex-wrap: wrap; margin: 0 0 18px; }
	.cat-back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		flex: 1 1 100%;
		margin: 0 0 6px;
		padding: 6px 0;
		border: 0;
		background: none;
		color: #3b3b3b;
		font-size: 15px;
		cursor: pointer;
	}
	.cat-back svg { width: 18px; height: 18px; }
	.cat-panel-title { font-size: 22px; }
	.cat-groups { grid-template-columns: 1fr; gap: 18px; }
	.cat-drawer-close { top: 12px; right: 12px; }
	.cat-drawer-title { padding-right: 70px; }
}
@media (prefers-reduced-motion: reduce) {
	.cat-drawer-backdrop, .cat-drawer-panel { animation: none; }
}