/** Shopify CDN: Minification failed

Line 1184:0 Unexpected "}"
Line 1445:32 Expected identifier but found "!"
Line 4030:20 Unexpected "{"
Line 4030:21 Expected identifier but found "%"
Line 4042:22 Unexpected "{"
Line 4042:23 Expected identifier but found "%"
Line 4120:20 Unexpected "{"
Line 4120:21 Expected identifier but found "%"
Line 4136:22 Unexpected "{"
Line 4136:23 Expected identifier but found "%"
... and 8 more hidden warnings

**/
         /* Coupon Container Layout */
    .coupon-card {
    
      height: 107px;
      position: relative; /* Keeps absolute elements positioned relative to this card */
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-end; /* Pushes the text content to the right */
    }

    /* The actual gradient background card that cuts off the percent stamp cleanly */
    .coupon-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
     border-radius: 16px;
background: linear-gradient(89deg, #882F4F 2.65%, #E14D83 99.61%);
      overflow: hidden; /* Clips the background badge decoration */
      z-index: 1;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

   

    /* Left Bottom Image Positioning */
    .coupon-card img {
      position: absolute;
     left:0;
     bottom:0;
aspect-ratio: 1/1;
      object-fit: cover;
      z-index: 3;        /* Places it firmly on top of the card base layer */
      mix-blend-mode: luminosity;
    }

    /* Right Side Content Alignment */
    .coupon-content {
      position: relative;
      z-index: 2;        /* Sits cleanly over background layers */
      width: 180px; 
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* Main Title: ₹200 off */
    .coupon-title {
      color: #EEF2F4;
      font-family: 'Nacelle', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 16px;
      font-weight: 600;
    }

    /* Subtitle: Special offer on your treatment */
    .coupon-subtitle {
      color: #EEF2F4;
      font-family: 'Nacelle', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 12px;
      font-weight: 300;
      margin-bottom: 6px;
      opacity: 0.9;
    }

    /* Copy Button Layout */
    .coupon-btn {
      display: flex;
      width: 129px;
      padding: 4px 8px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 16px;
      border: 1px solid #EEF2F4;
      background: transparent;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .coupon-btn:hover {
      background: rgba(238, 242, 244, 0.1);
    }

    /* Button Text Styling */
    .coupon-btn-text {
      color: #EEF2F4;
      font-family: 'Nacelle', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 11px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .coupon-btn svg {
      flex-shrink: 0;
      display: block;
    }
    .popup-carousel-image
    {
            width: 100%;
    height: auto!important;
        aspect-ratio:600/530;
    }
   .dermtalologis-review
 {

display: flex;
width: 100%;
padding: 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 16px;
border: 1px solid var(--Alias-neutral-neutral-200, #B5BBC0);
margin: 4vw auto 2vw;
 }
.individual-insight-card {
   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #E1E8ED;
    border-radius: 12px;
    padding: 20px;
    flex-shrink: 0;
    width: 90%;
    box-sizing: border-box;
    transition: background-image 0.3s ease-in-out;
}
 .note-title
 {
color: var(--Alias-error-error-500, #F44336);
font-family: Nacelle;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 131.6%; /* 18.424px */
text-transform: uppercase;
text-align:left;
width:100%;

 }
 .note-description
 {

  color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 131.6%; /* 21.056px */
margin-left:0;
margin-right:auto;
 }
.product-header-arrow,.mobile-customise-plan {
    display: none; /* Hidden on mobile by default */
  }
.doctor-promo-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligns arrows with the bottom of the title */
    width: 90%;
    margin: 5vw auto 0;
}

/* Arrows Container */
.doctor-nav-arrows {
    display: none; /* Hidden on mobile */
    gap: 12px;
    margin-bottom: 10px;
}

/* Arrow Button Styling */
.nav-arrow-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* The light-grey highlight effect from your image */
.nav-arrow-btn:hover, .nav-arrow-btn:active {
    background: #EAECEE; /* Matches the background of your light cards */
}
.review-widget {
    background: #fff;
    width: 95%;
    padding: 24px;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vw;
    padding-bottom: 40vw;
}  
.widget-header {
    text-align: center;
    margin-bottom: 25vw;
    display: block;
    border-bottom: none;
    width: 100%;
    padding: 0;
}
.platform-title {
    color: var(--black);
    font-size: 28px;
    font-weight: 300!important;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.platform-title .title-top {
    display: block;
    font-size: 24px;
    font-weight: 300!important;
    line-height: 1.2;
}
.platform-title .title-bottom {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 4px;
}
.summary-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}
.rating-value {
    color: var(--Alias-secondary-secondary-500, #567C8D);
    font-family: Nacelle;
    font-size: 18px;
    font-style: normal;
    font-weight: 600!important;
    line-height: normal;
}
.review-count-text {
    color: var(--gray-neutral);
    font-size: 14px;
    font-weight: 300!important;
    text-align: center;
}
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.review-card:not(.review-hidden) {
    animation: fadeIn 0.4s ease-in;
}
.review-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid #B5BBC0;
    padding-bottom: 4vw;
}
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 6px;
}
.user-name {
    color: var(--black);
    font-size: 18px;
    font-weight: 600!important;
}
.review-date {
    color: #a0a0a0;
    font-size: 0.875rem;
    font-weight: 300;
}
.small-stars svg {
    width: 80px;
    height: auto;
    display:block;
}
 .review-text {
    color: var(--black);
    font-size: 14px;
    font-weight: 300!important;
    line-height: 1.4;
}
.review-hidden {
    display: none;
}
.widget-footer {
    display: flex;
    justify-content: center;
}
.load-more-btn {
    display: inline-flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: var(--blue-secondary);
    font-family: 'Nacelle', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600!important;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 8px;
    border: 1px solid var(--Alias-secondary-secondary-500, #567C8D);
}
  .supporter-container {
    width: 90%;
     
    border-radius: 16px;
     
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Nacelle', sans-serif;
    margin-top:0vw;
   
    margin-left:auto;
    margin-right:auto;
}

    .coach-image {
        width: 100%;
    height: 230px;
    background-image: url(/cdn/shop/files/kashish_1.png?v=1772276336);
    background-size: cover;
    background-position: top center;
    margin: 0 auto;
    }

    .content {
             display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-top: 3vw;
     
    }

    .supporter-text {
        color: var(--black, #2F2F2F);
        font-size: 24px;
        font-weight: 300!important;
        text-transform: uppercase;
        margin-bottom: 20px;
        line-height: normal;
        width:250px;
    }

    .supporter-text strong {
      color: var(--black, #2F2F2F);
        font-weight: 600!important;
    }

    .features-list {
        list-style: none;
        padding: 0;
        
    }

    .feature-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        color: #2F2F2F;
        font-size: 0.875rem!important;
        font-weight: 300!important;
        line-height: normal;
    }

    .feature-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .chat-button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 12vw;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5vw;
        margin-bottom: 6vw;
        border-radius: 8px;
background: #2F2F2F;
        text-decoration: none;
    }
 .treatment-verification-section {
  max-width: 100%;
  margin-top:14vw;
}
.meter-track {
    position: relative;
    height: 8px;
    width: 100%;
     border-radius: 4px;
background: linear-gradient(100deg, #59FF7D 7.34%, #FFE357 50%, #FF4E4E 92.66%);
     
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:4vw;
  }

  /* The White Separators */
  .meter-segment {
    flex: 1;
    height: 100%;
    border-right: 2px solid #fff;
  }
  
  .meter-segment:last-child {
    border-right: none;
  }

  /* The Thumb (The Dot) */
  .meter-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #6F8F9E ; /* Match the darkest teal */
    border: 1px solid #CBD6DC;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    /* Transition for smooth movement if value changes */
    transition: left 0.5s ease-out; 
  }

  /* 3. The Numbers Below */
  .meter-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: #8898a5;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    /* Offset negative margins to align perfectly with the grid lines */
    margin-left: -4px; 
    width: calc(100% + 8px);
  }

  .meter-labels span {
    width: 20px;
    text-align: center;
    font-weight:300!important;
  }
.banner-container img {
  width: 100%;
  height: auto;
  
}

.badges-container {
  width: 90%;
    height: 90px;
  border-radius: 15.733px;
background: var(--Foundation-pink-pink-50, #FEEEF4);
    /* margin: 0 auto; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
    margin-top: 8vw;
    margin-left: auto;
    margin-right: auto;
}

.badge-item {
  width: 58px;       /* As per your requirement */
  height: 66px;      /* As per your requirement */
  aspect-ratio: 29/33;
  object-fit: contain;
}

 
 .ayurveda-image.active-standard {
    border-radius: 8px!important;
border: 1px solid var(--Foundation-pink-pink-800, #882F4F);
background: var(--Foundation-pink-pink-100, #FDCADD);
    padding: 5px;
}
.acne-in-man-container {
  width: 90vw; 
  overflow: hidden; /* Prevents layout "bleeding" */
   margin:15vw auto;
}

.acne-in-man {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* Centers it if the container is wider */
}
 /* --- Recommendation FAQ CSS --- */
   :root {
  --Alias-primary-primary-300: #CCE4EF;
  --text-dark: #2F2F2F;
}
/* Order Process Section Container */
.order-process-section {
    width: 50vw;
    /* Max-width set to match mobile design, remove if you want full width */
    padding: 24px 0 0px 0px; /* Left padding aligns text, no right padding for scroll bleed */
    border-radius: 8px;
    background: none;
    box-sizing: border-box;
    overflow: hidden;
    margin:5vw auto;
}

/* Section Title */
.order-process-title-mobile {
    color: #2F444E;
    font-family: 'Nacelle', sans-serif;
    font-size: 1.25rem; /* Converted 28px to rem */
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-right: 20px; /* Prevent text hitting edge */
    text-align:center;
}

.order-process-title-mobile strong {
  font-size:1.5rem;
    font-weight: 600!important; /* Bold weight for second line */
    display: block;
}
.order-process-title-desktop
{
  display:none;
}

/* Horizontal Scroll Container */
.order-process-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px; /* Spacing for scrollbar */
    padding-right: 20px; /* End spacing */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
    margin-top:4vw;
}

.order-process-scroll::-webkit-scrollbar {
    display: none; /* Hide scrollbar Webkit */
}

/* Individual Card */
.process-card {
    width: 100%;
    
    flex-shrink: 0;
 border-radius: 16px;
background: linear-gradient(133deg, #882F4F 75.37%, #E14D83 95.03%);
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    margin-top:5vw;
}
.step-number
{
    color: var(--Foundation-pink-pink-100, #FDCADD);
 
font-family: Nacelle;
font-size: 2.375rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
/* Card Text */
.process-card-text {
 color: var(--Foundation-pink-pink-50, #FEEEF4);
font-size: 1rem;
font-style: normal;
font-weight: 300!important;
line-height: normal;
    z-index: 2;
    max-width: 100%;
}

.process-card-text strong {
    font-weight: 600;
    display: block;
}

/* Card Image */
.process-card-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 168px;
    height: 150px;
    object-fit: contain;
    object-position: bottom right;
    z-index: 1;
    pointer-events: none;
}
.medical-support-section {
    width: 90%;
    max-width: 380px; /* Per requirement */
    /* height: 462px; Removed fixed height to prevent text overlap on small screens, used min-height instead */
    min-height: 462px; 
    border-radius: 8px;
    border: 1px solid #B5BBC0;
    background: #FCFAF9;
    margin: 0px auto; /* Centered with spacing */
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .medical-title {
    color: #2F2F2F;
    font-family: 'Nacelle', sans-serif;
    font-size: 1.5rem; /* 28px */
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 32px;
  }
  .medical-title strong
  {

     font-weight: 600!important;
  }
  .medical-list-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .medical-list-item {
    display: flex;
    gap: 3px;
    padding-bottom: 24px;
    border-bottom: 1px solid #B5BBC0;
  }

  /* Remove border for the last item */
  .medical-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .medical-number {
    color: #2F2F2F;
    font-family: 'Nacelle', sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: 20px; /* Ensures alignment */
  }

  .medical-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .medical-item-title {
    color: #2F2F2F;
    font-family: 'Nacelle', sans-serif;
    font-size: 1rem; /* 16px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform:none;
    margin: 0;
  }

  .medical-item-desc {
         color: #2F2F2F;
    font-family: 'Nacelle', sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.4;
    /* margin: 0; */
    
  
  }
/* Replace '.parent-wrapper-class' with the actual parent class name */
.parent-wrapper-class.has-image .icon-button-container {
    display: none!important;
}
.buy-label
{
font-weight:600;

}
 .treatment-banner-img {
    width: 90%;
     height:auto;
    display: block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:2vw;
}
.supportive-care-card {
  display: none;
}

.product-qty-wrapper
{
display: flex;
width: 100%;
padding: 4px 8px;
justify-content: space-between;
align-items: center;
border-radius: 4px;
border: 1px solid #939CA4;
}
.product-qty-value
{
    color: #2F2F2F;
font-family: Nacelle;
font-size:  1rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
 svg {
    fill: #2f2f2f;
}
 
/* ==============================
   SUPPORTIVE CARE
================================ */

.supportive-care-wrapper {
  background: #E7F3F8;
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  margin: 16px auto;
}

.supportive-care-header {
   display: flex;
  justify-content: space-between;
  align-items: center; 
}
.supportive-header-nav {
      display: flex;
      gap: 8px; /* Space between arrows */
    }

    .supportive-nav-btn {
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 8px 12px; /* Touchable area padding */
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px; /* Ensure radius is present for smooth transition */
      transition: all 0.2s ease;
    }

    /* THE REQUESTED HIGHLIGHT STATE ON CLICK */
    .supportive-nav-btn.active {
      border-radius: 8px;
      background: var(--Alias-secondary-secondary-200, #B1C3CB);
    }
.supportive-header-left {
      display: flex;
      align-items: center;
      gap: 12px; /* Space between title and tag */
    }

    .supportive-care-title {
      margin: 0; /* Reset margin for better alignment */
    }

.supportive-care-title {
    color:#2f2f2f;
   font-size: 18px;
  font-weight: 300;
  margin-top: 8px;
  text-transform: uppercase;
}
.supportive-care-title strong
{
 font-weight: 600;
}
.why-this-work-for-you-container-desktop
{    width:50vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vw;
    margin-bottom: 5vw;}
.why-this-work-for-you-container-mobile
{

   display:none;
}
.supportive-care-tag {
background: #567C8D;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: uppercase;
}

/* Horizontal Scroll */
.supportive-care-scroll {
 display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-top: 16px;
  scrollbar-width: none;
}
.supportive-care-scroll::-webkit-scrollbar {
  display: none;
}

/* Card */
.supportive-care-card {
    background: #fff;
  border-radius: 12px;
  padding: 12px;
  min-width: auto;
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
   
    
}

/* Image */
.supportive-card-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
 
  border-radius: 6px;
}

/* Text */
.supportive-card-middle {
   margin-left: 12px;
    flex: 1;
    width:auto;
}

 .supportive-card-title {
    /* Visual Styles */
    color: #2f2f2f;
    font-family: Nacelle;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 15px;
    margin: 0 0 4px;
    width: 134px;

    /* Multi-line Truncation Logic */
    display: -webkit-box;           /* 1. Required for line clamping */
    -webkit-line-clamp: 2;          /* 2. Limits text to 2 lines. Change this to 3, 4, etc. */
    -webkit-box-orient: vertical;   /* 3. Sets the box orientation */
    overflow: hidden;               /* 4. Hides the rest of the text */
    
    /* REMOVE this property if you have it: */
    /* white-space: nowrap; */ 
}

.supportive-card-price {
color: var(--Alias-neutral-neutral-500, #5E6B77);
 
  font-family: Nacelle;
  font-size: 0.75rem;
  font-weight: 300;
  margin: 0;
}

/* Add Button */
.supportive-card-add-btn {
position: absolute;
  top: 0px;
  right: 0px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #4CAF50;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
   
}

/* Main Wrapper */
.doctor-promo-section {
   border-radius: 32px;
background: #882F4F;
  padding: 20px;
  font-family: 'Nacelle', sans-serif;
  width: 100%;
}

.doctor-promo-section * {
  box-sizing: border-box;
}

.doctor-promo-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Header */
 .doctor-promo-heading
 {
  color: var(--Foundation-Blue-blue-50, #EAECEE);
text-align: center;
font-family: Nacelle;
font-size: 1.125rem;
font-style: normal;
font-weight: 600!important;
line-height: normal;
 
 }
 .doctor-promo-subheading
 {
  color: var(--Foundation-Blue-blue-50, #EAECEE);
text-align: center;
font-family: Nacelle;
font-size: 1rem;
font-style: normal;
font-weight: 300!important;
line-height: normal;
 }

/* Video Card Container */
.doctor-grid {
      display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 40vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7vw;
    margin-bottom: 7vw;
}

/* Video Card Styles */
.item-video-card {
  width: 100%; 
  /* Desktop: 48% width (to fit two side-by-side with gap) */
  flex: 1 1 45%; 
  max-width: 500px; /* Prevent them from getting too huge */
  
  aspect-ratio: 9 / 16;
  position: relative;
  border-radius: 12px;
  border: 2px solid #FFF;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  background-color: #000;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video fills the box */
  display: block;
}

/* Overlay Elements */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.1); /* Slight tint to make play button pop */
  transition: opacity 0.3s ease;
}

.play-button-wrapper {
  /* Button is centered by flexbox in .video-overlay */
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  z-index: 3;
}

.item-video-card:hover .play-button-wrapper {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Playing State (Hides Overlay/Button) */
.item-video-card.playing .video-overlay {
  opacity: 0;
  pointer-events: none;
}
     

/* 1. Hide the answer by default and prepare animation */
.recommedation-faq-answer {
    display: block!important; /* Force it to exist so it can animate */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Creates the smooth slide effect */
    color: #555;
    line-height: 1.6;
   padding-top: 0!important; /* Reset padding to 0 when closed */
    padding-bottom: 0!important;
    margin-top: 0!important;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease;
}

/* 2. Styling for the question row */
.recommedation-faq-question {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    user-select: none;
}

/* 3. Styling for the Item container */
.recommedation-faq-item {
    border-bottom: 1px solid #e0e0e0;
}

/* 4. Spacing when active */
.recommedation-faq-item.active .recommedation-faq-answer {
   opacity: 1;                /* Fade in */
    padding-top: 10px!important; /* Restore padding when open */
    padding-bottom: 15px!important;
   
}

/* 5. ICON TOGGLE LOGIC (Matches your Popup style) */
.recommedation-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Hide Minus icon by default */
.recommedation-faq-toggle .icon-minus {
    display: none;
}

/* When Active: Hide Plus, Show Minus */
.recommedation-faq-item.active .recommedation-faq-toggle .icon-plus {
    display: none;
}
.recommedation-faq-item.active .recommedation-faq-toggle .icon-minus {
    display: block;
} 
 
 
.popup-carousel-nav-btn {
    display: none; 
}
/* Product Popup Carousel */
.popup-carousel-container {
    width: 100%; position: relative; border-radius: 8px; overflow: hidden;
}
.popup-carousel-image {
    width: 100%; flex-shrink: 0; scroll-snap-align: center; object-fit: cover; height: auto;
}
/* --- NEW POPUP CAROUSEL STYLES --- */
.popup-carousel-container {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden; /* Clips the images to the rounded corners */
    
}

.popup-scroll-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
}

.popup-scroll-track::-webkit-scrollbar {
    display: none; /* Hides scrollbar (Chrome, Safari) */
}

.popup-carousel-image {
    width:  100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    object-fit: cover; /* Use 'cover' to fill the space */
    height: auto; /* Adjust this height as you like */
}

.popup-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top:6vw;
    
   
    width: 100%;
}

.popup-dot {
  width: 24px;
height: 3px;
  border-radius: 21px;
background: var(--Alias-neutral-neutral-200, #B5BBC0);
     
}

.popup-dot.active {
      opacity: 1;
    width: 24px;
    height: 3px;
    border-radius: 21px;
    background: #2F2F2F;
}
}
/* --- END NEW STYLES --- */
            
                    .gradient 
                    {
                       background:white;
                    }
                    .main-container
                    {
                       background:white;
                    }
                     .mobile-layout
                {
                   display:none;
                }
                    .username
                {
                    margin-bottom:2vw;
                    font-size: 4rem;
                        font-style: normal;
                         font-weight: 300!important;;
                        line-height: 2;
                }
                    .usernamesection {
                    color: #2F2F2F;
                    text-align: left;
                    font-family: Nacelle; 
                    margin-top: 2vw;
                    margin-bottom: 2vw;
                    margin-left: 3vw;
                    margin-left: auto;
                    margin-right: auto;
                    width: 50vw;
                    }
                    .usernamesection strong {
                        color: #2F2F2F;
                        font-family: Nacelle; 
                        font-size:4rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: 1;
                    }
                    .description-desktop   {
                        display: block;
                    color: #2F2F2F;
                    text-align: left;
                    font-family: Nacelle; 
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 600!important ; 
                    line-height: normal;

                    
                    }
                    .description-desktop  strong
                    {
                       font-size:24px;
                       margin-top:5vw;
                        margin-bottom:5vw; 
                       font-weight: bold;
                       color:black;
                    }
                    .description-desktop i 
                    {
                     font-size:24px;
 
                    }
                    .guarantee
                    {
                     font-size:24px;
                     text-align: left; 
                     margin-right:auto;
                     margin-left:5vw;
                     font-weight:700!important;
                     text-transform:uppercase;
                     color:black;
                    }
                    .description-mobile 
                    {
                    display:none;
                    }
                      .main-wrapper {
              display: flex;
              padding-bottom:2vw; 
    flex-direction: row;
    align-items: center;
    gap: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
     border-radius: 32px;
background: #FEEEF4;
        }
    
.ayurveda-container
{
border-radius: 8px;
background:  transparent;

}
   .container
   {
      padding:16px;

   }
   .container, .ayurveda-container {
            display: flex;
            width: 45%;
             
            flex-direction: column;
            margin-left: auto;
            margin-right: auto;
            gap: 8px;
             
            
 
            align-items: flex-start;
            margin-top: 2vw;
            box-sizing: border-box; /* Ensures padding is included in the width */
            border-radius: 8px;
 
        }

       
     

       


        .ayurveda-container
        {
           height:50%;
        }

        .title, .ayurveda-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            
            font-size: 1.2em;
            color: #1a1a1a;
        }
  
          
        .description-skin, .description-ayurveda {
            margin-top: -10px;
            color: #555;
            font-size: 0.9em;
        }

        .title .about-skin, .ayurveda-title .about-ayurveda {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

        #skin-diagnosis-bar {
            width: 100%;
            height: 10px;
            background-color: #ccc;
            border-radius: 5px;
            position: relative;
            margin-top: 10px;
        }
 /* Container for the clickable boxes */
#ayurveda-diagnosis-container {
    display: flex;
    flex-direction: row; /* Arrange boxes side-by-side */
    flex-wrap: wrap; /* Allow boxes to wrap to the next line */
    gap: 0px; /* Spacing between boxes */
    justify-content:  center; /* Align boxes to the start of the line */
    margin-bottom: 15px; /* Space below the boxes before the description area */
    width: 100%;
    /* Remove font styles if they were here, apply them to .ayurveda-label instead */
}

/* Individual clickable box */
.ayurveda-box {
    display: flex;
    flex-direction: column; /* Stack image and label vertically inside the box */
    align-items: center;    /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    width: 119.287px;      /* Fixed width from your example */
    height: 123.851px;     /* Fixed height from your example */
    flex-shrink: 0;        /* Prevent shrinking */
    border: 1px solid #D1D5DB; /* Lighter default border */
    border-radius: 8px;      /* Rounded corners */
    background-color: #FFF;  /* Default white background */
    cursor: pointer;
    padding: 10px;           /* Internal spacing */
    box-sizing: border-box;  /* Include padding/border in size */
    transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transitions */
    text-align: center;      /* Center the label text */
}

/* Style for the active/selected box */
.ayurveda-box.active {
    background-color: #F3F4F6; /* Light grey background like example */
    border-color: #9CA3AF;     /* Slightly darker border when active */
}

/* Style for the image/icon */
.ayurveda-image {
    width: 85px; /* Adjust size as needed */
    height: 113px;
    object-fit: contain;
    margin-bottom: 8px; /* Space between image and label */
  border-radius: 8px;
border: 1px solid var(--Foundation-pink-pink-800, #882F4F);
 
 
}

/* Style for the text label (e.g., "Stress", "Sleep") */
.ayurveda-label {
    color: #2F2F2F;
    font-family: Nacelle; /* Use your font */
    font-size: 14px;
    font-style: normal;
    font-weight: 600!important; /* Make label slightly bolder */
    line-height: normal;
}

/* NEW: Area below boxes for the active description */
#active-ayurveda-description-area {
    width: 100%; /* Take full width */
    min-height: 40px; /* Ensure it has some height even when empty initially */
    margin-top: 10px; /* Space above the description text */
    padding: 5px; /* Optional padding */
    box-sizing: border-box;
}

/* The actual description text paragraph */
#active-ayurveda-description-text {
    color: #4B5563; /* Grey text color like example */
    font-family: Nacelle; /* Use your font */
    font-size: 14px; /* Match label size or adjust */
    font-style: normal;
    font-weight: 300!important; /* Light weight like example */
    line-height: 1.4; /* Slightly more line spacing */
    margin: 0; /* Remove default paragraph margin */
    display: none; /* Initially hidden */
}

/* Hide the old inline span if it exists */
#ayurveda-diagnosis {
    display: none;
}    
        
       
        .treatment-plan
        {
        margin-left:    10vw;
    margin-right: auto;
    color: #2F2F2F;
    margin-top: 5vw;
    text-align: left;
    font-family: Nacelle; 
    font-size: 3rem;
    font-style: normal;
     font-weight: 300!important;!important;
    line-height: normal;
    text-transform: uppercase;
    width: 90%;
        }
        .treatment-plan strong  
        {
           font-weight:600!important;
        }
       
                
                    .recommedation-faq {
                max-width: 100vw;
                    margin: 0 auto;
                    font-family: Nacelle; 
                    text-align: left;
                    width: 100%;
                    background: var(--white, #FFF);
                    margin-bottom:  0vw;
                    border-radius: 12px;
                    height:auto;
               
                padding-bottom:10vw;
                }
                .recommedation-faq-sections
                {
                max-width:95vw;   
                margin-bottom:3rem!important;
                }

                .recommedation-faq-item {
                border-bottom: 1px solid #7F99A4;
                    padding: 10px;
                    cursor: pointer;
                    width: 90%;
                    
                }

                .recommedation-faq-question {
                display: flex;
                justify-content: space-between;
                font-weight: 600!important;
                font-size: 18px;
                color: #333;
                line-height:3;
                }

                .recommedation-faq-answer {
                display: none;
                padding-top: 10px;
                font-size: 18px;
                color: black;
                font-weight:300!important;
                }

                
                .recommedation-faq-titles {
                    font-size: 4rem!important;
                    font-weight: 700;
                   
                    margin-bottom: 0rem;
                text-transform:uppercase;
                max-width:95vw;
                }
                .recommedation-faq-subtitle
                {
                 font-size: 1.75rem;
                line-height:1;
                
                text-transform:uppercase;
                margin-bottom:2rem;
                font-weight:300;
                }
                .recommedation-faq-subtitle strong {
                    font-size: 1.3rem;
                    text-align: center;
                    margin: 1rem 0 2rem;
                line-height:1.3!important;
                font-weight:700;
                }

                .recommedation-faq-title-sections
                {
                line-height: 2;
                    width: 100%;
                    color:black;
                }
                .about-skin
                {
                width: 24.673px;
                height: 24.697px;
                flex-shrink: 0;
                aspect-ratio: 24.67/24.70;
                }
                .title,.ayurveda-title {
                        color: #2F2F2F;
                        font-family: Nacelle; 
                        font-size: 1rem;
                        font-style: normal;
                        font-weight: 800;
                        line-height: 28px; /* 140% */
                        text-align: left;
                        text-transform: none;
                    }

                 .doctor-card-container {
          display: flex;
    overflow-x: hidden;
    gap: 16px;
    padding: 24px;
    justify-content: flex-start;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width:50vw;
    margin: 0 auto;
     
        -ms-overflow-style: none;
    }

    .doctor-card {
       display: flex;
        padding: 8px;
        align-items: center;
        gap: 10px;
     border-radius: 16px;
background: var(--Foundation-pink-pink-50, #FEEEF4);
        flex-shrink: 0;
        width: 340px;
        scroll-snap-align: start;
    }

    .doctor-photo {
    width: 79px;
    height: 79px;
    border-radius: 2px;
    object-fit: cover;
}

    .doctor-details {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .doctor-name,
    .doctor-profession,
    .doctor-experience-year,
    .doctor-experience-value {
        color: #2F2F2F;
        font-family: Nacelle; 
        font-style: normal;
        margin: 0;

    }
    
    .doctor-name {
       font-size: 18px;
    font-weight: 600!important;
    line-height: 1.2;
    text-transform: mathauto;
     border-bottom: 1.5px solid #882F4F;

    }

    .doctor-profession {
      color: var(--Foundation-pink-pink-800, #882F4F);
font-family: Nacelle;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
    }

    .doctor-experience {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
    }

    .doctor-experience-value,
    .doctor-experience-year {
         font-size:  1rem;
        font-weight: 800!important ; 
        line-height: normal;
    }
        .heading-desktop {
            display:block;
                 display: block;
                    color: #2F2F2F;
                    text-align: left;
                    font-family: Nacelle; 
                    font-size: 3rem;
                    font-style: normal;
                   margin-top: 5vw;
                    margin-left: auto;
                    margin-right: auto;
                    width: 90%;
                    text-transform:uppercase;
                    }

                    .heading-desktop strong {
                        font-weight: 600!important ; 
                    }

                    .heading-desktop:first-line {
                         font-weight: 300!important;;
                    }
                    .heading-mobile
                    {
                      display:none;
                    }

     .stage-title-container {
            margin-bottom: 1rem;
        }
        .stage-title-container .subtitle {
            font-size: 0.75rem;
            font-weight: 600!important ; 
            color: #6b7280;
            text-transform: uppercase;
        }
        .stage-title-container .title {
            font-size: 1.875rem;
            font-weight: 700;
            color: #2F2F2F;
            text-transform: uppercase;
            margin-top:2vw;
            margin-bottom:2vw;
        }

        .week-buttons-container {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            gap: 0.5rem;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            scrollbar-width: none; /* Firefox */
        }
        .week-buttons-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }
        .week-button {
            background-color: #e5e7eb;
            color: #4b5563;
            border-radius: 8px;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 600!important ; 
            flex-shrink: 0;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .week-button:hover {
            background-color: #d1d5db;
        }

        /* Here are the requested classes from your original prompt */
        .div9 {
            background-color:#A3C4D2;
            border-radius: 8px;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 600!important ; 
            width: 100%;
            font-family:Nacelle;
            margin-top:-2vw;
            margin-bottom:2vw;
        }
        
        .div8 {
            background-color: rgba(179, 215, 231, 0.75);
            border: 1px solid  #B5BBC0 ; 
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            text-align: center;
        }
        .div8 img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 0.75rem;
        }
        .div8 .photo-text {
            font-size: 0.875rem;
            font-weight: 600!important ; 
            color: #4b5563;
        }
        
        .div10, .div11 {
            background-color: #E6EEF4;
            color: #2F2F2F;
            border-radius: 9999px;
            padding: 0.5rem;
            
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
        }
        .div10:hover, .div11:hover {
            transform: scale(1.1);
            background-color: #d1d9e0;
        }
        
        .div12 {
            border: 1px solid #B3D7E7;
            border-radius: 6px;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            font-weight: 600!important ; 
            color: #2F2F2F;
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .div12 strong {
            font-weight: 800;
        }
        .div12 .color-circle {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 4px;
        }
         #note-text
         {
           font-weight:600!important;
        }
        .progress-steps {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .progress-step {
            width: 1.5rem;
            height: 0.25rem;
            background-color: #d1d5db;
            border-radius: 9999px;
            transition: background-color 0.3s ease;
        }
        .progress-step.active {
            background-color: #5D8196;
        }

        .action-button {
            width: 100%;
            background-color: #5D8196;
            color: white;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-size: 0.8rem;
            font-weight: 600!important ; 
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-transform:uppercase;
                    margin-top: 15vw;
        margin-bottom: 15vw;
        }
        .action-button:hover {
            background-color: #4c6a7a;
        }
        .font-bold
        {
          font-weight:800;
        }
           /* Paragraph Styling */
      .treatment-note-Desktop {
                        display:flex;
                        color: #636363;
                        font-family: Nacelle; 
                        font-size: 1rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: normal;
                        text-transform: uppercase;
                        width: 90%;
                        margin-top:5vw;
                        margin-bottom:5vw;
                    }
                    .treatment-note-mobile
                    { 
                       display:none;
                     }
                .treatment-item-container {
                       display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 85%;
    margin-left: 5vw;
    margin-right:auto;
                    }

                    .treatment-item-wrapper {
                        display: flex;
                        width: 90%;
                        align-items: center;
                        gap: 16px;
                        margin-bottom: 0; /* Remove default bottom margin */
                        padding-bottom: 40px; /* Add padding to create space for the line */
                        position: relative; /* For positioning the pseudo-element line */
                    }

                    .circle-number {
                        display: flex;
                        width: 60px; /* Adjusted for a more circular appearance */
                        height: 60px; /* Adjusted for a more circular appearance */
                        padding: 10px; /* Adjusted padding */
                        justify-content: center;
                        align-items: center;
                        gap: 10px;
                        flex-shrink: 0;
                        border-radius: 50%; /* Make it a perfect circle */
                        border: 1px solid #567C8D;
                        background: #FFF;
                        font-size: 24px; /* Adjusted font size */
                    }
                .circle-number:not(.last)::after {
                        content: "";
                        position: absolute;
                    top: 61%;
                    left:18px;
                    width: 2px;  /* SVG width */
                    height: 60px; /* SVG height */
                    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='60' viewBox='0 0 2 60' fill='none'><path d='M1 0L1 60' stroke='%23567C8D' stroke-width='2' stroke-dasharray='8 8'/></svg>");
                    background-repeat: no-repeat;
                    background-size: cover;
                    transform: translateX(-50%);

                    }
                    .circle-number label {
                        color: #567C8D;
                        font-family: Nacelle; 
                        font-size: 1.2rem; /* Adjusted font size to match circle */
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: normal;
                        margin: 0 auto;
                    }

                    .treatment-content {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        flex-grow: 1; /* Allow text to take available space */
                    }
.treatment-item-wrapper {
    display: flex; /* To align the image and content */
    align-items: center;
    margin-bottom: 20px; /* Spacing between items */
}

.treatment-diagram-image {
    /* Define the size of the container to show only one circle */
    width: 60px;  /* Adjust these sizes based on your actual image */
    height: 60px; /* Adjust these sizes based on your actual image */
    
    /* Make the image itself cover its container */
    object-fit: none;
    
    /* Set the full size of the original image */
    /* This must be precise for the positioning to work */
    width: 60px;  /* Width of one circle */
    height: 300px; /* Height of the full image (5 circles * 60px) */
    
    /* You must apply a clipping effect or set a smaller container height */
    overflow: hidden; /* If using a wrapper div for the img */
}

/* Positioning for each step */
.treatment-item-wrapper:nth-child(3) .treatment-diagram-image[data-step="1"] { 
    /* The first step shows the first number (0 offset) */
    object-position: 0 0;
}

.treatment-item-wrapper:nth-child(5) .treatment-diagram-image[data-step="2"] {
    /* The second step should be offset by the height of one circle */
    object-position: 0 -60px; /* Moves the image up by 60px */
}

.treatment-item-wrapper:nth-child(7) .treatment-diagram-image[data-step="3"] {
    /* The third step should be offset by the height of two circles */
    object-position: 0 -120px; /* Moves the image up by 120px */
}

/* ... and so on for steps 4 and 5 ... */
                    .treatment-label {
                        color: #567C8D;
                        font-family: Nacelle; 
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: normal;
                        margin: 0;
                    }

                    .treatment-description {
                        color: #567C8D;
                        font-family: Nacelle; 
                         font-size:  1rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: normal;
                        margin: 0;
                    }

                    .separator-line {
                        width: 0;
                        height: 60px; /* Match the approximate spacing between circles */
                        flex-shrink: 0;
                        stroke-width: 2px;
                        stroke: #567C8D;
                        align-self: center; /* Keep it centered */
                        margin-top: -30px; /* Adjust to position between circles */
                        margin-bottom: -30px;
                    }
                    .customise-plan-desktop
                    {
                       margin-left:auto;
                     
                       margin-right:auto;
                       width:90vw;
                       margin-top:3vw;
                       font-weight:300!important;
                      
                    }
                    .customise-plan-desktop strong
                    {
                        font-weight:600!important;
 
                    }

                    .customised-plan-container
                    {
                       display: flex;
                            justify-content: center;
                            align-items: flex-start; /* Align items to the top */
                            gap: 40px; /* Space between the two columns */
                            width: 100%;
                            max-width: 1200px; /* Limit max width for better readability */
                            margin: auto;
                            margin-bottom:12vw;
                    }
                    .product-list-container-desktop {
display: flex;
  flex-direction: column; /* horizontal layout */
  flex-wrap: nowrap;   /* prevent wrapping so all in one row */
  gap: 20px;  
  width: 100%;
  overflow-x: auto;    /* enable horizontal scrolling if overflow */
  padding-top: 40px;
  margin-bottom: 5vw;
}
.product-list-container-desktop .product-grid {
  display: flex; /* Use flexbox for product layout */
  flex-wrap: wrap; /* Wrap products on new lines */
  gap: 20px; /* space between cards */
  justify-content: flex-start; 
}
.product-list-container-desktop .product-card {
 flex: 0 0 auto;      /* fixed size flex items */        /* fixed or max width for each product card */
  box-sizing: border-box;
}
.product-card {
  display: flex;
  align-items: center; /* This vertically centers the image and the details block */
  gap: 20px; /* Provides space between the image and the product details */
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  padding: 15px;
 
border: 1px solid var(--Alias-neutral-neutral-200, #B5BBC0);
  background-color: #ffffff;
  width:90%;
 
}

/* Product image container */
.product-image {
  flex-shrink: 0; /* Prevents the image from shrinking */
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden; /* Ensures the image respects the border-radius */
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the container without distortion */
}

/* Product details container */
.product-details {
  display: flex;
  flex-direction: column; /* Stacks the elements inside the details container */
  flex-grow: 1; /* Allows the details to take up the remaining space */
  gap: 8px;
  width:100%;
}

.product-details h3 {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 300!important;
  color: #333;
  margin: 0;
}
.product-description {
    min-height: 60px; /* Adjust as needed */
}

.product-used-for {
    min-height: 40px; /* Adjust as needed */
}

/* 5. Push the icons and price to the bottom */
 
.product-description,
.product-used-for {
  font-family: Arial, sans-serif;
   font-size:  1rem;
  color: #666;
  margin: 0;
}

.day-night-icons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.day-icon-wrapper,
.night-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #555;
}

.product-price {
     margin-top: auto;
  font-family: Nacelle;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-top: 5px;
}

.remove-product-button {
  display:  none;
   
}
.price-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.price-row {
  display: flex;
  justify-content: space-between; /* This is the key property */
  align-items: center; /* Aligns items vertically */
  width: 100%;
}

.price-row.shipping {
  margin-top: 15px; /* Add some space between the rows */
}

.total-label {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.total-price {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.shipping-price {
  font-family: Arial, sans-serif;
   font-size:  1rem;
  font-weight: bold;
  color: black;
  background-color: #BFBFBF;
  padding: 2px 8px;
  border-radius: 5px;
}
.you-cart
{
   font-size:2rem;
   margin-left:5vw;
   text-transform:none;
}  
.no-items-card
{
    margin-left:5vw;
}
.talk-to-coach-container-desktop {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                background-color:#B3D7E7;
                padding: 6rem 8rem;
                gap: 4rem;
                width: 100%;
                
                margin: 0 auto;
                border-radius: 0.75rem;
            }

            .heading-skin-desktop {
                flex-basis: 50%;
                font-size: 2.5rem;
                line-height: 1.2;
                text-align: left;
                color:black;
                 font-weight: 300!important;;
            }

            .heading-skin-desktop p {
                font-size: 3rem;
                line-height: 1.25;
                  font-weight: 300!important;;

            }

            .heading-skin-desktop strong {
                font-weight: 700;
            }

            .flex-col-center {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .photo-frame-desktop {
                 display: flex;
                        padding: 16px;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 16px;
                        border: 1px solid  #B5BBC0 ;  /* Example border */
                        border-radius: 8px; /* Example border radius */
                        background-color: #FFF;
                        width: 100%;
            }
            
            .coach-photo-desktop {
                width: 100%;
                height: auto;
                display: block;
            }

            .photo-description-desktop {
                padding: 1.25rem;
                text-align: left;
                margin-left:auto;
                margin-right:auto;

            }

            .skincoach-name-desktop {
                font-weight: 600!important ; 
                font-size: 1.125rem;
                margin-bottom: 0.25rem;
            }

            .skincoach-profession-desktop  {
                color: #4b5563;
                font-size: 0.875rem;
                margin-bottom: 0.5rem;
            }
            
            .skincoach-experience-desktop {
                display: flex;
                align-items: center;
                color: #6b7280;
                font-size: 0.875rem;
                text-align:left;
            }
            
            .skincoach-experience-value-desktop {
                font-weight: 700;
                color: #1f2937;
            }
            
            .skincoach-experience-year-desktop {
                margin-left: 0.25rem;
            }
            
            .talk-button-wrapper-desktop {
                margin-top: 2rem;
            }

            .talk-button {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                border: 1px solid #2F2F2F;
                color: black;
                font-weight: 600!important ; 
                text-transform: uppercase;
                padding: 1rem 2rem;
                border-radius: 10px;
 
                transition: background-color 300ms;
                cursor: pointer;
            }

           

            .talk-button svg {
                width: 1.5rem;
                height: 1.5rem;
                margin-left: 0.5rem;
            }

            .talk-button svg path {
                fill: black;
            }             
         .skin-container-desktop {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 12px;
    
    overflow: hidden;
    padding: 2rem;
    height:50%;
    margin-bottom:6vw;
    margin-top:3vw;
}

.header {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1rem;
}

.title-desktop {
     font-size: 1.75rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.subtitle-desktop {
    font-size: 1.4rem;
    color: black;
    letter-spacing: 2px;
    margin: 0;
    font-weight:600;
}

.content-desktop {
    display: flex;
    gap: 2rem;
}

.tagline-card-desktop {
    background-color: #a3c4d2;
    color: black;
    padding: 1rem;
    border-radius: 12px;
    font-size: 1.7rem;
    
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
    width:30%;
    
}
#tagline-text-desktop
{
font-weight:600;
}
.main-section-desktop {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.week-buttons-desktop {
    display: flex;
    gap: 1.5rem;
}

.week-buttons-desktop button {
    
   border-radius: 31px;
border: 1px solid #636363;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size:0.5rem;
    font-weight:600;
}

.week-buttons-desktop button.active {
    background-color: #a3c4d2;
}

.skin-journey-button-desktop button {
    background-color: #a3c4d2;
    border: none;
    width: 90%;
    padding: 1rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.image-section-desktop {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.image-description-card-desktop {
    display: flex; /* Arrange children (image-frame and text) in a row */
    align-items: center; /* Vertically align items in the center */
    background-color: #e0f2f7; /* Light blue background color */
    padding: 1rem; /* Padding around the content inside the card */
    border-radius: 8px; /* Rounded corners for the card */
    flex-grow: 1; /* Allow the card to take up available space */
    gap: 1rem; /* Space between the image and the text */
}

.image-frame-desktop {
   flex-shrink: 0; /* Prevent the image from shrinking */
    width: 80px; /* Fixed width for the image container */
    height: 80px; /* Fixed height for the image container */
    border-radius: 8px; /* Rounded corners for the image frame */
    overflow: hidden; /* Ensures image corners are also rounded */
   
}

.image-frame-desktop img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block; /* Removes extra space below image */
}

.photo-text-desktop {
    flex-grow: 1; /* Allow the text to take up remaining space */
    text-align: left; /* Align text to the left */
    font-size: 0.8rem; /* Slightly larger font for prominence */
    font-weight: 600!important ;  /* Medium weight for readability */
    color: #333; /* Darker text for contrast */
    line-height: 1.4;
    padding-right: 1rem; /* Add some padding on the right side of the text */
}

.nav-button-desktop {
    background: #E6EEF4; /* Light background for nav buttons */
    border-radius: 50%; /* Make them circular */
    width: 12%;
    height: 26%;
    display: flex;
    justify-content: center;
    align-items: center;
 
    transition: background-color 0.2s ease;
}


.note-card-desktop {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    border-left: 5px solid;
    
}

.color-circle-desktop {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.progress-steps-desktop {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.progress-step-desktop {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e0e0e0;
    transition: background-color 0.3s;
}

.progress-step-desktop.active {
    background-color: #a3c4d2;
}
 .progress-step {
            width: 5rem;
            height: 0.25rem;
            background-color: #d1d5db;
            border-radius: 9999px;
            transition: background-color 0.3s ease;
        }
.note-card-desktop, .note-card-mobile {
            display: flex;
            align-items: center;
            background-color: #f9f9f9;
            padding: 1rem;
            border-radius: 8px;
            border-left: 5px solid;
        }
        
        /* Styles to hide week container on mobile */
        .mobile-layout .week-buttons-container {
            display: none;
        }

        /* Other styles you may have */
        .mobile-layout {
            display: none;
        }
        .desktop-layout {
            display: block;
        }
        .product-header-row {
  display: flex;
flex-wrap: nowrap!important;
    align-items: center!important;
  align-items: center;
  width: 100%;
}

.product-title {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.remove-product-button {
  display:  none;
  
}
/* Main container for the entire section */
.contact-container-desktop {
  display: flex;
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Vertically aligns the content */
  padding: 50px;
  
}

.text-block {
  text-align: center; /* Centers the text within this block */
  margin-bottom: 20px; /* Adds space between text block and button */
}

.contact-container-desktop h2 {
  color: #2F2F2F;
  font-family: Nacelle; 
  font-size: 3rem;
  font-style: normal;
  font-weight: 600!important; /* Adjusted to 600 to match the boldness in the image */
  line-height: 111.2%;
  margin: 0;
}
.contact-container-desktop h2 strong {
  font-weight: 600!important; /* Bolder for "DOUBTS?" as in the image */
}

.contact-container-desktop p {
  color: #8c8c8c; /* Adjusted to a lighter gray to match the image */
  font-family: Nacelle; 
  font-size: 1.25rem;
  font-weight: 600!important ; 
  line-height: 1.5;
  margin: 20px 0;
  text-align:left;
}

.talk-to-doctor-btn-desktop {
  display: flex;
  width: auto;
  min-width: 250px;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #2F2F2F;
  background: #FFF;
  cursor: pointer;
  font-size: 20px;
  color: #2F2F2F;
  text-transform: uppercase;
  margin-top:1vw;
  margin-left:5vw;
}

.talk-to-doctor-btn-desktop .arrow {
  font-size: 24px;
  line-height: 1;
  margin-left: 10px;
}
/* =========================================
    1. ROOT VARIABLES
=========================================
*/
        :root {
            --primary-text: #2F2F2F;
            --secondary-text: #2F444E;
            --background-color: #B3D7E7;
            --border-color: #5E6B77;
            --button-background: #2F444E;
        }

/* =========================================
    2. BASE AND DESKTOP STYLES (Default)
=========================================
*/
    

        .client-container {
            width: 100%;
            max-width: 100vw;
            background-color:#ffffff ;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-sizing: border-box;
            margin-left: auto;
            margin-right: auto;
            margin-top:0vw!important;
            margin-bottom:0vw!important;
        }

        .paragraph {
            margin-top:5vw;
            margin-bottom:5vw;
            color: var(--primary-text);
            text-align: left;
            font-family: Nacelle; /* Fallback font */
            font-size: 3rem;
            font-style: normal;
             font-weight: 300!important; 
            line-height: normal;
            text-transform: uppercase;
            margin-right:auto;
            margin-left:5vw;
        }
 
        .paragraph strong {
            font-weight:600!important;
        }
        .paragraph span {
            font-weight:300!important;
        }
        
        .case-report-section {
            display: flex;
            flex-direction: column; 
            width: 90%;
            padding: 16px;
            justify-content: center;
            align-items: center;
            gap: 16px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background-color: white;
            box-sizing: border-box;
        }

        .carousel-track {
            display: flex;
            justify-content: flex-start;
            width: 100%;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .carousel-track::-webkit-scrollbar {
            display: none;
        }
        
        .carousel-slide {
            flex: 0 0 100%;
            scroll-snap-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            box-sizing: border-box;
            padding: 0 16px;
        }

        .image-row {
            display: flex;
            justify-content: center;
            gap: 16px;
            width: 100%;
        }

        .case-report-image {
            width: 20%;
            height: 100%;
            flex-shrink: 0;
            object-fit: contain;
            aspect-ratio: 1/1;
        }

        .case-report-text {
            color: var(--secondary-text);
            font-family: Nacelle; /* Fallback font */
            font-size: 1.5rem;
            text-align:left;
            font-weight: 600!important;
            line-height: normal;
            margin: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .clients-scrollbar-container {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
        }

        .clients-scrollbar-dot {
            width: 25px;
            height: 4px;
            background-color:  #ccc;
            border-radius: 2px;
            cursor: pointer;
        }

        .clients-scrollbar-dot.active {
            background-color: var(--primary-text);
            width: 45px;
        }

        .client-cta-button {
            display: flex;
            width: 50%;
            padding: 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            color: #2F2F2F;
             
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 600!important;
            line-height: normal;
            background: #2F444E;
            color:#EEF2F4;
            border: 2px solid #2F444E; /* Black border */
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease;
            margin-top: 20px;
            z-index: 10;
            margin-bottom: 8vw;
        }

        .client-cta-button:hover {
            border-radius: 8px;
            background: #B1C3CB;
            color:black;
            border: 2px solid #B1C3CB; /* Light border on hover */
        }

        .whatsapp-icon {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
 .skin-type-section
          {
          
         border-radius: 8px; 
         
         width:  44vw;  
          margin: 0px auto; 
           
        }
.treatment-plan-section-mobile
{
    display:none;
}
.customers-header-row
{
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 20px;
  width:50vw;
  margin-left:auto;
  margin-right:auto;
}
     @media(max-width:768px) {
        .individual-insight-card {
        /* Layer the image over the gradient */
        background-image: var(--bg-mobile), linear-gradient(0deg, #F9D7EA 0%, #FAF8F6 14.13%);
    }
        .insight-nav-header
        {
            display:none!important;
        }
        .data-section {
    width:  90%;
    height: auto;
    border-radius: 16px;
    /* Gradient: Pink at bottom (0%), fading to off-white by 14.13% */
    background: linear-gradient(0deg, #F9D7EA 0%, #FAF8F6 14.13%);
    margin-left:auto;
    margin-right:auto;
    /* Layout styling */
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:10vw;
   
}

/* --- Typography: Main Stat --- */
.main-text {
    color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.3;
    margin: 0;
}

.main-text strong {
    color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    display: block; /* Forces 70% to sit on its own line if needed, or remove to keep inline */
    margin-bottom: -20px;
}

/* --- Middle Section: Icon + Text --- */
.plan-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px; /* Pushes this section down */
    margin-bottom: 20px;
}

.icon svg {
    display: block;
    margin-top: 3px; /* Optical alignment with text line-height */
}

.note-text {
    color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.4;
    margin: 0;
}

/* --- Footer --- */
.footer-text {
     color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 300!important;
    line-height: normal;
    margin: 0;
    opacity: 0.8;
}
.insight-viewport.is-scrollable {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 10px 20px 20px 20px; /* Horizontal padding for a centered feel */
    -webkit-overflow-scrolling: touch;
    width:100%;
    margin:0 auto;
}

/* Hide scrollbar */
.insight-viewport::-webkit-scrollbar {
    display: none;
}

.individual-insight-card {
   background-image: var(--bg-mobile), linear-gradient(0deg, #F9D7EA 0%, #FAF8F6 14.13%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  
    border: 1px solid #E1E8ED;
    border-radius: 12px;
    padding: 20px;
    flex-shrink: 0;
    width: 90%; /* Single card takes full width */
    box-sizing: border-box;
    scroll-snap-align: center; /* Snaps to middle for better UX */
}

/* Width adjustment when multiple cards exist */
.is-scrollable .individual-insight-card {
    width: 100%; /* Slightly smaller to show more of the next card */
}
.insight-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.insight-dot {
    width: 45px;
    height: 4px;
    border-radius: 50%;
    background: #D9E1E7; /* Inactive color */
    transition: all 0.3s ease;
}

.insight-dot.active {
    background: #4E7180; /* Active color matching your icons */
    width: 45px; /* Optional: elongated active dot effect */
    border-radius: 4px;
}
      .customers-header-row
      {
        width:100%!important;
      }
      .customers-nav-arrows
      {
        display:none!important;
      }
        .dermtalologis-review
        {
       margin: -5vw auto 14vw;
    width: 98%;

        }
        .doctor-promo-header-wrapper
        {
            margin: 15vw auto 0;
        }
            .you-cart::after {
        content: "";
        flex-grow: 1;
        height: 1.5px;
        background: #B5BBC0;
        margin-left: 15px;
    }
        .treatment-plan-section-mobile
{
    display:block;
    margin:12vw auto -10vw;
}
        .right-sticky-column {
    display:none;
  }
        #product-list-mobile {
    display: flex;
    flex-direction: row!important;
    gap: 16px;
}
        .doctor-promo-heading
        {
            font-size:18px!important;
        }
        .main-wrapper
        {
            width:90%!important;
        }
        .mobile-customise-plan
        {
            display:block;
        }

      .why-this-work-for-you-container-mobile
{   display:block; 
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  
    margin-bottom: 10vw;}
 
 .why-this-work-for-you-container-desktop
{

   display:none;
}
          .diagnosis-container
    {
          text-align:center;
          padding-top:12px;

    }
        .treatment-banner-img-mobile,.acne-in-man-mobile
        {
          display:block;
        }
        .treatment-banner-img-desktop,.acne-in-man-desktop
        {
            display:none;
        }
        .desktop-main-layout {
        display: block;
    }
     
        /* =========================================
   START: Product Popup Styles
========================================= */
  .medical-item-desc {
         color: #2F2F2F;
    font-family: 'Nacelle', sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.4;
    /* margin: 0; */
    margin-left: -6vw;
  
  }
.order-process-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px; /* Spacing for scrollbar */
    padding-right: 20px; /* End spacing */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
    margin-top:10vw;
}
/* Hide the dots container */
.order-process-section {
    width: 90%;
    /* Max-width set to match mobile design, remove if you want full width */
    max-width: 380px; 
    margin: 18vw auto 0;
    padding: 0; /* Left padding aligns text, no right padding for scroll bleed */
    border-radius: 8px;
    background: none;
    box-sizing: border-box;
    overflow: hidden;
}
.diagnosis-container
{
       padding-top: 12px;
    text-align: center;
    font-weight: 600!important;
    border-radius: 8px;
    
    padding-bottom: 10vw;
   

}
 .treatment-banner-img
{
    margin-bottom:0vw;
}
 .doctor-promo-section
 {
    margin-top:10vw;
    width:90vw;
    margin-left:auto;
    margin-right:auto;
 }
#popup-ingredients-dots, .popup-ingredients-dots {
    display: none!important;
}
/* --- Popup FAQ Section --- */
/* Active Ingredients Container */
.popup-active-ingredients-container {
  position: relative;
  margin-top: 25vw;
  width: 100%;
height: 532px;
flex-shrink: 0;
  border-radius: 12px;
  color: #2F444E;
  overflow: hidden;
  /* Transition for the background image change */
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Default background if none provided */
  background-color: #f9f9f9; 
}

/* Overlay to make text readable against background images */
.popup-active-ingredients-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  z-index: 1;
}

.popup-section-title, 
.popup-ingredients-scroll-track, 
.popup-ingredients-dots {
  position: relative;
  z-index: 2; /* Ensure content is above the background overlay */
}

.popup-section-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 20px!important;
  font-weight: 300!important;
  letter-spacing: 1px;
  margin-top: 10vw;
        margin-bottom: 10vw;
                text-align: center;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: 300!important;
        letter-spacing: 1px;
        margin-top: 10vw;
        margin-bottom: 10vw;
        width: 200px!important;
        margin-left: auto;
        margin-right: auto;
}
.popup-section-title strong
{
    font-weight: 600!important;
}

.popup-ingredients-scroll-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
  width:95vw;
  margin: 0 auto;
}

/* Hide scrollbar */
.popup-ingredients-scroll-track::-webkit-scrollbar {
  display: none;
}
/* Container for the "Good for" section */
.ingredient-good-for-section {
    margin-top: 20px;
}

/* The "Good for" Text */
.good-for-label {
    display: block;
    font-size: 18px; /* Adjust size as needed */
    color: #2F2f2f;
    margin-bottom: 10px;
    font-weight: 300!important;
}

/* The Grid for the tags (Unclogs pores, Reduces acne, etc.) */
.ingredient-tags-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */
    gap: 14px; /* vertical gap, horizontal gap */
}

/* Individual tag item styling */
.ingredient-tag-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between Check Icon and Text */
    font-size: 14px;
    color: #2F444E;
    line-height: 1.2;
}

/* Optional: Ensure the icon doesn't shrink if text is long */
.ingredient-tag-item svg {
    flex-shrink: 0;
}
.ingredient-card {
          flex: 0 0 85%;
        scroll-snap-align: center;
        background: transparent;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 8px;
       
        width: 281px;
        height: auto;
        flex-shrink: 0;
  
}
.ingredient-card.active
{
  background: #fff;
}

.ingredient-card h4 {
  margin: 0 0 5px 0;
  font-size: 24px;
  color: #2F2F2F;
  font-weight:300!important;
}

.ingredient-card p {
  font-size: 14px;
  line-height: 1.4;
  color: #2F2F2F;
  margin: 0 0 10px 0;
   font-weight:300!important;
}

.ingredient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ingredient-tag {
  font-size: 14px;
   
  color: #2F444E;
  padding: 3px 0px;
  border-radius: 4px;
  font-weight: 300!important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-ingredients-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.ing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: all 0.3s;
}

.ing-dot.active {
  background: #2F444E;
  transform: scale(1.2);
}
.popup-faq-section {
  margin-top: 20vw;
  padding-top: 20px;
  padding-bottom: 40px;
  margin-bottom:55vw;
   border-radius: 8px;
background: var(--Alias-primary-primary-50, #F7FBFD);
  display: none; /* Hidden by default, shown via JS */
}

.popup-faq-title {
  color: #2F2F2F;
  text-align: center;
  font-family: 'Nacelle', sans-serif;
  font-size: 28px;
  font-weight: 700!important;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.popup-faq-description {
  max-width: 348px;
  margin: 0 auto 20px auto;
  color: #343B41;
  text-align: center;
  font-family: 'Nacelle', sans-serif;
  font-size: 14px;
  line-height: 26px;
  font-weight:300!important;
}
#popup-faq-list
{
  padding-left:0px;
  padding-right:0px;
  padding-bottom:60vw;
}

.popup-faq-item {
  border-bottom: 1px solid #2f2f2f;
}

.popup-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
}

.popup-faq-question {
  color: #2F2F2F;
  font-family: 'Nacelle', sans-serif;
  font-size: 16px!important;
  font-weight: 600!important;
  width: 281px; /* Fixed width as requested */
  margin-right:2vw;
}

.popup-faq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon State Management */
.popup-faq-header .icon-minus { display: none; }
.popup-faq-header .icon-plus { display: block; }

.popup-faq-item.active .icon-plus { display: none; }
.popup-faq-item.active .icon-minus { display: block; }

.popup-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  color: #555;
  font-family: 'Nacelle', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.popup-faq-content p {
  padding-bottom: 15px;
  margin: 0;
  font-weight:300!important;
}
.popup-faq-content p strong{
  
  font-weight:600!important;
}
/* Add this new class */
.popup-studies-section-container {
          margin-top: 20vw;
        width: 95vw;
        margin-left: auto;
        margin-right: auto;
 
  
}
#popup-studies-content img {
  max-width: 100%;
  height: auto;
  margin-top:13vw;
}

/* All your other styles are still needed */
.popup-studies-title {
  color: #2F2F2F;
  text-align: center;
  font-family: Nacelle;
  font-size: 28px;
  font-weight: 300!important;
  line-height: 34px;
  text-transform: uppercase;
  margin-bottom: 20px;
  width:45%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7vw;
}
.popup-studies-title strong {
   
  font-weight: 700!important;
  
}
.popup-studies-box {
    border: 1px solid #567C8D; 
    border-radius: 12px;       
    overflow: hidden;          
    background-color: #fff;
    margin-bottom: 20px;
}
.popup-study-block {
  padding: 16px;
 border-radius: 8px;
border: 1px solid var(--Alias-secondary-secondary-500, #567C8D);
  
 
  background-color: #fff; /* Make the inner blocks white */
}
.popup-study-block:not(:last-child) {
    border-bottom: 1px solid #567C8D;
}
.popup-study-block:last-child {
  margin-bottom: 0;
}

.popup-study-heading {
  color: var(--Alias-secondary-secondary-500, #567C8D);
 
text-transform: uppercase;
  font-family: Nacelle;
  font-size: 18px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.popup-study-text {
  color: #2F2F2F;
  font-family: Nacelle;
  font-size: 14px;
  font-weight: 300!important;
  line-height: 1.4;
  margin: 0;
}
/* The full-screen background overlay */
.product-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* The slide-up content container */
.product-popup-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
 
    z-index: 1001;
   
    box-sizing: border-box;
    
    /* Hidden state */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;

    /* Sizing for content */
    max-height: 100vh; /* Don't cover the whole screen */
    overflow-y: auto;
}

/* --- Visible States --- */
.product-popup-overlay.visible {
    visibility: visible;
    
    opacity: 1;
}

.product-popup-container.visible {
    visibility: visible;
    transform: translateY(19%);
}

/* --- Popup Internal Styles --- */

/* Top 'handle' / close button */
.popup-header-group {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: #ffffff; /* Important: prevents content showing behind it */
    
    
    /* Layout Logic */
       display: flex;
        flex-direction: column; 
}

.popup-close-btn {
  align-self: flex-end;
        margin-right: 15px; /* Distance from right edge */

        /* Reset Default Button Styles */
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        
}
.popup-scroll-bar {
    /* Your specific styles */
   width: 124px;
height: 4px;
flex-shrink: 0;
       border-radius: 3px;
background: var(--Alias-neutral-neutral-300, #939CA4);
     

        /* ALIGNMENT: Center horizontally */
        align-self: center; 
        
        /* Spacing */
        margin-bottom: 8px; /* Pushes the close button down a bit */
}

/* Main content layout */
.popup-content {
    display: flex;
    flex-direction: column; /* Stack image and details on mobile */
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.popup-image-container {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
}

#popup-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-container
{
  border-radius: 8px;
background: var(--Alias-primary-primary-50, #F7FBFD);
 
padding-bottom:1px;
}

.popup-details-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align text */
    text-align: left;
    width: 100%;
    margin-top:7vw;
     
}
/* 1. Default State (Closed) */
/* Remove vertical padding so it collapses completely */
#popup-composition-content {
    padding-top: 0;
    padding-bottom: 0;
    /* Ensure padding animates smoothly along with height */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* 2. Active State (Open) */
/* Apply padding ONLY when the parent item has the 'active' class */
#popup-composition-item.active #popup-composition-content {
    padding-top: 2vw;    /* Adjust this value as needed */
    padding-bottom: 4vw; /* Adjust this value as needed */
    border-bottom: 1px solid #567C8D;
}
 
.popup-accordion-content {
    max-height: 0;
     overflow: hidden; /* <--- THIS IS CRITICAL */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    /* Add top padding for content when it opens, and remove left/right padding that caused extra space*/
    
}

/* This style is applied by JS when opening */
 
 
/* --- START: Updated Accordion Styles --- */

.popup-accordion-item {
    width: 100%;
    overflow:hidden;
   
}
 .popup-accordion
 {
   margin-bottom:10vw;
   margin-top:6vw;
}
/* This ensures all parent containers take up the full available width */
.popup-details-container,
.popup-accordion,
.popup-accordion-item {
    width: 100%;
}
.popup-details-container,
.popup-accordion,
.popup-accordion-item,
.popup-accordion-header {
    box-sizing: border-box;
}
/* Remove border-bottom from the header when the parent item is active */
.popup-accordion-item.active .popup-accordion-header {
    border-bottom: none; 
    /* Optional: Add!important if it doesn't work immediately due to other styles */
    /* border-bottom: none!important; */
}
/* Now, your original (and correct) code will work */
.popup-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        width: 100%;
        border-bottom: 1px solid #567C8D;
        transition: border-color 0.3s 
ease;
        padding-top: 2vw;
        padding-bottom: 2vw;
        /* padding-top: 16px; */
        margin-bottom: 4vw;
}
 
.popup-accordion-header span:first-of-type {
    flex-grow: 1;
}

/* This ensures your icon doesn't get squished (good practice) */
.popup-accordion-toggle {
    flex-shrink: 0;
}
 
/* This is the "COMPOSITION" / "PRODUCT DETAILS" text */
.popup-accordion-header span:first-of-type {
    font-size: 1rem!important; /* ~18px based on your image, changed from 14px */
    font-weight: 600!important;
   color: var(--Alias-secondary-secondary-800, #2F444E);
 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width:100%;
   
}
 
/* Container for the icons - make it a flex container to center the active icon */
.popup-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Give it a fixed width to ensure consistent spacing */
    height: 20px; /* Give it a fixed height */
    overflow: hidden; /* Hide anything outside the bounds if needed */
}

/* By default, show the PLUS and hide the MINUS */
.popup-accordion-toggle .icon-plus {
    display: block!important;
    width: 100%; /* Make SVG fill the toggle container */
    height: 100%;
}
.popup-accordion-toggle .icon-minus {
   display: none!important;
    width: 100%; /* Make SVG fill the toggle container */
    height: 100%;
}
.popup-accordion-content span
{
   font-size:0.875rem!important;
   font-weight:300!important;
    
   padding-bottom:4vw;
}

/* When the item is active, hide the PLUS and show the MINUS */
.popup-accordion-item.active .popup-accordion-toggle .icon-plus {
    display: none!important;
}
.popup-accordion-item.active .popup-accordion-toggle .icon-minus {
    display: block!important;
}

/* --- STYLES FOR WHEN ACCORDION IS OPEN --- */
.popup-accordion-item.active .popup-accordion-header {
    /* Blue border when active, as per previous request */
    border-bottom-color: #567C8D; 
}
/* --- END: Updated Accordion Styles --- */

/* --- Product Details Styling (from your image) --- */
.popup-detail-block {
    padding: 12px 0;
    border-bottom: 1px solid #EAEAEA; /* The thin line from your image */
}
 
.popup-accordion-content .popup-detail-block:first-child {
    padding-top: 4px; /* Less padding at the very top */
}

.popup-accordion-content .popup-detail-block:last-child {
    border-bottom: none; /* No line on the last item */
}
.popup-accordion-content strong
{
  color: var(--Alias-secondary-secondary-800, #2F444E);
font-family: Nacelle;
font-size:  0.875rem!important;
font-style: normal;
font-weight: 600!important;
line-height: 3;
text-transform: uppercase;
}
.popup-accordion-content p
{
  color:  #2F2F2F;
font-family: Nacelle;
font-size:  0.875rem!important;
font-style: normal;
font-weight: 300!important;
line-height: normal;
 
padding-bottom:5vw;
border-bottom: 1px solid #567C8D;

}
.popup-detail-title {
    display: block;
    font-weight: 700; /* Bold title */
    font-size: 13px; 
    color: #2F444E; /* Dark blue/grey from your image */
    margin-bottom: 4px;
    text-transform: uppercase;
}

.popup-detail-value {
    display: block;
    font-size: 14px;
    color: #4A4A4A; /* Dark grey text */
    line-height: 1.5;
}
/* Overall layout style for the badge */
.product-type-badge {
    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 0 4px 4px 0;
    background: #D9EBF0;
    margin-bottom: 8px; /* Added space below the badge */
    margin-left:0;
    margin-right:auto;
}

/* Style for the SVG icon inside the badge */
.product-type-badge svg {
    width: 14px;
    height: 14px;
    aspect-ratio: 1/1;
}

/* Style for the product type text label */
.product-type-label {
    color: var(--Alias-secondary-secondary-800, #2F444E);
    font-family: Nacelle; /* Make sure this font is loaded */
    font-size: 12px;
    font-style: normal;
    font-weight: 300!important;
    line-height: normal;
}
.product-type-badge.supportive-style {
    
    padding: 8px 8px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 0 4px 4px 0!important;
    background: #567C8D!important; /* Blue-Grey */
    display: flex!important;
}

.product-type-badge.supportive-style .product-type-label {
    color: #FFFFFF!important; /* White Text */
    font-family: 'Nacelle', sans-serif;
    font-size: 12px;
    font-weight: 600!important;
    text-transform: uppercase;
}

/* 2. Benefit Section Title */
.popup-benefits-title {
    color: #2F2F2F;
    font-family: 'Nacelle', sans-serif;
    font-size: 16px;
    font-weight: 600!important;
    text-transform: uppercase;
    margin: 20px 0 10px 0;
    width: 100%;
    text-align: left;
}

/* 3. Benefit Wrapper (Grid) */
.popup-benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-bottom: 20px;
}

/* 4. Individual Benefit Pill */
.benefit-pill {
    display: flex;
    width: 127px; /* Fixed Width as requested */
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    background: #EDF7EE; /* Light Green */
    box-sizing: border-box;
}

/* 5. Benefit Label */
.benefit-label {
    color: #4CAF50;
    font-family: 'Nacelle', sans-serif;
    font-size: 12px;
    font-weight: 400!important;
    line-height: normal;
    white-space: nowrap;
}
#popup-title {
    font-family: 'Nacelle', sans-serif;
    font-size: 1.5rem; /* 24px */
    font-weight: 600!important;
    color: #2F2F2F;
    margin: 0 0 10px 0;
    width:100%;
}

#popup-description {
    font-family: 'Nacelle', sans-serif;
    font-size: 0.875rem!important; /* 14px */
   
    margin: 12px 12px 12px 0;
    line-height: 1.4;
    font-weight:300!important;
     color: #5E6B77;
}

/* Re-use existing day-night-icons styles */
#popup-icons {
    margin-bottom: 15px;
}

/* Re-use existing product-price styles */
#popup-price {
    font-size: 1rem; /* 20px */
    font-weight: 300!important;
    color: #5E6B77;
}

/* Bottom "Done" button */
#popup-close-btn-bottom {
    margin-top: 0; /* Remove top margin from action-button */
    margin-bottom: 0; /* Remove bottom margin from action-button */
}
      
               .main-wrapper {
                       flex-direction: column;
        gap: 0;
        width: 90%;
        border-radius: 24px;
        margin-top:8vw;
        padding-bottom:8vw;
         
         
            }
          .skin-type-section
          {
      
         border-radius: 8px; 
         padding: 0px; 
         width: 90%;  
          
            
        }
            .container, .ayurveda-container {
                width:   95%; /* Adjust width to fit two cards side-by-side */
               
            }
            #skin-type-display-container span 
            {
                  font-weight: 300!important ;   
            }
             #skin-type-display-container  span strong
             {
                 font-weight:  600!important ;
            }
    
    
                .title  {
                display: flex;
                justify-content: space-between; /* pushes icon to far right */
                align-items: center;
                font-weight: 800!important ;
                font-size: 1.125rem;
                margin-bottom: 5px;
                width: 100%; /* ensure it stretches full width */
                text-transform:  none;
                padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 5vw;
    }
              
                .ayurveda-title
                {  display: flex;
                justify-content: space-between; /* pushes icon to far right */
                align-items: center;
                font-weight: 600!important ;
                font-size: 1.5rem;
                margin-bottom: 5px;
                width: 100%; /* ensure it stretches full width */
                text-transform: none;
                 
        padding-right: 5vw;
         
                  
                   font-weight:700!important;
                  
                   
                }
                .ayurveda-subtitle
                {
                  font-size:1.125rem;
                  font-weight:300!important;
                  font-style: normal;
line-height: 28px; /* 140% */
                }
                .skin-diagonsis-mobile
                {
                font-weight:600!important;
                }

                .description-skin {
                     font-size:  1rem;
                    margin-bottom: 8px;
                }

                    /* Styles for the main user and diagnosis sections */
                .username
                {
                    margin-bottom:2vw;
                    font-size: 3rem;
                        font-style: normal;
                         font-weight: 300!important;;
                        line-height: 1;
                }
                    .usernamesection {
                        color: #2F2F2F;
                        text-align: left;
                        font-family: Nacelle; 
                        width:20px; 
                        margin:10vw auto 0vw 6vw;
                    }
                    .usernamesection strong {
                        color: #2F2F2F;
                        font-family: Nacelle; 
                         font-size: 3rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: 1;
                    }
                    #user-first-name
                    {
                     font-weight: 600!important ; 
                    }
                    .description-desktop
                    {
                    display:none;
                    }
    
                      .skin-diagonsis-mobile
                    {
                    display:block;
                    color: var(--Foundation-pink-pink-800, #882F4F);
font-family: Nacelle;
font-size: 1.125rem;
font-style: normal;
font-weight: 600!important;
line-height: normal;
                    padding-bottom:4vw;
                    }

.skin-diagonsis-mobile-subheading
{
color: var(--Foundation-pink-pink-800, #882F4F);
font-family: Nacelle;
font-size: 0.875rem;
font-style: normal;
font-weight: 300!important;
line-height: normal;

}
                    .description-mobile  {
                        display:block;
                        color: var(--Alias-neutral-neutral-500, #5E6B77);
                        text-align: center;
                        font-family: Nacelle; 
                         font-size: 0.875rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: 1;
                    }
                    .description-mobile strong
                    {
                        font-size:  1rem;
                       font-weight: 800!important;
                       color:black;
                    }
                    .description-mobile i
                    {
                    font-size:  1rem;
                    }
                    .guarantee
                     {
                        font-size:14px;
                          text-align: center;
                          margin-top: -6vw;
                          margin-bottom: 5vw;
                    }
                    {% comment %} .container {
                        display: flex;
                        width: 90%;
                        padding: 16px;
                        flex-direction: column;
                        margin-left: auto;
                        margin-right: auto;
                        gap: 8px;
                        border-radius: 10px;
                        background: #B3D7E7;
                        align-items: flex-start;
                        margin-top: 2vw;
                    } {% endcomment %}
                    .about-skin
                    {
                margin-top: -8vw; 
                    width: 1.5rem;
                    height: auto;
                flex-shrink: 0;
                aspect-ratio: 16.38/16.39;
                    }
                
                    .about-ayurveda
                    {
                    width: 1.5rem; height: auto; flex-shrink: 0; aspect-ratio: 16.38/16.39; margin-top:-2vw;
                    }
                   
                    .description-skin, .description-ayurveda {
                    color: #2F4156;
                        font-family: Nacelle; 
                        font-size: 0.65rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: 0;
                    }
                    .description-ayurveda
                    {
                    margin-top:1vw;
                    margin-bottom:2vw;
                    }
/* This container will hold the row of images */
.ayurveda-images-row {
  display: flex;
    align-items: flex-start;
    width: 100vw;
    gap: 11px;
    flex-wrap: wrap;
   
}

/* This is the wrapper for each individual image */
.ayurveda-image-wrapper {
    /* You can set a width or flex-basis here if you want */
    /* Example: flex-basis: 150px; */
    padding: 5px;
    text-align: center;
}

/* Make the image clickable */
.ayurveda-image {
    cursor: pointer;
    max-width: 100%; /* Ensures images are responsive */
    height: auto;
}

/* This container holds the descriptions */
.ayurveda-descriptions-row {
    clear: both; /* Ensures it's below the images */
    width: 100%;
}

/* Styling for the description text itself */
.ayurveda-description {
    
    
      margin: 0 auto;

    /* 2. Give it a max-width so it's not 100% wide */
    /* Adjust this value as needed */
    max-width: 100%; 

    /* 3. Align the text inside to the left */
    text-align: left; /* or -webkit-left */
    
    /* Your other styles */
    font-weight: 300!important;
    border-radius: 4px;

}

                    {% comment %} .ayurveda-container {
                        border-radius: 10px;
                       
                        display: flex;
                        width: 90%;
                        height: auto;
                        
                        margin-left: auto;
                        margin-right: auto;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 4px;
                        flex-shrink: 0;
                        border-radius: 8px;
 
                        padding-left:2vw;
                    } {% endcomment %}
                   .treatment-plan-desktop
                   {
                    display:none;
                   }
                   .doctor-promo-titles
                   {
                    margin:0 auto;
                   }
                    .treatment-plan-mobile {
                        display:block!important;
                        color: #2F2F2F;
                        margin-top: 0vw;
                        text-align: center;
                        font-family: Nacelle; 
                         font-size: 24px;
                        font-style: normal;
                         font-weight: 300!important;!important;
                        line-height: normal;
                        text-transform: uppercase;
                        margin-left:auto;
                        margin-right:auto;
                    }
                    .treatment-plan-mobile strong {
                        color: #2F2F2F;
                        font-family: Nacelle; 
                     
                        font-style: normal;
                        font-weight: 600!important;
                        line-height: normal;
                        text-transform: uppercase;
                    }
                    .treatment-plan-description
                    {
                      color: var(--black, #2F2F2F);
text-align: center;
font-family: Nacelle;
font-size: 0.875rem!important;
font-style: normal;
font-weight: 300!important;
line-height: normal;
        width: 90%!important;
        margin-left:auto;
        margin-right:auto;
        margin-top:2vw;
                    }
                    /* Updated styles for the doctor cards to enable horizontal scrolling */
                .doctor-card-container {
                    display: flex;
                    overflow-x: auto;
                    gap: 16px;
                    padding: 24px;
                    justify-content: flex-start;
                    white-space: nowrap;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    width:88vw;      
                    margin: 0 auto;
                    
                    /* Hide scrollbar for Chrome, Safari and Opera */
                    scrollbar-width: none; /* Firefox */
                    -ms-overflow-style: none;  /* IE and Edge */
                }

                .doctor-card-container::-webkit-scrollbar {
                    display: none; /* Chrome, Safari, Opera */
                }


                    .doctor-card {
                        display: flex;
            padding: 8px;
            align-items: center;
            gap: 10px; /* Increased gap slightly from your 12px for better spacing */
            border-radius: 16px;
 
            
            
            /* My additions to match the image */
            
            flex-shrink: 0; /* Prevents cards from shrinking in the flex container */
            width: 100%; /* A fixed width for consistency */
           
            scroll-snap-align: start; /* Snaps card to the start */
                    }

                    /* Doctor photo styling */
                    .doctor-photo {
                        width: 79px;
            height: 79px;
            flex-shrink: 0;
            
            /* My additions to match the image */
            border-radius: 50%; /* This makes the image perfectly round */
            object-fit: cover; /* Prevents the image from being stretched */
            
                    }
                    .doctor-details
                    {
                        display: flex;
            flex-direction: column;
            align-items: flex-start; /* Aligns text to the left */
            gap: 4px; /* Space between text lines */
            width:  30%; /* Takes up the remaining space */
                    
                    }
                    
                    /* Text styling within the cards */
                    .doctor-name, .doctor-profession, .doctor-experience-year, .doctor-experience-value,.skincoach-name,.skincoach-professional,.skincoach-experience-year,.skincoach-experience-value {
                        color: #2F2F2F;
                        font-family: Nacelle; 
                        font-style: normal;
                    }
                    .doctor-details
                    {
                    margin-top:3vw;
                    margin-bottom:3vw;
                    }
                    .doctor-name,.skincoach-name {
                                  font-size: 1.125rem;
        font-weight: 600!important;
        line-height: 1.2;
        
                    }
                    .skincoach-profession
                    {
                         font-size:   0.7rem ;
                        font-weight: 800;
                        line-height: 0;
                    }
                    
                       .doctor-profession {
              color: var(--Alias-neutral-neutral-500, #5E6B77);
        font-family: Nacelle;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 300!important;
        line-height: normal;
        width: 38vw;
    }
    .diagnosis-container p
    {
        text-align:left;

    }
    #skin-diagnosis
    {
        color: #2F2F2F;
font-family: Nacelle;
font-size: 1.5rem;
font-style: normal;
line-height: normal;
text-transform: uppercase;
         font-weight: 600!important ; 
         text-align:left;
    }
                    .skincoach-experience
                    {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        margin-top: 0px;
                    }
                    
                    .doctor-experience {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        margin-top: 8px;
                    }
                    
                    .doctor-experience-year {
                         font-size:   0.7rem;
                        font-weight: 600!important ; 
                        line-height: normal;
                    }
                    
                    .doctor-experience-value {
                         font-size:   0.7rem;
                        font-weight: 800!important ; 
                        line-height: normal;
                    }
                    /* Container Heading */
.customise-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* Adjust spacing between the badge and the text */
  margin-top:10vw;
line-height:0.8!important;
}

/* 45-Day Badge */
.plan-badge {
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
 border-radius: 16px;
background: var(--Foundation-pink-pink-800, #882F4F);
  
  /* Text inside badge */
  color: #FFF;
  font-family: 'Nacelle', sans-serif;
  font-size: 1rem;
  font-weight: 300!important;
  text-transform: none;
  line-height:1;
}

/* Dermatologist-Led */
.plan-subtitle {
  color: #2F2F2F;
  text-align: center;
  font-family: 'Nacelle', sans-serif;
  font-size: 24px;
  font-weight: 300!important;
  text-transform: uppercase;
  display: block; /* Ensures it stays on its own line */
 
}

/* Acne Treatment Plan */
.plan-title {
  color: #2F2F2F;
  font-family: 'Nacelle', sans-serif;
  font-size: 24px;
  font-weight: 600!important;
  text-transform: uppercase;
  display: block;
}
                    .customise-plan-desktop
                    {
                      display:none;
                    }

                /* The container that enables horizontal scrolling */
                .scroll-container {
                    overflow-x: auto; /* Enables horizontal scrolling when content overflows */
                    padding-bottom: 0px; /* Prevents content from touching the bottom edge */
                    white-space: nowrap; /* Prevents items from wrapping to a new line */
                    padding: 0 10px; /* Adds padding to the sides of the scrollable area */

                    /* Hide the scrollbar across different browsers */
                    -ms-overflow-style: none; /* Internet Explorer and Edge */
                    scrollbar-width: none; /* Firefox */
                    width:95vw;
                    margin-left:auto;
                    margin-right:auto;
                }

                /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
                .scroll-container::-webkit-scrollbar {
                    display: none;
                }
                .cart-header {
                     display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 95vw!important;
        margin-left: auto;
        margin-right: auto;
                }

                .you-cart {
                    color: #000;
                    font-family: Nacelle; 
                    font-size:  18px;
                    font-style: normal;
                    font-weight: 600!important ; 
                    line-height: normal;
                    margin-left:5vw;
                     
                }
                #item-count,.item-count-unit
                {
                color: var(--Alias-neutral-neutral-500, #5E6B77);
font-family: Nacelle;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
                }

                .no-items-card {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    margin-top: 10px;
                    padding: 10px 20px;
                    background-color: #f9f9f9;
                    border-radius: 8px;
                    border: 1px solid #e0e0e0;
                }

                .no-items-card svg {
                    width: 24px;
                    height: 24px;
                    fill: #636363;
                }

                .no-items-card p {
                    margin: 0;
                    color: #636363;
                    font-family: Nacelle; 
                    font-size: 16px;
                    font-style: italic;
                     font-weight: 300!important;;
                }

                /* Product Grid Layout */
                .product-grid {
                    display: flex; /* Use flexbox for the horizontal layout */
                    gap: 15px;
                     width:100%;
                }

                /* Product Card */
                .product-card {
                   display: flex;
                   flex-direction:column!important;
 width:75%;
height:  auto;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex-shrink: 0;
                }

                /* Product Image */
                .product-details {
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 6px;
                    margin: 0; /* Remove any default margin */
                    width:100%;
                }
                .product-image {
                    width: auto!important;
                    height: auto!important; /* Set a fixed height to prevent the image from growing too large */
                    background:white;
                    padding: 0!important; /* Force no padding on this container */
                    margin: 0!important; /* Force no margin on this container */
                }
                .product-image img {
                width: 95%!important;
                    height: auto!important;
                    object-fit: cover!important; /* Ensure the image fills the container */
                    padding: 0!important;
                    margin-left:auto;
                    margin-right:auto;
                    margin-top:0vw;
                }

                /* Product Details */
                .product-details {
                    margin-top:4vw;
                     
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 6px;
                    width:100%;
                             
         
                    
                }

                /* Typography for Mobile */
               .product-details h3 {
    color: #2F2F2F;
    font-family: 'Nacelle', sans-serif; /* Added fallback */
    font-size: 1.125rem;
    font-weight: 600!important;
    line-height: normal;
    margin: 0;
    padding:0;
}

             .product-card .product-details .product-description {
  color: var(--Alias-neutral-neutral-500, #5E6B77);
        font-family: Nacelle;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 300!important;
        flex-direction:column;
        /* 1. Set a numeric line-height for better calculation */
        line-height: 1.4; 
        
        width: 100%;
       white-space: normal;
        align-self: flex-start;
        max-width: 320px;
        margin: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;

        /* 2. The "Magic" Properties for 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 3; /* <--- THIS MUST BE 2 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        
        /* 3. Reset height to allow clamping to work */
        height: auto; 
        min-height: 0;
}
                .product-used-for {
                    color: #4F5147;
                    font-family: Nacelle; 
                    font-size: 10px;
                    font-weight: 400;
                    line-height: normal;
                    text-transform: uppercase;
                    margin: 0;
                    background: #D9D9D9;

                }
                .tagline
                {
                display: flex;
padding: 6px 8px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 4px;
border: 1px solid var(--Alias-secondary-secondary-500, #567C8D);
color: var(--Alias-secondary-secondary-500, #567C8D);
font-family: Nacelle;
font-size: 12px;
font-style: normal;
font-weight:  600!important;
line-height: normal;
text-transform: uppercase;

                }

                .day-night-icons {
                    display: flex;
                    gap: 10px;
                    margin-top: 3vw;
                    margin-bottom:3vw;
                    font-size: 10px;
                }
.benefit-container
{
  border-radius: 6px;
 
}
                .product-price {
                    color: var(--Alias-neutral-neutral-500, #5E6B77);
                    font-family: Nacelle; 
                    font-size: 18px;
                    font-weight: 300!important ; 
                    line-height: 111.188%;
                    width: 100%;
                    margin-top: auto;
                }

                /* Remove Button */
                .remove-product-button {
                    display: none;
                    
                }

               
                .price-container {
                    /* Optional: Sets a max-width for the container */
                    width:90%;
                    margin-top: 1rem;
                    margin-right:auto;
                    margin-left:auto;
                    border-radius: 8px;
border: 1px solid var(--Alias-neutral-neutral-200, #B5BBC0);
                }

                .price-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 8px; /* Adds space between the subtotal and shipping rows */
                }

                .price-label,
                .price-value {
                    color: #2F2F2F;
                    font-family: Nacelle;  /* Add a fallback font */
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 600!important;
                    line-height: normal;
                    margin: 0; /* Remove default paragraph margins */
                }

                /* Optional: To make the subtotal and shipping values stand out slightly */
                .price-value {
                    font-weight: 600!important ; 
                }
                .note-wrapper {
                    display: flex;
                    align-items: flex-start; /* Aligns the icon to the top of the text */
                    gap: 8px; /* Adds space between the icon and the text */
                    width: 90%;
                    margin-top: 7vw;
                    margin-bottom: 7vw;
                    margin-left: auto;
                    margin-right: auto;
                }

                .note-wrapper .note {
                    color: #636363;
                    font-family: Nacelle; 
                     font-size:  1rem;
                    font-style: italic;
                     font-weight: 300!important;;
                    line-height: normal;
                    margin: 0; /* Important: Removes default paragraph margin */
                }

                .note-wrapper svg {
                    flex-shrink: 0; /* Prevents the icon from shrinking */
                }
                .day-night-icons {
                    display: flex;
                    gap: 10px; /* Adjust spacing between Day and Night icons */
                }

                .day-icon-wrapper,
                .night-icon-wrapper {
                    display: flex;
                    align-items: center;
                    gap: 5px; /* Adjust spacing between the icon and text */
                }

                .day-icon-wrapper svg,
                .night-icon-wrapper svg {
                    width: 24px;
                    height: 24px;
                    aspect-ratio: 1 / 1;
                }
                /* Paragraph Styling */
                    .treatment-note-mobile {
                        display:block;
                        color:#2F2F2F;
                        text-align: center;
                        font-family: Nacelle; 
                        font-size: 1.5rem;
                        font-style: normal;
                        font-weight: 600!important;
                        line-height: normal;
                        text-transform: uppercase;
                        width: 90%;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top:15vw;
                        margin-bottom:15vw;
                    }
                    .treatment-note-mobile strong
                    {
                       font-weight:700!important;
                    }
                  .treatment-note-Desktop
                  {
                    display:none;
                }
                .treatment-item-container {
                        display: flex;
                        flex-direction: column;
                        align-items: center; /* Center the circles and lines horizontally */
                        width:95%;
                        margin-left:auto;
                        margin-right:auto;
                        background:#CCE4EF;
                        border-radius:10px;
                    }

                    .treatment-item-wrapper {
                        display: flex;
                        width: 90%;
                        align-items: center;
                        gap: 16px;
                        margin-bottom: 0; /* Remove default bottom margin */
                        padding-bottom: 40px; /* Add padding to create space for the line */
                        position: relative; /* For positioning the pseudo-element line */
                    }

                  .treatment-item-wrapper {
    display: flex; /* To align the image and content */
    align-items: center;
    margin-bottom: 20px; /* Spacing between items */
}

.treatment-diagram-image {
    /* Define the size of the container to show only one circle */
    width: 60px;  /* Adjust these sizes based on your actual image */
    height: 60px; /* Adjust these sizes based on your actual image */
    
    /* Make the image itself cover its container */
    object-fit: none;
    
    /* Set the full size of the original image */
    /* This must be precise for the positioning to work */
    width: 60px;  /* Width of one circle */
    height: 300px; /* Height of the full image (5 circles * 60px) */
    
    /* You must apply a clipping effect or set a smaller container height */
    overflow: hidden; /* If using a wrapper div for the img */
}

/* Positioning for each step */
.treatment-item-wrapper:nth-child(3) .treatment-diagram-image[data-step="1"] { 
    /* The first step shows the first number (0 offset) */
    object-position: 0 0;
}

.treatment-item-wrapper:nth-child(5) .treatment-diagram-image[data-step="2"] {
    /* The second step should be offset by the height of one circle */
    object-position: 0 -60px; /* Moves the image up by 60px */
}

.treatment-item-wrapper:nth-child(7) .treatment-diagram-image[data-step="3"] {
    /* The third step should be offset by the height of two circles */
    object-position: 0 -120px; /* Moves the image up by 120px */
}

/* ... and so on for steps 4 and 5 ... */
                    .treatment-content {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;
                        flex-grow: 1; /* Allow text to take available space */
                    }

                    .treatment-label {
                        color: #567C8D;
                        font-family: Nacelle; 
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: normal;
                        margin: 0;
                    }

                    .treatment-description {
                        color: #567C8D;
                        font-family: Nacelle; 
                         font-size:  1rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: normal;
                        margin: 0;
                    }

                     
                    .skincoach-experience-value
                    {
                    font-size:16px;
                    }
                    .talk-to-coach-container {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        padding: 20px;
                        background:#B3D7E7;
                    }
                    .heading-desktop
                    {
                      display:none;
                    }
                    .heading-mobile {
                        display:block;
                        color: #2F2F2F;
                        text-align: center;
                        font-family: Nacelle; 
                         font-size: 1.75rem;
                        font-style: normal;
                        line-height: 40px; /* 125% */
                        margin: 0 0 20px 0;
                    }

                    .heading-mobile strong {
                        font-weight: 700;
                    }

                    .heading-mobile:first-line {
                         font-weight: 300!important;;
                    }
                    .heading
                    {
                     font-size: 1.2rem;
                     font-weight: 600!important ; 
                    }

                    .photo-frame {
                         display: flex;
                        padding: 16px;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 16px;
                        border: 1px solid  #B5BBC0 ;  /* Example border */
                        border-radius: 8px; /* Example border radius */
                        background-color: #FFF;
                    }

                    .coach-photo {
                        width: 100%;
                        height: auto;
                    }

                    .photo-description {
                        color: #2F2F2F;
                        font-family: Nacelle; 
                         font-size:  1rem;
                        font-style: normal;
                        font-weight: 600!important ; 
                        line-height: 120%; /* 16.8px */
                        margin: 0;
                    }

                .talk-button {
                    display: inline-flex;
                    padding: 8px 16px;
                    align-items: center;
                    color: #FFF;
                    font-family: Nacelle; 
                    font-size: 0.8rem;
                    font-weight: 600!important ; 
                    text-transform: uppercase;
                    margin-top: 20px;
                    
                    border: 1px solid black; /* Set the border as requested */
                    color: black; /* Ensure text is visible against the black background */
                    cursor: pointer;
                }
                 .Skin-journey-container {
                    display:none;
            background-color: #fff;
            border-radius: 12px;
            
            width: 100%;
            max-width: 600px;
            margin: auto;
            padding: 1rem 1.5rem;
            box-sizing: border-box;
            overflow: hidden;
            margin-top:5vw;
            margin-bottom:5vw;
        }

        .heading-mobile {
            font-family: Nacelle;
            font-size: 1.5rem;
            text-align: center;
             font-weight: 300!important;;
            color: #2F2F2F;
            margin-bottom: 1rem;
            text-transform:uppercase;
        }
        .heading-mobile strong {
            font-weight: 700;
        }

        .parent {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .tagline-card {
            background-color: #B3D7E7;
            border-radius: 12px;
            padding: 1.5rem 1rem;
            text-align: center;
            font-family: Nacelle;
            font-size: 1.25rem;
            font-style: italic;
             font-weight: 300!important;;
            color: #2F2F2F;
            margin-bottom: 1rem;
        }

        .stage-title-container {
            margin-bottom: 1rem;
        }
        .stage-title-container .subtitle {
            font-size: 0.75rem;
            font-weight: 600!important ; 
            color: #6b7280;
            text-transform: uppercase;
        }
        .stage-title-container .title {
            font-size: 1.875rem;
            font-weight: 700;
            color: #2F2F2F;
            text-transform: uppercase;
            margin-top:2vw;
            margin-bottom:2vw;
        }

        .week-buttons-container {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            gap: 0.5rem;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            scrollbar-width: none; /* Firefox */
        }
        .week-buttons-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }
        .week-button {
            background-color: #e5e7eb;
            color: #4b5563;
            border-radius: 8px;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 600!important ; 
            flex-shrink: 0;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .week-button:hover {
            background-color: #d1d5db;
        }

        /* Here are the requested classes from your original prompt */
        .div9 {
            background-color:#A3C4D2;
            border-radius: 8px;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 600!important ; 
            width: 100%;
            font-family:Nacelle;
            margin-top:-2vw;
            margin-bottom:2vw;
        }
        
        .div8 {
            background-color: rgba(179, 215, 231, 0.75);
            border: 1px solid  #B5BBC0 ; 
            border-radius: 8px;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            text-align: center;
        }
        .div8 img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 0.75rem;
        }
        .div8 .photo-text {
            font-size: 0.875rem;
            font-weight: 600!important ; 
            color: #4b5563;
        }
        
        .div10, .div11 {
            background-color: #E6EEF4;
            color: #2F2F2F;
            border-radius: 9999px;
            padding: 0.5rem;
            
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
        }
        .div10:hover, .div11:hover {
            transform: scale(1.1);
            background-color: #d1d9e0;
        }
        
        .div12 {
            border: 1px solid #B3D7E7;
            border-radius: 6px;
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            font-weight: 600!important ; 
            color: #2F2F2F;
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .div12 strong {
            font-weight:600!important;
        }
        .div12 .color-circle {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 4px;
        }
         #note-text
         {
           font-weight:600!important;
        }
        .progress-steps {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
            margin-top:2rem;
        }
        .progress-step {
            width: 1.5rem;
            height: 0.25rem;
            background-color: #d1d5db;
            border-radius: 9999px;
            transition: background-color 0.3s ease;
        }
        .progress-step.active {
            background-color: #5D8196;
        }

        .action-button {
            width: 100%;
            background-color: #5D8196;
            color: white;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-size: 0.8rem;
            font-weight:600!important;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-transform:uppercase;
                    margin-top: 15vw;
        margin-bottom: 15vw;
        }
        .action-button:hover {
            background-color: #4c6a7a;
        }
        .font-bold
        {
          font-weight:600!important;
        }
           
                    .recommedation-faq {
                     
                    border-radius: 8px;
                    height: auto;
                    margin-bottom:0vw;
                    padding-bottom:0vw;
                    padding-top:4vw;
                }

                .recommedation-faq-title-sections {
                    line-height: 1.4;
                    padding: 0 1rem;
                    text-align: center;
                }

                .recommedation-faq-titles {
                     font-size: 1.75rem !important;
                    margin: 0;
                    text-align: center;
                margin-top:20px;
                font-weight:600!important;
                }

                .recommedation-faq-subtitle {
                    font-size: 1.3rem;
                    text-align: center;
                    margin: 1rem 0 2rem;
                line-height:1.3!important;
                font-weight:300;
                }
.recommedation-faq-subtitle strong {
                    font-size: 1.3rem;
                    text-align: center;
                    margin: 1rem 0 2rem;
                line-height:1.3!important;
                font-weight:700;
                }
                .recommedation-faq-section {
                     width:100vw;
                    margin:0 auto; 
                }

                 

                .recommedation-faq-question {
                    font-size: 1rem;
                    font-weight:300!important;
                    line-height:2;
                }

                .recommedation-faq-answer {
                    font-size: 1rem;
                    font-weight:600!important;
                }
                .recommedation-faq-list {
    font-size: 1rem;
    /* You might also want to remove default list styling */
    list-style-type: disc; /* or 'none' if you prefer no bullet points */
    margin-left: 1.5rem; /* Adjust for proper indentation */
    padding-left: 0;
}

.recommedation-faq-list-item {
    font-size: 1rem!important;
    margin-bottom: 0.5rem; /* Add some spacing between list items */
    font-weight:600!important;
}
                .total-label {
                    font-size: 1rem;
                    margin-left: 3vw;
                    font-weight:600!important;
                    display: flex; /* Use flexbox for layout */
                    justify-content: space-between; /* Pushes children to opposite ends */
                    width: 100%; /* Ensure the container spans the full width available */
                }

                #buy-now-price,#subtotal-price,#shipping-price {
                text-align: center;
                    margin-left: auto;
                    margin-right: 5vw;
                }
                .mobile-layout
                {
                   display:block;
                   background:white;
                }
                 .product-list-container-desktop
                 {
                   display:none;
                }
                      .product-list-container {
  display: flex;
  flex-direction: row;
  width: 100%; /* Allocate the other half to the product list */
  gap: 0px;
  padding-top: 40px; /* Align with the start of the treatment items */
}
 .talk-to-coach-container-desktop {
            display: none;
        }
        .skin-container-desktop
        {
           display: none;
        }
        .desktop-layout {
            display: none;
        }
          .contact-container-mobile {
           width: 95%;
        height: auto;
        flex-shrink: 0;
        background: #B3D7E7;
        display: flex
;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        margin-left: auto; 
        margin-right: auto;
  }

  .contact-container-mobile h2 {
    color: #2F2F2F;
    font-family: Nacelle;
    font-size: 1.5rem;
    font-style: normal;
    font-weight:300!important; /* Adjusted to 600 as provided */
    line-height: normal;
    text-transform: uppercase;
    margin: 0;
    text-align:center;
  }

  .contact-container-mobile p {
    color: #2F2F2F;
    font-family: Nacelle;
    font-size: 16px; /* Adjusting font size for readability on mobile */
    margin: 10px 0;
    margin-left: auto;
        margin-right: auto;
        width: 90%;
        font-weight:600!important;
  }

  .talk-to-doctor-btn {
    display: flex;
    width: 90%;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #2F2F2F;
    background: #FFF;
    cursor: pointer;
    font-family:  Nacelle!important; /* Fallback font */
    font-size: 16px; /* Adjust font size for mobile button */
            margin-left: auto;
        margin-right: auto;
  }
  .contact-container-desktop
  {
   display:none;
}
        .client-container {
                padding: 10px;
                margin-top:-5vw!important;
                margin-bottom:5vw!important;
                font-family:  Nacelle!important; 

            }
            
            .paragraph {
                font-size:1.5rem;
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }

            .case-report-section {
                width: 90%
            }

            .case-report-image {
                width: auto;
                height: 83px;
                flex-shrink: 0;
                object-fit: contain;
                aspect-ratio: 1/1;
            }

            .skin-test-button {
                width: 90%;
            }

            .case-report-text {
                font-size:12px;
            }

            .client-cta-button {
                width: 80%;
                padding: 16px;
                font-size: 0.8rem;
                height:15vw;
            }

            .client-cta-button:hover {
                background: #B1C3CB;
                color:black;
            }
            .happy-customers-section {
    width: 100%!important;
     margin-bottom:0vw;
    text-align: center;
    background-color:white; /* Light background as seen in the image */
    overflow-x: hidden;
    margin-top:12vw;
    margin-bottom:3vw;
  }
 .happy-pagination-happy-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
  }

  .happy-dot {
    /* Inactive happy-dot styles */
    width: 35px;
    height: 4px;
    background-color: #ccc;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  .happy-dot.active {
    /* Active happy-dot styles */
    width: 45px;
    background-color: #2f2f2f;
  }
  .customers-title {
    color: #2F2F2F;
    font-family: Nacelle;
      font-size: 24px!important;
    font-style: normal;
    font-weight:300!important;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding: 0 20px; /* Prevents text from touching screen edges */
    text-align:center!important;
    text-transform:uppercase;
  }
    .customers-title strong
    {
       font-weight:600!important;
    }

  /*
   * The container that enables horizontal scrolling.
   */
  .customers-scroll-container {
          display: flex;
        overflow-x: scroll!important;
        flex-wrap: nowrap;
        gap: 2rem;
        /* padding: 0 20px; */
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: 90%!important;
        margin: 0 auto;
  }

  .customers-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }


  /*
   * The individual customer testimonial card (photo frame).
   */

  .customer-testimonial-card {
    /* Dimensions as requested */
    width: 100%!important;
        
    flex-shrink: 0; /* CRITICAL: Prevents cards from shrinking */

    /* Aligns the card for scroll-snapping */
    scroll-snap-align: start;

    /* Visual styling */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0vw;
    
  }

  .customer-testimonial-card img {
    width: 100%;
    height: 100%;
    object-fit: contain ;
    display: block;
  }

  /*
   * Pagination happy-dots styling.
   */
  .happy-pagination-happy-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
   margin-bottom: 10vw; 
  }

  .happy-dot {
    /* Inactive happy-dot styles */
    width: 35px;
    height: 4px;
    background-color: #ccc;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  .happy-dot.active {
    /* Active happy-dot styles */
    width: 45px;
    background-color: #2f2f2f;
  }
 
.price-summary-wrapper {
    width:  90vw!important; /* Adjust as needed */
    
    border-radius: 8px;
    font-family: Arial, sans-serif;
    color: #333;
    overflow: hidden; 
    MARGIN-LEFT:AUTO;
    MARGIN-RIGHT:AUTO;
    MARGIN-TOP:3VW;
}

/* "Buy Now" and "Saved" Section */
.buy-now-section {
    padding: 15px;
    
    border-bottom: 1px dashed #eee;
}

.buy-now-text {
    margin: 0 0 5px 0;
    font-size: 0.875rem ;
    color: #555;
    font-weight:600!important;
}

.buy-now-text .original-price {
    text-decoration: line-through;
    color: #888;
    margin-left: 8px;
    margin-right: 8px;
    font-weight:600!important;
}

.buy-now-text .current-price {
   
    color: #333;
    font-weight:600!important;
}

.saved-amount {
    color:#FF9800; /* Orange color */
    font-size: 0.875rem ;
    font-weight:600!important;
    margin: 0;
}

/* "Item Total" Section */
.item-total-section {
   display: flex;
     padding-top:10px;
    align-items: center;
}

.item-total-section p {
     margin-right: auto;
    font-weight:600!important;
     font-size: 1rem ;
}
.item-price {
   font-weight:600!important;
    color: #555;
}

/* "Complimentary Services" Section */
.complimentary-services-section {
            margin: 25px auto 15vw !important;
        position: relative;
        padding: 15px;
        border-radius: 24px;
        border: 1px solid var(--Alias-neutral-neutral-200, #B5BBC0);
        overflow: visible!important;
         
}
 
.section-title {
        font-size: 1.125rem ;
    font-weight:600!important;
    color: #555;
    margin-bottom: 15px;
    text-transform:none;
      margin-top:3vw;
      color: var(--Alias-neutral-neutral-500, #5E6B77);
      text-transform:uppercase;
}
.service-icon
{
   width:24px;
   height:24px;

}
.item-details {
    display: flex;
    align-items: center;
    gap: 10px!important; /* Spacing between image and text */
     width:60%;
}
.item-details p {
    margin: 0; 
    
}
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
     margin-bottom:0!important;
    padding: 8px 0;

}
.dotted
{
  border-bottom: 1px dashed #B5BBC0;
   
}
.service-item p {
       color: var(--Alias-neutral-neutral-500, #5E6B77);
font-family: Nacelle;
font-size:  0.875rem!important;
font-style: normal;
 font-weight:300!important;
line-height: normal;
width:47vw;

}
.original-price
{
color: var(--Alias-neutral-neutral-500, #5E6B77);
text-decoration: line-through;
margin-right:3vw;
font-weight:300!important;
font-size:1rem;
}
.current-price
{
  font-size:1rem;
font-weight:300!important;
}
.original-service-price {
    text-decoration: line-through;
    color: #2f2f2f;
    margin-right: 8px;
    font-size: 0.875rem;
    font-weight:300!important;
}

.free-service-price {
  color: var(--Alias-success-success-500, #4CAF50);
    font-weight: 600!important;
    font-size: 0.825rem;
    text-transform:none;
}

/* "Total" and "Shipping" Section */
.price-container {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #f8f8f8;
    border-top: 1px dashed #eee;
}

.total-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.total-label:last-child {
    margin-bottom: 0;
}

.subtotal-label {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

#subtotal-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.shipping-label {
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
}

#shipping-price {
    background-color: #BFBFBF;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: bold;
}
   .triple-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
   
    margin: 0;
    box-sizing: border-box;
  }

  .title-section {
    margin-bottom: 24px;
  }
  .Clinderma’s_holistic
{
color: var(--Alias-secondary-secondary-500, #567C8D);
font-family: Nacelle;
font-size: 0.875rem;
font-style: normal;
font-weight:  600!important;
line-height: normal;
margin-bottom: 5vw; 
}

  .title-text {
    color: #2F2F2F;
    text-align: center;
  
     font-size: 1.75rem;
    font-weight: 300!important;
    line-height: 1.2;
    text-transform: uppercase;
    width:  95%;
    
    margin: 0 auto;
    padding: 0 16px;
  }

  .title-text strong {
    font-weight: 700!important;
  }

  .icons-section {
    display: flex;
    justify-content: space-around;
    width:   80%; /* Adjusted to be flexible, original value might be too restrictive for different screen sizes */
    gap: 0px;
    flex-wrap: nowrap;
    margin-bottom: 24px;
  }

  .icons-section img,
  .icons-section svg {
    width:   3.75rem; /* Specific width as requested */
    height:  auto; /* Specific height as requested */
    flex-shrink: 0;
    /* Removed clamp for these as specific pixel values were provided, but consider if responsiveness is still desired here. */
  }

  .formula-text {
    color: #567C8D;
    
    font-size:  0.8rem;
    font-weight:  600!important;
     
    text-transform: uppercase;
    margin-bottom: 24px;
  }
.formula-text .result-text, .formula-text .equal-to
{
   font-size:1.3rem;
 }
.fixed-bottom-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background:white;
   
   
}

/* 2. The Green Savings Bar (Top Row) */
.saved-amount-bar {
     color: var(--Alias-success-success-800, #2A602C);
    font-size: 12px ;
    font-weight:300!important;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
     
    background: var(--Alias-success-success-100, #C8E6C9);
    padding:8px 30px;
}
.saved-amount-bar p {
    margin: 0;
}
.saved-price {
     font-weight: 700!important;
}
.sticky-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
     background:white;
    box-sizing: border-box;
}

  .sticky-footer-nav {
   background:#0988E5;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--Alias-secondary-secondary-50, #EEF2F4);
 font-size:0.875rem;
     text-transform:uppercase;
 
}
.sticky-footer-content .subtotal-price {
    color: #333;
    font-family: Nacelle, sans-serif;
    font-size: 1.25rem; /* Made slightly larger to match image */
    font-weight: 300!important;
}
/* Styles for the text inside */
.sticky-footer-nav, .buy-label,
 {
  color: #FFF;
  font-family: Nacelle;  /* Added a fallback font */
  font-size:   0.875rem;
  font-style: normal;
  font-weight: 600!important;
  line-height: normal;
  margin: 0;
}
.expert-chat-widget {
            
            flex-shrink: 0; /* From your image styles */
            border-radius: 12px; /* Rounded corners for the whole card */
            overflow: hidden; /* Clips the image and button to the rounded corners */
             margin : 0 auto; 
        }

        /* * The banner image.
         * Set to display: block to remove any extra spacing.
        */
        .expert-chat-image-section .banner-image {
            display: block;
            width:  80%; /* Fills the 382px container */
            height:  auto; /* As you specified */
            object-fit: contain ; /* Ensures image covers the area */
            margin:0 auto;
        }

        /* * The button link.
         * This uses your styles and adds positioning to match the screenshot.
        */
   

.chat-button span {
  /* --- Text Style --- */
  color: #FFFFFF; /* White text */
  font-family: Nacelle; /* Your specified font */
  font-size: 14px!important;
  font-style: normal;
  font-weight: 600!important;
  line-height: normal;
  text-transform: uppercase;
           
}

.chat-button svg {
  /* --- SVG/Icon Style --- *
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* Prevents icon from shrinking */
}
#ingredients-nav-left, #ingredients-nav-right {
    z-index: 1010!important; /* Ensure it sits above the ingredient cards */
    display: none!important; /* Hidden by default, JS will show if > 1 ingredient */
}
 
                }
@media(min-width:768px)
{.coupon-content
    {
        width:66%;
    }
      .coupon-title
  {
    font-size:18px;
  }
  .coupon-subtitle
  {
    font-size:14px;
  }
    .insight-section-container
    {
        margin-top:5vw;
    }

    .stat-block
    {
        width:50%;
    }
   .individual-insight-card {
        background-image: var(--bg-desktop), linear-gradient(0deg, #F9D7EA 0%, #FAF8F6 14.13%);
    }
    .insight-nav-header
    {
        display: flex; justify-content: flex-end; padding: 10px 0; gap: 8px; width:58vw;
    }
      .data-section {
width: 90%;
    height: auto;
    border-radius: 16px;
    background-image: var(--bg-desktop), linear-gradient(0deg, #F9D7EA 0%, #FAF8F6 14.13%);
    /* Use background-image instead of background shorthand to allow 
       the JS variable and the gradient to stack */
   
    background-size: cover;
    background-position: center;
    
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10vw;
   
}

/* --- Typography: Main Stat --- */
.main-text {
    color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.3;
    margin: 0;
}

.main-text strong {
    color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    display: block; /* Forces 70% to sit on its own line if needed, or remove to keep inline */
    margin-bottom: -20px;
}

/* --- Middle Section: Icon + Text --- */
.plan-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px; /* Pushes this section down */
    margin-bottom: 20px;
}

.icon svg {
    display: block;
    margin-top: 3px; /* Optical alignment with text line-height */
}

.note-text {
    color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.4;
    margin: 0;
    width:50%;
}

/* --- Footer --- */
.footer-text {
     color: var(--white, #FFF);
    font-family: 'Nacelle', sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 300!important;
    line-height: normal;
    margin: 0;
    opacity: 0.8;
    width:50%;
}
.insight-viewport.is-scrollable {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 10px 20px 20px 20px; /* Horizontal padding for a centered feel */
    -webkit-overflow-scrolling: touch;
    width:53vw;
    margin:0 auto;
}

/* Hide scrollbar */
.insight-viewport::-webkit-scrollbar {
    display: none;
}

.individual-insight-card {
 
    border: 1px solid #E1E8ED;
    border-radius: 12px;
    padding: 20px;
    flex-shrink: 0;
    width: 77%; /* Single card takes full width */
    box-sizing: border-box;
    scroll-snap-align: center; /* Snaps to middle for better UX */
    margin-top:0;
}

/* Width adjustment when multiple cards exist */
.is-scrollable .individual-insight-card {
    width: 100%; /* Slightly smaller to show more of the next card */
     
}
.insight-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.insight-dot {
    width: 45px;
    height: 4px;
    border-radius: 50%;
    background: #D9E1E7; /* Inactive color */
    transition: all 0.3s ease;
}

.insight-dot.active {
    background: #4E7180; /* Active color matching your icons */
    width: 45px; /* Optional: elongated active dot effect */
    border-radius: 4px;
}
   .review-widget
   {
    margin-top:0;
    padding-bottom:0;
    width:85%;
   }
   .widget-header
   {
    text-align:left!important;
    margin-bottom:10vw;
   }
   .summary-section {
    display: flex;
    align-items: flex-start ;
    justify-content:left; 
    gap: 8px;
    margin-bottom: 4px;
}
.review-count-text
{
    text-align:left;
}
    .acne-in-man-container
    {
        margin:5vw auto!important;

    }
    .popup-dots-container
    {
        margin-top:2vw;
    }
    .popup-carousel-image
    {
         width:25vw!important;
         margin: 0 auto;
         height:auto!important;
         aspect-ratio:359/317;

    }
    .recommedation-faq-item
    {
        padding:0!important;
    }
 #product-popup-container {
    position: fixed;
    top: 0;
    left:auto;
    right: 3%!important;
    width: 600px; 
    height: 100vh;
    max-width: 100vw; 
    background-color: #ffffff;
    z-index: 1001;
    overflow-y: auto;
    box-shadow: -4px 0px 24px rgba(0,0,0,0.15);

    /* 1. Start off-screen to the right */
    transform: translateX(100%);
    
    /* 2. Hidden states */
    visibility: hidden;
    opacity: 0;
    
    /* 3. Transition X-axis instead of Y-axis */
transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s;
}
#product-popup-container.visible {
    transform: translate(42%,13%)!important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 35%!important;
    pacity: 0;
    visibility: hidden;
  
    transition: transform 0.4s ease-in-out, 
                opacity 0.4s ease-in-out, 
                visibility 0.4s;
     
}
 
    /* Container holds the text and the line on one row */
.cart-title-container {
  display: flex;
  align-items: center; /* Vertically centers the line with the text */
  gap: 15px;           /* Gap between "items" and the start of the line */
  width: 100%;
  min-width: 300px;
}
.cart-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.you-cart {
  display: flex;
  align-items: center;
  width: 100%; /* The paragraph itself becomes the flex container */
  margin: 0;
  white-space: nowrap;
}

/* This creates the line automatically after the text */
.you-cart::after {
  content: "";
  flex-grow: 1;
  height: 1.5px;
  background: #B5BBC0;
  margin-left: 15px; /* Creates the gap */
}
 

#item-count, .item-count-unit {
  color: #6c757d;      /* Lighter gray for the item count as seen in image */
  font-weight: normal;
  margin-left: 4px;
}

/* The actual line */
.header-line {
  flex-grow: 1;        /* Forces the line to take up all remaining width */
  height: 1px;         /* Thickness of the line */
  background: #B5BBC0; /* Your requested color */
display: block;
}
    .product-benefits-row span
    {
        font-size:12px!important;
    }
    .product-benefits-row
    {
        padding:0!important;
    }
    .product-header-arrow {
      display: block; /* Visible only on desktop */
      margin-top:-0.5vw;
    }
    .product-header-row h3 {
    overflow: visible!important;
    display: flex!important;
    align-items: center!important;
}

.desktop-title-chevron {
    display: inline-flex!important;
}
    .more-details-btn {
        display: none!important;
    }
    
    
    .popup-active-ingredients-container .popup-carousel-nav-btn {
        top: 60%; /* Centers them relative to the white ingredient cards */
    }
    .popup-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #567C8D;
    transition: border-color 0.3s ease;
   padding:0!important;
    margin-bottom: -2vw!important;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
.popup-active-ingredients-container,.popup-studies-section-container,.popup-faq-section
{
    margin-top:3vw!important;
}
.popup-faq-section
{
    margin-bottom:0vw!important;
}
    .popup-accordion-content
    {
        padding:0!important;
        margin:2vw auto!important;
    }
    #user-first-name
    {
        font-weight:600!important;
    }
    .benefit-container
    {
        width:fit-content;
    }
  .recommedation-faq-section
  {
    width:52vw!important;
    margin:0 auto!important;
  }
  .recommedation-faq-subtitle
  {
    font-size:24px;
    font-weight:300!important;
    line-height:normal;
  }
    .recommedation-faq-subtitle strong
  {
    font-size:24px;
    font-weight:600!important;
  }
  .recommedation-faq
  {
    margin-top:-3vw!important;
    width:53vw;
  }
  .chat-button
  {
            display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 0 auto;
        height: auto;
        padding: 1vw;
        width: 100%;
  }
  .chat-button span
  {
    color: var(--Alias-primary-primary-50, #F7FBFD);
text-align: center;
font-family: Nacelle;
font-size: 16px!important;
font-style: normal;
font-weight: 600;
line-height: normal;
  }
  .feature-item
  {
    font-size:20px!important;
  }
    .supporter-text {
        color: var(--black, #2F2F2F);
        font-size: 32px;
        font-weight: 300!important;
        text-transform: uppercase;
        margin-bottom: 20px;
        line-height: normal;
        width:100%;
    }
  .supporter-container
  {
    margin:5vw auto;
    width:50vw;
  }
  .coach-image
  {
    height:31vw;
     background-image: url(/cdn/shop/files/skin_coach_women_reco.png?v=1776927395);
  }
  .process-card
  {
    margin-top:3vw;
  }
  .step-number
  {
       color: var(--Foundation-pink-pink-100, #FDCADD);
font-family: Nacelle;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }
  .process-card-text
  {
    font-size:20px;
  }
  .process-card-img
  {
    height:171px;
  }
  .order-process-title-desktop {
    display:block;
    color: #2F444E;
    font-family: 'Nacelle', sans-serif;
    font-size: 26px; /* Converted 28px to rem */
    font-style: normal;
    font-weight: 300!important;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-right: 20px; /* Prevent text hitting edge */
    text-align:left;
}

.order-process-title-desktop strong {
  font-size:32px;
    font-weight: 600!important; /* Bold weight for second line */
    display: block;
}
.order-process-title-mobile
{
  display:none;
}
  .doctor-nav-arrows {
        display: flex;
    }
    
    .doctor-promo-header-wrapper {
        width: 56vw; /* Matches your doctor-card-container width */
        margin:0 auto;
    }
  .doctor-promo-section {
                padding: 25px 30px;
    }

    .doctor-promo-container {
              display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        gap: 3vw;
        text-align: left;
        padding-right: 7vw;
    }

    .doctor-header {
        flex: 1; /* Takes up 50% of the space */
        text-align: left; /* Aligns text to the left */
    }

    .doctor-promo-heading {
        text-align: left; /* Overriding center align from mobile */
        font-size: 48px;  /* Larger heading for desktop */
        margin-bottom: 10px;
        width:250px;
    }

    .doctor-promo-subheading {
        text-align: left; /* Overriding center align from mobile */
        font-size: 18px;  /* Larger subheading */
        max-width: 450px; /* Prevents text from stretching too far */
    }

    .doctor-grid {
        flex: 1; /* Takes up 50% of the space */
        margin-top: 0; /* Reset mobile margin */
        margin-bottom: 0;
        width: 100%; /* Fill the flex item */
        justify-content: flex-end; /* Push video to the right */
    }

    .item-video-card {
        max-width: 350px; /* Adjusting the card width for the side-by-side view */
        margin-left: auto; /* Aligns video card to the right side of its container */
    }
    .ayurveda-description
    {
        color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
padding-top:1vw;
width:45%;
    }
    .ayurveda-image
    {
        width:98px;
        height:94px;

    }
    .ayurveda-subtitle
{
    color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.ayurveda-title
{
    color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal; 
}
    .ayurveda-container
    {
        width:90%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }
    #skin-type-display-container span
    {
       font-size:28px!important;

    }
    .diagnosis-container
    {
          text-align:left;
          padding-top:12px;
          width:100%;
          margin:0 auto;

    }
    #skin-type-display-container
    {
     
        margin:0 auto;
    }
    #skin-diagnosis
    {
        font-size:28px;
        text-transform:uppercase;
        font-weight:600;
    }
    .username {
    margin-bottom: 2vw;
    color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 56px;
font-style: normal;
font-weight: 300!important;
line-height: normal;
     
}
       .treatment-banner-img-desktop,.acne-in-man-desktop
        {
          display:block;
        }
       .treatment-banner-img-mobile,.acne-in-man-mobile
        {
            display:none;
        }
        .acne-in-man-container {
    width:50vw;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vw;
}
    .sticky-footer-nav, .buy-label
    {
          text-align:center;
          font-size:18px;

    }
    
    .badges-container
    {
       width:100%;  
      margin:2vw auto;
    }
    .badge-item {
   width: 5vw;
height: auto;
aspect-ratio: 65.82/74.70;
    object-fit: contain;
}
    .product-benefits-row
    {
        border:none!important;

    }
        
    .product-details h3
    {
       font-size:20px;

    }
    #item-count,.item-count-unit
    {
          color: var(--Alias-neutral-neutral-500, #5E6B77);
font-family: Nacelle;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;

    }
    .treatment-verification-section
    {
       margin-top:4vw;
    }
    .you-cart
    {
         margin-left:0;
          margin-bottom:2vw;
          font-size:18px;

    }
    #shopify-section-recommendation-page
    {
       width:100vw;

    }
    .plan-badge
    {
       color: var(--white, #FFF);
    font-family: Nacelle;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 5;
    text-transform: none;
    border-radius: 16px;
    
background: var(--Foundation-pink-pink-800, #882F4F);
    padding: 13px 21px;

    }
    .plan-subtitle 
    {
         color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 28px;
font-style: normal;
font-weight: 300;
line-height: 2;
text-transform: uppercase;

    }
    .plan-title
        {
         color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 0.8;
text-transform: uppercase;

    }
    .left-content-layout
    {
     width:66%;
    }
    .desktop-main-layout {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
       
        margin: 0 auto;
         max-width: 100%;
        padding-left: 0;
        padding-right:20px;
    }

    /* 2. Left Column (Scrolls normally) */
    .left-scroll-column {
       flex: 0 0 60%; /* Adjust width as needed */
        min-width: 0;   /* Prevents flex items from overflowing */
    }

    /* 3. Right Column (Stays Sticky) */
    .right-sticky-column {
        flex: 0 0 35%; 
        position: fixed;
        top: 20px;      /* Distance from the top of the viewport when scrolling */
        left:auto;
        right:0;
        z-index: 10;
        width:35%;
        height: 93vh; /* Only takes up as much space as its content needs */
        
        /* Optional: Add a max-height and scrollbar if the cart content 
           is taller than the screen itself */
        
        overflow-y: auto;
        
        border-radius: 8px;
background: var(--white, #FFF);
box-shadow: -4px 5px 10px 0 rgba(0, 0, 0, 0.16);
         
        padding: 20px;
    }

    /* 4. Disable the fixed bottom bar on Desktop */
    .fixed-bottom-wrapper {
        position: fixed;
        top: auto;
        bottom: 0;
        left: auto;
        right: 20px;
        width: 33%;
        z-index: 999;
        background: white;
    }

    .saved-amount-bar {
        border-radius: 8px; /* Look better as a block than a full-width bar */
    }

    /* 5. Clean up Treatment Plan spacing for desktop */
    .treatment-plan-section {
        margin-top: 0!important; 
    }

    
    
    
    
    #product-list-mobile {
        display: flex ; /* Ensure list shows in the column */
        flex-direction: column ;
    }
    
    
        .saved-amount-bar {
        color: var(--Alias-success-success-800, #2A602C);
        font-size: 14px;
        font-weight: 300!important;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background: var(--Alias-success-success-100, #C8E6C9);
        padding: 8px 30px;
    }
     
           .triple-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
    
    margin: 0;
    box-sizing: border-box;
  }

  .title-section {
    margin-bottom: 24px;
            margin-top: 3vw;
  }
 
   .title-text
  {
            font-size: 3rem;
        width: 100vw;
        max-width: 1900px;
        text-align: left;
        margin-left: 7vw;
        margin-right: auto;
}
.formula-text
{
   font-size:1.5rem;
  font-weight:600!important;
}
.icons-section
{
   gap:0px;
width:42%;
}
.icons-section img, .icons-section svg
{
   width:3.75rem;
}
.action-cta-button
{
   font-size:1.125rem;
   width:40%;
   margin-left:9vw;
   margin-right:auto;
}
.formula-text .result-text, .formula-text .equal-to
{
   font-size:2.5rem;
}
    .doctor-promo-section
    {
               margin: 5vw auto;
        width:50vw;
        border-radius: 32px;
    }
    }
    .doctor-header h2
    {
     font-size:3rem;

    }
.skin-diagonsis-mobile
{
  display:none;

}

   
        .popup-dot.active {
        opacity: 1;
        width: 40px;
    height: 4px;
    border-radius: 21px;
    background: #2F2F2F;
     }
.popup-dot {
    width: 40px;
    height: 4px;
    border-radius: 21px;
    background: var(--Alias-neutral-neutral-200, #B5BBC0);
}
    .popup-accordion-toggle .icon-plus {
    display: block!important;
    width: 100%; /* Make SVG fill the toggle container */
    height: 100%;
}
.popup-accordion-toggle .icon-minus {
   display: none!important;
    width: 100%; /* Make SVG fill the toggle container */
    height: 100%;
}
       .popup-accordion-item.active .popup-accordion-toggle .icon-plus {
    display: none!important;
}
.popup-accordion-item.active .popup-accordion-toggle .icon-minus {
    display: block!important;
}

/* --- STYLES FOR WHEN ACCORDION IS OPEN --- */
.popup-accordion-item.active .popup-accordion-header {
    /* Blue border when active, as per previous request */
    border-bottom-color: #567C8D; 
}
    .product-type-badge
    {
           padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 2px;
        border-radius: 0 4px 4px 0;
        background: #D9EBF0;
        margin-bottom: 8px;
        margin-left: 0;
        margin-right: auto;

    }
      #product-popup-container {
    position: fixed;
    bottom: 0 ;
    left: 50%;
    width: 600px; /* Fixed width for desktop */
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    
    /* Center horizontally and push down vertically to hide */
    transform: translate(-50%, 100%);
    
    /* Hidden state settings */
    visibility: hidden!important;
    opacity: 0;
    
    /* Smooth animation */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
    z-index: 1001;
    box-shadow: 0px -4px 24px rgba(0,0,0,0.15);
    background-color: #ffffff;
    overflow-y: auto;
  }

  .popup-carousel-nav-btn {
        display: block; /* Show on desktop */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        transition: opacity 0.3s ease;
    }

    .popup-carousel-nav-btn:hover {
        opacity: 0.8;
    }
    #popup-nav-left, #ingredients-nav-left {
        left: 10px;
    }
    

    /* Position Right Button */
    #popup-nav-right,#ingredients-nav-right {
        right: 10px;
    }
  /* 2. Visible State (When JS adds the 'visible' class) */
  #product-popup-container.visible {
    /* Bring it up to view */
    transform: translate(-50%, 11%);
    
    /* CRITICAL FIX: Make it visible and opaque */
    visibility: visible!important; 
    opacity: 1!important;
    width:100%;
  }

  /* 3. Fix Layout for Desktop (Side-by-Side) */
  #product-popup-container .popup-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
    padding: 24px;
  }

  /* Adjust Image size for Desktop */
  #product-popup-container .popup-image-container {
    width: 250px;
    height: 250px;
    flex-shrink: 0;
  }

  /* Adjust Text container for Desktop */
  #product-popup-container .popup-details-container {
    width: 93%;
    margin-top: 0;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
    margin-top:4vw;
    margin-bottom:2vw;
    margin-left:auto;
    margin-right:auto;
  }
  #popup-title,.product-price
  {
    font-size:18px;
     font-weight:300!important;
  }
  
  #popup-description
  {
  font-size:1.125rem;
     font-weight:300!important;
  }
      .popup-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
         /* Force full width */
        border-bottom: 1px solid #567C8D;
        transition: border-color 0.3s ease;
        padding-top: 2vw;
        padding-bottom: 2vw;
        /* padding-top: 16px; */
        margin-bottom: 2vw;
        margin-left:auto;
        margin-right:auto;
        width:90%;
    }
        .popup-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        overflow: hidden;
    }
    .popup-accordion-content
    {
        font-size: 1.5rem;
        overflow: hidden; /* <--- THIS IS CRITICAL */
        font-weight: 600!important;
        color: var(--Alias-secondary-secondary-800, #2F444E);
        text-transform:  NONE;
      
        
        margin: 0 auto;
                width: 90%;
       
    }
 .popup-accordion-content p
 {
font-size: 1.125rem;
        font-weight: 300!important;
  
}
.popup-accordion-content strong
 {
font-size: 1.125rem;
        font-weight: 600!important;
  
}

      .popup-accordion-header span:first-of-type {
        font-size: 1.5rem;
        font-weight: 600!important;
        color: var(--Alias-secondary-secondary-800, #2F444E);
         
        letter-spacing: 0.5px;
        width: 100%;
    }
  /* 4. Ensure active ingredients scroll works on desktop */
  #product-popup-container .popup-ingredients-scroll-track {
    justify-content: flex-start; /* CHANGE THIS from center to flex-start */
    margin: 0 auto;
  } 
      .popup-accordion-content span {
        font-size: 1.125rem;
        font-weight: 300!important;
        padding-bottom: 4vw;
        text-transform:none;
      
    }
    .popup-active-ingredients-container {
  position: relative;
  margin-top: 10vw;
  width: 100%;
height: 532px;
flex-shrink: 0;
  border-radius: 12px;
  color: #2F444E;
  overflow: hidden;
  /* Transition for the background image change */
   
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Default background if none provided */
  background-color: #f9f9f9; 
}
/* Overlay to make text readable against background images */
.popup-active-ingredients-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  z-index: 1;
}

.popup-section-title, 
.popup-ingredients-scroll-track, 
.popup-ingredients-dots {
  position: relative;
  z-index: 2; /* Ensure content is above the background overlay */
}

.popup-section-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 2rem;
  font-weight: 300!important;
  letter-spacing: 1px;
  
                text-align: center;
        margin-bottom: 15px;
        font-weight: 300!important;
        letter-spacing: 1px;
        width: 300px;
        margin-top:2vw;
        margin-bottom:2vw;
        margin-left: auto;
        margin-right: auto;
}
.popup-section-title strong
{
    font-weight: 600!important;
}

.popup-ingredients-scroll-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
   width:80%;
  margin: 0 auto;
}

/* Hide scrollbar */
.popup-ingredients-scroll-track::-webkit-scrollbar {
  display: none;
}
/* Container for the "Good for" section */
.ingredient-good-for-section {
    margin-top: 20px;
}

/* The "Good for" Text */
.good-for-label {
    display: block;
    font-size: 18px; /* Adjust size as needed */
    color: #2F2f2f;
    margin-bottom: 10px;
    font-weight: 300!important;
}

/* The Grid for the tags (Unclogs pores, Reduces acne, etc.) */
.ingredient-tags-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */
    gap: 14px; /* vertical gap, horizontal gap */
}

/* Individual tag item styling */
.ingredient-tag-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between Check Icon and Text */
    font-size: 14px;
    color: #2F444E;
    line-height: 1.2;
}

/* Optional: Ensure the icon doesn't shrink if text is long */
.ingredient-tag-item svg {
    flex-shrink: 0;
}
.ingredient-card {
          flex: 0 0 85%;
        scroll-snap-align: center;
        background: transparent;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 8px;
       
        width: 281px;
        height: 380px;
        flex-shrink: 0;
  
}
.ingredient-card.active
{
  background: #fff;
}

.ingredient-card h4 {
  margin: 0 0 5px 0;
  font-size: 28px;
  color: #2F2F2F;
  font-weight:300!important;
}

.ingredient-card p {
  font-size: 14px;
  line-height: 1.4;
  color: #2F2F2F;
  margin: 0 0 10px 0;
   font-weight:300!important;
}

.ingredient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ingredient-tag {
  font-size: 14px;
   
  color: #2F444E;
  padding: 3px 0px;
  border-radius: 4px;
  font-weight: 300!important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-ingredients-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.ing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: all 0.3s;
}

.ing-dot.active {
  background: #2F444E;
  transform: scale(1.2);
}
.popup-faq-section {
 margin-top:15vw;
  padding-top: 20px;
  padding-bottom: 40px;
  margin-bottom:7vw;
   border-radius: 8px;
background: var(--Alias-primary-primary-50, #F7FBFD);
  display: none; /* Hidden by default, shown via JS */
}

.popup-faq-title {
  color: #2F2F2F;
  text-align: center;
  font-family: 'Nacelle', sans-serif;
  font-size: 28px;
  font-weight: 700!important;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.popup-faq-description {
  max-width: 348px;
  margin: 0 auto 20px auto;
  color: #343B41;
  text-align: center;
  font-family: 'Nacelle', sans-serif;
  font-size: 14px;
  line-height: 26px;
  font-weight:300!important;
}
#popup-faq-list
{
  padding-left:16px;
  padding-right:16px;
          width: 90%;
        margin: 0 auto;
}

.popup-faq-item {
  border-bottom: 1px solid #2f2f2f;
}

.popup-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
}

.popup-faq-question {
  color: #2F2F2F;
  font-family: 'Nacelle', sans-serif;
  font-size: 18px;
  font-weight: 600!important;
  width: 281px; /* Fixed width as requested */
}

.popup-faq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon State Management */
.popup-faq-header .icon-minus { display: none; }
.popup-faq-header .icon-plus { display: block; }

.popup-faq-item.active .icon-plus { display: none; }
.popup-faq-item.active .icon-minus { display: block; }

.popup-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  color: #555;
  font-family: 'Nacelle', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.popup-faq-content p {
  padding-bottom: 15px;
  margin: 0;
  font-weight:300!important;
}
.popup-faq-content p strong{
  
  font-weight:600!important;
}
/* Add this new class */
.popup-studies-section-container {
          margin-top: 15vw;                                                                                                                                                                                                                                                            vw;
       
        margin-left: auto;
        margin-right: auto;
 
  
}
#popup-studies-content img {
  max-width: 90%;
  height: auto;
  margin-top:2vw;
  margin-left:auto;
  margin-right:auto;
}

/* All your other styles are still needed */
.popup-studies-title {
  color: #2F2F2F;
  text-align: center;
  font-family: Nacelle;
  font-size: 28px;
  font-weight: 300!important;
  line-height: 34px;
  text-transform: uppercase;
  margin-bottom: 20px;
  width:45%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7vw;
}
.popup-studies-title strong {
   
  font-weight: 600!important;
  
}
.popup-studies-box {
    border: 1px solid #567C8D; 
    border-radius: 12px;       
    overflow: hidden;          
    background-color: #fff;
    margin-bottom: 20px;
}
.popup-study-block {
  padding: 16px;
 border-radius: 8px;
border: 1px solid var(--Alias-secondary-secondary-500, #567C8D);
  
 
  background-color: #fff; /* Make the inner blocks white */
}
.popup-study-block:not(:last-child) {
    border-bottom: 1px solid #567C8D;
}
.popup-study-block:last-child {
  margin-bottom: 0;
}

.popup-study-heading {
  color: var(--Alias-secondary-secondary-500, #567C8D);
 
text-transform: uppercase;
  font-family: Nacelle;
  font-size: 18px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.popup-study-text {
  color: #2F2F2F;
  font-family: Nacelle;
  font-size: 14px;
  font-weight: 300!important;
  line-height: 1.4;
  margin: 0;
}
     
    .chat-button span {
  /* --- Text Style --- */
  color: #FFFFFF; /* White text */
  font-family: Nacelle; /* Your specified font */
  font-size: 25px;
  font-style: normal;
  font-weight: 600!important;
  line-height: normal;
  text-transform: uppercase;
           
}
.product-card .product-details .product-description {
        color: var(--Alias-neutral-neutral-500, #5E6B77);
        font-family: Nacelle;
       font-size:14px;
        font-style: normal;
        font-weight: 300!important;
        line-height: 1.4;
        width: 100%;
        white-space: normal;
        align-self: flex-start;
        
        margin: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: auto;
        min-height: 0;
    }
    .popup-header-group {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
    }
        .popup-close-btn {
        align-self: flex-end;
        margin-right: 15px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .popup-scroll-bar {
        width: 124px;
        height: 4px;
        flex-shrink: 0;
        border-radius: 3px;
        background: var(--Alias-neutral-neutral-300, #939CA4);
        align-self: center;
        margin-bottom: 8px;
    }
        .product-type-label {
        color: var(--Alias-secondary-secondary-800, #2F444E);
        font-family: Nacelle;
        font-size: 1rem;
        font-style: normal;
        font-weight: 300!important;
        line-height: normal;
    }

.chat-button svg {
  /* --- SVG/Icon Style --- */
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* Prevents icon from shrinking */
}
    .ayurveda-images-row
    {
               display: flex;
        align-items: flex-start;
        width: 100vw;
        gap:20px;
    }
    }
    .ayurveda-description
    {
      width:95%;
    }
    #ayurveda-diagnosis-container
    {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0px;
    /* justify-content: center; */
    /* margin-bottom: 15px; */
    /* width: 100vw; */
    margin: 0 auto;
    
    }
    .main-wrapper
    {
        flex-direction: column; 
         width:50vw;
    }
         .customise-plan {
        color: #2F2F2F;
        
        font-family: Nacelle;
       
        font-style: normal;
        font-weight: 300!important;
        line-height: normal;
        text-transform: uppercase;
        margin-top: 3vw;
        margin-bottom:2vw;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .treatment-plan-mobile
    {
          display:none;

    }
      .treatment-plan-desktop
        {
        margin-left:3vw;
    margin-right: auto;
    color: #2F2F2F;
 
    text-align: left;
    font-family: Nacelle; 
    font-size: 32px;
    font-style: normal;
     font-weight: 300!important; 
    line-height: normal;
    text-transform: uppercase;
     
        }
        .treatment-plan-desktop strong
        {
        
     font-weight: 600!important;
        }
        .treatment-plan-description
        {
          color: var(--black, #2F2F2F);
font-family: Nacelle;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-left:auto;
margin-top:1vw;
margin-right:auto;
width:50vw;
        }
    .scroll-container {
        overflow-x: auto;
        padding-bottom: 0px;
        white-space: nowrap;
        padding: 0 10px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: 95vw;
        margin-left: auto;
        margin-right: auto;
    }
    #product-list-desktop {
    display: flex;
     flex-direction:column;
    gap: 20px; 
    align-items: stretch; 
}

#product-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
    .product-card {
   
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        border: 1px solid #e0e0e0;
        flex-basis: 250px;
        flex-grow: 1;
        border-radius:24px;
        padding:7px 15px;
         
        border: 1px solid var(--Alias-neutral-neutral-200, #B5BBC0);
        background-color: #ffffff;
        width: 33%;
         
}
.tagline {
        display: flex
;
        padding: 6px 8px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
        border: 1px solid var(--Alias-secondary-secondary-500, #567C8D);
        color: var(--Alias-secondary-secondary-500, #567C8D);
        font-family: Nacelle;
        font-size:  1rem;
        font-style: normal;
        font-weight: 600!important;
        line-height: normal;
        text-transform: uppercase;
    }
    .product-image {
    flex-shrink: 0;
    width: 154px;
    height: 185px;
    border-radius: 8px;
    overflow: hidden;
}
.sticky-footer-full {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* Add spacing on sides */
    background: #fff;   /* White background like the image */
    position: fixed;    /* Ensures it sticks to bottom */
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    z-index: 999;
   
}

/* 2. The Price Text (Left Side) */
.sticky-footer-full .subtotal-price {
    color: #333; /* Dark color for visibility on white bg */
    font-family: Nacelle, sans-serif;
    font-size: 1.125rem;
    font-weight: 300!important;
}
.sticky-footer-nav {
      background:#0988E5;
    padding: 12px 24px; /* Padding creates the button size */
    border-radius: 5px;
    cursor: pointer;
    color: var(--Alias-secondary-secondary-50, #EEF2F4);
 text-transform:uppercase;
 font-size:0.875rem;
    }
         
    .recommedation-faq-section
    {
      width:100vw;
      margin-right:auto;
      margin-left:3vw;
    }
  .circle-number:not(.last)::after
  {
   left:29px;
}
.client-container
{
  margin-top:-14vw!important;
}

.customers-scroll-container {
         display: flex;
      overflow-x: hidden;  
    flex-wrap: nowrap;
    gap: 2rem;
    padding: 0 20px;
    scroll-snap-type: x mandatory; 
    scroll-padding: 0 20px;
    -ms-overflow-style: none;
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
    
    
  }
   .customers-title {
    text-align: left;
    font-size: 32px; /* As requested */
    line-height:normal;
    margin-bottom:5vw;
    margin-left:3vw;
    font-weight:300!important;
     text-transform:uppercase;
  }
    .customers-title strong
    {
       font-weight:600!important;
    }
    .happy-customers-section
    { 
      
    overflow: hidden; /* Prevents anything from spilling out */  
    margin-right: auto;
    margin-left: auto;
    width: 55vw;
     margin-top:5vw;

    }
    .customer-testimonial-card {
    /* Dimensions as requested */
           
    width: 45%;
        margin:0 auto;
        flex-shrink: 0;
        scroll-snap-align: start;
        border-radius: 12px;
         
    

    /* Visual styling */
    border-radius: 12px;
    overflow: hidden;
    
     
  }

  .customer-testimonial-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  

 expert-chat-image-section .banner-image {
        display: block;
        width:   40%;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }
    .expert-chat-widget {
        width: 90vw;
        flex-shrink: 0;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto;
    }
.recommedation-faq-item
{
   padding:2vw auto;
border-bottom:1px solid #7F99A4;
}
.recommedation-faq-list {
 font-size:2rem!important;
  padding-left: 20px!important; /* smaller indent on mobile */
 }
 .faq-list-item {
  font-size: 2rem!important; /* Matching the mobile answer font size */
 }
.recommedation-faq-list {
  list-style: disc outside!important;
  padding-left: 25px!important; /* Adds space for the bullets */
  margin: 10px 0!important;
}

.recommedation-faq-list-item {
 color: black!important;  
 font-size: 2rem!important;  
 margin-bottom: 5px!important;
font-weight:600!important;
}
.recommedation-faq {
    /* Layout and Spacing */
    max-width: 100vw; /* Allows it to take up available space, but better controlled */
    margin: 5vw auto;
    padding: 10px; /* NEW: Adds 20px of space inside the container on all sides */
    box-sizing: border-box; /* NEW: Ensures padding is included within the element's width/height */
    margin-bottom: 0vw;
    height: auto;
    min-height: 600px; 
    /* Appearance */
    font-family: Nacelle; 
    text-align: left;
    border-radius: 12px;
    padding-bottom:5vw;
}
.price-summary-wrapper {
    width:  65%; /* Adjust as needed */
  
    border-radius: 8px;
    font-family: Arial, sans-serif;
    color: #333;
    overflow: hidden; 
    margin-left:auto;
    margin-right:auto;
 
}

/* "Buy Now" and "Saved" Section */
.buy-now-section {
    padding: 15px;
    
    border-bottom: 1px dashed #eee;
}

.buy-now-text {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: #555;
}

.buy-now-text .original-price {
    text-decoration: line-through;
    color: #888;
    margin-left: 8px;
    margin-right: 8px;
}

.buy-now-text .current-price {
    font-weight: bold;
    color: #333;
}

.saved-amount {
      color: var(--Alias-success-success-800, #2A602C);
    font-size: 1.125rem ;
    font-weight:300!important;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
     
    background: var(--Alias-success-success-100, #C8E6C9);
    padding:8px 0px;
}
.saved-amount-bar p {
    margin: 0;
}

.saved-price {
     font-weight: 700!important;
}
.sticky-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px;
     width:90%;
     margin:0 auto;
    box-sizing: border-box;
}

/* 4. The Price Text (Left) */
.sticky-footer-content .subtotal-price,.total {
    color: #333;
    font-family: Nacelle, sans-serif;
    font-size: 24px; /* Made slightly larger to match image */
    font-weight: 300!important;
}
.sticky-footer-nav {
  background:#0988E5;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--Alias-secondary-secondary-50, #EEF2F4);
   text-transform:uppercase;
   font-size:0.875rem;
  }

/* Text inside the button */
 
/* "Item Total" Section */
.item-total-section {
   display: flex;
     
    align-items: center;
}

.item-total-section p {
     margin-right: auto;
    font-weight:600!important;
     font-size: 1rem ;
}

.item-price {
    font-weight: bold;
    color: #555;
}

/* "Complimentary Services" Section */
.complimentary-services-section {
       position: relative;
        padding: 15px;
        border-radius: 16px;
        border: 1px solid var(--Alias-neutral-neutral-200, #B5BBC0);
        overflow: visible!important;
        margin-top: 25px!important;
        margin:0 auto;
        
}

 
.section-title {
    font-size: 1rem;
    font-weight: 600!important;
    color: #555;
    margin-bottom: 15px;
    text-transform:none;
    margin-top:1vw;
    color: var(--Alias-neutral-neutral-500, #5E6B77);
     text-transform:uppercase;
  
}
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.dotted
{
  border-bottom: 1px dashed #B5BBC0;
}
.service-item p {
   color: var(--Alias-neutral-neutral-500, #5E6B77);
    margin: 0;
    font-size: 1rem;
    /* Added text-decoration for the underline */
    font-weight:300!important;
}

.original-service-price {
    text-decoration: line-through;
    color: #2f2f2f;
    margin-right: 8px;
    font-size: 1rem;
    font-weight:300!important;
}

free-service-price {
   color: var(--Alias-success-success-500, #4CAF50);
    font-weight: 600!important;
    font-size: 0.875rem;
    text-transform:uppercase;
}

/* "Total" and "Shipping" Section */
.price-container {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #f8f8f8;
    border-top: 1px dashed #eee;
}

.total-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.total-label:last-child {
    margin-bottom: 0;
}

.subtotal-label {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

#subtotal-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.shipping-label {
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
}

#shipping-price {
    background-color: #BFBFBF;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
 .triple-action-container {
      margin: 16px;
    }
    .icons-section {
      flex-direction: row;
      align-items: center;
      gap:  40px;
      width: 100%; /* Ensure icons section takes full width on small screens */
      justify-content: center; /* Center icons on small screens */
    }
    .price-summary-wrapper {
    border-radius: 8px;
     width:95%;
    color: #333;
    overflow: hidden; 
     margin-top:0;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:5vw;
}


/* "Buy Now" and "Saved" Section */
.buy-now-section {
    padding: 15px;
     
    border-bottom: 1px dashed #eee;
}

.buy-now-text {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: #555;
}

.buy-now-text .original-price {
    text-decoration: line-through;
    color: #888;
    margin-left: 8px;
    margin-right: 8px;
}

.buy-now-text .current-price {
    font-weight: bold;
    color: #333;
}

.saved-amount {
    color: #e67e22; /* Orange color */
    font-size: 0.9em;
    font-weight: bold;
    margin: 0;
}

/* "Item Total" Section */
.item-total-section {
   display: flex;
     
    align-items: center;
}

.item-total-section p {
     margin-right: auto;
    font-weight:600!important;
     font-size: 18px ;
}

.item-price {
   font-weight:600!important;
    color: #2f2f2f;
            font-size: 1rem;
}

/* "Complimentary Services" Section */
 
 
    .item-details {
        display: flex;
        align-items: center;
        gap: 20px;
    }
        .service-icon {
        width: 24px;
        height: 24px;
    }
.section-title {
   color: var(--Alias-neutral-neutral-500, #5E6B77);
font-family: Nacelle;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform:none;
margin:0 auto 1vw;
 text-transform:uppercase;
}
.dotted
{
  border-bottom: 1px dashed #B5BBC0;
  padding:10px 0;
}
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.service-item p {
        color: var(--Alias-neutral-neutral-500, #5E6B77);
    margin: 0;
    font-size: 1rem;
    /* Added text-decoration for the underline */
    font-weight:300!important;
}
.original-price
{
color: var(--Alias-neutral-neutral-500, #5E6B77);
text-decoration: line-through;
margin-right:0vw;
font-weight:300!important;
font-size:18px;
}
.current-price
{
    font-size:18px;
font-weight:300!important;
}
 }
.current-price
{
font-weight:300!important;
font-size:18px;
}
 
.original-service-price {
   text-decoration: line-through;
    color: #2f2f2f;
    margin-right: 8px;
  font-size:16px;
    font-weight:300!important;
}

.free-service-price {
   color: var(--Alias-success-success-500, #4CAF50);
    font-weight: 600!important;
   font-size:1rem;
   text-transform:none;
}

/* "Total" and "Shipping" Section */
.price-container {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #f8f8f8;
    border-top: 1px dashed #eee;
}

.total-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.total-label:last-child {
    margin-bottom: 0;
}

.subtotal-label {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

#subtotal-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.shipping-label {
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
}

#shipping-price {
    background-color: #BFBFBF;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

 
  .skin-diagonsis-desktop
        {
            display: block;
        font-size: 24px;
     
        padding-bottom: 2vw;
        margin-top: 2vw;
           color: var(--Foundation-pink-pink-800, #882F4F);
         font-weight:600;
        line-height:1;
        }
        .skin-diagonsis-desktop-subheading
        {
            color: var(--Foundation-pink-pink-800, #882F4F);
font-family: Nacelle;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: normal;
        }
        .skin-diagonsis-mobile
        {
           display:none;
        }
        .triple-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
    
    margin: 0;
    box-sizing: border-box;
  }

  .title-section {
    margin-bottom: 24px;
            margin-top: 3vw;
  }
 
   .title-text
  {
            font-size: 3rem;
        width: 100vw;
        max-width: 1900px;
        text-align: left;
        margin-left: 7vw;
        margin-right: auto;
}
.formula-text
{
   font-size:1.5rem;
  font-weight:600!important;
}
.icons-section
{
   display: flex;
        justify-content: space-around;
        width: 30%;
        gap: 0px;
        flex-wrap: nowrap;
        margin-bottom: 24px;
}
.icons-section img, .icons-section svg
{
   width:30%;
}
.action-cta-button
{
   font-size:1.125rem;
   width:40%;
   margin-left:9vw;
   margin-right:auto;
}
.formula-text .result-text, .formula-text .equal-to
{
   font-size:2.5rem;
}


}