/** Shopify CDN: Minification failed

Line 1118:0 Unexpected "{"

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/


@font-face{
  font-family:"Font Awesome 5 Free";
  font-style:normal;
  font-weight:400;
  font-display: block;
  src:url(/cdn/shop/files/fa-regular-400.woff?v=1651660991);
}

body, p:not(.type_shipping p), li, .f_body {
  font-family: "Poppins" !important;
    font-size: 16px !important;
   
}

h1,h2,h3:not(.type_shipping h3),h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, h5 a {
  font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important;
    /*color: #d2ae35;*/
    color: #000;
    font-weight: bold !important;
}

.mini_cart_body h5 {
  line-height: 27px !important;
}

h4.f_body {
  color: #000000 !important;
    font-weight: 400 !important;
}

.container_header {
  padding: 0px 15px;
}
.mobile-img {
  display: none;
}

.desktop-img {
  display: block;
}

.newsletter_se .signup-newsletter-form .submit-btn {
  background-color: #d2ae35;
}

.signup-newsletter-form {
    border: 1px solid #d2ae35;
}

.type_image_text .image_div {
  border-radius: 10px;
}
/*
.type_brand_list .cat_space_item img {
  width: 150px;
    height: 150px;
}
*/

.nt_pr h3.product-title, .nt_pr .product-info .price {
  font-size: 18px;
}

.nt_shipping .ship_img.large {
    width: 100px;
    height: 100px;
}

.nt_shipping .title {
    font-size: 24px;
}

.type_image_text a {
  color: #d2ae35;
}
/* product page custom sectin css */
.pr_benifits .benifts_list {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.pr_benifits .benifts_list img {
    margin-right: 10px;
    width: 50px;
    height: 50px;
}
.pr_benifits .benifts_list p {
    margin: 0;
    line-height: 24px;
}
ul.list-mark li::marker {
    content: "\f058" !important;
    color: #d2ae35 !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}
ul.list-mark li {
    padding: 10px;
    font-size: 16px;
}
/*
ul.list-mark {
    padding-left: 20px;
}
*/
.class_download_btn {
  text-align: right;
}

.pass-button {
  background-color: #198754;
    border-color: #198754;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    color: #ffffff;  
}

.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header {
    background-color: #000 !important;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    width: 100%;
    max-width: 1170px;
    margin: 0 15px;
}

.card-header .col {
    flex: 1 0 0%;
}
.card-header .text-end {
    text-align: right!important;
}

.product_pilot_study_percent {
  font-size: 50px;
}

.product_pilot_study .ship_img.large {
  width: 200px;
    height: 100px;
}
.quote_subtitle {
  color: #69CAD2;
    font-size: 17px;
}

.quotes_des_6 .quote_slide {
  border: 0px;
}

/*
#shopify-section-pr_summary .nt_cart_form .price {
    display: block;
}
*/
#shopify-section-pr_summary .variations {
  margin-bottom: 15px;
}

.sub-title, .f__libre {
    font-style: inherit;
}

.fs__30 {
    font-size: 24px;
}


.type_brand_list .wrap {
  background-color: #0000006b;
}

.mobile-product-top-info {
  display: none;
}

.ingredient-name, .ingredient-quantity {
  color: #000000 !important;
}

.ingredients-wrapper .item .igc-inner {
  background-position: right bottom;
}

#carousel-modal-demo .carousel-control {
  color: #000000;
    width: 8%;
}

.carousel-control.left, .carousel-control.right {
  background-image: none !important;
}

.ingredient-content h4 {
  font-weight: 500 !important;
}

h4.ingredient-name {
  font-size: 20px !important;
}

.template-page .type_image_text_overlay h4.f_body {
  color: #ffffff !important;
}

/* product page custom sectin css end */
/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  

.custom_landing .landing_image_with_text .landing-vid{
    width: 100% !important;
    height: 100% !important; 
}
  
  .ext_img {
    justify-content: center;
  }

  #ntheader {
      height: auto;
  }

  .mobile-img {
      display: block;
  }

  .desktop-img {
      display: none;
  }
  
  .nt_se_template--15953414848746__16509611926c72a909 .des_title_13 {
      margin-bottom: 0px;
  }
  
  .nt_se_template--15953414848746__16509611851a269ee4.se_height_adapt .js_full_ht4 {
      min-height: 40vh;
      background-position: bottom center;
      background-repeat: repeat-x;
  }
  
  .nt_se_template--15953414848746__16509611851a269ee4.se_height_adapt .bg_sz_cover {
      background-size: contain;
  }
  
  .products.space_20 .nt_pr {
       margin-top: 0px;
  }
  
  .class_download_btn {
      text-align: left;
  }
  
  .product_testimonial_image img {
      max-height: 260px;
  }
  
  .type_brand_list .section-subtitle {
      font-size: 16px;
  }
  
  .nt_shipping .title {
      font-size: 14px;
  }
  
  .nt_shipping .col-4, .nt_shipping .col-md-4, .nt_shipping .col-lg-4 {
      padding-left: 0px;
      padding-right: 0px;
  }
  
  .nt_shipping.tl .content, .nt_shipping.tr .content {
      padding-top: 10px;
  }
  
  .nt_shipping .title {
      min-height: 30px;
  }
  
  .type_image_text .tc {
      text-align: left;
  }
  
  .mobile-product-top-info {
      display: block;
  }
  
  /* The mobile design shows the long marketing title from the metafield instead
     of the plain product title, so this h1 is not drawn -- but `display: none`
     also took it out of the accessibility tree, leaving the page with no h1 at
     all and a document outline that started at h3. Clipped instead of removed:
     same pixels, but screen readers and the outline get their heading back. */
  #shopify-section-pr_summary .product_title {
     position: absolute;
     width: 1px;
     height: 1px;
     overflow: hidden;
     padding: 0;
     border: 0;
     margin: -1px;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     white-space: nowrap;
  }
  
  .modal-body {
     padding: 0px !important; 
  }
  
  .ingredient-name, .ingredient-quantity {
    font-size: 16px !important;
  }
  
  .label_style_rounded .nt_label {
      height: 100px;
      width: 100px;
      font-size: 27px;
      border-radius: 50%;
  }
  
  
  .template-article .type_faq h5 {
      font-size: 18px !important;
  }
  
  .template-article .type_faq .card-header{
      margin: 0 8px !important;
  }
  
  .template-article .type_faq .txt_h_tab {
      min-width: 65px !important;
  }
  
  .template-article .spaced-section .container {
      padding: 0px !important;
  }
  
  .template-product .type_shipping .col-md-4, .template-product .type_shipping .col-lg-4 {
      padding-left: 5px;
      padding-right: 5px;
  }
  
}

/* 9developer css start */
.sp-single .product-images .nt_labels {
  right: 5px;
  top: -29px;
}
.custom_logo_pro .nt_full {
  background-color: #0000006b;
}
.custom_logo_pro .container-fluid{
  padding-left: 0;
  padding-right: 0;
}

svg:not(:root) {
  overflow: hidden;
}

