* {
	box-sizing: border-box
}

body {
	margin: 0;
	background: #f5f6f8;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	font-size: 14px
}

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

img {
	display: block;
	max-width: 100%
}

.zt-wrap {
	width: 1180px;
	margin: 0 auto
}

.zt-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.zt-topbar {
	height: 34px;
	line-height: 34px;
	background: #f7f7f7;
	color: #777;
	border-bottom: 1px solid #eee;
	font-size: 12px
}

.zt-toplinks span {
	margin-left: 20px;font-size:18px;
}

.zt-header {
	background: #fff;
	border-bottom: 2px solid #ff7a00
}

.zt-head-inner {
	height: 72px;
	display: flex;
	align-items: center
}

.zt-logo {
	display: flex;
	align-items: center;
	width: 210px
}

.zt-logo span {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #ff7a00;
	color: #fff;
	font-size: 25px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px
}

.zt-logo strong {
	display: block;
	font-size: 22px;
	color: #222;
	letter-spacing: 1px
}

.zt-logo em {
	font-style: normal;
	font-size: 11px;
	color: #999
}

.zt-city {
	padding: 5px 12px;
	border: 1px solid #eee;
	border-radius: 20px;
	margin-right: 20px;
	color: #ff7a00
}

.zt-city small {
	color: #999;
	margin-left: 4px
}

.zt-nav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 2px
}

.zt-nav a {
	padding: 24px 12px;
	color: #333
}

.zt-nav a:hover,
.zt-nav a.active {
	color: #ff7a00
}

.zt-publish {
	background: #ff7a00;
	color: #fff;
	padding: 10px 18px;
	border-radius: 4px;
	font-weight: 700
}

.zt-main {
	padding-bottom: 35px
}

.zt-hero {
	display: grid;
	grid-template-columns: 230px 670px 250px;
	gap: 15px;
	margin-top: 15px
}

.zt-side-news,
.zt-right-box,
.zt-cat-panel,
.zt-section,
.zt-floor,
.zt-hot-layout,
.zt-filter-box,
.zt-list-main,
.zt-list-side,
.zt-detail-top,
.zt-detail-content {
	background: #fff;
	border: 1px solid #eee
}

.zt-side-news {
	padding: 14px;
	height: 330px;
	overflow: hidden
}

.zt-side-news h3 {
	margin: 0 0 8px;
	padding-left: 8px;
	border-left: 4px solid #ff7a00;
	font-size: 16px
}

.zt-side-news h3.mt {
	margin-top: 18px
}

.zt-side-news ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.zt-side-news li {
	height: 25px;
	line-height: 25px;
	overflow: hidden;
	border-bottom: 1px dashed #eee
}

.zt-side-news a {
	font-size: 12px;
	color: #555
}

.zt-side-news a:hover {
	color: #ff7a00
}

.zt-hero-center {
	height: 330px
}

.zt-search {
	height: 48px;
	background: #fff;
	border: 2px solid #ff7a00;
	display: flex;
	margin-bottom: 12px
}

.zt-search input {
	flex: 1;
	border: 0;
	padding: 0 18px;
	outline: 0;
	font-size: 15px
}

.zt-search button {
	width: 130px;
	border: 0;
	background: #ff7a00;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer
}

.zt-banner {
	position: relative;
	height: 270px;
	overflow: hidden;
	background: #f60
}

.zt-banner .banner-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: .35s
}

.zt-banner .banner-item.active {
	opacity: 1
}

.zt-banner img {
	width: 100%;
	height: 270px;
	object-fit: cover
}

