/* IPI 站点通用样式（全站加载，任何主题/页面都能用） */

:root {
	/* 主渐变：品牌紫 → 青 → 品红 */
	--ipi-grad-main: linear-gradient(120deg, #7c3aed 0%, #a855f7 40%, #e879f9 100%);
	--ipi-grad-cool: linear-gradient(90deg, #8b5cf6, #22d3ee, #e879f9);
	--ipi-grad-hot: linear-gradient(90deg, #f472b6, #e879f9, #a855f7);
}

/* ============ 渐变文字工具类 ============
   给任意元素加 class 即可（Elementor：高级 → CSS 类，填 grad-text）
   可选变体：grad-text--cool / grad-text--hot / grad-text--main
   ========================================== */
.grad-text,
.grad-text--main {
	background-image: var(--ipi-grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.grad-text--cool {
	background-image: var(--ipi-grad-cool);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.grad-text--hot {
	background-image: var(--ipi-grad-hot);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* 渐变文字常见坑：行内元素换行后渐变会重新起算，用 box-decoration 修正 */
.grad-text,
.grad-text--main,
.grad-text--cool,
.grad-text--hot {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ============ 渐变按钮工具类 ============
   Elementor 表单/按钮控件只给纯色背景，需要品牌渐变时加 class：grad-btn
   用法：Elementor 组件「高级 → CSS 类」填 grad-btn（按钮或表单都可）
   ========================================== */
/* 只给按钮本体上渐变，容器本身不着色（.grad-btn 加在任意祖先上都行） */
.grad-btn .elementor-button,
.grad-btn.elementor-button {
	background-image: var(--ipi-grad-main);
	background-size: 200% 100%;
	box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

.grad-btn .elementor-button:hover,
.grad-btn.elementor-button:hover {
	box-shadow: 0 10px 46px rgba(217, 70, 239, 0.6);
}
/* ============ 页脚工具类（Elementor footer 模板 2770 用） ============
   设计源 design/index.html .site-foot。
   只在 Elementor 控件表达不了的地方补：伪类（:hover）、后代选择器、
   以及被主题/Kit 全局样式污染需要显式压回的属性。
   ============================================================== */
.foot-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	text-decoration: none;
	filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.55));
}
/* 设计稿里 .foot-grid a 的 0.9rem 会盖掉 .logo 的 1.5rem，页脚实际是 14.4px */
.foot-logo .grad-text {
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: 14.4px;
	letter-spacing: 0.12em;
	line-height: 1.6;
}
.foot-logo small {
	font-family: 'Rajdhani', sans-serif;
	font-size: 9.6px;
	font-weight: 600;
	letter-spacing: 0.34em;
	line-height: 1.6;
	text-transform: uppercase;
	color: #6f6489;
	-webkit-text-fill-color: #6f6489;
}

/* 链接列：设计稿 ul{display:grid;gap:11px} + a{0.9rem, hover 变白并左移 6px} */
/* ul 的 font-size 决定 li 行盒高度（设计稿 body 是 16px，本站是 17px，要显式压回） */
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 16px; line-height: 1.6; }
.foot-links a {
	color: #a99fc6;
	font-size: 14.4px;
	line-height: 1.6;
	text-decoration: none;
	transition: color 0.2s, padding-left 0.25s;
}
.foot-links a:hover { color: #fff; padding-left: 6px; }

/* 底栏规格胶囊：设计稿 .pay span（10.88px / ls .1em / r6 / 4px 10px，字体继承 Rajdhani） */
.pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pay > span {
	border: 1px solid rgba(168, 85, 247, 0.18);
	border-radius: 6px;
	padding: 4px 10px;
	font-family: 'Rajdhani', system-ui, sans-serif;
	font-size: 10.88px;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: #6f6489;
}

/* 版权行：Kadence/Kit 对 h6 有 uppercase，设计稿是原样大小写 */
.foot-copy,
.foot-copy .elementor-heading-title { text-transform: none; }

/* ============ 内容页章节头（替代已关闭的 Kadence entry-hero） ============
   设计源 design/index.html 的 .sec-head 结构：
     .eyebrow 小标签 → .sec-title 渐变主标 → .sec-sub 说明
   这里只补 Elementor/主题选项表达不了的：渐变文字裁切、字距、与正文的间距。
   主标题仍是 Kadence 原生渲染的 <h1 class="page-title">，语义与 SEO 不变。
   ============================================================== */
.entry-header.product-archive-title,
.entry-header.post-archive-title,
.entry-header.page-title-wrap,
.site-main > .entry-header {
	margin-bottom: 40px;
}

.entry-header .page-title,
.entry-header .archive-title,
.entry-header .entry-title {
	font-family: 'Orbitron', system-ui, sans-serif;
	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: none;
	margin: 0;
	background-image: linear-gradient(180deg, #fff 20%, #c4b5fd 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 副标题：写在分类/商城页的「描述」里，Kadence 原生渲染在 h1 下方 */
.entry-header .archive-description,
.woocommerce-products-header .page-description,
.woocommerce-products-header .term-description {
	margin-top: 14px;
	font-family: 'Rajdhani', system-ui, sans-serif;
	font-size: 16.8px;
	line-height: 1.6;
	color: #a99fc6;
	max-width: 60ch;
}

.entry-header .archive-description p:last-child,
.woocommerce-products-header .page-description p:last-child {
	margin-bottom: 0;
}

/* shop 页描述与「Showing N results」那一行原本贴在一起，补一点呼吸 */
.woocommerce-products-header .page-description { margin-bottom: 28px; }

/* 移动/平板：页眉是 transparent + absolute（高 74），关掉 entry-hero 后内容会顶到
   页眉底下。桌面靠 .content-area margin-top:5rem 撑开，小屏只有 2rem，这里补齐。 */
@media all and (max-width: 1024px) {
	/* Kadence 的 .content-area 规则以行内 <style> 输出在 head，加载顺序可能在本文件之后，
	   同特异性会被它盖掉，这里提一级 */
	#inner-wrap .content-area { margin-top: 106px; }
}

/* =========================================================
   移动端可达性修补（2026-10-22 手机端审核 P1）
   只补原生控件没有出口的三处：排序下拉焦点、表单输入字号、
   页脚链接行高。其余问题都走主题选项/插件配置，不在这里写。
   ========================================================= */

/* WooCommerce 排序下拉复用了 .button 外观，但没继承焦点环；键盘用户看不见焦点 */
.woocommerce-ordering select:focus-visible,
.woocommerce-ordering select:focus {
	outline: 2px solid #e879f9;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(232, 121, 249, 0.22);
}

/* 输入框 15.2px < 16px 会触发 iOS 聚焦自动缩放；16px 以下一律抬到 16px */
@supports (-webkit-touch-callout: none) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* 页脚链接行高 18px，低于 24px 触控目标；用上下 padding 补，不改视觉间距 */
@media all and (max-width: 767px) {
	.foot-links a { padding-top: 3px; padding-bottom: 3px; display: inline-block; }
}
/* KB 表单的下拉框：background shorthand 里的颜色层被 UA 的 dark color-scheme 吃掉，
   计算后是纯黑，与输入框的半透明底不一致；这里显式给一次 background-color */
.kb-advanced-form select {
	background-color: var(--kb-form-background-color, rgba(255, 255, 255, 0.05));
	color: var(--kb-form-text-color, #ece9fb);
}
/* Kadence 的 select 基础样式写了 outline:0 且 box-shadow 归零（来源 content.min.css 的 select 规则），
   特异性压过上面的 :focus 规则；这里提到 form 层级 + !important 才盖得住 */
.woocommerce-ordering select.orderby:focus,
.woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid #e879f9 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(232, 121, 249, 0.22) !important;
}

/* =========================================================
   商品归档工具条（2026-10-22）：排序下拉 + 视图切换
   WooCommerce/Kadence 的原生外观是「透明底 + 下划线」和
   global-gray-400 灰边，与本站的玻璃胶囊视觉不一致。
   只改这两处控件外观，不动布局与行为。
   ========================================================= */
.kadence-shop-top-row { align-items: center; }

/* 排序下拉：玻璃胶囊，箭头保留 WooCommerce 自带 SVG，只调尺寸与位置 */
form.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	appearance: none;
	min-width: 186px;
	height: 40px;
	padding: 0 40px 0 16px;
	border: 1px solid rgba(168, 85, 247, 0.18) !important;
	border-radius: 10px !important;
	background-color: rgba(255, 255, 255, 0.035) !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' stroke-width='2' stroke='%23a99fc6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-position: right 14px top 50% !important;
	background-size: auto 15px !important;
	background-repeat: no-repeat !important;
	font-family: Rajdhani, sans-serif;
	font-size: 13.6px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 38px;
	color: #ece9fb !important;
	cursor: pointer;
	transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.woocommerce-ordering select.orderby:hover {
	border-color: rgba(168, 85, 247, 0.45) !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' stroke-width='2' stroke='%23e879f9'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}
.woocommerce-ordering select.orderby:focus,
.woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid #e879f9 !important;
	outline-offset: 2px;
	border-color: rgba(232, 121, 249, 0.55) !important;
	box-shadow: 0 0 0 4px rgba(232, 121, 249, 0.22) !important;
}
.woocommerce-ordering select.orderby option {
	background-color: #0b0616;
	color: #ece9fb;
}

/* 视图切换两个方块：同款胶囊描边，选中态用设计稿的洋红而不是主题 palette5 青 */
.kadence-shop-top-row .kadence-product-toggle-container .kadence-toggle-shop-layout {
	width: 40px;
	height: 40px;
	margin-left: 8px;
	padding: 0;
	justify-content: center;
	border: 1px solid rgba(168, 85, 247, 0.18);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.035);
	color: #a99fc6;
	transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.kadence-shop-top-row .kadence-product-toggle-container .kadence-toggle-shop-layout:hover {
	border-color: rgba(168, 85, 247, 0.45);
	background-color: rgba(255, 255, 255, 0.06);
	color: #ece9fb;
}
.kadence-shop-top-row .kadence-product-toggle-container .kadence-toggle-shop-layout.toggle-active {
	border-color: rgba(232, 121, 249, 0.55);
	background-color: rgba(232, 121, 249, 0.1);
	color: #e879f9;
}

/* 结果计数：跟工具条同一基线与字级 */
.woocommerce-result-count {
	font-family: Rajdhani, sans-serif;
	font-size: 13.6px;
	letter-spacing: 0.06em;
	color: #6f6489;
}
@media (max-width: 767px) {
	/* 小屏工具条换行后，排序控件独占一行；宽度要一路从 flex item 传下来，
	   只给 select 写 100% 会因为父级 shrink-to-fit 变成循环依赖（实测卡在 211px） */
	.kadence-shop-top-row { row-gap: 10px; }
	.kadence-shop-top-item.kadence-woo-ordering,
	.kadence-shop-top-item.kadence-woo-ordering .woocommerce-ordering {
		width: 100%;
	}
	.woocommerce-ordering select.orderby { min-width: 0; width: 100%; }
}