.custom-category-scroll-wrapper {
position: relative;
display: flex;
align-items: center;
margin: 1rem 0;
overflow: hidden;
}
.horizontal-scroll {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
list-style: none;
margin: 0;
padding: 1rem 2rem;
gap: 1rem;
scrollbar-width: none; }
.horizontal-scroll::-webkit-scrollbar {
display: none;
}
.horizontal-scroll li.product-category {
flex: 0 0 auto;
overflow: hidden;
background: #fff;
padding: 0px;
border-radius: 10px;
text-align: center;
width: 140px;
transition: transform 0.2s ease;
box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.horizontal-scroll li.product-category:hover {
transform: scale(1.05);
}
.horizontal-scroll li.product-category img {
width: 100%;
height: 80px;
object-fit: cover;
}
.horizontal-scroll li.product-category span.cat-title {
display: block;
font-size: var(--font-h6);
color: var(--grey-main);
font-weight: 600;
padding: 5px;
overflow-wrap: break-word;
word-break: break-word;
line-height:1;
}
.scroll-arrow {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
background: #fff;
border: none;
box-shadow: 0px 0px 3px rgba(0,0,0,.1);
font-size: var(--font-h6);
padding: 5px 10px;
cursor: pointer;
border-radius: 6px;
transition: background 0.3s;
}
.scroll-arrow:hover {
background: #eee;
}
.scroll-arrow.left {
left: 0;
}
.scroll-arrow.right {
right: 0;
}
.category-fallback {
width: 100%;
height: 80px;
background: linear-gradient(135deg, #e2001a, #05163C);
position: relative;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
} .letter-circle {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #333;
font-size: 18px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}