:root {
			--bg: #f6f7fb;
			--card: #ffffff;
			--primary: #ff6a3d;
			--primary-soft: #fff1ec;
			--text: #1f2937;
			--subtext: #6b7280;
			--line: #eceff5;
			--success: #16a34a;
			--shadow: 0 12px 30px rgba(31, 41, 55, 0.08);
			--radius: 18px;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
			background: linear-gradient(180deg, #fff8f5 0%, var(--bg) 220px);
			color: var(--text);
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		.page {
			width: 100%;
			min-height: 100vh;
			padding: 24px;
		}

		.shell {
			max-width: 1280px;
			margin: 0 auto;
		}

		.topbar {
			height: 72px;
			background: rgba(255, 255, 255, 0.88);
			backdrop-filter: blur(12px);
			border: 1px solid rgba(255, 255, 255, 0.7);
			border-radius: 22px;
			box-shadow: var(--shadow);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px;
			margin-bottom: 22px;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 12px;
			font-weight: 700;
			font-size: 22px;
		}

		.brand-badge {
			width: 42px;
			height: 42px;
			border-radius: 14px;
			background: linear-gradient(135deg, #ff7c52, #ff4d6d);
			display: grid;
			place-items: center;
			color: #fff;
			font-size: 18px;
			box-shadow: 0 10px 18px rgba(255, 106, 61, 0.25);
		}

		.actions {
			display: flex;
			gap: 10px;
			color: var(--subtext);
			font-size: 14px;
		}

		.action-pill {
			padding: 10px 14px;
			background: #fff;
			border: 1px solid var(--line);
			border-radius: 999px;
		}

		.layout {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.card {
			background: var(--card);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			border: 1px solid #f1f3f8;
		}

		.main-detail {
			display: grid;
			grid-template-columns: 1.05fr 1fr;
			gap: 22px;
			padding: 24px;
		}

		.gallery {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.main-image {
			border-radius: 20px;
			overflow: hidden;
			background: #fff5f0;
			height: 460px;
		}

		.main-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.image-empty {
			width: 100%;
			height: 100%;
			display: grid;
			place-items: center;
			color: var(--subtext);
			font-size: 14px;
		}

		.thumb-list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 12px;
		}

		.thumb-item {
			border-radius: 16px;
			overflow: hidden;
			border: 2px solid transparent;
			background: #fff8f4;
			cursor: pointer;
			height: 102px;
		}

		.thumb-item.active {
			border-color: #ffb79e;
		}

		.thumb-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.detail-info {
			display: flex;
			flex-direction: column;
			gap: 18px;
		}

		.breadcrumb {
			font-size: 13px;
			color: var(--subtext);
		}

		.product-title {
			margin: 0;
			font-size: 32px;
			line-height: 1.35;
		}

		.product-subtitle {
			margin: 0;
			color: var(--subtext);
			font-size: 14px;
			line-height: 1.9;
		}

		.price-panel {
			padding: 18px 20px;
			border-radius: 18px;
			background: linear-gradient(135deg, #fff5ef, #fffaf8);
			border: 1px solid #ffe2d4;
		}

		.price-main {
			display: flex;
			align-items: end;
			gap: 12px;
			margin-bottom: 10px;
		}

		.current-price {
			font-size: 34px;
			font-weight: 700;
			color: #ff4d2d;
		}

		.original-price {
			color: #a0a7b2;
			font-size: 14px;
			text-decoration: line-through;
		}

		.price-meta {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}

		.price-meta span {
			padding: 7px 12px;
			border-radius: 999px;
			background: #fff;
			border: 1px solid #ffe0d4;
			font-size: 13px;
			color: #d9481c;
		}

		.option-section {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.option-row {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.option-row label {
			font-size: 14px;
			font-weight: 700;
		}

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

		.option-chip {
			padding: 10px 14px;
			border-radius: 12px;
			border: 1px solid var(--line);
			background: #fff;
			font-size: 14px;
		}

		.option-chip.active {
			background: var(--primary-soft);
			border-color: #ffb79e;
			color: #d9481c;
			font-weight: 700;
		}

		.service-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 16px 18px;
			border-radius: 16px;
			background: #fafbff;
			border: 1px solid var(--line);
		}

		.service-list div {
			font-size: 14px;
			color: var(--subtext);
		}

		.service-list strong {
			color: var(--text);
		}

		.stock-status {
			color: var(--success);
		}

		.action-group {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		.action-btn {
			height: 46px;
			padding: 0 22px;
			border-radius: 14px;
			border: 1px solid var(--line);
			background: #fff;
			color: var(--text);
			cursor: pointer;
			font-size: 14px;
		}

		.action-btn.primary {
			background: var(--primary);
			border-color: var(--primary);
			color: #fff;
		}

		.action-btn.secondary {
			background: var(--primary-soft);
			border-color: #ffd2c0;
			color: #d9481c;
		}

		.action-btn.is-favorited {
			background: #fff;
			border-color: var(--primary);
			color: var(--primary);
			box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.15);
		}

		.detail-action-message {
			min-height: 22px;
			margin: 12px 0 0;
			font-size: 13px;
			color: var(--success);
		}

		.detail-action-message.is-error {
			color: #dc2626;
		}

		.two-column {
			display: grid;
			grid-template-columns: 1.3fr 0.7fr;
			gap: 20px;
		}

		.card-body {
			padding: 22px;
		}

		.section-title {
			margin: 0 0 16px;
			font-size: 18px;
			font-weight: 700;
		}

		.feature-list {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 14px;
		}

		.feature-item {
			padding: 14px 16px;
			border-radius: 14px;
			background: #fafbff;
			border: 1px solid var(--line);
		}

		.feature-item strong {
			display: block;
			margin-bottom: 6px;
			font-size: 15px;
		}

		.feature-item p {
			margin: 0;
			font-size: 13px;
			line-height: 1.8;
			color: var(--subtext);
		}

		.spec-list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.spec-row {
			display: flex;
			justify-content: space-between;
			gap: 16px;
			padding-bottom: 12px;
			border-bottom: 1px solid var(--line);
			font-size: 14px;
		}

		.spec-row span:first-child {
			color: var(--subtext);
		}

		.detail-image-list {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.detail-image {
			border-radius: 18px;
			overflow: hidden;
			height: 320px;
			background: #fff6f1;
		}

		.detail-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.recommend-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 16px;
		}

		.recommend-card {
			border: 1px solid var(--line);
			border-radius: 18px;
			overflow: hidden;
			background: #fff;
			display: block;
		}

		.recommend-cover {
			height: 170px;
			background: #fff5f0;
		}

		.recommend-cover img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.recommend-info {
			padding: 14px 15px 16px;
		}

		.recommend-info p {
			margin: 0 0 8px;
			font-size: 14px;
			line-height: 1.6;
		}

		.recommend-info strong {
			color: #ff4d2d;
			font-size: 20px;
		}

		.empty-box {
			grid-column: 1 / -1;
			padding: 28px;
			border-radius: 16px;
			background: #fafbff;
			border: 1px solid var(--line);
			color: var(--subtext);
			text-align: center;
			font-size: 14px;
		}

		.foot-note {
			margin-top: 18px;
			color: var(--subtext);
			font-size: 13px;
			text-align: center;
		}

		@media (max-width: 1100px) {
			.main-detail,
			.two-column {
				grid-template-columns: 1fr;
			}

			.recommend-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 720px) {
			.page {
				padding: 14px;
			}

			.topbar {
				height: auto;
				padding: 18px;
				gap: 12px;
				flex-direction: column;
				align-items: stretch;
			}

			.thumb-list,
			.feature-list,
			.recommend-grid {
				grid-template-columns: 1fr;
			}

			.main-image {
				height: 320px;
			}
		}