diff --git a/assets/admin/src/schema/sections/page-display/index.js b/assets/admin/src/schema/sections/page-display/index.js
index b8b741d5..8eb1c048 100644
--- a/assets/admin/src/schema/sections/page-display/index.js
+++ b/assets/admin/src/schema/sections/page-display/index.js
@@ -608,6 +608,8 @@ export const pageDisplaySchemas = {
       header_components_search_popular_limit: 5,
       header_components_search_show_input_cat: false,
       header_components_search_show_type: false,
+      header_components_search_before_html: '<div class="em16 font-bold mb10">更优雅的Wordpress主题</div>\n<div>这是导航栏幻灯片多功能组件，可在后台进行配置</div>',
+      header_components_search_after_html: '',
       slider_config_direction: 'horizontal',
       slider_config_speed: 300,
       slider_config_button: true,
@@ -680,6 +682,24 @@ export const pageDisplaySchemas = {
           { key: 'header_components_search_popular_limit', label: '热词数量', type: 'number', default: 5, min: 1, max: 20, dependsOn: { key: 'header_components_search_show_keywords', value: true } },
           { key: 'header_components_search_show_input_cat', label: '显示分类搜索', type: 'switch', default: false, dependsOn: { key: 'header_components_search_enabled', value: true }, help: '搜索框内显示分类选择下拉' },
           { key: 'header_components_search_show_type', label: '显示类型切换', type: 'switch', default: false, dependsOn: { key: 'header_components_search_enabled', value: true }, help: '搜索框内显示内容类型切换' },
+          {
+            key: 'header_components_search_before_html',
+            label: '搜索上方额外内容',
+            type: 'textarea',
+            default: '<div class="em16 font-bold mb10">更优雅的Wordpress主题</div>\n<div>这是导航栏幻灯片多功能组件，可在后台进行配置</div>',
+            rows: 4,
+            dependsOn: { key: 'header_components_search_enabled', value: true },
+            help: 'Hero 主标题/副标题写在这里（支持 HTML）。不要依赖幻灯片文案，以免与搜索重叠；请注意组件总高度。',
+          },
+          {
+            key: 'header_components_search_after_html',
+            label: '搜索下方额外内容',
+            type: 'textarea',
+            default: '',
+            rows: 3,
+            dependsOn: { key: 'header_components_search_enabled', value: true },
+            help: '支持 HTML；请注意组件总高度。',
+          },
         ],
       },
       {
diff --git a/assets/css/frontend/header-components/admin-hint.css b/assets/css/frontend/header-components/admin-hint.css
index dc520795..03628843 100644
--- a/assets/css/frontend/header-components/admin-hint.css
+++ b/assets/css/frontend/header-components/admin-hint.css
@@ -25,20 +25,7 @@
     color: #ffe082;
 }
 
-/* ============================================================
- * Layer 2: 搜索覆盖模块（在轮播内部 absolute 定位）
- * ============================================================ */
-.header-components-search {
-    position: absolute;
-    bottom: 25%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10;
-    width: 100%;
-    max-width: 600px;
-    padding: 0 16px;
-}
-
+/* Legacy form-class helpers (unused by zibll-aligned search; kept for admin-only markup) */
 .header-components-search__form {
     display: flex;
     align-items: center;
@@ -87,4 +74,3 @@
     font-weight: 500;
     flex-shrink: 0;
 }
-
diff --git a/assets/css/frontend/header-components/base.css b/assets/css/frontend/header-components/base.css
index c79ce848..abf5253f 100644
--- a/assets/css/frontend/header-components/base.css
+++ b/assets/css/frontend/header-components/base.css
@@ -1,19 +1,17 @@
 /* ============================================================
- * AKSRT Header Slider — v5.0 Zibll-Aligned
+ * AKSRT Header Slider — v6.0 Zibll-Aligned
  *
- * 三层架构：
- * - Layer 1: Swiper 全宽轮播背景
- * - Layer 2: 搜索覆盖模块
- * - Layer 3: 图标卡片网格覆盖
+ * Three layers:
+ * - Layer 1: Swiper full-bleed background
+ * - Layer 2: Search overlay (before_html + form + after_html)
+ * - Layer 3: Icon cards (negative margin)
  *
- * 对标 zibll 的 new-swiper 体系：
- * - CSS 变量高度控制 (--pc-height / --m-height)
- * - data-* 属性驱动配置
- * - 缩略图分页器、视差、懒加载
+ * Title/subtitle for the hero live in .header-slider-search-more.before
+ * (document flow with the search form). .slide-text is decorative only.
  * ============================================================ */
 
 /* ============================================================
- * .new-swiper 基础样式（对标 zibll）
+ * .new-swiper base (zibll)
  * ============================================================ */
 .aksrt-slider-wrapper {
     position: relative;
@@ -45,7 +43,7 @@
     object-fit: cover;
 }
 
-/* 懒加载预加载器 */
+/* Lazy preloader */
 .new-swiper .swiper-lazy-preloader {
     position: absolute;
     top: 50%;
@@ -53,7 +51,7 @@
     width: 42px;
     height: 42px;
     margin: -21px 0 0 -21px;
-    border: 3px solid rgba(255,255,255,0.3);
+    border: 3px solid rgba(255, 255, 255, 0.3);
     border-top-color: #fff;
     border-radius: 50%;
     animation: aksrt-swiper-spin 0.8s linear infinite;
@@ -64,7 +62,6 @@
     to { transform: rotate(360deg); }
 }
 
-/* 懒加载图片 */
 .new-swiper .swiper-lazy {
     opacity: 0;
     transition: opacity 0.3s;
@@ -75,7 +72,6 @@
     opacity: 1;
 }
 
-/* 缩略图分页器 */
 .new-swiper .pagination-thumbnail-item {
     width: 60px;
     height: 40px;
@@ -99,60 +95,52 @@
     border-color: #fff;
 }
 
-/* 视差层 */
 .new-swiper [data-swiper-parallax] {
     transition: none;
 }
 
-/* 比例高度模式 */
 .new-swiper.scale-height .swiper-wrapper {
     height: 0;
     padding-bottom: var(--scale-ratio, 45%);
 }
 
-/* 幻灯片文字覆盖层 */
-/* zibll .slide-text / .s-desc */
+/* ============================================================
+ * Slide text — decorative layer (zibll .s-desc / .slide-text)
+ * Main hero title is NOT here; it is search before_html.
+ * ============================================================ */
 .aksrt-slide-text,
 .s-desc,
 .slide-text {
     position: absolute;
     color: #fff;
-    z-index: 2;
-    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-}
-
-.aksrt-slide-text,
-.slide-text:not(.s-desc) {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% - 32px);
-    max-width: 920px;
-    text-align: center;
-    background: unset;
-    bottom: unset;
-}
-
-.s-desc {
     bottom: 0;
-    left: 0;
-    top: auto;
-    transform: none;
-    width: 100%;
     padding: 1.8em 2.5em;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent);