/* 找到对应的样式，替换或添加以下属性 */
.zt-banner span {
    position: absolute;
    left: 34px;
    top: 45px;
    right: 34px;          /* 加上右侧边距，限制文本总宽度防止换行错乱 */
    color: #fff;
    z-index: 2;          /* 确保文字在图片上方 */
}
.zt-banner b {
    display: block;
    font-size: 26px;     /* 稍微调小一点字体，防止大标题折行 */
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 增加文字阴影，防止背景图太亮看不清 */
}
.zt-banner em {
    display: block;
    font-style: normal;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.banner-dots {
	position: absolute;
	left: 34px;
	bottom: 18px
}

.banner-dots i {
	display: inline-block;
	width: 28px;
	height: 4px;
	background: rgba(255, 255, 255, .55);
	margin-right: 6px;
	border-radius: 4px
}

.banner-dots i.active {
	background: #fff
}

.zt-right-box {
    padding: 14px;
    height: 330px;
    display: flex;        /* 改为 flex 布局，让三个子项平分高度 */
    flex-direction: column;
    justify-content: space-between; 
}

/* 确保今日新增卡片内部的文字对齐 */
.zt-data-card {
    height: 76px;
    border-radius: 6px;
    background: linear-gradient(135deg,#ff7a00,#ffb347);
    color: #fff;
    padding: 10px 13px;
    margin-bottom: 0;    /* 靠 flex 布局去控制间距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 修复右侧广告卡片 */
.zt-side-ad {
    display: block;
    height: 100px;       /* 稍微固定高度 */
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid #f2f2f2;
    background-color: #fff7e6; /* 提供一个默认背景色 */
}
.zt-side-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;  /* 让图片作为绝对定位背景 */
    inset: 0;
    z-index: 1;
}
.zt-side-ad span {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
    z-index: 2;          /* 确保文字在图片之上 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.6); /* 调高阴影不透明度 */
}

.zt-data-card {
	height: 76px;
	border-radius: 6px;
	background: linear-gradient(135deg, #ff7a00, #ffb347);
	color: #fff;
	padding: 13px;
	margin-bottom: 12px
}

.zt-data-card strong,
.zt-data-card span {
	display: block
}

.zt-data-card b {
	font-size: 28px;
	margin-right: 4px
}

.zt-side-ad {
	display: block;
	height: 106px;
	margin-bottom: 12px;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	border: 1px solid #f2f2f2
}

.zt-side-ad img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.zt-side-ad span {
	position: absolute;
	left: 12px;
	top: 30px;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .28)
}

.zt-side-ad b {
	display: block;
	font-size: 16px
}

.zt-side-ad em {
	font-style: normal;
	font-size: 12px
}

.zt-cat-panel {
	margin-top: 15px;
	padding: 16px
}

.cat-title {
	display: flex;
	align-items: end;
	margin-bottom: 12px
}

.cat-title strong {
	font-size: 20px;
	margin-right: 12px
}

.cat-title span {
	font-size: 12px;
	color: #999
}

.zt-cat-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 10px
}

.zt-cat-grid a {
	text-align:center;
    height: auto;           /* 建议把固定的 92px 改为 auto，或者保留 92px 但注意文字别溢出 */
    min-height: 92px;       
    min-width: 0;           /* 🔥 关键：防止 Grid 子项被不换行的长文本无限撑宽 */
    border: 1px solid #f0f0f0;
    border-radius: 4px;[cite: 2]
    text-align: center;[cite: 2]
    padding: 12px 6px 8px;  /* 调整一下内边距，两边留点空隙 */
    background: #fff;[cite: 2]
    transition: .2s;[cite: 2]
}

.zt-cat-grid a:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(255, 122, 0, .12);
	border-color: #ffb56a
}

.zt-cat-grid i {
	display: block;
	font-style: normal;
	font-size: 25px
}

.zt-cat-grid b {
	display: block;
	margin-top: 4px
}

.zt-cat-grid em {
	display: block;
	font-style: normal;
	color: #aaa;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 6px
}

.zt-hot-layout {
	margin-top: 15px;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 16px;
	padding: 16px
}

.zt-hot-left a {
	display: block;
	height: 345px;
	position: relative;
	overflow: hidden;
	border-radius: 5px
}

.zt-hot-left img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.zt-hot-left span {
	position: absolute;
	left: 20px;
	top: 20px;
	color: #fff
}

.zt-hot-left b {
	display: block;
	font-size: 25px
}

.zt-hot-left em {
	font-style: normal
}

.zt-section {
	margin-top: 15px;
	padding: 16px
}

.zt-section-head {
	display: flex;
	align-items: end;
	margin-bottom: 13px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px
}

