/* ==========================================================================
   Nansai 购物车主题 · 覆盖在 Bootstrap 4 之上
   依赖官网 nansai-web.css 的 :root 令牌
   ========================================================================== */

/* 主站 .ns-main 是 position:relative + z-index:1，会开一个层叠上下文，把内部所有定位元素
   的 z-index 关在里面：购物车页里两头都吃亏——
   1) 页脚 .ns-foot 同为 z-index:1 且排在 main 之后，会把 fixed 结算条（z:1036）整片糊住；
   2) Bootstrap 的删除确认框 #customModal（z:1050）也在 main 里，而它注入的 .modal-backdrop
      （z:1040）挂在 body 上，于是遮罩画在弹窗上面，弹窗看不见、页面也点不动。
   用 auto 而不是抬更高：auto 不创建层叠上下文，里面的 1036/1050 直接拿到根上下文里跟
   .ns-foot 的 1、遮罩的 1040 比较，谁大谁在上，两处一起解决。 */
.ns-main {
	z-index: auto;
}

.ns-shop {
	/* 主站 --ns-max 是 1220px，购物车页两侧留白收窄 10%：
	   1920px 视口下每侧空白 350px → 315px，故容器宽 1290px。
	   这里用本地值覆盖，避免动到主站 39 个页面的 --ns-max */
	max-width: 1290px;
	margin: 0 auto;
	padding: 28px var(--ns-gutter) 56px;
	color: var(--ns-body);
	font-size: 14px;
}

.ns-shop .row {
	margin-right: -9px;
	margin-left: -9px;
}

.ns-shop [class*="col-"] {
	padding-right: 9px;
	padding-left: 9px;
}

/* ---- 页头条 ---- */

.ns-shop-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ns-shop-head h1 {
	margin: 0;
	color: var(--ns-ink);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -.02em;
}

/* 注意：主站 nansai-web.css 的基座规则 body.ns-web a / p / h* 权重为 (0,1,2)，
   会压过本主题的单类选择器。凡是被它们覆盖到的属性，选择器都要带上 .ns-shop 提升权重。 */

.ns-shop .ns-shop-head p {
	margin-top: 4px;
	color: var(--ns-muted);
	font-size: 13.5px;
}

.ns-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ns-step-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 99px;
	background: rgba(148, 163, 184, .14);
	color: var(--ns-muted);
	font-size: 12.5px;
	font-weight: 500;
}

.ns-step-pill.is-on {
	background: var(--ns-gradient);
	color: #fff;
	box-shadow: var(--ns-shadow-accent);
}

.ns-step-pill.is-done {
	background: rgba(16, 185, 129, .13);
	color: #047857;
}

/* ---- 面板 ---- */

.ns-shop .card {
	margin-bottom: 16px;
	border: 1px solid var(--ns-glass-border);
	border-radius: var(--ns-radius);
	background: var(--ns-glass);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
	overflow: hidden;
}

.ns-shop .card-body {
	padding: 22px;
}

.ns-shop .card-title {
	color: var(--ns-ink);
	font-size: 16px;
	font-weight: 600;
}

.ns-shop hr {
	margin: 14px 0;
	border: 0;
	border-top: 1px solid var(--ns-line);
}

/* ---- 提醒 ---- */

.ns-shop .alert {
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 13px 16px;
	font-size: 13.5px;
}

.ns-shop .alert-danger {
	background: rgba(239, 68, 68, .09);
	border-color: rgba(239, 68, 68, .24);
	color: #b91c1c;
}

.ns-shop .alert-success {
	background: rgba(16, 185, 129, .09);
	border-color: rgba(16, 185, 129, .24);
	color: #047857;
}

.ns-shop .alert .close {
	color: inherit;
	opacity: .6;
	text-shadow: none;
}

/* ---- 表单 ---- */

.ns-shop .form-group {
	margin-bottom: 6px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--ns-line);
}

.ns-shop .form-group:last-of-type {
	border-bottom: 0;
}

.ns-shop label.col-form-label {
	padding: 0;
	margin-bottom: 8px;
	color: var(--ns-ink);
	font-size: 13.5px;
	font-weight: 600;
}

