/* ==========================================================================
   Forest Messenger — WooCommerce 组件改造
   目标：让 Woo 的默认输出长得像 Ardot 设计稿（直角、细线、双语、雾绿空图位）
   位置：assets/css/fm-woo.css
   ========================================================================== */

/* ---------- 基础：去掉 Woo 的圆角/阴影/默认字体 ---------- */
.fm-woo input,
.fm-woo select,
.fm-woo textarea,
.fm-woo .button,
.fm-woo button {
	font-family: var(--sans);
	border-radius: 0;
	box-shadow: none;
}

.fm-woo .woocommerce-message,
.fm-woo .woocommerce-info,
.fm-woo .woocommerce-error {
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 2px solid var(--forest);
	color: var(--muted);
	font-size: 12.5px;
	letter-spacing: .02em;
	padding: 16px 18px;
}

/* 细线按钮（设计里的次按钮）
 * 注意权重：WooCommerce 自带的 `.woocommerce button.button.alt` 是 (0,3,1)，
 * 光写 `.fm-woo .single_add_to_cart_button` (0,2,0) 压不住，按钮会一直是 Woo 的紫底。
 * 这里用 `div.product form.cart button…` 把元素数也堆上去，才真的盖住。
 */
.fm-woo div.product form.cart button.single_add_to_cart_button,
.fm-woo div.product form.cart .single_add_to_cart_button.alt,
.fm-woo div.product form.cart .button.alt,
.fm-woo .button.alt {
	background-color: var(--forest-dark);
	color: var(--white);
	border: 1px solid var(--forest-dark);
	min-height: 48px;
	padding: 0 22px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}
.fm-woo div.product form.cart button.single_add_to_cart_button:hover,
.fm-woo div.product form.cart .single_add_to_cart_button.alt:hover {
	background-color: transparent;
	color: var(--forest-dark);
}

.fm-woo .button:not(.alt) {
	background: transparent;
	color: var(--forest);
	border: 1px solid var(--forest);
	min-height: 46px;
	padding: 0 22px;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ---------- 面包屑 ---------- */
.fm-crumb {
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--sans);
	font-size: 9.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}
.fm-crumb a { color: var(--muted); }
.fm-crumb a:hover { color: var(--forest); }
.fm-crumb-sep { color: #b0bdb1; margin: 0 8px; }

/* ---------- 商品网格：3 列，gap 20 / 行距 56 ---------- */
.fm-woo ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
	row-gap: 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 960px) { .fm-woo ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fm-woo ul.products { grid-template-columns: 1fr; } }

/* 卡片 */
.fm-woo ul.products li.product {
	margin: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
}

/* 图位：雾绿空态 + 内嵌 1px 照片板 */
.fm-woo ul.products li.product .woocommerce-loop-product__link { display: block; }
.fm-woo ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 380 / 400;
	object-fit: cover;
	background: var(--mist);
	box-shadow: inset 0 0 0 1px rgba(191, 206, 195, .9);
}

/* 分类微标 / 英文名 / 中文名 / 风味句 */
.fm-p-tag {
	display: block;
	margin-top: 18px;
	font-family: var(--sans);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tea);
}
.fm-p-name {
	margin: 8px 0 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.35;
	color: var(--bark);
}
.fm-p-name-cn {
	margin: 8px 0 0;
	font-family: var(--serif);
	font-size: 14px;
	letter-spacing: .16em;
	color: var(--forest);
}
.fm-p-note {
	margin: 8px 0 0;
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 300;
	color: var(--muted);
}
.fm-woo ul.products li.product .price {
	margin: 15px 0 0;
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--forest);
}

/* 价格 TBC */
.fm-price-tbc {
	display: block;
	font-family: var(--serif);
	font-size: 26px;
	letter-spacing: .02em;
	color: var(--forest-dark);
}
.fm-price-note {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	letter-spacing: .04em;
	color: #8d5d23;
}

/* ---------- 单品页：左 640（主图 → 说明 + 4 张细节图）/ 右 468 信息柱 ----------
 * 比例严格取自设计稿 `2:2951 Hero Row`：图库 640 + gap 72 + 信息柱 468 = 1180。
 * 早先实现写成 600 + 72 + 508，右栏比设计稿宽 40px —— 一行短文案加几条通栏细线
 * 撑在 508 里，右边就空出一大片，看着像没画完。
 * 用 fr 而不是固定 px，窄屏时两栏等比收缩，到 1100 以下再堆叠。
 */
.fm-woo div.product {
	display: grid;
	grid-template-columns: minmax(0, 640fr) minmax(0, 468fr);
	column-gap: 72px;
	row-gap: 44px;
	padding: 56px 0 88px;
	align-items: start;
}
.fm-woo div.product .fm-pdp__gallery { grid-column: 1; grid-row: 1; }
/* 左栏第二行只剩四张细节图；再往下就是页脚，不再有空的一栏。
 * 上下留白跟右栏说明对齐，两条细线落在同一条水平线上。 */
