.bag-categories{
	max-width: 1100px;
	margin: 0 auto 18px;
	position: relative; /* for fade edges overlays */
}
.bag-cat-scroller{
	display: grid;
	grid-auto-flow: column;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 6px 4px;
	max-height: 280px; /* ще трохи нижче загальної висоти */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: rgba(193,142,100,0.8) transparent; /* Firefox thumb & track */
	scroll-snap-type: x mandatory;
	scroll-padding: 4px;
	scroll-behavior: smooth;
	cursor: grab;
}
.bag-cat-scroller.centered{
	justify-content: center;
	overflow-x: hidden;
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: default;
}
.bag-cat-scroller.dragging{ cursor: grabbing; }
.bag-cat-scroller::-webkit-scrollbar{ height: 8px; }
.bag-cat-scroller::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #e5b88a, #b36f3f);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.6);
}
.bag-cat-scroller::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(90deg, #f0caa5, #c7804d);
}
.bag-cat-scroller::-webkit-scrollbar-track{ background: rgba(0,0,0,0.05); border-radius: 999px; }

/* Fade edges to hint scrollability */
.bag-categories::before,
.bag-categories::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 14px; /* leave space for scrollbar */
  width: 28px;
  pointer-events: none;
  z-index: 2;
}
.bag-categories.centered::before,
.bag-categories.centered::after{ opacity: 0; }
.bag-categories::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.bag-categories::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.bag-cat-card{
	width: 200px;
	text-decoration: none;
	color: #0f1724;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	scroll-snap-align: start;
}
.bag-cat-img{
	width: 200px;
	height: 200px;
	border-radius: 25px;
	overflow: hidden;
	background: #f7f7f7;
	border: 1px solid rgba(20,28,48,0.06);
	box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
.bag-cat-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bag-cat-title{
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.bag-cat-card:hover .bag-cat-img{
	box-shadow: 0 6px 18px rgba(16,24,40,0.10);
	transform: translateY(-2px);
	transition: transform 180ms ease, box-shadow 220ms ease;
}

@media (max-width: 640px){
	.bag-cat-scroller{ gap: 12px; padding: 6px 4px; }
}

/* Extra-compact layout for very small screens (<435px) */
@media (max-width: 435px){
	.bag-categories{ max-width: calc(100% - 16px); margin: 0 auto 12px; }
	.bag-cat-scroller{ gap: 10px; padding: 4px 2px; max-height: 240px; }
	.bag-cat-card{ width: 160px; }
	.bag-cat-img{ width: 160px; height: 160px; border-radius: 25px; }
	.bag-cat-title{ font-size: 13px; max-width: 160px; line-height: 1.15; }
	/* Subtle tweaks to fade overlays and scrollbar */
	.bag-categories::before,
	.bag-categories::after{ width: 22px; bottom: 12px; }
	.bag-cat-scroller::-webkit-scrollbar{ height: 6px; }
	.bag-cat-scroller::-webkit-scrollbar-thumb{ border-width: 1px; }
}

/* Ultra-compact layout for very small screens (<370px) */
@media (max-width: 370px){
	.bag-categories{ max-width: calc(100% - 12px); margin: 0 auto 10px; }
	.bag-cat-scroller{ gap: 8px; padding: 3px 2px; max-height: 220px; }
	.bag-cat-card{ width: 140px; }
	.bag-cat-img{ width: 140px; height: 140px; border-radius: 25px; }
	.bag-cat-title{ font-size: 12px; max-width: 140px; line-height: 1.12; }
	.bag-categories::before,
	.bag-categories::after{ width: 18px; bottom: 10px; }
	.bag-cat-scroller::-webkit-scrollbar{ height: 5px; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .bag-cat-scroller{ scroll-behavior: auto; }
}