fix(frontend): align search and header components with reference

tests/widget-system/icon-card-contract.test.cjs

@@ -12,6 +12,7 @@ test('icon card renderers keep vertical and horizontal legacy DOM contracts sepa
   const helper = read('inc/helpers/aksrt-icon-cards.php');
   const widgets = read('src/WidgetSystem/Renderers/GeneralRenderer.php');
   const header = read('inc/helpers/homepage/header-components.php');
+  const mediaBrand = read('inc/helpers/template-tags/media-brand.php');
 
   assert.match(helper, /<div class="icon-card /);
   assert.match(helper, /<div class="icon-cover-card flex ac /);
@@ -23,20 +24,26 @@ test('icon card renderers keep vertical and horizontal legacy DOM contracts sepa
   // combo_info legitimately renders icon_image cards; icon cards must not leak media-card fields.
   assert.doesNotMatch(widgets, /\$card\['description'\]/);
   assert.match(header, /empty\(\$card\['custom_icon'\]\)/);
+  assert.doesNotMatch(mediaBrand, /function aksrt_render_icon_cover_card/);
 });
 
 test('homepage horizontal cards render fully from legacy CSS with no dedicated stylesheet', () => {
   const baseCss = read('assets/css/frontend/base.css');
+  const legacyUtilities = read('assets/css/frontend/legacy-utilities.css');
+  const mainCss = read('assets/css/main.css');
   const widgetCss = read('assets/widgets/frontend.css');
   const scripts = read('src/Core/ScriptsPart1b.php');
 
   assert.equal(fs.existsSync(path.join(root, 'assets/css/frontend/header-cards.css')), false);
   assert.doesNotMatch(baseCss, /\.icon-cover-card\.aksrt-icon-cover-card/);
   assert.doesNotMatch(baseCss, /\.header-components-card/);
-  assert.match(
-    baseCss,
-    /\.header-slider-card\s+\.icon-cover-card\s*\{[^}]*font-size:\s*12px/s,
-  );
+  assert.doesNotMatch(baseCss, /\.header-slider-card\s+\.icon-cover-card\s*\{[^}]*font-size:/s);
+  assert.doesNotMatch(legacyUtilities, /\.px12-sm\s*\{[^}]*font-size:\s*12px/);
+  const mobileTextSize = mainCss.lastIndexOf('.px12-sm,');
+  const mobileBreakpoint = mainCss.lastIndexOf('@media', mobileTextSize);
+  assert.ok(mobileBreakpoint > 0, 'the compact card text utility must remain inside a responsive media rule');
+  assert.match(mainCss.slice(mobileBreakpoint, mobileTextSize + 120), /max-width:\s*640px/);
+  assert.match(mainCss.slice(mobileTextSize, mobileTextSize + 120), /font-size:\s*12px/);
   assert.doesNotMatch(scripts, /header-cards/);
   assert.doesNotMatch(widgetCss, /aksrt-widget-icon-cards \.icon-cover-card/);
 });