/*
 * 3FS 商店的视觉系统 —— 目录、商品页、购物车、结帐。
 *
 * 为什么单独一个档案：style.css 只放「块编辑器管不到的修补」，那些每一条都有
 * 各自的来龙去脉（见该档注释）。这一份不同，它是整套版面语言。
 *
 * 挂载在 functions.php，排在 style.css 之后。
 *
 * ── 规矩 ───────────────────────────────────────────────────────────
 * 字级、间距、圆角、控件高度一律只能用下面这组 token。
 * 档案里不准再出现 .65rem / 13px / 7px 这种当场想出来的数字 ——
 * 「有大有小」就是这么来的：每个元件各自挑一个差不多的值，
 * 单看都合理，摆在一起就是没有节奏。
 *
 * 字级只有 7 档，相邻两档差距够大，肉眼分得出层级；
 * 间距全是 4 的倍数；圆角只有 3 种；可点元素一律 ≥44px。
 * ───────────────────────────────────────────────────────────────────
 *
 * 命名：自己写的用 shop- 前缀；其余全是 WooCommerce 区块自己的类名，
 * 换皮不换结构 —— 结帐、购物车、商品格全部还是原生区块，升级不会崩。
 */

:root {
	/* 颜色 */
	--shop-ink:        #171717;
	--shop-ink-2:      #404040;
	--shop-orange:     #FF7E00;
	--shop-orange-dk:  #E06E00;
	--shop-body:       #333333;
	--shop-muted:      #6B6B6B;
	--shop-faint:      #8A8A8A;
	--shop-line:       #E5E5E5;
	--shop-wash:       #F5F5F5;
	--shop-surface:    #F7F7F7;
	--shop-ok:         #2E9E5B;

	/* 字级 —— 只有这 7 档 */
	--fs-label:  0.6875rem;  /* 11px  全大写小标、计数、脚注 */
	--fs-meta:   0.75rem;    /* 12px  次要资讯、说明文字 */
	--fs-ui:     0.8125rem;  /* 13px  按钮、表单、商品名 */
	--fs-body:   0.875rem;   /* 14px  正文 */
	--fs-price:  1.125rem;   /* 18px  列表价格 */
	--fs-title:  1.5rem;     /* 24px  单品名、区段标题 */
	--fs-hero:   2rem;       /* 32px  单品价格 */
	--fs-display: clamp(2.375rem, 5.2vw, 4rem);  /* 38–64px  只给页面标题 */

	/* 字重 —— 只有这 3 档 */
	--fw-body: 400;
	--fw-med:  600;
	--fw-bold: 700;

	/* 间距 —— 4 的倍数 */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  20px;
	--sp-6:  24px;
	--sp-8:  32px;
	--sp-10: 40px;
	--sp-12: 48px;

	/* 圆角 —— Swiss：全部为 0。留三个名字是为了万一要回到圆角版，
	   只改这三行就够，不必全档搜。 */
	--r-sm: 0;
	--r-md: 0;
	--r-lg: 0;

	/* 可点元素高度 —— 最小 44px（触控标准） */
	--h-ctl:    44px;  /* 一般按钮、选单、分类列 */
	--h-ctl-lg: 48px;  /* 表单输入框、单品页加购 */
	--h-cta:    52px;  /* 每一页唯一的主要动作：结帐、下单 */

	/* 动效 */
	--shop-ease: cubic-bezier(.16, 1, .3, 1);
	--shop-fast: .18s;
}

/* 价格、数量、重量一律等宽数字 —— 不然整排卡片的价格会左右跳。 */
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* 键盘焦点。WooCommerce 有些按钮自己把 outline 关掉了，这里统一补回来。 */
.wp-block-woocommerce-cart :focus-visible,
.wp-block-woocommerce-checkout :focus-visible,
.shop-chrome :focus-visible,
.wc-block-components-product-button__button:focus-visible,
.wc-block-mini-cart__button:focus-visible {
	outline: 2px solid var(--shop-orange);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-template > li,
	.shop-chrome__cart .wc-block-mini-cart__button,
	.wc-block-components-product-button__button {
		transition: none !important;
	}
	.wp-block-woocommerce-product-template > li:hover { transform: none; }
}

/* ==========================================================================
   一、顶栏
   ========================================================================== */

/* 全白顶栏：只有一条细线跟内容分开，没有底色、没有阴影。 */
.shop-chrome__bar {
	min-height: 72px;
	border-bottom: 1px solid var(--shop-line);
	gap: var(--sp-6);
	padding: var(--sp-3) 0;
	align-items: center;
	flex-wrap: nowrap;
}

.shop-chrome .wp-block-site-logo img { display: block; }

/* 搜索框：占中间的伸缩空间，深色底上用更深一格的填色而不是描边。 */
.shop-chrome__search {
	flex: 1 1 auto;
	max-width: 420px;
	margin: 0;
}
/* 搜索框只留一条底线 —— 框线在全白版里太重。 */
.shop-chrome__search .wp-block-search__inside-wrapper {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--shop-line);
	border-radius: 0;
	padding: 0;
	min-height: var(--h-ctl);
}
.shop-chrome__search .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--shop-ink);
	font-size: var(--fs-ui);
	padding: var(--sp-2) 0;
	min-height: var(--h-ctl);
}
.shop-chrome__search .wp-block-search__input::placeholder { color: var(--shop-faint); }
.shop-chrome__search .wp-block-search__button {
	background: transparent;
	color: var(--shop-faint);
	padding: var(--sp-2);
	min-width: var(--h-ctl);
	min-height: var(--h-ctl);
}
.shop-chrome__search .wp-block-search__button:hover { color: var(--shop-ink); background: transparent; }

