/** Shopify CDN: Minification failed

Line 236:0 Unexpected "{"
Line 236:1 Expected identifier but found "%"
Line 236:23 Expected identifier but found "%"
Line 340:0 Unexpected "{"
Line 340:1 Expected identifier but found "%"
Line 340:23 Expected identifier but found "%"
Line 342:0 Unexpected "{"
Line 342:1 Expected identifier but found "%"
Line 342:19 Unexpected "3"
Line 342:22 Expected identifier but found "%"
... and 12 more hidden warnings

**/
.st-prod-image {
  width: 60px; 
  height: auto; 
}

.product-list {
  display: flex;
  flex-direction: column;
  max-height: calc(550px - 180px);
  margin: 0 2rem;
      overflow-x: hidden;
  overflow-y: scroll;
}

.product-list::-webkit-scrollbar {
  width: 0; 
  height: 0;
}

.product-list {
  scrollbar-width: none; 
}

.product-item {
  display: flex;
  align-items: center;
  background: #F8F7F3;
  box-shadow: 0px 3px 6px #00000015;
  border-bottom: 1px solid #00000015;
  gap: 10px;
    position:relative;
  width: 100%;
  cursor:pointer;
}


.product-image {
  flex-shrink: 0;
  max-width: 70px; 
  height: 70px;
}

.product-image img {
  width: 70px;
  object-fit: cover;
  height: 70px;
}

.product-title {
  flex-grow: 1;
  flex-direction:column;
  display:flex;
  font-size: 14px;
  font-family: var(--font-heading-family);
}

.product-title .sub-title-bottom {
  font-size: 1.4rem;
  font-family: var(--font-body-family);
}
.product-radio {
  flex-shrink: 0;
  accent-color: black;
}

.product-radio input[type="radio"] {
  margin-left: 10px;
  margin-right: 15px;
  cursor: pointer;
}

.configurator {
  background: #fdfcfc;
  padding: 2rem 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 450px;
  margin: auto;
  font-family: Arial, sans-serif;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.step-header {
  font-size: 1.6rem;
  display:flex;
  justify-content:space-between;
  margin-bottom: 2.4rem;
  align-items: center;
  padding: 0 2rem 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.step-subheader {
  padding: 0 2rem 2.4rem;
}

.main-option {
  gap: 0px !important;
  margin-bottom:20px;
}

.step-header .steps {
  font-size:1.2rem;
  letter-spacing:0;
  font-family: var(--font-body-family);
}

@media screen and (max-width: 749px) {
  .step-header .steps {
    display: none;
  }
}

.step-header .title {
   font-family: var(--font-heading-family);
   padding-right: 1rem;
   font-size: 1.8rem;
}

.step-option input {
  margin-right: 10px;
}

.step-option:last-child, .product-item:last-child {
    border: none;
}

.nav-buttons, .expert-btn {
  text-align: center;
  display: flex;
  width: 100%;
  gap: 1rem;
  margin-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn {
  padding: 10px 20px;
  flex: 1;
  letter-spacing: 1.32px;
  font-size: 1.2rem;
  color: #282828;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.configurator .button:after {
  display:none;
}

.next-btn {
  background-color: #FDFFBF;
}

.next-btn svg, #add-to-cart svg {
  width: 11px;
  height: 11px;
  right: 15px;
  position: absolute;
}

.prev-btn svg {
  width: 11px;
  height: 11px;
  left: 15px;
  position: absolute;
}

.prev-btn {
  background: transparent;
  border: 1px solid #0000001A !important;
}

.prev-btn:hover svg path {
  stroke: rgba(var(--color-secondary-button));
}

.btn:disabled {
  opacity:0.7;
  cursor: not-allowed;
  background:white;
  border:1px solid black;
}

.show-button {
  padding: 10px 20px;
  flex: 1;
  font-size: 13px;
  letter-spacing: 1.32px;
  color: #282828;
  text-transform: uppercase;
  border: none;
  background-color: #FDFFBF;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#add-to-cart {
  padding: 10px 20px;
  flex: 1;
  font-size: 13px;
  letter-spacing: 1.32px;
  color: #282828;
  text-transform: uppercase;
  border: none;
  background-color: #FDFFBF;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

{% comment %} VARIANT {% endcomment %}
 .smarte-prod-image {
  width: 60px; 
  height: auto; 
}

#variant-options {
  display: flex;
  flex-direction: column;
  max-height: calc(550px - 180px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 2rem;
}

#variant-options::-webkit-scrollbar {
  width: 0; 
  height: 0;
}

#variant-options {
  scrollbar-width: none; 
}

.step-option {
  display: flex;
  align-items: center;
    position:relative;
  border-bottom: 1px solid #00000015;
  gap: 10px;
  width: 100%;
}

.variant-group {
 margin-bottom:20px;
     width: 100%;
}

.variant-heading-group {
  font-family: var(--font-heading-family);
  font-size:14px;
  text-align:left;
  width:100%;
  margin-bottom:10px;
  font-weight:normal;
}

.variant-heading-group span {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

.variant-group .step-option {
  background: #F8F7F3;
    position:relative;
  cursor:pointer;
}

.item-with-bg {
  background: #F8F7F3;
}


.variant-image {
  flex-shrink: 0;
  max-width: 70px; 
  height: 70px;
}

.variant-image img {
  width: 70px;
  object-fit: cover;
  height: 70px;
}

.variant-title {
  flex-grow: 1;
  font-size: 14px;
  flex-direction:column;
  display:flex;
  font-family: var(--font-heading-family);
}

.variant-title .variant-group-label {
  font-family: var(--font-body-family);
}

.full-click {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 1; 
}

.variant-radio {
  flex-shrink: 0;
}

.variant-radio input[type="radio"] {
  margin-left: 10px;
}
{% comment %} VARIANT {% endcomment %}

{% comment %} STEP 3 {% endcomment %}
#leg-options {
  display: flex;
  flex-direction: column;
  max-height: calc(550px - 180px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 2rem;
}

#leg-options::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#leg-options {
  scrollbar-width: none;
}

.step-option {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #00000015;
  gap: 10px;
  width: 100%;
}

.leg-image {
  flex-shrink: 0;
  max-width: 70px;
  height: 70px;
}

.leg-image img {
  width: 70px;
  object-fit: cover;
  height: 70px;
}

.leg-title {
  flex-grow: 1;
  font-size: 14px;
  display:flex;
  flex-direction: column;
  font-family: var(--font-heading-family);
}

.small-text-step-three {
    font-size: 1.4rem;
  font-family: var(--font-body-family);
}
.product-radio {
  flex-shrink: 0;
}


.product-radio input[type="radio"] {
  margin-left: 10px;
}
{% comment %} STEP 3 {% endcomment %}

  {% comment %} STEP 4 {% endcomment %}
  #add-ons {
  display: flex;
  flex-direction: column;
  max-height: calc(550px - 180px);
  overflow-y: scroll;
  padding: 0 2rem;
}

