/* 产品目录：筛选面板 / PDP 规格表 */
.toysail-crumb ol {
	display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 20px; padding: 0;
	font-size: 13px; color: var(--ts-ink-400);
}
.toysail-crumb li + li::before { content: '/'; margin-right: 6px; color: #CBD5E1; }
.toysail-crumb a { color: var(--ts-ink-400); }
.toysail-crumb a:hover { color: var(--ts-brand); }

.toysail-catalog__layout { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }

/* 筛选面板 */
.toysail-filter {
	background: var(--ts-surface-50); border: 1px solid var(--ts-line); border-radius: var(--ts-radius-card);
	position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto;
	/* sticky 自身即创建 stacking context：无正 z-index 时整棵侧栏按 DOM 顺序排在产品
	   结果区之后，fixed flyout 的 z-index 再高也被锁在侧栏内、被卡片媒体链接盖住 */
	z-index: 20;
}
.toysail-filter__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 0; font-family: var(--ts-font-display); }
.toysail-filter__close { display: none; border: none; background: none; font-size: 24px; cursor: pointer; color: var(--ts-ink-400); }
.toysail-filter__body { padding: 8px 18px 18px; }
.toysail-filter__group { padding: 14px 0; border-bottom: 1px solid var(--ts-line); }
.toysail-filter__group:last-of-type { border-bottom: none; }
.toysail-filter__label {
	display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ts-ink-400); font-weight: 700; margin-bottom: 10px;
}
.toysail-filter__checks { display: flex; flex-direction: column; gap: 8px; }
.toysail-filter__checks label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ts-ink-600); cursor: pointer; margin: 0; }
.toysail-filter__checks input { width: 15px; height: 15px; accent-color: var(--ts-brand); }
.toysail-filter__range input[type="range"] { width: 100%; accent-color: var(--ts-brand); }
.toysail-filter__range span { font-size: .82rem; color: var(--ts-ink-600); }
.toysail-filter__actions { display: flex; gap: 8px; padding-top: 16px; }
.toysail-filter__actions .toysail-btn { flex: 1; font-size: .85rem; padding: 9px 8px; }
.toysail-filter__open { display: none; margin-bottom: 16px; }

/* 分类二级树：大类行 + hover/focus 滑出小类面板。
   筛选栏是 sticky + overflow 滚动容器，桌面端 flyout 用 fixed 逃逸裁剪（JS 算坐标），
   移动端抽屉内改静态内嵌展开。 */
.toysail-cattree { display: flex; flex-direction: column; gap: 2px; }
.toysail-cattree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--ts-radius-btn); }
.toysail-cattree__row:hover { background: var(--ts-brand-tint); }
.toysail-cattree__node.is-open > .toysail-cattree__row { background: var(--ts-brand-tint); }
.toysail-cattree__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ts-ink-600); cursor: pointer; margin: 0; padding: 7px 8px; }
/* A：radio 视觉隐藏（功能保留，C 徽标替代圆圈）；键盘聚焦时徽标显焦点环 */
.toysail-cattree__main input.toysail-cattree__radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.toysail-cattree__main input.toysail-cattree__radio:focus-visible + .toysail-cattree__code { outline: 2px solid var(--ts-brand); outline-offset: 1px; }
.toysail-cattree__code {
	flex: none; min-width: 30px; text-align: center; padding: 1px 5px;
	font-family: var(--ts-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
	color: var(--ts-brand); background: var(--ts-brand-tint); border: 1px solid rgba(37,99,235,.22); border-radius: 5px;
}
.toysail-cattree__main.is-checked .toysail-cattree__code, .toysail-cattree__main:has(input:checked) .toysail-cattree__code { background: var(--ts-brand); color: #fff; border-color: var(--ts-brand); }
/* 大类名优先单行：自然断词，确实过长才折到第二行 */
.toysail-cattree__main > span:last-child { overflow-wrap: normal; word-break: normal; line-height: 1.35; }
.toysail-cattree__main.is-checked, .toysail-cattree__main:has(input:checked) { color: var(--ts-brand); font-weight: 600; }
.toysail-cattree__toggle {
	flex: none; align-self: flex-start; margin: 6px 4px 0 0; width: 26px; height: 26px; border: none; background: none;
	border-radius: 6px; color: var(--ts-ink-400); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.toysail-cattree__toggle:hover { background: #fff; color: var(--ts-brand); }
.toysail-cattree__toggle:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 1px; }
.toysail-cattree__toggle svg { transition: transform .18s ease; }
.toysail-cattree__node.is-open > .toysail-cattree__row .toysail-cattree__toggle svg { transform: rotate(90deg); }

.toysail-cattree__fly {
	position: fixed; z-index: 240; width: 600px; max-width: calc(100vw - 340px);
	background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-card);
	box-shadow: 0 18px 44px rgba(15,23,42,.16);
	display: flex; flex-direction: column; overflow: hidden;
}
.toysail-cattree__fly[hidden] { display: none; }
.toysail-cattree__flyhead {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	padding: 12px 16px 10px; border-bottom: 1px solid var(--ts-line);
}
.toysail-cattree__flyhead strong { font-family: var(--ts-font-display); font-size: .95rem; color: var(--ts-ink-900); }
.toysail-cattree__flyhead span { font-size: .76rem; color: var(--ts-ink-400); white-space: nowrap; }
.toysail-cattree__flygrid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px;
	padding: 10px 12px 12px; overflow-y: auto; overscroll-behavior: contain;
}
.toysail-cattree__flygrid label {
	display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--ts-ink-600);
	cursor: pointer; margin: 0; padding: 5px 8px; border-radius: 6px; white-space: nowrap;
}
/* 小类名单行：过长省略，不折行 */
.toysail-cattree__flygrid label > span:last-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.toysail-cattree__flygrid label:hover { background: var(--ts-brand-tint); color: var(--ts-brand); }
.toysail-cattree__flygrid label.is-checked, .toysail-cattree__flygrid label:has(input:checked) {
	background: var(--ts-brand-tint); color: var(--ts-brand); font-weight: 600;
}
/* 小类 radio 圆圈视觉隐藏（功能保留，键盘聚焦时编号显焦点环） */
.toysail-cattree__flygrid input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.toysail-cattree__flygrid input:focus-visible + .toysail-cattree__tscode { outline: 2px solid var(--ts-brand); outline-offset: 1px; border-radius: 3px; }
/* A：小类淡色编号 */
.toysail-cattree__tscode { flex: none; font-family: var(--ts-font-mono); font-size: .68rem; color: var(--ts-ink-400); letter-spacing: .02em; }
.toysail-cattree__flygrid label:hover .toysail-cattree__tscode, .toysail-cattree__flygrid label.is-checked .toysail-cattree__tscode,
.toysail-cattree__flygrid label:has(input:checked) .toysail-cattree__tscode { color: var(--ts-brand); }
.toysail-cattree__flygrid em { font-style: normal; margin-left: auto; font-size: .74rem; color: var(--ts-ink-400); font-family: var(--ts-font-mono); }
.toysail-cattree__flygrid label.is-checked em, .toysail-cattree__flygrid label:has(input:checked) em { color: var(--ts-brand); }