.ns-shop .form-control {
	display: block;
	width: 100%;
	padding: 9px 13px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 11px;
	background: rgba(255, 255, 255, .86);
	color: var(--ns-ink);
	font-size: 13.5px;
	line-height: 1.5;
	transition: border-color .2s var(--ns-ease), box-shadow .2s var(--ns-ease);
}

.ns-shop .form-control:focus {
	border-color: rgba(37, 99, 235, .55);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
	outline: 0;
	color: var(--ns-ink);
}

.ns-shop .form-control:disabled {
	background: rgba(148, 163, 184, .12);
	color: var(--ns-muted);
}

.ns-shop .form-control.is-invalid,
.ns-shop .was-validated .form-control:invalid {
	border-color: rgba(239, 68, 68, .6);
	background-image: none;
}

.ns-shop .error-tip {
	display: none;
	width: 100%;
	margin: 6px 0 0;
	color: var(--ns-danger);
	font-size: 12.5px;
}

/* 机房国旗与系统镜像图标。模板靠 <img height="18"> 限高，但 ns-compat.css 的
   .ns-main img { height:auto }（0,1,1）优先级高于呈现属性，原图 PNG 100x67 /
   SVG 201x200 会按原生尺寸铺出来，必须用 CSS 约束，且权重要 ≥ (0,2,1)。 */
.ns-shop img[src*="/upload/common/country/"],
.ns-shop img[src*="/upload/common/system/"] {
	width: auto;
	height: 18px;
	max-height: 18px;
	vertical-align: -3px;
}

/* 订单汇总里同一批图标模板写的是 15px */
.ns-shop .ordersummary img[src*="/upload/common/"] {
	height: 15px;
	max-height: 15px;
	vertical-align: -2px;
}

/* 下拉（bootstrap-select） */

.ns-shop .bootstrap-select > .dropdown-toggle {
	padding: 9px 32px 9px 13px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 11px;
	background: rgba(255, 255, 255, .86);
	color: var(--ns-ink);
	font-size: 13.5px;
	font-weight: 400;
	box-shadow: none;
}

.ns-shop .bootstrap-select > .dropdown-toggle:focus,
.ns-shop .bootstrap-select.show > .dropdown-toggle {
	border-color: rgba(37, 99, 235, .55);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
	outline: 0 !important;
}

.ns-shop .bootstrap-select .dropdown-menu {
	border: 1px solid var(--ns-glass-border);
	border-radius: 12px;
	background: var(--ns-glass-strong);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-lg);
	padding: 6px;
}

.ns-shop .bootstrap-select .dropdown-item,
.ns-shop .bootstrap-select .dropdown-menu.inner li a {
	padding: 8px 11px;
	border-radius: 8px;
	color: var(--ns-body);
	font-size: 13.5px;
}

.ns-shop .bootstrap-select .dropdown-item:hover,
.ns-shop .bootstrap-select .dropdown-menu.inner li a:hover,
.ns-shop .bootstrap-select .dropdown-item:focus {
	background: rgba(37, 99, 235, .09);
	color: var(--ns-primary-strong);
	outline: 0;
}

.ns-shop .bootstrap-select .dropdown-item.active,
.ns-shop .bootstrap-select .dropdown-menu.inner li.selected a {
	background: var(--ns-gradient);
	color: #fff;
}

/* 单选 / 复选 */

.ns-shop .custom-control {
	min-height: 1.6rem;
	padding-left: 1.7rem;
}

.ns-shop .custom-control-input {
	width: 1.1rem;
	height: 1.1rem;
}

.ns-shop .custom-control-label::before {
	top: .22rem;
	left: -1.7rem;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid var(--ns-line-strong);
	border-radius: 5px;
	background: rgba(255, 255, 255, .9);
}

.ns-shop .custom-control-label::after {
	top: .22rem;
	left: -1.7rem;
	width: 1.1rem;
	height: 1.1rem;
	line-height: 1.75;
}

.ns-shop .custom-control-input:checked ~ .custom-control-label::before {
	background: var(--ns-primary);
	border-color: var(--ns-primary);
}

.ns-shop .custom-radio .custom-control-label::before {
	border-radius: 50%;
}

.ns-shop .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.ns-shop .form-check {
	margin: 0 14px 6px 0;
	padding-left: 0;
}

