/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./node_modules/keen-slider/keen-slider.min.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/widgets/wellversed/CollectionPageWithFilters/V1/style.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
/* Remove body padding for collection pages */
body:has(.wellversed-collection-combined) {
  padding: 0 !important;
}
.collection-prose {
  padding-left: 15px;
  padding-right: 15px;
}
/* Accordion styles for CollectionPageWithFilters */

.accordion-collapse.collapse {
  display: block !important;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.accordion-collapse.collapse.show {
  display: block !important;
  max-height: none;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
.accordion-header {
  margin-bottom: 0 !important;
}

.accordion-button {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.accordion-body {
  padding-top: 0.5rem !important;
}

/* SVG rotation animation styles */
.accordion-button .svg-arrow {
  transition: transform 0.2s ease;
  transform-origin: center;
  margin-left: auto;
}

.accordion-button.collapsed .svg-arrow {
  transform: rotate(0deg);
}

.accordion-button:not(.collapsed) .svg-arrow {
  transform: rotate(-180deg);
}

.custom_accordian .accordion-button:not(:has(.svg-arrow))::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z' fill='currentColor' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.custom_accordian .accordion-button.collapsed:not(:has(.svg-arrow))::after {
  transform: rotate(0deg);
}

.custom_accordian
  .accordion-button:not(.collapsed):not(:has(.svg-arrow))::after {
  transform: rotate(-180deg);
}

.custom_accordian {
  margin-top: 1rem;
  width: 100%;
}

.custom_accordian .accordion-item {
  overflow: hidden;
  border-top-left-radius: var(--border-radius-md);
  border-top-right-radius: var(--border-radius-md);
  border: 1px solid transparent;
  margin-top: 9px !important;
}

.custom_accordian .accordion-item:first-child {
  margin-top: 0 !important;
}

.custom_accordian .accordion-item.active {
  border-width: 1px;
  border-color: var(--color-surface-3);
}

.custom_accordian .accordion-header {
  width: 100%;
}

.custom_accordian .accordion-button {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  border-radius: var(--border-radius-md);
  border-width: 1px;
  border-color: var(--color-primary-light-3);
  background-color: var(--color-on-secondary);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--transition-timing-default);
  transition-duration: var(--transition-duration);
  box-shadow: none !important;
  position: relative;
  gap: 8px;
}

.custom_accordian .accordion-item .accordion-button.collapsed {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.custom_accordian .accordion-button h3 {
  margin-right: 1rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.1rem;
}

.custom_accordian .accordion-button:not(.collapsed) {
  background-color: var(--color-on-secondary);
}

.custom_accordian .accordion-button::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z' fill='currentColor' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  transition: transform 0.5s ease;
  transform-origin: center;
}

.custom_accordian .accordion-button.collapsed::after {
  transform: translateY(-50%) rotate(0deg);
}

.custom_accordian .accordion-button:not(.collapsed)::after {
  transform: translateY(-50%) rotate(-180deg);
}

.custom_accordian .accordion-button {
  position: relative;
}

.custom_accordian .accordion-item .accordion-button {
  position: relative;
}

.custom_accordian .accordion-collapse {
  overflow: hidden;
  transition-property: all;
  transition-timing-function: var(--transition-timing-default);
  transition-duration: var(--transition-duration);
  transition-duration: 500ms;
  display: block !important;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

.custom_accordian .accordion-collapse.show {
  max-height: none;
  opacity: 1;
  visibility: visible;
}

/* By default, all accordion items should be collapsed */
.custom_accordian .accordion-button {
  position: relative;
}

.custom_accordian .accordion-collapse.collapse {
  max-height: 0;
  opacity: 0;
  display: block !important;
  visibility: hidden;
}

.custom_accordian .accordion-collapse.collapse.show {
  max-height: none;
  opacity: 1;
  display: block !important;
  visibility: visible;
}

.custom_accordian .accordion-body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.custom_accordian .accordion-body p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  line-height: 22.75px;
  letter-spacing: 0.5px;
  color: var(--color-text);
  display: block !important;
}

/* Add this script to make the accordion work */
.custom_accordian + script {
  display: none;
}

/* Accordion script is now handled by React component */

/* Add missing padding-bottom from globals.css */
.accordion-body {
  padding-bottom: 0.5rem !important;
}

/* Mobile-specific styles to ensure accordion questions are left-aligned */
@media (max-width: 767px) {
  .custom_accordian .accordion-button {
    text-align: left;
    justify-content: flex-start;
  }

  .custom_accordian .accordion-button h3 {
    text-align: left;
    margin-right: auto;
  }

  .custom_accordian .accordion-body {
    text-align: left;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/widgets/wellversed/ProductDetails/V1/style.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
/* Product Details Styles - Only keeping styles that are difficult to implement with Tailwind */
/* Parent description box base styling */
.parent-description-box {
  letter-spacing: 0.5px;
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.parent-description-box::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Paragraph styling for proper text justification */
.parent-description-box p {
  margin-bottom: 16px;
  line-height: 1.5;
  text-align: justify; /* Justify all lines except last */
  -moz-text-align-last: left;
       text-align-last: left; /* Keep last line left-aligned */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto; /* Allow hyphenation for better justification */
  white-space: normal;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
  max-width: 100%;
  text-rendering: optimizeLegibility;
}

/* List styling */
.parent-description-box ul {
  list-style: none;
  padding-left: 0;
}

.parent-description-box ul li {
  margin-bottom: 20px;
  position: relative;
  padding-left: 32px;
  color: #212529;
  text-align: justify; /* Justify list item text */
  -moz-text-align-last: left;
       text-align-last: left; /* Keep last line left-aligned */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.parent-description-box ul li:before {
  content: "•";
  position: absolute;
  left: 13px;
  top: 2.5px;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
}

.parent-description-box ul li strong {
  font-weight: 700;
  color: #212529;
}

/* Link styling */
.parent-description-box a {
  text-decoration: none;
}

.parent-description-box a:hover {
  text-decoration: underline;
}

/* Show scrollbar on hover and interaction */
.parent-description-box:hover,
.parent-description-box:focus,
.parent-description-box:active {
  scrollbar-width: thin; /* Firefox */
  -ms-overflow-style: auto; /* IE and Edge */
}

.parent-description-box:hover::-webkit-scrollbar,
.parent-description-box:focus::-webkit-scrollbar,
.parent-description-box:active::-webkit-scrollbar {
  display: block;
  width: 6px;
}

.parent-description-box::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.parent-description-box::-webkit-scrollbar-track {
  background: transparent;
}

/* Full section styling */
.parent-description-box.full-section {
  max-height: 450px;
  overflow-y: auto;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .parent-description-box.full-section {
    max-height: none;
    overflow: visible;
  }

  .parent-description-box {
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .parent-description-box::-webkit-scrollbar {
    display: none;
  }

  .parent-description-box p {
    text-align: justify !important;
    -moz-text-align-last: left !important;
         text-align-last: left !important;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 14px;
    letter-spacing: 0;
    word-spacing: 0.03em;
    hyphens: auto;
  }

  .parent-description-box ul li {
    text-align: justify !important;
    -moz-text-align-last: left !important;
         text-align-last: left !important;
    hyphens: auto;
  }

  /* Remove scrollbar styles on mobile */
  .parent-description-box:hover,
  .parent-description-box:focus,
  .parent-description-box:active {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .parent-description-box:hover::-webkit-scrollbar,
  .parent-description-box:focus::-webkit-scrollbar,
  .parent-description-box:active::-webkit-scrollbar {
    display: none;
  }
}

/* Small mobile devices (iPhone SE, smaller Android phones) */
@media (max-width: 375px) {
  .parent-description-box p {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 12px;
    text-align: justify !important;
    -moz-text-align-last: left !important;
         text-align-last: left !important;
    word-spacing: 0.02em;
    hyphens: auto;
  }

  .parent-description-box ul li {
    text-align: justify !important;
    -moz-text-align-last: left !important;
         text-align-last: left !important;
    hyphens: auto;
  }
}

/* Extra small mobile devices */
@media (max-width: 320px) {
  .parent-description-box p {
    font-size: 0.85em;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: justify !important;
    -moz-text-align-last: left !important;
         text-align-last: left !important;
    word-break: normal;
    hyphens: auto;
  }

  .parent-description-box ul li {
    text-align: justify !important;
    -moz-text-align-last: left !important;
         text-align-last: left !important;
    padding-right: 2px;
    hyphens: auto;
  }
}

/* for other tabs */

.parent-description h2 {
  font-weight: 600;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 5px;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}
.parent-description p {
  margin-top: 0;
  margin-bottom: 16px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

/* Specific scrolling behaviors */
.parent-description .full-section {
  max-height: none !important;
  overflow: visible !important;
}

/* for other tabs */

.parent-description h2 {
  font-weight: 600;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 5px;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}
.parent-description p {
  margin-top: 0;
  margin-bottom: 16px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

/* Specific scrolling behaviors */
.parent-description .full-section {
  max-height: none !important;
  overflow: visible !important;
}

/* Product Information tab styling */
.parent-description .product-Information {
  /* max-width: 780px; */
  /* margin: 0 auto; */
  overflow: visible;
}

.parent-description .product-Information .right-section {
  width: 740px;
  max-width: 100%;
  margin: 0;
}

/* this is for image parent div */
.parent-description .product-Information .detail {
  max-height: 450px;
  overflow-y: auto;
  background: #f3f4f9;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.parent-description .product-info .detail {
  padding-left: 40px;
}
.other-info h2 {
  text-align: start !important ;
  margin-bottom: 8px !important ;
  padding-top: 10px !important ;
  padding-bottom: 10px !important ;
  justify-content: start !important ;
}

.other-info .full-section {
  margin-top: 20px !important ;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .parent-description.product-Information .right-section {
    width: 100%;
  }

  .parent-description.product-Information .detail {
    max-height: none;
    height: auto;
  }

  .parent-description h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0.3rem;
  }

  .parent-description.product-Information h2 {
    text-align: center;
    width: 100%;
  }

  .other-info h2 {
    text-align: start !important ;
    margin-bottom: 8px !important ;
    padding-top: 10px !important ;
    padding-bottom: 10px !important ;
    justify-content: start !important ;
  }

  .parent-description p {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.parent-description img {
  border-radius: 15px;
}

/* Hide scrollbar for tab headers */
.scrollbar-none {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
}

.scrollbar-none::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari and Opera */
  width: 0 !important;
  height: 0 !important;
}

/* Mobile-specific tab navigation styles */
@media (max-width: 768px) {
  /* Ensure tab container allows horizontal scrolling */
  .product-details-widget .flex.flex-row {
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* Snap to tabs */
    padding-bottom: 10px;
    width: 100%;
    display: flex !important;
    flex-wrap: nowrap !important;
    background-color: #fff;
    z-index: 45;
  }

  /* Sticky behavior when applied */
  .product-details-widget .flex.flex-row.sticky {
    position: fixed !important;
    top: 158px !important; /* Match the header height */
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  /* Ensure tab items are properly sized for scrolling */
  .product-details-widget .flex.flex-row > div {
    scroll-snap-align: start; /* Snap alignment */
    white-space: nowrap;
    padding: 0 10px;
    flex: 0 0 auto !important; /* Prevent tabs from shrinking */
    min-width: 150px !important; /* Ensure minimum width */
  }

  /* Ensure text doesn't wrap in tabs */
  .product-details-widget .flex.flex-row p {
    white-space: nowrap;
    font-size: 16px; /* Slightly smaller font on mobile */
  }

  /* Force horizontal scrolling */
  .product-details-widget {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Add padding to the top of the content when tabs are sticky */
  .product-details-widget.has-sticky-tabs .py-2 {
    padding-top: 60px !important; /* Height of the tab bar plus some extra space */
  }
}

/* Section highlight animation */
@keyframes sectionHighlight {
  0% {
    background-color: rgba(var(--color-primary-rgb), 0.1);
  }
  100% {
    background-color: transparent;
  }
}

.section-highlight {
  animation: sectionHighlight 1.5s ease-out;
}

/* Flickering Fix: Optimized styles for nutritional information */
.parent-description.product-Information {
  position: relative;
  contain: layout style;
  isolation: isolate;
}

/* Optimize sticky behavior to reduce repaints */
.product-details-widget .sticky {
  transition: none;
  contain: layout style;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/widgets/wellversed/Supplements/style.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
/* Hide .content-preview when expanded */
.expanded .content-preview {
  display: none !important;
}

.richtext-content a {
  --tw-text-opacity: 1;
  color: rgb(13 109 253 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.richtext-content h1 {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-2xl-1);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-normal);
}

@media (min-width: 768px) {
  .richtext-content h1 {
    font-size: var(--font-size-5xl);
    line-height: var(--line-height-tight);
  }
}

.richtext-content h2 {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-normal);
}

@media (min-width: 768px) {
  .richtext-content h2 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
  }
}

.richtext-content p {
  margin-bottom: 1rem;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-tight);
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .richtext-content p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
  }
}

.richtext-content h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-lg-2);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-normal);
}

@media (min-width: 768px) {
  .richtext-content h3 {
    font-size: var(--font-size-2xl-1);
    line-height: var(--line-height-tight);
  }
}