/* 工具条 */
.toysail-catalog__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.toysail-catalog__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.toysail-chip {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
	background: var(--ts-brand-tint); color: var(--ts-brand); border: 1px solid #BFDBFE;
	border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.toysail-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.toysail-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ts-ink-400); }
.toysail-sort select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-btn); background: #fff; font-size: .88rem; }

.toysail-catalog__pager { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.toysail-catalog__pager button {
	min-width: 38px; height: 38px; border: 1px solid var(--ts-line); background: #fff;
	color: var(--ts-ink-900); font-weight: 600;
	border-radius: var(--ts-radius-btn); cursor: pointer; font-family: var(--ts-font-mono); font-size: .85rem;
	transition: background .15s, color .15s, border-color .15s;
}
.toysail-catalog__pager button:hover:not(:disabled):not(.is-active) {
	background: var(--ts-brand-tint); color: var(--ts-brand); border-color: var(--ts-brand);
}
.toysail-catalog__pager button.is-active,
.toysail-catalog__pager button.is-active:hover { background: var(--ts-brand); color: #fff; border-color: var(--ts-brand); cursor: default; }
.toysail-catalog__pager button:disabled,
.toysail-catalog__pager button:disabled:hover { opacity: .45; cursor: default; background: #fff; color: var(--ts-ink-900); }
.toysail-termseo { max-width: 860px; margin-top: 56px; color: var(--ts-ink-400); font-size: .95rem; }

/* PDP */
.toysail-pdp__top { display: grid; grid-template-columns: 46% 1fr; gap: 40px; margin-bottom: 56px; }
.toysail-pdp__gallery { display: flex; flex-direction: column; gap: 16px; }
.toysail-pdp__mainimg img { border-radius: var(--ts-radius-card); border: 1px solid var(--ts-line); width: 100%; }
.toysail-pdp__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.toysail-pdp__thumb { padding: 0; border: 2px solid var(--ts-line); border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; width: 72px; height: 72px; flex: 0 0 auto; }
.toysail-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.toysail-pdp__thumb:hover, .toysail-pdp__thumb.is-active { border-color: var(--ts-brand); }
.toysail-pdp__title { font-size: 1.7rem; margin: 0 0 4px; }
.toysail-pdp__zh { color: var(--ts-ink-400); font-size: .92rem; margin: 0 0 4px; }
.toysail-pdp__sku { color: var(--ts-ink-400); font-size: .85rem; margin-bottom: 14px; }
.toysail-pdp__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.toysail-pdp__specstrip {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
	background: #F1F5F9; border-radius: var(--ts-radius-card); padding: 14px 16px; margin-bottom: 20px;
}
.toysail-pdp__specstrip span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ts-ink-400); }
.toysail-pdp__specstrip strong { font-family: var(--ts-font-mono); font-size: 1rem; color: var(--ts-ink-900); font-weight: 600; }
.toysail-pdp__qtyrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; row-gap: 6px; }
.toysail-pdp__qtyrow label { font-size: .88rem; font-weight: 600; }
.toysail-pdp__qtyrow > input { width: 110px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-btn); font-family: var(--ts-font-mono); text-align: right; }
.toysail-pdp__qtyrow span { font-size: .82rem; color: var(--ts-ink-400); }
/* 数量步进器（箱为单位）：− 框 + 左右夹 */
.toysail-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-btn); overflow: hidden; background: #fff; }
.toysail-stepper__btn { width: 42px; min-height: 42px; border: none; background: var(--ts-surface-50); color: var(--ts-ink-900); font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.toysail-stepper__btn:hover { background: var(--ts-brand-tint); color: var(--ts-brand); }
.toysail-stepper input { width: 76px; min-height: 42px; padding: 8px 6px; border: none; border-left: 1px solid var(--ts-line); border-right: 1px solid var(--ts-line); font-family: var(--ts-font-mono); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.toysail-stepper input::-webkit-outer-spin-button, .toysail-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.toysail-pdp__unit { font-size: .85rem; font-weight: 600; color: var(--ts-ink-600); }
.toysail-pdp__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.toysail-btn--wa { background: #fff; color: var(--ts-wa); border: 1px solid var(--ts-wa); }
.toysail-btn--wa:hover { background: #F0FFF4; color: var(--ts-wa); }
.toysail-pdp__note { margin-top: 18px; padding: 12px 16px; background: var(--ts-surface-50); border-radius: var(--ts-radius-btn); font-size: .9rem; color: var(--ts-ink-600); }
.toysail-pdp__ipwarn {
	margin-top: 14px; padding: 12px 16px; border-radius: var(--ts-radius-btn);
	background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: .88rem;
}

/* 规格表 */
.toysail-tablewrap { border: 1px solid var(--ts-line); border-radius: var(--ts-radius-card); overflow: hidden; overflow-x: auto; background: #fff; }
.toysail-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.toysail-table th, .toysail-table td { padding: 12px 18px; border-bottom: 1px solid var(--ts-line); text-align: left; }
.toysail-table tbody tr:nth-child(even) { background: #FAFBFC; }
.toysail-table tbody tr:hover { background: #F1F5F9; }
.toysail-table th { width: 240px; font-size: 13px; font-weight: 600; color: var(--ts-ink-600); }
.toysail-table td { font-size: 14px; color: var(--ts-ink-900); }
.toysail-table__hl { background: var(--ts-brand-tint); box-shadow: inset 3px 0 0 var(--ts-brand); }
.toysail-table__hl td { font-weight: 700; color: var(--ts-brand); }

.toysail-cbmpanel {
	display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
	margin-top: 16px; padding: 18px 20px; background: var(--ts-brand-tint);
	border: 1px solid #BFDBFE; border-radius: var(--ts-radius-card);
}
.toysail-cbmpanel p { margin: 4px 0 0; font-size: .92rem; }

.toysail-pdp__specsheet, .toysail-pdp__desc, .toysail-pdp__related { margin-bottom: 56px; }

@media (max-width: 1024px) {
	.toysail-pdp__top { grid-template-columns: 1fr; gap: 24px; }
	.toysail-pdp__specstrip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	.toysail-catalog__layout { grid-template-columns: 1fr; }
	.toysail-filter {
		position: fixed; inset: 0 auto 0 0; width: 320px; max-width: 88vw; max-height: none;
		z-index: 230; border-radius: 0; transform: translateX(-100%); transition: transform .25s ease; background: #fff;
	}
	.toysail-filter.is-open { transform: none; box-shadow: 24px 0 48px rgba(15,23,42,.2); }
	.toysail-filter__close { display: block; }
	.toysail-filter__open { display: inline-flex; }
	.toysail-pdp__btns .toysail-btn { flex: 1; }
	/* 抽屉内二级分类改内嵌展开（fixed 定位会让面板跑出 320px 抽屉） */
	.toysail-cattree__fly {
		position: static; width: auto; max-width: none; box-shadow: none; z-index: auto;
		margin: 2px 0 8px; background: var(--ts-surface-50);
	}
	.toysail-cattree__flygrid { grid-template-columns: 1fr; }
	/* 触屏点按后 :hover 会粘滞，去掉 caret 的 hover 底色 */
	@media (hover: none) {
		.toysail-cattree__toggle:hover { background: none; color: var(--ts-ink-400); }
		.toysail-cattree__row:hover { background: transparent; }
	}
	/* PDP 规格表手机端去横向滚动：键窄化、值允许折行 */
	.toysail-pdp__specsheet .toysail-table { min-width: 0; }
	.toysail-pdp__specsheet .toysail-table th { width: 128px; padding: 12px 12px; }
	.toysail-pdp__specsheet .toysail-table td { padding: 12px 12px; overflow-wrap: anywhere; }
	.toysail-pdp__specsheet .toysail-tablewrap { overflow-x: visible; }
}