.wc-bisn-notify-wrap {
	margin: 14px 0 10px;
	max-width: 100%;
	/* 有些主题/页面构建器（比如这次手机端遇到的 Elementor 案例）会用
	   CSS Grid/Flex 或者 position:absolute 来布局"加入心愿单"这类
	   按钮所在的那一整块区域。我们的按钮容器是后来才用 JS 插进去的，
	   不是主题原本设计好的那套布局的一部分，如果不强制它按普通文档流
	   显示，就有可能被主题的布局规则当成同一个格子/同一个定位层，
	   跟旁边的按钮重叠显示在一起。这里强制它：占满一整行、按普通
	   块级元素正常排列、不参与任何 grid/flex 的列布局——不管插入到
	   主题的什么容器里，都会自己单独占一行。
	   另外实测发现，光让自己"正常排列"还不够——旁边那个"加入心愿单"
	   按钮本身很可能是绝对定位（position:absolute）浮在一个更大的
	   容器上面的，就算我们自己排到了正常的位置，也会被这个悬浮在
	   上层的心愿单按钮盖住、透出文字重叠的效果。所以这里额外给自己
	   建一个"层叠上下文"（position:relative + 足够高的 z-index），
	   保证不管旁边有什么绝对定位的元素浮在附近，我们自己的按钮
	   永远显示在最上面、不会被盖住、文字不会叠在一起看不清。 */
	display: block !important;
	position: relative !important;
	z-index: 9999 !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	grid-column: 1 / -1 !important;
	inset: auto !important;
}

/* 变体商品用来插入按钮的挂载点本身（理由和上面 .wc-bisn-notify-wrap
   一样——这里是外层容器，也要做同样的处理，保证不管被插到主题布局的
   哪个位置，都不会被旁边的绝对定位按钮盖住。注意：这个元素的显示/
   隐藏是靠 JS（jQuery .show()/.hide()）切换内联的 display 属性来
   控制的，所以这里故意不设置 display，避免用 !important 把 JS 的
   隐藏操作盖掉，导致该隐藏的时候（比如客户选中的是有货变体）按钮
   反而一直显示出来。 */
.wc-bisn-variation-slot {
	position: relative !important;
	z-index: 9999 !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	grid-column: 1 / -1 !important;
	inset: auto !important;
}

.wc-bisn-btn-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
}

.wc-bisn-notify-btn {
	cursor: pointer;
	/* 保证移动端点击区域足够大（Apple/WCAG 建议的最小可点击高度约 44px） */
	min-height: 48px;
	line-height: 1.2;
	white-space: normal;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 24px;
	font-weight: 700;
	/* 配合网站黑金主色调，跟网站其他按钮的交互方式完全对齐：平时是
	   实心黑底白字，鼠标放上去（或手机点按）变成实心金底黑字——
	   不再用蓝色这种跟网站配色没关系的默认颜色。不依赖主题给
	   .button 的默认样式——有些主题只给 "加入购物车" 这类特定 class
	   上色，普通 .button 看起来跟"禁用状态"很像，容易让客户误以为
	   按钮点不了。 */
	background-color: #111111 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	opacity: 1 !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-bisn-notify-btn:hover {
	background-color: #d4af37 !important;
	color: #111111 !important;
}

/* 小屏幕（手机竖屏）下让按钮占满宽度，避免文字被挤压换行显得拥挤 */
@media ( max-width: 480px ) {
	.wc-bisn-btn-row {
		display: flex;
		width: 100%;
	}

	.wc-bisn-notify-btn {
		width: 100%;
		display: block;
	}
}

.wc-bisn-notify-btn.is-subscribed {
	/* 已订阅状态：换成实心金底黑字，跟网站"Add To Cart"这类金色
	   按钮的观感一致，同时和上面"还没订阅"的黑底金字状态形成
	   清楚的视觉区分——一眼能看出这两个是不同的状态。 */
	background-color: #d4af37 !important;
	color: #111111 !important;
	border-color: #d4af37 !important;
	cursor: default;
}

.wc-bisn-notify-btn[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed;
}

/* 信息图标 + 悬停/点击提示 */
.wc-bisn-info-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #4b5563;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	font-family: Georgia, 'Times New Roman', serif;
	cursor: pointer;
	user-select: none;
	flex-shrink: 0;
}

.wc-bisn-info-icon:hover,
.wc-bisn-info-icon:focus,
.wc-bisn-info-icon.is-active {
	background: #cbd5e1;
	outline: none;
}

.wc-bisn-tooltip {
	display: none;
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX( -50% );
	background: #1f2937;
	color: #fff;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-family: inherit;
	line-height: 1.4;
	white-space: normal;
	width: 220px;
	text-align: center;
	z-index: 20;
}

/* 手机屏幕较窄时，提示框靠右对齐展开，避免超出屏幕左边被裁切 */
@media ( max-width: 480px ) {
	.wc-bisn-tooltip {
		left: auto;
		right: 0;
		transform: none;
		width: 200px;
	}
}

.wc-bisn-info-icon:hover .wc-bisn-tooltip,
.wc-bisn-info-icon:focus .wc-bisn-tooltip,
.wc-bisn-info-icon.is-active .wc-bisn-tooltip {
	display: block;
}

.wc-bisn-notify-msg {
	margin-top: 6px;
	font-size: 0.9em;
}

.wc-bisn-notify-msg.wc-bisn-msg-error {
	color: #b32d2e;
}

.wc-bisn-notify-msg.wc-bisn-msg-success {
	color: #2e7d32;
}

/* "我的账户 -> Back In Stock Alerts" 页面的表格和取消订阅按钮 */
.wc-bisn-my-account-table th,
.wc-bisn-my-account-table td {
	padding: 10px 12px;
	text-align: left;
}

.wc-bisn-cancel-btn {
	cursor: pointer;
	/* 用明确的实心颜色，不依赖主题给 .button 的默认样式——理由和
	   "到货通知我"按钮一样：主题默认样式看起来像禁用状态，容易让
	   客户误以为点不了。用红色是为了和"取消/退订"这个动作的性质
	   对应上，跟蓝色的"订阅"类按钮区分开。 */
	background-color: #b32d2e !important;
	color: #ffffff !important;
	border: none !important;
	opacity: 1 !important;
}

.wc-bisn-cancel-btn:hover {
	background-color: #8f2423 !important;
}

.wc-bisn-cancel-btn[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed;
}