/* Start:/lp/seracin/css/output.css?17524873139236*/
/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root {
    --spacing: 0.25rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
   h2, h3 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  img, svg, video {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: color-mix(in oklab, currentColor 50%, transparent);
    }
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  button, ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .h-full {
    height: 100%;
  }
  .w-full {
    width: 100%;
  }

  .grid {
  display: grid; 
  }




/* Без брейкпоинтов */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-12 { grid-column: span 12 / span 12; }

/* sm: min-width 640px */

/* md: min-width 768px */
@media (min-width: 768px) {
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-6 { grid-column: span 6 / span 6; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .md\:col-span-10 { grid-column: span 10 / span 10; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
}

/* lg: min-width 1024px */

/* xl: min-width 1280px */

/* 2xl: min-width 1536px */




/* Базовые классы */

.hidden {
  display: none;
}

/* Медиа-запросы для md (768px и выше) */

/* Медиа-запросы для lg (1024px и выше) */

/* Медиа-запросы для xl (1280px и выше) */

/* Медиа-запросы для sm (640px и выше), если понадобится */

/* Медиа-запросы для 2xl (1536px и выше), если понадобится */




/* Базовые классы */
.flex {
  display: flex;
}

.hidden {
  display: none;
}

/* Медиа-запросы для sm (640px и выше) */

/* Медиа-запросы для md (768px и выше) */
@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
}

/* Медиа-запросы для lg (1024px и выше) */

/* Медиа-запросы для xl (1280px и выше) */

/* Медиа-запросы для 2xl (1536px и выше) */




  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }

  .text-center {
    text-align: center;
  }
  .md\:grid-cols-8 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .md\:justify-center {
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:text-right {
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .lg\:text-right {
    @media (width >= 64rem) {
      text-align: right;
    }
  }
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}




/* Base */
.relative  { position: relative; }
.absolute  { position: absolute; }

/* Small (min-width: 640px) */
@media (min-width: 640px) {
  .sm\:relative  { position: relative; }
}

/* Medium (min-width: 768px) */
@media (min-width: 768px) {
  .md\:absolute  { position: absolute; }
}

/* Large (min-width: 1024px) */

/* Extra Large (min-width: 1280px) */

/* 2XL (min-width: 1536px) */
.z-30    { z-index: 30; }
.z-40    { z-index: 40; }


.uppercase {
	text-transform: uppercase;
}

/* Default (mobile-first) */
.col-start-1 { grid-column-start: 1; }
.col-start-4 { grid-column-start: 4; }

/* sm */
@media (min-width: 640px) {
  .sm\:col-start-1 { grid-column-start: 1; }
}

/* md */
@media (min-width: 768px) {
  .md\:col-start-1 { grid-column-start: 1; }
  .md\:col-start-2 { grid-column-start: 2; }
  .md\:col-start-3 { grid-column-start: 3; }
  .md\:col-start-4 { grid-column-start: 4; }
  .md\:col-start-5 { grid-column-start: 5; }
  .md\:col-start-6 { grid-column-start: 6; }
}

/* lg */

/* xl */

/* 2xl */





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



@media (min-width: 768px) {
  .md\:flex {display: flex;}
  .md\:flex-row {flex-direction: row;}
  .md\:flex-row-reverse {flex-direction: row-reverse;}
  .md\:justify-center {justify-content: center;}
}


/* GAP-X classes */
.gap-x-4 { column-gap: calc(var(--spacing) * 4); }

/* GAP-Y classes */

/* Responsive GAP-X */

/* Аналогично для GAP-Y */

@media (min-width: 768px) {
  .md\:gap-y-12 { row-gap: calc(var(--spacing) * 12); }
}


/* place-content */
.place-content-start      { place-content: start; }

/* place-items */

/* justify-content */

/* align-content */

/* align-items */

/* justify-items */

@media (min-width: 768px) {
  .md\:place-content-start { place-content: start; }
}

@media (min-width: 768px) {
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:order-3 { order: 3; }
}
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1.0rem; }
.mt-8 { margin-top: 2.0rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.px-0 { padding-left: 0rem; padding-right: 0rem; }
.pb-4 { padding-bottom: 1.0rem; }

@media (min-width: 768px) {
  .md\:mt-0 { margin-top: 0rem; }
  .md\:mt-10 { margin-top: 2.5rem; }
  .md\:mb-6 { margin-bottom: 1.5rem; }
  .md\:ml-10 { margin-left: 2.5rem; }
  .md\:px-0 { padding-left: 0rem; padding-right: 0rem; }
  .md\:pr-6 { padding-right: 1.5rem; }
}

/* End */


/* Start:/bitrix/components/bitrix/system.pagenavigation/templates/modern/style.min.css?1666700930675*/
div.modern-page-navigation{padding:.5em 0}div.modern-page-navigation a,span.modern-page-current,span.modern-page-dots{border-left-width:1px;border-left-style:solid;padding-left:.75em;padding-right:.5em;text-decoration:none}div.modern-page-navigation a.modern-page-previous{border-right-width:1px;border-right-style:solid;border-left:0}div.modern-page-navigation a.modern-page-first,div.modern-page-navigation span.modern-page-first{border-left:0;padding-left:.5em}span.modern-page-current{font-weight:var(--ui-font-weight-bold)}div.modern-page-navigation a,span.modern-page-current,div.modern-page-navigation a.modern-page-previous,span.modern-page-dots{border-color:#cdcdcd}
/* End */


/* Start:/local/components/librederm/ingredients.list/templates/seracin_lp/style.css?17527515172612*/
  .lp_sera_ing-tabs-wrapper {
    display: grid;
    grid-auto-flow: column;
    gap: 25px;
    overflow-x: auto;
    margin: 40px 0;	
  }

@media (max-width: 767px) {
  .lp_sera_ing-tabs-wrapper {
    display: grid;
    grid-auto-flow: column;
    gap: 25px;
    overflow-x: auto;
    margin: 20px 0;
    padding: 10px 0;	
  }
}

  .lp_sera_ing-tab-button {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
  }

  .lp_sera_ing-tab-button.is-active {
    color: #006853;
    font-weight: 700;
  }

  .lp_sera_ing-slider-wrapper {
    position: relative;
  }

.lp_sera_ing-slider-wrapper .swiper-wrapper {
    height: auto;
}


  .lp_sera_ing-button-prev,
  .lp_sera_ing-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
  }

  .lp_sera_ing-button-prev {
    left: -25;
  }


.lp_sera_ing-slider-wrapper svg {
	    fill: #333;
	    transition: fill 0.3s ease;
}

.lp_sera_ing-slider-wrapper .lp_sera_ing-button-prev svg {
	    transform: rotate(180deg);
}
	

  .lp_sera_ing-button-next {
    right: -25;
  }



.swiper lp_sera_ing-swiper .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #333;
      height: calc((100% - 30px) / 2) !important;

}


@media (max-width: 767px) {
  .lp_sera_ing-button-prev {
    display: none;
  }

  .lp_sera_ing-button-next {
    display: none;
  }


}


  .lp_sera_ing-slide article {
    display: grid;
    grid-template-columns: 1fr;
    gap: 47px;
    padding: 0 24px 0 0;
    align-items: center;
  }

  @media (min-width: 768px) {
    .lp_sera_ing-slide article {
      grid-template-columns: 1fr 1fr;
    }
  }

@media (max-width: 767px) {
    .lp_sera_ing-slide article {
      padding: 0;
      gap: 20px;
    }
}



@media (max-width: 767px) {
    .lp_sera_ing-slide article .lp_sera_ing_content {
          margin: 0 20px 0 0;
    }
}



  .lp_sera_ing-title {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 10px;
  }


  .lp_sera_ing-text {
    font-size: 14px;
    line-height: 1.4;
    color: #444;
  }


@media (max-width: 767px) {
  .lp_sera_ing-title {
    font-weight: 500;
    font-size: 21px;
    margin-bottom: 10px;
  }


  .lp_sera_ing-text {
    font-size: 14px;
    line-height: 1.4;
    color: #444;
  }
}

  .lp_sera_ing-image {
    width: 100%;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
  }
/* End */
/* /lp/seracin/css/output.css?17524873139236 */
/* /bitrix/components/bitrix/system.pagenavigation/templates/modern/style.min.css?1666700930675 */
/* /local/components/librederm/ingredients.list/templates/seracin_lp/style.css?17527515172612 */