From e45bfc6eecc70207b85ff1473aa44709dddafe57 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Fri, 24 Jul 2026 11:42:13 +0800
Subject: [PATCH] fix(header): restore gutters-5 gaps on homepage icon cards

Homepage never loaded zibll-utilities (single-post only), so .gutters-5 padding was missing and cards stuck together while other pages looked correct.
---
 .../frontend/header-components/dark-theme.css | 49 +++++++++++++++++++
 src/AKSRT/Core/ScriptsPart1b.php              | 10 ++++
 2 files changed, 59 insertions(+)

diff --git a/assets/css/frontend/header-components/dark-theme.css b/assets/css/frontend/header-components/dark-theme.css
index 9a393b1a..fd001931 100644
--- a/assets/css/frontend/header-components/dark-theme.css
+++ b/assets/css/frontend/header-components/dark-theme.css
@@ -16,7 +16,56 @@ body.dark-theme .header-components-search__input {
  * DOM: .header-slider-card.container > (.zib-widget.padding-10|div)
  *        > .flex.jse.flex-row.gutters-5.flex-col-sm-2
  *          > (.flex1|.relative-h) > [.main-color >] .icon-cover-card.flex.ac.(zib-widget|padding-10)
+ *
+ * IMPORTANT: gutters/flex helpers must live here (not only zibll-utilities.css).
+ * zibll-utilities was single-post-only, so homepage cards stuck together while
+ * other pages that load utilities showed 10px gaps — exact user screenshot bug.
  * ============================================================ */
+
+/* Self-contained zibll flex + gutters for header cards (page-type independent) */
+.header-slider-card .flex,
+.header-components-card .flex {
+    display: flex;
+}
+.header-slider-card .flex.jse,
+.header-components-card .flex.jse,
+.header-slider-card .jse,
+.header-components-card .jse {
+    justify-content: space-evenly;
+}
+.header-slider-card .flex-row,
+.header-components-card .flex-row {
+    flex-direction: row;
+}
+.header-slider-card .flex.ac,
+.header-components-card .flex.ac,
+.header-slider-card .ac,
+.header-components-card .ac {
+    align-items: center;
+}
+/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap */
+.header-slider-card .gutters-5,
+.header-components-card .gutters-5 {
+    margin: -5px;
+}
+.header-slider-card .gutters-5 > *,
+.header-components-card .gutters-5 > * {
+    padding: 5px;
+}
+.header-slider-card .flex1,
+.header-components-card .flex1,
+.header-slider-card .flex .flex1,
+.header-components-card .flex .flex1 {
+    flex: 1;
+    overflow: hidden;
+    min-width: 0;
+}
+.header-slider-card .relative-h,
+.header-components-card .relative-h {
+    position: relative;
+    height: 100%;
+}
+
 .header-slider-card,
 .header-components-card {
     position: relative;
diff --git a/src/AKSRT/Core/ScriptsPart1b.php b/src/AKSRT/Core/ScriptsPart1b.php
index 50d7a1d6..d7094fd5 100644
--- a/src/AKSRT/Core/ScriptsPart1b.php
+++ b/src/AKSRT/Core/ScriptsPart1b.php
@@ -274,6 +274,16 @@ $hmb_js = get_template_directory() . '/assets/js/header-newadd.js';
 
         // 顶部多功能组件：按 page-type 启用结果入队（对齐 zibll，不绑死首页）
         if (function_exists('aksrt_header_slide_is_show') && aksrt_header_slide_is_show()) {
+            // flex/gutters used by icon cards (same helpers single-post loads via zibll-utilities)
+            $zu_path = get_template_directory() . '/assets/css/frontend/zibll-utilities.css';
+            if (file_exists($zu_path)) {
+                wp_enqueue_style(
+                    'aksrt-zibll-utilities',
+                    $base_uri . '/assets/css/frontend/zibll-utilities.css',
+                    is_string($deps[0] ?? null) ? [$deps[0]] : (array) $deps,
+                    filemtime($zu_path) ?: $version
+                );
+            }
             $enqueue_module('header-components');
         }