/* Shop menu UX: scrollable category sidebar, active-category highlight,
   per-category icons. Loaded after the theme's compiled stylesheet. */

/* ---------------------------------------------------------- 1. sidebar --- */

/* The sidebar sticks next to the products and scrolls on its own, so a long
   category list no longer drags the whole page. */
.woocommerce-container .woocommerce-sidebar {
	position: sticky;
	top: 96px;
	align-self: flex-start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: #e0a68c transparent;
}

.woocommerce-container .woocommerce-sidebar::-webkit-scrollbar {
	width: 6px;
}
.woocommerce-container .woocommerce-sidebar::-webkit-scrollbar-thumb {
	background: #e0a68c;
	border-radius: 3px;
}
.woocommerce-container .woocommerce-sidebar::-webkit-scrollbar-thumb:hover {
	background: #c23c08;
}
.woocommerce-container .woocommerce-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

/* 18 categories under "Jedlo" did not fit the theme's 500px cap. */
.parent-category.open .subcategory-list {
	max-height: 1800px;
}

/* ------------------------------------------------- 2. active highlight --- */

.subcategory-list li a,
.custom-category-list > li > a.category-link {
	transition: color .18s ease, opacity .18s ease;
}

.subcategory-list li a.is-active {
	color: #c23c08;
	font-weight: 800;
}

.subcategory-list li a.is-active::after {
	transform: scale(1.14);
	transform-origin: center;
}

.custom-category-list > li.is-current > a.category-link {
	color: #c23c08;
}

/* A marker on the left edge of the sidebar, so the position reads at a glance. */
.subcategory-list li {
	position: relative;
}
.subcategory-list li a.is-active::before {
	content: "";
	position: absolute;
	left: -34px;
	top: 50%;
	width: 3px;
	height: 22px;
	border-radius: 2px;
	background: #c23c08;
	transform: translateY(-50%);
}

/* ------------------------------------------------------------ 3. icons --- */

/* The theme paints one dumpling glyph behind every category; these keep the
   geometry and only swap in the icon that belongs to each category. */
.subcategory-list li a::after {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 22px;
	height: 22px;
	top: 1px;
	left: -28px;
	transition: transform .18s ease;
}

.subcategory-title::after {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 34px;
	height: 34px;
}

/* Icons for the three top-level groups, which had none. */
.custom-category-list > li > a.category-link {
	position: relative;
}
.custom-category-list > li > a.category-link::after {
	content: "";
	position: absolute;
	left: -34px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.custom-category-list {
	padding-left: 34px;
}

/* ------------------------------------------------ 4. add to cart button --- */

.product-item .product-actions {
	margin-top: 10px;
}

.product-item .product-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 9px 14px;
	border: 0;
	border-radius: 24px;
	background: linear-gradient(102deg, #e0683a 2%, #c23c08 90%);
	color: #fff;
	font-family: "Ubuntu Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: filter .18s ease, transform .12s ease;
}

.product-item .product-actions .button:hover {
	filter: brightness(1.07);
}
.product-item .product-actions .button:active {
	transform: translateY(1px);
}
.product-item .product-actions .button:focus-visible {
	outline: 2px solid #7a2605;
	outline-offset: 2px;
}

.product-item .product-actions .button.loading {
	opacity: .7;
	pointer-events: none;
}

.product-item .product-actions .button.added::after {
	content: "✓";
	font-weight: 700;
}

/* WooCommerce drops a "View cart" link straight after the button. */
.product-item .product-actions .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #c23c08;
	text-decoration: underline;
	text-align: center;
}

/* ------------------------------------------------------ 5. cart counter --- */

.psu-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 10px;
	background: #c23c08;
	color: #fff;
	font-family: "Ubuntu Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.psu-cart-count:not(.has-items) {
	display: none;
}

/* ----------------------------------------------------------- 6. mobile --- */

@media (max-width: 767px) {
	.category-list a.is-active {
		color: #c23c08;
		font-weight: 800;
	}
	.mobile-category-menu .subcategory-content {
		max-height: 60vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-container .woocommerce-sidebar,
	.subcategory-list li a,
	.product-item .product-actions .button {
		transition: none;
	}
}