/* ==========================================================================
   store-index.css — Store home page (col-main product grid)
   Loaded by frontend/views/default/store/store.index.html
   Reuses design tokens from comments.css / left.css.
   All selectors use !important to override legacy shop.css (0,3,1+).
   ========================================================================== */

:root {
	/* Re-declare tokens so this file works standalone */
	--gi-bg:            #f7f7f8;
	--gi-surface:       #ffffff;
	--gi-line:          #ececef;
	--gi-line-strong:   #d9d9de;

	--gi-text-1:        #1a1a1a;
	--gi-text-2:        #555560;
	--gi-text-3:        #8a8a93;

	--gi-accent:        #28a271;
	--gi-accent-soft:   #b2efd7 ;
	--gi-accent-deep:   #28a271;

	--gi-success:       #28a271;
	--gi-warning:       #f0a040;

	--gi-fs-xs:         12px;
	--gi-fs-sm:         13px;
	--gi-fs-base:       14px;
	--gi-fs-md:         15px;
	--gi-fs-lg:         16px;
	--gi-fs-xl:         18px;

	--gi-r-1:           4px;
	--gi-r-2:           8px;
	--gi-r-3:           12px;
	--gi-r-4:           16px;
	--gi-r-5:           20px;

	--gi-radius-sm:     4px;
	--gi-radius:        8px;
	--gi-radius-lg:     12px;
	--gi-radius-pill:   999px;

	--gi-ease:          cubic-bezier(0.2, 0, 0, 1);
}

/* Local reset */
.gi-store,
.gi-store *,
.gi-store *::before,
.gi-store *::after { box-sizing: border-box !important; }

.gi-store {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	font-size: var(--gi-fs-base) !important;
	line-height: 1.55 !important;
	color: var(--gi-text-1) !important;
	min-height: 60vh !important;
	padding: var(--gi-r-4) 0 !important;
}

/* ==========================================================================
   1. Page wrapper & 2-column layout (flex)
   ========================================================================== */
#page-store-index { margin: 0 !important; padding: 0 !important; }

.gi-store .w-shop {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 20px !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 20px !important;
	/* 页面底色：暖灰渐变 + 顶部主题色光晕，让右侧商品列表卡片有"浮起"感 */
	background:
		radial-gradient(ellipse 800px 400px at 10% 0%, var(--gi-accent-soft) 0%, transparent 60%),
		linear-gradient(180deg, #f5f3f0 0%, #ebe8e3 100%) !important;
	border-radius: var(--gi-radius) !important;
}

.gi-store .col-sub {
	flex: 0 0 210px !important;                 /* 不收缩不增长，固定 210px */
	width: 210px !important;                    /* fallback */
	max-width: 210px !important;
	float: none !important;                     /* flex 容器内 float 被忽略，但显式置 0 防止 legacy 干扰 */
	margin: 0 !important;
	padding: 0 !important;
}
.gi-store .col-main {
	flex: 1 1 0 !important;                     /* 占据剩余空间 */
	min-width: 0 !important;                    /* 允许内容收缩（重要，避免被图片撑爆）*/
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   2. Product list section (.new-goods.goods-list-shop)
   ========================================================================== */
.gi-store .new-goods,
.gi-store .goods-list-shop {
	background: linear-gradient(180deg, #ffffff 0%, #fdfcfa 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-top: 3px solid var(--gi-accent) !important;
	border-radius: var(--gi-radius) !important;
	margin: 0 0 var(--gi-r-5) 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	width: auto !important;
	float: none !important;
	clear: both !important;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 4px 16px rgba(0, 0, 0, 0.06) !important;
	transition: box-shadow .2s var(--gi-ease), transform .2s var(--gi-ease) !important;
}
.gi-store .new-goods:hover,
.gi-store .goods-list-shop:hover {
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.05),
		0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Section title bar */
.gi-store .new-goods .title,
.gi-store .goods-list-shop .title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	background:
		linear-gradient(180deg, #fafafc 0%, var(--gi-bg) 100%) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--gi-line) !important;
	height: auto !important;
	min-height: 56px !important;
}
.gi-store .new-goods .title h3,
.gi-store .goods-list-shop .title h3 {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	font: 600 var(--gi-fs-lg) / 1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	color: var(--gi-text-1) !important;
	float: none !important;
}
.gi-store .new-goods .title h3::before,
.gi-store .goods-list-shop .title h3::before {
	content: "" !important;
	display: inline-block !important;
	width: 4px !important;
	height: 18px !important;
	background: var(--gi-accent) !important;
	border-radius: 2px !important;
}
.gi-store .new-goods .title a,
.gi-store .goods-list-shop .title a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: var(--gi-text-3) !important;
	font-size: var(--gi-fs-sm) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	float: none !important;
	transition: color .15s var(--gi-ease) !important;
}
.gi-store .new-goods .title a::after,
.gi-store .goods-list-shop .title a::after {
	content: "›" !important;
	font-size: 16px !important;
	line-height: 1 !important;
	transition: transform .15s var(--gi-ease) !important;
}
.gi-store .new-goods .title a:hover,
.gi-store .goods-list-shop .title a:hover {
	color: var(--gi-accent) !important;
	text-decoration: none !important;
}
.gi-store .new-goods .title a:hover::after,
.gi-store .goods-list-shop .title a:hover::after {
	transform: translateX(2px) !important;
}

/* Product grid (ul.content) */
.gi-store .new-goods .content,
.gi-store .goods-list-shop .content {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 1px !important;            /* 卡片之间用背景线分割 */
	margin: 0 !important;
	padding: 0 !important;
	/*background: var(--gi-line) !important;   !* 间隙色 = 边框色 *!*/
	border: 0 !important;
	list-style: none !important;
	float: none !important;
	width: auto !important;
	clear: none !important;
}

/* ==========================================================================
   3. Product card (li > dl)
   ========================================================================== */
.gi-store .new-goods .content li,
.gi-store .goods-list-shop .content li {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 16px !important;
	background: var(--gi-surface) !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: background .2s var(--gi-ease), transform .2s var(--gi-ease) !important;
}

.gi-store .new-goods .content li dl,
.gi-store .goods-list-shop .content li dl {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}

/* Product image (dt.border) */
.gi-store .new-goods .content li dt,
.gi-store .goods-list-shop .content li dt {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	background: var(--gi-bg) !important;
	border: 0 !important;
	border-radius: var(--gi-radius-sm) !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.gi-store .new-goods .content li dt a,
.gi-store .goods-list-shop .content li dt a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	text-decoration: none !important;
}
.gi-store .new-goods .content li dt img,
.gi-store .goods-list-shop .content li dt img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: transform .35s var(--gi-ease) !important;
}
.gi-store .new-goods .content li:hover dt img,
.gi-store .goods-list-shop .content li:hover dt img {
	transform: scale(1.06) !important;
}

/* Product name (dd.desc) */
.gi-store .new-goods .content li dd.desc,
.gi-store .goods-list-shop .content li dd.desc {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	height: 38px !important;        /* 固定 2 行高，避免网格行高抖动 */
}
.gi-store .new-goods .content li dd.desc a,
.gi-store .goods-list-shop .content li dd.desc a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	color: var(--gi-text-1) !important;
	font-size: var(--gi-fs-sm) !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: color .15s var(--gi-ease) !important;
}
.gi-store .new-goods .content li dd.desc a:hover,
.gi-store .goods-list-shop .content li dd.desc a:hover {
	color: var(--gi-accent) !important;
}

