/* ==========================================================================
   Shineyoo 全站设计系统 v2.0 —— 「Pro Tool」工业工具风
   ==========================================================================
   设计来源：用户 2026-10-10 提供的
             premium_shineyoo_v4_1_pro_grade_tool_style.html

   怎么用（30 秒）：
     后台 → 外观 → 自定义 → 附加 CSS → 把这一整份粘进去 → 发布。
     或者放进子主题的 style.css（推荐，见下方「放哪里」）。

   改设计：
     颜色、字体、间距一律改「第 0 节」的 :root 变量，别在别处写死十六进制。

   ⚠️ 这一版和上一版（v1.0）是完全相反的两套，不能混用：
        上一版 = 纯黑底 + 霓虹红 #FF1E27 + 胶囊圆角 + 毛玻璃
        这一版 = 浅灰底 + 工具黄 #F59E0B + 直角 + 硬阴影
      如果你之前已经把旧版粘进后台了，去
      「外观 → 自定义 → 附加 CSS」全选清空，再粘这一份。
      两套并存的结果是页面一半黑一半白，而且因为加载顺序不固定，极难排查。

   ⚠️ 本文件不需要 Tailwind，也不需要任何构建工具。
      样板里的 Tailwind 工具类已经全部翻译成下面这些 sy- 类名。
   ========================================================================== */


/* ==========================================================================
   0. 设计令牌 —— 全站唯一的色值 / 字体 / 尺寸来源
   ========================================================================== */
:root {

	/* --- 颜色：全站只有这些，不许自创 ------------------------------------ */
	--sy-ink:          #111111;   /* 主文字、深色区块底、描边 */
	--sy-ink-2:        #27272A;   /* 次级深色面：页脚、深色商品区 */
	--sy-ink-3:        #3F3F46;   /* 深色面上的描边、分隔 */
	--sy-ink-4:        #52525B;   /* 深色面上的次级描边 */

	--sy-paper:        #F4F4F5;   /* 页面底色（浅灰） */
	--sy-white:        #FFFFFF;   /* 卡片底 */

	--sy-amber:        #F59E0B;   /* 工具黄。全站唯一的强调色 */
	--sy-amber-dark:   #D97706;   /* 黄色按钮的悬停态 */
	--sy-amber-tint:   #FFFBEB;   /* 黄色极淡底纹 */

	--sy-red:          #DC2626;   /* 危险红。只给硅胶「禁油」用 */
	--sy-red-dark:     #B91C1C;   /* 危险红深一档（斜纹、悬停） */
	--sy-red-tint:     #FEF2F2;   /* 硅胶卡片底纹 */
	--sy-red-line:     #FEE2E2;   /* 硅胶卡片描边 */

	--sy-line:         #E5E7EB;   /* 浅底上的描边 */
	--sy-line-soft:    #F3F4F6;   /* 浅底上的浅分隔 */
	--sy-muted:        #6B7280;   /* 浅底上的辅助文字（对比度 4.8:1，达标） */
	--sy-muted-dark:   #9CA3AF;   /* 深色底上的辅助文字 */
	--sy-ok:           #22C55E;   /* 有货绿点。只用于库存状态 */

	/* --- 字体：只有两款，不许加第三款 ------------------------------------ */
	--sy-font-head: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	--sy-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sy-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* --- 版心与间距 ------------------------------------------------------ */
	--sy-maxw:        1400px;
	--sy-gutter:      40px;    /* 左右留白，手机端自动减到 24px */
	--sy-section-y:   96px;    /* 大区块上下留白，手机端减半 */

	/* --- 形状：这一版是直角。全站所有方块不许有圆角 ---------------------- */
	--sy-radius:      0px;
	--sy-radius-sm:   2px;     /* 只给极小徽章用，其他地方一律 0 */

	/* --- 硬阴影：样板里最有辨识度的元素。偏移实心、不虚化 ----------------- */
	--sy-shadow-hard:     4px 4px 0 var(--sy-ink);
	--sy-shadow-hard-sm:  2px 2px 0 var(--sy-ink);
	--sy-shadow-hard-red: 4px 4px 0 var(--sy-red);
	--sy-shadow-hard-amber: 4px 4px 0 var(--sy-amber);
	--sy-shadow-hard-line:  4px 4px 0 var(--sy-line);

	/* --- 过渡：全站只有这一条曲线 --------------------------------------- */
	--sy-ease: 0.15s ease-out;
	--sy-ease-hover: 0.25s ease;

	/* --- 告诉 WooCommerce 自己的配色（新版 WooCommerce 内置的变量）------
	   不设这几个，WooCommerce 的默认按钮和表单会跑出一套紫色，
	   和全站对不上。设了之后购物车、结账、我的账户全部自动跟着变。 */
	--wc-primary:             var(--sy-ink);
	--wc-primary-text:        #FFFFFF;
	--wc-secondary:           var(--sy-paper);
	--wc-secondary-text:      var(--sy-ink);
	--wc-highlight:           var(--sy-amber);
	--wc-highlight-text:      var(--sy-ink);
	--wc-content-bg:          var(--sy-white);
	--wc-subtext:             var(--sy-muted);
	--wc-form-border-color:   var(--sy-ink);
	--wc-form-border-radius:  0px;
	--wc-form-border-width:   2px;
}


/* ==========================================================================
   1. 基础
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--sy-paper);
	color: var(--sy-ink);
	font-family: var(--sy-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;           /* 移动端不许出现横向滚动条 */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* 焦点圈：键盘用户必须看得见。别删 —— 这是无障碍硬要求，也是验收项 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--sy-amber);
	outline-offset: 2px;
}