.shop-chrome .wp-block-navigation {
	flex: 0 0 auto;
	font-size: var(--fs-ui);
	font-weight: var(--fw-med);
}
/* 导航连结原本只有 20px 高 —— 视觉上够用，手指点不准。
   撑到 44px（文字位置不变，涨的是上下的可点区域）。 */
.shop-chrome .wp-block-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--h-ctl);
}
.shop-chrome .wp-block-navigation a { color: var(--shop-muted); }
.shop-chrome .wp-block-navigation a:hover,
.shop-chrome .wp-block-navigation .current-menu-item a { color: var(--shop-ink); }

/* 购物车钮 —— 全站唯一一个「永远是橙色」的元素，所以它必须是最显眼的那个。 */
.shop-chrome__cart .wc-block-mini-cart__button {
	background: var(--shop-orange);
	color: #fff;
	border-radius: var(--r-md);
	padding: 0 var(--sp-4);
	min-height: var(--h-ctl);
	gap: var(--sp-2);
	font-size: var(--fs-ui);
	font-weight: var(--fw-bold);
	transition: background var(--shop-fast) var(--shop-ease);
}
.shop-chrome__cart .wc-block-mini-cart__button:hover { background: var(--shop-orange-dk); }
.shop-chrome__cart .wc-block-mini-cart__amount { color: #fff; }
.shop-chrome__cart .wc-block-mini-cart__badge {
	background: #fff;
	color: var(--shop-orange);
	border-radius: 0;
	border: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-label);
}
.shop-chrome__cart .wc-block-mini-cart__icon { fill: #fff; }

/* 公告条 */
/* 公告条：白底、一条细线，字色退到 muted。 */
.shop-ticker { border-bottom: 1px solid var(--shop-line); }
.shop-ticker p {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-6);
	margin: 0;
	padding: var(--sp-2) 0;
	font-size: var(--fs-label);
	line-height: 1.5;
}
.shop-ticker strong { color: var(--shop-ink); font-weight: var(--fw-med); }

/* ==========================================================================
   二、目录页 —— 分类栏与工具列
   ========================================================================== */

/* 分类栏跟着卷动。量过：分类栏内容 341px，商品格 1934px ——
   固定的话，往下卷两屏之后左边就是一片空白，切分类还得卷回顶部。
   sticky 之后它一直在手边，那片空白也不再是「版面破了」而是留白。
   top 用 --sp-5，跟内容区上缘的节奏一致。 */
/* sticky 要挂在「栏」上，不能挂在 .shop-cats 上。
   .shop-cats 外面还包了一层 template-part 的 div，那层只有内容那么高
   （341px），sticky 的可移动范围就只有那 341px —— 卷过去就跟着不见了，
   量出来跟没设一样。挂在 flex item 的栏上，再用 align-self:flex-start
   阻止它被拉成整栏高，sticky 才有整段可以跟。 */
.shop-layout > .shop-sidebar-col {
	position: sticky;
	top: var(--sp-5);
	align-self: flex-start;
}

.shop-cats__title {
	font-size: var(--fs-label) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shop-faint);
	font-weight: var(--fw-bold);
	margin: 0 0 var(--sp-2);
}

.shop-cats .wc-block-product-categories-list,
.shop-cats ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
/* 数量是 <a> 的兄弟节点而不是它的子节点，所以整条 flex 要挂在 li 上 —— 挂在 a 上
   数量会掉到下一行（WooCommerce 的 product-categories 区块就是这个结构）。 */
.shop-cats .wc-block-product-categories-list-item,
.shop-cats ul > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: var(--h-ctl);
	padding: 0;
	border-bottom: 1px solid var(--shop-line);
	transition: color var(--shop-fast) var(--shop-ease);
}
.shop-cats .wc-block-product-categories-list-item:hover > a,
.shop-cats ul > li:hover > a { color: var(--shop-orange); }
/* 当前分类用一条橙色左标，不用底色块 —— 底色块在全白版里太重。 */
.shop-cats .wc-block-product-categories-list-item.current-cat,
.shop-cats ul > li.current-cat {
	box-shadow: inset 2px 0 0 var(--shop-orange);
	padding-left: var(--sp-3);
}
/* 分类连结要自己撑满整条 44px，不能只靠 li 的 padding ——
   可点的是 <a>，li 再高也没用（量到连结只有 18px）。 */
.shop-cats .wc-block-product-categories-list-item > a,
.shop-cats ul > li > a {
	flex: 1;
	display: flex;
	align-items: center;
	min-height: var(--h-ctl);
	font-size: var(--fs-ui);
	font-weight: var(--fw-med);
	line-height: 1.4;
	color: var(--shop-body);
	text-transform: capitalize;
}
.shop-cats .wc-block-product-categories-list-item:hover > a,
.shop-cats ul > li:hover > a { color: var(--shop-ink); }
.shop-cats .wc-block-product-categories-list-item-count {
	flex: none;
	font-size: var(--fs-label);
	color: var(--shop-faint);
	font-weight: var(--fw-med);
}
.shop-cats .wc-block-product-categories-list-item-count::before,
.shop-cats .wc-block-product-categories-list-item-count::after { content: none; }
.shop-cats .wc-block-product-categories-list--depth-1 { padding-left: var(--sp-3); }