.zt-section-head h2 {
	font-size: 22px;
	margin: 0 12px 0 0;
	color: #222
}

.zt-section-head p {
	margin: 0;
	color: #999;
	flex: 1
}

.zt-section-head a {
	color: #ff7a00
}

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

.zt-shop-grid {
	display: grid;
	gap: 12px
}

.zt-shop-grid.five {
	grid-template-columns: repeat(5, 1fr)
}

.zt-shop-grid.four {
	grid-template-columns: repeat(4, 1fr)
}

.zt-shop-card {
	display: block;
	background: #fff;
	border: 1px solid #eee;
	overflow: hidden;
	transition: .2s
}

.zt-shop-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
	transform: translateY(-2px)
}

.zt-card-pic {
	height: 130px;
	position: relative;
	background: #eee;
	overflow: hidden
}

.zt-card-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.flag {
	position: absolute;
	top: 8px;
	left: 8px;
	font-style: normal;
	font-size: 12px;
	color: #fff;
	padding: 2px 6px;
	border-radius: 2px
}

.flag.urgent {
	background: #f23
}

.flag.recommend {
	left: auto;
	right: 8px;
	background: #ff7a00
}

.zt-card-body {
	padding: 9px
}

.zt-card-body h3 {
	font-size: 14px;
	line-height: 20px;
	height: 40px;
	margin: 0 0 6px;
	overflow: hidden
}

.zt-card-body .addr,
.zt-card-body .desc {
	margin: 0 0 5px;
	color: #777;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.zt-price {
	display: flex;
	justify-content: space-between;
	color: #999;
	font-size: 12px
}

.zt-price b {
	color: #ff5b00;
	font-size: 16px;
	margin: 0 2px
}

.zt-floor {
	margin-top: 18px;
	padding: 16px
}

.zt-floor-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	border-bottom: 2px solid #ff7a00;
	padding-bottom: 8px
}

.zt-floor-head div {
	display: flex;
	align-items: center
}

.zt-floor-head span {
	background: #ff7a00;
	color: #fff;
	padding: 5px 8px;
	margin-right: 8px
}

.zt-floor-head h2 {
	margin: 0;
	font-size: 22px
}

.zt-floor-head em {
	font-style: normal;
	color: #999;
	margin-left: 10px
}

.zt-floor-head nav a {
	margin-left: 16px;
	color: #666
}

.zt-floor-head nav a:hover {
	color: #ff7a00
}

.zt-floor-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 14px
}

.zt-floor-big {
	height: 315px;
	display: block;
	position: relative;
	overflow: hidden
}

.zt-floor-big img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.zt-floor-big span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .72));
	color: #fff;
	padding: 45px 16px 16px
}

.zt-floor-big b {
	display: block;
	font-size: 20px
}

.zt-floor-big em {
	font-style: normal
}

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

.zt-text-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px 18px;
	margin-top: 14px;
	border-top: 1px dashed #eee;
	padding-top: 12px
}

.zt-text-links a {
	display: flex;
	justify-content: space-between;
	height: 24px;
	line-height: 24px;
	overflow: hidden;
	color: #555
}

.zt-text-links span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px
}

.zt-text-links em {
	font-style: normal;
	color: #ff7a00;
	margin-left: 10px
}

.zt-breadcrumb {
	padding: 14px 0;
	color: #888
}

.zt-breadcrumb a {
	color: #ff7a00
}

.zt-list-search {
	display: flex;
	height: 46px;
	margin-bottom: 12px;
	border: 2px solid #ff7a00;
	background: #fff
}

.zt-list-search input {
	flex: 1;
	border: 0;
	padding: 0 15px;
	outline: 0
}

.zt-list-search button {
	width: 120px;
	border: 0;
	background: #ff7a00;
	color: #fff;
	font-size: 16px
}

.zt-filter-box {
	padding: 12px 18px;
	margin-bottom: 15px
}

.zt-filter-box dl {
	display: flex;
	margin: 0;
	border-bottom: 1px dashed #eee;
	padding: 10px 0
}

.zt-filter-box dl:last-child {
	border-bottom: 0
}

