@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/files/descriptions/font/13/13365759/storage_app_opisy2_philips_2144851a_fonts/poppins_black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

#sg_product_card {
    width: 100%;
    max-width: 1000px;
    background: #f9f8f6;
    color: #62524e;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-kerning: none;
    font-size: 15px;
    line-height: 22px;
}

#sg_product_card * {
    box-sizing: border-box;
}

#sg_product_card p {
    margin: 0;
}

#sg_product_card video,
#sg_product_card img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

#sg_product_card video {
    width: 100%;
}

#sg_product_card sup {
    font-size: 0.6em;
}

#sg_product_card .sg_hero_logo {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 180px;
    z-index: 10;
}

@media (max-width: 767px) {
    #sg_product_card .sg_hero_logo {
        top: 34px;
        left: 24px;
        width: 140px;
    }
}

#sg_product_card .sg_card_content {
    display: flex;
    flex-direction: column;
}

#sg_product_card .sg_brand_logo {
    background-color: #ffffff;
    padding-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

#sg_product_card .sg_strong {
    font-family: 'Playfair Display', serif;
    font-weight: 650;
    font-size: 37px;
}

#sg_product_card .sg_medium {
    font-weight: 500;
}

#sg_product_card .sg_semibold {
    font-weight: 600;
}

#sg_product_card .sg_title {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    position: relative;
    z-index: 1;
}

#sg_product_card .sg_center {
    text-align: center;
}

#sg_product_card .sg_right {
    text-align: right;
}

#sg_product_card .sg_only_mobile {
    display: none;
}

@media (max-width: 767px) {
    #sg_product_card .sg_only_mobile {
        display: inline;
    }
}

#sg_product_card .sg_inline_icon {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-inline: auto;
    padding: 30px 0 0;
}

#sg_product_card .sg_inline_icon_title {
    color: #62524e;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
}

#sg_product_card .sg_headline {
    position: relative;
    text-align: center;
    padding: 30px 0;
}

#sg_product_card .sg_headline_title {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0px);
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    background: #f9f8f6;
    padding: 12px 18px;
}

#sg_product_card .sg_headline_title span {
    color: #62524e;
}

#sg_product_card .sg_video_with_desc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 12px;
    line-height: 18px;
}

#sg_product_card .sg_video_with_desc img,
#sg_product_card .sg_video_with_desc video {
    border-radius: 32px;
}

#sg_product_card .sg_chess_header {
    display: flex;
    align-items: center;
    gap: 10px;
}

#sg_product_card .sg_chess_header img {
    flex-shrink: 0;
}

#sg_product_card .sg_chess_header_title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#sg_product_card .sg_chess_title {
    color: #62524e;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

#sg_product_card .sg_chess_att,
#sg_product_card .sg_inline_icon_att {
    font-weight: bold;
}

#sg_product_card .sg_inline_icon_att {
    text-align: center;
}

#sg_product_card .sg_chess {
    gap: 36px;
    display: flex;
    flex-direction: column;
}

#sg_product_card .sg_chess_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    grid-template-areas: "image text";
}

#sg_product_card .sg_chess--reversed .sg_chess_item {
    grid-template-areas: "text image";
}

#sg_product_card .sg_chess_image {
    grid-area: image;
}

#sg_product_card .sg_chess_image video {
    border-radius: 32px;
    max-width: 100%;
    height: auto;
}

#sg_product_card .sg_chess_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-area: text;
}

#sg_product_card .sg_chess_text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#sg_product_card .sg_chess_image img {
    width: 100%;
    border-radius: 20px;
    font-size: 0;
    line-height: 0;
}

/* Siatka ikon nasadek (sekcja "4 inteligentne nasadki") — 1:1 z oryginalnego
   .phi_s5 .items: 4 kolumny, gap 8px, wyrównanie do dołu, ikony w naturalnych
   proporcjach (bez wymuszania kwadratu, żeby się nie odkształcały). */
#sg_product_card .sg_other_features_grid {
    margin-top: 40px;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: end;
}

#sg_product_card .sg_other_features_grid_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

#sg_product_card .sg_other_features_grid_item img {
    width: 100%;
    height: auto;
}

#sg_product_card .sg_other_features_grid_item_title {
    color: inherit;
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    line-height: 20px;
}