-    border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
+    width: 100%;
     font-size: 16px;
-    text-align: left;
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+    z-index: 1;
+    border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
+}
+
+/* zibll: .slide-text unsets bottom bar, uses abs-center placement */
+.aksrt-slide-text,
+.slide-text:not(.s-desc) {
+    background: unset;
+    bottom: unset;
+    --text-size-pc: 20px;
+    font-size: var(--text-size-pc);
+    opacity: 1;
+    transition: opacity 1s;
 }
 
 .aksrt-slide-text__title,
 .slide-title {
     font-family: var(--font-ui);
-    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
+    font-size: inherit;
     font-weight: 600;
-    margin: 0 0 12px;
-    line-height: 1.25;
+    margin: 0;
+    line-height: 1.35;
     text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -164,9 +152,9 @@
 
 .aksrt-slide-text__desc,
 .slide-desc {
-    font-size: clamp(0.9rem, 1.4vw, 1.125rem);
-    margin: 0;
-    line-height: 1.6;
+    margin: 0.6em 0 0;
+    line-height: 1.5;
+    font-size: 60%;
     color: rgba(255, 255, 255, 0.95);
     text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
@@ -177,7 +165,6 @@
     --m-height: 100%;
     width: 100%;
     height: auto;
-    /* Prefer aspect-ratio so global border-box cannot collapse the box. */
     aspect-ratio: 5 / 2;
     padding-bottom: 0;
 }
@@ -196,29 +183,29 @@
     position: absolute;
 }
 
-/* 移动端高度 */
 @media (max-width: 767px) {
     .new-swiper .swiper-wrapper {
         height: var(--m-height);
     }
+
+    .slide-text:not(.s-desc) {
+        --text-size-m: 13px;
+        font-size: var(--text-size-m);
+    }
 }
 
 /* ============================================================
- * Container — 三层叠加的父容器
+ * Container
  * ============================================================ */
 .header-slider-container,
 .header-components-container {
     position: relative;
-    isolation: isolate; /* 创建独立堆叠上下文，内部 z-index 不外泄 */
+    isolation: isolate;
     width: 100%;
-    margin-bottom: 24px;
+    margin-bottom: 20px;
 }
 
-/* ============================================================
- * Device Visibility for Hero/Banner slides
- * ============================================================ */
-
-/* PC-only slides: hidden on mobile */
+/* Device visibility for hero/banner slides */
 @media (max-width: 767.98px) {
     .hero-slide--pc-only,
     .banner-slide--pc-only {
@@ -226,11 +213,9 @@
     }
 }
 
-/* Mobile-only slides: hidden on PC */
 @media (min-width: 768px) {
     .hero-slide--mobile-only,
     .banner-slide--mobile-only {
         display: none !important;
     }
 }
-
diff --git a/assets/css/frontend/header-components/card-device-visibility.css b/assets/css/frontend/header-components/card-device-visibility.css
index 57955416..c6ac6eef 100644
--- a/assets/css/frontend/header-components/card-device-visibility.css
+++ b/assets/css/frontend/header-components/card-device-visibility.css
@@ -12,9 +12,11 @@ html.dark .header-components-search .line-form {
     color: #ddd;
 }
 