.shop-cats__help {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin-top: var(--sp-6);
	font-size: var(--fs-meta);
	line-height: 1.7;
	color: var(--shop-muted);
}
.shop-cats__help p { margin: 0; }
.shop-cats__help strong { color: var(--shop-ink); }
.shop-cats__wa { margin-top: var(--sp-3) !important; }
/* WhatsApp 那条从绿色实心钮改成橙色文字连结 —— 全白版里，
   侧栏挂一颗绿色按钮会跟右上角的购物车钮抢，而且绿色不是品牌色。 */
.shop-cats__wa a {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--shop-orange);
	font-size: var(--fs-meta);
	font-weight: var(--fw-med);
	padding: 0;
	min-height: var(--h-ctl);
	border-radius: 0;
}
.shop-cats__wa a:hover { background: transparent; color: var(--shop-orange-dk); text-decoration: underline; }

/* 页面标题：商店、购物车、结帐、订单完成一律同一个字级、同样靠左。
   Woo 自己的购物车／结帐模板是置中的，跟目录页和单品页对不上 ——
   一路点下来标题一下左一下中，就是「不专业」最容易被看出来的地方。 */
/* 页面标题一律靠左。Woo 与 twentytwentyfive 的一般页面模板是置中的，
   一路点下来标题一下左一下中，就是最容易被看出来的不专业。 */
.page .wp-block-post-title,
.single-product .wp-block-post-title {
	text-align: left !important;
}

/* 只有商店目录页用 display 字级。购物车与结帐是办事的页面，
   64px 的「Cart」只会喊，不会帮人结帐 —— 那两页维持 --fs-hero。 */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	font-size: var(--fs-hero) !important;
	font-weight: var(--fw-med) !important;
	text-align: left !important;
	letter-spacing: -.02em;
	margin-bottom: var(--sp-5);
}

.woocommerce .wp-block-query-title,
.woocommerce-page .wp-block-query-title {
	font-size: var(--fs-display) !important;
	font-weight: var(--fw-bold) !important;
	text-align: left !important;
	line-height: 1.05;
	letter-spacing: -.04em;
	margin-bottom: var(--sp-6);
}

.shop-toolbar {
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--shop-line);
	align-items: center;
	gap: var(--sp-4);
}
.shop-toolbar .wc-block-product-results-count,
.shop-toolbar .wp-block-woocommerce-product-results-count {
	font-size: var(--fs-meta);
	color: var(--shop-muted);
	margin: 0;
}
.shop-toolbar select {
	border: 0;
	border-bottom: 1px solid var(--shop-line);
	border-radius: 0;
	padding: 0;
	font-size: var(--fs-meta);
	font-weight: var(--fw-med);
	color: var(--shop-muted);
	background-color: #fff;
	min-height: var(--h-ctl);
}

/* ==========================================================================
   三、商品卡
   --------------------------------------------------------------------------
   一排卡片要看起来是「一套」，靠的是每一块的高度由规则决定、而不是由内容决定：
   图片固定 4:3、标题固定两行、价格一行、按钮整宽贴底。

   商品名长短差很多（有的 3 个字，有的 12 个字），不锁行数的话
   每张卡的价格与按钮就会各自停在不同高度 —— 那就是「有大有小」的来源。
   ========================================================================== */

/* Swiss 的做法：不给每张卡描边，改用 1px 的格线当分隔。
   grid 的 gap 用 1px、容器铺底色，缝隙透出来就是格线 —— 相邻两格共用一条，
   不会像「每张卡各有边框」那样出现 2px 的双线。 */
/* 格线画在格子自己身上，不是「容器铺底色、gap 透出来」。
   后者在商品数不满一整行时会露馅：10 件排 3 栏，最后一行空两格，
   那两格会变成一大块灰色。把 border 交给每个 li，空位就什么都没有。

   容器只画上缘与左缘，每个 li 画右缘与下缘 —— 相邻两格共用一条线，
   不会出现 2px 的双线，最右一栏与最后一行的线就是整块的外框。 */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template,
.wp-block-woocommerce-product-template {
	gap: 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--shop-line);
	border-left: 1px solid var(--shop-line);
}

.wp-block-woocommerce-product-template > li {
	display: flex;
	flex-direction: column;
	border: 0;
	border-right: 1px solid var(--shop-line);
	border-bottom: 1px solid var(--shop-line);
	border-radius: 0;
	overflow: hidden;
	background: #fff;
	padding: var(--sp-5);
	/* 没有阴影、不位移 —— hover 只换一层极浅的底色。
	   Swiss 那套里，抬起来的卡片就是多余的装饰。 */
	transition: background var(--shop-fast) var(--shop-ease);
}
.wp-block-woocommerce-product-template > li:hover {
	background: #FBFBFB;
}