.fm-woo div.product .fm-pdp__desc { grid-column: 1; grid-row: 2; padding-top: 44px; border-top: 1px solid var(--line); }
.fm-woo div.product .fm-pdp__desc .fm-pdp__figures { margin-top: 0; }
/* 右栏第一行：购买区。
 * 这里**不能**用 position: sticky。原因实测过：
 * 信息柱现在只占 grid-row 1，可它下面同一列还有说明区（grid-row 2）。
 * Chrome 给 sticky 网格项用的约束矩形是整个网格容器（.product，884+ 高），
 * 不是它自己那一行 —— 于是往下滚的时候信息柱会顺着往下滑，盖在说明正文上面。
 * 而且就算按规范把它夹在本行内，行高（650）等于柱高（650），行程本来就是 0，
 * 加了也一动不动。索性去掉，四块都跟着页面正常滚动。 */
.fm-woo div.product .fm-pdp__info {
	grid-column: 2;
	grid-row: 1;
}
/* 右栏第二行：说明标题 + 双语正文 + 品飲／規格／沖泡 */
.fm-woo div.product .fm-pdp__notes {
	grid-column: 2;
	grid-row: 2;
	padding-top: 44px;
	border-top: 1px solid var(--line);
}
/* 说明正文已经只有 468 宽，不必再限 36em */
.fm-woo div.product .fm-pdp__notes .fm-pdp__desc-body { max-width: none; }

/* 1180 是设计宽度；往下收窄时 72 的沟太占地方，按 6% 走 */
@media (max-width: 1240px) {
	.fm-woo div.product { column-gap: 5.5%; }
}

@media (max-width: 1100px) {
	.fm-woo div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.fm-woo div.product .fm-pdp__gallery,
	.fm-woo div.product .fm-pdp__info,
	.fm-woo div.product .fm-pdp__desc,
	.fm-woo div.product .fm-pdp__notes {
		grid-column: 1;
		grid-row: auto;
	}
	.fm-woo div.product .fm-pdp__gallery { order: 1; }
	.fm-woo div.product .fm-pdp__info { order: 2; }
	/* 单栏时按阅读顺序排：先买、再读说明、最后看细节图 */
	.fm-woo div.product .fm-pdp__notes { order: 3; padding-top: 34px; }
	.fm-woo div.product .fm-pdp__desc { order: 4; padding-top: 34px; }
}

/* 信息柱也要占满那一栏。
 * 我们的 `<div class="fm-pdp__info summary entry-summary">` 自带 WooCommerce 的 summary 类，
 * 于是被 `.woocommerce div.product div.summary{width:48%;float:right}` 压成 48% ——
 * 468 的栏只剩 224，右边空出 240 多像素，看起来就是「右半边没用上」。
 * 选择器带上 `.fm-pdp__info` 把权重抬到 (0,4,2)，稳压 Woo 的 (0,3,3)。
 */
.fm-woo div.product .fm-pdp__info.summary,
.fm-woo div.product div.summary.entry-summary {
	width: 100%;
	float: none;
	margin: 0;
}

/* 图库要占满 600 那一栏。
 * WooCommerce 自带 `.woocommerce div.product div.images{width:48%;float:left}`，
 * 权重 (0,3,2) 比 `.fm-woo div.product .woocommerce-product-gallery` (0,3,1) 高一级，
 * 不显式压住的话主图只画 48%（600 → 288），右边空一大块。
 * 这里把 `.images` 也写进选择器，同时按 Woo 的类名顺序写一遍。 */
.fm-woo div.product .woocommerce-product-gallery,
.fm-woo div.product div.images.woocommerce-product-gallery,
.fm-woo div.product .fm-pdp__gallery > .images {
	width: 100%;
	float: none;
}
.fm-woo div.product .woocommerce-product-gallery .flex-viewport,
.fm-woo div.product .woocommerce-product-gallery .slides,
.fm-woo div.product .woocommerce-product-gallery .slides > li { width: 100%; }

/* 促销标：Woo 默认是个绿圆饼贴在右上角，跟这套直角细线的版式冲突，
 * 改成图片上方一条小字标。文案由 WooCommerce 语言包给（前台已压英文）。 */
.fm-woo div.product .onsale {
	position: static;
	display: inline-block;
	margin: 0 0 14px;
	min-width: 0;
	min-height: 0;
	padding: 5px 10px;
	border-radius: 0;
	background: var(--tea);
	color: var(--white);
	font: 500 9px/1.2 var(--sans);
	letter-spacing: .16em;
	text-transform: uppercase;
}
/* 主图改 4:3。
 * 实拍原图就是 1440×1080，跟这个比例一致，object-fit: cover 不再裁掉左右各 25%。
 * 高度也从 640 降到 480，图库整块 675，正好贴住信息柱的 625 —— 右上角原来那道
 * 210px 的豁口只剩 50px。
 */
