/* ============================================================
   子主题样式
   加载顺序：theme.json 生成的内联样式之后（functions.php 里依赖 global-styles）
   所以这里的规则可以覆盖主题默认值，不需要大量 !important。
   ============================================================ */

/* ---------- 基础 ---------- */
:root {
	--shop-radius: 6px;
	--shop-border: 1px solid var(--wp--preset--color--accent-6);
	--shop-ease: 160ms ease;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 全站图片不撑破布局 */
img {
	max-width: 100%;
	height: auto;
}

/* ---------- 页头 ---------- */
.wp-block-template-part > header,
header.wp-block-group {
	z-index: 100;
}

/* 商品搜索框
   注意：这里用的是 woocommerce/product-search 块，类名是 wc-block-product-search__*，
   不是核心 search 块的 .wp-block-search__*。
   之前那套 .wp-block-search__* 选择器一条都没命中，搜索框等于完全没写样式，
   WooCommerce 又把 <label>Search</label> 当成普通文本渲染出来，
   于是页头多出一行标签、整行元素上下错位——看起来像"变形"。 */
.header-product-search {
	width: 220px;
	margin-bottom: 0;
}

/* 标签只留给读屏，不占视觉空间（不用 display:none，否则输入框丢掉可访问名称） */
.header-product-search .wc-block-product-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.header-product-search form {
	margin: 0;
}

/* 输入框 + 提交按钮合成一个整体控件 */
.header-product-search .wc-block-product-search__fields {
	display: flex;
	align-items: stretch;
	height: 38px;
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	background: var(--wp--preset--color--base);
	overflow: hidden;
	transition: border-color var(--shop-ease);
}

.header-product-search .wc-block-product-search__fields:focus-within {
	border-color: var(--wp--preset--color--accent-1);
}

.header-product-search .wc-block-product-search__field {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	padding: 0 12px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	box-shadow: none !important;
	outline: none;
	appearance: none;
}

.header-product-search .wc-block-product-search__field::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 1;
}

.header-product-search .wc-block-product-search__button {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-left: var(--shop-border);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--accent-4);
	box-shadow: none;
	cursor: pointer;
	transition: background var(--shop-ease), color var(--shop-ease);
}

.header-product-search .wc-block-product-search__button:hover {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-1);
}

.header-product-search .wc-block-product-search__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* 页头图标（账户 / 购物车）
   WooCommerce 用 em 定尺寸：`.wc-block-mini-cart__button .wc-block-mini-cart__icon`
   { width:1.5em; height:1.5em }，权重 0,2,0，压过单类选择器，
   所以之前那版 22px 对购物车图标根本没生效（实测仍是 24px），
   结果是账户 22px、购物车 24px，两个图标一大一小。
   这里用同级选择器并排在它之后才盖得住：
   · 图标 26px（搭配 34px 站标，视觉重量相当）
   · 点击热区 44×44（指尖最小可点尺寸），hover 出现浅色圆底 */
.wc-block-customer-account__link,
.wc-block-mini-cart__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	transition: background var(--shop-ease), color var(--shop-ease);
}

.wc-block-customer-account__link:hover,
.wc-block-customer-account__link:focus-visible,
.wc-block-mini-cart__button:hover:not([disabled]),
.wc-block-mini-cart__button:focus-visible {
	background: var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--accent-1);
}

.wc-block-customer-account__account-icon,
.wc-block-mini-cart__button .wc-block-mini-cart__icon {
	width: 26px;
	height: 26px;
}

/* 账户图标补成描边风
   模板里写了 iconStyle:"outline"，但 WC 前台只把它存成 data-icon-style 属性，
   实际渲染的仍是实心剪影 —— 与旁边描边的购物袋风格不一致，图标放大后更明显。
   这里的 path 是「圆头 + 肩部」两块剪影，改为描边即得到常规人形轮廓：
   2 略重于购物袋的 1.6px：人形是开口轮廓，视觉上比封闭的手袋显轻，加粗一档才配得上。 */