/* 图：白底商品照放在浅灰垫子上，contain 不裁切 —— 这批图长宽比差很多
   （有实拍的卷纸，也有标了尺寸的示意图），用 cover 会把内容切掉。
   固定 4:3 + 内距，让每张图占的版面一样大。 */
.wp-block-woocommerce-product-template > li .wc-block-components-product-image {
	margin: 0 0 var(--sp-5);
	background: transparent;
	border-bottom: 0;
	padding: 0;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}
.wp-block-woocommerce-product-template > li .wc-block-components-product-image a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.wp-block-woocommerce-product-template > li .wc-block-components-product-image img {
	max-width: 82%;
	max-height: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* 标题锁两行，超出用省略号 —— 商品名前段就有尺寸，截掉尾巴仍认得出是哪一件。
   锁行数是为了让下面的价格与按钮在每张卡上都停在同一个高度。 */
.wp-block-woocommerce-product-template > li .wp-block-post-title,
.wp-block-woocommerce-product-template > li .wp-block-post-title.has-text-align-center {
	padding: 0;
	margin: 0;
	font-size: var(--fs-ui) !important;
	font-weight: var(--fw-med) !important;
	line-height: 1.45;
	text-align: left !important;
	text-transform: none !important;
	overflow: hidden;
	/* 固定两行高：内容长短不再影响下面价格与按钮的位置。 */
	min-height: calc(var(--fs-ui) * 1.45 * 2);
}

/* 锁行数要挂在里面的 <a> 上，不能挂在标题本身。
   标题是卡片（flex column）的直接子元素，也就是 flex item，而 flex item 的
   display 会被浏览器 blockify —— 写 -webkit-box 就算加了 !important，
   算出来仍然是 flow-root，line-clamp 直接失效。量过才发现的。 */
.wp-block-woocommerce-product-template > li .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wp-block-woocommerce-product-template > li .wp-block-post-title a:hover { color: var(--shop-orange); }

.wp-block-woocommerce-product-template > li > .wp-block-woocommerce-product-price {
	margin: 0;
	padding: var(--sp-5) 0 0;
	text-align: left !important;
	font-size: var(--fs-price) !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* 按钮永远贴着卡片底部、永远整宽 —— 一排看过去按钮的左右缘对齐，
   宽度不再跟着「Add to cart」／「Read more」的字数变。 */
.wp-block-woocommerce-product-template > li .wc-block-components-product-button {
	margin-top: var(--sp-3);
	padding: 0;
	text-align: left !important;
}
/* 外层 .wp-block-button 是 flex-direction:column 的 flex 容器，
   所以「宽度」是交叉轴。安静版按钮要靠左收窄，用 flex-start。 */
.wp-block-woocommerce-product-template > li .wc-block-components-product-button__button {
	align-self: flex-start;
}
/* 加购在目录页是安静的文字 + 下划线，不是整宽的黑条。
   一屏九个实心钮会互相抢，而且在 Swiss 那套里，实心块本身就是重量。
   仍然保留 44px 的可点高度 —— 视觉轻，手指点得到的面积不减。 */
.wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	width: auto;
	background: transparent;
	color: var(--shop-ink);
	border: 0;
	border-bottom: 1px solid var(--shop-ink);
	border-radius: 0;
	font-size: var(--fs-meta);
	font-weight: var(--fw-med);
	padding: 0 0 2px;
	min-height: var(--h-ctl);
	transition: color var(--shop-fast) var(--shop-ease),
	            border-color var(--shop-fast) var(--shop-ease);
}
.wc-block-components-product-button__button:hover {
	background: transparent;
	color: var(--shop-orange);
	border-bottom-color: var(--shop-orange);
}

/* 买不到的商品（分类被停用、又从别的分类漏出来的那几件）：按钮会渲染成
   "Read more"。做成次要样式，一眼就跟能买的区分开，别假装能买。 */
.wc-block-components-product-button .wp-block-button__link[href*="/product/"] {
	background: transparent;
	color: var(--shop-faint);
	border: 0;
	border-bottom: 1px solid var(--shop-line);
}
.wc-block-components-product-button .wp-block-button__link[href*="/product/"]:hover {
	background: transparent;
	color: var(--shop-ink);
	border-bottom-color: var(--shop-ink);
}

.wc-block-components-product-sale-badge {
	background: var(--shop-orange);
	color: #fff;
	border: 0;
	border-radius: var(--r-sm);
	font-size: var(--fs-label);
	font-weight: var(--fw-bold);
	letter-spacing: .05em;
	padding: var(--sp-1) var(--sp-2);
}

/* ==========================================================================
   四、单品页
   --------------------------------------------------------------------------
   用的是 WooCommerce 自己那份「块化」的 single-product 模板：
   外层是区块，加购表单里面仍然是传统的 variations_form。两种类名都要照顾到。
   ========================================================================== */

.single-product .wp-block-woocommerce-breadcrumbs {
	font-size: var(--fs-meta);
	color: var(--shop-faint);
	margin-bottom: var(--sp-5);
}

.single-product .wp-block-woocommerce-product-image-gallery img {
	border: 1px solid var(--shop-line);
	border-radius: var(--r-lg);
	background: var(--shop-surface);
}

/* Woo 的模板把标题置中、字级拉到 36px。商品名多半很长（含尺寸和数量），
   置中之后每一行的起点都不一样，扫读很吃力 —— 改成靠左、降一档。 */
.single-product .wp-block-post-title,
.single-product .wp-block-post-title.has-text-align-center {
	text-align: left !important;
	font-size: var(--fs-title) !important;
	font-weight: var(--fw-med) !important;
	line-height: 1.3;
	letter-spacing: -.02em;
	margin-bottom: var(--sp-2);
}

.single-product .wp-block-woocommerce-product-price {
	font-size: var(--fs-hero) !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: var(--sp-4) 0 var(--sp-3);
}
/* 价格数字要跟着外层一起放大。theme.json 给 woocommerce/product-price 设了
   large(18px)，那条是套在里面的 .woocommerce-Price-amount 上的 ——
   只放大外层的话，量到外层 32px、真正看得到的数字还是 18px，
   比 24px 的商品名还小，主次就颠倒了。 */
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price,
.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.single-product .wp-block-woocommerce-product-price ins,
.single-product .wp-block-woocommerce-product-price del,
.single-product .woocommerce-variation-price .woocommerce-Price-amount {
	/* inherit 也要 !important：Woo 自己给 .wc-block-components-product-price
	   设了带 !important 的字级，不压过去的话，外层放大到 32px、
	   里面的数字仍然是 18px。 */
	font-size: inherit !important;
	color: var(--shop-ink);
}

/* 规格表是 <table>，预设 label 和 select 并排在同一列，窄栏里挤成两行歪的。
   拆成 block 让 label 落在 select 上方。 */
.single-product .variations {
	margin: 0 0 var(--sp-5);
	border-top: 1px solid var(--shop-line);
	padding-top: var(--sp-5);
}
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th,
.single-product .variations td {
	display: block;
	width: 100%;
}
.single-product .variations th.label,
.single-product .variations th.label label {
	font-size: var(--fs-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shop-faint);
	font-weight: var(--fw-bold);
	padding-bottom: var(--sp-2);
	text-align: left;
}
.single-product .variations td.value select {
	width: 100%;
	min-height: var(--h-ctl-lg);
	border: 1.5px solid var(--shop-line);
	border-radius: var(--r-md);
	padding: 0 var(--sp-3);
	font-size: var(--fs-ui);
	font-weight: var(--fw-med);
	background-color: #fff;
}
.single-product .variations td.value select:focus {
	border-color: var(--shop-orange);
	box-shadow: 0 0 0 3px rgba(255, 126, 0, .13);
	outline: none;
}
.single-product .woocommerce-variation-price {
	margin: var(--sp-4) 0;
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
}

/* 数量 + 加购并排。加购是这一页的主要动作，让它吃掉剩下的宽度。
   注意 variations_form 的直接子元素是「规格表 + 加购区」，
   flex 只能挂在加购区上；挂在 form 上会把规格表跟按钮排成一行。 */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	flex-wrap: wrap;
}
.single-product form.cart .quantity input[type="number"] {
	width: 84px;
	min-height: var(--h-ctl-lg);
	border: 1.5px solid var(--shop-line);
	border-radius: var(--r-md);
	padding: 0 var(--sp-2);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-align: center;
}
.single-product form.cart .button {
	flex: 1 1 160px;
	background: var(--shop-orange);
	color: #fff;
	border-radius: var(--r-md);
	font-size: var(--fs-ui);
	font-weight: var(--fw-bold);
	padding: 0 var(--sp-5);
	min-height: var(--h-ctl-lg);
	transition: background var(--shop-fast) var(--shop-ease);
}
.single-product form.cart .button:hover { background: var(--shop-orange-dk); }
.single-product form.cart .button:disabled { background: var(--shop-surface); color: var(--shop-faint); }