.ns-shop .form-check-input {
	margin: 0 7px 0 0;
	width: auto;
	position: static;
}

.ns-shop .form-check-label {
	color: var(--ns-body);
	font-size: 13.5px;
	cursor: pointer;
}

/* 药丸式选项（btn-group-toggle） */

.ns-shop .btn-group-toggle {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ns-shop .btn-group-toggle > label,
.ns-shop .btn-group-toggle .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 15px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 11px;
	background: rgba(255, 255, 255, .86);
	box-shadow: none;
	color: var(--ns-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: all .2s var(--ns-ease);
}

.ns-shop .btn-group-toggle > label:hover {
	border-color: rgba(37, 99, 235, .45);
	color: var(--ns-primary-strong);
	background: #fff;
}

.ns-shop .btn-group-toggle > label.active,
.ns-shop .btn-group-toggle > label:has(input:checked) {
	border-color: transparent;
	background: var(--ns-gradient);
	color: #fff;
	box-shadow: var(--ns-shadow-accent);
}

.ns-shop .cycle-select-discount {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .26);
	color: inherit;
	font-size: 11px;
	font-weight: 600;
}

.ns-shop .btn-group-toggle > label:not(.active):not(:has(input:checked)) .cycle-select-discount {
	background: rgba(239, 68, 68, .1);
	color: #b91c1c;
}

/* 滑杆数量 */

.ns-shop .ns-range-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	flex-wrap: wrap;
}

.ns-shop input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	height: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: #e8e8e8;
	outline: none;
	cursor: pointer;
	flex: 1 1 180px;
	min-width: 140px;
}

.ns-shop input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 26px;
	border: 3px solid var(--ns-primary);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
}

.ns-shop input[type="range"]::-moz-range-thumb {
	width: 10px;
	height: 22px;
	border: 3px solid var(--ns-primary);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
}

.ns-shop .range_none {
	position: absolute;
	display: block;
	height: 3px;
	background: rgba(148, 163, 184, .55);
	border-radius: 99px;
}

.ns-shop .ns-i-help {
	width: .95em;
	height: .95em;
	margin-left: 3px;
	color: var(--ns-primary);
	vertical-align: -.1em;
	cursor: help;
}

.ns-mini-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ns-line-strong);
	border-radius: 10px;
	background: rgba(255, 255, 255, .9);
	color: var(--ns-body);
	cursor: pointer;
	transition: all .2s var(--ns-ease);
}

.ns-mini-btn:hover {
	border-color: rgba(37, 99, 235, .45);
	color: var(--ns-primary);
}

.ns-opt-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ns-opt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 11px;
	background: rgba(255, 255, 255, .86);
	color: var(--ns-body);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s var(--ns-ease);
}

.ns-opt:hover {
	border-color: rgba(37, 99, 235, .45);
	color: var(--ns-primary-strong);
}

.ns-opt input {
	margin: 0;
	accent-color: var(--ns-primary);
}

.ns-opt:has(input:checked) {
	border-color: rgba(37, 99, 235, .55);
	background: rgba(37, 99, 235, .07);
	color: var(--ns-primary-strong);
	font-weight: 600;
}

.ns-shop .btn_sub,
.ns-shop .btn_add {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--ns-line-strong);
	border-radius: 9px;
	background: rgba(255, 255, 255, .9);
	color: var(--ns-ink);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: all .2s var(--ns-ease);
}

.ns-shop .btn_sub:hover,
.ns-shop .btn_add:hover {
	border-color: rgba(37, 99, 235, .45);
	color: var(--ns-primary);
}

.ns-shop .configoption_range_val {
	width: 84px;
	flex: 0 0 auto;
	text-align: center;
}

.ns-shop .ns-range-unit {
	color: var(--ns-muted);
	font-size: 13px;
}

/* 价格摘要 */

.ns-shop .ordersummary {
	margin: 0;
	width: 100%;
	color: var(--ns-body);
	font-size: 13px;
}

.ns-shop .ordersummary td {
	padding: 7px 0;
	border: 0;
	vertical-align: top;
}

.ns-shop .ordersummary td.text-right {
	white-space: nowrap;
	text-align: right;
}

.ns-shop .ordersummary .color-999,
.ns-shop .ordersummary td.color-999 {
	color: var(--ns-muted);
}