/* Price row (dd.price) */
.gi-store .new-goods .content li dd.price,
.gi-store .goods-list-shop .content li dd.price {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
}
.gi-store .new-goods .content li dd.price strong,
.gi-store .goods-list-shop .content li dd.price strong {
	flex: 0 0 auto !important;
	font: 700 var(--gi-fs-lg) / 1 var(--gi-accent) !important;
	color: var(--gi-accent) !important;
	font-variant-numeric: tabular-nums !important;
	letter-spacing: -0.3px !important;
}
.gi-store .new-goods .content li dd.price em,
.gi-store .goods-list-shop .content li dd.price em {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-style: normal !important;
	color: var(--gi-text-3) !important;
	font-size: var(--gi-fs-xs) !important;
	white-space: nowrap !important;
}
.gi-store .new-goods .content li dd.price em a,
.gi-store .goods-list-shop .content li dd.price em a {
	color: var(--gi-text-3) !important;
	text-decoration: none !important;
	transition: color .15s var(--gi-ease) !important;
}
.gi-store .new-goods .content li dd.price em a:hover,
.gi-store .goods-list-shop .content li dd.price em a:hover {
	color: var(--gi-accent) !important;
}

/* ==========================================================================
   4. Legacy "border" / "border-b" / "mb10" overrides (consistent with left.css)
   ========================================================================== */
.gi-store .border { border: 0 !important; }
.gi-store .border-b { border-bottom: 0 !important; }
.gi-store .mb10 { margin-bottom: 15px !important; }
.gi-store .float-left { float: none !important; }
.gi-store .float-right { float: none !important; }
.gi-store .w-full { width: auto !important; }
.gi-store .clearfix { clear: none !important; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.gi-store .w-shop { gap: 16px !important; }
	.gi-store .col-sub { flex-basis: 180px !important; max-width: 180px !important; width: 180px !important; }
	.gi-store .new-goods .content,
	.gi-store .goods-list-shop .content {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 900px) {
	.gi-store .w-shop {
		flex-direction: column !important;       /* 移动端：上下堆叠，左栏在上 */
		gap: var(--gi-r-4) !important;
		max-width: 100% !important;
		padding: 0 12px !important;
	}
	.gi-store .col-sub {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.gi-store .col-main {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	.gi-store .new-goods .content,
	.gi-store .goods-list-shop .content {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.gi-store .new-goods .content,
	.gi-store .goods-list-shop .content {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
		background: transparent !important;
	}
	.gi-store .new-goods .content li,
	.gi-store .goods-list-shop .content li {
		padding: 10px !important;
		border: 1px solid var(--gi-line) !important;
		border-radius: var(--gi-radius-sm) !important;
	}
	.gi-store .new-goods .title,
	.gi-store .goods-list-shop .title {
		padding: 10px 14px !important;
		min-height: 44px !important;
	}
	.gi-store .new-goods .title h3,
	.gi-store .goods-list-shop .title h3 {
		font-size: var(--gi-fs-md) !important;
	}
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.gi-store .new-goods .content li dt img,
	.gi-store .goods-list-shop .content li dt img,
	.gi-store .new-goods .title a::after,
	.gi-store .goods-list-shop .title a::after,
	.gi-store .new-goods .content li,
	.gi-store .goods-list-shop .content li,
	.gi-store .new-goods .content li dd.desc a,
	.gi-store .goods-list-shop .content li dd.desc a,
	.gi-store .new-goods .content li dd.price em a,
	.gi-store .goods-list-shop .content li dd.price em a {
		transition: none !important;
	}
}