.single-product .wp-block-woocommerce-product-meta {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--shop-line);
	font-size: var(--fs-meta);
	color: var(--shop-muted);
}
.single-product .wp-block-woocommerce-product-meta a { font-weight: var(--fw-med); }

/* ==========================================================================
   五、数量选择器（购物车、抽屉共用）
   ========================================================================== */

.wc-block-components-quantity-selector {
	border: 1px solid var(--shop-line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: #fff;
}
.wc-block-components-quantity-selector::after { content: none; }
.wc-block-components-quantity-selector__button {
	min-width: var(--h-ctl);
	min-height: var(--h-ctl);
	color: var(--shop-muted);
	/* Woo 用的是 .9em，算出来 12.6px —— 落在尺规两档中间。 */
	font-size: var(--fs-body) !important;
	transition: background var(--shop-fast) var(--shop-ease);
}
.wc-block-components-quantity-selector__button:hover { background: var(--shop-surface); color: var(--shop-ink); }
.wc-block-components-quantity-selector__input {
	font-size: var(--fs-ui);
	font-weight: var(--fw-bold);
	min-height: var(--h-ctl);
}

/* ==========================================================================
   六、迷你购物车抽屉
   ========================================================================== */

.wc-block-mini-cart__drawer .wc-block-components-drawer { max-width: 392px; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	padding: var(--sp-5);
	border-bottom: 1px solid var(--shop-line);
	margin: 0;
}
.wc-block-mini-cart__items { padding: 0 var(--sp-5); }
.wc-block-mini-cart-items .wc-block-cart-items__row {
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--shop-line);
}
.wc-block-mini-cart__footer {
	border-top: 1px solid var(--shop-line);
	padding: var(--sp-5);
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
}
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout {
	background: var(--shop-orange);
	color: #fff;
	border-radius: var(--r-md);
	font-size: var(--fs-ui);
	font-weight: var(--fw-bold);
	min-height: var(--h-ctl-lg);
	width: 100%;
}
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:hover { background: var(--shop-orange-dk); }
.wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart {
	background: #fff;
	color: var(--shop-ink);
	border: 1px solid var(--shop-line);
	border-radius: var(--r-md);
	font-size: var(--fs-ui);
	min-height: var(--h-ctl);
	/* 上面那颗 checkout 是 width:100%，flex base 等于整个容器宽；
	   两颗一起被 shrink 时它吃掉大半，View my cart 只剩 96px（一行要 126px）就折成两、三行。
	   不是 white-space 的事，加 nowrap 无效 —— 不让这颗被压缩就好。 */
	flex-shrink: 0;
}