/* 深色底上的焦点圈换成白色，否则黄色压在黄色上会看不见 */
.sy-on-dark a:focus-visible,
.sy-on-dark button:focus-visible { outline-color: #FFFFFF; }

/* 屏幕阅读器专用文字（做无障碍标签用，视觉上不显示） */
.sy-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 减少动态效果：系统开了这个开关就把所有动画停掉。
   既是无障碍要求（前庭功能障碍、晕动症），也是搜索评分项。别删。 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 兜底：JS 挂掉时内容不能隐形。
   这一版没有入场动画，所以本来不存在隐形风险；
   保留这一段是为了防住以后有人又加回 opacity:0 的动画。 */
[hidden], .is-hidden { display: none !important; }


/* ==========================================================================
   2. 排印层级
   ========================================================================== */

/* 所有标题一律 Oswald（窄体、有力量感），并默认全大写 */
h1, h2, h3, h4, h5, h6,
.sy-display, .sy-h1, .sy-h2, .sy-h3, .sy-h4 {
	font-family: var(--sy-font-head);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 0.6em;
	color: var(--sy-ink);
}

/* 首页英雄区标题，一屏最多一处 */
.sy-display {
	font-size: clamp(40px, 8vw, 76px);
	line-height: 1.05;
	margin-bottom: 24px;
}

/* 每个区块的开头 */
.sy-h2 {
	font-size: clamp(28px, 4.4vw, 46px);
	margin-bottom: 16px;
}

.sy-h3 {
	font-size: clamp(20px, 2.4vw, 28px);
	margin-bottom: 12px;
}

.sy-h4 {
	font-family: var(--sy-font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

/* 标题里想弱化后半句：套一层这个 span，会变成灰色 */
.sy-display .sy-dim,
.sy-h2 .sy-dim { color: #9CA3AF; }
.sy-on-dark .sy-display .sy-dim,
.sy-on-dark .sy-h2 .sy-dim { color: var(--sy-muted-dark); }

/* 小标签 / 分组标题：全大写、宽字距、小号 */
.sy-eyebrow,
.sy-label {
	font-family: var(--sy-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sy-muted);
	margin: 0 0 8px;
}

/* 导语段 */
.sy-lead {
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 500;
	color: #374151;
	line-height: 1.7;
	margin: 0 0 28px;
}

.sy-body  { font-size: 16px; line-height: 1.7; }
.sy-small { font-size: 14px; line-height: 1.6; color: var(--sy-muted); }

/* 深色区块里的文字自动转白 */
.sy-on-dark { color: #FFFFFF; }
.sy-on-dark h1, .sy-on-dark h2, .sy-on-dark h3, .sy-on-dark h4,
.sy-on-dark .sy-display, .sy-on-dark .sy-h2, .sy-on-dark .sy-h3 {
	color: #FFFFFF;
}
.sy-on-dark p,
.sy-on-dark .sy-lead { color: var(--sy-muted-dark); }
.sy-on-dark .sy-eyebrow,
.sy-on-dark .sy-label { color: var(--sy-amber); }

/* 内部链接：默认带下划线，悬停变黄。
   注意：这是给正文用的。导航和按钮里的链接另有一套样式。 */
.sy-prose a:not(.sy-btn) {
	color: var(--sy-ink);
	text-decoration: underline;
	text-decoration-color: var(--sy-amber);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.sy-prose a:not(.sy-btn):hover { color: var(--sy-amber-dark); }

/* 正文里的列表与引用 */
.sy-prose ul, .sy-prose ol { padding-left: 22px; margin: 0 0 20px; }
.sy-prose li { margin-bottom: 8px; }
.sy-prose blockquote {
	border-left: 4px solid var(--sy-amber);
	margin: 0 0 24px;
	padding: 4px 0 4px 20px;
	color: #374151;
	font-weight: 500;
}


/* ==========================================================================
   3. 版心与区块
   ========================================================================== */
.sy-wrap {
	width: 100%;
	max-width: var(--sy-maxw);
	margin: 0 auto;
	padding-left: var(--sy-gutter);
	padding-right: var(--sy-gutter);
}

.sy-section { padding-top: var(--sy-section-y); padding-bottom: var(--sy-section-y); }

/* 区块底色：四选一，相邻区块不要用同一个，否则分不出界 */
.sy-section--paper { background: var(--sy-paper); }
.sy-section--white { background: var(--sy-white); }
.sy-section--ink   { background: var(--sy-ink); color: #FFFFFF; }
.sy-section--zinc  { background: var(--sy-ink-2); color: #FFFFFF; }
.sy-section--amber { background: var(--sy-amber); color: var(--sy-ink); }

/* 深色区块上常用的描边 */
.sy-section--amber { border-bottom: 8px solid var(--sy-ink); }
.sy-border-amber-top { border-top: 4px solid var(--sy-amber); }

/* 区块标题（居中 + 下方黄色短横线） */
.sy-sechead { text-align: center; margin-bottom: 56px; }
.sy-sechead::after {
	content: "";
	display: block;
	width: 96px; height: 4px;
	background: var(--sy-amber);
	margin: 20px auto 0;
}

/* 区块标题（左右两端对齐，右侧放一个「查看全部」） */
.sy-sechead--row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 44px;
	text-align: left;
}

/* 网格：手机一栏 → 平板两栏 → 桌面按需 */
.sy-grid { display: grid; gap: 32px; }
.sy-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sy-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sy-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 12 栏那种「8 + 4」的分栏（工具区在用） */
.sy-grid--8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

@media (max-width: 1024px) {
	.sy-grid--3, .sy-grid--4, .sy-grid--8-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	:root { --sy-gutter: 24px; --sy-section-y: 56px; }
	.sy-grid, .sy-grid--2, .sy-grid--3, .sy-grid--4, .sy-grid--8-4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}


/* ==========================================================================
   4. 按钮
   --------------------------------------------------------------------------
   形状：直角、2px 描边、全大写、Oswald。
   交互：按下时整体右下位移 2px，同时阴影消失 —— 这是「按进去」的手感。
   ========================================================================== */
.sy-btn {
	/* 基础外观 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	font-family: var(--sy-font-head);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;

	padding: 16px 28px;
	border: 2px solid currentColor;   /* 描边跟着文字色，改一处就全对 */
	border-radius: var(--sy-radius);
	cursor: pointer;
	position: relative;

	background: transparent;
	color: var(--sy-ink);

	transition: background-color var(--sy-ease), color var(--sy-ease),
	            border-color var(--sy-ease), box-shadow var(--sy-ease),
	            transform var(--sy-ease);
}

/* 按下时「压进去」 */
.sy-btn:active {
	transform: translate(2px, 2px);
	box-shadow: none !important;
}

.sy-btn:disabled,
.sy-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* --- 变体 ---------------------------------------------------------------- */

/* 主行动：黄底黑字 + 硬阴影（首页「Shop Hoses」那种） */
.sy-btn--primary {
	background: var(--sy-amber);
	border-color: var(--sy-amber);
	color: var(--sy-ink);
	box-shadow: var(--sy-shadow-hard);
}
.sy-btn--primary:hover {
	background: transparent;
	color: var(--sy-amber-dark);
	border-color: var(--sy-amber-dark);
}

/* 深色实心：黑底白字（商品卡片的加购按钮） */
.sy-btn--dark {
	background: var(--sy-ink);
	border-color: var(--sy-ink);
	color: #FFFFFF;
	box-shadow: var(--sy-shadow-hard-sm);
}
.sy-btn--dark:hover {
	background: var(--sy-amber);
	border-color: var(--sy-amber);
	color: var(--sy-ink);
	box-shadow: var(--sy-shadow-hard-sm);
}

/* 深色描边：黑框黑字，悬停翻成黑底白字（分类卡片那种） */
.sy-btn--outline {
	background: transparent;
	border-color: var(--sy-ink);
	color: var(--sy-ink);
}
.sy-btn--outline:hover {
	background: var(--sy-ink);
	color: #FFFFFF;
}

/* 深色区块上的次要按钮：白框白字，悬停翻成白底黑字 */
.sy-btn--ghost-light {
	background: transparent;
	border-color: #9CA3AF;
	color: #FFFFFF;
}
.sy-btn--ghost-light:hover {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--sy-ink);
}

/* 白底次要按钮（黄色区块上用） */
.sy-btn--light {
	background: #FFFFFF;
	border-color: var(--sy-ink);
	color: var(--sy-ink);
	box-shadow: var(--sy-shadow-hard-sm);
}
.sy-btn--light:hover { background: var(--sy-paper); }

/* 危险红：只给硅胶线用。见第 9 节的硬规矩 */
.sy-btn--danger {
	background: #FFFFFF;
	border-color: var(--sy-red);
	color: var(--sy-red);
	box-shadow: 2px 2px 0 var(--sy-red);
}
.sy-btn--danger:hover {
	background: var(--sy-red);
	border-color: var(--sy-red);
	color: #FFFFFF;
}

/* 深色底上的黄色按钮（页脚、深色商品区用） */
.sy-btn--amber-on-dark {
	background: var(--sy-amber);
	border-color: var(--sy-amber);
	color: var(--sy-ink);
	box-shadow: 4px 4px 0 rgba(0,0,0,0.55);
}
.sy-btn--amber-on-dark:hover {
	background: var(--sy-amber-dark);
	border-color: var(--sy-amber-dark);
	color: var(--sy-ink);
}

/* 小号：导航条、卡片里的次要动作 */
.sy-btn--sm { font-size: 14px; padding: 10px 16px; }
.sy-btn--lg { font-size: 20px; padding: 18px 32px; }

/* 通栏：商品卡片的加购按钮用这个 */
.sy-btn--block { display: flex; width: 100%; }

/* 加购成功的临时状态（脚本会加上去，1.2 秒后自动摘掉） */
.sy-btn.is-added {
	background: var(--sy-ok) !important;
	border-color: var(--sy-ok) !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
	pointer-events: none;
}


/* ==========================================================================
   5. 徽章 / 小标签 / 警示条
   ========================================================================== */

/* 通用描边胶囊（直角版）：用来标「Carries Fuel」这类介质说明 */
.sy-badge {
	display: inline-block;
	font-family: var(--sy-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--sy-radius-sm);
	background: #FFFFFF;
	color: var(--sy-ink);
	border: 1px solid var(--sy-ink);
	line-height: 1.2;
}

/* 黄底徽章：英雄区顶部那种 */
.sy-badge--amber {
	background: var(--sy-amber);
	border-color: var(--sy-amber);
	color: var(--sy-ink);
}

/* 危险红徽章：只给硅胶线 */
.sy-badge--danger {
	background: var(--sy-red);
	border-color: var(--sy-red);
	color: #FFFFFF;
}

/* 极小的行内标（导航条和页脚里那个「Not Fuel」） */
.sy-badge--micro {
	font-family: var(--sy-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 5px;
	border: 0;
}

/* 悬在卡片上沿的警示条（黄色区块 / 硅胶卡片用） */
.sy-flag {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-family: var(--sy-font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 16px;
	background: var(--sy-red);
	color: #FFFFFF;
	border: 2px solid var(--sy-ink);
	box-shadow: var(--sy-shadow-hard-sm);
}

/* 靠左的版本（商品卡片上用） */
.sy-flag--left {
	left: 16px;
	transform: none;
	font-size: 11px;
	padding: 3px 8px;
	letter-spacing: 0.1em;
}

/* 工业斜纹警示底（需要一条红白斜纹带时用） */
.sy-hazard {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--sy-red),
		var(--sy-red) 10px,
		var(--sy-red-dark) 10px,
		var(--sy-red-dark) 20px
	);
}


/* ==========================================================================
   6. 卡片
   ========================================================================== */
.sy-card {
	background: var(--sy-white);
	border: 2px solid var(--sy-line);
	border-radius: var(--sy-radius);
	display: flex;
	flex-direction: column;
}

/* 悬停时描边变黑（不是上浮 —— 这一版的手感是「硬」，不是「飘」） */
.sy-card--hover:hover { border-color: var(--sy-ink); }

/* 带硬阴影的卡片（工具区那两块） */
.sy-card--raised { box-shadow: var(--sy-shadow-hard-line); }
/* 深色区块上的卡片：阴影改成黄色，否则黑色阴影压在黑底上看不见 */
.sy-card--raised-amber,
.sy-card--raised-dark { box-shadow: var(--sy-shadow-hard-amber); }

.sy-card__body { padding: 32px; flex: 1 1 auto; display: flex; flex-direction: column; }
.sy-card__media {
	position: relative;
	overflow: hidden;
	background: var(--sy-line-soft);
	border-bottom: 2px solid var(--sy-line);
}
.sy-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.sy-card:hover .sy-card__media img { transform: scale(1.05); }

/* 图片上压深色渐变，让白字能看清 */
.sy-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--sy-ink) 0%, rgba(17,17,17,0.65) 45%, transparent 100%);
}
.sy-card__caption {
	position: absolute;
	left: 24px; right: 24px; bottom: 24px;
	z-index: 2;
	color: #FFFFFF;
}
.sy-card__caption h3,
.sy-card__caption .sy-h3 { color: #FFFFFF; margin: 0; }

/* 危险卡片：硅胶线专用。红框 + 顶部红标签 + 淡红底纹 */
.sy-card--danger {
	border: 4px solid var(--sy-red);
	position: relative;
	background: #FFFFFF;
}
.sy-card--danger .sy-card__body { background: var(--sy-red-tint); }
.sy-card--danger .sy-card__media { border-bottom: 2px solid var(--sy-red); }

/* 深色卡片（零件号查询框、信任浮窗） */
.sy-card--dark {
	background: var(--sy-ink);
	border-color: var(--sy-ink);
	color: #FFFFFF;
}
.sy-card--dark .sy-card__body { background: var(--sy-ink); }

/* 深色卡片 + 左侧黄色粗边（英雄区那块信任面板） */
.sy-panel-dark {
	background: rgba(39, 39, 42, 0.82);
	border-left: 4px solid var(--sy-amber);
	padding: 32px;
	backdrop-filter: blur(6px);   /* 有兼容性风险，不支持时就是纯色，不影响可读性 */
	color: #FFFFFF;
}


/* ==========================================================================
   7. 库存状态
   ========================================================================== */
.sy-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sy-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sy-muted);
}
.sy-stock::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.sy-stock--in  { color: var(--sy-ok); }
.sy-stock--low { color: var(--sy-amber-dark); }
.sy-stock--out { color: var(--sy-muted); }

/* 价格下面那行「美国仓现货」 */
.sy-stock-note {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sy-muted);
	margin: 6px 0 0;
}


/* ==========================================================================
   8. 表单
   ========================================================================== */
.sy-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.sy-field label {
	font-family: var(--sy-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sy-amber);
}

.sy-input,
input[type="text"].sy-input,
input[type="email"].sy-input,
input[type="search"].sy-input,
input[type="tel"].sy-input,
input[type="number"].sy-input,
select.sy-input,
textarea.sy-input {
	width: 100%;
	font-family: var(--sy-font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--sy-ink);
	background: #FFFFFF;
	border: 2px solid var(--sy-line);
	border-radius: var(--sy-radius);
	padding: 15px 16px;
	line-height: 1.4;
	transition: border-color var(--sy-ease), box-shadow var(--sy-ease);
	appearance: none;
}

.sy-input::placeholder { color: var(--sy-muted); }

.sy-input:focus {
	outline: none;
	border-color: var(--sy-amber);
	box-shadow: 0 0 0 1px var(--sy-amber);
}

/* 深色底上的输入框 */
.sy-on-dark .sy-input,
.sy-input--on-dark {
	background: var(--sy-ink-2);
	border-color: var(--sy-ink-4);
	color: #FFFFFF;
}
.sy-input--on-dark::placeholder { color: #71717A; }
.sy-input--on-dark:focus { border-color: var(--sy-amber); }
.sy-input--mono { font-family: var(--sy-font-mono); }

select.sy-input {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 44px;
}

textarea.sy-input { min-height: 140px; resize: vertical; }

.sy-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 14px;
}
.sy-check input[type="checkbox"],
.sy-check input[type="radio"] { margin-top: 3px; accent-color: var(--sy-ink); }

/* 表单内的一行并排（邮件 + 按钮那种） */
.sy-inline-form { display: flex; gap: 8px; }
@media (max-width: 560px) { .sy-inline-form { flex-direction: column; } }

/* 错误提示 */
.sy-error-text { color: var(--sy-red); font-size: 14px; font-weight: 600; }


/* ==========================================================================
   9. 硅胶线专用：禁油警示
   --------------------------------------------------------------------------
   ⚠️ 这几个类名由代码自动挂在所有真空管产品上，不需要手写。
      不允许为了「版面好看」把它们删掉或隐藏。
      硅胶遇汽油会溶胀、发软、最后破裂，最坏的结果是起火。
   ========================================================================== */

/* 单品页的整块红框警示 */
.sy-no-fuel {
	border: 3px solid var(--sy-red);
	border-left-width: 10px;
	background: var(--sy-red-tint);
	color: var(--sy-ink);
	padding: 20px 24px;
	margin: 20px 0;
	font-size: 15px;
	line-height: 1.65;
	position: relative;
}
.sy-no-fuel > div { margin: 0; }
.sy-no-fuel strong {
	display: block;
	font-family: var(--sy-font-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sy-red);
	margin-bottom: 6px;
}
.sy-no-fuel a { color: var(--sy-red-dark); font-weight: 700; text-decoration: underline; }
.sy-no-fuel a:hover { color: var(--sy-ink); }

/* 分类页卡片上的小胶囊 */
.sy-loop-tag {
	display: inline-block;
	background: var(--sy-red);
	color: #FFFFFF;
	font-family: var(--sy-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 7px;
	border: 1px solid var(--sy-ink);
	margin: 8px 0 4px;
	line-height: 1.3;
}


/* ==========================================================================
   10. 页头 / 页脚
   ========================================================================== */

/* 顶部公告条 */
.sy-announce {
	background: var(--sy-ink-2);
	color: #D4D4D8;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	padding: 8px 16px;
}
.sy-announce .sy-sep { color: var(--sy-amber); margin: 0 10px; }

/* 页头：深色、吸顶、底部一道黄色粗线 */
.sy-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sy-ink);
	color: #FFFFFF;
	border-bottom: 4px solid var(--sy-amber);
}
.sy-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
}

