/* Zestora - Category Strip
   Full-width category band: brand-brown ground, rounded-square thumbnails,
   a soft cream card on hover / active, ten categories across on desktop. */

.zcs {
	--zcs-bg: #A03A13;
	--zcs-bg-deep: #7C2A0C;
	--zcs-surface: #FFFFFF;
	--zcs-cream: #F3E9D6;
	--zcs-ink: #241813;
	--zcs-accent: #A03A13;
	--zcs-border: rgba(255, 255, 255, 0.22);

	/* hover / active card */
	--zcs-card: #F3E9D6;
	--zcs-card-ink: #7C2A0C;

	--zcs-thumb: 60px;
	--zcs-thumb-w: 68px;
	--zcs-radius: 50%;
	--zcs-card-radius: 16px;
	--zcs-pad-y: 14px;
	--zcs-gap: 8px;
	--zcs-per: 10;

	position: relative;
	z-index: 20;
	width: 100%;
	background: var(--zcs-bg);
	border-bottom: 1px solid var(--zcs-bg-deep);
}

/* ---------- sticky ---------- */
.zcs--sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--zcs-sticky-top, 0px);
}

.zcs--sticky.is-stuck {
	box-shadow: 0 6px 18px rgba(36, 24, 19, 0.22);
}

/* ---------- layout ---------- */
.zcs__inner {
	position: relative;
	max-width: none;
	margin: 0;
	padding: var(--zcs-pad-y) 56px;
	display: flex;
	align-items: stretch;
}

.zcs__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: var(--zcs-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex: 1 1 auto;
	min-width: 0;
}

.zcs__track::-webkit-scrollbar {
	display: none;
}

/* exactly --zcs-per items fill the visible track */
.zcs__item {
	flex: 0 0 calc((100% - (var(--zcs-per) - 1) * var(--zcs-gap)) / var(--zcs-per));
	scroll-snap-align: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- item ---------- */
.zcs__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 10px 8px 12px;
	border: 0;
	border-radius: var(--zcs-card-radius);
	background: transparent;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.zcs__link:hover,
.zcs__link:focus-visible {
	text-decoration: none;
}

/* the card: same treatment for hover, keyboard focus and the active item */
.zcs__link:hover,
.zcs__link:focus-visible,
.zcs__item.is-active .zcs__link {
	background: var(--zcs-card);
}

.zcs__link:focus-visible {
	outline: 2px solid var(--zcs-cream);
	outline-offset: 2px;
}

/* ---------- thumbnail: rounded square ---------- */
.zcs__icon {
	display: block;
	width: var(--zcs-thumb-w);
	max-width: 100%;
	height: var(--zcs-thumb-w);
	border-radius: var(--zcs-radius);
	overflow: hidden;
	background: var(--zcs-surface);
	box-shadow: inset 0 0 0 1px var(--zcs-border);
	flex: 0 0 auto;
	transition: box-shadow .18s ease;
}

.zcs__icon img,
.zcs__icon svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: var(--zcs-radius);
}

.zcs__link:hover .zcs__icon,
.zcs__link:focus-visible .zcs__icon,
.zcs__item.is-active .zcs__icon {
	box-shadow: inset 0 0 0 1px rgba(124, 42, 12, 0.14);
}

/* ---------- label ---------- */
.zcs__label {
	font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: #FFFFFF;
	transition: color 0.18s ease;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.zcs__link:hover .zcs__label,
.zcs__link:focus-visible .zcs__label,
.zcs__item.is-active .zcs__label {
	color: var(--zcs-card-ink);
}

/* ---------- arrows ---------- */
.zcs__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	/* theme/builder button styles isay override kar rahe the - is liye !important */
	background: var(--zcs-surface) !important;
	background-color: var(--zcs-surface) !important;
	color: var(--zcs-accent) !important;
	box-shadow: 0 2px 8px rgba(36, 24, 19, 0.25);
	cursor: pointer;
	transition: background-color 0.15s linear, color 0.15s linear, transform 0.15s ease;
}

.zcs__nav svg {
	width: 17px;
	height: 17px;
}

.zcs__nav svg path {
	stroke: currentColor !important;
}

.zcs__nav:hover {
	background: var(--zcs-cream) !important;
	background-color: var(--zcs-cream) !important;
	color: var(--zcs-bg-deep) !important;
	transform: translateY(-50%) scale(1.06);
}

.zcs__nav:focus-visible {
	outline: 2px solid var(--zcs-cream);
	outline-offset: 2px;
}

.zcs__nav--prev {
	left: 12px;
}

.zcs__nav--next {
	right: 12px;
}

.zcs__nav[hidden] {
	display: none;
}

/* fade edges so items read as scrolling under the arrows */
.zcs__inner::before,
.zcs__inner::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 52px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.15s linear;
}

.zcs__inner::before {
	left: 0;
	background: linear-gradient(90deg, #A03A13 45%, rgba(160, 58, 19, 0));
}

.zcs__inner::after {
	right: 0;
	background: linear-gradient(270deg, #A03A13 45%, rgba(160, 58, 19, 0));
}

.zcs.can-prev .zcs__inner::before,
.zcs.can-next .zcs__inner::after {
	opacity: 1;
}

/* ---------- empty state (admin only) ---------- */
.zcs__empty {
	margin: 0;
	padding: 16px 56px;
	font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	color: var(--zcs-cream);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.zcs {
		--zcs-per: 8;
	}
}

@media (max-width: 900px) {
	.zcs {
		--zcs-per: 6;
		--zcs-pad-y: 12px;
		--zcs-thumb: 56px;
		--zcs-thumb-w: 64px;
	}
}

@media (max-width: 700px) {
	.zcs {
		--zcs-per: 4.4;
		--zcs-thumb: 52px;
		--zcs-thumb-w: 58px;
		--zcs-gap: 6px;
	}

	.zcs__inner {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* swiping is the natural gesture on touch, so the arrows come off */
	.zcs__nav {
		display: none !important;
	}

	.zcs__inner::before,
	.zcs__inner::after {
		width: 24px;
	}
}

@media (max-width: 460px) {
	.zcs {
		--zcs-per: 3.4;
		--zcs-thumb: 48px;
		--zcs-thumb-w: 52px;
	}

	.zcs__label {
		font-size: 10px;
		letter-spacing: 0.04em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zcs__track {
		scroll-behavior: auto;
	}

	.zcs__link,
	.zcs__label,
	.zcs__nav,
	.zcs__icon,
	.zcs__inner::before,
	.zcs__inner::after {
		transition: none;
	}
}