/*!
 * Vendor category box — pre-archive header card.
 * Reference: handover/components/components-vendor-category-box.html
 *
 * Resolves --bf-* tokens from baly-food-tokens.css (loaded as a dep).
 */

.baly-catbox{
	background:var(--bf-white);
	border:1px solid var(--bf-border);
	border-radius:var(--bf-radius-2xl);
	box-shadow:0 1px 3px rgba(10,10,10,.04), 0 1px 2px rgba(10,10,10,.03);
	margin:0 0 1rem;
	overflow:hidden;
	font-family:var(--bf-font);
	color:var(--bf-fg);
	direction:rtl;
}
.baly-catbox .bx{
	padding:36px 40px;
	display:flex;
	flex-direction:column;
	gap:14px;
}

/* Headline — brand-blue, heavy weight */
.baly-catbox .title{
	margin:0;
	font-family:var(--bf-font);
	font-weight:900;
	font-synthesis:none;
	font-size:28px;
	line-height:1.2;
	letter-spacing:-.01em;
	color:var(--bf-brand);
}

/* Body copy */
.baly-catbox .desc{
	margin:0;
	color:var(--bf-grey-700);
	line-height:1.6;
	font-size:15px;
	font-weight:400;
}

/* Value chips — pill row, optionally horizontal-scroll on mobile */
.baly-catbox .vals{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:8px;
}
.baly-catbox .chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:var(--bf-white);
	border:1px solid var(--bf-border);
	border-radius:var(--bf-radius-pill);
	padding:10px 18px;
	color:var(--bf-fg);
	font-size:13px;
	font-weight:600;
	white-space:nowrap;
	transition:border-color .12s var(--bf-ease-out), background .12s var(--bf-ease-out);
}
.baly-catbox .chip:hover{
	border-color:var(--bf-grey-300);
	background:var(--bf-grey-50);
}
.baly-catbox .chip .ic{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:0;
	flex:none;
	color:var(--bf-brand);
}
.baly-catbox .chip .ic-img{
	display:block;
	width:18px;
	height:18px;
	object-fit:contain;
}

/* Tablet */
@media (max-width:1024px){
	.baly-catbox .bx{ padding:28px; gap:12px; }
	.baly-catbox .title{ font-size:24px; }
	.baly-catbox .desc{ font-size:14px; }
}

/* Mobile — compact treatment to keep the box short.
   Smaller chips + tighter padding/gap + tighter margin-bottom,
   plus values overflow-scroll for cramped widths. */
@media (max-width:520px){
	.baly-catbox{ margin:0 0 .5rem; }
	.baly-catbox .bx{ padding:14px 16px; gap:6px; }
	.baly-catbox .title{ font-size:17px; line-height:1.25; }
	.baly-catbox .desc{ font-size:12px; line-height:1.5; }
	.baly-catbox .vals{
		flex-wrap:nowrap;
		overflow-x:auto;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		margin:4px -16px 0;
		padding:0 16px 2px;
		gap:8px;
	}
	.baly-catbox .vals::-webkit-scrollbar{ display:none; }
	.baly-catbox .chip{
		flex:none;
		padding:6px 11px;
		gap:6px;
		font-size:11px;
	}
	.baly-catbox .chip .ic-img{ width:14px; height:14px; }
}