/* ============================================================
   通用组件
   依赖 style.css 中的设计令牌
   ============================================================ */

/* ---------- 按钮 ---------- */
.sa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: var(--sa-r-sm);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all var(--sa-t);
	white-space: nowrap;
}

.sa-btn--primary {
	background: var(--sa-primary);
	color: #fff;
}

.sa-btn--primary:hover {
	background: var(--sa-primary-dark);
	color: #fff;
	box-shadow: 0 6px 18px rgba(37, 99, 235, .25);
	transform: translateY(-1px);
}

.sa-btn--ghost {
	background: var(--sa-surface);
	color: var(--sa-text);
	border-color: var(--sa-border);
}

.sa-btn--ghost:hover {
	border-color: var(--sa-primary);
	color: var(--sa-primary);
}

.sa-btn--lg {
	padding: 14px 30px;
	font-size: 16px;
}

.sa-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

.sa-btn--block {
	width: 100%;
}

/* ---------- 分隔点 ---------- */
.sa-dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--sa-border-strong);
	vertical-align: middle;
	margin: 0 8px;
}

/* ---------- 空状态 ---------- */
.sa-empty {
	text-align: center;
	padding: 48px 24px;
	background: var(--sa-surface);
	border: 1px dashed var(--sa-border);
	border-radius: var(--sa-r);
}

.sa-empty p {
	color: var(--sa-text-3);
	margin: 0 0 16px;
}

/* ============================================================
   论坛版块卡片
   ============================================================ */
.sa-forums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sa-gap);
}

.sa-forum-card {
	background: var(--sa-surface);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r);
	padding: 22px;
	transition: box-shadow var(--sa-t), border-color var(--sa-t), transform var(--sa-t);
}

.sa-forum-card:hover {
	border-color: var(--sa-primary-soft-2);
	box-shadow: var(--sa-shadow);
	transform: translateY(-2px);
}

.sa-forum-card__head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.sa-forum-card__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: var(--sa-r-sm);
	background: var(--sa-primary-soft);
	position: relative;
}

.sa-forum-card__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	opacity: .9;
}

/* 图标：对话气泡 */
.sa-forum-card__icon--chat::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

/* 图标：店铺 */
.sa-forum-card__icon--store::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L4 6v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6l-2-4z'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* 图标：盾牌 */
.sa-forum-card__icon--shield::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.sa-forum-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.sa-forum-card__title a {
	color: var(--sa-text);
	text-decoration: none;
}

.sa-forum-card__title a:hover {
	color: var(--sa-primary);
}

.sa-forum-card__desc {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--sa-text-3);
	line-height: 1.5;
}

.sa-forum-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sa-border);
}

.sa-forum-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0 11px 0;
	border-bottom: 1px solid var(--sa-bg-sunken);
	text-decoration: none;
	transition: padding-left var(--sa-t);
}

.sa-forum-card__list li:last-child .sa-forum-card__link {
	border-bottom: 0;
	padding-bottom: 0;
}

.sa-forum-card__link:hover {
	padding-left: 4px;
}

.sa-forum-card__name {
	font-size: 14px;
	color: var(--sa-text-2);
	font-weight: 500;
	position: relative;
	padding-left: 14px;
}

.sa-forum-card__name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sa-border-strong);
	transition: background var(--sa-t);
}

.sa-forum-card__link:hover .sa-forum-card__name::before {
	background: var(--sa-primary);
}

.sa-forum-card__meta {
	font-size: 12px;
	color: var(--sa-text-3);
	white-space: nowrap;
}

/* ============================================================
   最新话题列表
   ============================================================ */
.sa-topics {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--sa-surface);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r);
	overflow: hidden;
}

.sa-topics__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--sa-bg-sunken);
	transition: background var(--sa-t);
}

.sa-topics__item:last-child {
	border-bottom: 0;
}

.sa-topics__item:hover {
	background: var(--sa-primary-soft);
}

.sa-topics__avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sa-primary-soft-2);
	color: var(--sa-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
}

.sa-topics__body {
	flex: 1;
	min-width: 0;
}

.sa-topics__title {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--sa-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sa-topics__title:hover {
	color: var(--sa-primary);
}

.sa-topics__meta {
	margin-top: 3px;
	font-size: 12px;
	color: var(--sa-text-3);
	display: flex;
	align-items: center;
}

.sa-topics__count {
	flex: 0 0 auto;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--sa-text);
	min-width: 48px;
}

.sa-topics__count small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--sa-text-3);
	margin-top: 1px;
}

/* ============================================================
   WooCommerce 商品卡片
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sa-gap);
	margin: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	background: var(--sa-surface);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r);
	overflow: hidden;
	transition: border-color var(--sa-t), box-shadow var(--sa-t), transform var(--sa-t);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--sa-primary-soft-2);
	box-shadow: var(--sa-shadow-lg);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
	margin: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	transition: transform .35s ease;
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 500;
	color: var(--sa-text);
	padding: 14px 16px 0;
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 45px;
}

.woocommerce ul.products li.product .price {
	padding: 8px 16px 0;
	margin: 0;
	color: var(--sa-price) !important;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce ul.products li.product .price del {
	color: var(--sa-text-3);
	font-size: 13px;
	font-weight: 400;
	margin-right: 6px;
}

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

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin: 14px 16px 16px;
	padding: 10px 16px;
	background: var(--sa-primary);
	color: #fff;
	border-radius: var(--sa-r-sm);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	transition: background var(--sa-t);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
	background: var(--sa-primary-dark);
	color: #fff;
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin: 0 16px 12px;
	font-size: 13px;
	text-align: center;
}

/* 商品徽标（促销） */
.woocommerce ul.products li.product .onsale {
	background: var(--sa-price);
	color: #fff;
	border-radius: var(--sa-r-xs);
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
	top: 12px;
	right: 12px;
	left: auto;
	margin: 0;
}

/* 空商店 */
.woocommerce-no-products-found,
.woocommerce .woocommerce-info {
	background: var(--sa-surface);
	border: 1px solid var(--sa-border);
	border-top: 0;
	border-radius: var(--sa-r);
	padding: 40px 24px;
	text-align: center;
	color: var(--sa-text-2);
	margin: 0;
}

.woocommerce .woocommerce-info::before {
	display: none;
}

.woocommerce .woocommerce-info .button {
	margin-left: 10px;
}

/* ---------- 面包屑 ---------- */
.ast-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--sa-text-3);
}

.woocommerce-breadcrumb a {
	color: var(--sa-text-2);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--sa-primary);
}

/* ---------- 分页 ---------- */
.ast-pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-sm);
	background: var(--sa-surface);
	color: var(--sa-text-2);
	font-size: 14px;
	text-decoration: none;
	margin: 0 4px;
	transition: all var(--sa-t);
}

.ast-pagination .page-numbers.current,
.ast-pagination .page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--sa-primary);
	border-color: var(--sa-primary);
	color: #fff;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	justify-content: center;
	gap: 0;
}

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

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.sa-forums {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.sa-forums {
		grid-template-columns: 1fr;
	}

	.sa-topics__count {
		display: none;
	}
}