/** Shopify CDN: Minification failed

Line 1219:0 Unexpected "}"
Line 1480:27 Expected identifier but found "!"
Line 4068:0 Unexpected "{"
Line 4068:1 Expected identifier but found "%"
Line 4080:2 Unexpected "{"
Line 4080:3 Expected identifier but found "%"
Line 4158:0 Unexpected "{"
Line 4158:1 Expected identifier but found "%"
Line 4174:2 Unexpected "{"
Line 4174:3 Expected identifier but found "%"
... and 8 more hidden warnings

**/
         .recommendation-main-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  position: -webkit-fixed !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
  height:70px;
}

.recommendation-header-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
   margin-left:16px;
  margin-right: auto;
  width: auto;
}
     .you-cart::after {
        content: "";
        flex-grow: 1;
        height: 1.5px;
        background: #B5BBC0;
        margin-left: 15px;
    }
  .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;
margin-top: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%;
 width:52%;
}

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

/* 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 8vw;
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: 9vw 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:100vw;
margin-left:auto;
margin-right:auto;
padding-bottom:4vw;
border-radius:0;
}
#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: 100%;
gap: 11px;


}

/* 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 {
                  display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        white-space: nowrap;
                    color: #000;
                    font-family: Nacelle; 
                    font-size:  18px;
                    font-style: normal;
                    font-weight: 600!important ; 
                    line-height: normal;
                    margin-left:5vw;
                    gap:2px
                     
                }
                .you-cart::after {
        content: "";
        flex-grow: 1;
        height: 1.5px;
        background: #B5BBC0;
        margin-left: 2px;
        display: block;
    }
#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;
margin-left:auto!important;
margin-right:auto!important;
}
.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)
{   .treatment-verification-section
    {
       margin-top:3dvw;
    }
   .complimentary-services-section
   {
    margin-bottom:3vw!important;
   }
  .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;
 height:10vw;
}
.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;

}
 
.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: 100%;
gap:10px;
}
}
.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: 100%;
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: 100%;

}
.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:normal;
}
.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;
}


}