.ns-shop .ordersummary .text-dark {
	color: var(--ns-ink);
}

.ns-shop .ordersummary hr {
	margin: 8px 0;
}

.ns-shop .configoption_total strong {
	color: var(--ns-ink);
}

.ns-shop .ns-os-sub {
	color: var(--ns-ink);
	font-size: 13px;
	word-break: break-all;
}

.ns-shop .ordersummary .ns-os-total td {
	padding-top: 12px !important;
	border-top: 1px solid var(--ns-line-strong);
	color: var(--ns-ink);
	font-weight: 600;
}

.ns-shop .ordersummary .ns-os-total td.text-right {
	background: linear-gradient(135deg, #2563eb, #06b6d4);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 19px;
}

.ns-btn-block {
	display: flex;
	width: 100%;
	margin-top: 16px;
}

.ns-os-mob {
	display: none;
}

/* 支付方式 */

.ns-shop .addfunds-payment {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 12px;
	background: rgba(255, 255, 255, .86);
	color: var(--ns-body);
	font-size: 13px;
	cursor: pointer;
	transition: all .2s var(--ns-ease);
}

.ns-shop .addfunds-payment:hover {
	border-color: rgba(37, 99, 235, .45);
}

.ns-shop .addfunds-payment.active {
	border-color: transparent;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, .55), var(--ns-shadow-sm);
	color: var(--ns-primary-strong);
}

.ns-shop .addfunds-payment img {
	max-height: 22px;
	width: auto;
}

.ns-shop .checkboxDiv {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 10px 14px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 12px;
	background: rgba(255, 255, 255, .8);
	font-size: 13.5px;
	cursor: pointer;
}

.ns-shop .checkboxDiv.checkboxSelect {
	border-color: rgba(37, 99, 235, .55);
	background: rgba(37, 99, 235, .06);
}

.ns-shop .checkboxDiv img {
	width: 20px;
}

/* 商品行 */

.ns-goods + .ns-goods {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ns-line);
}

.ns-goods-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.ns-goods-name {
	color: var(--ns-ink);
	font-size: 15px;
	font-weight: 600;
}

.ns-goods-ops {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ns-shop .ns-goods-ops a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: var(--ns-muted);
	transition: all .2s var(--ns-ease);
}

.ns-shop .ns-goods-ops a:hover {
	background: rgba(37, 99, 235, .09);
	color: var(--ns-primary);
}

.ns-goods-info {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 4px 18px;
	margin: 12px 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(248, 250, 252, .8);
	border: 1px solid var(--ns-line);
	color: var(--ns-body);
	font-size: 12.5px;
}

.ns-goods-info b {
	color: var(--ns-ink);
	font-weight: 500;
}

.ns-goods-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.ns-goods-foot .number {
	width: 74px;
	padding: 5px 8px;
	border: 1px solid var(--ns-line-strong);
	border-radius: 9px;
	background: #fff;
	color: var(--ns-ink);
	font-size: 13px;
	text-align: center;
}

.ns-shop .ns-del {
	color: var(--ns-danger);
	font-weight: 600;
}

.ns-total-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ns-line);
}

