/* =========================================================
   ERA HERBAL — SHOP & GENERAL CSS
   ========================================================= */

/**
 * VX Shop Frontend CSS — grid, sidebar, cards, filters.
 * In WPCode: create a snippet of type "CSS Snippet" (not PHP), paste this body,
 * and set insert location to Site Head / frontend as WPCode recommends.
 */

/* ========== Theme Vars ========== */
:root{
	--vx-brand:#233F2E;
	--vx-hover:#FAA432;
	--vx-ink:#233F2E;
	--vx-muted:#6b8c79;
	--vx-border:#d9e2dc;
	--vx-bg:#ffffff;
	--vx-shadow:0 4px 18px rgba(0,0,0,.06);
	--vx-oos:#d40000;
}

/* ========== Base Typography ========== */
.vx-shop,
.vx-sidebar,
.vx-shop *,
.vx-sidebar *{
	font-family:"Archivo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
	letter-spacing:.1px;
	box-sizing:border-box;
}

.vx-shop,
.vx-sidebar{
	color:var(--vx-ink);
}

/* ========== Toolbar ========== */
.vx-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin:0 0 18px;
	background:#fff;
	border:1px solid var(--vx-border);
	border-radius:0;
	padding:10px 12px;
	box-shadow:var(--vx-shadow);
}

.vx-count{
	font-size:16px;
	color:#555;
}

.vx-sort select{
	min-width:240px;
	border:none !important;
	border-radius:0 !important;
	padding:8px 10px;
	background:#fff;
	box-shadow:none !important;
	color:var(--vx-ink);
}

/* ========== Grid ========== */
.vx-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:26px;
}

@media (max-width:1024px){
	.vx-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:640px){
	.vx-grid{
		grid-template-columns:1fr;
	}
}

/* ========== Cards ========== */
.vx-card{
	background:var(--vx-bg);
	border-radius:12px;
	padding:18px;
	box-shadow:var(--vx-shadow);
	display:flex;
	flex-direction:column;
	min-height:100%;
}

.vx-card .img,
.vx-latest-img{
	position:relative;
	display:block;
	overflow:hidden;
}

.vx-card .img{
	text-align:center;
	margin-bottom:12px;
}

.vx-card .img img{
	width:100%;
	height:230px;
	object-fit:cover;
}

.vx-sale{
	position:absolute;
	top:10px;
	right:10px;
	background:#ff5a5f;
	color:#fff !important;
	font-size:11px;
	padding:3px 7px;
	border-radius:4px;
	z-index:3;
}

.vx-oos{
	position:absolute;
	top:10px;
	left:10px;
	right:auto;
	transform:none;
	z-index:3;
	padding:4px 8px;
	text-align:center;
	background:#fff;
	border:1px solid var(--vx-oos);
	color:var(--vx-oos) !important;
	font-weight:700;
	font-size:11px;
	letter-spacing:.02em;
	text-transform:none;
	box-shadow:none;
	pointer-events:none;
}

.vx-latest-img .vx-oos{
	top:6px;
	left:6px;
	right:auto;
	font-size:10px;
	padding:3px 7px;
}

/* ========== Card Meta ========== */
.vx-cat{
	font-size:12px;
	margin-bottom:6px;
	display:block;
}

.vx-cat,
.vx-cat a{
	color:var(--vx-ink) !important;
	text-decoration:none;
}

.vx-cat a:hover{
	color:var(--vx-hover) !important;
}

.vx-title{
	color:var(--vx-ink);
	font-weight:600;
	margin:4px 0 6px;
	font-size:16px;
	line-height:1.3;
	display:block;
	text-decoration:none;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.vx-title:hover{
	color:var(--vx-hover);
}

.vx-price{
	font-weight:700;
	margin:4px 0 6px;
	color:var(--vx-ink);
}

.vx-price del{
	color:#999;
	margin-right:6px;
	font-weight:400;
}

.vx-rating{
	color:#ffb400;
	font-size:12px;
}

/* ========== Actions ========== */
.vx-actions{
	margin-top:auto;
}

.buy-now-btn{
	display:inline-block;
	padding:8px 14px;
	background-color:var(--vx-brand);
	color:#fff !important;
	text-align:center;
	font-weight:700;
	border-radius:0;
	text-decoration:none;
	transition:background-color .3s, color .3s, box-shadow .3s;
	margin-top:10px;
	border:none;
}

.buy-now-btn:hover{
	background-color:var(--vx-hover);
	color:#fff !important;
}

.buy-now-btn:focus{
	outline:none;
	box-shadow:0 0 0 3px rgba(255,165,50,.5);
}

.buy-now-btn.vx-disabled{
	display:inline-block;
	opacity:.55;
	pointer-events:none;
	cursor:not-allowed;
}

/* ========== Pagination ========== */
.vx-pagination{
	display:flex;
	gap:8px;
	justify-content:center;
	margin:26px 0 0;
}

.vx-pagination a,
.vx-pagination span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border:1px solid var(--vx-border);
	border-radius:0;
	background:#fff;
	cursor:pointer;
	text-decoration:none;
	color:var(--vx-ink);
}

.vx-pagination a:hover{
	border-color:var(--vx-hover);
	color:var(--vx-hover);
}

.vx-pagination .current{
	background:var(--vx-brand);
	color:#fff !important;
	border-color:var(--vx-brand);
}

.vx-pagination .vx-dots{
	display:inline-block;
	padding:0 8px;
	color:#333;
	border:none;
	background:transparent;
	pointer-events:none;
	width:auto;
}

