/* =========================================
SHOP CATEGORIES SECTION
========================================= */

.shop-categories-section {
background: #f0edeb;
color: #111;
padding: clamp(3.5rem, 7vw, 6rem) 1rem;
margin-bottom: 3rem;
}

.shop-categories-heading {
width: min(900px, 100%);
margin: 0 auto 2.5rem;
text-align: center;
}

.shop-categories-heading h2 {
margin: 0;
font-family: 'Pretzel', sans-serif;
font-size: clamp(2.5rem, 7vw, 6rem);
line-height: .9;
text-transform: uppercase;
font-weight: normal;
}

.shop-categories-heading p:last-child {
max-width: 640px;
margin: 1rem auto 0;
font-size: .95rem;
line-height: 1.7;
color: rgba(0,0,0,.62);
}

.shop-category-row {
width: min(1180px, 100%);
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(1rem, 2.5vw, 2rem);
flex-wrap: wrap;
}

.shop-category-bubble {
width: 200px;
text-align: center;
text-decoration: none;
color: #111;
}

.shop-category-bubble img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: fill;
border: 1px solid rgba(0,0,0,.14);
filter: grayscale(0%);
transition:
filter .35s ease,
transform .35s ease,
border-color .35s ease;
}

.shop-category-bubble span {
display: block;
margin-top: .75rem;
font-family: "Courier New", monospace;
font-size: .75rem;
letter-spacing: .16em;
text-transform: uppercase;
}

.shop-category-bubble:hover img {
filter: grayscale(100%);
border-color: #111;
}

.shop-category-bubble:hover span {
text-decoration: underline;
text-underline-offset: .35rem;
}

@media (max-width: 700px) {
.shop-category-row {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: .75rem;
scrollbar-width: none;
}

.shop-category-row::-webkit-scrollbar {
display: none;
}

.shop-category-bubble {
flex: 0 0 110px;
scroll-snap-align: start;
}

.shop-category-bubble img {
width: 110px;
height: 110px;
}
}