/** Shopify CDN: Minification failed

Line 278:14 Unexpected "{"
Line 278:23 Expected ":"
Line 278:30 Unexpected "{"
Line 279:20 Expected identifier but found whitespace
Line 279:22 Unexpected "{"
Line 279:31 Expected ":"
Line 279:66 Expected ":"
Line 280:23 Expected identifier but found whitespace
Line 280:25 Unexpected "{"
Line 280:35 Expected ":"
... and 15 more hidden warnings

**/
.color-swatches {
  display: flex;
  gap: 4SSpx;
  align-items: center;
}

.material-variants {
  display: flex;
  gap: 8px;
  align-items: center;
margin-top:4px;
}

.material-option {
  cursor: pointer;
  position: relative;
}

.material-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.color-swatches {
    display: flex;
    gap: 6px;
}

.color-circle {
  display: block;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  border: 0px solid transparent;
  transition: border 0.25s ease;
}

/* ✅ SINGLE SOURCE OF TRUTH */
.material-option.is-active .color-circle {
  border-color: #000;
}
label.material-option.is-active {
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 2px white, 0 0 0 3px black;
}
.material-radio:disabled + .color-circle {
  opacity: 0.4;
  cursor: not-allowed;
}

.material-name-display {
  font-weight: 500;
  font-size: 16px;
}
.quick-add-mobile .csp-add-btn:before {
    display:none;
}



.quick-add-mobile .csp-add-btn {
     color: #fff !important;
    text-align: center !important;
    font-family: "Brown ll" !important ;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: flex;
    padding: 8px 22px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 60px !important;
    border: 1px solid rgba(0, 0, 0, 0.50) !important;
    background: #000000 !important;
    width:100% !important;
    max-height: 38px !important;
    min-height: 38px;

}