/* Rząd ikon (sekcja "Sprawdź, czy Lumea jest dla Ciebie") — 1:1 z .phi_s8
   .items: flex w rzędzie, gap 40px, ikony w naturalnych proporcjach. */
#sg_product_card .sg_icon_row {
    margin-top: 40px;
    display: flex;
    gap: 40px;
}

#sg_product_card .sg_icon_row_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#sg_product_card .sg_icon_row_item img {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    #sg_product_card .sg_other_features_grid {
        width: 100%;
        align-items: baseline;
    }

    #sg_product_card .sg_icon_row {
        flex-direction: column;
        gap: 16px;
    }

    #sg_product_card .sg_chess {
        gap: 32px;
    }
}

@media (max-width: 649px) {
    #sg_product_card .sg_chess_item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text";
        gap: 20px;
    }

    #sg_product_card .sg_chess--reversed .sg_chess_item {
        grid-template-areas:
            "image"
            "text";
    }

    #sg_product_card .sg_chess_image img {
        border-radius: 24px;
    }
}

@media (max-width: 450px) {
    #sg_product_card .sg_headline_title {
        font-size: 28px;
    }

    #sg_product_card .sg_headline {
        padding-bottom: 40px;
    }
}

/* ==================================================================================
   ROZSZERZENIA SZABLONU — komponenty specyficzne dla karty Lumea (konwencja sg_)
   Karta Lumea opiera się w większości na pełnoekranowych zdjęciach z tekstem
   nałożonym na fotografię. Szablon dostarcza tylko jeden taki blok — .sg_hero,
   używany wyłącznie w banerze. Poniżej uogólniona, wielokrotnego użytku wersja
   tego samego mechanizmu (ten sam sposób budowy co .sg_hero: obraz w naturalnym
   przepływie + tekst position:absolute + gradient ::after), żeby nie powielać
   customowego rozwiązania z position:absolute na całej sekcji + object-fit:cover.
   ================================================================================== */

/* Mechanizm 1:1 z oryginału: zdjęcie/wideo jest position:absolute (tłem),
   a treść zostaje w normalnym przepływie (position:relative) — to ONA
   wyznacza wysokość sekcji, chyba że sekcja dostanie własną, ręcznie
   dobraną wysokość (tak jak oryginalne .phi_s1..phi_s9 miały swoje
   pojedyncze wartości px). Dzięki temu tekst nigdy nie "wypływa" poza
   sekcję — a jeśli sekcja ma sztywną wysokość, nadmiar jest przycinany
   przez overflow:hidden, dokładnie jak w oryginale. */
#sg_product_card .sg_feature_banner {
    position: relative;
    overflow: hidden;
    background-color: #f9f8f6;
}

#sg_product_card .sg_feature_banner > picture,
#sg_product_card .sg_feature_banner > video,
#sg_product_card .sg_feature_banner > img:not(.sg_feature_banner_extra):not(.sg_hero_logo) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

#sg_product_card .sg_feature_banner > picture img,
#sg_product_card .sg_feature_banner > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#sg_product_card .sg_feature_banner > img:not(.sg_feature_banner_extra):not(.sg_hero_logo) {
    object-fit: cover;
    object-position: center;
}

#sg_product_card .sg_feature_banner--dark {
    color: #ffffff;
}

#sg_product_card .sg_feature_banner--light {
    color: #62524e;
}

#sg_product_card .sg_feature_banner--gradient-top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Na mobile oryginał "rozkłada" niektóre sekcje: zdjęcie i tekst przestają
   się nakładać i stają się dwoma zwykłymi blokami w kolumnie (tekst nad
   zdjęciem). Dotyczy to sekcji "Ponad 80%" i "Zobacz, jak działa IPL". */
@media (max-width: 767px) {
    #sg_product_card .sg_feature_banner--dark {
        color: #62524e;
    }

    #sg_product_card .sg_feature_banner--stack-mobile {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    #sg_product_card .sg_feature_banner--stack-mobile > picture,
    #sg_product_card .sg_feature_banner--stack-mobile > video,
    #sg_product_card .sg_feature_banner--stack-mobile > img:not(.sg_feature_banner_extra):not(.sg_hero_logo) {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        height: auto;
    }

    #sg_product_card .sg_feature_banner--stack-mobile > picture img {
        height: auto;
        object-fit: cover;
    }

    #sg_product_card .sg_feature_banner--stack-mobile .sg_feature_banner_content {
        order: 1;
        position: relative;
        height: auto;
    }

    #sg_product_card .sg_feature_banner--stack-mobile.sg_feature_banner--gradient-top::after {
        content: none;
    }
}