.wc-block-customer-account__account-icon path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* 登录后 WooCommerce 会在同一个 visual 容器里再渲染一张头像 <img>，
   于是线描图标和头像叠在一起（头像是 24px、图标 26px，图标边缘从头像后露出来）。
   有头像时把线描图标藏掉即可，用 :has() 判断：
   Chrome / Edge / Safari 15.4+ 都支持；万一不支持，也只是两个图形叠着，
   不影响链接可用。
   容器必须给死尺寸：藏掉图标后容器宽度改由头像决定，而 WP 全局的
   img{max-width:100%} 又要看容器宽度 —— 互相等宽会算出 0，头像直接消失。 */
.wc-block-customer-account__visual {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

.wc-block-customer-account__visual:has(.wc-block-customer-account__avatar) .wc-block-customer-account__account-icon {
	display: none;
}

.wc-block-customer-account__avatar {
	width: 26px;
	height: 26px;
	max-width: 26px;
	border-radius: 50%;
	object-fit: cover;
}

/* 购物车数量徽标
   位置由 WC 按图标容器宽度算（left:100% + margin-left:-44%），
   图标放大后徽标会自动跟着走。
   颜色则必须用 !important：WooCommerce 的 mini-cart JS 会把底色与文字色
   直接写成行内样式（data-wp-style--background-color → state.badgeBackgroundColor，
   默认白底 + 主题色数字），行内样式只有 !important 能压过；
   该区块也只暴露了数字颜色一个属性、没有背景色，所以走属性这条路不通。
   深绿实心圆 + 白字，是购物车数量最常见的形态。 */
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base) !important;
	font-size: 0.75rem;
	font-weight: 500;
	/* 默认 margin-left:-44%（相对图标容器宽度）会把圆点压到袋身上，
	   盖住提手弧线。收到 -26% 让它贴住图标右上角外侧，
	   只与图标轻微交叠。 */
	margin-left: -26% !important;
}

/* ---------- 页脚 ---------- */
/* 页脚栏目的链接列表：默认有三处不合意——
   1) 浏览器给 ul 加了 padding-inline-start（约 40px），文字被整体右移，
      跟上面的栏目名对不齐；
   2) 列表项带圆点；
   3) theme.json 给所有链接统一加了下划线。
   这里三样一起清掉，只把下划线留作 hover / 键盘聚焦时的反馈。 */
footer.wp-block-group .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer.wp-block-group .wp-block-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer.wp-block-group .wp-block-list li::marker {
	content: "";
}

footer.wp-block-group .wp-block-list a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-4);
	transition: color var(--shop-ease);
}

footer.wp-block-group .wp-block-list a:hover,
footer.wp-block-group .wp-block-list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--wp--preset--color--accent-1);
}

/* ---------- 商店页：商品网格 ---------- */
/* WooCommerce 传统模板默认用 float + 百分比宽度，这里整体换成 Grid，
   否则改不了列数。下面先把 li 的 float/width 清掉。

   坑：WooCommerce 给 ul.products 加了 clearfix 伪元素
   （::before / ::after 且 display: table）。在 float 布局里这是无害的，
   但一旦 ul 变成 display:grid，这两个伪元素会被当作匿名 grid item
   各占一个格子，结果第一个商品被挤到第二列、整行错位。
   所以必须显式关掉。 */
.woocommerce ul.products[class*="columns-"]::before,
.woocommerce ul.products[class*="columns-"]::after,
.woocommerce-page ul.products[class*="columns-"]::before,
.woocommerce-page ul.products[class*="columns-"]::after {
	content: none;
	display: none;
}

.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products[class*="columns-"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 28px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 商品图：统一方形，避免不同尺寸图片把网格撑乱 */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 16px;
	border-radius: var(--shop-radius);
	background: var(--wp--preset--color--accent-5);
	transition: transform var(--shop-ease);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.015);
}