.ns-total-price {
	background: var(--ns-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* 商品目录页 */

.ns-pl-layout {
	display: grid;
	grid-template-columns: 288px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.ns-pl-layout > div:first-child > .card {
	position: sticky;
	top: calc(var(--ns-top-h) + 14px);
}

.ns-pl-search {
	display: flex;
	gap: 8px;
}

.ns-pl-search .form-control {
	min-width: 0;
}

/* 按钮跟随输入框实际高度，避免两边各写一个高度对不齐 */
.ns-pl-search .ns-mini-btn {
	height: auto;
	align-self: stretch;
}

.ns-pl-side .ns-pl-group + .ns-pl-group {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ns-line);
}

.ns-pl-side .ns-pl-title {
	margin-bottom: 8px;
	color: var(--ns-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ns-shop .ns-pl-side a {
	display: block;
	padding: 7px 11px;
	border-radius: 9px;
	color: var(--ns-body);
	font-size: 13.5px;
}

.ns-shop .ns-pl-side a:hover {
	background: rgba(37, 99, 235, .08);
	color: var(--ns-primary-strong);
}

.ns-shop .ns-pl-side a.is-on {
	background: var(--ns-primary-soft);
	color: var(--ns-ink);
	font-weight: 600;
}

/* 主区当前分类说明（二级分类的产品组标题） */

.ns-shop .ns-pl-lead {
	margin: 0 0 16px;
	color: var(--ns-body);
	font-size: 14px;
	line-height: 1.8;
}

.ns-pl-tree + .ns-pl-tree,
.ns-pl-tree + .ns-pl-jump,
.ns-pl-jump + .ns-pl-tree {
	margin-top: 2px;
}

.ns-pl-side .ns-pl-treehead {
	display: flex;
	color: var(--ns-ink);
	font-weight: 600;
	text-decoration: none;
}

.ns-pl-treehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 7px 11px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ns-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ns-pl-treehead:hover {
	background: rgba(37, 99, 235, .08);
	color: var(--ns-primary-strong);
}

.ns-pl-treehead span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-pl-caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-left-color: currentColor;
	opacity: .5;
	transition: transform .22s var(--ns-ease);
}

.ns-pl-tree.is-open > .ns-pl-treehead {
	background: rgba(37, 99, 235, .07);
	color: var(--ns-primary-strong);
}

.ns-pl-tree.is-open > .ns-pl-treehead .ns-pl-caret {
	transform: rotate(90deg);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ns-pl-sub,
	.ns-pl-caret {
		transition: none;
	}
}

/* 折叠面板：height 由脚本量测驱动，无脚本时回落到 height:auto / 0 */
.ns-pl-sub {
	height: 0;
	overflow: hidden;
	padding-left: 10px;
	border-left: 1px solid var(--ns-line-strong);
	opacity: 0;
	transform: translateY(-4px);
	transition: height .32s var(--ns-ease), opacity .24s var(--ns-ease), transform .32s var(--ns-ease);
}

.ns-pl-tree.is-open > .ns-pl-sub {
	height: auto;
	opacity: 1;
	transform: none;
}

/* 权重必须 ≥ (0,2,1) 才压得住上面 .ns-shop .ns-pl-side a { display:block }，
   否则这一行退回普通内联流，gap 与名称省略号全部失效（名称与标语会贴在一起）。 */
.ns-shop .ns-pl-sub a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px 14px;
	font-size: 13px;
}

/* 上下留白放进子项内边距，避免被折叠高度裁掉 */
.ns-pl-sub > a:first-child {
	padding-top: 8px;
}

.ns-pl-sub > a:last-child {
	padding-bottom: 12px;
}

.ns-pl-sub a span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-pl-tag {
	flex: 0 0 auto;
	padding: 1px 7px;
	border-radius: 99px;
	background: rgba(239, 68, 68, .1);
	color: #b91c1c;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
}

.ns-pl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 16px;
}

.ns-pl-card {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 22px;
	border-radius: var(--ns-radius);
	background: var(--ns-glass);
	border: 1px solid var(--ns-glass-border);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
	color: var(--ns-body);
	transition: transform .26s var(--ns-ease), box-shadow .26s var(--ns-ease), border-color .26s var(--ns-ease);
}

.ns-pl-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ns-shadow-lg);
	border-color: rgba(37, 99, 235, .28);
	color: var(--ns-body);
}

.ns-pl-card h3 {
	color: var(--ns-ink);
	font-size: 16px;
	font-weight: 600;
}

.ns-shop .ns-pl-desc {
	margin: 14px 0 16px;
	color: var(--ns-muted);
	font-size: 13px;
	line-height: 1.75;
	min-height: 46px;
}

.ns-pl-price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-top: auto;
	color: var(--ns-ink);
	font-weight: 600;
}

.ns-pl-price b {
	background: var(--ns-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 22px;
}

.ns-pl-price em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--ns-muted);
	font-weight: 500;
}

/* 价格与「前往选购」同一行，按钮靠右。
   留 wrap 兜底：价格位数变多时按钮整枚换到下一行，而不是挤压或压住价格。 */
.ns-pl-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin-top: auto;
	padding-top: 16px;
}

.ns-pl-buy .ns-pl-price {
	margin-top: 0;
}

.ns-pl-buy > .ns-btn {
	flex: 0 0 auto;
	margin-left: auto;
}