.fm-woo div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--mist);
	border-radius: 0;
}

/* 缩略图条。
 * FlexSlider 会给 `ol.flex-control-nav` 加 position:absolute; bottom:-40px，
 * 又给每个 `li` 写死 width:25%; float:left —— 图有 5 张时第 5 张就掉到第二行，
 * 而且整条脱离文档流，压在正文上。这里先让它回到文档流，再改成等分的 flex：
 * 张数变化时每张自动均分，不会出现孤行。
 */
.fm-woo div.product .flex-control-thumbs,
.fm-woo div.product ol.flex-control-nav.flex-control-thumbs {
	position: static;
	bottom: auto;
	left: auto;
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	width: 100%;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.fm-woo div.product .flex-control-thumbs li {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fm-woo div.product .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	/* 主图是 4:3，缩略图原来是 1:1 —— 一条方格子挂在长方图下面，
	   比例对不上，整条比主图「高一截」。这里跟主图统一。
	   Woo 会传 woocommerce_thumbnail（默认 300×300 裁切），所以必须 cover，
	   不然 4:3 的框会把方图压扁。 */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--mist);
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
}
.fm-woo div.product .flex-control-thumbs img.flex-active { border-color: var(--forest-dark); }

/* 信息柱排版 */
.fm-woo .summary.entry-summary { width: 100%; float: none; }
.fm-woo .summary .product_title {
	margin: 14px 0 0;
	font-family: var(--serif);
	font-weight: 300;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--forest-dark);
}
.fm-woo .summary .product_title + .fm-p-name-cn { margin-top: 10px; }
.fm-woo .summary .woocommerce-product-details__short-description {
	margin: 18px 0 0;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 300;
	color: var(--muted);
}
.fm-woo .summary .price {
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 300;
	color: var(--forest-dark);
}

/* 规格表（Woo 商品属性表） */
.fm-woo .woocommerce-product-attributes {
	width: 100%;
	margin: 24px 0 0;
	border-collapse: collapse;
}
.fm-woo .woocommerce-product-attributes th,
.fm-woo .woocommerce-product-attributes td {
	padding: 14px 0;
	border-top: 1px solid var(--line);
	font-size: 11px;
	text-align: left;
}
.fm-woo .woocommerce-product-attributes th {
	width: 46%;
	font-family: var(--sans);
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}
.fm-woo .woocommerce-product-attributes td {
	font-family: var(--serif);
	color: var(--forest-dark);
}

/* 数量 + 加购：并排，48 高 */
.fm-woo div.product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 0;
}
.fm-woo div.product form.cart .quantity {
	margin: 0;
}
.fm-woo .quantity input.qty {
	width: 116px;
	height: 48px;
	border: 1px solid var(--line);
	background: transparent;
	text-align: center;
	font-size: 12.5px;
	color: var(--forest-dark);
}
.fm-woo div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }

/* 手风琴（Woo 的 tabs） */
.fm-woo .woocommerce-tabs {
	margin: 34px 0 0;
	border-top: 1px solid var(--line);
}
.fm-woo .woocommerce-tabs ul.tabs {
	display: none; /* 改用 accordion 由模板实现；若保留 tabs 就把这行删掉 */
}
.fm-woo .woocommerce-tabs .panel {
	padding: 17px 0;
	border-bottom: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--muted);
}

/* ---------- 购物车 / 结算：去表格感，改成细线 ---------- */
.fm-woo .shop_table {
	border: 0;
	border-collapse: collapse;
}
.fm-woo .shop_table th {
	font-family: var(--sans);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
	padding: 14px 0;
}
.fm-woo .shop_table td {
	border-bottom: 1px solid var(--line);
	padding: 20px 0;
	font-size: 12.5px;
	color: var(--bark);
}
.fm-woo .cart_totals,
.fm-woo .woocommerce-checkout-review-order {
	background: var(--white);
	border: 1px solid var(--line);
	padding: 26px;
}
.fm-woo .cart_totals h2,
.fm-woo .woocommerce-checkout-review-order h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: .02em;
	color: var(--forest-dark);
}

/* 表单：无圆角、细线、标签走微标 */
.fm-woo .form-row label {
	font-family: var(--sans);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.fm-woo .form-row input.input-text,
.fm-woo .form-row textarea,
.fm-woo .select2-container .select2-selection--single {
	height: 48px;
	border: 1px solid var(--line);
	background: transparent;
	padding: 0 14px;
	font-size: 12.5px;
	color: var(--forest-dark);
}