/* ZOPANI Categories — full width, flat arrows */
.zcat-wrap{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);   /* break out to full screen width */
	margin-right:calc(50% - 50vw);
	padding:24px 0;
	box-sizing:border-box;
	overflow:hidden;
}
.zcat-wrap *{box-sizing:border-box;}

/* track — single row, scrolls */
.zcat-track{
	display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
	scrollbar-width:none;-ms-overflow-style:none;
	padding:0 8px;
}
.zcat-track::-webkit-scrollbar{display:none;}

/* item */
.zcat-item{
	flex:0 0 auto;width:150px;
	display:flex;flex-direction:column;align-items:center;gap:12px;
	text-decoration:none;padding:8px 6px;
}
.zcat-img{width:120px;height:120px;display:flex;align-items:center;justify-content:center;}
.zcat-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.zcat-name{text-align:center;color:#374151;font-size:15px;font-weight:500;line-height:1.3;}

/* flat chevron arrows (no circle) */
.zcat-arrow{
	position:absolute;top:50%;transform:translateY(-50%);z-index:5;
	width:46px;height:64px;border:0;cursor:pointer;background:transparent;
	display:flex;align-items:center;justify-content:center;padding:0;
}
.zcat-arrow svg{width:30px;height:30px;}
.zcat-prev{left:2px;}
.zcat-next{right:2px;}

/* progress bar (mobile only) */
.zcat-progress{display:none;height:5px;background:#e9e9f3;border-radius:99px;margin:14px auto 0;width:140px;overflow:hidden;}
.zcat-progress-bar{display:block;height:100%;width:30%;background:var(--zh-primary,#6d28d9);border-radius:99px;transition:width .2s,margin-left .2s;}

/* ===== MOBILE: 2-row grid + progress bar ===== */
@media(max-width:820px){
	.zcat-wrap{padding:18px 0;}
	.zcat-arrow{display:none;}
	.zcat-track{
		display:grid;grid-auto-flow:column;
		grid-template-rows:1fr 1fr;
		grid-auto-columns:calc(25% - 8px);
		gap:18px 4px;overflow-x:auto;
		scroll-snap-type:x mandatory;padding:0 12px 4px;
	}
	.zcat-item{width:auto;scroll-snap-align:start;gap:8px;padding:4px 2px;}
	.zcat-img{width:74px;height:74px;}
	.zcat-name{font-size:12px;}
	.zcat-progress{display:block;}
}
@media(max-width:480px){
	.zcat-track{grid-auto-columns:calc(33.33% - 6px);}
	.zcat-img{width:68px;height:68px;}
}