/* 无图商品的占位图（src 由 functions.php 的 woocommerce_placeholder_img_src 换成品牌 SVG）。
   WooCommerce 默认给占位图加 1px 灰边，和 SVG 自带的米白底叠在一起会显出一条脏缝，这里去掉。 */
img.woocommerce-placeholder {
	border: 0;
	display: block;
	width: 100%;
	height: auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	margin: 0 0 6px;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0;
}

.woocommerce ul.products li.product .price {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-1);
	margin: 0 0 14px;
	display: block;
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
	opacity: 1;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 500;
}

/* 加购按钮：始终可见。
   早期版本做成 hover 才显形，观感更安静，但电商站这样会让用户以为不能直接买，
   转化率是实打实的损失，所以这里保持常显，只做轻微上浮反馈。 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin-top: auto;
	/* li 是 flex column，默认 align-self: stretch 会把按钮拉满整张卡片；
	   块模板（/shop/）那边按钮是按内容宽度，这里对齐过去，两处观感一致 */
	align-self: flex-start;
	font-size: 0.875rem;
	padding: 11px 18px;
	border-radius: var(--shop-radius);
	text-align: center;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	transition: background var(--shop-ease), transform var(--shop-ease);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	transform: translateY(-1px);
}

.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	font-size: 0.8rem;
	margin-top: 8px;
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* 促销标签 */
.woocommerce ul.products li.product .onsale {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 5px 12px;
	min-height: 0;
	min-width: 0;
	line-height: 1.3;
	margin: 12px;
	top: 0;
	right: 0;
	left: auto;
}

/* 结果计数与排序 */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 28px;
}

.woocommerce .woocommerce-ordering select {
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	padding: 9px 12px;
	font-size: 0.875rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* 分页 */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	min-width: 40px;
	padding: 10px 14px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* ---------- 商品详情页 ----------
   重要：WooCommerce 11 的商品页是 hybrid 渲染，
   主结构用 core columns 块（wp-block-columns）就已经分好两栏了：
     第 1 列 = wp-block-woocommerce-product-image-gallery
     第 2 列 = h1.wp-block-post-title + 价格块 + 加购表单块
   所以这里绝对不能再给容器加 display:grid ——
   那会和外层 columns 的 flex 布局嵌套，把右栏压成一条竖线（踩过这个坑）。
   布局交给块本身，这里只做视觉微调。 */
.single-product .wp-block-columns {
	align-items: flex-start;
}

.single-product h1.wp-block-post-title {
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.25;
	margin: 0 0 14px;
	letter-spacing: -0.015em;
}

.single-product .wc-block-components-product-price {
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-1);
	margin: 0 0 24px;
}

.single-product .wc-block-components-product-price del {
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
	opacity: 1;
	margin-right: 8px;
}

.single-product .wc-block-components-product-price ins {
	text-decoration: none;
}

/* 加购表单：数量框 + 按钮
   两个尺寸坑：
   1) 数量框只写了 padding，被主题对 input 的默认样式盖掉，实际只剩 ~24px 高；
      改成显式 height + box-sizing，尺寸才稳。
   2) 按钮原来 flex: 1，会把整行剩余宽度全吃掉，在宽屏上拉到 400px+ 像个色块。
      改成由内容撑开（flex: 0 0 auto）+ 合理的最小宽度。
   两者统一 height: 48px，视觉上等高。 */
.single-product form.cart {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 0 28px;
}

.single-product form.cart .quantity {
	display: flex;
	flex: 0 0 auto;
}

.single-product form.cart .quantity .qty {
	box-sizing: border-box;
	width: 76px;
	height: 48px;
	padding: 0 8px;
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	font-size: 1rem;
	line-height: 1;
	text-align: center;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.single-product form.cart .quantity .qty:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
	border-color: transparent;
}

/* 数量加减：原生 number 输入的上下箭头由浏览器绘制，只有 12px 左右，
   塞进 48px 的输入框里比例失衡，而且各浏览器长得都不一样。
   这里把 − / + 换成自绘按钮（行为见 assets/js/qty.js），
   整组合成一个 48px 高的控件，与加购按钮等高。 */