.sy-logo {
	font-family: var(--sy-font-head);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 1;
}
.sy-logo .sy-dot { color: var(--sy-amber); }

/* 主导航 */
.sy-nav { display: flex; align-items: center; gap: 32px; }
.sy-nav a {
	font-family: var(--sy-font-head);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 4px solid transparent;
	transition: color var(--sy-ease), border-color var(--sy-ease);
}
.sy-nav a:hover { color: var(--sy-amber); border-bottom-color: var(--sy-amber); }
.sy-nav .sy-nav__sep { width: 1px; height: 24px; background: var(--sy-ink-4); }

/* 右侧动作区 */
.sy-actions { display: flex; align-items: center; gap: 22px; }
.sy-actions a, .sy-actions button {
	color: #FFFFFF;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: color var(--sy-ease);
	line-height: 1;
}
.sy-actions a:hover, .sy-actions button:hover { color: var(--sy-amber); }

/* 购物车图标 + 角标 */
.sy-cart { position: relative; display: inline-flex; align-items: center; }
.sy-cart-count {
	position: absolute;
	top: -8px; right: -12px;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	background: var(--sy-amber);
	color: var(--sy-ink);
	font-family: var(--sy-font-body);
	font-size: 12px;
	font-weight: 700;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: transform 0.2s ease;
}
.sy-cart-count.is-bump { transform: scale(1.5); }
/* 空车时不要显示一个「0」——看起来像坏了 */
.sy-cart-count.is-empty { display: none; }