.transparent_svg {
  opacity: 0;
  fill: transparent;
  stroke: transparent;
  stroke-miterlimit: 0;
  display: block;
}
.custom_logos .logo_img {
  position: relative;
  z-index: 1;
  /*   width: 25%; */
  max-width: 115px;
  text-align: center;
  margin: 0 auto;
}
.pro_backimg {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: contain;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.custom_logos {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  cursor: pointer;
  border-top: 1px solid #cbcbcb;
  border-bottom: 1px solid #cbcbcb;
  padding-top: 5px;
  margin-bottom: 20px !important;
  z-index: 2;
}
.custom_logos .slick-slide{
  margin-right: 10px !important;
}
.custom_logos .slick-slide:last-child {
  margin-right: 0px !important;
}

/* swatch css */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item {
    width: auto!important;
    cursor: grab;
    position: relative;
    /*min-height: 255px;*/
  min-height: 215px;
    margin: 3px;
    border-radius: 9px;
    border: 2px solid #ccc;
    padding:  25px 6px 25px 11px;
    max-width: 140px;
}

.swatch_pro ul.custom_swatch.swatches-select.swatch__list_pr {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.swatch_pro .variations.style__circle .swatch.is-label .swatch__value_pr{
  text-align: left;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: 0px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.swatch_pro span.tot_bottle {
    line-height: 25px;
    text-transform: initial;
    font-size: 15px;
    font-weight: 400;
}
.product .swatch_pro .custom_swatch li:hover {
  border-color: #d2ae35!important;
  background-color: #d2ae3530 !important;
}

.swatch_pro .properties_text {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.swatch_pro .is-selected .la-check:before {
    content: "\f00c";
    color: black;
    border-radius: 50px;
    padding: 4px;
    background: #d2ae35;
    margin-left: 5px;
  opacity:1;
}
.is-selected p.text_recommanded {
    background: #d2ae35;
  color: #ffffff;
}

.swatch_pro .la-check:before {
  opacity:0;
    content: "\f00c";
    color: black;
    border-radius: 50px;
    padding: 4px;
    background: #d2ae35;
    margin-left: 5px;
}
body .swatch_pro .text_recommanded {
  position: absolute;
  bottom: 0px;
  margin-bottom: 0;
 
  width: 100%;
  right: 0;
  padding: 2px 5px 1px;
  text-align: center;
  color: #000;
  font-size: 15px ;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}
body .swatch_pro .text_recommanded.text_recommanded1 {
background: #d7d7d7;
 
}
body .swatch_pro p.var_price {
  margin-bottom: 0;
  /*font-size: 30px !important;*/
  font-size: 25px !important;
  margin-top: 5px;
}
body .swatch_pro  p.var_compare_price {
    font-weight: 600;
}
body p.var_u_save {
    color: #ff0000;
    font-weight: 500;
    font-size: 16px !important;
}

@media (max-width: 992px) {
  body p.var_u_save{
    font-size:14px !important;
  }
}

/* 9developer css end */


/* 1developer css */

@media (max-width: 575px) {

  #fc_frame, #fc_frame.fc-widget-normal {
    bottom:80px !important;
  }

}
@media (min-width: 768px) {
  .custom_landing .landing_image_with_text .landing-vid {
      width: 100%;
      padding-left: 30px;
  }
  #nt_cart_canvas{
      width: 432px;
  }  
}
@media (max-width: 767px) {
  .custom_landing .landing_image_with_text .landing-vid {
      width: max-content;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
  }
}
.blistitem ul.list-mark {
    list-style: none;
    margin-left: 15px;
}

.blistitem ul.list-mark  li:before {
    content: ""!important;
    margin-left: -25px;
    width: 25px;
    display: inline-block;
}

#bover {
/*  overflow-y:hidden;  */
}

/* 9dev css start */
.upsell_pro{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mini_cart_upsell .flickityt4s-page-dots{
  width: 100% !important;
}
.mini_cart_upsell_items .flickityt4s-viewport, .mini_cart_upsell_items:not(.flickityt4s-enabled) .upsell_item:not(:last-child){
  border-bottom: none !important;
}
.mini_cart_upsell .multi_rating path {
    fill: #ffb400;
}
.mini_cart_upsell .multi_rating svg{
    width: 19px;
}
.mini_cart_upsell .row.no-gutters.al_center.upsell_pro {
    min-height: 340px;
    height: 100%;
    padding: 5px;
    border: 1px solid red;
}
/* 9dev css end */

/*  1dev css start */

.hmini_cart .multi_rating svg {
    width: 18px;
}

.hmini_cart .multi_rating path {
    fill: #ffb400;
}

.hmini_cart {
    display: block;
    width: 100%;
}

.mini_inner {
    display: flex;
    flex-direction: row;
    padding-left:2px;
    padding-right:2px;
    
}

.mini_item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid black;
    padding:12px;
}

.rvw_star .multi_rating {
    display: flex;
}

.mini_img {
    position: relative;
    display: block;
    width: 100%;
    z-index: 1;
    padding: 20px;
}

.mini_img .pro_backimg {
  position:relative;
}

/* .hmini_cart {
  padding-left:20px;
  padding-right:20px;
  padding-bottom:20px;
} */

.hmini_cart {
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    width: calc(100% - 30px);
    padding-left: 6px;
    padding-right: 6px;
}


.hmini_cart .mini_cart_upsell__title {
  border-radius:8px;
  margin-bottom:12px;
}

.mini_price {
  margin-top:8px;
  margin-bottom:8px;
}

.mini_cart button {
  width:100%;
}

.side_cart_pros {
  position:relative;
}

.side_cart_pros .swiper-pagination {
    position: relative;
    bottom: -15px !important;
}

.swiper-pagination-bullet-active {
  background-color:#000 !important;
}
.custom_upsell {
    cursor: pointer;
    padding: 7px 0;
    color: #ffffff;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    min-height: 40px;
    width: 100%;
}
.mini_cart input.txt_add {
    background: #d2ae35;
    border: none;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    min-height: 40px;
    width: 100%;
    text-align: center;
}
/* .mini_cart .single_add_to_cart_button, .single_add_to_cart_button:hover{
    border-radius: 50%;
} */

p.linetext {
    margin: 0 5px 0 0 !important;
    padding: 12px 2px !important;
}

span.mrptext, .compared_at_price {
    font-size: 12px !important;
    color: #B3B3B3;
    text-decoration:line-through;
}

p.linetext {
    margin: 0 2px 0 0 !important;
    padding: 5px 0px !important;
}



.com_price {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.com_price span.cb.fwn {
    display: none;
}
.sale_discount {
    font-size: 12px;
    color: #d2ae35;
}
span.vline {
    font-size: 12px;
    width: 10px;
}

.colladtprd .product_buy_button {
    width: 150px;
    border: 2px solid #000;
    color: #fff;
    border-radius: 40px;
    margin: 5px auto 0px;
    padding:8px 16px;
    text-align: center;
    transition: 0.3s;
    background-color:transparent;
    text-transform: uppercase;
}

.product_buy_button:hover {
    border: 2px solid #000!important;
    color: #000!important;
    background-color: #fff!important;
}

@media ( max-width: 425px )
{
.product_buy_button {
    font-size: 13px !important;
    padding: 7px 10px !important;
    width: 130px !important;
}
span.mrptext, .compared_at_price {
    font-size: 10px !important;
    color: #B3B3B3;
    text-decoration: line-through;
}

.product-inner a.cd.chp {
    font-size: 22px;
}  

.sale_discount {
    font-size: 10px;
    color: #d2ae35;
}

.product-info .price {
    font-size: 14px !important;
}  
  
}


.plsicon {
    content: "+";
    color: #fff;
    font-size: 20px;
    padding-right: 3px;
    position: absolute;
    top: 3px;
    left: 18px;
}

.mini_cart .posicon input.txt_add {
    border-radius: 5px;
    font-size: 14px;
    min-height: 40px;
    width: 100%;
}

@media (max-width:374px)
{

.cart-footer-icons .f_icon p {
    font-size: 10.5px !important;
    margin-top: 10px;
}
  
.plsicon {
    top: 6px !important;
    left: 8% !important;
    font-size: 15px!important;
}

.mini_cart .posicon input.txt_add {
    font-size: 9px!important;
}  
  
}

.helo del {
    color: rgba(50, 50, 50, 0.6) !important;
    font-size: 14px !important;
}

.helo a.upsell_item__title {
    color: #000 !important;
}  


@media (max-width:767px){
  .equal_nt.ratio16_9 .custom_poadd_v{
    padding-top: 108.25% !important;
}
  
.forslider .fordesktop
{
display:none;
}
.fordesktop
{
display:none;
}


.mini_cart .posicon input.txt_add {
    font-size: 12px ;
}  

.plsicon {
    top: 5px ;
    left: 12px ;
    font-size: 18px ;
}  

}

@media (min-width:768px)
{
.forslider .formobile
{
display:none;
}

.formobile
{
display:none;
}
  
.plsicon {
    top: 3px;
    left: 18px;
}
  
}

.posicon{
  position:relative;
}

  


#shopify-section-template--16672842940650__complete_cart .com_price {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
}

.cart-footer-icons {
    align-items: start;
}
.cart-footer-icons>* {
    width: 100%;
}

.cart-footer-icons {
    display: flex;
    text-align: center;
    background: #f2f2f2;
    margin-top: 16px!important;
    padding-top: 16px;
    justify-content: center;
    gap: 20px;
}
.f_icon {
    max-width: 103px;
    text-align: center;
    padding: 5px;
}
.f_icon > i {
    color: #ed723b;
    font-size: 42px;
    line-height: 1;
}
ul.newStyles__Variants {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
    justify-content: space-evenly;
    width: 100%;
}
li.Act_variant.newStyles__VariantButton-sc-4gyd4u-4.jweGJO {
    border: 1px solid #c4c4c4;
    margin: 0!important;
    padding: 0.5rem!important;
}
.Act_variant input[type=radio] {
    position: absolute;
    top: -10px;
    right: -5px;
}
.Act_variant input[type=radio]:after
{
  
width: 26px;
    height: 26px;
    border-radius: 50%;
    top: -6px;
    left: -8px;
    position: relative;
    background-color: #69de7a;
    content: "";
    display: inline-block;
    visibility: visible;
    border: 2px solid #fff;
    outline-color: #69de7a;
    background-image: url(https://plixlifefcstage-media.farziengineer.co/hosted/check-636671037071.svg);
    background-position: 50%;
    background-repeat: no-repeat;
}

.jweGJO {
    position: relative;
    letter-spacing: normal;
    border-radius: 8px;
    border: 1px solid rgb(231, 231, 231);
    cursor: pointer;
    display: flex;
    gap: 4px;
    width: 31%;
    padding: 1rem;
}
.inAct_variant input[type=radio] {
    display: none;
}

.jRoAkY {
    font-size: 14px;
}

.fTjqsB {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: start;
    justify-content: center;
    align-items: center;
    text-align: left;
    height: 100%;
}

.styles__Wrapper {
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    width: 94%;
}

.Act_variant {
    background: #eefdeb;
    border: 3px solid #69de7a!important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
}

.addToCartSectionPlixlife__variantPicker {
    padding:12px 0;
    margin: 0;
    background-color: #fff;
    top: -50px;
    position: relative;
}
.inActiveVariant input[type=radio] {
    display: none;
}
li.pk_item.Act_variant input {
    display: block;
}

li.pk_item input {
    display: none;
}
.related .com_price {
    justify-content: flex-start;
}

.jdgm-preview-badge .jdgm-star
{
 color: #ebb708 !important; 
}


.ext_img {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
}

.trust_inner .ext_img {
    justify-content: center;
}
/*  custum css  */
.swatch_pro ul.custom_swatch.swatches-select.swatch__list_pr{
  display: flex;
    flex-wrap: wrap;
      position: relative;
    gap: 10px;
      padding-top: 10px;
}
@media(max-width:768px){
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item {
     flex: 0 0 48%;
  }
}
@media(min-width:769px){
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item {
     flex: 0 0 31%;
}
}
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item {
    position: relative;
    max-width: 100%;
    box-shadow: 5px 5px #000;
    margin: 0;
}
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item .tot_bottle.my_tot_bottle{
    position: absolute;
    top: -8px;
    left: 0;
    color: #fff;
    background: red;
    font-size: 10px!important;
    padding: 3px;
    line-height: 11px;
}
.swatch_pro .variations.style__circle .swatch.is-label .swatch__value_pr {
 justify-content: space-between;
}
.swatch_pro .variations.style__circle .swatch.is-label .swatch__value_pr span,
{
    font-size: 19px;
}
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item p.var_price{
  font-size: 19px!important;
    font-weight: 700;
}
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item p.var_compare_price{
      font-weight: 500;
    font-size: small !important;
}
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item .properties_text span:not(.my_tot_bottle){
      font-size: small;
    font-weight: 400;
}
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.is-selected{
      border: 3px solid #000 !important;
}

/*  blog article   */
 @media(min-width:769px){
.article_left_right_div_outer {
    display: grid;
    grid-template-columns: repeat(2, 70% 30%);
      gap: 25px;
      align-items: baseline;
}
 }
  @media(max-width:768px){
.new_article_custom .mt__60{
      margin-top: 0px;
}
  .article_left_right_div_outer {
display: grid;
    gap: 25px;
    align-items: baseline;
    grid-template-rows: repeat(2, auto 1fr);
}
.article_left_right_div_outer .row.nt_single_blog.left_side_div {
        order: 2;
}
  }
.article_left_right_div_outer .left_side_div .article_header {
font-size:35px !important;
}
.article_left_right_div_outer .right_side_div .article_auther_nm {
  font-size:16px;
}
.article_left_right_div_outer .right_side_div_inner {
    display: flex;
    flex-direction: row;
    /* justify-content: space-around; */
    gap: 15px;
    align-items: center;
  position:relative;
}
.article_left_right_div_outer .right_side_auther_time p.article_auther_nm {
    margin: 0;
}
.article_left_right_div_outer .row.nt_single_blog.left_side_div {
    gap: 25px;
}
.article_tag{
      text-transform: uppercase;
      position: relative;
}
.article_tag a{
    color: #02838d;
}
.article_tag a:hover {
    color: #db1f88;
}
.article_left_right_div_outer ul.blog-tab-wrapper {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
  margin-bottom: 30px;
}
.article_left_right_div_outer ul.blog-tab-wrapper li {
    position: relative;
}
.article_left_right_div_outer ul.blog-tab-wrapper li:after {
    content: "";
    background: #bcbfc5;
    position: absolute;
    top: 2px;
    right: -1px;
    bottom: 0;
    height: 16px;
    width: 2px;
    margin: auto;
}
.article_left_right_div_outer ul.blog-tab-wrapper li:last-child:after {
    width: 0;
  display:none;
}
.article_left_right_div_outer ul.blog-tab-wrapper a.blog-tab-btn {
    line-height: 40px;
    padding: 0 15px;
  color:#02838d;
}
.article_left_right_div_outer ul.blog-tab-wrapper a.blog-tab-btn:hover {
    color: #db1f88;
}
.right_side_div_inner:after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 75%;
    height: 5px;
    border: 1px solid #000;
    background: #000;
}
.article_tags_outer {
    display: flex;
    gap: 10px;
}
.article_tags_outer p.article_tag:after {
    content: "";
    background: #bcbfc5;
    position: absolute;
    top: 0px;
    right: -6px;
    bottom: 0;
    height: 15px;
    width: 2px;
    margin: auto;
}
.article_tags_outer p.article_tag:after:last-child:after {
    width: 0;
  display:none;
}
.new_article_custom .article_left_right_div_outer .row.nt_single_blog.left_side_div .post-content h3,
.new_article_custom .article_left_right_div_outer .row.nt_single_blog.left_side_div .post-content h2,
.new_article_custom .article_left_right_div_outer .row.nt_single_blog.left_side_div .post-content h1{
  color:#000 !important;
}
.new_article_custom .article_left_right_div_outer .row.nt_single_blog.left_side_div .post-content p a{
   color:#02838d !important;
    border-bottom: none;
}
.new_article_custom .article_left_right_div_outer .row.nt_single_blog.left_side_div .post-content p a:hover{
   color:#db1f88 !important;
}
.nt_single_blog .post-content h2, .nt_single_blog .post-content h3{
  color: #000 !important;
}
.nt_single_blog .post-content p a,
.nt_single_blog .post-content ul li a{
   color:#02838d !important;
    border-bottom: none !important;
}
.nt_single_blog .post-content  ul li a:hover{
   color:#db1f88 !important;
}
p.tab_per_price span {
    font-weight: bold !important;
}
.nt_single_blog .post-tags a{
   color:#02838d !important;
}
.nt_single_blog .post-tags a:hover{
  color:#db1f88 !important;
}
.text_recommanded.text_recommanded_animation.logo.is-animetion {
     position: absolute;
    bottom: 0px;
    margin-bottom: 0;
    width: 100%;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    background: red;
   height:30px;
}
.text_recommanded.text_recommanded_animation.logo.is-animetion span{
 font-weight: bold !important;
}
body {
  display: block !important;
}

:root {
  --healeo-mobile-target: 44px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #02838d;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .push-menu-btn,
  .icon_search.push_side,
  .push_side.pr.cb.chp.db {
    display: inline-flex;
    min-width: var(--healeo-mobile-target);
    min-height: var(--healeo-mobile-target);
    align-items: center;
    justify-content: center;
  }

  .header__mid .col-3.tr {
    padding-left: 0;
    padding-right: 0;
  }

  .header__mid .col-3.tr > .nt_action {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .header__mid .col-3.tr .icon_cart {
    padding-left: 0;
    padding-right: 0;
  }

  #wa-chat-btn-root.wa-chat-btn-fixed {
    right: 12px !important;
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .template-product #wa-chat-btn-root.wa-chat-btn-fixed {
    bottom: max(94px, calc(80px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .cat_toolbar .btn_filter:not(.dn),
  .cat_toolbar .cat_view_page,
  .cat_toolbar .sortby_pick {
    display: inline-flex;
    min-width: var(--healeo-mobile-target);
    min-height: var(--healeo-mobile-target);
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .pr_grid_item .single_add_to_cart_button,
  .variations_button .single_add_to_cart_button,
  .atc-btn .single_add_to_cart_button,
  .template-cart .frm_cart_page .btn_checkout {
    display: inline-flex !important;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }

  .template-cart .cart_page_section {
    margin-top: 24px;
  }

  .template-cart .cart__footer {
    margin-top: 32px !important;
    margin-bottom: 40px !important;
  }

  .template-cart .frm_cart_page input#couponcode {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  .template-cart .frm_cart_page .btn_checkout {
    width: 100% !important;
  }

  .template-cart .quantity,
  .template-cart .quantity .plus,
  .template-cart .quantity .minus,
  .variations_button .quantity,
  .variations_button .quantity .plus,
  .variations_button .quantity .minus {
    min-height: var(--healeo-mobile-target);
  }

  .template-cart .quantity .plus,
  .template-cart .quantity .minus,
  .variations_button .quantity .plus,
  .variations_button .quantity .minus {
    min-width: var(--healeo-mobile-target);
  }

  .atc-btn.s_mshow {
    height: auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Healeo mobile navigation: native close control and calmer brand treatment. */
.close_mn_t4 {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  width: 54px;
  height: 54px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid #d2ae35 !important;
  border-top: 0 !important;
  background: #fffaf0 !important;
  color: #242424 !important;
  box-shadow: 0 6px 18px rgba(24, 24, 24, 0.12);
  font-size: 32px;
  line-height: 1;
}

.pside_opened .close_mn_t4 {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.close_mn_t4:hover {
  background: #fff4cf !important;
  color: #8b6d12 !important;
}

.close_mn_t4:focus-visible {
  outline: 3px solid #02838d;
  outline-offset: -4px;
}

@media (max-width: 767px) {
  #nt_menu_canvas .mb_nav_tabs {
    min-height: 54px;
    background: #fff;
    border-bottom: 2px solid #d2ae35;
  }

  #nt_menu_canvas .mb_nav_title {
    min-height: 54px;
    letter-spacing: 0.06em;
  }

  .pr_grid_item .product-inner {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  .pr_grid_item .product-info,
  .pr_grid_item .product-info__inner {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
  }

  .pr_grid_item .product-title {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    font-size: 17px !important;
    line-height: 23px !important;
  }

  .pr_grid_item .product-title a {
    font-size: 17px !important;
    line-height: 23px !important;
    letter-spacing: 0;
  }

  .pr_grid_item .jdgm-widget.jdgm-preview-badge {
    display: flex !important;
    min-height: 26px;
    align-items: center;
    justify-content: center;
  }

  .pr_grid_item .jdgm-prev-badge__text {
    line-height: 20px;
  }

  /* One benefit line, so the reserved box is a single line tall rather than two.
     The height stays fixed so every card in a row keeps the same baseline. */
  .pr_grid_item .benefit-chip-cnt {
    min-height: 26px;
    align-items: center;
    padding: 2px 0;
  }

  .pr_grid_item .benefit-chip-wrapper {
    margin-top: 0;
  }

  .pr_grid_item .benefit-chip-wrapper,
  .pr_grid_item .benefit-chip-wrapper > div {
    line-height: 20px;
  }

  .pr_grid_item .com_price {
    min-height: 38px;
  }

  .pr_grid_item .snap_dp_list {
    min-height: 28px;
    align-items: center;
    justify-content: center;
  }

  .pr_grid_item .colladtprd {
    min-height: 53px;
    margin-top: auto;
  }

  .pr_grid_item .colladtprd .product_buy_button {
    width: calc(100% - 16px) !important;
    max-width: 156px;
    margin-top: 5px;
    white-space: nowrap;
  }
}

/* D2C product-page QA fixes: responsive media, clear mobile purchase flow, visible menu close. */
.product_testimonial .product_testimonial_image img,
.product-benefit_list .benefit_image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  object-position: center;
}

/* The square testimonial frame lives in product_testimonial.liquid, gated on the
   section's own "show readings" switch: a page still using the old portrait
   photos and the readings row should keep the layout those were drawn for. */

.product_testimonial .testimonial-metric-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.product-benefit_list_outer .outer_arrows {
  margin-top: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(24px, 4vw, 40px);
}

.close_mn_t4 {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  right: 8px !important;
  left: auto !important;
  z-index: 1000001 !important;
  display: inline-flex !important;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d2ae35 !important;
  border-radius: 50%;
  background: #fffaf0 !important;
  color: #242424 !important;
  box-shadow: 0 4px 16px rgba(24, 24, 24, 0.16);
  font: 400 34px/1 Arial, sans-serif;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  transform: none !important;
}

.pside_opened .close_mn_t4 {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto !important;
}

.close_mn_t4::before {
  content: none !important;
}

.close_mn_t4 > span {
  display: block;
  transform: translateY(-1px);
}

@media (max-width: 575px) {
  .template-product .btn--black.prc .addToCartSectionPlixlife__variantPicker {
    top: -64px;
    padding: 10px 0 22px;
  }

  .template-product ul.newStyles__Variants {
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 3% 10px;
    scroll-padding-inline: 3%;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .template-product ul.newStyles__Variants::-webkit-scrollbar {
    display: none;
  }

  .template-product li.newStyles__VariantButton-sc-4gyd4u-4.jweGJO {
    flex: 1 1 78px;
    width: auto;
    min-width: 78px;
    min-height: 60px;
    padding: 12px 4px !important;
    scroll-snap-align: start;
  }

  .template-product .stickydiv.s_mshow {
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: calc(100% - 24px);
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }

  .template-product .atc-btn.s_mshow {
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    padding: 0 24px 12px 12px;
  }
}

/* Healeo product QA follow-up 2026-07-31: one compact sticky CTA and even metric cards. */
@media (max-width: 575px) {
  .template-product #nt_content {
    padding-bottom: calc(174px + env(safe-area-inset-bottom, 0px));
  }

  .template-product .stickydiv.s_mshow {
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: calc(100% - 32px);
    z-index: 10000;
    height: 58px;
    min-height: 58px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .template-product .stickydiv.s_mshow .price-review {
    width: 100%;
    padding-right: 46%;
    align-items: center;
    box-sizing: border-box;
  }

  .template-product .stickydiv.s_mshow .price_range {
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
  }

  .template-product .btn--black.atcbtn {
    background: transparent !important;
    box-shadow: none !important;
  }

  .template-product .atc-btn.s_mshow {
    z-index: 10001;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: calc(100% - 32px);
    height: 58px;
    padding: 0 14px;
    box-sizing: border-box;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .template-product .atc-btn.s_mshow .flex.wrap {
    display: flex;
    float: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    background: transparent !important;
  }

  .template-product .atc-btn.s_mshow .single_add_to_cart_button {
    width: 46%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.1;
    pointer-events: auto;
  }
}

/* Healeo product UX QA fixes — 2026-08-02 */
@media (max-width: 767px) {
  .template-product .pr_sticky_content {
    margin-bottom: 36px !important;
  }

  .template-product #testimonial,
  .template-product .product-benefit-section,
  .template-product #certification,
  .template-product #howtouse,
  .template-product .type_feature_columns > [class^="nt_se_"] {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }

  .template-product .product_pilot_study > [class^="nt_se_"],
  .template-product #reviews {
    margin-top: 32px !important;
  }

  #faq {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .template-product #shopify-section-pr_summary > .price-review {
    width: 100%;
    justify-content: center !important;
    text-align: center;
  }

  .template-product #shopify-section-pr_summary .variations_button > .flex.wrap {
    float: none;
    width: 100%;
    justify-content: center;
  }

  .template-product #shopify-section-pr_summary .variations_button > .flex.wrap > .single_add_to_cart_button {
    float: none;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* Healeo mobile rhythm and FAQ polish — 2026-08-02 */
#faq {
  z-index: 0 !important;
  isolation: isolate;
  scroll-margin-top: var(--healeo-product-sticky-offset, 164px);
}

#faq > .container,
#faq > .nt_boxed {
  max-width: 960px;
}

#faq .wrap_title {
  margin-bottom: 0 !important;
}

#faq .mt__30.row {
  margin-top: 24px !important;
}

#faq .sp-tabs {
  padding-top: 0;
}