.single-product form.cart .quantity.has-stepper {
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	height: 48px;
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: border-color var(--shop-ease), box-shadow var(--shop-ease);
}

.single-product form.cart .quantity.has-stepper:focus-within {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-1);
}

.single-product form.cart .quantity.has-stepper .qty-step {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 44px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--shop-ease), color var(--shop-ease), opacity var(--shop-ease);
}

.single-product form.cart .quantity.has-stepper .qty-step:hover:not(:disabled) {
	background: var(--wp--preset--color--accent-6);
}

.single-product form.cart .quantity.has-stepper .qty-step:active:not(:disabled) {
	background: var(--wp--preset--color--accent-5);
}

.single-product form.cart .quantity.has-stepper .qty-step:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.single-product form.cart .quantity.has-stepper .qty-step--minus {
	border-right: 1px solid var(--wp--preset--color--accent-6);
}

.single-product form.cart .quantity.has-stepper .qty-step--plus {
	border-left: 1px solid var(--wp--preset--color--accent-6);
}

.single-product form.cart .quantity.has-stepper .qty {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 52px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	-moz-appearance: textfield;
	appearance: textfield;
}

.single-product form.cart .quantity.has-stepper .qty::-webkit-outer-spin-button,
.single-product form.cart .quantity.has-stepper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .quantity.has-stepper .qty:focus {
	outline: none;
	border-color: transparent;
}

.single-product form.cart .single_add_to_cart_button {
	flex: 0 0 auto;
	min-width: 200px;
	height: 48px;
	padding: 0 34px;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	border-radius: var(--shop-radius);
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border: 0;
	transition: background var(--shop-ease);
}

.single-product form.cart .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
}

/* ---------- 变体选择（尺寸 / 颜色） ----------
   坑：WooCommerce 自带两条规则的选择器权重比常规写法更高——
     .woocommerce table.variations tr td select            (0,3,1)   height: 3em; padding: .9em 1.1em
     .woocommerce div.product form.cart .variations select (0,4,1)   max-width: 100%; background-color: initial
   只写 .single-product .variations select (0,2,1) 会被它们压住，
   表现就是「写了 height: 48px 实际算出 42px、背景变透明」。
   所以下面统一带 .woocommerce div.product form.cart 前缀，权重做到 (0,5,1) 稳压。
   另外 form.cart 的 flex 只适用于无属性的简单商品：带变体时表单里是
   table.variations + .single_variation_wrap 纵向结构，这里退回 block，
   再自己把表格行改成 flex，尺寸才可控。 */
.single-product form.variations_form {
	display: block;
}

.single-product.woocommerce form.cart table.variations {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	border-collapse: separate;
	border-spacing: 0;
}

.single-product.woocommerce form.cart table.variations tbody {
	display: block;
}

.single-product.woocommerce form.cart table.variations tr {
	display: flex;
	align-items: center;
	gap: 16px;
}

.single-product.woocommerce form.cart table.variations th.label {
	flex: 0 0 78px;
	width: 78px;
	padding: 0 0 12px;
	vertical-align: middle;
	text-align: left;
	font-weight: inherit;
}

.single-product.woocommerce form.cart table.variations th.label label {
	display: inline-block;
	margin: 0;
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

.single-product.woocommerce form.cart table.variations td.value {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0 12px;
	vertical-align: middle;
}

.single-product.woocommerce form.cart table.variations td.value select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 0 1 280px;
	width: 280px;
	max-width: 100%;
	height: 48px;
	padding: 0 40px 0 14px;
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	background-color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2314181B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 11px 7px;
	font-size: 0.95rem;
	line-height: normal;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.single-product.woocommerce form.cart table.variations td.value select:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
	border-color: transparent;
}

/* 「Clear」默认是蓝色下划线的通用链接，改成弱化小字 */
.single-product.woocommerce form.cart .variations .reset_variations {
	flex: 0 0 auto;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color var(--shop-ease);
}