/* ==========================================================================
   七、购物车页 与 结帐页
   ========================================================================== */

.wc-block-cart-items__header {
	font-size: var(--fs-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shop-faint);
	border-bottom: 1px solid var(--shop-line);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--shop-line); }
.wc-block-cart-item__image img {
	border: 1px solid var(--shop-line);
	border-radius: var(--r-md);
	background: var(--shop-surface);
}
.wc-block-components-product-name {
	font-size: var(--fs-ui);
	font-weight: var(--fw-med);
}
.wc-block-components-product-name:hover { color: var(--shop-orange); }
.wc-block-components-product-metadata { font-size: var(--fs-meta); color: var(--shop-muted); }

.wc-block-components-totals-item { font-size: var(--fs-ui); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	letter-spacing: -.01em;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--shop-orange);
	color: #fff;
	border-radius: var(--r-md);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	min-height: var(--h-cta);
	transition: background var(--shop-fast) var(--shop-ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--shop-orange-dk); }

/* Woo 自己给 step 设了 border:0，要压过去得连着 wrapper 一起选。 */
.wc-block-checkout__form .wc-block-components-checkout-step {
	border: 1px solid var(--shop-line);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	margin-bottom: var(--sp-4);
	background: #fff;
}
.wc-block-components-checkout-step__title { font-size: var(--fs-ui); font-weight: var(--fw-bold); }
.wc-block-components-checkout-step__heading { margin-bottom: var(--sp-4); }
.wc-block-components-checkout-step__description { font-size: var(--fs-meta); }

/* 这几条必须 !important —— 量过：加 body 前缀把权重拉到 0,3,2 仍然吃不到，
   换成同权重 + !important 立刻生效，也就是说 Woo 的结帐样式自己就是 !important。
   全档只有这一处这样写，其余都靠正常权重。 */
.wc-block-checkout__form .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wc-block-checkout__form .wc-blocks-components-select__select,
.wc-blocks-components-select__select {
	border: 1.5px solid var(--shop-line) !important;
	border-radius: var(--r-md) !important;
	min-height: var(--h-ctl-lg) !important;
	font-size: var(--fs-ui) !important;
}
.wc-block-checkout__form .wc-block-components-text-input input:focus,
.wc-block-checkout__form .wc-blocks-components-select__select:focus {
	border-color: var(--shop-orange) !important;
	box-shadow: 0 0 0 3px rgba(255, 126, 0, .13) !important;
	outline: none;
}
.wc-block-components-validation-error { font-size: var(--fs-meta); }

/* 结帐页的勾选框还留着 4px 圆角 —— 全站唯一一个漏网的。
   单选钮维持圆形，那是它该有的形状。 */
.wc-block-components-checkbox__input[type="checkbox"] { border-radius: 0 !important; }

/* 浮动标签预设 16px，比输入框里真正打出来的字（13px）还大，
   看起来像两套字级。跟输入框对齐。 */
.wc-block-checkout__form .wc-block-components-text-input label {
	font-size: var(--fs-ui);
}

/* 结帐摘要里的数量角标，Woo 也是 .75em → 10.5px。 */
.wc-block-components-order-summary-item__quantity {
	font-size: var(--fs-label) !important;
}

/* 购物车里的商品规格说明，Woo 用 .75em 算出 10.5px。 */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata p,
.wc-block-components-product-metadata__description,
.wc-block-components-product-details {
	font-size: var(--fs-meta) !important;
	color: var(--shop-muted);
}

/* 付款方式现在只有 RevenueMonster 一个。单选钮留着（Woo 结构如此），
   但整块做成一张说明卡，别让唯一的选项看起来像还要选。 */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	border: 1.5px solid var(--shop-line);
	border-radius: var(--r-md);
	margin-bottom: var(--sp-2);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--shop-orange);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__label {
	font-size: var(--fs-ui);
	font-weight: var(--fw-med);
}

/* ==========================================================================
   七之二、扫尾：把用 em 算出来的零星字级拉回尺规上
   --------------------------------------------------------------------------
   WooCommerce 与 WordPress 有几处用的是相对字级（.9em 之类），算出来是
   11.62px、11.67px 这种落在两档中间的值。单看没人发现，但整页扫过去
   就是「有大有小」。一律拉回 --fs-meta。
   ========================================================================== */