/* 手机端导航开关 */
.sy-nav-toggle { display: none; }
@media (max-width: 1023px) {
	.sy-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--sy-ink);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 24px 24px;
		border-bottom: 4px solid var(--sy-amber);
	}
	.sy-nav.is-open { display: flex; }
	.sy-nav a { border-bottom: 1px solid var(--sy-ink-3); padding: 16px 0; }
	.sy-nav .sy-nav__sep { display: none; }
	.sy-nav-toggle {
		display: inline-flex;
		align-items: center;
		background: none; border: 0; color: #FFFFFF; cursor: pointer;
	}
}

/* 页脚 */
.sy-footer { background: var(--sy-ink-2); color: #FFFFFF; padding: 80px 0 40px; }
.sy-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px;
	margin-bottom: 64px;
}
.sy-footer h4 {
	font-family: var(--sy-font-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom: 22px;
}
.sy-footer ul { list-style: none; margin: 0; padding: 0; }
.sy-footer li { margin-bottom: 14px; }
.sy-footer a {
	color: var(--sy-muted-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: color var(--sy-ease);
}
.sy-footer a:hover { color: var(--sy-amber); }
.sy-footer__bottom {
	border-top: 1px solid var(--sy-ink-3);
	padding-top: 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sy-muted-dark);
}
.sy-footer__bottom a { color: var(--sy-muted-dark); text-decoration: none; }
.sy-footer__bottom a:hover { color: #FFFFFF; }

@media (max-width: 1024px) { .sy-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sy-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }


/* ==========================================================================
   11. WooCommerce 映射
   --------------------------------------------------------------------------
   目标：让 WooCommerce 自带的页面（分类页 / 单品页 / 购物车 / 结账 / 我的账户）
   自动长成上面这套设计，不需要改任何插件文件。

   ⚠️ 购物车页和结账页只允许改样式，不许改 DOM 结构。
      WooCommerce 和支付插件（Stripe / PayPal）是往那些元素里注入表单的，
      改了结构或包了额外的 div，会出现「能下单但付不了款」这种最难查的 bug。
   ========================================================================== */

/* --- 11.1 分类页：产品网格 ---------------------------------------------- */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 48px !important;
	padding: 0 !important;
	list-style: none !important;
}
ul.products::before,
ul.products::after { display: none !important; }   /* 清掉 WooCommerce 的 clearfix */

ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sy-white);
	border: 2px solid var(--sy-line);
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: border-color var(--sy-ease);
}
ul.products li.product:hover { border-color: var(--sy-ink); }

