/* Categories screen — mobile first. Colours come from the theme's own palette
   variables so the page inherits the brand instead of restating it. */

.yef-catalog {
	--yef-ink: var(--wp--preset--color--ink, #111);
	--yef-muted: var(--wp--preset--color--muted, #6E6E6E);
	--yef-line: var(--wp--preset--color--line, #EAEAEA);
	--yef-sand: var(--wp--preset--color--sand, #FAFAF9);
	--yef-accent: var(--wp--preset--color--accent, #66c7cc);
	direction: rtl;
}

/* ---- main category tabs ---- */
.yef-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 12px 16px;
	margin: 0 -16px;
	border-bottom: 1px solid var(--yef-line);
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
}
.yef-tabs::-webkit-scrollbar { display: none; }

.yef-tab {
	flex: 0 0 auto;
	border: 1px solid var(--yef-line);
	background: #fff;
	color: var(--yef-muted);
	border-radius: 999px;
	padding: 10px 20px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.yef-tab.is-active {
	background: var(--yef-ink);
	border-color: var(--yef-ink);
	color: #fff;
}

/* ---- subcategory chips ---- */
.yef-subs:empty { display: none; }
.yef-subs__scroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 14px 16px 4px;
	margin: 0 -16px;
}
.yef-subs__scroll::-webkit-scrollbar { display: none; }

.yef-sub {
	flex: 0 0 auto;
	border: 0;
	background: var(--yef-sand);
	color: var(--yef-muted);
	border-radius: 999px;
	padding: 8px 16px;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.yef-sub.is-active {
	background: color-mix(in srgb, var(--yef-accent) 14%, #fff);
	color: var(--yef-accent);
	box-shadow: inset 0 0 0 1px var(--yef-accent);
}

/* ---- toolbar ---- */
.yef-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 0 12px;
}
.yef-heading { font-size: 1.125rem; margin: 0; }
.yef-sort select {
	border: 1px solid var(--yef-line);
	border-radius: 6px;
	padding: 8px 10px;
	font: inherit;
	font-size: 0.8125rem;
	background: #fff;
	color: var(--yef-ink);
}

/* ---- products ---- */
.yef-products { min-height: 240px; transition: opacity .15s; }
.yef-products[aria-busy="true"] { opacity: .45; }

.yef-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@media (min-width: 700px) { .yef-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .yef-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.yef-card { display: block; text-decoration: none; color: inherit; }
.yef-card__img img { width: 100%; height: auto; border-radius: 8px; display: block; }
.yef-card__title { display: block; font-size: .875rem; margin-top: 8px; }
.yef-card__price { display: block; font-weight: 700; margin-top: 4px; }

.yef-more {
	display: block;
	width: 100%;
	margin: 24px 0;
	padding: 13px;
	border: 1px solid var(--yef-ink);
	background: #fff;
	color: var(--yef-ink);
	border-radius: 6px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.yef-empty {
	background: var(--yef-sand);
	border: 1px dashed var(--yef-line);
	border-radius: 10px;
	padding: 40px 20px;
	text-align: center;
	color: var(--yef-muted);
}

.yef-error {
	background: #fdeceb;
	color: #9a2f27;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 12px;
	font-size: .875rem;
}

/* ---- filters ---- */
.yef-filters {
	border: 1px solid var(--yef-line);
	border-radius: 10px;
	margin-top: 16px;
	background: #fff;
}
.yef-filters__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-size: .875rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.yef-filters__toggle::-webkit-details-marker { display: none; }
.yef-filters__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-inline-start: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(-45deg);
	margin-inline-start: auto;
	transition: transform .15s;
}
.yef-filters[open] .yef-filters__toggle::after { transform: rotate(135deg); }
.yef-filters__count {
	background: var(--yef-accent);
	color: #fff;
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	font-size: .6875rem;
	padding: 0 6px;
}
.yef-filters__form { padding: 0 16px 16px; border-top: 1px solid var(--yef-line); }
.yef-filters__actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.yef-filters__clear { font-size: .8125rem; color: var(--yef-muted); }

/* ---- category icons in the tabs and chips ---- */
.yef-tab { display: flex; align-items: center; gap: 8px; }
.yef-tab.has-icon { padding-inline-start: 8px; }
.yef-tab__icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--yef-sand);
}
/* The active tab is dark; a photo against it needs a hairline to stay separate. */
.yef-tab.is-active .yef-tab__icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

.yef-sub { display: inline-flex; align-items: center; gap: 6px; }
.yef-sub__icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

/* The banner is full-bleed while the page content is padded, so pull it back
   out to the viewport edges the way the homepage hero sits. */
.yef-catalog .y-hero {
	margin: 0 -16px 4px;
}
@media (min-width: 1024px) {
	.yef-catalog .y-hero { margin-inline: 0; border-radius: 10px; overflow: hidden; }
}