/* Sekcja "Dlaczego Lumea?" ma na mobile inny, osobny wariant: zdjęcie też
   przestaje być tłem (position:relative, normalny blok na górze), ale nad
   nim pływa DRUGI, mobilny-tylko tytuł (position:absolute, top:50px) —
   dokładnie jak oryginalny .phi_s2 .text.only-mobile. Treść z listą ikon
   idzie pod zdjęciem, podciągnięta ujemnym marginesem. */
#sg_product_card .sg_mobile_only_title {
    display: none;
}

#sg_product_card .sg_desktop_only_title {
    display: block;
}

@media (max-width: 767px) {
    #sg_product_card .sg_mobile_only_title {
        display: block;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 0 20px;
        text-align: center;
    }

    #sg_product_card .sg_desktop_only_title {
        display: none;
    }

    #sg_product_card .sg_feature_banner--stack-mobile-s2 {
        height: auto;
    }

    #sg_product_card .sg_feature_banner--stack-mobile-s2 > picture,
    #sg_product_card .sg_feature_banner--stack-mobile-s2 > picture img {
        position: relative;
        inset: auto;
        height: auto;
    }

    #sg_product_card .sg_feature_banner--stack-mobile-s2 .sg_feature_banner_content {
        position: relative;
        height: auto;
        padding-top: 0;
        margin-top: -20px;
    }
}

/* Sekcja "Twój osobisty ekspert" jest jedyną, która na mobile zostaje biała
   na zdjęciu (nie jest "rozkładana") — wyjątek od reguły wyżej. */
#sg_product_card .sg_feature_banner--dark-mobile-white {
    color: #ffffff;
}

@media (max-width: 767px) {
    #sg_product_card .sg_feature_banner--dark-mobile-white {
        color: #ffffff;
    }
}

/* Wysokości sekcji — wartości 1:1 z oryginału (.phi_s1..phi_s7).
   Sekcje bez klasy sg_h* są auto-wysokości (jak oryginalne .phi_s8/.phi_s9). */
@media (min-width: 768px) {
    #sg_product_card .sg_h540 { height: 540px; }
    #sg_product_card .sg_h760 { height: 760px; }
    #sg_product_card .sg_h440 { height: 440px; }
    #sg_product_card .sg_h640 { height: 640px; }
    #sg_product_card .sg_h680 { height: 680px; }
    #sg_product_card .sg_h560_desktop { height: 560px; }
}

#sg_product_card .sg_h560 {
    height: 560px;
}

@media (max-width: 767px) {
    #sg_product_card .sg_h430_mobile { height: 430px; }
    #sg_product_card .sg_h620_mobile { height: 620px; }
}

#sg_product_card .sg_feature_banner_content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

/* Modyfikatory pozycji — odpowiadają dokładnie override'om z oryginalnego
   .phi_sN .text (justify-content/align-items/margin per sekcja). */
#sg_product_card .sg_justify_start {
    justify-content: flex-start;
}

#sg_product_card .sg_justify_end {
    justify-content: flex-end;
}

#sg_product_card .sg_align_end {
    align-items: flex-end;
}

#sg_product_card .sg_items_center {
    align-items: center;
    text-align: center;
}

/* text-center / text-right — czyste wyrównanie tekstu, niezależne od
   align-items (odpowiednik oryginalnych klas .text-center / .text-right
   nałożonych na HTML obok reguł per-sekcja). */
#sg_product_card .sg_text_center {
    text-align: center;
}

#sg_product_card .sg_text_right {
    text-align: right;
}

@media (max-width: 767px) {
    #sg_product_card .sg_text_center_mobile {
        text-align: center;
    }
}

/* height:auto — dla sekcji, w których oryginał ustawia .text{height:unset}:
   blok tekstu NIE wypełnia całej wysokości sekcji, więc justify-content nie
   ma efektu i tekst zostaje przy górnej krawędzi (naturalny start flow). */
#sg_product_card .sg_h_auto {
    height: auto;
}

#sg_product_card .sg_padding_0 {
    padding: 0;
}

/* 1:1 z oryginalnej .bg-beige-gradient-mobile — tylko na mobile, tylko tam
   gdzie oryginał jej użył (treść sekcji "Dlaczego Lumea?", bo na mobile
   zjeżdża pod zdjęcie i przestaje na nim leżeć, więc potrzebuje własnego tła). */