.ns-pl-buy .ns-pl-off {
	opacity: .55;
	cursor: not-allowed;
}

.ns-shop .ns-pl-sale {
	margin-top: 6px;
	color: var(--ns-muted);
	font-size: 12px;
}

.ns-pl-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ns-pl-head h3 {
	flex: 1 1 auto;
	min-width: 0;
}

.ns-pl-sold {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 99px;
	background: rgba(148, 163, 184, .18);
	color: var(--ns-muted);
	font-size: 11.5px;
	line-height: 1.35;
}

.ns-pl-note {
	margin-top: 22px;
	padding: 18px 20px;
	border-radius: var(--ns-radius);
	background: rgba(245, 158, 11, .09);
	border: 1px solid rgba(245, 158, 11, .28);
	color: #92400e;
	font-size: 13px;
	line-height: 1.85;
}

.ns-shop .ns-pl-note h4 {
	margin-bottom: 6px;
	color: #92400e;
	font-size: 14.5px;
}

/* 结果页 */

.ns-result {
	max-width: 560px;
	margin: 40px auto;
	padding: 40px 34px;
	text-align: center;
	border-radius: var(--ns-radius-lg);
	background: var(--ns-glass-strong);
	border: 1px solid var(--ns-glass-border);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ns-result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 20px;
	border-radius: 22px;
	background: var(--ns-gradient);
	color: #fff;
	box-shadow: var(--ns-shadow-accent);
}

.ns-result-icon svg {
	width: 34px;
	height: 34px;
	stroke-width: 2;
}

.ns-result h1 {
	color: var(--ns-ink);
	font-size: 22px;
}

.ns-result p {
	margin-top: 10px;
	color: var(--ns-muted);
	font-size: 14px;
}

.ns-result-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 26px;
}

.ns-goods {
	padding: 4px 0;
}

.ns-goods-price {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ns-goods-origin {
	color: var(--ns-muted);
	font-size: 12.5px;
	text-decoration: line-through;
}

.ns-goods-price .ns-total-price {
	font-size: 21px;
}

.ns-qty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ns-qty-label {
	color: var(--ns-muted);
	font-size: 12.5px;
}

.ns-field + .ns-field {
	margin-top: 20px;
}

.ns-field-title {
	display: block;
	margin-bottom: 9px;
	color: var(--ns-muted);
	font-size: 12.5px;
	font-weight: 500;
}

.ns-pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ns-pay-list > .checkboxDiv {
	margin: 0;
	width: auto;
	min-width: 210px;
}

.ns-checkline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ns-line);
}

.ns-total-label {
	color: var(--ns-muted);
	font-size: 12.5px;
}

.ns-promo-on {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 15px;
	border-radius: 12px;
	background: rgba(16, 185, 129, .09);
	border: 1px solid rgba(16, 185, 129, .26);
	color: #047857;
	font-size: 13.5px;
}

.ns-shop .ns-empty {
	margin: 26px 0 18px;
	color: var(--ns-muted);
	font-size: 14px;
	text-align: center;
}

/* 无图标字体环境下的兜底 */

#customSureBtn .bx-loader {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 7px;
	border: 2px solid rgba(37, 99, 235, .25);
	border-top-color: var(--ns-primary);
	border-radius: 50%;
	vertical-align: -2px;
	animation: ns-spin .7s linear infinite;
}

@keyframes ns-spin {
	to {
		transform: rotate(360deg);
	}
}

#customBody .fa-exclamation-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: rgba(245, 158, 11, .18);
	color: #b45309;
	font-size: 13px;
	font-style: normal;
	vertical-align: -4px;
}

#customBody .fa-exclamation-circle::before {
	content: "!";
	font-weight: 700;
}

/* 按钮 */

/* .ns-btn-* 定义在主站样式表里，权重只有 (0,1,0)，会被 body.ns-web a 的链接色压过去
   （渐变底 + 蓝字 ⇒ 文字几乎不可见），这里按按钮语义重新声明 */
.ns-shop .ns-btn-glow,
.ns-shop .ns-btn-glow:hover,
.ns-shop .ns-btn-glow:focus {
	color: #fff;
}

.ns-shop .ns-btn-ghost {
	color: var(--ns-ink);
}