.woocommerce div.product form.cart .reset_variations,
.single-product .reset_variations,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata p,
.woocommerce #reply-title small a,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb {
	font-size: var(--fs-meta);
}

/* 结帐页与空购物车的关联商品用的是旧版 wc-block-grid 那套类名，不是
   product-template，所以前面那一整段都套不到它：标题只有 10.5px、
   整格置中、图片没有上限撑得比目录页还大。这里把它拉回同一套。 */
.wc-block-grid__products {
	gap: 0;
	border-top: 1px solid var(--shop-line);
	border-left: 1px solid var(--shop-line);
	margin: 0;
}
.wc-block-grid__product {
	text-align: left;
	margin: 0;
	padding: var(--sp-5);
	border-right: 1px solid var(--shop-line);
	border-bottom: 1px solid var(--shop-line);
}
.wc-block-grid__product-image {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	margin-bottom: var(--sp-4);
}
.wc-block-grid__product-image img {
	max-width: 82%;
	max-height: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.wc-block-grid__product-title {
	font-size: var(--fs-ui) !important;
	font-weight: var(--fw-med);
	line-height: 1.45;
}
.wc-block-grid__product-price {
	font-size: var(--fs-price) !important;
	font-weight: var(--fw-bold);
}
.wc-block-grid__product-price .woocommerce-Price-currencySymbol { font-size: inherit; }
/* 这套旧类名的加购钮也一起拉回来，样式跟目录页的安静版一致。 */
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	font-size: var(--fs-meta) !important;
	font-weight: var(--fw-med);
	background: transparent;
	color: var(--shop-ink);
	border: 0;
	border-bottom: 1px solid var(--shop-ink);
	border-radius: 0;
	padding: 0 0 2px;
	min-height: var(--h-ctl);
	display: inline-flex;
	align-items: center;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: transparent;
	color: var(--shop-orange);
	border-bottom-color: var(--shop-orange);
}

/* ==========================================================================
   七之三、加入购物车之后的状态
   --------------------------------------------------------------------------
   Woo 的做法是：按钮文字换成「1 in cart」，旁边多出一条 .added_to_cart 连结。
   预设下这两者长得几乎一样 —— 都是小字，分不出哪个是「状态」哪个是「动作」，
   而且 View cart 只有 26px 高，点不准。

   改成：按钮变成安静的状态文字（没有下划线，它已经不是动作了），
   View cart 接手成为唯一的动作，拿走下划线与 44px 的可点高度。
   用 :has() 判断「这一格已经加过了」—— Woo 在加购后不会给按钮加任何类名，
   唯一的信号就是旁边多出来的那条连结。
   ========================================================================== */

.wc-block-components-product-button:has(.added_to_cart) .wc-block-components-product-button__button {
	color: var(--shop-muted);
	border-bottom-color: transparent;
	cursor: default;
}
.wc-block-components-product-button:has(.added_to_cart) .wc-block-components-product-button__button:hover {
	color: var(--shop-muted);
	border-bottom-color: transparent;
}

/* 选择器要连着外层 —— 只写 .added_to_cart.wc_forward（0,2,0）吃不到，
   量出来 display 还是 inline-block。 */
.wc-block-components-product-button .added_to_cart,
.wc-block-grid__product .added_to_cart,
.added_to_cart.wc_forward {
	display: inline-flex;
	align-items: center;
	min-height: var(--h-ctl);
	margin-top: 0;
	font-size: var(--fs-meta);
	font-weight: var(--fw-med);
	color: var(--shop-ink);
	/* 这里用 text-decoration 而不是 border-bottom：可点高度是 44px，
	   border 会画在那 44px 的底部，离字有二十几 px，看起来像两个东西。
	   underline 贴着字走，44px 的可点范围照样在。 */
	border-bottom: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color var(--shop-fast) var(--shop-ease);
}
.wc-block-components-product-button .added_to_cart:hover,
.wc-block-grid__product .added_to_cart:hover,
.added_to_cart.wc_forward:hover {
	color: var(--shop-orange);
}

/* ==========================================================================
   七之四、查订单
   --------------------------------------------------------------------------
   这一页用的是传统表单，完全没被前面几段套到：量到输入框只有 31px 高、
   4px 圆角、边框颜色是 rgba(32,7,7,.8) 这种不知道哪来的深红。
   ========================================================================== */

.woocommerce-form-track-order {
	max-width: 720px;
}
.woocommerce-form-track-order .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-5);
	padding: 0;
	width: 100%;
}
.woocommerce-form-track-order label {
	font-size: var(--fs-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--shop-faint);
	font-weight: var(--fw-bold);
}
.woocommerce-form-track-order input[type="text"],
.woocommerce-form-track-order input[type="email"] {
	width: 100%;
	min-height: var(--h-ctl-lg);
	/* 跟结帐页同一个情况：Woo 这几条自己带 !important，
	   不这样写圆角会留在 4px（量过）。 */
	border: 1px solid var(--shop-line) !important;
	border-radius: 0 !important;
	padding: 0 var(--sp-3);
	font-size: var(--fs-ui);
	font-family: inherit;
	color: var(--shop-ink);
	background: #fff;
}
.woocommerce-form-track-order input::placeholder { color: var(--shop-faint); }
.woocommerce-form-track-order input:focus {
	border-color: var(--shop-orange);
	box-shadow: 0 0 0 3px rgba(255, 126, 0, .13);
	outline: none;
}
/* 送出钮那一行：外层 <p> 改成 flex，按钮才收得住宽度。 */
.woocommerce-form-track-order .form-row:has(button[type="submit"]) {
	display: flex;
	flex-direction: row;
}