.cs-colllections .csp-add-btn .main-atc__label__text {
    color: #000 !important;
    text-align: center;
    font-family: "Brown ll" !important;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

 .collection-quick-add:after, .csp-add-btn:after, .collection-quick-add:before {
       display:none;
  }



.cs-colllections .card__media {
  position: relative;
  min-width: 100%;
}

/* Hide by default */
.cs-colllections .custom-variant-quick-add {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cs-colllections .custom-variant-quick-add .quick-add__submit {
    background: white !important;
    border: 0px !important;
    line-height:0 !important;
    padding: 0px;
    width: 32px;
    height: 32px;
    display: block;
    min-width: 32px;
    min-height: 32px;
}
.cs-colllections .custom-variant-quick-add .quick-add__submit svg {
  height:16px;
  width:16px;
}
.cs-colllections .custom-variant-quick-add .quick-add__submit {
  transition: background-color 0.3s ease;
}

.cs-colllections .custom-variant-quick-add .quick-add__submit svg path {
  stroke: #000;
  transition: stroke 0.3s ease;
}

.cs-colllections .custom-variant-quick-add .quick-add__submit:hover {
  background-color: #000 !important;
}

.cs-colllections .custom-variant-quick-add .quick-add__submit:hover svg path {
  stroke: #fff;
}

@media (hover: hover) {
     .action-btns--center button.button:not([disabled],[disabled=true],.button--tertiary):before {
      display:none;
    }
}

/* Show on hover */
.product-card:hover .custom-variant-quick-add {
  opacity: 1;
  visibility: visible;
}

.cs-colllections  .card__heading a:after {
    display:none;
}
/* Button styling (unchanged) */
.shop-collections .product-form__buttons {
  width: 100%;
  display:unset;
}


.cs-quick-add .collection-quick-add {
    display: flex;
    padding: 0px;
    justify-content: center;
    align-items: center;
    border-radius: 50% !important;
    border: 0px solid #000;
    background: white !important;
    width: 32px !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px !important;
    height: auto;
    padding: 0 !important;
}
.cs-colllections .custom-variant-quick-add .quick-add__submit,
.cs-quick-add .collection-quick-add {
  transition: background-color 0.3s ease;
}

.cs-colllections .custom-variant-quick-add .quick-add__submit svg path,
.cs-quick-add .collection-quick-add svg path {
  stroke: #000;
  transition: stroke 0.3s ease;
}

.cs-colllections .custom-variant-quick-add .quick-add__submit:hover,
.cs-quick-add .collection-quick-add:hover {
  background-color: #000 !important;
}

.cs-colllections .custom-variant-quick-add .quick-add__submit:hover svg path,
.cs-quick-add .collection-quick-add:hover svg path {
  stroke: #fff;
}

.cs-colllections .collection-quick-add .main-atc__label__text {
   font-family: "Brown ll" !important;
     font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px;
  letter-spacing: 0.4px;
  text-transform: capitalize;
}
.cs-colllections .csp-add-btn .main-atc__label__text {
    color: #000 !important;
    text-align: center;
    font-family: "Brown ll" !important;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.quick-add-mob {
   display:none;
}
.quick-add-mobile .csp-add-btn {
     color: #fff !important;
    text-align: center !important;
    font-family: "Brown ll" !important ;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: flex;
    padding: 8px 22px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 60px !important;
    border: 1px solid rgba(0, 0, 0, 0.50) !important;
    background: #000 !important;
    width:100% !important;
    max-height: 38px !important;
    min-height: 38px;

}

    .shop-collections {
      transition: all 0.4s ease;
    }
    #section-{{ section.id }} {
        padding-top: {{ section.settings.padding_top_desktop  }}px;
        padding-bottom: {{  section.settings.padding_bottom_desktop  }}px;
        background: {{ section.settings.cs_background }};
    }
    .collection-quick-add:after, .csp-add-btn:after {
       display:none;
    }

    @media (max-width: 767px) {
      #section-{{ section.id }} {
        padding-top: {{ section.settings.padding_top_mobile }}px !important;
        padding-bottom: {{ section.settings.padding_bottom_mobile }}px !important;
      }
      .pdp-card  .quick-add-mobile {
        display:block;
        margin:12px 0 0;
        width:100%;
      }
      .product-card:hover .custom-variant-quick-add {
          opacity: 0;
          visibility: hidden;
      }
      .cs-colllections .card__media {
          position: unset;
          min-width: unset;
      }
      .card__heading a {
          color: #000;
          font-size: 14px !important;
          font-style: normal;
          font-weight: 500;
          line-height: 16px; /* 114.286% */
          letter-spacing: 0.197px;
          min-height:35px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
      }
      .pdp-card .cs_card__content {
         padding:12px 8px !important;
      }
      .price__regular {
        line-height:0px !important;
      }

}





.quick-add-mob {
  display:none;
}

@media (max-width:786px) {
  .quick-add-mob {
  display:block;
}
.quick-add-mob .cs-quick {
  border:1px solid #00000080;
  font-size:14px !important;
  margin-top: 12px;
  padding:0;
  font-weight: 400 !important;
}
  .color-circle {
     width:12px !important;
     height:12px !important;
  }
  .selected-material-name {
    color: #000;
    font-family: "Gill Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px; /* 163.636% */
    letter-spacing: 0.4px;
  }
  .cs_card__content  .material-variants {
    display: flex;
    gap: 8px;
    min-height:17px;
    margin-top:10px !important;
    
  }
  .material-variants {
    display: flex;
    gap: 8px;
    min-height:17px;
    
  }
  .material-option.is-active .color-circle {
    width:16px !important;
    height:16px !important;
  }
}


.color-circle {
  position: relative; /* always relative for ::after */
  border-radius: 50%;
}

.material-option.is-active .color-circle::after {
  content: "";
  position: absolute;
  inset: -4px; /* outline around circle */
  border-radius: 50%;
  border: 2px solid #000;
  background: #fff; /* optional, maybe remove if you want circle color visible */
  z-index: -1;
  display:none;
}


@media (max-width:786px) {

   .material-option.is-active .color-circle {
        width: 13px !important;
        height: 13px !important;
        margin-left:0px;
    }
    .material-option.is-active .color-circle::after {
      display:none;
              content: "";
              position: absolute;
              inset: -3px;
              border-radius: 50%;
              border: 1.5px solid #000;
              background: #fff;
              z-index: -1;
    }


  

}