.zt-filter-box dt {
	width: 60px;
	color: #999
}

.zt-filter-box dd {
	margin: 0;
	flex: 1
}

.zt-filter-box a {
	display: inline-block;
	margin: 0 12px 6px 0;
	padding: 3px 8px;
	border-radius: 3px
}

.zt-filter-box a.active,
.zt-filter-box a:hover {
	background: #ff7a00;
	color: #fff
}

.zt-list-layout {
	display: grid;
	grid-template-columns: 1fr 250px;
	gap: 15px
}

.zt-list-main {
	padding: 14px
}

.zt-list-sort {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px
}

.zt-list-sort b {
	color: #ff7a00
}

.zt-list-sort a {
	margin-left: 14px;
	color: #666
}

.zt-pages {
	text-align: center;
	padding: 20px 0
}

.zt-list-side {
	padding: 12px;
	height: max-content
}

.zt-list-side h3 {
	margin: 0 0 10px;
	font-size: 18px
}

.zt-list-side a {
	display: grid;
	grid-template-columns: 78px 1fr;
	margin-bottom: 10px;
	gap: 8px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px
}

.zt-list-side img {
	width: 78px;
	height: 58px;
	object-fit: cover
}

.zt-list-side span {
	font-size: 13px;
	line-height: 18px;
	height: 36px;
	overflow: hidden
}

.zt-list-side em {
	font-style: normal;
	color: #ff7a00;
	font-size: 12px
}

.zt-detail-page {
	padding-bottom: 30px
}

.zt-detail-top {
	display: grid;
	grid-template-columns: 520px 1fr;
	gap: 24px;
	padding: 20px
}

.zt-gallery .big {
	height: 390px;
	background: #eee
}

.zt-gallery .big img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.zt-gallery .thumbs {
	display: flex;
	gap: 10px;
	margin-top: 10px
}

.zt-gallery .thumbs img {
	width: 90px;
	height: 68px;
	object-fit: cover;
	border: 2px solid #eee;
	cursor: pointer
}

.zt-detail-info h1 {
	font-size: 26px;
	margin: 0 0 8px
}

.zt-detail-info .sub {
	color: #777
}

.zt-detail-price {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 18px 0
}

.zt-detail-price div {
	background: #fff7ef;
	border: 1px solid #ffd9b3;
	padding: 14px;
	text-align: center
}

.zt-detail-price span {
	display: block;
	color: #888
}

.zt-detail-price b {
	font-size: 28px;
	color: #ff5b00;
	margin-right: 2px
}

.zt-detail-price em {
	font-style: normal;
	color: #ff5b00
}

.zt-param {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px
}

.zt-param li {
	background: #f8f8f8;
	padding: 10px
}

.zt-param span {
	color: #999;
	margin-right: 8px
}

.zt-contact {
	margin-top: 18px;
	background: #ff7a00;
	color: #fff;
	padding: 16px;
	border-radius: 4px
}

.zt-contact strong {
	font-size: 18px;
	margin-right: 16px
}

.zt-contact a,
.zt-contact button {
	display: inline-block;
	background: #fff;
	color: #ff7a00;
	border: 0;
	padding: 9px 14px;
	margin-left: 8px;
	border-radius: 3px;
	cursor: pointer
}

.zt-detail-content {
	margin-top: 15px;
	padding: 22px;
	line-height: 1.8
}

.zt-detail-content h2 {
	border-left: 4px solid #ff7a00;
	padding-left: 10px
}

.zt-footer {
	margin-top: 30px;
	background: #eee;
	border-top: 1px solid #ddd;
	padding: 26px 0 10px;
	color: #666
}

.zt-footer-grid {
	display: grid;
	grid-template-columns: 280px 1fr 1fr 150px;
	gap: 30px
}

.zt-footer h4 {
	margin: 0 0 10px
}

.zt-footer p {
	line-height: 2
}

.zt-footer a {
	margin-right: 12px;
	color: #666
}

.zt-logo.foot span {
	width: 34px;
	height: 34px;
	font-size: 20px
}

.zt-logo.foot strong {
	font-size: 18px
}