/* 分类页卡片上的禁油小标。由 PHP 第 2 段挂上去的 */
ul.products li.product .sy-loop-tag { order: 1; margin: 12px 16px 0; }

ul.products li.product a.woocommerce-LoopProduct-link { order: 0; }
ul.products li.product a img {
	margin: 0 !important;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--sy-white);
	padding: 20px;
	border-bottom: 2px solid var(--sy-line-soft);
}

.woocommerce-loop-product__title {
	font-family: var(--sy-font-body) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--sy-ink) !important;
	padding: 18px 16px 0 !important;
	margin: 0 !important;
	text-transform: none;
	letter-spacing: 0;
}

/* 分类页价格 */
ul.products li.product .price {
	display: block;
	font-family: var(--sy-font-head) !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--sy-ink) !important;
	padding: 8px 16px 0 !important;
	margin: 0 !important;
}
ul.products li.product .price del {
	font-size: 16px;
	color: var(--sy-muted);
	font-weight: 400;
	margin-right: 6px;
}
ul.products li.product .price ins { text-decoration: none; font-weight: 700; }

/* 分类页的加购按钮：撑满卡片底部 */
ul.products li.product .button,
ul.products li.product .added_to_cart {
	display: block !important;
	width: calc(100% - 32px);
	margin: 14px 16px 16px !important;
	padding: 12px 16px !important;
	background: var(--sy-ink) !important;
	border: 2px solid var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	color: #FFFFFF !important;
	font-family: var(--sy-font-head) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	box-shadow: var(--sy-shadow-hard-sm);
	transition: background-color var(--sy-ease), color var(--sy-ease), border-color var(--sy-ease);
}
ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover {
	background: var(--sy-amber) !important;
	border-color: var(--sy-amber) !important;
	color: var(--sy-ink) !important;
}
/* WooCommerce 加购成功的对钩，默认是绿色小图标，去掉 */
ul.products li.product .button.loading::after,
ul.products li.product .added_to_cart::after { display: none !important; }

/* 分类页上的库存状态（PHP 第 8 段挂的） */
ul.products li.product .sy-stock { margin: 6px 16px 0; }

@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { ul.products { grid-template-columns: minmax(0, 1fr); } }

/* --- 11.2 分类页：工具条（结果数、排序、分页、面包屑） ------------------ */
.woocommerce-result-count,
.woocommerce-ordering { margin: 0 0 20px; font-size: 14px; color: var(--sy-muted); }

.woocommerce-ordering select {
	font-family: var(--sy-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--sy-ink);
	background: #FFFFFF;
	border: 2px solid var(--sy-line);
	border-radius: var(--sy-radius);
	padding: 10px 40px 10px 14px;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}

