{% if categories is not empty %}
	<div class="pr-categories-wall mt-4">
		<div class="pr-page-title fw-700 dark-text mb-3">{{ heading_title }}</div>
		<div class="pr-categories-wall-items d-flex gap-3 align-items-stretch">
			{% for category in categories %}
				{% if category.children %}
					<div class="pr-categories-wall-item pr-categories-wall-item-has-children content-block d-flex flex-column align-items-center gap-md-3 gap-lg-4">
						{% if (category.thumb) %}
							<img src="{{ category.thumb }}" alt="" width="{{ category.width }}" height="{{ category.height }}" loading="lazy" />
						{% endif %}
						<div class="pr-category-wall-item-links w-100 w-md-auto mt-3 mt-md-0">
							<a href="{{ category.href }}" class="pr-categories-wall-item-title fw-700 lh-sm d-block d-md-inline text-center text-md-start">{{ category.name }}</a>
							<div class="pr-category-wall-item-list d-flex flex-column gap-1 mt-3 ps-2">
								{% set countstop = 1 %}
								{% for child in category.children %}
									{% set countstop = countstop + 1 %}
									<a href="{{ child.href }}" class="fsz-14 d-inline-block light-link">{{ child.name }}</a>
								{% endfor %}
							</div>
						</div>
					</div>
				{% else %}
					<a href="{{ category.href }}" class="pr-categories-wall-item content-block d-flex flex-column align-items-center" title="{{ category.name }}">
						{% if (category.thumb) %}
						<img src="{{ category.thumb }}" alt="" width="{{ category.width }}" height="{{ category.height }}" />
						{% endif %}
						<span class="pr-categories-wall-item-title fsz-14 fw-700 lh-sm text-center">{{ category.name }}</span>
					</a>
				{% endif %}
			{% endfor %}
		</div>
		<div class="row d-sm-none">
			<div class="col">
				<button type="button" class="button button-primary mt-3 w-100" data-sidebar="catalog">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="#FFFDFF" stroke-width="1.3">
                        <rect x="2" y="2" width="6" height="6" transform="rotate(-10 5 5)" rx="1" ry="1"></rect>
                        <rect x="12" y="2" width="6" height="6" rx="1" ry="1"></rect>
                        <rect x="2" y="12" width="6" height="6" rx="1" ry="1"></rect>
                        <rect x="12" y="12" width="6" height="6" rx="1" ry="1"></rect>
                    </svg>
					<span class="button-text">{{ oct_menu_catalog }}</span>
				</button>
			</div>
		</div>
	</div>
{% endif %}
