/**
 * Smartprix · 用户功能样式（收藏 / 价格提醒 / 最近浏览）
 *
 * 只补主题 components.css 里没有的「已激活」态与最近浏览盒；
 * 全部颜色走主题 tokens.css 的变量，未定义时回落到原站取色。
 */

/* ---------- 收藏 Like ---------- */
.sm-product-actions .like.on,
.sm-page-actions li.on[data-sp-like] {
	color: var(--sp-like, #ff69b4);
}

.sm-product-actions .like.on .icon,
.sm-product-actions .like.on svg,
.sm-page-actions li.on[data-sp-like] .icon,
.sm-page-actions li.on[data-sp-like] svg {
	fill: var(--sp-like, #ff69b4);
	transform: scale(1.08);
	transition: transform var(--sp-dur, .2s) var(--sp-ease-out, ease-out);
}

.sm-product-actions .like[data-busy],
.sm-page-actions li[data-busy],
.pg-prd-price-actions li[data-busy] {
	opacity: .6;
	pointer-events: none;
}

/* ---------- 价格提醒 ---------- */
.pg-prd-price-actions .pa-btn.on,
.pg-prd-price-actions li.on[data-sp-alert] {
	color: var(--color-link, #2196f3);
}

.pg-prd-price-actions .pa-btn.on .icon,
.pg-prd-price-actions .pa-btn.on svg {
	fill: var(--color-link, #2196f3);
}

/* ---------- 最近浏览 ---------- */
.sp-recent[hidden] {
	display: none !important;
}

.sp-recent .sm-box-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sp-recent-clear {
	background: none;
	border: 0;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-link, #2196f3);
	cursor: pointer;
}

.sp-recent-clear:hover {
	text-decoration: underline;
}

/* ---------- 登录引导 / 空态 ---------- */
.sp-login-notice,
.sp-user-empty {
	padding: 24px 16px;
	text-align: center;
}

.sp-login-notice p,
.sp-user-empty p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-secondary, #5f6b7a);
}

.sp-login-notice .sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 40px;
	padding: 0 20px;
	border-radius: var(--sp-radius, 6px);
	background: var(--color-link, #2196f3);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sp-login-notice .sm-btn:hover {
	filter: brightness(.94);
}

/* ---------- 独立价格提醒按钮（短代码） ---------- */
.sp-alert-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 18px;
	margin: 0 0 16px;
	border: 1px solid var(--color-link, #2196f3);
	border-radius: var(--sp-radius, 6px);
	background: #fff;
	color: var(--color-link, #2196f3);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.sp-alert-btn:hover {
	background: var(--sp-actions-bg-hover, #eef4fb);
}

.sp-alert-btn.on {
	background: var(--color-link, #2196f3);
	color: #fff;
}

/* ---------- 短代码嵌在文章正文里时，恢复卡片图片的尺寸约束 ----------
   base.css 的 .sm-content img{max-height:500px;height:auto;margin:10px auto}
   会撑破 .sm-product 的图片格；这里把卡片内的图片还原成组件规则。 */
.sm-content .sm-product .sm-img,
.sm-content .sm-product img.sm-img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
}

.sm-content .sm-box .sm-products {
	margin: 0;
}

/* ---------- 短代码嵌在文章正文里时，恢复卡片图片的尺寸约束 ----------
   base.css 的 .sm-content img{max-height:500px;height:auto;margin:10px auto}
   会撑破 .sm-product 的图片格；这里把卡片内的图片还原成组件规则。 */
.sm-content .sm-product .sm-img,
.sm-content .sm-product img.sm-img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
}

.sm-content .sm-box .sm-products {
	margin: 0;
}