.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--sy-muted);
	margin-bottom: 24px;
}
.woocommerce-breadcrumb a { color: var(--sy-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--sy-ink); }

.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	border: 0 !important;
}
.woocommerce-pagination ul li { border: 0 !important; margin: 0 !important; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; height: 44px;
	padding: 0 12px;
	border: 2px solid var(--sy-line);
	border-radius: var(--sy-radius);
	color: var(--sy-ink);
	font-family: var(--sy-font-head);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--sy-ease), border-color var(--sy-ease);
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
	background: var(--sy-ink);
	border-color: var(--sy-ink);
	color: #FFFFFF;
}

.woocommerce-no-products-found {
	border: 2px dashed var(--sy-line);
	padding: 40px;
	text-align: center;
	color: var(--sy-muted);
}

/* --- 11.3 提示条（加购成功 / 提示 / 报错） ------------------------------ */
.woocommerce-notices-wrapper { margin-bottom: 24px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 2px solid var(--sy-ink);
	border-left-width: 10px;
	background: var(--sy-white);
	color: var(--sy-ink);
	padding: 18px 22px;
	margin: 0 0 16px;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
/* 左侧那条色带区分类型 */
.woocommerce-message { border-left-color: var(--sy-ok); }
.woocommerce-info    { border-left-color: var(--sy-amber); }
.woocommerce-error   { border-left-color: var(--sy-red); background: var(--sy-red-tint); }

/* WooCommerce 自带的图标字体（那个对钩/感叹号），保留但改成黑色 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--sy-ink) !important; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	background: var(--sy-ink) !important;
	border: 2px solid var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	color: #FFFFFF !important;
	font-family: var(--sy-font-head) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	padding: 10px 18px !important;
}
.woocommerce-message .button:hover { background: var(--sy-amber) !important; color: var(--sy-ink) !important; }

/* 分类描述（你在后台填的那段「Air, vacuum & water only」） */
.term-description,
.woocommerce-product-details__short-description {
	font-size: 16px;
	color: #374151;
	max-width: 76ch;
	margin-bottom: 28px;
}

/* --- 11.4 单品页 ------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* 关键：选项卡和相关产品必须拉回整行，否则会被塞进上面那个两栏网格的第 3、4 格，整页错位 */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells,
.single-product div.product .woocommerce-product-gallery + .clear,
.single-product div.product > .clear { grid-column: 1 / -1; }

/* 清掉 WooCommerce 的 clearfix 伪元素 —— 不清的话它们在网格里会白占一个格子 */
.single-product div.product::before,
.single-product div.product::after,
.woocommerce-tabs::before,
.woocommerce-tabs::after { content: none !important; display: none !important; }

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* 产品图：直角、细描边、不裁切（燃油管要看管壁，不能裁） */
.woocommerce-product-gallery { background: var(--sy-white); border: 2px solid var(--sy-line); padding: 16px; }
.woocommerce-product-gallery__image img { border-radius: 0 !important; }
.woocommerce-product-gallery__wrapper .flex-control-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.woocommerce-product-gallery__wrapper .flex-control-thumbs li { width: 80px !important; margin: 0 !important; }
.woocommerce-product-gallery__wrapper .flex-control-thumbs img { border: 2px solid var(--sy-line); cursor: pointer; }
.woocommerce-product-gallery__wrapper .flex-control-thumbs img.flex-active { border-color: var(--sy-ink); }

/* 单品页标题 */
.single-product .product_title {
	font-family: var(--sy-font-head);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* 单品页价格 */
.single-product .summary .price {
	display: block;
	font-family: var(--sy-font-head) !important;
	font-size: clamp(28px, 3vw, 36px) !important;
	font-weight: 700 !important;
	color: var(--sy-ink) !important;
	margin: 0 0 4px !important;
}
.single-product .summary .price del { font-size: 20px; color: var(--sy-muted); font-weight: 400; }

/* 库存文字（WooCommerce 自带的那个绿字「In stock」） */
.single-product .stock {
	font-family: var(--sy-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sy-ok);
	display: block;
	margin: 8px 0 0;
}
.single-product .stock.out-of-stock { color: var(--sy-red); }

/* 购买区：数量框 + 加购按钮 */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 28px 0 0; }
.single-product form.cart::before,
.single-product form.cart::after { content: none !important; display: none !important; }

.single-product .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 2px solid var(--sy-ink);
	border-radius: var(--sy-radius);
	overflow: hidden;
}
.single-product .quantity input.qty {
	width: 76px;
	padding: 14px 10px;
	border: 0;
	text-align: center;
	font-family: var(--sy-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--sy-ink);
	background: #FFFFFF;
	-moz-appearance: textfield;
}
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single-product .single_add_to_cart_button {
	flex: 1 1 240px;
	background: var(--sy-ink) !important;
	border: 2px solid var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	color: #FFFFFF !important;
	font-family: var(--sy-font-head) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 16px 32px !important;
	box-shadow: var(--sy-shadow-hard);
	transition: background-color var(--sy-ease), color var(--sy-ease), border-color var(--sy-ease);
}
.single-product .single_add_to_cart_button:hover {
	background: var(--sy-amber) !important;
	border-color: var(--sy-amber) !important;
	color: var(--sy-ink) !important;
}
.single-product .single_add_to_cart_button:disabled { opacity: 0.5; }

/* 「查看购物车」那个链接 */
.single-product .added_to_cart {
	font-family: var(--sy-font-head);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--sy-ink);
	align-self: center;
}