-.header-components-search .search-input-text {
+/* zibll base padding; leave room for abs-right submit */
+.header-components-search .search-input-text,
+.header-slider-search .search-input-text {
     position: relative;
-    padding: 3px 42px 3px 8px;
+    padding: 5px 42px 5px 10px;
 }
 
 .header-components-search .line-form-input {
@@ -79,12 +81,16 @@ html.dark .header-components-search .line-form-input {
     opacity: 0.92;
 }
 
-.header-components-search .line-form .abs-right {
+/* zibll: .header-slider-search .line-form .abs-right { margin-top:0; margin-right:-6px; } */
+.header-components-search .line-form .abs-right,
+.header-slider-search .line-form .abs-right {
     position: absolute;
-    right: -6px;
+    right: 0.7em;
     top: 50%;
     transform: translateY(-50%);
-    margin: 0;
+    margin-top: 0;
+    margin-right: -6px;
+    z-index: 1;
 }
 
 .header-components-search__submit {
diff --git a/assets/css/frontend/header-components/dark-theme.css b/assets/css/frontend/header-components/dark-theme.css
index 73a762a9..aefc4cc1 100644
--- a/assets/css/frontend/header-components/dark-theme.css
+++ b/assets/css/frontend/header-components/dark-theme.css
@@ -19,7 +19,7 @@ body.dark-theme .header-components-search__input {
  * ============================================================ */
 .header-components-card {
     position: relative;
-    z-index: 10;
+    z-index: 1;
     margin-top: -40px;
 }
 
@@ -258,84 +258,8 @@ a.icon-cover-card:hover {
 }
 
 /* ============================================================
- * Nav 透明模式（轮播可见时 nav 变透明）
+ * Container-level blur: PC/Mobile split (colors only; no top offsets)
  * ============================================================ */
-
-/* ============================================================
- * Zibll-aligned text/search structure overrides
- * ============================================================ */
-.header-components__content.slide-text {
-    width: calc(100% - 32px);
-    max-width: 920px;
-    top: 42%;
-    z-index: 12;
-    padding-top: 0;
-}
-
-.header-components__content.slide-text .slide-title {
-    font-size: clamp(1.75rem, 4vw, 3rem);
-    line-height: 1.2;
-    margin: 0 0 12px;
-}
-
-.header-components__content.slide-text .slide-desc {
-    max-width: 680px;
-    margin: 0 auto;
-    font-size: clamp(0.9rem, 1.4vw, 1.125rem);
-    line-height: 1.6;
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.header-components-search {
-    top: calc(50% + 56px);
-    bottom: auto;
-    max-width: 680px;
-    padding: 0 20px;
-    font-size: 16px;
-}
-
-.card-0 .header-components-search {
-    top: calc(50% + 76px);
-}
-
-.header-components-search .search-input {
-    max-width: 620px;
-    margin: 0 auto;
-}
-
-.header-components-search .search-form {
-    margin: 0;
-    display: block;
-    background: transparent;
-    border-radius: 0;
-    padding: 0;
-    box-shadow: none;
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    transform: none;
-}
-
-.header-components-search .search-form:focus-within {
-    box-shadow: none;
-    transform: none;
-}
-
-.header-components-search .line-form {
-    position: relative;
-    border-radius: 100px;
-    padding: 0.35em 1em;
-    background: rgba(255, 255, 255, 0.82);
-    color: #555;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
-    -webkit-backdrop-filter: saturate(5) blur(20px);
-    backdrop-filter: saturate(5) blur(20px);
-}
-
-.filter-blur .header-components-search .line-form {
-    background: rgba(255, 255, 255, 0.75);
-}
-
-/* ===== Container-level blur: PC/Mobile split ===== */
 @media (min-width: 768px) {
   .has-blur-pc .header-components-card__wrap--shared,
   .has-blur-pc .header-components-card__item-bg {
@@ -344,7 +268,8 @@ a.icon-cover-card:hover {
     -webkit-backdrop-filter: saturate(3) blur(20px);
     border-color: rgba(255, 255, 255, 0.3);
   }
-  .has-blur-pc .header-components-search .line-form {
+  .has-blur-pc .header-components-search .line-form,
+  .has-blur-pc .header-slider-search .line-form {
     background: rgba(255, 255, 255, 0.75);
   }
   .theme-dark .has-blur-pc .header-components-card__wrap--shared,
@@ -363,7 +288,8 @@ a.icon-cover-card:hover {
     -webkit-backdrop-filter: saturate(3) blur(20px);
     border-color: rgba(255, 255, 255, 0.3);
   }
-  .has-blur-mobile .header-components-search .line-form {
+  .has-blur-mobile .header-components-search .line-form,
+  .has-blur-mobile .header-slider-search .line-form {
     background: rgba(255, 255, 255, 0.75);
   }
   .theme-dark .has-blur-mobile .header-components-card__wrap--shared,
diff --git a/assets/css/frontend/header-components/search-keywords-row.css b/assets/css/frontend/header-components/search-keywords-row.css
index ae3f76c5..89ffb595 100644
--- a/assets/css/frontend/header-components/search-keywords-row.css
+++ b/assets/css/frontend/header-components/search-keywords-row.css
@@ -1,94 +1,93 @@
-/* Search keywords row */
-.header-components-search__keywords {
+/* Search keywords row + zibll mobile search top offsets */
+
+.header-components-search__keywords,
+.header-slider-search .search-keywords {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 10px;
     justify-content: center;
+    text-align: center;
 }
 
-.header-components-search__kw-tag {
+.header-components-search__kw-tag,
+.header-slider-search .search_keywords {
     display: inline-block;
-    padding: 3px 10px;
-    font-size: 12px;
+    padding: 3px 5px;
+    font-size: 0.85em;
     line-height: 1.4;
     border-radius: 100px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(6px);
-    color: inherit;
+    background: rgba(255, 255, 255, 0.8);
+    color: #888;
     text-decoration: none;
     transition: background 0.2s;
 }
 
-.header-components-search__kw-tag:hover {
-    background: rgba(255, 255, 255, 0.4);
+.filter-blur .header-slider-search .search_keywords,
+.filter-blur .header-components-search__kw-tag {
+    -webkit-backdrop-filter: saturate(5) blur(20px);
+    backdrop-filter: saturate(5) blur(20px);
 }
 
-@media (max-width: 991px) {
-    .header-components {
-        height: var(--pc-height);
-    }
-
-    .header-components-search {
-        top: calc(50% + 44px);
-        max-width: 560px;
-    }
+.header-components-search__kw-tag:hover,
+.header-slider-search .search_keywords:hover {
+    background: rgba(255, 255, 255, 0.95);
 }
 
+/* zibll mobile (max-width: 767px) search / card offsets */
 @media (max-width: 767px) {
     .header-components {
         height: var(--m-height);
     }
 
-    .header-components__content.slide-text {
-        width: calc(100% - 28px);
-        max-width: 480px;
-        top: 40%;
-        padding-top: 0;
+    .header-components--gradient {
+        height: var(--m-height);
     }
 
-    .header-components__content.slide-text .slide-title {
-        font-size: clamp(1.25rem, 5vw, 1.75rem);
-        margin-bottom: 10px;
-    }
-
-    .header-components__content[style*="--hero-text-size-m"] .slide-title {
-        font-size: var(--hero-text-size-m);
-    }
-
-    .header-components__content.slide-text .slide-desc {
-        font-size: 0.875rem;
-        line-height: 1.5;
-    }
-
-    .header-components-search {
-        top: calc(50% + 20px);
-        width: calc(100% - 24px);
-        max-width: 420px;
-        padding: 0 12px;
+    .header-slider-search,
+    .header-components-search,
+    .header-slider-search.abs-center,
+    .header-components-search.abs-center {
         font-size: 12px;
+        top: calc(50% - 40px);
+        width: 100%;
+        max-width: 840px;
+        padding: 0 20px;
     }
 
+    .card-1 .header-slider-search,
     .card-1 .header-components-search,
+    .card-2 .header-slider-search,
     .card-2 .header-components-search {
-        top: calc(50% + 46px);
+        top: calc(50% - 1px);
     }
 
+    .card-5 .header-slider-search,
     .card-5 .header-components-search,
+    .card-6 .header-slider-search,
     .card-6 .header-components-search {
-        top: calc(50% - 22px);
+        top: calc(50% - 83px);
     }
 
+    .card-7 .header-slider-search,
     .card-7 .header-components-search,
+    .card-8 .header-slider-search,
     .card-8 .header-components-search {
-        top: calc(50% - 52px);
+        top: calc(50% - 120px);
     }
 
+    .header-slider-search-more.before {
+        margin-bottom: 1em;
+    }
+
+    .header-slider-search .line-form,
     .header-components-search .line-form {
         font-size: 14px;
         padding: 4px 12px;
     }
 
+    .header-slider-search .scale-placeholder.is-focus,
+    .header-slider-search .line-form-input:focus ~ .scale-placeholder,
     .header-components-search .scale-placeholder.is-focus,
     .header-components-search .line-form-input:focus ~ .scale-placeholder {
         transform: translateY(-32px);
@@ -96,6 +95,7 @@
         color: #fff;
     }
 
+    .header-slider-card,
     .header-components-card {
         margin-top: -35px;
     }
@@ -142,48 +142,27 @@
     .icon-cover-subtitle {
         display: none;
     }
-}
 
-@media (max-width: 480px) {
-    .header-components {
-        height: var(--m-height);
+    /* zibll ~640px: slide-header text padding 52px */
+    .header-components.slide-header .slide-text,
+    .header-components.slide-header .header-components__content.slide-text {
+        padding-top: 52px;
     }
 
-    .header-components__content.slide-text .slide-title {
-        font-size: clamp(1.1rem, 5.4vw, 1.4rem);
-        margin-bottom: 8px;
-    }
-
-    .header-components__content.slide-text .slide-desc {
-        font-size: 0.8125rem;
-    }
-
-    .header-components-search {
-        top: calc(50% + 26px);
-        width: calc(100% - 20px);
-        padding: 0 10px;
-    }
-
-    .card-5 .header-components-search,
-    .card-6 .header-components-search {
-        top: calc(50% - 12px);
-    }
-
-    .card-7 .header-components-search,
-    .card-8 .header-components-search {
-        top: calc(50% - 40px);
-    }
-
-    .header-components-search .search-input-text {
-        padding-right: 40px;
-    }
-
-    .header-components-search__submit {
-        width: 34px;
-        height: 34px;
+    .s-desc,
+    .slide-text {
+        padding: 0.7em;
     }
 }
 
+@media (max-width: 640px) {
+    .header-components.slide-header .slide-text,
+    .header-components.slide-header .header-components__content.slide-text {
+        padding-top: 52px;
+    }
+}
+
+/* Nav transparent helpers (when hero is present) */
 .site-nav.nav-transparent {
     background-color: transparent;
     border-bottom-color: transparent;
@@ -233,7 +212,6 @@
     border-color: rgba(255, 255, 255, 0.5);
 }
 
-/* 滚动后恢复实心 */
 .site-nav.nav-transparent.is-scrolled {
     background-color: var(--surface-page);
     border-bottom-color: var(--color-line);
@@ -262,9 +240,7 @@
     border-color: var(--color-line);
 }
 
-/* ============================================================
- * Header Slider — Swiper Navigation & Pagination (Zibll-style)
- * ============================================================ */
+/* Swiper nav / pagination (header) */
 .header-components .swiper-button-prev,
 .header-components .swiper-button-next {
     width: 30px;
@@ -282,8 +258,8 @@
     font-weight: 700;
 }
 
-.header-slider:hover .swiper-button-prev,
-.header-slider:hover .swiper-button-next {
+.header-components:hover .swiper-button-prev,
+.header-components:hover .swiper-button-next {
     opacity: 0.8;
 }
 
@@ -317,8 +293,7 @@
 }
 
 /* ============================================================
- * Banner Module — 1:1 Zibll (.s-desc / widget slider card)
- * 圆角 = --main-radius，阴影 = main-shadow，文案底渐变条
+ * Banner Module — zibll .s-desc style (unchanged geometry)
  * ============================================================ */
 .banner-module {
     position: relative;
@@ -330,17 +305,11 @@
     background: var(--main-bg-color, var(--surface-1));
 }
 
-/*
- * Aspect-ratio card height.
- * Global reset uses box-sizing:border-box, so the classic
- * height:0 + padding-bottom trick collapses to 0 unless we
- * force content-box (or use aspect-ratio).
- */
 .banner-module__swiper {
     position: relative;
     width: 100%;
     height: auto;
-    aspect-ratio: 5 / 2; /* 40% */
+    aspect-ratio: 5 / 2;
     overflow: hidden;
 }
 
@@ -472,7 +441,7 @@
     }
 
     .banner-module__swiper {
-        aspect-ratio: 2 / 1; /* 50% */
+        aspect-ratio: 2 / 1;
         height: auto;
     }
 
diff --git a/assets/css/frontend/header-components/widget-device-visibility.css b/assets/css/frontend/header-components/widget-device-visibility.css
index 7a11e41d..b7030989 100644
--- a/assets/css/frontend/header-components/widget-device-visibility.css
+++ b/assets/css/frontend/header-components/widget-device-visibility.css
@@ -21,10 +21,8 @@
 
 /* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
 
-/* WordPress Admin Bar 已全局禁用，无需偏移规则 */
-
 /* ============================================================
- * Layer 1: Swiper 轮播
+ * Layer 1: Swiper shell
  * ============================================================ */
 .header-components {
     position: relative;
@@ -37,23 +35,23 @@
     background: #111;
 }
 
-/* slide-header 模式：背景保持满铺，仅将文本层下移避开导航 */
 .header-components.slide-header {
     padding-top: 0;
+    border-radius: 0;
 }
 
+/* zibll: .slide-header .slide-text { padding-top: 70px; } — nav clearance only */
+.header-components.slide-header .slide-text,
 .header-components.slide-header .header-components__content.slide-text {
-    padding-top: var(--nav-fixed-reserve, var(--nav-height, 60px));
+    padding-top: 70px;
 }
 
-/* WordPress Admin Bar 已全局禁用，无需偏移规则 */
-
-/* 渐变兜底 */
+/* Gradient fallback */
 .header-components--gradient {
     background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active, var(--color-primary-dark)) 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: block;
+    position: relative;
+    height: var(--pc-height);
 }
 
 .header-components--gradient::before {
@@ -65,7 +63,6 @@
     pointer-events: none;
 }
 
-/* Swiper 内部 */
 .header-components .swiper-wrapper {
     position: absolute;
     inset: 0;
@@ -80,7 +77,6 @@
     cursor: pointer;
 }
 
-/* 幻灯片背景图 */
 .header-components__slide-bg {
     position: absolute;
     inset: 0;
@@ -100,7 +96,6 @@
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
 }
 
-/* 视频背景 */
 .header-components__video {
     position: absolute;
     inset: 0;
@@ -110,7 +105,6 @@
     z-index: 0;
 }
 
-/* 图片图层（视差叠加） */
 .header-components__layer {
     position: absolute;
     inset: 0;
@@ -130,18 +124,16 @@
     transform: translateY(calc(var(--scroll-y, 0) * var(--layer-parallax-scale, 0.3) * 1px));
 }
 
-/* 文字视差 */
+/* Text parallax — keep abs-center vertical model (translateY only when abs-center is full-width) */
 .has-text-parallax {
     will-change: transform;
-    transform: translate(-50%, calc(-50% + var(--scroll-y, 0) * var(--hero-text-parallax, 0) * 0.15px));
 }
 
-/* 文字尺寸覆盖 */
-.header-components__content[style*="--hero-text-size-pc"] .slide-title {
-    font-size: var(--hero-text-size-pc);
+.header-components__content[style*="--hero-text-size-pc"] .slide-title,
+.header-components__content[style*="--text-size-pc"] .slide-title {
+    font-size: inherit;
 }
 
-/* 幻灯片遮罩 — 轻量压暗（zibll 以 .s-desc 底条为主） */
 .header-components__slide-overlay {
     position: absolute;
     inset: 0;
@@ -155,7 +147,7 @@
     pointer-events: none;
 }
 
-/* zibll .s-desc 底条文案 */
+/* Bottom-bar .s-desc mode */
 .header-components__content.s-desc,
 .header-components__content.slide-text.s-desc {
     top: auto;
@@ -185,25 +177,71 @@
     background: unset;
 }
 
-/* 搜索层 — header-slider-search */
-.header-components-search {
+/* ============================================================
+ * Layer 2: Search — zibll .header-slider-search
+ * Full-width abs-center + fine-tuned top (NOT point-centered).
+ * Title/subtitle are in .header-slider-search-more.before (flow).
+ * ============================================================ */
+.header-slider-search.abs-center,
+.header-components-search.abs-center {
     position: absolute;
-    left: 50%;
+    left: 0;
+    right: 0;
+    width: 100%;
     top: calc(50% - 10px);
-    transform: translate(-50%, -50%);
+    transform: translateY(-50%);
+    z-index: 2;
+    margin: auto;
+    max-width: 840px;
+    padding: 0 20px;
+    font-size: 17px;
+    color: #fff;
+    box-sizing: border-box;
+}
+
+.header-slider-search,
+.header-components-search {
     max-width: 840px;
-    width: calc(100% - 40px);
     margin: auto;
     padding: 0 20px;
     font-size: 17px;
+    top: calc(50% - 10px);
     z-index: 2;
-    color: #fff;
 }
 
+.card-0 .header-slider-search,
 .card-0 .header-components-search {
     top: calc(50% + 20px);
 }
 
+.header-slider-search .search-input,
+.header-components-search .search-input {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.header-slider-search-more {
+    color: #fff;
+}
+
+.header-slider-search-more.before {
+    margin-bottom: 1.8em;
+}
+
+.header-slider-search .search-form,
+.header-components-search .search-form {
+    margin: 0;
+    display: block;
+    background: transparent;
+    border-radius: 0;
+    padding: 0;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    transform: none;
+}
+
+.header-slider-search .line-form,
 .header-components-search .line-form {
     background: rgba(255, 255, 255, 0.8);
     border-radius: 100px;
@@ -212,8 +250,12 @@
     color: #555;
     border: none;
     box-shadow: none;
+    position: relative;
 }
 
+.has-blur-pc .header-slider-search .line-form,
+.has-blur-mobile .header-slider-search .line-form,
+.filter-blur .header-slider-search .line-form,
 .has-blur-pc .header-components-search .line-form,
 .has-blur-mobile .header-components-search .line-form,
 .filter-blur .header-components-search .line-form {
@@ -221,12 +263,17 @@
     backdrop-filter: saturate(5) blur(20px);
 }
 
+.header-slider-search .line-form .icon,
+.header-slider-search .line-form a,
 .header-components-search .line-form .icon,
 .header-components-search .line-form a {
     color: #555;
 }
 
-/* 图标卡 — header-slider-card margin-top:-40px */
+/* ============================================================
+ * Layer 3: Icon cards — margin-top:-40px (zibll)
+ * ============================================================ */
+.header-slider-card,
 .header-components-card {
     position: relative;
     margin-top: -40px;
@@ -248,62 +295,43 @@
     background: var(--blur-bg);
 }
 
-.header-components.slide-header {
-    border-radius: 0;
-}
-
 .header-components.slide-header .swiper-slide img,
 .header-components.slide-header .header-components__slide-bg img {
     border-radius: 0 !important;
 }
 
-
-/* 幻灯片文字内容 */
-.header-components__content {
-    position: absolute;
-    bottom: auto;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-    width: calc(100% - 32px);
-    max-width: 920px;
-    text-align: center;
+/* Decorative slide text content (not the main hero stack) */
+.header-components__content.slide-text:not(.s-desc) {
+    /* Placement comes from .abs-center + optional alignment modifiers */
+    z-index: 1;
     color: #fff;
+    max-width: none;
+    width: 100%;
 }
 
 .header-components__title,
 .header-components .slide-title {
     font-family: var(--font-ui);
-    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
     font-weight: 600;
-    margin: 0 0 12px;
-    line-height: 1.25;
+    margin: 0;
+    line-height: 1.35;
     letter-spacing: 0;
     color: #fff;
     text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
 
-.header-components__subtitle {
-    font-size: clamp(0.9rem, 1.4vw, 1.125rem);
-    margin: 0;
-    max-width: 680px;
-    margin-left: auto;
-    margin-right: auto;
-    line-height: 1.6;
-    color: rgba(255, 255, 255, 0.9);
-    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+.header-components__subtitle,
+.header-components .slide-desc {
+    margin: 0.6em 0 0;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
 
 .header-components__description {
-    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
-    margin: 8px auto 0;
-    max-width: 600px;
+    font-size: 0.85em;
+    margin: 0.4em 0 0;
     line-height: 1.5;
-    color: rgba(255, 255, 255, 0.8);
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    color: rgba(255, 255, 255, 0.85);
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
-
-
-
-
diff --git a/assets/css/frontend/zibll-utilities.css b/assets/css/frontend/zibll-utilities.css
index 1bf25ea2..531c115e 100644
--- a/assets/css/frontend/zibll-utilities.css
+++ b/assets/css/frontend/zibll-utilities.css
@@ -42,17 +42,50 @@
   top: 0;
 }
 
+/* zibll .abs-center: full-width vertical center (translateY only).
+ * Header search and slide-text rely on this model. Point-center
+ * (left:50% + translate(-50%,-50%)) is NOT used for these layers. */
 .abs-center {
   position: absolute;
-  left: 50%;
+  left: 0;
+  width: 100%;
   top: 50%;
-  transform: translate(-50%, -50%);
+  right: 0.7em;
+  transform: translateY(-50%);
+  z-index: 1;
 }
 
 /* Zibll abs-center position variants (main.css) */
-.abs-center.left-bottom,
+.abs-center.left-top,
+.abs-center.right-top {
+  transform: unset;
+  top: 0;
+}
+
+.abs-center.right-top {
+  left: auto;
+  width: auto;
+  text-align: right;
+}
+
+.abs-center.left-top {
+  text-align: left;
+}
+
+.abs-center.conter-bottom,
+.abs-center.conter-conter {
+  text-align: center;
+}
+
+.abs-center.right-top,
 .abs-center.right-bottom,
-.abs-center.conter-bottom {
+.abs-center.right-conter {
+  text-align: right;
+}
+
+.abs-center.conter-bottom,
+.abs-center.right-bottom,
+.abs-center.left-bottom {
   top: auto;
   transform: unset;
   bottom: 0;
diff --git a/assets/js/core/slider.js b/assets/js/core/slider.js
index 6b2519e6..79f9cf03 100644
--- a/assets/js/core/slider.js
+++ b/assets/js/core/slider.js
@@ -304,7 +304,7 @@
       if (link && link !== "#") {
         slide.style.cursor = "pointer";
         slide.addEventListener("click", function (e) {
-          if (e.target.closest(".header-components-search, .header-components-card, .hero__btn, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .hero-search, a, button, input")) return;
+          if (e.target.closest(".header-components-search, .header-slider-search, .header-components-card, .header-slider-card, .hero__btn, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .hero-search, a, button, input")) return;
           window.location.href = link;
         });
       }
diff --git a/src/AKSRT/Admin/Schema/SchemaPageDisplay.php b/src/AKSRT/Admin/Schema/SchemaPageDisplay.php
index 677f271a..e63c069c 100644
--- a/src/AKSRT/Admin/Schema/SchemaPageDisplay.php
+++ b/src/AKSRT/Admin/Schema/SchemaPageDisplay.php
@@ -117,6 +117,25 @@ class SchemaPageDisplay {
                             ['key' => 'header_components_search_popular_limit', 'label' => '热词数量', 'type' => 'number', 'default' => 5, 'min' => 1, 'max' => 20, 'dependsOn' => ['key' => 'header_components_search_show_keywords', 'value' => true]],
                             ['key' => 'header_components_search_show_input_cat', 'label' => '显示分类搜索', 'type' => 'switch', 'default' => false, 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true]],
                             ['key' => 'header_components_search_show_type', 'label' => '显示类型切换', 'type' => 'switch', 'default' => false, 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true]],
+                            [
+                                'key'           => 'header_components_search_before_html',
+                                'label'         => '搜索上方额外内容',
+                                'type'          => 'textarea',
+                                'sanitize_type' => 'html',
+                                'default'       => '<div class="em16 font-bold mb10">更优雅的Wordpress主题</div>
+<div>这是导航栏幻灯片多功能组件，可在后台进行配置</div>',
+                                'dependsOn'     => ['key' => 'header_components_search_enabled', 'value' => true],
+                                'help'          => 'Hero 主标题/副标题写在这里（支持 HTML）。勿依赖幻灯片文案，以免与搜索重叠；请注意组件总高度。',
+                            ],
+                            [
+                                'key'           => 'header_components_search_after_html',
+                                'label'         => '搜索下方额外内容',
+                                'type'          => 'textarea',
+                                'sanitize_type' => 'html',
+                                'default'       => '',
+                                'dependsOn'     => ['key' => 'header_components_search_enabled', 'value' => true],
+                                'help'          => '支持 HTML；请注意组件总高度。',
+                            ],
                         ]],
                         ['key' => 'cards', 'title' => '图标卡片样式', 'fields' => [
                             ['key' => 'header_components_filter_blur_devices', 'label' => '容器模糊设备', 'type' => 'checkbox', 'default' => [], 'dependsOn' => ['key' => 'header_components_cards_enabled', 'value' => true], 'options' => [
diff --git a/src/AKSRT/Settings/DisplayRuntime.php b/src/AKSRT/Settings/DisplayRuntime.php
index 74e1cf50..4596dda6 100644
--- a/src/AKSRT/Settings/DisplayRuntime.php
+++ b/src/AKSRT/Settings/DisplayRuntime.php
@@ -67,7 +67,7 @@ class DisplayRuntime {
     /**
      * Hero 搜索组件详细配置（PC/移动分别 + 子选项）
      *
-     * @return array{pc:bool,mobile:bool,show_keywords:bool,popular_limit:int,show_input_cat:bool,show_type:bool,keywords:string[],categories:array,type_options:array}
+     * @return array{pc:bool,mobile:bool,show:bool,show_keywords:bool,popular_limit:int,show_input_cat:bool,show_type:bool,keywords:string[],categories:array,type_options:array,before_html:string,after_html:string}
      */
     public static function get_header_components_search_config(): array {
         $settings = Settings::get_all();
@@ -83,6 +83,11 @@ class DisplayRuntime {
         $show_cat  = !empty($settings['header_components_search_show_input_cat']);
         $show_type = !empty($settings['header_components_search_show_type']);
 
+        // Mobile: hide hot keywords to keep the overlay short (zibll parity).
+        if ($is_mobile) {
+            $show_kw = false;
+        }
+
         $keywords = [];
         if ($show && $show_kw) {
             $raw = $settings['hot_search_keywords'] ?? '';
@@ -108,6 +113,13 @@ class DisplayRuntime {
             }
         }
 
+        $before_html = isset($settings['header_components_search_before_html'])
+            ? (string) $settings['header_components_search_before_html']
+            : '';
+        $after_html = isset($settings['header_components_search_after_html'])
+            ? (string) $settings['header_components_search_after_html']
+            : '';
+
         return [
             'pc'             => $pc_on,
             'mobile'         => $mobile_on,
@@ -119,6 +131,8 @@ class DisplayRuntime {
             'keywords'       => $keywords,
             'categories'     => $categories,
             'type_options'   => $type_options,
+            'before_html'    => $before_html,
+            'after_html'     => $after_html,
         ];
     }
 
diff --git a/templates/parts/home-modules/module-hero.php b/templates/parts/home-modules/module-hero.php
index a8372e37..46822d59 100644
--- a/templates/parts/home-modules/module-hero.php
+++ b/templates/parts/home-modules/module-hero.php
@@ -2,8 +2,11 @@
 /**
  * Home module: header components hero + floating search + icon cards.
  *
+ * DOM mirrors zibll header-slider:
+ *   container > slider | search overlay (before + form + after) | cards
+ *
  * @package AKSRT
- * @version 4.1.0
+ * @version 4.2.0
  */
 defined('ABSPATH') || exit;
 
@@ -18,7 +21,16 @@ if (!is_array($cfg)) {
 $hero_banners = function_exists('aksrt_get_banners') ? aksrt_get_banners(8, 'hero') : [];
 
 $settings = function_exists('aksrt_get_all_settings') ? aksrt_get_all_settings() : [];
-$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : ['show' => false, 'keywords' => [], 'categories' => [], 'type_options' => []];
+$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : [
+    'show'           => false,
+    'keywords'       => [],
+    'categories'     => [],
+    'type_options'   => [],
+    'before_html'    => '',
+    'after_html'     => '',
+    'show_input_cat' => false,
+    'show_type'      => false,
+];
 $show_search = !empty($search_cfg['show']) || !empty($cfg['with_search']);
 $show_cards = !empty($settings['header_components_cards_enabled']);
 $icon_cards = isset($settings['header_components_icon_cards']) ? (array) $settings['header_components_icon_cards'] : [];
@@ -52,14 +64,25 @@ $search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_ge
 $search_value = trim((string) get_search_query());
 $search_type = function_exists('aksrt_get_search_form_type') ? aksrt_get_search_form_type() : 'post';
 
+/**
+ * Search overlay = zibll .header-slider-search.abs-center
+ * Title/subtitle live in before_html (same flow stack as the form).
+ */
 $render_hero_search = static function (string $search_id) use ($search_placeholder, $search_value, $search_type, $search_cfg): void {
     $_kw         = $search_cfg['keywords'] ?? [];
     $_cats       = $search_cfg['categories'] ?? [];
     $_types      = $search_cfg['type_options'] ?? [];
     $_show_cat   = !empty($search_cfg['show_input_cat']) && !empty($_cats);
     $_show_type  = !empty($search_cfg['show_type']) && !empty($_types);
+    $_before     = isset($search_cfg['before_html']) ? (string) $search_cfg['before_html'] : '';
+    $_after      = isset($search_cfg['after_html']) ? (string) $search_cfg['after_html'] : '';
     ?>
     <div class="header-slider-search header-components-search abs-center">
+        <?php if (trim($_before) !== '') : ?>
+            <div class="header-slider-search-more text-center before">
+                <?php echo wp_kses_post($_before); ?>
+            </div>
+        <?php endif; ?>
         <div class="search-input">
             <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="search-form" data-aksrt-search-form="hero">
                 <input type="hidden" name="aksrt_search_type" value="<?php echo esc_attr($search_type); ?>">
@@ -108,12 +131,17 @@ $render_hero_search = static function (string $search_id) use ($search_placehold
                     </div>
                 </div>
             </form>
+            <?php if (!empty($_kw)) : ?>
+                <div class="header-components-search__keywords search-keywords">
+                    <?php foreach ($_kw as $_kw_text) : ?>
+                        <a href="<?php echo esc_url(add_query_arg('s', rawurlencode($_kw_text), home_url('/'))); ?>" class="header-components-search__kw-tag search_keywords"><?php echo esc_html($_kw_text); ?></a>
+                    <?php endforeach; ?>
+                </div>
+            <?php endif; ?>
         </div>
-        <?php if (!empty($_kw)) : ?>
-            <div class="header-components-search__keywords">
-                <?php foreach ($_kw as $_kw_text) : ?>
-                    <a href="<?php echo esc_url(add_query_arg('s', rawurlencode($_kw_text), home_url('/'))); ?>" class="header-components-search__kw-tag"><?php echo esc_html($_kw_text); ?></a>
-                <?php endforeach; ?>
+        <?php if (trim($_after) !== '') : ?>
+            <div class="header-slider-search-more text-center after">
+                <?php echo wp_kses_post($_after); ?>
             </div>
         <?php endif; ?>
     </div>
@@ -186,104 +214,121 @@ if (!empty($hero_banners)) :
     }
     ?>
     <div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components"<?php if ($height_style !== '') : ?> style="<?php echo $height_style; ?>"<?php endif; ?>>
-        <div class="relative zib-slider"><div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
-            <div class="swiper-wrapper">
-                <?php foreach ($hero_banners as $index => $slide) :
-                    $device_vis = $slide['device_visibility'] ?? 'all';
-                    $slide_classes = 'swiper-slide';
-                    if ($device_vis === 'pc') {
-                        $slide_classes .= ' hero-slide--pc-only';
-                    } elseif ($device_vis === 'mobile') {
-                        $slide_classes .= ' hero-slide--mobile-only';
-                    }
-                    if (!empty($slide['video_url'])) {
-                        $slide_classes .= ' hero-slide--has-video';
-                    }
-                    $link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self';
-                    $has_layers = !empty($slide['layers']) && is_array($slide['layers']);
-                    $text_parallax = !empty($slide['text_parallax']);
-                    $text_style = '';
-                    if (!empty($slide['text_size_pc'])) {
-                        $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
-                    }
-                    if (!empty($slide['text_size_m'])) {
-                        $text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
-                    }
-                    if ($text_parallax) {
-                        $text_style .= '--hero-text-parallax:1;';
-                    }
-                ?>
-                    <div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
-                        <div class="header-components__slide-bg">
-                            <?php if (!empty($slide['video_url'])) : ?>
-                                <video class="header-components__video" autoplay muted loop playsinline preload="metadata">
-                                    <source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
-                                </video>
-                            <?php endif; ?>
-                            <?php if (!empty($slide['image'])) : ?>
-                                <img
-                                    src="<?php echo esc_url($slide['image']); ?>"
-                                    alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
-                                    loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
-                                    decoding="async"
-                                    class="fit-cover"
-                                >
-                            <?php elseif (empty($slide['video_url'])) : ?>
-                                <div class="header-components__slide-fallback"></div>
-                            <?php endif; ?>
-                            <?php if ($has_layers) : ?>
-                                <?php foreach ($slide['layers'] as $layer) :
-                                    if (empty($layer['image'])) continue;
-                                    $layer_classes = 'header-components__layer';
-                                    if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
-                                    if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
-                                    $layer_style = '';
-                                    if (!empty($layer['align']) && $layer['align'] !== 'center') {
-                                        $layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
-                                    }
-                                    if (!empty($layer['parallax'])) {
-                                        $pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
-                                        $popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
-                                        $layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
-                                        $layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
-                                    }
-                                ?>
-                                    <div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
-                                <?php endforeach; ?>
-                            <?php endif; ?>
-                        </div>
-                        <div class="header-components__slide-overlay"></div>
-                        <?php
-                        $show_text = !isset($slide['show_text']) || $slide['show_text'];
-                        $has_title = !empty($slide['title']);
-                        $has_subtitle = !empty($slide['subtitle']);
-                        $has_description = !empty($slide['description']);
-                        $text_align = $slide['text_align'] ?? 'left';
-                        ?>
-                        <?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
-                            <div class="header-components__content slide-text<?php echo $text_align !== 'left' ? ' text-' . esc_attr($text_align) : ''; ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
-                                <?php if ($has_title) : ?>
-                                    <h2 class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></h2>
+        <div class="relative zib-slider">
+            <div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
+                <div class="swiper-wrapper">
+                    <?php foreach ($hero_banners as $index => $slide) :
+                        $device_vis = $slide['device_visibility'] ?? 'all';
+                        $slide_classes = 'swiper-slide';
+                        if ($device_vis === 'pc') {
+                            $slide_classes .= ' hero-slide--pc-only';
+                        } elseif ($device_vis === 'mobile') {
+                            $slide_classes .= ' hero-slide--mobile-only';
+                        }
+                        if (!empty($slide['video_url'])) {
+                            $slide_classes .= ' hero-slide--has-video';
+                        }
+                        $link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self';
+                        $has_layers = !empty($slide['layers']) && is_array($slide['layers']);
+                        $text_parallax = !empty($slide['text_parallax']);
+                        // Align CSS vars with zibll --text-size-pc / --text-size-m.
+                        $text_style = '';
+                        if (!empty($slide['text_size_pc'])) {
+                            $text_style .= '--text-size-pc:' . esc_attr((int) $slide['text_size_pc']) . 'px;';
+                            $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
+                        }
+                        if (!empty($slide['text_size_m'])) {
+                            $text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;';
+                            $text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
+                        }
+                        if ($text_parallax) {
+                            $text_style .= '--hero-text-parallax:1;';
+                        }
+                    ?>
+                        <div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
+                            <div class="header-components__slide-bg">
+                                <?php if (!empty($slide['video_url'])) : ?>
+                                    <video class="header-components__video" autoplay muted loop playsinline preload="metadata">
+                                        <source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
+                                    </video>
                                 <?php endif; ?>
-                                <?php if ($has_subtitle) : ?>
-                                    <div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
+                                <?php if (!empty($slide['image'])) : ?>
+                                    <img
+                                        src="<?php echo esc_url($slide['image']); ?>"
+                                        alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
+                                        loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
+                                        decoding="async"
+                                        class="fit-cover"
+                                    >
+                                <?php elseif (empty($slide['video_url'])) : ?>
+                                    <div class="header-components__slide-fallback"></div>
                                 <?php endif; ?>
-                                <?php if ($has_description) : ?>
-                                    <div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
+                                <?php if ($has_layers) : ?>
+                                    <?php foreach ($slide['layers'] as $layer) :
+                                        if (empty($layer['image'])) continue;
+                                        $layer_classes = 'header-components__layer';
+                                        if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
+                                        if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
+                                        $layer_style = '';
+                                        if (!empty($layer['align']) && $layer['align'] !== 'center') {
+                                            $layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
+                                        }
+                                        if (!empty($layer['parallax'])) {
+                                            $pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
+                                            $popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
+                                            $layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
+                                            $layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
+                                        }
+                                    ?>
+                                        <div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
+                                    <?php endforeach; ?>
                                 <?php endif; ?>
                             </div>
-                        <?php endif; ?>
-                    </div>
-                <?php endforeach; ?>
+                            <div class="header-components__slide-overlay"></div>
+                            <?php
+                            // Per-slide decorative text only (zibll .abs-center.slide-text).
+                            // Hero main title/subtitle must live in search before_html.
+                            $show_text = !isset($slide['show_text']) || $slide['show_text'];
+                            $has_title = !empty($slide['title']);
+                            $has_subtitle = !empty($slide['subtitle']);
+                            $has_description = !empty($slide['description']);
+                            $text_align = $slide['text_align'] ?? '';
+                            $text_align_class = '';
+                            if ($text_align !== '' && $text_align !== 'left') {
+                                // zibll uses conter-bottom / left-bottom etc.; keep text-* for existing data.
+                                $text_align_class = ' text-' . sanitize_html_class($text_align);
+                                if (in_array($text_align, ['center', 'conter-conter', 'conter-bottom'], true)) {
+                                    $text_align_class .= ' conter-conter';
+                                } elseif ($text_align === 'left-bottom') {
+                                    $text_align_class .= ' left-bottom';
+                                } elseif ($text_align === 'right-bottom') {
+                                    $text_align_class .= ' right-bottom';
+                                }
+                            }
+                            ?>
+                            <?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
+                                <div class="abs-center slide-text header-components__content<?php echo esc_attr($text_align_class); ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
+                                    <?php if ($has_title) : ?>
+                                        <div class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></div>
+                                    <?php endif; ?>
+                                    <?php if ($has_subtitle) : ?>
+                                        <div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
+                                    <?php endif; ?>
+                                    <?php if ($has_description) : ?>
+                                        <div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
+                                    <?php endif; ?>
+                                </div>
+                            <?php endif; ?>
+                        </div>
+                    <?php endforeach; ?>
+                </div>
             </div>
-
-
-            <?php if ($show_search) : ?>
-                <?php $render_hero_search('header-search-input'); ?>
-            <?php endif; ?>
-        </div>
         </div>
 
+        <?php if ($show_search) : ?>
+            <?php $render_hero_search('header-search-input'); ?>
+        <?php endif; ?>
+
         <?php $render_icon_cards(); ?>
         <?php if (function_exists('aksrt_render_admin_quick_link')) : ?>
         <div class="home-module__admin-tools">
@@ -299,21 +344,27 @@ if (!empty($hero_banners)) :
     ?>
     <div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
         <div class="header-components slide-header header-components--gradient">
-            <div class="header-components__content slide-text text-center">
-                <h1 class="header-components__title slide-title"><?php bloginfo('name'); ?></h1>
-                <div class="header-components__subtitle slide-desc"><?php echo esc_html(get_bloginfo('description', 'display')); ?></div>
-                <?php if ($is_admin_user) : ?>
-                    <p class="header-components__admin-hint" role="note">
-                        <?php esc_html_e('No Hero slides found. Showing fallback site info.', 'aksrt'); ?>
-                    </p>
-                <?php endif; ?>
-            </div>
-
-            <?php if ($show_search) : ?>
-                <?php $render_hero_search('header-search-input-fallback'); ?>
+            <?php if (!$show_search) : ?>
+                <div class="abs-center slide-text header-components__content text-center conter-conter">
+                    <div class="header-components__title slide-title"><?php bloginfo('name'); ?></div>
+                    <div class="header-components__subtitle slide-desc"><?php echo esc_html(get_bloginfo('description', 'display')); ?></div>
+                    <?php if ($is_admin_user) : ?>
+                        <p class="header-components__admin-hint" role="note">
+                            <?php esc_html_e('No Hero slides found. Showing fallback site info.', 'aksrt'); ?>
+                        </p>
+                    <?php endif; ?>
+                </div>
+            <?php elseif ($is_admin_user) : ?>
+                <div class="header-components__admin-hint" role="note" style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;">
+                    <?php esc_html_e('No Hero slides found. Configure slides or search before_html in admin.', 'aksrt'); ?>
+                </div>
             <?php endif; ?>
         </div>
 
+        <?php if ($show_search) : ?>
+            <?php $render_hero_search('header-search-input-fallback'); ?>
+        <?php endif; ?>
+
         <?php $render_icon_cards(); ?>
         <?php if (function_exists('aksrt_render_admin_quick_link')) : ?>
         <div class="home-module__admin-tools">