/* ========== Sidebar ========== */
.vx-sidebar .vx-widget{
	background:transparent;
	border:none;
	border-radius:0;
	box-shadow:none;
	padding:0 0 18px;
	margin:0 0 18px;
}

.vx-sidebar .vx-widget h4{
	margin:0 0 12px;
	font-size:16px;
	font-weight:700;
	padding-bottom:6px;
	border-bottom:1px solid var(--vx-border);
	color:var(--vx-ink);
}

/* ========== Price Filter ========== */
#vx-price-wrap{
	margin-top:6px;
}

.vx-range{
	position:relative;
	height:8px;
	background:#e9f6ee;
	border-radius:999px;
	margin:6px 0 10px;
}

.vx-range .bar{
	position:absolute;
	height:8px;
	background:var(--vx-brand);
	border-radius:999px;
	left:0;
	right:0;
}

.vx-range input[type=range]{
	position:absolute;
	left:0;
	top:-6px;
	width:100%;
	pointer-events:none;
	background:transparent;
	-webkit-appearance:none;
	height:20px;
}

.vx-range input[type=range]::-webkit-slider-thumb{
	pointer-events:auto;
	-webkit-appearance:none;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#fff;
	border:2px solid var(--vx-brand);
	position:relative;
	z-index:1;
}

.vx-range input[type=range]::-webkit-slider-thumb:hover{
	border-color:var(--vx-hover);
}

.vx-range input[type=range]::-moz-range-thumb{
	pointer-events:auto;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#fff;
	border:2px solid var(--vx-brand);
	position:relative;
	z-index:1;
}

.vx-range input[type=range]::-moz-range-thumb:hover{
	border-color:var(--vx-hover);
}

.vx-price-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:10px;
	gap:12px;
}

#vx-price-label{
	font-size:14px;
	color:var(--vx-ink);
	margin-right:12px;
}

.vx-price-apply-btn{
	font-size:14px;
	background-color:var(--vx-brand);
	color:#fff !important;
	padding:8px 16px;
	border-radius:6px;
	border:none;
	cursor:pointer;
}

.vx-price-apply-btn:hover{
	background-color:#1C2C21;
	color:#fff !important;
}

/* ========== Categories ========== */
.vx-cats ul{
	list-style:none;
	margin:0;
	padding-left:0;
}

.vx-cats li{
	margin:10px 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
}

.vx-cats a{
	color:var(--vx-ink);
	text-decoration:none;
	position:relative;
	padding-left:18px;
	display:inline-block;
	width:calc(100% - 80px);
}

.vx-cats a:before{
	content:'';
	width:8px;
	height:8px;
	border-radius:50%;
	background:#cfd8d3;
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}

.vx-cats a:hover{
	color:var(--vx-hover);
}

.vx-cats a.active{
	color:var(--vx-brand);
	font-weight:600;
}

.vx-cats a.active:before{
	background:var(--vx-brand);
}

.category-count{
	font-size:12px;
	color:var(--vx-muted);
	text-align:right;
	width:60px;
	padding-left:10px;
	flex:0 0 60px;
}

/* ========== Latest Products ========== */
.vx-latest .item{
	display:flex;
	gap:10px;
	align-items:center;
	padding:8px 0;
	border-bottom:1px dashed var(--vx-border);
}

.vx-latest .item:last-child{
	border-bottom:0;
}

/* Wider thumb column + visible overflow so "OUT OF STOCK" is not clipped (shared .vx-latest-img uses overflow:hidden). */
.vx-latest .vx-latest-img{
	flex:0 0 104px;
	min-width:104px;
	max-width:104px;
	overflow:visible;
	display:flex;
	align-items:center;
	justify-content:center;
}

.vx-latest .item > a + div{
	flex:1 1 auto;
	min-width:0;
}

.vx-latest img{
	width:76px;
	height:76px;
	object-fit:contain;
	border-radius:6px;
	background:#fff;
}

.vx-latest a{
	color:#1f6f3f;
	text-decoration:none;
}

.vx-latest a:hover{
	color:var(--vx-hover);
}

.vx-latest .vx-price{
	font-weight:700;
	margin:4px 0 0;
}

/* ========== Tags ========== */
.vx-tags{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.vx-tag{
	border:1px solid var(--vx-border);
	border-radius:0;
	padding:6px 12px;
	font-size:12px;
	color:#333;
	background:#fff;
	text-decoration:none;
}

.vx-tag:hover{
	border-color:var(--vx-hover);
	color:var(--vx-hover);
}

.vx-tag.active{
	background:var(--vx-brand);
	color:#fff !important;
	border-color:var(--vx-brand);
}

/* ========== Product Tabs ========== */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
	border-radius:0 !important;
}

/* ========== Responsive ========== */
@media (max-width:1024px){
	.vx-shop,
	.vx-sidebar{
		padding-left:15px;
		padding-right:15px;
	}
}

@media (max-width:640px){
	.vx-sort select{
		width:auto;
		max-width:180px;
	}

	.vx-count{
		padding-left:13px;
	}

	.vx-toolbar{
		flex-direction:column;
		align-items:flex-start;
		gap:8px;
	}

	.vx-price-row{
		flex-direction:column;
		align-items:flex-start;
	}

	.vx-cats a{
		width:auto;
		flex:1 1 auto;
	}
}


/* General Layout Helpers */
.parent-overflow{
overflow: visible;
}
.sidebar-sticky {
position: sticky;
top: 100px; /* 距离页面顶部 100px，可以根据你的Header高度调整 */
align-self: flex-start; /* 确保在flex布局下对齐 */
}