/** Shopify CDN: Minification failed

Line 97:24 Unexpected "{"
Line 97:33 Expected ":"
Line 123:0 Unexpected "{"
Line 123:1 Expected identifier but found "%"
Line 130:1 Expected identifier but found "%"
Line 213:22 Unexpected "{"
Line 213:31 Expected ":"

**/


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

.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;
overflow-x: scroll;

}

.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;
}

{% comment %}


Mobile Below Here



{% endcomment %}

@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;
margin-bottom: -20px;
}

.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 */
}

}