/* Woo 用 form-row-first / form-row-last 把两格排成一行，各占 47%，
   中间那点空档是 float 留下的。改成 2 栏 grid，两格等宽、缝隙走 token。 */
.woocommerce-form-track-order {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--sp-5);
}
.woocommerce-form-track-order > p:first-child,
.woocommerce-form-track-order .clear,
.woocommerce-form-track-order > p:not(.form-row-first):not(.form-row-last) {
	grid-column: 1 / -1;
}
/* Woo 给这两个 class 设了 width:47%（float 版面的遗留）。
   现在外层已经是 grid，47% 会变成「格子宽度的 47%」—— 量到只剩 165px。 */
.woocommerce-form-track-order .form-row.form-row-first,
.woocommerce-form-track-order .form-row.form-row-last {
	width: 100%;
	float: none;
	margin-right: 0;
}
.woocommerce-form-track-order .clear { display: none; }

/* 查订单是这一页唯一的动作，给它实心块 —— 跟单品页的加购同一个层级。
   宽度按内容走，不要撑满整行：一个只有两个字的动作占满 720px 只会显得虚。 */
.woocommerce-form-track-order .form-row button[type="submit"],
.woocommerce-form-track-order button[type="submit"] {
	/* 光写 width:auto 没用 —— 按钮的 display 被算成 flex（块级），
	   块级元素照样撑满父层。让外层那个 <p> 变成 flex 容器，
	   按钮当 flex item 自然就收到内容宽度。 */
	width: auto;
	align-items: center;
	justify-content: center;
	background: var(--shop-ink);
	color: #fff;
	border: 0;
	border-radius: 0;
	min-height: var(--h-cta);
	padding: 0 var(--sp-8);
	font-size: var(--fs-ui);
	font-weight: var(--fw-bold);
	transition: background var(--shop-fast) var(--shop-ease);
}
.woocommerce-form-track-order button[type="submit"]:hover { background: var(--shop-orange); }

/* ==========================================================================
   八、页脚
   ========================================================================== */

.shop-footer { padding-top: var(--sp-12); padding-bottom: var(--sp-8); margin-top: var(--sp-12); }
.shop-footer h3 {
	font-size: var(--fs-label) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: var(--sp-3);
}
.shop-footer p { font-size: var(--fs-meta); line-height: 1.9; }
.shop-footer a { color: inherit; text-decoration: none; }
.shop-footer a:hover { color: var(--shop-orange); }
/* 政策连结原本是 <br> 隔开的行内连结，量到 18px 高。这几条是客人下单前
   真的会去点的（运费、退货），手机上 18px 点不准 —— 改成整行可点。

   line-height 要压回 1：外层段落是 1.9，叠在 44px 的 min-height 上，
   每条之间会多出 20 几 px 的空档，整栏看起来散掉。 */
.shop-footer p a {
	display: flex;
	align-items: center;
	min-height: var(--h-ctl);
	line-height: 1;
}
/* 只有政策那一栏是连结清单。<br> 是连结的兄弟节点（不是子节点），
   每一条之间会多顶出一行的高度 —— 量到连结 44px、间距却是 58px。
   连结已经是 block 了，<br> 没有存在必要。 */
.shop-footer p:has(> a) { line-height: 1; }
.shop-footer p:has(> a) br { display: none; }

/* 页脚从深色改成白底，strong 原本是白字 —— 白底白字整行看不见。 */
.shop-footer strong { color: var(--shop-ink); font-weight: var(--fw-med); }
.shop-footer__legal { margin-top: var(--sp-10) !important; opacity: .7; }

/* ==========================================================================
   九、窄萤幕
   ========================================================================== */

@media (max-width: 900px) {
	.shop-chrome__bar { flex-wrap: wrap; gap: var(--sp-3); }
	.shop-chrome__search { order: 3; flex: 1 0 100%; max-width: none; }
	.shop-chrome .wp-block-navigation { margin-left: auto; }
}

/* 窄萤幕上分类栏被排到商品格后面（style.css 里那条 order:2），
   排在底部的东西再 sticky 只会黏得莫名其妙，关掉。 */
@media (max-width: 781px) {
	.shop-layout > .shop-sidebar-col { position: static; }
}

@media (max-width: 600px) {
	/* 公告条在 375px 上会折成三行，吃掉首屏 80px —— 一个还没看到任何商品
	   的画面里，10% 拿去放灰色小字。只留下会影响下单决定的两条
	   （运费怎么算、能怎么付），其余在窄萤幕收起来。 */
	.shop-ticker p > span:first-child,
	.shop-ticker p > span:last-child { display: none; }

	.shop-toolbar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
	.shop-toolbar select { width: 100%; }
	.shop-footer { padding-top: var(--sp-8); margin-top: var(--sp-8); }
}