.ns-shop .ns-btn-ghost:hover,
.ns-shop .ns-btn-ghost:focus {
	color: var(--ns-primary-strong);
}

.ns-shop .btn {
	border-radius: 11px;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 18px;
	transition: all .2s var(--ns-ease);
}

.ns-shop .btn-primary,
.ns-shop .submit-btn {
	border: 1px solid transparent;
	background: var(--ns-gradient);
	color: #fff;
	box-shadow: var(--ns-shadow-accent);
}

.ns-shop .btn-primary:hover,
.ns-shop .submit-btn:hover,
.ns-shop .btn-primary:focus {
	background: var(--ns-gradient);
	color: #fff;
	filter: saturate(112%);
	box-shadow: 0 14px 30px rgba(37, 99, 235, .36);
}

.ns-shop .btn-primary:disabled,
.ns-shop .submit-btn:disabled {
	background: rgba(148, 163, 184, .35);
	box-shadow: none;
	cursor: not-allowed;
}

.ns-shop .submit-btn {
	padding: 12px 34px;
	font-size: 15px;
	border-radius: 13px;
}

/* 模态框 */

.ns-shop .modal-content {
	border: 1px solid var(--ns-glass-border);
	border-radius: var(--ns-radius-lg);
	background: var(--ns-glass-strong);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-lg);
}

.ns-shop .modal-header,
.ns-shop .modal-footer {
	border-color: var(--ns-line);
}

.ns-shop .modal-title {
	color: var(--ns-ink);
	font-size: 16px;
	font-weight: 600;
}

.ns-shop .modal-body {
	color: var(--ns-body);
	font-size: 14px;
}

/* 移动端结算吸底 */

.ns-mobile-bar {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1035;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	border-top: 1px solid var(--ns-line);
	box-shadow: 0 -8px 26px rgba(15, 23, 42, .08);
}

.ns-mobile-bar .ns-total-price {
	font-size: 21px;
}

@media (max-width: 767.98px) {
	.ns-shop {
		padding: 18px var(--ns-gutter) 92px;
	}

	/* .card 的 backdrop-filter 会让它成为 position:fixed 子元素的包含块。
	   底部结算条 .ns-os-mob 是 ordersummary 通过 AJAX 注入到 .card 里的，
	   于是 fixed/bottom:0 只相对卡片生效、还被 card 的 overflow:hidden 裁掉，
	   手机上表现为「加入购物车」那条不吸附屏幕底。移动端关掉卡片模糊换回吸附，
	   桌面端保留玻璃效果。 */
	.ns-shop .card {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.ns-shop .card-body {
		padding: 18px;
	}

	.ns-shop .form-group {
		padding: 14px 0;
	}

	.ns-shop label.col-form-label {
		margin-bottom: 10px;
	}

	.ns-shop-head h1 {
		font-size: 20px;
	}

	.ns-mobile-bar {
		display: flex;
	}

	.ns-os-mob {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1036;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: var(--ns-blur);
		backdrop-filter: var(--ns-blur);
		border-top: 1px solid var(--ns-line);
		box-shadow: 0 -8px 26px rgba(15, 23, 42, .08);
	}

	.ns-os-mob-total {
		color: var(--ns-ink);
		font-size: 14.5px;
		font-weight: 600;
	}

	#addToCartBtn {
		display: none;
	}

	/* 结算条吸附到屏幕底后，右侧悬浮按钮组（.ns-floats bottom:26px）会被它压住，抬上去 */
	.ns-floats {
		bottom: calc(78px + env(safe-area-inset-bottom));
	}

	/* 页脚在 .ns-shop 之外，吃不到 .ns-shop 的 92px 底部留白，
	   滑到底时固定结算条（67px + 安全区）会压住版权与条款那一行，这里让出高度 */
	.ns-foot {
		padding-bottom: calc(78px + env(safe-area-inset-bottom));
	}

	.mobile-hide,
	.ns-hide-mb {
		display: none !important;
	}

	.ns-pl-desc {
		min-height: 0;
	}

	.ns-pl-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ns-pl-layout > div:first-child > .card {
		position: static;
	}

	.ns-goods-foot {
		align-items: flex-start;
		flex-direction: column;
	}

	.ns-pay-list > .checkboxDiv {
		width: 100%;
	}
}