#add-ons .product-item {
  flex-wrap:nowrap;
  position:relative;
  padding-bottom: 10px;
}

#add-ons ::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#add-ons  {
  scrollbar-width: none;
}

#add-ons input {
  background: transparent;
  text-align: center;
  height: 30px;
}

.step-option {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #00000015;
  gap: 10px;
  width: 100%;
}

.title-and-price {
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
}

.title-and-price span:last-of-type {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}
                      
{% comment %} STEP 4 {% endcomment %}

.product__info-wrapper .footer {
  box-shadow: 0px -3px 6px #0000000F;
  padding: 2rem 0 0;
  background: white;
}

.footer .price-item,
.footer .price-and-total {
  font-size: 20px;
  letter-spacing: -0.02rem;
  color: #282828;
  font-family: var(--font-heading-family);
}

.footer .price-and-total {
  padding-top: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.edit-addons-btn, .edit-btn-other {
  font-size: 12px;
  text-transform: capitalize;
  letter-spacing: 0;
  font-weight: bold;
  padding:0;
  text-decoration: underline;
  background: transparent;
  font-family: var(--font-heading-family);
}

.edit-addons-btn, .edit-btn-other {
    display: flex;
    justify-content: flex-end;
    margin-right:10px;
}

#summary {
  flex-direction: column;
  max-height: calc(550px - 180px);
  overflow-y: scroll;
  padding: 0 2rem;
  margin-bottom: 20px;
}


#summary::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#summary {
  scrollbar-width: none;
}
.chosen {
  display: flex;
  color: #282828;
  border-bottom: 1px solid rgba(112, 112, 112, .15);
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: var(--font-heading-weight);
  flex-direction:row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
}

