/** Shopify CDN: Minification failed

Line 395:0 Unexpected "{"
Line 395:1 Expected identifier but found "%"
Line 395:14 Comments in CSS use "/* ... */" instead of "//"
Line 395:60 Expected identifier but found "%"
Line 435:0 Unexpected "{"
Line 435:1 Expected identifier but found "%"
Line 435:14 Comments in CSS use "/* ... */" instead of "//"
Line 435:54 Expected identifier but found "%"
Line 472:0 Unexpected "{"
Line 472:1 Expected identifier but found "%"
... and 5 more hidden warnings

**/
xo-product-will-change {
    display: none;
}
/* ---------Quantity code ------------ */

custom-widget#esa__custom-widget {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: 0;
    color: #333;
    /* font-weight: 600; */
    letter-spacing: 0;
    margin: 2rem 0;
}

.qty-option-container {
    margin:15px 0 25px
}

.qty-option-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 15px;
}

button.qty-option-label {
    display: flex;
    width: calc(33.33% - 5.4px);
    cursor: pointer;
    border-radius: 15px;
    border: none;
}

.qty-option-input {
    display: none;
}

.qty-option-input:checked+.qty-option-content {
    border: 1px solid #579c6b;
    background-color: #daedd9;
}

.qty-option-content {
    width: 100%;
    text-align: center;
    border-radius: 3px;
    /* border: 1px solid #C4C4C4; */
    /* padding: 15px 10px; */
    height:65px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.qty-option-text {
    font-weight: 600;
    font-size: 18px;
    line-height: 14px;
    text-align: center;
    display: block;
}

.qty__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translate(-50%);
    line-height: 13px;
    letter-spacing: .8px;
    text-transform: capitalize;
    width: max-content;
    background-color: #215b32;
    color: #fff;
    padding:5px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
span.qty-option-text-save {
    /* font-size: 12px; */
    /* font-weight: 200; */
}
.variant-item {
    font-size:16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
      /* padding: 1.2rem; */
      padding: 0 24px;
        height: 55px;
    border-radius: 15px;
    border: 1px solid rgb(0, 0, 0);
        font-weight: 600;
    color: #000;
}
.variant-item.active {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 1.2rem; */

        height:55px;
    border-radius: 15px;
  border-color: #0056ff;
    background-color: #ebf2ff;
}

.qty-box button {
    padding: 1.2rem 16px;
    border-radius: 15px;
    border-color: 
    color-mix(in srgb, rgba(var(--color-border)) 100%, transparent);
    background-color: 
    color-mix(in srgb, rgba(var(--color-button-background)) 100%, transparent);
}

span.qty {
    margin: 0px 8px;
}
/* ---------Quantity code ------------ */

/* ---------Subscription code ------------ */

label.subscription-option {
    display: block;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    /* padding: 15px; */
}

.subscription-option input:checked+.box-style {border-color: #215b32;background-color: #daedd9;}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;
}

.option-title_radio {
    display: flex;
    justify-content: flex-start;
    column-gap: 10px;
}

.subscription-option input:checked+.box-style .custom-radio {
    border-color: #215b32;
}

.subscription-option input:checked+.box-style .custom-radio:after {}

span.custom-radio1 {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1px solid #C4C4C4;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-option input:checked+.box-style {
    border-color: #215b32;
    background-color: #daedd9;
}

.box-style {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .3s ease;
    border-radius: 15px;
    border: 
2px solid color-mix(in srgb, rgba(var(--color-border)) 100%, transparent);
    /* background-color: 
color-mix(in srgb, rgba(var(--color-button-background)) 100%, transparent); */
}

.box-style.active {

     background-color: 
color-mix(in srgb, rgba(var(--color-button-background)) 100%, transparent);
}


.subscription-header.subscription-head-main
 {
    padding: 15px;
    border-bottom: 1px solid #bfbfbf;
}
label.subscription-option.subscription-head-main-1 {
    /* border-bottom: 1px solid #bfbfbf; */
    margin: 15px;
    /* padding: 0px 0px 15px 0px;  */
}
label.subscription-option.subscription-head-main-2 {
    /* border-bottom: 1px solid black; */
    margin: 15px;
    /* padding: 0px 0px 15px 0px; */
}
.extra-info ul li:before {
    content: "✓";
    margin-top: 2px;
}

.extra-info ul li {
    list-style: none;
    display: flex;
    gap: 5px;
}
.extra-info ul {
    padding: 0;
    margin-top: 10px;
     margin-bottom: 0px;
}
.extra-info {
    /* margin-left: 35px; */
    margin-top: 10px;
    color: black;
    font-weight: 500;
}
.one-time-box.box-style {
    padding: 15px;
}


.subscription-option input[type="radio"]:checked 
  ~ .extra-info {
  display: block;
}
button.qty-option-label.active {
       background: #0056ff;
    color: white;
}
/* ---------Subscription code ------------ */


.qty-option-label.active-pack {
  background-color: red;
  color: #fff;
  border-color: red;
}

.qty-option-label.active-pack .qty-option-text,
.qty-option-label.active-pack .qty-option-text-save {
  color: #fff;
}
.qty-box {
    align-items: center;
}
button.minus, button.plus {background: #0056ff;color: #fff;border: none;}
button.plus[disabled],button.minus[disabled] {
    background: #d8d8d8b3;
}
.subscription-container {
    margin-top: 25px;
}


button.xo-visually-hidden.adc-custombutton{
    width: 50%;
    height: 55px;
    position: initial !important;
    background: #0056ff;
}

.xo-product-info__button {
    display: none;
}
span.discount-badge {
    background: #0056ff;
    color: #fff;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 15px;
}

span.price {
    display: flex;
    gap: 7px;
}

span.price del {
    color: #e2241a;
    font-weight: 400;
}


/* Hide the default radio button look */
.purchase__option-box input[type="radio"] {
  appearance: none; /* For modern browsers */
  -webkit-appearance: none; /* Safari */
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  vertical-align: -6px;
  margin-right: 3px;
  outline: none;
}

/* Custom checked style: blue background with white dot */
.purchase__option-box input[type="radio"]:checked {
  background-color: #0056ff; /* Blue background */
  border-color: #0056ff;
}

/* White dot inside checked radio */
.purchase__option-box input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

/* Change the color of the adjacent option-title text when radio is checked */
.purchase__option-box input[type="radio"]:checked + .option-title {
  color: #0056ff; /* Blue text */
}
button.custom-add-to-cart.adc-custombutton {
    height: 50px;
    background: #0055ff;
    border-radius: 50px;
        color: #fff;
}
span.pricefinal {
    margin-left: 15px;
}.variant-item, .qty-box, button.minus, button.plus {
    cursor: pointer;
}
button.plus[disabled], button.minus[disabled] {
    background: #d8d8d8b3;
    cursor: no-drop;
}


/* ------- new design css ----- */

.new-subscription-block > label {
    margin-bottom: 15px;
}
.new-subscription-block label {
    border: 1px solid #1F1B18 !important;
    border-radius: 15px;
    display: block;
    padding: 10px 10px;
}
.subscription-title h2 {
       font-size: 21px;
    color: #000000;
    font-weight: 600;
}

.price-title h3 {
    font-size: 18px;
    color: #000000;
    font-weight: 600;
}
{% comment %} //---- subscription Title/ price ----------- {% endcomment %}

.subscription-titleprice { 
    display: flex;
    gap: 35px;
    align-items: center;
}

.subscription-title {
    /* display: flex; */
}

.subscription-title > div:first-child {
    display: flex;
    gap: 10px;
}

.subscription-titleprice> div {
    width: 50%;
}

.subscription-pricing {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-end;
    /* gap: 5px; */
}
.per-label {
    font-size: 18px;
    color: #000000;
}
input#subscription {
    margin-top: 3px;
}
.sub-info p {
    font-style: italic;
    margin-left: 15px;
    margin-top: 5px;
}
{% comment %} //---- subscription option ----------- {% endcomment %}

.subscription-option [type=radio] {
    display: none;
}

.subscription-option {
    display: flex;
    gap: 8px;
    margin-top: 50px;
}

.subscription-option label {
    width: 100%;
       display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
       padding: 15px 10px!important;
    position: relative;
}
span.price-unit {
    position: absolute;
    top: -36px;
    left: 21px;
    background: #0056ff;
    color: #fff;
    padding: 5px 20px;
    border-radius: 21px;
}
.price-info {
    margin-top: 11px;
    color: black;
    font-weight: 500;
}


{% comment %} ------------  checked radio css ---------- {% endcomment %}
.subscription-option label {

  border: 2px solid #ddd;
  border-radius: 10px;
  /* padding: 10px; */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 🔵 When checked → apply on LABEL */
.subscription-option label:has(input[type="radio"]:checked ) {
  border-color: #0056ff !important;
  background-color: #0056ff14;
}
.subscription-label:has(input[name="purchase_type"]:checked) {
  border-color: #0056ff !important;
  {% comment %} background-color: #0056ff14; {% endcomment %}
}


ins {
  text-decoration: navajowhite;
}
button.qty-option-label.active {
    background: #ebf2ff; 
    color: #000000;
    border: 1px solid #0056ff !important;
}
button.qty-option-label {
    border: 1px solid black;
    background: none;
}

input[name="purchase_type"] {
  accent-color: #0056ff;
      transform: scale(1.2);
}

label.subscription-label {
    cursor: pointer;
}

.variant-list {
    margin-bottom: 25px;
     margin-top: 25px;
}
/* ---------responsive media css --------- */

@media only screen and (max-width: 600px) {
 
    span.price-unit {
        font-size: 10px;
    }

    span.qty__badge.qty__badge-3 {
        font-size: 10px;
    }

    .price-title h3 {
        font-size: 16px!important;
    }

    .subscription-title h2 {
        font-size: 18px;
    }

    input[name="purchase_type"] {
        transform: scale(1);
    }

    input#subscription {
        margin-top: 2px;
    }

    .subscription-option label {
        /* padding: 5px; */
    }

    .per-label {
        font-size: 16px;
    }
    span.price-unit {
       top: -20px;   
        left: 24%;
        padding: 5px 5px;
    }
    .variant-item {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
      /* padding: 1.2rem; */
      padding: 0 10px;
        height: 55px;
    border-radius: 15px;
    border: 1px solid rgb(0, 0, 0);
        font-weight: 600;
    color: #000;
}
.qty__badge {
    top: -20px;
    padding: 5px 5px;
    font-size: 10px;
}
.qty-option-container {
    margin: 25px 0 25px;
}
}


.variant-item {
  transition: all 0.3s ease;
}



 .variant-list .variant-item:nth-of-type(2):hover {
  background-color: #523f2b; 
  color: #fff;
  border-color: #523f2b; 
}

 .variant-list .variant-item:nth-of-type(3):hover  {
    border-color: #0056ff;
    background-color: #ebf2ff;
}


 .variant-list .variant-item:nth-of-type(4):hover  {
  background-color: #f3e5aa; 
  color: #000;    
  border-color: #f3e5aa;
} 



 .variant-list .variant-item.active:nth-of-type(2) {
  background-color: #523f2b; 
  color: #fff;
  border-color: #523f2b; 
}
 .variant-list .variant-item.active:nth-of-type(3) {
    border-color: #0056ff;
    background-color: #ebf2ff;
}
 .variant-list .variant-item.active:nth-of-type(4) {
  background-color: #f3e5aa; 
  color: #000;    
  border-color: #f3e5aa;
} 

del#compare_price {
    font-size: 16px;
    color: #ca2c2c;
}
.perbagclass {
    font-size: 20px;
    /* font-weight: 700; */
    color:rgb(0, 0, 0);
}