#faq .sp-tab {
  flex: 0 0 calc(100% - 15px);
  width: calc(100% - 15px);
  max-width: calc(100% - 15px);
  margin: 0 7.5px 12px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(34, 34, 34, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#faq .sp-tab.active {
  border-color: #111;
  box-shadow: 0 7px 20px rgba(17, 17, 17, 0.09);
}

#faq .sp-tab > .heading.bgbl,
#faq .sp-tab.active > .heading.bgbl {
  margin: 0 !important;
  background: #fff !important;
}

#faq .tab-heading,
#faq .sp-tab.active .tab-heading {
  min-height: 62px;
  padding: 14px 18px !important;
  color: #111 !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

#faq .txt_h_tab {
  min-width: 0;
  padding: 0 12px 0 0 !important;
  overflow-wrap: anywhere;
}

#faq .nav_link_icon,
#faq .sp-tab.active .nav_link_icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border: 1px solid #111;
  background: #fff !important;
  color: #111 !important;
}

#faq .sp-tab.active .nav_link_icon {
  background: #111 !important;
  color: #fff !important;
}

#faq .sp-tab-content,
#faq .des_style_2.sp-tab > .sp-tab-content {
  padding: 0 18px 18px !important;
  border: 0 !important;
  background: #fff !important;
  color: #5f5f5f !important;
  font-size: 15px;
  line-height: 1.6;
}