.single-product.woocommerce form.cart .variations .reset_variations:hover {
	color: var(--wp--preset--color--accent-1);
}

/* 选中变体后出现的价格与库存：把默认那圈 1.2em 外边距收掉，避免按钮被推远 */
.single-product .single_variation_wrap {
	margin-top: 4px;
}

.single-product .woocommerce-variation.single_variation {
	margin-bottom: 14px;
}

.single-product .woocommerce-variation-price .price {
	display: block;
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-1);
}

.single-product .woocommerce-variation-availability {
	margin: 0;
}

.single-product .woocommerce-variation-availability .stock {
	display: block;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4);
}

.single-product .woocommerce-variation-description:empty {
	display: none;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
}

/* 属性没选满时按钮是禁用态，视觉上要能看出来不能点 */
.single-product .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button,
.single-product .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* 商品图 */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image--placeholder img {
	border-radius: var(--shop-radius);
}

/* 元信息（分类、SKU） */
.single-product .wp-block-woocommerce-product-meta {
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent-4);
	border-top: var(--shop-border);
	padding-top: 18px;
	line-height: 1.9;
}

/* 描述 / 评价 区 */
.single-product .wp-block-woocommerce-product-details {
	margin-top: 56px;
	padding-top: 48px;
	border-top: var(--shop-border);
}

.single-product .wp-block-woocommerce-product-details h2 {
	font-size: 1.35rem;
	margin-bottom: 20px;
}

/* 相关商品（块商品模板）
   坑：这个列表本身是 is-flex-container columns-5，列的宽度由 li 的
   flex-basis 决定。如果强行改成 display:grid，li 上残留的百分比宽度
   会对不上网格轨道，把商品名压成一列一个字母。
   所以布局交给它自己的 flex，这里只调间距和视觉。 */
.single-product .wp-block-woocommerce-product-collection {
	margin-top: 56px;
	padding-top: 48px;
	border-top: var(--shop-border);
}

.single-product ul.wc-block-product-template {
	gap: 28px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .wc-block-components-product-image {
	border-radius: var(--shop-radius);
	overflow: hidden;
	background: var(--wp--preset--color--accent-5);
}

.single-product .wc-block-components-product-button .wp-block-button__link,
.single-product .wc-block-components-product-button .wp-element-button {
	width: 100%;
	font-size: 0.85rem;
	padding: 10px 14px;
	border-radius: var(--shop-radius);
}

/* ---------- 通知条与表单 ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--shop-radius);
	border-top: 0;
	padding: 16px 20px;
	font-size: 0.9rem;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	border-left: 3px solid var(--wp--preset--color--accent-1);
	box-shadow: none;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--accent-1);
}

.woocommerce-error {
	border-left-color: #B3261E;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: var(--shop-border);
	border-radius: var(--shop-radius);
	padding: 13px 14px;
	font-size: 0.95rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
	border-color: transparent;
}

/* ---------- 商店页：块商品模板 ----------
   上面的商品网格样式写的是旧版结构（ul.products li.product），
   它只对首页 [products] 短代码生效。
   而 /shop/ 归档页在 WooCommerce 11 + 块主题下走的是块模板：
     li.wc-block-product
       ├─ .wp-block-woocommerce-product-image
       ├─ h2.wp-block-post-title
       ├─ .wp-block-woocommerce-product-price
       ├─ .wp-block-woocommerce-product-button
       └─ .wp-block-woocommerce-product-sale-badge
   两者结构完全不同，类名也完全不同，所以必须分开写。
   块模板的默认样式是「全部居中 + 角标当普通块排版」，
   结果角标会掉到按钮下方、卡片文字跟首页对不齐。下面逐项纠正。 */

/* 卡片本体：竖排 flex，让加购按钮能贴到卡片底部对齐 */
li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
}

/* 商品图 */
li.wc-block-product .wc-block-components-product-image {
	border-radius: var(--shop-radius);
	overflow: hidden;
	/* 兜住「图根本没输出」的情况，用与占位图 SVG 相同的米白 */
	background-color: #f5f3ef;
}

