/* ============================================================
   yy-cart-v2.css   购物车 · 一级栏目字母标 + 栏目介绍双色分栏
   2026-10-20   （需在 products.lingsu.css 之后加载）
   ============================================================ */

/* ------------------------------------------------------------
   1. 一级栏目：地区字母标
   ------------------------------------------------------------ */
.cart-firstgroup-bar-inner { overflow: hidden; }

.cart-first-tab {
	display: grid !important;
	grid-template-columns: 28px minmax(0, auto);
	column-gap: 9px;
	align-content: center;
	justify-content: center;
	align-items: center;
	padding: 11px 10px !important;
}

/* 旧的顶部 2px 指示线不再需要 */
.cart-first-tab::before { background: transparent !important; }

.cart-first-tab:hover { background: #FBFAFD !important; }
.cart-first-tab.is-active { background: #FCFAFD !important; }

/* emoji 图片 / bootstrap 图标一律隐藏（模板已换成字母标） */
.cart-first-tab-icon,
.cart-first-tab > i { display: none !important; }

.cart-first-tab-code {
	grid-row: 1 / span 2;
	align-self: center;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: #F4F1F7;
	color: #6B5A7C;
	font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .02em;
	transition: background .16s ease, color .16s ease;
}

/* ¥ 这类单字符符号：用比例字体、放大一档，避免等宽字体里显得又小又怪 */
.cart-first-tab-code.is-sym {
	font: 600 13px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
	letter-spacing: 0;
}

.cart-first-tab-name {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	text-align: left;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #3A3446;
	max-width: 100%;
}

.cart-first-tab-sub {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	flex: none !important;
	text-align: left;
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.4;
	color: #8E889D;
	max-width: 100%;
}

.cart-first-tab.is-active .cart-first-tab-code { background: #B074D1; color: #fff; }
.cart-first-tab.is-active .cart-first-tab-name { color: #241F2E; }
.cart-first-tab.is-active .cart-first-tab-sub { color: #7B3FA2; }

/* ------------------------------------------------------------
   2. 栏目介绍：双色分栏（左侧品牌浅紫）
   ------------------------------------------------------------ */
.cart-main > .cart-group-desc {
	position: relative;
	overflow: hidden;
	display: block !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin-bottom: 18px;
	background: #FBF7FE !important;
	border: 1px solid #EFE1FA !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(23, 19, 31, .04) !important;
}

.cart-main > .cart-group-desc .cart-group-desc-inner {
	display: grid !important;
	grid-template-columns: 236px minmax(0, 1fr);
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
}

.cart-main > .cart-group-desc .cart-group-desc-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 18px 20px;
	background: linear-gradient(160deg, #BE87DB 0%, #B074D1 52%, #A96BCB 100%);
	color: #fff;
}

.cart-main > .cart-group-desc .cart-group-desc-eyebrow {
	display: block;
	font-size: 9.5px;
	letter-spacing: .14em;
	line-height: 1.4;
	color: rgba(255, 255, 255, .8);
}

.cart-main > .cart-group-desc .cart-group-desc-title {
	margin: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
	font-size: 18px !important;
	font-weight: 650 !important;
	letter-spacing: -.01em;
	line-height: 1.35;
	color: #fff !important;
}

.cart-main > .cart-group-desc .cart-group-desc-text {
	margin: 0 !important;
	max-width: none !important;
	font-size: 11.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .84) !important;
}

.cart-main > .cart-group-desc .cart-group-desc-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 16px 22px;
	min-width: 0;
}

/* 规格胶囊：白底 + 淡紫描边，类别灰、值深 */
.cart-main > .cart-group-desc .cart-group-desc-tags { max-width: none !important; gap: 7px !important; }
.cart-main > .cart-group-desc .cart-group-desc-tags-row { gap: 7px !important; }

.cart-main > .cart-group-desc .cart-group-desc-tag,
.cart-main > .cart-group-desc .cart-group-desc-tag:first-child {
	min-height: 0;
	padding: 5px 9px;
	border-radius: 7px;
	background: #fff;
	border: 1px solid #EFE3F9;
	color: #241F2E;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: none;
}

.cart-main > .cart-group-desc .cart-group-desc-tag .k {
	margin-right: 6px;
	padding-right: 0;
	border-right: 0;
	color: #9A8AAC;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
}

.cart-main > .cart-group-desc .cart-group-desc-tag .v { color: #241F2E; font-weight: 500; }

.cart-main > .cart-group-desc .cart-group-desc-tag.is-copy {
	gap: 5px;
	padding-right: 8px;
	border-color: #DFC8F1;
	transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.cart-main > .cart-group-desc .cart-group-desc-tag.is-copy .k { color: #A579C4; }
.cart-main > .cart-group-desc .cart-group-desc-tag.is-copy .v { color: #7B3FA2; }
.cart-main > .cart-group-desc .cart-group-desc-tag.is-copy .cp-ico { color: #B08FCB; }

.cart-main > .cart-group-desc .cart-group-desc-tag.is-copy:hover {
	background: #fff;
	border-color: #CBA9E6;
	box-shadow: 0 2px 8px rgba(123, 63, 162, .10);
}

.cart-main > .cart-group-desc .cart-group-desc-tag.is-copy.is-copied {
	background: #F1FAF5;
	border-color: #BFE0CE;
}

.cart-main > .cart-group-desc .cart-group-desc-note {
	margin: 0 !important;
	font-size: 11px;
	line-height: 1.55;
	color: #8B7A9D;
}


/* 骨架屏（切换分组时的占位）：左栏用浅色条，避免紫底上看不见 */
.cart-main > .cart-group-desc .cart-group-desc-left .sk-banner-title,
.cart-main > .cart-group-desc .cart-group-desc-left .sk-banner-text {
	background: rgba(255, 255, 255, .34) !important;
}
.cart-main > .cart-group-desc .cart-group-desc-left .sk-banner-title { width: 74%; }
.cart-main > .cart-group-desc .cart-group-desc-left .sk-banner-text { width: 88%; }

/* ------------------------------------------------------------
   3. 窄屏
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.cart-main > .cart-group-desc .cart-group-desc-inner { grid-template-columns: 1fr; }
	.cart-main > .cart-group-desc .cart-group-desc-left { padding: 15px 18px; }
	.cart-main > .cart-group-desc .cart-group-desc-right { padding: 13px 18px 15px; gap: 9px; }
	.cart-main > .cart-group-desc .cart-group-desc-title { font-size: 16.5px !important; }
}

@media (max-width: 575.98px) {
	.cart-first-tab { grid-template-columns: 26px minmax(0, auto); column-gap: 8px; }
	.cart-first-tab-code { width: 26px; height: 26px; }
}

/* ------------------------------------------------------------
   4. 手机端一级导航：改用「简称」，消除省略号（2026-10-21 · 方案 C）
   背景：≤575px 是 3 列等分网格，每格 114px，扣掉字母块 26 + gap 8 + padding 12，
         名字只剩 68px，「住宅ISP服务器」要 84px 必然出省略号。
   做法：模板同时输出 .nm-full / .nm-short，这里按断点切显隐；
         手机端只显示去掉「服务器」等后缀的简称（香港 / 美国 / 住宅ISP / 日本 / 全球）。
   ------------------------------------------------------------ */
.cart-first-tab-name .nm-short { display: none; }

/* 平板竖屏（576–767）：6 个 tab 挤在一行只有 92–120px/个，
   名字与副标题都会截成 1 个字，这里复用手机端的 3 列网格 */
@media (min-width: 576px) and (max-width: 767.98px) {
	.cart-firstgroup-bar-inner {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		flex-wrap: wrap;
		overflow: visible;
	}
	.cart-first-tab {
		min-width: 0;
		padding: 10px 8px;
		border-left: 0;
		border-right: 1px solid #F6F3F9;
		border-top: 1px solid #F6F3F9;
	}
	.cart-first-tab:nth-child(-n+3) { border-top: 0; }
	.cart-first-tab:nth-child(3n) { border-right: 0; }
	.cart-first-tab-sub { display: none; }
}

/* ≤991.98 一律用简称：768–991 时 name 盒只有 62–84px，
   「住宅ISP服务器」需要 83px，仍会出省略号 */
@media (max-width: 991.98px) {
	.cart-first-tab-name .nm-full { display: none; }
	.cart-first-tab-name .nm-short { display: inline; }
}

@media (max-width: 575.98px) {
	.cart-first-tab-name { font-size: 12px; }
}

/* 平板网格里内容居中：3 列时每格约 184px，靠左会显得空 */
@media (min-width: 576px) and (max-width: 767.98px) {
	.cart-first-tab { justify-content: center; column-gap: 10px; }
}

/* ------------------------------------------------------------
   5. 手机/平板：字母块与文字垂直对齐（2026-10-21）
   原因：.cart-first-tab-code 是 grid-row:1/span 2，桌面端要跨「名称+副标题」两行；
         但 ≤767.98px 时副标题被 display:none，第二行塌成 13px 的隐式轨道，
         字母块被拉低 6px，文字看着偏上。这里把字母块收回第 1 行。
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.cart-first-tab { grid-template-rows: 1fr; align-items: center; }
	.cart-first-tab-code { grid-row: 1 !important; align-self: center; }
	.cart-first-tab-name { align-self: center; line-height: 1.3; }
}