.qr {
	width: 92px;
	height: 92px;
	background: #fff;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff7a00;
	font-weight: 800;
	margin-bottom: 6px
}

.zt-copyright {
	text-align: center;
	border-top: 1px solid #ddd;
	margin-top: 18px;
	padding-top: 12px;
	font-size: 12px
}

.zt-float {
	position: fixed;
	right: 18px;
	bottom: 80px;
	z-index: 20
}

.zt-float a {
	display: block;
	width: 48px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	background: #fff;
	border: 1px solid #ddd;
	margin-top: -1px;
	color: #666
}

.zt-float a:hover {
	background: #ff7a00;
	color: #fff
}

@media(max-width:1200px) {
	.zt-wrap {
		width: 96%
	}

	.zt-hero {
		grid-template-columns: 1fr
	}

	.zt-side-news,
	.zt-right-box {
		height: auto
	}

	.zt-cat-grid {
		grid-template-columns: repeat(5, 1fr)
	}

	.zt-shop-grid.five,
	.zt-shop-grid.four,
	.zt-top-grid,
	.zt-floor-cards {
		grid-template-columns: repeat(2, 1fr)
	}

	.zt-floor-layout,
	.zt-hot-layout,
	.zt-list-layout,
	.zt-detail-top {
		grid-template-columns: 1fr
	}

	.zt-footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.zt-nav {
		display: none
	}
}

@media(max-width:640px) {
	.zt-cat-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.zt-shop-grid.five,
	.zt-shop-grid.four,
	.zt-top-grid,
	.zt-floor-cards,
	.zt-text-links {
		grid-template-columns: 1fr
	}

	.zt-head-inner {
		height: auto;
		padding: 10px 0;
		flex-wrap: wrap
	}

	.zt-publish {
		margin-left: auto
	}

	.zt-footer-grid {
		grid-template-columns: 1fr
	}

	.zt-detail-price,
	.zt-param {
		grid-template-columns: 1fr
	}
}

/* ==========================================================================
   单排列表样式（List Layout）
   ========================================================================== */
.zt-shop-list {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 列表项之间的间距 */
}