li.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform var(--shop-ease);
}

li.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.015);
}

/* 占位图外观由文件顶部的 img.woocommerce-placeholder 统一处理，这里不再单独覆盖 */

/* 标题 / 价格 / 按钮：模板里写死了 has-text-align-center，统一改回左对齐 */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-woocommerce-product-price,
li.wc-block-product .wc-block-components-product-price,
li.wc-block-product .wp-block-woocommerce-product-button {
	text-align: left !important;
}

li.wc-block-product .wp-block-post-title {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	margin: 14px 0 6px;
	letter-spacing: 0;
}

li.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

li.wc-block-product .wp-block-woocommerce-product-price {
	margin-bottom: 14px !important;
}

li.wc-block-product .wc-block-components-product-price {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-1);
	justify-content: flex-start;
}

li.wc-block-product .wc-block-components-product-price del {
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
	opacity: 1;
	margin-right: 6px;
}

li.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 500;
}

/* 加购按钮：跟首页卡片完全一致（常显、深色、左对齐），并贴卡片底部 */
li.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
	margin-bottom: 0 !important;
	/* 模板给外层加了 align-center，但它是 flex-direction: column，
	   所以真正决定水平位置的是 align-items（不是 justify-content），
	   只改 justify-content 看不出任何变化。 */
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button__button {
	display: inline-block;
	width: auto;
	padding: 11px 20px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	border: 0;
	border-radius: var(--shop-radius);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition: background var(--shop-ease), transform var(--shop-ease);
}

li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
li.wc-block-product .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	transform: translateY(-1px);
}

/* 促销角标：块模板把它当成普通块排在按钮后面，
   结果「SALE」跑到卡片底部右侧去了。改成绝对定位到商品图右上角。 */
li.wc-block-product .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	margin: 0;
	z-index: 2;
	width: auto;
}

li.wc-block-product .wc-block-components-product-sale-badge {
	position: static;
	margin: 0;
	padding: 5px 12px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}

li.wc-block-product .wc-block-components-product-sale-badge__text {
	color: var(--wp--preset--color--base);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.single-product .wp-block-columns {
		flex-wrap: wrap;
	}

	.header-product-search {
		width: 160px;
	}
}

@media (max-width: 700px) {
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 14px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9rem;
	}

	/* 块模板卡片在窄屏的跟随调整 */
	li.wc-block-product .wp-block-post-title {
		font-size: 0.9rem;
	}

	li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
	li.wc-block-product .wc-block-components-product-button__button {
		padding: 10px 14px;
		font-size: 0.8rem;
	}

	li.wc-block-product .wc-block-components-product-image {
		background-size: 32px 32px;
	}

	.header-product-search {
		display: none;
	}

	/* 窄屏不再让按钮独占一行（那样数量框会孤零零占一行），
	   改成两者同一行、按钮吃掉剩余宽度 */
	.single-product form.cart {
		gap: 8px;
	}

	.single-product form.cart .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 18px;
	}
}

/* ---------- 移动端微调 ----------
   重要教训：这里曾经写过一堆「防溢出」规则（overflow-x: hidden、
   给 .alignfull 加强制宽度和 padding 等），起因是窄屏截图看到文字被截断。
   后来用诊断脚本测出真因：macOS 上 Chrome headless 有 500px 最小视口，
   请求 375px 时页面仍按 500px 布局再被裁到 375px，
   scrollWidth === clientWidth === 500，根本没有溢出。
   那些规则是在修一个不存在的问题，还破坏了 Hero 的全宽背景，已全部移除。
   下面只保留确实有益的两条。 */
@media (max-width: 700px) {
	/* 让 flex 子项可以真正收缩，避免长内容把列撑开 */
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column,
	.wp-block-post-content {
		min-width: 0;
	}

	/* 长单词/长链接在极窄屏下兜底断行 */
	h1, h2, h3, p, li, a, blockquote {
		overflow-wrap: break-word;
	}

	/* 移动端 Hero 字号收一点 */
	.wp-block-post-content > .wp-block-group > h1 {
		font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
	}
}