@media (max-width: 767px) {
    #sg_product_card .sg_bg_beige_gradient_mobile {
        background: linear-gradient(0deg, #ebe7e3, #f4f1ee);
    }
}

#sg_product_card .sg_mx_auto {
    margin-left: auto;
    margin-right: auto;
}

#sg_product_card .sg_ml_auto {
    margin-left: auto;
}

#sg_product_card .sg_px80 {
    padding-left: 80px;
    padding-right: 80px;
}

#sg_product_card .sg_pt80 {
    padding-top: 80px;
}

#sg_product_card .sg_list_position_inside {
    list-style-position: inside;
    direction: rtl;
}

/* Szerokości bloku tekstowego — wartości 1:1 z oryginału (każda sekcja
   miała inną, ręcznie dobraną szerokość: 50/55/65/70/80%). */
#sg_product_card .sg_w50 { width: 50%; }
#sg_product_card .sg_w55 { width: 55%; }
#sg_product_card .sg_w65 { width: 65%; }
#sg_product_card .sg_w70 { width: 70%; }
#sg_product_card .sg_w80 { width: 80%; }

@media (max-width: 767px) {
    #sg_product_card .sg_w50,
    #sg_product_card .sg_w55,
    #sg_product_card .sg_w65,
    #sg_product_card .sg_w70,
    #sg_product_card .sg_w80 {
        width: 100%;
    }

    #sg_product_card .sg_mx_auto,
    #sg_product_card .sg_ml_auto {
        margin-left: 0;
    }

    #sg_product_card .sg_px80 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #sg_product_card .sg_list_position_inside {
        direction: ltr;
    }

    #sg_product_card .sg_align_center_mobile {
        align-items: center;
    }

}

#sg_product_card .sg_feature_title {
    text-transform: uppercase;
    font-weight: 200;
    font-size: 60px;
    line-height: 1;
}

#sg_product_card .sg_feature_text {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.2;
}

#sg_product_card .sg_hero_headline {
    font-weight: 200;
    font-size: 84px;
    line-height: 1;
}

#sg_product_card .sg_subtitle {
    font-weight: 300;
    font-size: 24px;
    line-height: 1.2;
}

#sg_product_card .sg_display {
    font-weight: 200;
    font-size: 84px;
    line-height: 1;
    text-transform: uppercase;
}

#sg_product_card .sg_footnote {
    font-size: 12px;
    line-height: 1.4;
}

/* 1:1 z oryginału: .phi_s12/.phi_s13 nie mają gradientu — mają prawdziwe,
   wyblakłe zdjęcie w tle (opacity 0.4), a treść stoi nad nim (z-index). */
#sg_product_card .sg_footnotes,
#sg_product_card .sg_safety {
    position: relative;
    overflow: hidden;
    background-color: #f9f8f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sg_product_card .sg_footnotes > img,
#sg_product_card .sg_safety > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

#sg_product_card .sg_footnotes_inner,
#sg_product_card .sg_safety_inner {
    position: relative;
    z-index: 2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sg_product_card .sg_safety_inner {
    text-align: center;
    align-items: center;
    padding: 180px 80px;
}

@media (max-width: 767px) {
    #sg_product_card .sg_footnotes_inner {
        padding: 40px 20px;
    }

    #sg_product_card .sg_safety_inner {
        padding: 120px 40px;
    }
}

#sg_product_card .sg_feature_banner_extra {
    position: relative;
    z-index: 3;
    display: block;
    max-width: 100%;
    padding: 0 40px 40px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    #sg_product_card .sg_feature_banner_extra {
        padding: 0 20px 20px;
    }
}

#sg_product_card .sg_icon_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

#sg_product_card .sg_icon_list_item {
    display: flex;
    align-items: center;
    gap: 16px;
}

#sg_product_card .sg_icon_list_item img {
    width: 72px;
    height: auto;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    #sg_product_card .sg_hero_headline {
        font-size: 63px;
    }

    #sg_product_card .sg_feature_banner_content {
        padding: 40px 20px;
    }

    #sg_product_card .sg_feature_title {
        font-size: 45px;
    }

    #sg_product_card .sg_display {
        font-size: 45px;
    }

    #sg_product_card .sg_subtitle {
        font-size: 16px;
    }
}