/* ==========================================================================
   CardSpicy · 页头搜索（Apple 式极简）  v1.2.0
   --------------------------------------------------------------------------
   收起态：页头里**只有一枚 40×40 的圆形放大镜**
   展开态：从页头下沿推出一个白条，居中一条 660px 的搜索框。
           🔴🔴 **白条里就只有这一条搜索框** —— 没有结果列表、没有文案、
              没有快捷入口（2026-09-23 用户：「Search products 这一行是可以有的，
              然后它下面那些全部都不要……这样画面就简洁」）。
           ⇒ 面板**任何状态下都是恰好一行高**，「点开会变大」结构上不可能发生。

   🔴 面板 `top` 绑 `--cs-hdr-now`（与 mega menu 面板同一套变量）⇒ 与页头零间隙。
   🔴 层级：公告条 8600 · 导航行 8500 · mega 遮罩 8990 · mega 面板 9000
            · **本面板 10000** · 浮动购物车 9999 · 卡具规格窗模态 100001
      ⇒ 取 10000 有两个作用：
        ① 盖住 mega 面板（9000）与它的遮罩（8990）—— 两个面板都从 `--cs-hdr-now` 起、会重叠；
        ② 盖住右下角那枚浮动购物车（9999）。
      ⇒ 因此**不需要**去改 cs-mega-menu.php 做互斥（面板天然盖住它）。
      ⇒ 卡具规格窗（100001）是模态，盖在搜索之上是正确的，不动它。
      ※ v1.1.0 时面板会随结果条数长高（5 条到 y=646）⇒ 必须靠 10000 压住购物车；
        v1.2.0 去掉结果后恒为一行，这条层级只是「顺手保持正确」。
   🔴 面板宽度只用 `min(660px, 100% - 32px)` 一处控制。
   ========================================================================== */

.cs-search {
	position: relative;
	margin: 0;
	flex: 0 0 auto;          /* 页头里固定占 40px，不参与伸缩，两栏布局不受影响 */
}

/* ---------------------------------------------------------------- 收起态
   一枚圆形放大镜。与页头里其它图标按钮（账户 / 购物车）同一调子。 */
.cs-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #f5f5f7;
	color: #1d1d1f;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.cs-search__toggle:hover { background: #ebebf0; }
.cs-search__toggle:focus-visible { outline: 2px solid #8B1A1A; outline-offset: 2px; }
.cs-search[data-open="1"] .cs-search__toggle { background: #e8e8ed; }
.cs-search__toggle svg { display: block; }

/* ---------------------------------------------------------------- 展开浮层
   `hidden` 与 `[data-open]` 双层控制：JS 先摘 hidden 再在下一帧加 data-open，
   否则 opacity/transform 的过渡不会跑（元素刚从 display:none 出来）。
   🔴 不做 `max-height` / `overflow` —— 内容恒为一行，不需要滚动容器。 */
.cs-search__sheet {
	position: fixed;
	top: var(--cs-hdr-now, 111px);
	left: 0;
	right: 0;
	z-index: 10000;
	background: #fff;
	border-top: 1px solid #e8e8ed;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.cs-search__sheet[data-open="1"] { opacity: 1; visibility: visible; transform: none; }
.cs-search__sheet[hidden] { display: none; }

.cs-search__in {
	width: min(660px, calc(100% - 32px));
	margin: 0 auto;
	padding: 18px 0;
}

/* ---------------------------------------------------------------- 大搜索框
   🔴 面板里**唯一**的内容。不要再往 `.cs-search__in` 里加任何东西。 */
.cs-search__form {
	display: flex;
	align-items: center;
	height: 50px;
	background: #f5f5f7;
	border: 1px solid #e3e3e8;
	border-radius: 999px;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cs-search__form:focus-within {
	background: #fff;
	border-color: #c9c9cf;
	box-shadow: 0 0 0 3px rgba(139, 26, 26, .10);
}

.cs-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 6px 0 22px;
	border: 0;
	background: transparent;
	outline: none;
	font-family: inherit;
	/* 🔴🔴 16px 是硬下限：小于 16px 时 iOS Safari 聚焦会自作主张放大整个页面。
	   v1.0.0 就是 13.5px，用户的原话：「我点那个搜索，请不要放大」。
	   **任何重构都不许把它调回去**；也不要用 maximum-scale=1 去堵（伤害可访问性）。 */
	font-size: 16px;
	line-height: 1;
	letter-spacing: -.005em;
	color: #1d1d1f;
	-webkit-appearance: none;
	appearance: none;
}
.cs-search__input::placeholder { color: #86868b; }
/* Safari 自带的清除叉会跟我们的 ✕ 撞在一起 */
.cs-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.cs-search__clear {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	margin-right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #86868b;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}
.cs-search__clear:hover { background: #e8e8ed; color: #1d1d1f; }
.cs-search__clear:focus-visible { outline: 2px solid #8B1A1A; outline-offset: 1px; }
/* 🔴 上面写了 display:inline-flex ⇒ 必须补这条，否则 `hidden` 属性被压掉、✕ 常驻 */
.cs-search__clear[hidden] { display: none; }
.cs-search__clear svg { display: block; }

.cs-search__go {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin-right: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #6e6e73;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}
.cs-search__go:hover { background: #e8e8ed; color: #1d1d1f; }
.cs-search__go:focus-visible { outline: 2px solid #8B1A1A; outline-offset: 1px; }
.cs-search__go svg { display: block; }

/* ==========================================================================
   窄屏
   ========================================================================== */
@media (max-width: 620px) {
	/* JS 未跑时 `--cs-hdr-now` 不存在 ⇒ 手机上的兜底值跟桌面不同（公告条换行更高） */
	.cs-search__sheet { top: var(--cs-hdr-now, 131px); }
	.cs-search__in { width: calc(100% - 24px); padding: 14px 0; }
	.cs-search__form { height: 46px; }
	/* 窄屏把 16px 再写一遍：iOS 的自动放大只跟**实际生效的字号**有关，
	   而手机上最容易被人「顺手压缩一下留白」的就是这里 ⇒ 显式重申，别让将来的人改掉。 */
	.cs-search__input { padding-left: 18px; font-size: 16px; }
	.cs-search__go { flex: 0 0 42px; width: 42px; height: 42px; }
}

/* 用户要求减弱动效：面板不做位移动画 */
@media (prefers-reduced-motion: reduce) {
	.cs-search__sheet { transition: opacity .01ms; transform: none; }
	.cs-search__toggle { transition: none; }
}