/** Shopify CDN: Minification failed

Line 202:24 Unexpected "{"
Line 202:33 Expected ":"
Line 310:22 Unexpected "{"
Line 310:31 Expected ":"

**/


/* CSS from section stylesheet tags */
.child-products--container {
position: relative;
}

@media only screen and (min-width: 769px) {
.color-selector-arrows--container-hidden {
display: none !important;
}

.product-nav-container {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
}

.carousel-spacer {
min-width: 0px; /* space at the end */
}

.scrollable-container {
overflow-x: auto;
scroll-behavior: smooth;
}

.scrollable-grid {
display: flex !important;
flex-wrap: nowrap;
flex: 0 0 auto; /* prevents shrinking */
}

.scrollable-grid .grid__item {
flex: 0 0 auto; /* prevents shrinking */
min-width: 250px !important; /* Ensure each item has a minimum width */
}

.product-grid-item {
flex: 0 0 auto; /* prevents shrinking */

}


.color-products-set.is-visible {
position: relative; /* instead of absolute */
opacity: 1;
visibility: visible;
}


.color-selector-arrows--container {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 4px;
}


.circle-arrow {
border-radius: 50%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.3);
background: #FFF;
transition: border-color 0.2s;
}

.circle-arrow svg {
width: 24px;
height: 24px;
fill: black;
fill-opacity: 1;
}

.circle-arrow:disabled {
cursor: not-allowed;
background: #F5F5F5;
border: none;
pointer-events: none;
}

.circle-arrow:disabled svg {
fill-opacity: 0.5;
}

.circle-arrow:hover {
background: #FFF;
border-color: #000;
}

.circle-arrow:hover svg {
fill-opacity: 1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollable-container::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollable-container {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;     /* Firefox */
}


}

.color-products-set {
/* Hide by default using opacity and positioning */
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: opacity 0.3s ease-in-out, visibility 0.3s;
z-index: 1;
}

.color-products-set.is-visible {
/* Show active set */
opacity: 1;
visibility: visible;
position: relative; /* Use relative to occupy space in the container */
z-index: 2;
}


.section-heading--container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}

.heading--title {
flex: 1 1 auto;
}
.heading--button {
transform: translateY(76px);
}

.img-container {
height: 88px;
width: 75px;
}

.color-button--container {
display: flex;
gap: 3px!important;
margin-bottom: 16px;

}

.color-button {
margin: 0!important;
padding: 0;

}

.color-button img {
height: 85px ;
width: 75px ;
object-fit: cover;
border-radius: 3px !important; /* Keep rounded corners on image */

}


.color-button.is-active img {
border-radius: 3px 3px 0 0 !important; /* Only round top corners when active */
box-shadow: 0 3px 0 0 black; /* Sharp rectangular shadow at bottom */
}




.color-button:not(.is-active) img:hover {
border-radius: 3px 3px 0 0 !important; /* Only round top corners on hover */
box-shadow: 0 3px 0 0 grey; /* Sharp rectangular shadow at bottom */
}



#DynamicSelectorButton-{{ section.id }} .btn--small{
padding-right: 17px !important;
padding-left: 17px !important;
padding-top: 9px !important;
padding-bottom: 9px !important;

white-space: nowrap;
}

.heading-section-title {
font-size: 14px!important;
text-transform: uppercase!important;
font-weight: 700!important;
letter-spacing: 0.3em!important;
margin-bottom:8px;
line-height: 18px;
}
.heading-section-text {
font-size: 10px!important;
text-transform: uppercase!important;
font-weight: 700!important;
letter-spacing: 0.3em!important;
margin-bottom:16px;
line-height: 13px;
}


@media only screen and (max-width: 768px) {


#grid-color-products,
.dynamic-max-width {
overflow-x: hidden !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}


.color-button--container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}


.color-button--container {
width: 100vw !important;
margin-left: 0 !important;
margin-right: 17px !important;
left: 0 !important;
transform: none !important;
overflow-x: auto;
position: relative;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.color-button--container .color-button:first-child {
margin-left: 17px !important;
}
.color-button--container {
padding-right: 17px !important;
padding-bottom:1px;
}
.color-button--container .color-button:last-child {
margin-right: 0 !important;
}

.color-button img{
height: 68px;
width: 58px;
object-fit: cover;
}

.img-container {
height: 68px;
width: 58px;
margin-bottom:2px;
}

.heading--button {
transform: translateY(-10px) !important;
margin-bottom: 10px;
white-space: nowrap;
}

.color-products-grid,
#grid-color-products,
.grid-overflow-wrapper {
width: 100vw !important;
max-width: 100vw !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
box-sizing: border-box;
overflow-x: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

#grid-color-products::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}


#ColorSelectorImages-{{ section.id }} :first-child {
margin-left: 0 !important;
}

#grid-color-products {
height: fit-content !important;
overflow-y: hidden;
}

.margin-bottom-small {
-webkit-overflow-scrolling: touch;
overflow: hidden;
overflow-x: scroll;
}

.color-button:not(.is-active) img:hover {
box-shadow: 0 1px 0 0 white; /* Sharp rectangular shadow at bottom */
}

.color-button.is-active img {
border-radius: 3px 3px 0 0 !important; /* Only round top corners when active */
box-shadow: 0 3px 0 0 black; /* Sharp rectangular shadow at bottom */
}
.carousel-spacer {
min-width: 17px; /* space at the end */
}

.product-nav-container {
display: none;
}

}