/* 元信息（SKU / 分类） */
.product_meta {
	border-top: 1px solid var(--sy-line);
	margin-top: 28px;
	padding-top: 18px;
	font-size: 13px;
	color: var(--sy-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.product_meta a { color: var(--sy-muted); text-decoration: none; }
.product_meta a:hover { color: var(--sy-ink); }

/* 选项卡（描述 / 附加信息 / 评价）：直角、细描边、选中项黑底 */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 0;
	padding: 0 !important;
	border-bottom: 2px solid var(--sy-ink);
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { content: none !important; display: none !important; }
.woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; }
.woocommerce-tabs ul.tabs li a {
	display: block;
	font-family: var(--sy-font-head);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sy-muted) !important;
	text-decoration: none;
	padding: 14px 22px;
	transition: background-color var(--sy-ease), color var(--sy-ease);
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--sy-ink) !important; background: var(--sy-line-soft); }
.woocommerce-tabs ul.tabs li.active a { color: #FFFFFF !important; background: var(--sy-ink); }

.woocommerce-Tabs-panel {
	border: 2px solid var(--sy-ink);
	border-top: 0;
	padding: 32px;
	background: var(--sy-white);
}
.woocommerce-Tabs-panel h2 { font-size: 24px; margin-bottom: 16px; }
.woocommerce-Tabs-panel p { color: #374151; line-height: 1.75; }

/* 规格表（WooCommerce 附加信息那张表） */
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	border: 1px solid var(--sy-line);
	padding: 12px 16px;
	font-size: 15px;
	text-align: left;
}
.woocommerce-product-attributes th { background: var(--sy-paper); font-weight: 700; width: 34%; }

/* 相关产品 / 推荐 */
.related.products,
.upsells.products { margin-top: 72px; }
.related.products > h2,
.upsells.products > h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 28px; }

/* 评价 */
.woocommerce-Reviews .commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.woocommerce-Reviews .comment_container { border: 2px solid var(--sy-line); padding: 24px; margin-bottom: 16px; background: var(--sy-white); }
.star-rating span::before { color: var(--sy-amber) !important; }

/* --- 11.5 购物车页 ----------------------------------------------------- */
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 2px solid var(--sy-ink);
	background: var(--sy-white);
	margin-bottom: 32px;
}
table.shop_table th {
	background: var(--sy-ink);
	color: #FFFFFF;
	font-family: var(--sy-font-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 18px;
	border: 0;
}
table.shop_table td {
	padding: 18px;
	border-top: 1px solid var(--sy-line);
	vertical-align: middle;
	font-size: 15px;
}
table.shop_table img { width: 72px; border: 1px solid var(--sy-line); }

/* 购物车里的数量框 */
.woocommerce-cart .quantity input.qty {
	width: 68px; padding: 10px; text-align: center;
	border: 2px solid var(--sy-line); border-radius: var(--sy-radius);
	font-family: var(--sy-font-head); font-size: 16px; font-weight: 600;
}

/* 移除商品那个小叉 */
.woocommerce-cart .product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	background: var(--sy-line-soft) !important;
	color: var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	font-size: 18px; font-weight: 700; text-decoration: none;
}
.woocommerce-cart .product-remove a.remove:hover { background: var(--sy-red) !important; color: #FFFFFF !important; }

/* 优惠券 */
.woocommerce-cart .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.woocommerce-cart .coupon input.input-text {
	padding: 13px 16px; border: 2px solid var(--sy-line); border-radius: var(--sy-radius);
	font-size: 15px; min-width: 200px;
}

/* 购物车合计 */
.cart_totals { border: 2px solid var(--sy-ink); background: var(--sy-white); padding: 0; }
.cart_totals > h2 { background: var(--sy-ink); color: #FFFFFF; font-size: 18px; margin: 0; padding: 16px 22px; letter-spacing: 0.06em; }
.cart_totals table.shop_table { border: 0; margin: 0; }
.cart_totals table.shop_table th { background: none; color: var(--sy-muted); font-family: var(--sy-font-body); letter-spacing: 0; text-transform: none; font-size: 15px; }
.cart_totals table.shop_table td { text-align: right; font-weight: 600; }
.cart_totals .order-total td,
.cart_totals .order-total th { font-family: var(--sy-font-head); font-size: 22px; color: var(--sy-ink); }
.cart_totals .wc-proceed-to-checkout { padding: 22px; }

/* 主行动按钮：结账、更新购物车 */
.wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .button,
.woocommerce .button.alt {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--sy-ink) !important;
	border: 2px solid var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	color: #FFFFFF !important;
	font-family: var(--sy-font-head) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 16px 28px !important;
	box-shadow: var(--sy-shadow-hard);
	transition: background-color var(--sy-ease), color var(--sy-ease), border-color var(--sy-ease);
}
.wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .button:hover,
.woocommerce .button.alt:hover {
	background: var(--sy-amber) !important;
	border-color: var(--sy-amber) !important;
	color: var(--sy-ink) !important;
}

/* 次要按钮（更新购物车、继续购物） */
.woocommerce-cart .button:not(.checkout-button) {
	background: transparent !important;
	color: var(--sy-ink) !important;
	border-color: var(--sy-ink) !important;
	box-shadow: none;
	width: auto;
	font-size: 15px !important;
	padding: 12px 20px !important;
}
.woocommerce-cart .button:not(.checkout-button):hover { background: var(--sy-ink) !important; color: #FFFFFF !important; }

/* 空购物车 */
.woocommerce-cart .cart-empty { border: 2px dashed var(--sy-line); padding: 40px; text-align: center; font-size: 17px; }
.woocommerce-cart .return-to-shop { text-align: center; margin-top: 20px; }

/* --- 11.6 结账页 ------------------------------------------------------- */
/* ⚠️ 只改样式。字段的 DOM 结构由 Stripe / PayPal 注入，动了会出现「能下单但付不了款」 */

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 800px) { .woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); } }

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--sy-font-head);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--sy-ink);
	padding-bottom: 12px;
	margin: 0 0 24px;
}

/* 结账表单字段 */
.woocommerce form .form-row { margin-bottom: 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.woocommerce form .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--sy-ink);
	margin: 0;
}
.woocommerce form .form-row .required { color: var(--sy-red); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	background: #FFFFFF;
	border: 2px solid var(--sy-line);
	border-radius: var(--sy-radius);
	padding: 14px 16px;
	font-family: var(--sy-font-body);
	font-size: 16px;
	color: var(--sy-ink);
	transition: border-color var(--sy-ease), box-shadow var(--sy-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--sy-amber);
	box-shadow: 0 0 0 1px var(--sy-amber);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--sy-red); }

