diff --git a/public/store/view/theme/dominik/assets/css/main.css b/public/store/view/theme/dominik/assets/css/main.css
index ff1ee31..7016c24 100644
--- a/public/store/view/theme/dominik/assets/css/main.css
+++ b/public/store/view/theme/dominik/assets/css/main.css
@@ -1,360 +1,547 @@
-:root{
-	--color-secondary: #D8CECB;
-	--color-gray: #EEEEEE;
-	--color-dark-gray: #5c5950;
-}
-body{
-	
-	
-	font-family: "Tenor Sans", sans-serif;
-	font-weight: 400;
-	font-style: normal;
-	font-size: 16px;
-}
-a{
-	text-decoration: none;
-	color: inherit;
-}
-img{
-	max-width: 100%;
-}
-.container-fluid {
-    max-width: 1400px;
-}
-p {
-    margin-bottom: 0.5rem;
-}
-a:hover{
-	color: var(--color-secondary);
-}
-a:hover svg,
-a:hover path{
-	fill: var(--color-secondary);
-}
-.heading {
-    font-size: 27px;
-    line-height: 120%;
-}
-.subheading{
-	font-size: 19px;
-	line-height: 120%;
-}
-
-.logo {
-	
-	font-size: 30px;
-	
-}
-
-header .menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-}
-
-header .menu ul {
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-    transition-duration: 0.2s;
-    top: 100%;
-    background-color: white;
-    width: 260px;
-   
-    box-shadow: 0px -1px 20px 3px #4b4b4b3d;
-	padding: 10px 0;
-}
-header .menu ul li {
-    padding: 0px 15px;
-}
-header .menu ul li a {
-    display: flex;
-    width: 100%;
-}
-header .menu li:hover ul{
-	opacity: 1;
-	visibility: visible;
-}
-header .menu li {
-    padding: 13px 15px;
-    display: flex;
-    align-items: center;
-}
-header .menu li a {
-    flex-wrap: nowrap;
-    display: flex;
-    align-items: center;
-}
-header .menu svg{
-	
-}
-
-header .menu>li:first-child {
-    padding-left: 0;
-}
-header .menu>li:last-child {
-	padding-right: 0;
-}
-@media (max-width: 767px){
-	header .menu li {
-		padding: 13px 8px;
-	}
-	.logo {
-		
-		font-size: 20px;
-		
-	}
-}
-.btn {
-    text-transform: uppercase;
-    padding: 10px 30px;
-    border-radius: 0;
-    box-shadow: none !important;
-}
-.btn-close{
-	 box-shadow: none !important;
-	 outline: none;
-}
-.btn-white{
-	background-color: white;
-	color: black;
-	
-}
-.btn-white:hover{
-	background-color: var(--color-secondary);
-}
-
-
-.product-card .images{
-	position: relative;
-}
-
-
-.product-card .images .hidden-image{
-	position: absolute;
-	left: 0;
-	top: 0;
-	opacity: 0;
-	visibility: hidden;
-	transition-duration: 0.4s;
-}
-
-.product-card .images:hover .hidden-image{
-	opacity: 1;
-	visibility: visible;
-}
-.swiper-pagination-bullet{
-	transition-duration: 0.45s;
-}
-.swiper-pagination-bullet-active {
-    width: 30px !important;
-    border-radius: 10px !important;
-}
-
-.bg-dominik{
-	background-color: var(--color-secondary);
-}
-.bg-dominik-dark{
-	background-color: var(--color-dark-gray);
-}
-
-.bg-center {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-.position-relative{
-	z-index: 0;
-}
-.bg-absolute-background {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-}
-.bg-absolute-background img {
-    z-index: 0;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-section{
-	overflow-x: hidden;
-}
-.text-shadow{
-	text-shadow: -3px 5px 11px #000
-}
-
-@media (max-width: 767px){
-	.section-prems .banner-text {
-		background-color: var(--color-gray);
-		color: black !important;
-		text-shadow: none;
-		margin-bottom: 1rem;
-		text-align: center;
-	}
-	.section-prems .banner-text p{
-		margin: 0 auto;
-		
-	}
-	.section-prems .bg-dominik-dark{
-		background-color: transparent;
-	}
-	.w-mob-100{
-		width: 100%;
-	}
-	
-}
-
-
-
-.nav-tabs{
-	border: none;
-}
-.nav-link {
-    border: none !important;
-    text-transform: uppercase;
-    outline: none;
-    padding: 0 0 4px 0;
-    border-bottom: 2px solid #000 !important;
-    border-radius: 0;
-	color: black;
-	opacity: 0.4;
-	text-wrap: nowrap;
-}
-.nav-link:hover,.nav-link.active{
-	opacity: 1;
-	color: black;
-}
-.nav-item{
-	margin-right: 18px;
-	margin-bottom: 10px;
-}
-.sw-thumb{
-	
-}
-.sw-thumb:not(.swiper-slide-thumb-active){
-	opacity: 0.5;
-	cursor: pointer;
-}
-
-.offcanvas-wrap {
-    position: fixed;
-    z-index: 1100;
-}
-.toast-container{
-	z-index: 1200;
-}
-.modal-backdrop {
-    background-color: var(--color-secondary);
-}
-.modal-backdrop.show {
-    opacity: .7;
-}
-.modal-header {
-    border-bottom: 0;
-}
-
-.form-wrap {
-    position: relative;
-}
-.form-wrap label {
-    background-color: #ffffff;
-    position: relative;
-    display: inline-block;
-    top: 1px;
-    left: 15px;
-}
-.form-control {
-    box-shadow: none !important;
-    border-radius: 0;
-    padding: 10px 13px;
-}
-.form-control:focus{
-	border-color: #000
-}
-
-.fav-btn {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-	opacity: 0;
-	visibility: hidden;
-	
-}
-.product-card:hover .fav-btn{
-	opacity: 1;
-	visibility: visible;
-}
-.fav-btn svg path{
-	fill: #fff !important;
-	transition-duration: 0.2s;
-}
-.fav-btn:hover svg path{
-	fill: var(--color-secondary) !important;
-}
-@media (max-width: 767px){
-	.fav-btn {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-.abs-loading.abs-loading-fixed {
-    position: fixed;
-    top: 0;
-	left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #ffffff61;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.abs-loading{
-	position: absolute;
-	top: 0;
-	left: 0;
-    width: 100%;
-    height: 100%;
-	z-index: 10;
-	background-color: #ffffff61;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.no-anim .abs-loading{
-	display: none;
-}
-.offcanvas .left-menu {
-    padding: 0 0 10px 0;
-    list-style: none;
-    margin: 0 0 10px 0;
-    border-bottom: 1px solid #dbdbdb;
-}
-.offcanvas .left-menu ul{
-	padding: 0;
-    list-style: none;
-    margin: 0;
-}
-.offcanvas .left-menu>li>a {
-    font-weight: bold;
-    font-size: 20px;
-}
-.offcanvas .left-menu li {
-    text-align: right;
-}
-
-.product-page .fav-btn {
-    opacity: 1;
-    visibility: visible;
-    top: auto;
-    bottom: 4px;
-}
+:root{
+	--color-secondary: #D8CECB;
+	--color-gray: #EEEEEE;
+	--color-dark-gray: #5c5950;
+    --swiper-theme-color: var(--bs-dark) !important;
+}
+body{
+	
+	
+	font-family: "Tenor Sans", sans-serif;
+	font-weight: 400;
+	font-style: normal;
+	font-size: 16px;
+}
+a{
+	text-decoration: none;
+	color: inherit;
+}
+img{
+	max-width: 100%;
+}
+.container-fluid {
+    max-width: 1400px;
+}
+p {
+    margin-bottom: 0.5rem;
+}
+a:hover{
+	color: var(--color-secondary);
+}
+a:hover svg,
+a:hover path{
+	fill: var(--color-secondary);
+}
+.heading {
+    font-size: 27px;
+    line-height: 120%;
+}
+.subheading{
+	font-size: 19px;
+	line-height: 120%;
+}
+
+.logo {
+	
+	font-size: 30px;
+	
+}
+
+header .menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+}
+
+header .menu ul {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    transition-duration: 0.2s;
+    top: 100%;
+    background-color: white;
+    width: 260px;
+   
+    box-shadow: 0px -1px 20px 3px #4b4b4b3d;
+	padding: 10px 0;
+}
+header .menu ul li {
+    padding: 0px 15px;
+}
+header .menu ul li a {
+    display: flex;
+    width: 100%;
+}
+header .menu li:hover ul{
+	opacity: 1;
+	visibility: visible;
+}
+header .menu li {
+    padding: 13px 15px;
+    display: flex;
+    align-items: center;
+}
+header .menu li a {
+    flex-wrap: nowrap;
+    display: flex;
+    align-items: center;
+}
+header .menu svg{
+	
+}
+
+header .menu>li:first-child {
+    padding-left: 0;
+}
+header .menu>li:last-child {
+	padding-right: 0;
+}
+@media (max-width: 767px){
+	header .menu li {
+		padding: 13px 8px;
+	}
+	.logo {
+		
+		font-size: 20px;
+		
+	}
+}
+.btn {
+    text-transform: uppercase;
+    padding: 10px 30px;
+    border-radius: 0;
+    box-shadow: none !important;
+}
+.btn-close{
+	 box-shadow: none !important;
+	 outline: none;
+}
+.btn-white{
+	background-color: white;
+	color: black;
+	
+}
+.btn-white:hover{
+	background-color: var(--color-secondary);
+}
+
+
+.product-card .images{
+	position: relative;
+}
+
+
+.product-card .images .hidden-image{
+	position: absolute;
+	left: 0;
+	top: 0;
+	opacity: 0;
+	visibility: hidden;
+	transition-duration: 0.4s;
+}
+
+.product-card .images:hover .hidden-image{
+	opacity: 1;
+	visibility: visible;
+}
+.swiper-pagination-bullet{
+	transition-duration: 0.45s;
+}
+.swiper-pagination-bullet-active {
+    width: 30px !important;
+    border-radius: 10px !important;
+}
+
+.subcategory-showcase {
+    background: linear-gradient(180deg, #f8f6f5 0, #fff 100%);
+    color: #14142b;
+}
+
+.subcategory-showcase__heading {
+    max-width: 760px;
+    margin: 0 auto 31px;
+    text-align: center;
+}
+
+.subcategory-showcase__eyebrow {
+    display: block;
+    color: var(--color-dark-gray);
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    line-height: 1.4;
+    text-transform: uppercase;
+}
+
+.subcategory-showcase__heading h1,
+.subcategory-showcase__heading h2 {
+    margin: 10px 0 0;
+    color: #14142b;
+    font-size: clamp(30px, 3.2vw, 46px);
+    font-weight: 400;
+    line-height: 1.12;
+}
+
+.subcategory-slider {
+    padding: 3px 2px 0;
+}
+
+.subcategory-card {
+    display: block;
+    min-width: 0;
+    color: #14142b;
+}
+
+.subcategory-card:hover {
+    color: #14142b;
+}
+
+.subcategory-card__image {
+    position: relative;
+    display: block;
+    aspect-ratio: 1;
+    overflow: hidden;
+    background: #ede9e7;
+}
+
+.subcategory-card__image::after {
+    position: absolute;
+    inset: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    content: "";
+    pointer-events: none;
+    transition: inset 0.35s, border-color 0.35s;
+}
+
+.subcategory-card__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s;
+}
+
+.subcategory-card__number {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    min-width: 38px;
+    padding: 6px 7px 5px;
+    background: rgba(255, 255, 255, 0.92);
+    color: #14142b;
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    line-height: 1;
+    text-align: center;
+}
+
+.subcategory-card__body {
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 1px 0;
+}
+
+.subcategory-card__title {
+    font-size: 17px;
+    line-height: 1.3;
+}
+
+.subcategory-card__arrow {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.25s;
+}
+
+.subcategory-card__arrow svg,
+.subcategory-slider__button svg {
+    fill: none !important;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.subcategory-card:hover .subcategory-card__image img {
+    transform: scale(1.055);
+}
+
+.subcategory-card:hover .subcategory-card__image::after {
+    inset: 15px;
+    border-color: rgba(255, 255, 255, 0.92);
+}
+
+.subcategory-card:hover .subcategory-card__arrow {
+    transform: translateX(4px);
+}
+
+.subcategory-slider__controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: center;
+    padding-top: 32px;
+}
+
+.subcategory-slider .swiper-pagination {
+    position: static;
+    width: auto;
+    min-width: 56px;
+    transform: none;
+}
+
+.subcategory-slider .swiper-pagination-bullet {
+    margin: 0 4px;
+}
+
+.subcategory-slider__button {
+    position: static;
+    width: 42px;
+    height: 42px;
+    margin: 0;
+    border: 1px solid rgba(20, 20, 43, 0.16);
+    background: transparent;
+    color: #14142b;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.subcategory-slider__button::after {
+    display: none;
+}
+
+.subcategory-slider__button:hover {
+    background: #14142b;
+    border-color: #14142b;
+    color: #fff;
+}
+
+.subcategory-slider__button.swiper-button-disabled {
+    opacity: 0.32;
+}
+
+@media (max-width: 767px) {
+    .subcategory-showcase__heading {
+        margin-bottom: 24px;
+    }
+
+    .subcategory-showcase__heading h1,
+    .subcategory-showcase__heading h2 {
+        font-size: 31px;
+    }
+
+    .subcategory-card__title {
+        font-size: 16px;
+    }
+
+    .subcategory-slider__controls {
+        padding-top: 25px;
+    }
+}
+
+.bg-dominik{
+	background-color: var(--color-secondary);
+}
+.bg-dominik-dark{
+	background-color: var(--color-dark-gray);
+}
+
+.bg-center {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.position-relative{
+	z-index: 0;
+}
+.bg-absolute-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+.bg-absolute-background img {
+    z-index: 0;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+section{
+	overflow-x: hidden;
+}
+.text-shadow{
+	text-shadow: -3px 5px 11px #000
+}
+
+@media (max-width: 767px){
+	.section-prems .banner-text {
+		background-color: var(--color-gray);
+		color: black !important;
+		text-shadow: none;
+		margin-bottom: 1rem;
+		text-align: center;
+	}
+	.section-prems .banner-text p{
+		margin: 0 auto;
+		
+	}
+	.section-prems .bg-dominik-dark{
+		background-color: transparent;
+	}
+	.w-mob-100{
+		width: 100%;
+	}
+	
+}
+
+
+
+.nav-tabs{
+	border: none;
+}
+.nav-link {
+    border: none !important;
+    text-transform: uppercase;
+    outline: none;
+    padding: 0 0 4px 0;
+    border-bottom: 2px solid #000 !important;
+    border-radius: 0;
+	color: black;
+	opacity: 0.4;
+	text-wrap: nowrap;
+}
+.nav-link:hover,.nav-link.active{
+	opacity: 1;
+	color: black;
+}
+.nav-item{
+	margin-right: 18px;
+	margin-bottom: 10px;
+}
+.sw-thumb{
+	
+}
+.sw-thumb:not(.swiper-slide-thumb-active){
+	opacity: 0.5;
+	cursor: pointer;
+}
+
+.offcanvas-wrap {
+    position: fixed;
+    z-index: 1100;
+}
+.toast-container{
+	z-index: 1200;
+}
+.modal-backdrop {
+    background-color: var(--color-secondary);
+}
+.modal-backdrop.show {
+    opacity: .7;
+}
+.modal-header {
+    border-bottom: 0;
+}
+
+.form-wrap {
+    position: relative;
+}
+.form-wrap label {
+    background-color: #ffffff;
+    position: relative;
+    display: inline-block;
+    top: 1px;
+    left: 15px;
+}
+.form-control {
+    box-shadow: none !important;
+    border-radius: 0;
+    padding: 10px 13px;
+}
+.form-control:focus{
+	border-color: #000
+}
+
+.fav-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+	opacity: 0;
+	visibility: hidden;
+	
+}
+.product-card:hover .fav-btn{
+	opacity: 1;
+	visibility: visible;
+}
+.fav-btn svg path{
+	fill: #fff !important;
+	transition-duration: 0.2s;
+}
+.fav-btn:hover svg path{
+	fill: var(--color-secondary) !important;
+}
+@media (max-width: 767px){
+	.fav-btn {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+.abs-loading.abs-loading-fixed {
+    position: fixed;
+    top: 0;
+	left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff61;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.abs-loading{
+	position: absolute;
+	top: 0;
+	left: 0;
+    width: 100%;
+    height: 100%;
+	z-index: 10;
+	background-color: #ffffff61;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.no-anim .abs-loading{
+	display: none;
+}
+.offcanvas .left-menu {
+    padding: 0 0 10px 0;
+    list-style: none;
+    margin: 0 0 10px 0;
+    border-bottom: 1px solid #dbdbdb;
+}
+.offcanvas .left-menu ul{
+	padding: 0;
+    list-style: none;
+    margin: 0;
+}
+.offcanvas .left-menu>li>a {
+    font-weight: bold;
+    font-size: 20px;
+}
+.offcanvas .left-menu li {
+    text-align: right;
+}
+
+.product-page .fav-btn {
+    opacity: 1;
+    visibility: visible;
+    top: auto;
+    bottom: 4px;
+}
 .product-page .fav-btn path {
     fill: #000 !important;
 }
diff --git a/public/store/view/theme/dominik/template/extension/module/subcategory.twig b/public/store/view/theme/dominik/template/extension/module/subcategory.twig
index 1b2c0ee..ea790cb 100644
--- a/public/store/view/theme/dominik/template/extension/module/subcategory.twig
+++ b/public/store/view/theme/dominik/template/extension/module/subcategory.twig
@@ -1,68 +1,92 @@
-<section class="subcategories py-5" style="-swiper-pagination-color: var(--color-secondary);--swiper-theme-color: var(--color-secondary);">
-	<div class="container-fluid">
-		<div class="section-heading py-3 text-center">
-			<h3 class="heading">{{ module_name }}</h3>
-		</div>
-		
-		<div class="swiper swiper-{{ random }} pb-5">
-			<div class="swiper-wrapper">
-				{% for category in categories %}
-				 <div class="swiper-slide" style="width: auto">
-					<a href="{{ category.href }}" class="d-block category-item text-center">
-						<img src="{{ category.thumb }}" alt="{{ category.name }}" class="rounded-pill">
-						<div class="text-center mt-3">{{ category.name }}</div>
-					</a>
-				 
-				 </div>
-				{% endfor %}
-			
-			
-			</div>
-			<div class="swiper-pagination"></div>
-			<div class="swiper-button-next d-none d-lg-flex" style="top:33%"></div>
-			<div class="swiper-button-prev d-none d-lg-flex" style="top:33%"></div>
-		</div>
-		
-		<script>
-			var swiper = new Swiper(".swiper-{{ random }}", {
-				loop: true,
-				spaceBetween: 10,
-				  // Responsive breakpoints
-				breakpoints: {
-				// when window width is >= 320px
-					320: {
-					  slidesPerView: 2,
-					  spaceBetween: 50,
-					},
-					// when window width is >= 480px
-					575: {
-					  slidesPerView: 3,
-						spaceBetween: 50,
-					},
-					// when window width is >= 640px
-					768: {
-					  slidesPerView: 3,
-					 spaceBetween: 50,
-					},
-					992: {
-					  slidesPerView: 4,
-					  
-					},
-					1200: {
-					  slidesPerView: 4,
-					  
-					}
-				},
-				
-				
-				pagination: {
-					el: ".swiper-{{ random }} .swiper-pagination",
-				},
-				navigation: {
-					nextEl: ".swiper-{{ random }} .swiper-button-next",
-					prevEl: ".swiper-{{ random }} .swiper-button-prev",
-				},
-			});
-		</script>
-  </div>
-</section>
\ No newline at end of file
+<section class="subcategories subcategory-showcase py-5">
+	<div class="container-fluid">
+		<div class="subcategory-showcase__heading">
+			<span class="subcategory-showcase__eyebrow">Каталог салона</span>
+			<h2>{{ module_name }}</h2>
+		</div>
+
+		{% block subcategories %}
+		{% set slider_id = random|default('category-list') %}
+		<div id="subcategory-slider-{{ slider_id }}" class="swiper subcategory-slider">
+			<div class="swiper-wrapper">
+				{% for category in categories %}
+				<div class="swiper-slide">
+					<a href="{{ category.href }}" class="subcategory-card">
+						<span class="subcategory-card__image">
+							<img src="{{ category.thumb }}" alt="{{ category.name }}" loading="lazy">
+							<span class="subcategory-card__number">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
+						</span>
+						<span class="subcategory-card__body">
+							<span class="subcategory-card__title">{{ category.name }}</span>
+							<span class="subcategory-card__arrow" aria-hidden="true">
+								<svg width="18" height="12" viewBox="0 0 18 12">
+									<path d="M0 6h16M11 1l5 5-5 5"></path>
+								</svg>
+							</span>
+						</span>
+					</a>
+				</div>
+				{% endfor %}
+			</div>
+
+			<div class="subcategory-slider__controls">
+				<button class="swiper-button-prev subcategory-slider__button" type="button" aria-label="Предыдущие категории">
+					<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
+						<path d="M18 6H2m5 5L2 6l5-5"></path>
+					</svg>
+				</button>
+				<div class="swiper-pagination"></div>
+				<button class="swiper-button-next subcategory-slider__button" type="button" aria-label="Следующие категории">
+					<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
+						<path d="M0 6h16m-5-5 5 5-5 5"></path>
+					</svg>
+				</button>
+			</div>
+		</div>
+
+		<script>
+			(function () {
+				var slider = document.getElementById('subcategory-slider-{{ slider_id }}');
+
+				if (!slider || typeof Swiper === 'undefined') {
+					return;
+				}
+
+				new Swiper(slider, {
+					grabCursor: true,
+					rewind: true,
+					slidesPerView: 1.35,
+					spaceBetween: 14,
+					watchOverflow: true,
+					breakpoints: {
+						480: {
+							slidesPerView: 2.15,
+							spaceBetween: 16
+						},
+						768: {
+							slidesPerView: 3,
+							spaceBetween: 18
+						},
+						992: {
+							slidesPerView: 4,
+							spaceBetween: 20
+						},
+						1280: {
+							slidesPerView: 5,
+							spaceBetween: 22
+						}
+					},
+					pagination: {
+						el: slider.querySelector('.swiper-pagination'),
+						clickable: true
+					},
+					navigation: {
+						nextEl: slider.querySelector('.swiper-button-next'),
+						prevEl: slider.querySelector('.swiper-button-prev')
+					}
+				});
+			})();
+		</script>
+		{% endblock %}
+	</div>
+</section>
diff --git a/public/store/view/theme/dominik/template/product/category.twig b/public/store/view/theme/dominik/template/product/category.twig
index 4561ca3..2dda488 100644
--- a/public/store/view/theme/dominik/template/product/category.twig
+++ b/public/store/view/theme/dominik/template/product/category.twig
@@ -1,69 +1,14 @@
 {{ header }}
 {{ content_top }}
-<section class="subcategories {% if categories %}py-5{% else %}pt-4{% endif %}" style="-swiper-pagination-color: var(--color-secondary);--swiper-theme-color: var(--color-secondary);">
+<section class="subcategories subcategory-showcase subcategory-showcase--catalog {% if categories %}py-5{% else %}pt-4{% endif %}">
 	<div class="container-fluid">
-		<div class="section-heading py-3 text-center">
-			<h3 class="heading">{{ heading_title }}</h3>
+		<div class="subcategory-showcase__heading">
+			<span class="subcategory-showcase__eyebrow">{% if categories %}Выберите направление{% else %}Каталог салона{% endif %}</span>
+			<h1>{{ heading_title }}</h1>
 		</div>
 		{% if categories %}
-		<div class="swiper swiper-category-list pb-5 swiper-initialized swiper-horizontal swiper-pointer-events">
-			<div class="swiper-wrapper">
-			
-			{% for category in categories %}
-			<div class="swiper-slide">
-				<a href="{{ category.href }}" class="d-block category-item text-center">
-					<img src="{{ category.thumb }}" alt="Открытые плечи" class="rounded-pill">
-					<div class="text-center mt-3">{{ category.name }}</div>
-				</a>
-				 
-			 </div>
-			{% endfor %}
-			</div>
-			<div class="swiper-pagination"></div>
-			<div class="swiper-button-next d-none d-lg-flex" style="top:33%"></div>
-			<div class="swiper-button-prev d-none d-lg-flex" style="top:33%"></div>
-		</div>
-		<script>
-			var swiper = new Swiper(".swiper-category-list", {
-				loop: true,
-				spaceBetween: 10,
-				  // Responsive breakpoints
-				breakpoints: {
-				// when window width is >= 320px
-					320: {
-					  slidesPerView: 2,
-					  spaceBetween: 50,
-					},
-					// when window width is >= 480px
-					575: {
-					  slidesPerView: 3,
-						spaceBetween: 50,
-					},
-					// when window width is >= 640px
-					768: {
-					  slidesPerView: 3,
-					 spaceBetween: 50,
-					},
-					992: {
-					  slidesPerView: 4,
-					  
-					},
-					1200: {
-					  slidesPerView: 4,
-					  
-					}
-				},
-				
-				
-				pagination: {
-					el: ".swiper-category-list .swiper-pagination",
-				},
-				navigation: {
-					nextEl: ".swiper-category-list .swiper-button-next",
-					prevEl: ".swiper-category-list .swiper-button-prev",
-				},
-			});
-		</script>
+		{{ block('subcategories', 'dominik/template/extension/module/subcategory.twig') }}
+
 		{% endif %}
   </div>
 </section>