/* ---------- 商品页底部元信息：SKU / 分类 / 标签 ----------
   Product Meta 块默认把三项塞进一个 is-nowrap 的 flex 行，
   Tags 一多就被压成一条挤在一起的长串，字号还偏大。
   改为：SKU 与分类同排（前缀统一成灰色小标签），标签独占一行做成胶囊。 */

.wp-block-woocommerce-product-meta {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* 覆盖块自带的 is-nowrap，允许换行 */
.wp-block-woocommerce-product-meta > .wp-block-group {
	display: flex;
	flex-wrap: wrap !important;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 14px 44px;
}

.wp-block-woocommerce-product-meta .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* 前缀：统一成灰色小标签 */
.wp-block-woocommerce-product-meta .wp-block-post-terms__prefix {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	white-space: nowrap;
}

/* SKU 值 */
.wp-block-woocommerce-product-meta .sku {
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
}

/* 分类：去下划线，用细底线代替 */
.wp-block-woocommerce-product-meta .taxonomy-product_cat a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-block-woocommerce-product-meta .taxonomy-product_cat a:hover {
	color: var(--wp--preset--color--accent-1);
	border-bottom-color: currentColor;
}

/* 标签：独占一行 + 胶囊样式，逗号分隔符交给间距 */
.wp-block-woocommerce-product-meta .taxonomy-product_tag {
	display: block;
	flex: 1 1 100%;
}

.wp-block-woocommerce-product-meta .taxonomy-product_tag .wp-block-post-terms__prefix {
	display: block;
	margin-bottom: 10px;
}

.wp-block-woocommerce-product-meta .taxonomy-product_tag .wp-block-post-terms__separator {
	display: none;
}

.wp-block-woocommerce-product-meta .taxonomy-product_tag a {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 5px 13px;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-5);
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wp-block-woocommerce-product-meta .taxonomy-product_tag a:hover {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: #fff;
}

@media (max-width: 700px) {
	.wp-block-woocommerce-product-meta > .wp-block-group {
		gap: 12px 24px;
	}

	.wp-block-woocommerce-product-meta .taxonomy-product_tag a {
		padding: 4px 11px;
		margin: 0 6px 6px 0;
	}
}

/* ---------- 商品页面包屑 ----------
   默认是绿色小字 + 下划线，在深色标题上方显得很吵。
   改成淡灰、无下划线，hover 才给强调色。 */

.woocommerce-breadcrumb {
	margin-bottom: 18px;
	font-size: 0.75rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--accent-4);
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	transition: color 0.18s ease;
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 源站的变体全名有时会被写成标签（90+ 字符），
   胶囊必须能截断，否则会撑满整行。 */
.wp-block-woocommerce-product-meta .taxonomy-product_tag a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* ---------- 块模板商品卡的 SALE 角标 ----------
   探针实测：徽标容器 (inner-container) 是 flex row + justify-content: flex-end，
   改 align-self 完全不起作用（主轴是水平方向）。
   所以直接把徽标从 flex 流里摘出来，用 absolute 钉在左上角。 */

li.wc-block-product .wc-block-components-product-image__inner-container {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

li.wc-block-product .wp-block-woocommerce-product-sale-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	width: auto !important;
	margin: 0 !important;
	align-items: flex-start !important;
}

li.wc-block-product .wc-block-components-product-sale-badge {
	align-self: flex-start !important;
	margin: 0 !important;
}

/* ---------- 商品图集缩略图条 ----------
   WooCommerce 的 flexslider 缩略图用 4 列 + 百分比宽度，
   我们的图集固定是「主图 + 4 张子图」共 5 张，第 5 张会被挤到第二行。
   改成 5 列等宽网格，一行正好铺满。 */

.product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.product .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	opacity: 0.72;
}

.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

@media (max-width: 700px) {
	.product .woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}
}