/* 选中的支付方式要一眼看出来 */
.woocommerce-checkout #payment { background: var(--sy-white); border: 2px solid var(--sy-ink); }
.woocommerce-checkout #payment ul.payment_methods { padding: 24px; border-bottom: 1px solid var(--sy-line); list-style: none; margin: 0; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--sy-paper);
	border-left: 3px solid var(--sy-amber);
	padding: 14px 18px;
	font-size: 14px;
	color: #374151;
	margin-top: 10px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 24px; margin: 0; }

.woocommerce-checkout #place_order,
#place_order {
	width: 100%;
	background: var(--sy-ink) !important;
	border: 2px solid var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	color: #FFFFFF !important;
	font-family: var(--sy-font-head) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 18px 28px !important;
	box-shadow: var(--sy-shadow-hard);
	transition: background-color var(--sy-ease), color var(--sy-ease), border-color var(--sy-ease);
}
.woocommerce-checkout #place_order:hover {
	background: var(--sy-amber) !important;
	border-color: var(--sy-amber) !important;
	color: var(--sy-ink) !important;
}

/* 订单摘要 */
#order_review,
.woocommerce-checkout-review-order {
	background: var(--sy-white);
	border: 2px solid var(--sy-ink);
	padding: 28px;
}
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 12px 0; border-bottom: 1px solid var(--sy-line); text-align: left; font-size: 15px; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	font-family: var(--sy-font-head);
	font-size: 22px;
	border-bottom: 0;
	padding-top: 18px;
}

/* 优惠券折叠框 */
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 24px; }
.woocommerce-form-coupon { border: 2px solid var(--sy-ink); padding: 24px; margin-bottom: 24px; }
.woocommerce-form-coupon p:first-child { font-size: 15px; margin-top: 0; }

/* --- 11.7 新版的「区块版」购物车与结账（如果你用的是区块模板） --------- */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button {
	background: var(--sy-ink) !important;
	border: 2px solid var(--sy-ink) !important;
	border-radius: var(--sy-radius) !important;
	color: #FFFFFF !important;
	font-family: var(--sy-font-head) !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: var(--sy-shadow-hard-sm);
}
.wc-block-components-button:hover { background: var(--sy-amber) !important; color: var(--sy-ink) !important; }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container select,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	background: #FFFFFF !important;
	border: 2px solid var(--sy-line) !important;
	border-radius: var(--sy-radius) !important;
	font-family: var(--sy-font-body) !important;
}
.wc-block-components-totals-item,
.wc-block-cart-items td { border-color: var(--sy-line) !important; }
.wc-block-components-title { font-family: var(--sy-font-head) !important; text-transform: uppercase; }

/* --- 11.8 我的账户 ----------------------------------------------------- */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 800px) { .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 2px solid var(--sy-ink); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--sy-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 18px;
	font-family: var(--sy-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sy-ink);
	text-decoration: none;
	transition: background-color var(--sy-ease), color var(--sy-ease);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--sy-paper); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--sy-ink); color: #FFFFFF; }

.woocommerce-account fieldset,
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm {
	border: 2px solid var(--sy-ink);
	padding: 32px;
	background: var(--sy-white);
}

/* --- 11.9 订单确认 / 订单追踪 / 退货申请 ------------------------------- */
.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	border: 2px solid var(--sy-ink);
	background: var(--sy-white);
}
.woocommerce-order-overview li {
	flex: 1 1 180px;
	padding: 18px 22px;
	border-right: 1px solid var(--sy-line);
}
.woocommerce-order-overview li:last-child { border-right: 0; }
.woocommerce-order-overview li strong { display: block; font-family: var(--sy-font-head); font-size: 20px; margin-top: 6px; }

.woocommerce-thankyou-order-received {
	font-family: var(--sy-font-head);
	font-size: clamp(22px, 3vw, 30px);
	text-transform: uppercase;
	border-left: 8px solid var(--sy-ok);
	padding: 14px 22px;
	background: var(--sy-white);
	margin-bottom: 32px;
}

/* 表格通用（订单详情、地址、追踪） */
.woocommerce-table--order-details { border: 2px solid var(--sy-ink); }
.woocommerce-table--order-details th { background: var(--sy-paper); }


/* ==========================================================================
   12. 工具类（少量，够用就行）
   ========================================================================== */
.sy-flex     { display: flex; }
.sy-between  { justify-content: space-between; }
.sy-center   { align-items: center; }
.sy-col      { flex-direction: column; }
.sy-wrapflex { flex-wrap: wrap; }
.sy-gap-8    { gap: 8px; }
.sy-gap-16   { gap: 16px; }
.sy-gap-24   { gap: 24px; }
.sy-gap-32   { gap: 32px; }
.sy-mt-0     { margin-top: 0; }
.sy-mt-16    { margin-top: 16px; }
.sy-mt-24    { margin-top: 24px; }
.sy-mt-32    { margin-top: 32px; }
.sy-mb-0     { margin-bottom: 0; }
.sy-mb-16    { margin-bottom: 16px; }
.sy-mb-24    { margin-bottom: 24px; }
.sy-mb-32    { margin-bottom: 32px; }
.sy-text-center { text-align: center; }
.sy-text-right  { text-align: right; }
.sy-muted    { color: var(--sy-muted); }
.sy-mono     { font-family: var(--sy-font-mono); }
.sy-narrow   { max-width: 76ch; }
.sy-hide-sm  { display: none; }
@media (min-width: 681px) { .sy-hide-sm { display: block; } }
@media (max-width: 680px) { .sy-hide-lg { display: none !important; } }

/* 价格（Oswald，全站统一） */
.sy-price {
	font-family: var(--sy-font-head);
	font-size: 26px;
	font-weight: 700;
	color: var(--sy-ink);
	line-height: 1;
}
.sy-price__was { font-size: 16px; font-weight: 400; color: var(--sy-muted); margin-right: 8px; }


/* ==========================================================================
   13. 打印（订单确认页客人常会打印或存 PDF）
   ========================================================================== */
@media print {
	.sy-header, .sy-footer, .sy-announce, .sy-btn, .woocommerce-notices-wrapper { display: none !important; }
	body { background: #FFFFFF; color: #000000; }
	.sy-no-fuel { border-color: #000000; background: #FFFFFF; }
}