.zt-shop-list-item {
    display: grid;
    grid-template-columns: 180px 1fr 200px; /* 左中右三栏固定及自适应弹性分配 */
    gap: 20px;
    background: #fff;
    border: 1px solid #eee;
    padding: 16px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.zt-shop-list-item:hover {
    border-color: #ff7a00;
    box-shadow: 0 4px 15px rgba(255, 122, 0, 0.08);
    transform: translateX(2px); /* 悬浮时向右微调，提升质感 */
}

/* 左侧图片区域 */
.zt-shop-list-item .item-pic {
    width: 180px;
    height: 125px;
    position: relative;
    background: #fafafa;
    border-radius: 4px;
    overflow: hidden;
}

.zt-shop-list-item .item-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 标签组样式 */
.zt-shop-list-item .item-flags {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
}

.zt-shop-list-item .flag-tag {
    font-style: normal;
    font-size: 11px;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
}

.zt-shop-list-item .flag-tag.urgent { background: #ff2233; }
.zt-shop-list-item .flag-tag.recommend { background: #ff7a00; }

/* 中间文字描述区域 */
.zt-shop-list-item .item-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0; /* 防止长文本爆框 */
}

.zt-shop-list-item .item-body h3 {
    margin: 0;
    font-size: 18px;
    color: #222;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zt-shop-list-item .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.zt-shop-list-item .item-tags span {
    font-size: 12px;
    color: #666;
    background: #f4f5f7;
    padding: 2px 8px;
    border-radius: 2px;
}

.zt-shop-list-item .item-addr {
    margin: 0;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
}

.zt-shop-list-item .item-addr .split {
    color: #ddd;
    margin: 0 10px;
}

.zt-shop-list-item .item-addr b {
    color: #222;
    font-size: 15px;
}

.zt-shop-list-item .item-desc {
    margin: 0;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zt-shop-list-item .item-desc b {
    color: #555;
    font-weight: 500;
}

/* 右侧价格定位区域 */
.zt-shop-list-item .item-right-price {
    border-left: 1px dashed #eee;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.zt-shop-list-item .price-row {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.zt-shop-list-item .price-row b {
    color: #ff5b00;
    font-size: 24px;
}

.zt-shop-list-item .fee-row {
    font-size: 13px;
    color: #888;
}

.zt-shop-list-item .fee-row span {
    color: #444;
    font-weight: bold;
}

/* ==========================================================================
   响应式移动端适配媒体查询修复
   ========================================================================== */
@media(max-width: 1200px) {
    .zt-shop-list-item {
        grid-template-columns: 160px 1fr; /* 平板端隐藏右侧，收缩为两列 */
    }
    .zt-shop-list-item .item-pic {
        width: 160px;
        height: 110px;
    }
    .zt-shop-list-item .item-right-price {
        border-left: 0;
        padding-left: 0;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        grid-column: span 2; /* 价格行独占到底部下一行 */
        border-top: 1px dashed #eee;
        padding-top: 10px;
        margin-top: 5px;
    }
}

@media(max-width: 640px) {
    .zt-shop-list-item {
        grid-template-columns: 1fr; /* 手机端完全变成单列瀑布流重叠 */
        gap: 12px;
    }
    .zt-shop-list-item .item-pic {
        width: 100%;
        height: 160px;
    }
    .zt-shop-list-item .item-right-price {
        grid-column: span 1;
    }
    .zt-shop-list-item .item-body h3 {
        font-size: 16px;
    }
}

/* ==========================================================================
   ThinkPHP 标准分页样式修复
   ========================================================================== */
.zt-pages {
    text-align: center;
    padding: 30px 0;
    clear: both;
}

/* 兼容 ThinkPHP 默认生成的 ul.pagination 结构 */
.zt-pages ul.pagination {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    align-items: center;
    gap: 6px; /* 页码之间的间距 */
}

.zt-pages ul.pagination li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* 所有的基础页码、按钮样式 */
.zt-pages ul.pagination li a,
.zt-pages ul.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

/* 鼠标悬浮时的动态效果 */
.zt-pages ul.pagination li a:hover {
    color: #ff7a00;
    border-color: #ff7a00;
    background-color: #fff7ef;
}

/* 当前激活/选中的页码状态 (ThinkPHP 通常分配 .active 类名) */
.zt-pages ul.pagination li.active span,
.zt-pages ul.pagination li.active a {
    color: #fff !important;
    background: #ff7a00 !important;
    border-color: #ff7a00 !important;
    font-weight: bold;
    cursor: default;
}

/* 禁用状态的按钮（如在第一页时的“上一页”或最后一页时的“下一页”，通常包含 .disabled 类名） */
.zt-pages ul.pagination li.disabled span,
.zt-pages ul.pagination li.disabled a {
    color: #bbb !important;
    background: #f5f5f5 !important;
    border-color: #e8e8e8 !important;
    cursor: not-allowed;
}

/* 针对省略号 (...) 的特殊处理 */
.zt-pages ul.pagination li span.disabled-item,
.zt-pages ul.pagination li:contains('...') span {
    border: none;
    background: transparent;
    color: #999;
    cursor: default;
}

/* ==========================================================================
   移动端响应式页码优化
   ========================================================================== */
@media(max-width: 640px) {
    .zt-pages {
        padding: 20px 0;
    }
    .zt-pages ul.pagination {
        gap: 4px;
    }
    /* 移动端适当缩小页码尺寸，防止在一行装不下折行错乱 */
    .zt-pages ul.pagination li a,
    .zt-pages ul.pagination li span {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 13px;
    }
}


/* 新增：专门针对图片 Logo 的协调样式 */
.zt-logo img {
    display: block;
    max-height: 46px;    /* 限制最大高度，完美契合 72px 高度的 Header */
    width: auto;         /* 宽度根据高度等比例自适应，防止图片变形 */
    object-fit: contain; /* 确保图片完整包含在容器中 */
}

/* 兼容响应式：在窄屏/手机端时依旧保持比例协调 */
@media(max-width: 640px) {
    .zt-logo img {
        max-height: 38px; /* 移动端稍微缩小一点高度 */
    }
}