/* The answer paragraph carries its own size and weight, so setting them on the
   container alone leaves it at 16px/500 and it reads as heavy as the question. */
#faq .sp-tab-content p,
#faq .sp-tab-content li,
#faq .sp-tab-content span {
  color: #5f5f5f;
  /* Beats the site-wide `p { font-size: 16px !important }` further up this file
     so the answer sits a step below the question rather than matching it. */
  font-size: 15px !important;
  font-weight: 400;
}

#faq .sp-tab-content p {
  margin: 0 0 10px !important;
  line-height: 1.6;
}

#faq .sp-tab-content p:last-child {
  margin-bottom: 0 !important;
}

/* The theme's own accordion draws a bare +/- glyph via ::after on the panel.
   The card already carries a round expand button, so that stray character just
   floats under the answer text. */
#faq .sp-tab::after,
#faq .sp-tab.active::after {
  content: none !important;
}

#faq .tab-heading:focus-visible {
  outline: 2px solid #111;
  outline-offset: -3px;
}

@media (max-width: 767px) {
  .template-product .id_pr_summary .container_cat > .product.mt__40 {
    margin-top: 24px !important;
  }

  .template-product .mobile-product-top-info {
    line-height: 1.5;
  }

  .template-product .mobile-product-top-info p {
    margin-bottom: 10px !important;
    line-height: 1.5;
  }

  .template-product #shopify-section-pr_summary {
    margin-top: 20px !important;
  }

  .template-product #shopify-section-pr_summary .pr_short_des {
    margin: 16px 0 18px !important;
    color: #222;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .template-product #shopify-section-pr_summary .pr_short_des p {
    margin: 0 0 8px !important;
    line-height: 1.5;
  }

  .template-product #shopify-section-pr_summary .pr_short_des p:last-child {
    margin-bottom: 0 !important;
  }

  .template-product #shopify-section-pr_summary .pr_benifits {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  .template-product #shopify-section-pr_summary .pr_benifits .benifts_list {
    min-height: 48px;
    /* The bottom margin dates from when these were stacked full-width rows.
       They are grid cells now, so the grid `gap` owns the spacing and the
       margin only made each card taller than its content. */
    margin: 0 !important;
    gap: 10px;
    align-items: center;
  }

  .template-product #shopify-section-pr_summary .pr_benifits .benifts_list img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 0;
    object-fit: contain;
  }

  .template-product #shopify-section-pr_summary .pr_benifits .benifts_list p {
    min-width: 0;
    margin: 0 !important;
    /* The card leaves ~110px for text at 360px wide. At 16px "Metabolism" did
       not fit that column and `overflow-wrap: anywhere` split it mid-word
       ("Metabolis / m"). 13px fits every current label whole; `break-word`
       keeps mid-word breaking as a last resort for a genuinely unfittable
       word instead of the first thing tried. */
    font-size: 13px !important;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .template-product #shopify-section-pr_summary .btn-atc {
    margin-top: 6px !important;
  }

  .template-product #shopify-section-pr_summary .variations {
    margin-bottom: 10px !important;
  }

  .template-product .pr_sticky_content {
    margin-bottom: 16px !important;
  }

  /* Section rhythm. These were 28px each side, so every seam between two
     sections cost 56px and there are ten of them -- half a screen of nothing
     spent on separation the section backgrounds already provide. 18px still
     reads as a break. */
  .template-product #testimonial,
  .template-product .product-benefit-section,
  .template-product #certification,
  .template-product #howtouse,
  .template-product .type_feature_columns > [class^="nt_se_"] {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  .template-product .product_pilot_study > [class^="nt_se_"],
  .template-product #reviews {
    margin-top: 18px !important;
  }

  #faq {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  #faq .mt__30.row {
    margin-top: 20px !important;
  }

  #faq .tab-heading,
  #faq .sp-tab.active .tab-heading {
    min-height: 58px;
    padding: 13px 15px !important;
  }

  #faq .sp-tab-content,
  #faq .des_style_2.sp-tab > .sp-tab-content {
    padding: 0 15px 15px !important;
    line-height: 1.5;
  }
}


/* Product cards: price and add-to-cart share the centred axis of the card
   title, everywhere a card is shown. `.related .com_price` left-aligns the price
   row, and the add-to-cart is an inline-flex element, so its `margin: auto`
   cannot centre it on its own -- the inline box has to be centred by its block
   container instead. */
.product-inner .com_price,
.related .com_price,
.pr_grid_item .com_price {
  justify-content: center;
}

.product-inner .colladtprd,
.related .colladtprd,
.pr_grid_item .colladtprd {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Pack cards
   Opt-in presentation for the pack option (Product Form block in the editor).
   Scoped to `.pack-card` / `.pack-cards` so every product that leaves the
   setting off keeps the existing label swatches untouched.

   Layout follows the competitor card the brief supplied:

     [ ribbon                     ]   optional, full width
     [ image        (% off chip)  ]   chip and tick sit over the image corners
       Pack of 1                      name
       [ 30 Days ]                    editor label chip
       1 Pack                         variant description
       (Rs. 1199/ Pack)               unit price
       ---------------------------    hairline
       MRP: Rs 2,000                  struck through
       Now Rs 1,199                   the price being charged
     [ Save Rs 801 today!         ]   full-bleed footer bar

   The markup is the theme's own swatch list, so the visual order is produced
   with flex `order` rather than by moving nodes -- the variant JS keeps
   working on the same elements it always had.
   --------------------------------------------------------------------------- */
.swatch_pro .variations .swatch.has-pack-cards .swatch__title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}