.chosen span {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

    .chosen-content {
        display: none;
    }
    .chosen .selected-name {
      display:block;
    }

    .arrow {
        transition: transform 0.3s ease;
    }

    .chosen.open .arrow {
        transform: rotate(180deg);
    }

   .chosen.open {
     border: none;
   }

    .chosen.open + .chosen-content {
    text-align: left;
    font-size: 13px;
      flex-direction:column;
  border-bottom: 1px solid rgba(112, 112, 112, .15);
      margin-bottom:10px;
    font-weight: 400;
    color: #282828;
    display: flex;
    font-family: var(--font-heading-family);
    justify-content: flex-start;
    width: 100%;
    }

.quantity-selector {
  display: flex;
  width: 80px;
  max-width: 80px;
margin-right:5px;
  border: 1px solid #0000001A;
  justify-content: center;
  align-items: center;
}

.quantity-selector button {
flex: 1;
}

.quantity-selector input {
flex: 1;
margin:0;
-webkit-text-fill-color: #282828 !important;
}

.fixed-button { 
display:none;
}


/* Show the Customsizer button only on mobile */
  @media (max-width: 768px) {
    .customsizer-button {
      display: block !important; /* Show button on mobile */
      width: 100%;
    }

    /* Optionally hide the configurator on mobile by default, to be toggled with button */
    #configurator {
      display: none; /* Hide configurator initially on mobile */
     height: calc(var(--vh, 1vh) * 100) !important;
      z-index: 999;
      width: 100%;
      max-width: 100%;
      position: relative;
      pointer-events: auto;
    }
    .fixed-button {
      background: white;
      padding-top: 20px;
      padding-bottom: 20px;
      box-shadow: 0px 3px 6px #0000008c;
      display:block;
      position: fixed;
      bottom: 0px;
      z-index: 9999;
      margin-bottom: 10px;
      width: 100vw;
      margin: 0;
    }

    .fixed-button .price-and-total {
      font-size: 20px;
      margin-bottom:10px;
      color: #282828;
      font-family: var(--font-heading-family);
    }
    .close-btn {
      position: absolute;
      background: none;
      right: 20px;
      display:block;
      color: #2b2b2b !important;
      border: none;
      font-size: 20px;
    }
   .configurator .footer {
        position: absolute;
        width: 100%;
        bottom: 0px;
        z-index:5;
        background:white;
        padding-bottom: 30px;
        left: 0;
      }
    .product-list {
      height: auto !important;
    }
    .fullscreen-container {
      pointer-events: none;
    }
    .step-header {
      justify-content: flex-end;
      flex-direction: row-reverse;
      align-items: center;
      width: 100%;
    }
    .title-steps {
      text-align: center;
      flex: 1;
    }
  }

  /* Keep button hidden on desktop */
  @media (min-width: 769px) {
    .customsizer-button {
      display: none;  /* Hide the button on desktop */
    }
      .close-btn {
      display:none;
      }
    #configurator {
    display: block !important; /* Keep configurator visible */
  }

    .product-list, #variant-options, #leg-options, #add-ons, #summary {
      height:500px;
      border-bottom: none;
    }

    .step-block {
   background: #F8F7F3;
      box-shadow: 0px 3px 6px #00000015;
    }

  }

    .no-scroll {
    overflow: hidden;
  }

.footer__shipping-info {
  font-size: 1.2rem;
  font-family: var(--font-body-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.3rem 0 2.5rem;
}

.footer__shipping-info span {
  padding-left: 2rem;
  padding-right: 2rem;
}

.footer__shipping-info #variant-shipping-note {
  padding-right:0px;
  font-family: var(--font-body-family);
  font-weight: var(--font-heading-weight);
}

.footer__shipping-info a {
  color: inherit;
}

#hamburger, #close-config-btn {
  background: white;
  padding: 0;
  border: none;
  cursor: pointer;
}

.hamburger-icon {
  font-size:20px;
}

.hamburger-icon.svg-wrapper {
  max-width: 1.4rem;
  max-height: 1rem;
}

.customsizer-button.button:after {
  box-shadow: none;
}

.title-steps__container-two {
  display: flex;
  flex-direction: column;
}

.title-steps__container-two span:first-of-type {
  font-size: 1.6rem;
  letter-spacing: -0.016rem;
  font-family: var(--font-heading-family);
}

.title-steps__container-two span:last-of-type {
  font-size: 1.4rem;
  letter-spacing: -0.014rem;
  font-family: var(--font-heading-family);
}

.title-steps__container-two a {
  color: #282828;
}

.configurator .footer .footer__shipping-info span:first-of-type {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
}

.select-style-messaging {
  padding: 0 2rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.select-style-messaging .select-title {
  font-size: 1.6rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  display: flex;
  gap: 1rem;
  align-items: center;
}

.select-style-messaging .select-text {
  font-size: 1.4rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

.select-style-messaging .select-text a {
  color: #282828;
}

.select-title__info {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  background-color: #fdffbf;
  border-radius: 25px;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1;
}

.no-addons {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

#affirm-el {
  padding: 0 2rem;
  font-size: 1.4rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-heading-weight);
}

#affirm-el a {
  display:none;
}

@media screen and (max-width: 749px) {
  #affirm-el {
    padding: 0;
  }

  .step #affirm-el {
    padding: 0 2rem;
  }
}

.both-prices .compare-at-price {
  text-decoration: line-through;
    opacity: 1;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 20px;
    letter-spacing: -0.02rem;
    color: #282828;
    display: inline;
    font-family: var(--font-heading-family);
}

.has-compare-price .price-and-total  {
  color: #FF0000 !important;
}

.sale-note {
      display:block;
      padding-left: 2rem;
    padding-right: 2rem;
  width:100%;
    letter-spacing: -0.02rem;
    display: inline;
    font-family: var(--font-heading-family);
    font-size: 14px;
    color: #FF0000;
}