.swatch_pro ul.custom_swatch.swatches-select.pack-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.swatch_pro ul.custom_swatch.swatches-select.pack-cards--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.swatch_pro ul.custom_swatch.swatches-select.pack-cards--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 769px) {
  .swatch_pro ul.custom_swatch.swatches-select.pack-cards,
  .swatch_pro ul.custom_swatch.swatches-select.pack-cards--cols-3,
  .swatch_pro ul.custom_swatch.swatches-select.pack-cards--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Long selector chain matches the existing swatch rules so these win without
   !important -- the theme already styles `.swatch_pr_item` at this depth. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-width: none;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  margin: 0;
  background: #fff;
  box-shadow: none;
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* `background` needs !important for the same reason `border` does: the theme
   tints every selected swatch with a translucent gold (rgba(210,174,53,.19))
   from a rule this chain does not outrank. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card.is-selected,
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card.is-selected-nt {
  border: 2px solid #0f5c3f !important;
  background: #f3faf5 !important;
}

/* -- ribbon ---------------------------------------------------------------- */
.pack-card__badge {
  display: block;
  order: 1;
  padding: 5px 6px;
  margin: 0;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.pack-card__badge.is-blank {
  visibility: hidden;
}

/* -- image ----------------------------------------------------------------- */
.pack-card__media {
  position: relative;
  order: 2;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin: 8px 8px 0;
  border-radius: 10px;
  background: #f5f5f5;
}

.pack-card__media.is-empty {
  display: none;
}

.pack-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* An uploaded pack image is cut for this square, so it crops. A fallback image
   is the variant packshot -- a tall bottle or pouch on white -- so it is fitted
   instead, and `multiply` drops its white ground into the tile colour rather
   than drawing a white square inside the grey. */
.pack-card__media--fallback img {
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply;
}

/* The one tax line for the whole set of cards. Quiet -- it is a legal note, not
   a selling point -- and the rule under it closes the pack block off. */
.pack-cards__tax-note {
  margin: 10px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* -- selected tick --------------------------------------------------------- */
.pack-card .pack-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0f5c3f;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.pack-card.is-selected .pack-card__check,
.pack-card.is-selected-nt .pack-card__check {
  display: block;
}

/* The theme paints a gold pill behind every selected `.la-check` glyph
   (`.swatch_pro .is-selected .la-check::before` sets a #d2ae35 background with
   its own padding and left margin). On a pack card that pill rendered as a gold
   disc sitting half outside the green one. The glyph is what `::before` is for,
   so it stays -- only the pill it was carrying is removed. */
.swatch_pro .is-selected .pack-card__check::before,
.swatch_pro .pack-card__check::before {
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: none !important;
  color: inherit !important;
  opacity: 1 !important;
}

/* -- name, chip, description ----------------------------------------------- */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .swatch__value_pr,
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .swatch__value_pr span {
  order: 3;
  justify-content: center;
  padding: 0 8px;
  margin: 8px 0 0;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.3;
}

.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .swatch__value_pr span {
  padding: 0;
  margin: 0;
}

.pack-card__pill {
  order: 4;
  position: relative;
  z-index: 2;
  display: inline-block;
  align-self: center;
  padding: 2px 12px;
  margin: 6px 0 0;
  border: 0;
  border-radius: 40px;
  background: #eaf5ec;
  color: #0f5c3f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* `properties_text` holds the variant description, the unit price and the
   red "% OFF" flag. It stays a flow container; only its order moves. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .properties_text {
  order: 5;
  flex-direction: column;
  padding: 0 8px;
  margin: 4px 0 0;
  text-align: center;
}

.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .tot_bottle {
  font-size: 12px !important;
  line-height: 1.4;
  color: #6b6b6b;
}

/* The unit price is wrapped in its own bold `<span>`, which the theme sizes
   separately -- the paragraph rule alone left it at 13px/700. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .tab_per_price,
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .tab_per_price span {
  margin: 2px 0 0;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #8a8a8a;
}

/* The base rules pin the "% OFF" flag to the card's top-left corner, where it
   collided with the ribbon. The card is the positioning context now, so the
   flag lands on the image instead -- the corner the reference uses. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .tot_bottle.my_tot_bottle {
  position: absolute;
  z-index: 3;
  /* Offsets are from the CARD, so they have to account for what sits above the
     image: 8px of media margin plus 6px of inset with no ribbon. `top` belongs
     in this rule rather than a shorter one because the theme's own
     `.my_tot_bottle` rule at this depth sets `top: auto`. */
  top: 14px;
  right: auto;
  bottom: auto;
  left: 14px;
  width: auto;
  padding: 2px 8px;
  margin: 0;
  border-radius: 40px;
  background: #e11900;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 15px;
}

/* With a ribbon the image starts below it, so the flag drops by the ribbon's
   height rather than floating over it. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card:has(.pack-card__badge:not(.is-blank)) .tot_bottle.my_tot_bottle {
  top: 40px;
}

/* -- prices ---------------------------------------------------------------- */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card p.var_compare_price {
  order: 6;
  padding: 8px 8px 0;
  margin: 8px 8px 0;
  border-top: 1px solid #ececec;
  color: #8a8a8a;
  font-size: 12px !important;
  line-height: 1.5;
  text-align: center;
}

.pack-card p.var_compare_price::before {
  content: "MRP: ";
}

.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card p.var_price {
  order: 7;
  padding: 0 8px;
  margin: 0;
  color: #111;
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.pack-card p.var_price::before {
  content: "Now ";
  font-size: 12px;
  font-weight: 500;
  color: #6b6b6b;
}

/* -- saving footer --------------------------------------------------------- */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card p.var_u_save {
  order: 8;
  padding: 6px 6px;
  margin: 8px 0 0 !important;
  margin-top: auto !important;
  background: linear-gradient(90deg, #0f5c3f 0%, #2f9e6b 100%);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* "Free Gift" and similar per-variant notes sit last so they cannot push the
   price block around. */
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .text_recommanded {
  order: 9;
  padding: 0 8px;
  margin: 4px 0 6px;
  font-size: 11px !important;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .swatch_pro ul.custom_swatch.swatches-select.pack-cards--cols-3 .pack-card__pill,
  .swatch_pro ul.custom_swatch.swatches-select.pack-cards--cols-4 .pack-card__pill {
    padding: 2px 8px;
    font-size: 10px;
  }

  .product .swatch_pro .variations.style__circle .swatch.is-label .pack-cards--cols-3 .swatch_pr_item.pack-card p.var_price,
  .product .swatch_pro .variations.style__circle .swatch.is-label .pack-cards--cols-4 .swatch_pr_item.pack-card p.var_price {
    font-size: 15px !important;
  }
}

/* ---------------------------------------------------------------------------
   Content buttons
   One solid black pill, centred, wherever a section renders the theme's
   generic `a.button`. Section colour settings emit an inline
   `a.button { color: ... }` block that loads after this file, so these rules
   carry an extra class to win on specificity rather than on order.
   Cart, out-of-stock and external-link buttons keep their own treatment.
   --------------------------------------------------------------------------- */
.shopify-section a.button:not(.single_add_to_cart_button):not(.out_stock):not(.external_btn):not(.product_buy_button):not(.button--secondary) {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 10px 28px;
  border: 2px solid #111;
  border-radius: 40px;
  background: #111;
  color: #fff;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.shopify-section a.button:not(.single_add_to_cart_button):not(.out_stock):not(.external_btn):not(.product_buy_button):not(.button--secondary):hover {
  background: #fff;
  color: #111;
}

/* ---------------------------------------------------------------------------
   Pilot-study result stats
   Each figure becomes its own rounded card so the four read as a set, and the
   label drops the gold for black. The 50px figure is cut back so the label and
   the number sit in a sensible hierarchy inside the card.
   --------------------------------------------------------------------------- */
.product_pilot_study .row.fl_wrap > [class*="col-"] {
  display: flex;
  margin-bottom: 12px !important;
}

.product_pilot_study .nt_shipping {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 18px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.product_pilot_study .nt_shipping .icon {
  width: 76px !important;
  height: 76px !important;
  max-width: 76px;
  margin: 0 auto;
  border-radius: 12px;
  background-color: transparent !important;
  background-position: center;
  background-size: contain;
}

.product_pilot_study .nt_shipping .content {
  flex: 0 0 auto;
  width: 100%;
  padding-top: 12px !important;
  text-align: center;
}

.product_pilot_study .nt_shipping .title {
  color: #111 !important;
  /* Caption step of the type scale: 12px on mobile, 13px from 768px up. Not
     written with the `[id^="shopify-section-template--"]` prefix the rest of the
     scale uses -- `.product_pilot_study` IS the section wrapper's class, not a
     descendant of it, so that chain never matches. */
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .product_pilot_study .nt_shipping .title {
    font-size: 13px !important;
  }
}

.product_pilot_study .product_pilot_study_percent {
  color: #111 !important;
  font-size: 34px !important;
  font-weight: 700;
  line-height: 1.15 !important;
}

@media (min-width: 769px) {
  .product_pilot_study .nt_shipping .icon {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px;
  }

  .product_pilot_study .product_pilot_study_percent {
    font-size: 40px !important;
  }
}

/* ---------------------------------------------------------------------------
   Ingredient cards
   Rounded, evenly spaced cards with a soft edge. NOTE: the coloured field
   behind each ingredient is part of the uploaded artwork, not CSS, so the
   background colour cannot be restyled from here.
   --------------------------------------------------------------------------- */
.ingredient_popup .ingredient-item {
  border-radius: 16px !important;
  overflow: hidden;
}

.ingredient_popup .ingredient-image {
  border-radius: 16px !important;
  overflow: hidden;
}

.ingredient_popup .ingredient-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Sticky bar pack pills
   The list is a flex row with fixed-width pills and horizontal scroll, so on a
   360px screen the last pill (and its selected tick) falls outside the visible
   area. Letting the pills share the row instead makes every option fit on one
   line at any width. The `li` carries an inline padding, hence !important.
   --------------------------------------------------------------------------- */
.btn--black.prc .newStyles__Variants {
  gap: 6px;
  padding-right: 10px !important;
  padding-left: 10px !important;
  overflow-x: visible;
}

.btn--black.prc .newStyles__Variants > li.pk_item {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 2px !important;
  text-align: center;
}

.btn--black.prc .newStyles__Variants > li.pk_item label {
  display: block;
  width: 100%;
}

.btn--black.prc .newStyles__Variants > li.pk_item label > div,
.btn--black.prc .newStyles__Variants > li.pk_item label > div > div {
  justify-content: center;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .btn--black.prc .newStyles__Variants {
    gap: 5px;
  }

  .btn--black.prc .newStyles__Variants > li.pk_item label > div,
  .btn--black.prc .newStyles__Variants > li.pk_item label > div > div {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Testimonial swipe affordance
   Small arrows pinned to the card edges. The theme's `btn_vi_1` already keeps
   them at full opacity, so they stay visible on touch devices where a hover
   state would never fire.
   --------------------------------------------------------------------------- */
.product_testimonial .flickityt4s-prev-next-button {
  width: 32px;
  height: 32px;
  border: 1px solid #e0e0e0;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
  opacity: 1 !important;
  z-index: 2;
}

/* The carousel row carries the grid's negative side margins, so it hangs a few
   px past the viewport. The insets below account for that overhang and keep
   both arrows fully on screen. */
.product_testimonial .flickityt4s-prev-next-button.previous {
  left: 14px;
}

.product_testimonial .flickityt4s-prev-next-button.next {
  right: 14px;
}

.product_testimonial .flickityt4s-prev-next-button svg,
.product_testimonial .flickityt4s-prev-next-button .flickityt4s-button-icon {
  width: 55%;
  height: 55%;
  left: 22%;
  top: 22%;
}

.product_testimonial .flickityt4s-prev-next-button .arrow,
.product_testimonial .flickityt4s-prev-next-button svg path {
  fill: #111;
}

@media (min-width: 769px) {
  .product_testimonial .flickityt4s-prev-next-button {
    width: 38px;
    height: 38px;
  }

  /* The row's negative margin is wider at this breakpoint, so the inset has to
     grow with it or the arrows sit a pixel past the edge. */
  .product_testimonial .flickityt4s-prev-next-button.previous {
    left: 30px;
  }

  .product_testimonial .flickityt4s-prev-next-button.next {
    right: 30px;
  }
}

/* ---------------------------------------------------------------------------
   Sticky bar: tighten the pack row
   The picker reserved 22px below the pills and the row carried its own
   padding, leaving a band of empty white above the add-to-cart button. Trimmed
   to a single small gap so the two read as one control.
   --------------------------------------------------------------------------- */
/* The picker is pulled up by a fixed `top: -64px`, so trimming its padding only
   pushes it further from the button. Anchoring it to the bar's bottom edge
   instead keeps the same small gap no matter how tall the pills end up:
   10px (button offset) + 58px (button height) + 6px breathing room. */
.btn--black.prc .addToCartSectionPlixlife__variantPicker {
  position: absolute !important;
  top: auto !important;
  right: 0;
  bottom: 74px;
  left: 0;
  padding: 0 !important;
}

.btn--black.prc .newStyles__Variants {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The pill carries a 60px min-height while its text row is only 15px tall,
   which is where most of the empty band came from. */
.btn--black.prc .newStyles__Variants > li.pk_item {
  min-height: 0 !important;
  padding: 9px 2px !important;
}

.btn--black.prc .newStyles__Variants > li.pk_item label {
  height: auto !important;
}

.btn--black.prc .newStyles__Variants > li.pk_item label > div {
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   Floating chat button clearance
   The sticky purchase bar sits at z-index 9999 against the widget's 99, so
   anything overlapping it is hidden rather than layered. Lift the button clear
   of whatever the bar is actually showing:
     no pack row -> 10px offset + 58px button + 12px gap
     pack row    -> the above + 6px gap + the ~39px pill row + 12px gap
   `:has()` keeps this to CSS; where it is unsupported the button simply keeps
   its current position, which is the behaviour before this rule.
   --------------------------------------------------------------------------- */
/* The bar only renders below 576px, so the lift is confined to that range --
   above it the button keeps its normal resting position. */
@media (max-width: 575px) {
  .template-product #wa-chat-btn-root {
    bottom: 80px !important;
  }

  body.template-product:has(.btn--black.prc .pk_item) #wa-chat-btn-root {
    bottom: 125px !important;
  }
}

/* ---------------------------------------------------------------------------
   Product card: review badge and benefit line are ONE line at ONE size
   ---------------------------------------------------------------------------
   These two lines used to be sized per card from the label's own character
   count, so every card fitted on one line but at its own size -- 14px next to
   9.8px in the same row, which read as a mistake rather than a fit.

   They are fixed sizes now, chosen from the tightest real case: at a 360px
   viewport the grid is 2-up and a card's text column measures 158px, of which
   the green tick and its gap take ~18px.

     benefit label 10px  -- 18 of the 20 labels in the catalogue fit whole at
                            360px; 11px would have left only 15
     review line   11px  -- "191 reviews" plus five stars measures ~150px

   The two labels still too long ("Increases Hemoglobin Production", "Helps in
   Reversing Fatty Liver") ellipsise rather than wrap, so a row of cards keeps
   one baseline whatever the products in it.
   --------------------------------------------------------------------------- */
.pr_grid_item .jdgm-widget.jdgm-preview-badge,
.pr_list_item .jdgm-widget.jdgm-preview-badge {
  flex-wrap: nowrap;
}

/* Not `display`: Judge.me ships the badge with an inline `display:none` and
   reveals it from JS, so a stylesheet display would either lose to the inline
   value or force a hidden widget visible. Only the wrapping is ours. */
.pr_grid_item .jdgm-prev-badge,
.pr_grid_item .jdgm-prev-badge__stars,
.pr_grid_item .jdgm-prev-badge__text,
.pr_list_item .jdgm-prev-badge,
.pr_list_item .jdgm-prev-badge__stars,
.pr_list_item .jdgm-prev-badge__text {
  white-space: nowrap;
}

/* Judge.me draws each star as an icon-font glyph on `::before`, and sizes that
   pseudo-element itself -- a font-size on `.jdgm-star` alone changes the line
   box but not the star. Both are set, to the same value, so the glyph and the
   space it sits in shrink together. 14px is the size the widget ships with, so
   the cap leaves desktop untouched. */
.pr_grid_item .jdgm-prev-badge__stars .jdgm-star,
.pr_list_item .jdgm-prev-badge__stars .jdgm-star,
.pr_grid_item .jdgm-prev-badge__stars .jdgm-star::before,
.pr_list_item .jdgm-prev-badge__stars .jdgm-star::before {
  font-size: 12px !important;
}

.pr_grid_item .jdgm-prev-badge__stars .jdgm-star,
.pr_list_item .jdgm-prev-badge__stars .jdgm-star {
  padding: 0 1px 0 0 !important;
}

.pr_grid_item .jdgm-prev-badge__text,
.pr_list_item .jdgm-prev-badge__text {
  font-size: 11px !important;
}

.benefit-chip-cnt {
  flex-direction: column;
  gap: 2px;
}

/* The wrapper is a shrink-to-fit flex item, so without a cap it grows past the
   card instead of letting the label ellipsise. Capping it is what keeps the
   fixed size safe: a label too long for the column is trimmed rather than
   spilling over the card edge. */
.benefit-chip-wrapper {
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.benefit-chip-wrapper > div:last-child,
.benefit-chip-text {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  /* !important beats the theme's site-wide `p, div { font-size: 16px }` reset
     and, on the collection template, the `.fs-13-12` utility on the wrapper.
     Measured against all 20 labels in the catalogue at a 360px viewport, where
     the label's column is 140px: 10px leaves 18 of 20 whole, 11px only 15. */
  font-size: 10px !important;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Product page: description points read as blocks, not a bullet list
   ---------------------------------------------------------------------------
   The four points were full-width rows stacked one per line, which scans as a
   list. They are now a 2x2 grid of cards in the same sage gradient as the
   recoloured ingredient banners further down the page (#d8ecc8 -> #eff8e9),
   so the two sections read as one system.

   The grid overrides the Bootstrap `.row` / `.col-*` pair the block markup
   still emits, so no template change is needed and the block keeps working if
   a product supplies fewer than four points.
   --------------------------------------------------------------------------- */
.pr_benifits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 18px;
  gap: 10px;
}

.pr_benifits > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 0;
}

.pr_benifits .benifts_list {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d8ecc8;
  border-radius: 12px;
  background: linear-gradient(135deg, #d8ecc8 0%, #eff8e9 100%);
  gap: 10px;
}

.pr_benifits .benifts_list img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.pr_benifits .benifts_list p {
  margin: 0;
  /* !important because the theme sets `p { font-size: 16px !important }`
     site-wide, which a plain declaration cannot beat at any specificity. */
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.25;
}

@media (max-width: 575px) {
  .pr_benifits {
    gap: 8px;
  }

  .pr_benifits .benifts_list {
    padding: 9px 10px;
    gap: 8px;
  }

  .pr_benifits .benifts_list img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .pr_benifits .benifts_list p {
    font-size: 13px !important;
  }
}

/* ---------------------------------------------------------------------------
   Product page: drop the breadcrumb / product-pager strip
   ---------------------------------------------------------------------------
   The grey band under the hero held two things in one row: the
   Home > Collection > Product trail, and the prev / grid / next product pager.
   Both sit inside `.breadcrumb_pr_wrap`, so hiding the wrapper removes the
   whole band. Hiding rather than deleting the markup is deliberate -- the
   theme setting only controls the trail, so the pager would keep the empty
   strip on screen by itself.

   This does NOT affect search engines: the BreadcrumbList structured data is
   emitted as a separate JSON-LD script, not from this markup.
   --------------------------------------------------------------------------- */
.template-product .breadcrumb_pr_wrap {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Top-of-page trust strip
   ---------------------------------------------------------------------------
   Three claims in a band under the headline metafield. Rendered only when the
   Product summary section has "Show trust strip" ticked, so no other product
   page changes shape.

   The headline metafield normally repeats two of these claims as an emoji
   line ("Money Back Guarantee / Clinically Proven"). Where the strip is on and
   the editor left "Hide the line under the headline" ticked, that paragraph is
   hidden -- the strip is the same promise, stated properly. `:last-child` is
   deliberately not used: the metafield can end with an empty node.
   --------------------------------------------------------------------------- */
.hl-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 0;
  border: 1px solid #f0e6cf;
  border-radius: 12px;
  background: #fdfaf1;
  overflow: hidden;
}

.hl-trust__item {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 10px 8px;
  gap: 8px;
  text-align: left;
}

.hl-trust__item + .hl-trust__item {
  border-left: 1px solid #f0e6cf;
}

.hl-trust__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.hl-trust__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hl-trust__txt {
  min-width: 0;
}

.hl-trust__txt b,
.hl-trust__txt span {
  display: block;
  overflow-wrap: break-word;
}

.hl-trust__txt b {
  color: #111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.hl-trust__txt span {
  color: #6b6b6b;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
}

/* The regional pages carry the same three claims in Kannada, Tamil, Telugu and
   Malayalam, and those words are two to three times longer than "45-Day". At a
   110px cell they hit `overflow-wrap: break-word` and broke inside a syllable
   cluster, which is unreadable in an Indic script. Buying the text ~18px per
   cell -- smaller icon, tighter padding and gap -- keeps the breaks at spaces.
   Applied at every narrow viewport, not just the regional pages: the English
   strip has the same headroom problem at 320px. */
@media (max-width: 420px) {
  .hl-trust__item {
    padding: 8px 6px;
    gap: 6px;
  }

  .hl-trust__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }

  .hl-trust__txt b {
    font-size: 11px;
  }

  .hl-trust__txt span {
    font-size: 10px;
  }
}

/* The metafield is one rich-text blob: a heading followed by the claim line.
   Hiding the paragraphs after the heading removes the duplicate without
   touching the heading itself. */
.top_desc_outer.trust-strip-replaces-subline .metafield-rich_text_field > p {
  display: none;
}

@media (min-width: 769px) {
  .hl-trust {
    max-width: 720px;
    margin-inline: auto;
  }

  .hl-trust__item {
    padding: 12px 14px;
    gap: 10px;
  }

  .hl-trust__txt b {
    font-size: 13px;
  }

  .hl-trust__txt span {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Rating summary under the product title
   ---------------------------------------------------------------------------
   Stars are two stacked text rows: an outline row and a filled row clipped to
   the rating percentage. That renders a true fraction (4.51 of 5 is 90.2% of
   the row) instead of snapping to a half star, and it needs no icon font or
   image, so it cannot arrive late.
   --------------------------------------------------------------------------- */
/* Block-level flex, not inline-flex: the title metafield ends in running inline
   text, so an inline box would sit on the last line of the title ("... 150g
   4.5 (191 Verified Reviews)") instead of starting its own row. */
.hl-rating {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 8px 0 0;
  gap: 7px;
  color: #111;
  line-height: 1;
  text-decoration: none;
}

.hl-rating:hover .hl-rating__count,
.hl-rating:focus-visible .hl-rating__count {
  text-decoration: underline;
}

.hl-rating__stars {
  position: relative;
  display: inline-block;
  flex: none;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

.hl-rating__stars-off {
  color: #d9d9d9;
}

.hl-rating__stars-on {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #f5a623;
}

.hl-rating__score {
  font-size: 14px;
  font-weight: 700;
}

/* Separator before the count, as in the reference: a hairline rule rather than a
   typed "|", so it keeps its weight at any font size and is not read out. */
.hl-rating__count {
  padding-left: 8px;
  border-left: 1px solid #d9d9d9;
  color: #1f8a3d;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 575px) {
  .hl-rating {
    margin-top: 6px;
    gap: 6px;
  }

  .hl-rating__stars {
    font-size: 14px;
  }

  .hl-rating__score {
    font-size: 13px;
  }

  .hl-rating__count {
    font-size: 12px;
  }
}

/* The Judge.me preview badge is the first thing in the right-hand summary
   column. On desktop that column sits beside the gallery, well away from the
   new rating row -- and the new row is inside `.mobile-product-top-info`,
   which the theme hides above 768px, so desktop shows exactly one rating.

   The row is now removed on every width, not just mobile: the rating row under
   the title states the same thing with a numeric score, and two rating displays
   on one page is one too many.

   Only the two visible parts are hidden -- the Google mark and the badge's own
   star row. The `jdgm-prev-badge__rich-snippet` sibling is left alone: it
   renders nothing (it is a pair of `<meta>` tags) but it carries the
   AggregateRating microdata, which must not sit inside a hidden subtree. */
body.template-product #shopify-section-pr_summary .pr_custom_liquid > img.g_logo,
body.template-product #shopify-section-pr_summary .pr_custom_liquid .jdgm-prev-badge {
  display: none !important;
}

/* ===========================================================================
   Design audit 2026-08-06 -- fixes
   Findings and measurements:
   ~/.gstack/projects/vineeththattamparambil/designs/design-audit-20260806/
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HIGH-2 -- the primary CTA had no visible focus state
   ---------------------------------------------------------------------------
   `.single_add_to_cart_button` computed `outline-style: none` with nothing put
   back, so a keyboard user tabbing to the most important control on the page
   saw no change at all. `:focus-visible` rather than `:focus` so a mouse click
   does not leave a ring behind.

   The ring is drawn with box-shadow, not outline: the button is a pill with a
   large border-radius and `outline` follows the border box on older WebKit,
   which would draw a rectangle around a rounded button.
   --------------------------------------------------------------------------- */
.single_add_to_cart_button:focus-visible,
.btn--black.prc button:focus-visible,
.btn--black.prc a:focus-visible,
.pack-card:focus-visible,
.pack-card input:focus-visible + *,
.hl-rating:focus-visible,
.product-tab-nav a:focus-visible,
.shopify-section a.button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111 !important;
}

/* The pack card is a list item; the radio inside it is what actually receives
   focus, so the ring has to be hung on the card from the input's state. */
.pack-card:has(input:focus-visible) {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111 !important;
}

/* ---------------------------------------------------------------------------
   HIGH-4 -- the sticky purchase bar covered the last 100px of the page
   ---------------------------------------------------------------------------
   The bar is `position: fixed; bottom: 0` at 100px tall with z-index 9999, and
   nothing reserved space for it, so scrolling to the true bottom of a product
   page left the final ~100px of content underneath it permanently.

   Padding rather than margin so the page background still runs to the edge.
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
  body.template-product {
    padding-bottom: 104px;
  }
}

/* ---------------------------------------------------------------------------
   MED-5 -- three text colours failed WCAG AA
   ---------------------------------------------------------------------------
     rating count  #1F8A3D on #FFFFFF  4.41  ->  #1A7434  5.03
     unit price    #8A8A8A on #F3FAF5  3.26  ->  #6B6B6B  5.03
     pack MRP      #8A8A8A on #F3FAF5  3.26  ->  #6B6B6B  5.03
   #6B6B6B is already the grey used by the pack description one line below, so
   this also removes a third near-identical grey from the card.
   --------------------------------------------------------------------------- */
.hl-rating__count {
  color: #1a7434;
}

.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .tab_per_price,
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card .tab_per_price span,
.product .swatch_pro .variations.style__circle .swatch.is-label .swatch_pr_item.pack-card p.var_compare_price {
  color: #6b6b6b;
}

/* ---------------------------------------------------------------------------
   MED-8 -- tablet portrait left half of the screen was empty
   ---------------------------------------------------------------------------
   Bootstrap's `col-md-6` splits the product into two 50% columns from 768px up.
   The sticky-sidebar script does not engage at that width (the gallery column
   measured `position: static` at 768), so the gallery scrolled away at about
   1200px while the summary column ran on for another 1900px -- half the screen
   was blank white for most of the page.

   Single column until 992px, which is where the two columns actually have the
   width to hold their content.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .template-product .pr_sticky_content > .product-images,
  .template-product .pr_sticky_content > .product-infors {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .template-product .pr_sticky_content > .product-infors {
    margin-top: 24px;
  }
}

/* ---------------------------------------------------------------------------
   MED-9 -- WhatsApp launcher only had clearance on phones
   ---------------------------------------------------------------------------
   The earlier clearance rule was scoped to `max-width: 575px`, so from 576px up
   the launcher sat at its default `bottom: 100px` and covered whatever was
   under it -- at tablet width, the benefit cards.

   Above 575px the sticky purchase bar is hidden, so the launcher does not need
   lifting; it needs moving out of the content column. Left side at those widths
   keeps it clear of the text while staying reachable.
   --------------------------------------------------------------------------- */
@media (min-width: 576px) {
  /* Scoped to the product template. The finding was measured there, and moving
     the launcher on every page of the site is a bigger change than the review
     covered. */
  body.template-product #wa-chat-btn-root {
    right: auto !important;
    left: 16px !important;
    bottom: 24px !important;
  }
}

/* ---------------------------------------------------------------------------
   MED-10 -- interactive elements below the 44px touch minimum
   ---------------------------------------------------------------------------
   Measured at 390px: gallery prev/next 20x40, social share links 11x28, the
   Judge.me badge link 237x14, pack radios 13x13.

   The hit area is grown with a transparent `::before` overlay rather than by
   growing the control, so nothing moves visually. `position: relative` is set
   on each so the overlay is measured against the control itself.
   --------------------------------------------------------------------------- */
/* The Flickity buttons are deliberately NOT in this list. They are already
   `position: absolute` (from `.flickityt4s-button` in pre_theme.min.css), which
   is what pins them to the left and right edges of a carousel -- forcing them
   to `relative` for the overlay dropped them back into the flow and left the
   testimonial arrows sitting under the card at the left margin. An absolutely
   positioned element is a containing block for its own pseudo anyway. */
.template-product .social-share a,
.template-product .jdgm-widget.jdgm-preview-badge > a,
.template-product .hl-rating {
  position: relative;
}

.template-product .flickityt4s-prev-next-button::before,
.template-product .social-share a::before,
.template-product .jdgm-widget.jdgm-preview-badge > a::before,
.template-product .hl-rating::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

/* Pack cards carry no radio input of their own -- the swatch list stores state
   on the `li` and a hidden `input[name=id]` on the form -- and the card itself
   measures 165x328, so there is nothing to enlarge there. Verified by clicking
   through to Pack of 3: selection and the variant id both still update. */

/* ---------------------------------------------------------------------------
   MED-6 -- four golds and three greens were in play at once
   ---------------------------------------------------------------------------
   Measured on the product page:
     gold   #FFC62E  #EBB708  #D2AE35  #FEC42D
     green  #17D94A  #8ABF00  #1F8A3D
   Four golds do not read as four colours, they read as one colour that is
   slightly wrong in places. #D2AE35 is the theme's own accent (it is what the
   logo and the settings use), so the other three are normalised to it; the
   greens settle on #1F8A3D, which is the tick green already in the benefit
   list. Values are declared as variables so the next one is a one-line change.

   Only the specific elements measured are moved. Nothing is rewritten by a
   blanket colour swap -- #FF7777, #FC655E and #FF4E00 are genuinely different
   roles (sale flags, alerts) and are left alone.
   --------------------------------------------------------------------------- */
:root {
  --healeo-gold: #d2ae35;
  --healeo-green: #1f8a3d;
}

.template-product .type_image_text a,
.template-product .text_recommanded,
.template-product .jdgm-star {
  color: var(--healeo-gold);
}

.template-product .benifts_list svg path[fill="#398939"],
.template-product .pack-card__check {
  fill: var(--healeo-green);
}

/* ===========================================================================
   Round 2026-08-06 (v2 theme)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 -- the weight claim in the top headline reads as one flat sentence
   ---------------------------------------------------------------------------
   The headline comes from a rich-text metafield, so the number cannot be marked
   up at source without editing product data. A small script in the section
   wraps the first "<number> <unit>" token; this styles it.
   --------------------------------------------------------------------------- */
.hl-figure {
  color: #ff4e00;
  font-weight: inherit;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3 -- the testimonial carousel arrows were empty circles
   ---------------------------------------------------------------------------
   `pre_theme.min.css` sets `.flickityt4s-prev-next-button .flickityt4s-button-icon
   { display: none }` -- the theme suppresses Flickity's own SVG chevron because
   its default carousels draw an icon-font arrow instead. The testimonial arrows
   were restyled into circles here, which have no icon-font arrow, so nothing was
   drawn inside them. Putting Flickity's own SVG back is the smallest fix and it
   scales with the button.
   --------------------------------------------------------------------------- */
.product_testimonial .flickityt4s-prev-next-button .flickityt4s-button-icon {
  display: block !important;
  /* Flickity's own geometry. The `next` icon is the same path rotated 180deg
     about the viewBox centre, so an off-centre box makes the rotated copy sit
     differently from the unrotated one -- 60%/20% keeps both centred. */
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  fill: #111;
}

/* The theme also draws an arrow of its own, as an icon-font glyph in the
   button's `::before` -- `style.min.css`:

     .flickityt4s-prev-next-button:before { content: "\e686"; font-family: Pe-icon-7-stroke; ... }
     .flickityt4s-enabled:not(.flickityt4s-rtl) .flickityt4s-prev-next-button.next:before { content: "\e684" }

   The tap-target rule further up this file already blanks that `::before`, but
   only at two classes of specificity. It beats the first rule (one class) and
   loses to the second (four), so the glyph stayed on the `next` button alone:
   a small thin chevron sitting on top of Flickity's SVG, which read as a double
   arrow. Blanked here for both arrows -- the SVG above is the one arrow these
   circles are meant to show. `!important` rather than a longer selector: the
   theme rule is more specific than anything scoped to this section can reach
   without stacking four classes of its own.
   The `::before` box itself is left alone; it is the 44px tap target. */
.product_testimonial .flickityt4s-prev-next-button::before {
  content: "" !important;
}

/* ---------------------------------------------------------------------------
   7 -- the live-activity lines were two plain sentences
   ---------------------------------------------------------------------------
   "425 people are viewing" and "550 sold in last 88 hours" were body text with a
   small line-art icon, so the two strongest urgency signals on the page read as
   filler. They are chips now -- one warm, one cool -- sitting on one row so they
   are read as a pair rather than as two more sentences.

   The theme's own `<i class="las la-eye">` / `la-fire` icons stay: they are
   already the right icons and they carry the block's colour setting.
   --------------------------------------------------------------------------- */
.template-product .pr_counter,
.template-product .pr_flash_sold {
  /* inline-block, not inline-flex: the theme's copy is one text run with the
     number and the noun wrapped in their own spans, and flex drops the
     whitespace between items -- "406Peopleare viewing this right now". */
  display: inline-block !important;
  padding: 7px 12px;
  border-radius: 40px;
  margin: 0 6px 8px 0;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3;
  /* No flex gap: the theme wraps the number and the noun in their own spans, so
     a gap lands between every word ("915  People  are viewing") rather than
     only around the icon. The emoji is part of the text and spaces itself. */
}

.template-product .pr_counter {
  border: 1px solid #d9e7f7;
  background: linear-gradient(135deg, #eef5ff 0%, #f7fbff 100%);
  color: #14508c !important;
}

.template-product .pr_flash_sold {
  border: 1px solid #ffdccd;
  background: linear-gradient(135deg, #fff1e8 0%, #fff8f4 100%);
  color: #b33900 !important;
}

.template-product .pr_counter i,
.template-product .pr_flash_sold i {
  display: none;
}

.template-product .pr_counter .count,
.template-product .pr_flash_sold .nt_pr_sold,
.template-product .pr_flash_sold .nt_pr_hrs {
  color: inherit !important;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   6 -- the EMI widget lands mid-price-block, before the pack has been chosen
   ---------------------------------------------------------------------------
   Snapmint injects its widget from its own script, so it has no stable class we
   can rely on; the section script finds it by content and moves it. This only
   spaces the result once it has been moved.
   --------------------------------------------------------------------------- */
.hl-emi-slot {
  margin: 12px 0 4px;
}

.hl-emi-slot:empty {
  display: none;
}

/* The rating row is rendered in two containers -- the mobile title block and the
   desktop summary column -- because each is shown at a different width. Below
   768px both containers are on screen at once (the summary column simply stacks
   under the title block), so the summary copy is dropped there; above 768px the
   theme hides `.mobile-product-top-info` and the summary copy is the only one. */
@media (max-width: 767px) {
  #shopify-section-pr_summary .hl-rating {
    display: none;
  }
}

#shopify-section-pr_summary .hl-rating {
  margin-bottom: 4px;
}

/* The theme's copy wraps one word in `.cd` (its "dark" colour utility), which
   left a black word inside an otherwise blue chip. One chip, one colour. */
.template-product .pr_counter *,
.template-product .pr_flash_sold * {
  color: inherit !important;
}

/* ---------------------------------------------------------------------------
   Quality-test list -> cards
   ---------------------------------------------------------------------------
   The five test results were plain paragraphs inside the section's rich text:
   a tick emoji, a bold label, a line break, an indented count. Read as a wall,
   not as five separate proofs, which is what they are.

   They are cards now, in the same sage gradient as the benefit grid at the top
   of the page and the recoloured ingredient banners, so the three places the
   page makes an evidence claim look like one system.

   Selected with `:has(> strong)` rather than by position: the rich text is
   editor-owned and paragraphs get added and reordered there. The intro
   paragraph has no bold child and the "View Sample Report" paragraph holds a
   link, so only the five results match -- and a sixth added later matches too,
   with no CSS change.
   --------------------------------------------------------------------------- */
#certification .shadow_wrap p:has(> strong) {
  padding: 11px 14px;
  border: 1px solid #d8ecc8;
  border-radius: 12px;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #d8ecc8 0%, #eff8e9 100%);
  color: #4a4a4a;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.5;
}

#certification .shadow_wrap p:has(> strong) strong {
  color: #14512c;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* The editor's rich text carries an empty paragraph between the intro and the
   first result, which becomes a stray gap once the results are cards. */
#certification .shadow_wrap p:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   Type scale
   ---------------------------------------------------------------------------
   The page had one heading size doing every job: `.section-title`,
   `.widget-title`, `.swatch__title` and the rich-text section headings all
   computed 24px/700, at 390px AND at 1440px -- a phone and a desktop were
   reading the same size, and a card title inside a section was as loud as the
   section it sat in.

   Four roles, two steps:

                        mobile   desktop
     section title        24        30
     sub / card title     19        21
     body                 16        16
     caption / label      12        13

   SCOPE. Two halves, and both are needed. `body.template-product` alone also
   covers the footer, the cart drawer and the login drawer, which share the
   theme's `.widget-title` class and are not this page's content. The
   `shopify-section-template--` prefix alone matches every template, so the
   collection and page templates would move too. Together they mean: the
   product template's own content sections, and nothing else.

   Deliberately NOT included: the pack cards, the trust strip, the activity
   chips, the 2x2 benefit grid and the collection product cards. Those sizes
   were each measured against the width of their own box (a pack card's text
   column is 165px, a benefit card's is 112px), so a global size would put the
   text back outside its container. They are component scales and they answer
   to their component.
   --------------------------------------------------------------------------- */
.template-product [id^="shopify-section-template--"] .section-title,
.template-product [id^="shopify-section-template--"] .shadow_wrap > h3,
.template-product [id^="shopify-section-template--"] h3.h4,
.template-product [id^="shopify-section-template--"] [class*="ai-additional-info-title"],
.template-product #shopify-section-pr_summary .section-title {
  font-size: 24px !important;
  line-height: 1.25;
}

.template-product [id^="shopify-section-template--"] .widget-title,
.template-product [id^="shopify-section-template--"] .swatch__title,
.template-product [id^="shopify-section-template--"] .product-benefit_list .benefit_content h5.widget-title,
.template-product #shopify-section-pr_summary .widget-title,
.template-product #shopify-section-pr_summary .swatch__title,
.template-product #shopify-section-pr_summary .swatch_pro .variations .swatch.has-pack-cards .swatch__title {
  font-size: 19px !important;
  line-height: 1.3;
}

/* Body copy settles on the 16px the rest of the page already uses. The FAQ
   answers were the one exception at 15px; they carried !important to beat the
   theme's site-wide `p { font-size: 16px !important }`, so they need it again
   to come back up. */
.template-product #faq .sp-tab-content p,
.template-product #faq .sp-tab-content li,
.template-product #faq .sp-tab-content {
  font-size: 16px !important;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .template-product [id^="shopify-section-template--"] .section-title,
  .template-product [id^="shopify-section-template--"] .shadow_wrap > h3,
  .template-product [id^="shopify-section-template--"] h3.h4,
  .template-product [id^="shopify-section-template--"] [class*="ai-additional-info-title"],
  .template-product #shopify-section-pr_summary .section-title {
    font-size: 30px !important;
  }

  .template-product [id^="shopify-section-template--"] .widget-title,
  .template-product [id^="shopify-section-template--"] .swatch__title,
  .template-product [id^="shopify-section-template--"] .product-benefit_list .benefit_content h5.widget-title,
  .template-product #shopify-section-pr_summary .widget-title,
  .template-product #shopify-section-pr_summary .swatch__title,
  .template-product #shopify-section-pr_summary .swatch_pro .variations .swatch.has-pack-cards .swatch__title {
    font-size: 21px !important;
  }
}

/* Known exception. The benefit carousel sets its own
   `font-size: clamp(17px, 5vw, 21px) !important` from a section `<style>` with
   an ID selector, so it outranks anything written here without an even more
   specific selector. It is left alone on purpose: it is a fluid version of the
   same sub-title role -- 21px at desktop, exactly the step below, and 19.5px at
   390px against this scale's 19px. Half a pixel is not worth a specificity
   fight with a rule that exists because that card is narrow. */

/* ---------------------------------------------------------------------------
   Price row above the pack cards -- removed
   ---------------------------------------------------------------------------
   The same price was on screen three times at once: this row, the selected pack
   card, and the sticky bar. It also sat between the benefit cards and the pack
   chooser, where it answered a question the shopper had not asked yet.

   Hidden rather than removed from the block list: the `pricereview` block also
   carries the review markup the theme wires up, and this row is the only part
   of it that needed to go.

   The child combinator is load-bearing. There are TWO `.price-review` rows and
   the sticky purchase bar is itself rendered inside `#shopify-section-pr_summary`,
   so a descendant selector hides the bar's price as well:

     #shopify-section-pr_summary > .price-review          <- the in-page row
     #shopify-section-pr_summary   .btn--black.prc
                                     .stickydiv
                                       .price-review      <- the sticky bar's

   Only the first is a direct child, so `>` separates them without a :not().
   --------------------------------------------------------------------------- */
.template-product #shopify-section-pr_summary > .price-review {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Pincode / "Deliver to" widget -- keep it inside the column
   ---------------------------------------------------------------------------
   The widget is an app embed and it renders only for Indian visitors, so its
   markup could not be read from here. What the screenshot shows is a row whose
   input plus "Check" button is wider than the column, with the button clipped
   at the right edge.

   The section script tags the widget's own outer block with `.hl-pin` once it
   appears; these rules then make the row fit -- border-box so padding counts
   inside the width, wrap so the button drops under the input instead of off the
   edge, and a width cap on the input itself, which is the usual culprit.

   Every rule is a containment, not a restyle: if the widget already fits, none
   of them change how it looks.
   --------------------------------------------------------------------------- */
.hl-pin,
.hl-pin * {
  max-width: 100%;
  box-sizing: border-box;
}

.hl-pin {
  overflow-wrap: break-word;
}

.hl-pin form,
.hl-pin [class*="row"],
.hl-pin [class*="flex"],
.hl-pin [class*="input"] {
  flex-wrap: wrap;
  row-gap: 8px;
}

.hl-pin input {
  min-width: 0;
  flex: 1 1 60%;
}

.hl-pin button,
.hl-pin a[role="button"],
.hl-pin [class*="btn"],
.hl-pin [class*="check"] {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Compaction
   ---------------------------------------------------------------------------
   Measured at 390x844 the page ran 20.7 screens. The cuts below are the ones
   that remove space rather than content:

     #nt_content padding-bottom 174 -> 0   the theme reserved room for the old
                                           sticky bar; `body.template-product`
                                           now reserves 104px for the real one,
                                           so this was double-counted
     .mb__60 margin-bottom 60 -> 20        stacked with the above, the two put a
                                           234px void between the last section
                                           and the footer
     section seams 28 -> 18 per side       ten seams
     .shadow_wrap padding 20 -> 14
     .txt_col_img margin-top 30 -> 16      the gap between a section's image and
                                           its own text block

   Not touched, because they are content and not space: the four full-width
   section images (a 1:1 crop each, ~360px on a phone) and the review widget
   (3797px, about a fifth of the page). Both are real levers -- a 4:3 crop would
   return ~360px and paging the reviews would return far more -- but both change
   what is on the page, not how much air is around it.
   --------------------------------------------------------------------------- */
body.template-product #nt_content {
  padding-bottom: 0 !important;
}

/* Not a direct child: the cart app wraps it in `.icartShopifyCartContent`. */
body.template-product #nt_content .mb__60 {
  margin-bottom: 20px !important;
}

@media (max-width: 767px) {
  .template-product .txt_col_img .shadow_wrap,
  .template-product .shadow_wrap {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .template-product .txt_col_img {
    margin-top: 16px !important;
  }

  .template-product .mobile-product-top-info {
    margin-top: 12px !important;
  }
}