/* ==================================================
   YUME – FONTY
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:wght@400;500;600;700&display=swap');


/* ==================================================
   YUME – ZÁKLADNÍ STYLY
   ================================================== */

:root {
    --yume-green: #1E3D16;
    --yume-pink: #F8A7D8;
    --yume-hot-pink: #F42AA2;
    --yume-white: #F5F5F5;
    --yume-cream: #FFFEE9;
    --yume-text: #1E3D16;
    --yume-light-gray: #F7F7F7;

    /* Layout */
    --yume-container: 1320px;
    --yume-section-padding: 100px;
    --yume-radius: 12px;

    --yume-header-height: 340px;
    --yume-header-height-mobile: 220px;

    /* Fonty */
    --yume-font:
        "Inter",
        Arial,
        sans-serif;

    --yume-heading-font:
        "Lora",
        Georgia,
        serif;

    /* ==================================================
       GLOBÁLNÍ TYPOGRAFIE HOMEPAGE
       ================================================== */

    --yume-h1-size: 42px;
    --yume-h2-size: 36px;
    --yume-h3-size: 28px;

    --yume-body-size: 17px;

    --yume-h1-line: 1.10;
    --yume-h2-line: 1.10;
    --yume-h3-line: 1.15;

    --yume-body-line: 1.70;
}


/* ==================================================
   HTML + BODY
   ================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;

    background: var(--yume-white);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;

    color: var(--yume-text);
    background: var(--yume-white);

    font-family: var(--yume-font);

    font-size: 16px;
    line-height: 1.6;

    overflow-x: hidden;
}


/* ==================================================
   INTER – CELÝ WEB
   ================================================== */

body,
p,
span,
a,
li,
label,
button,
input,
textarea,
select,
option,
table,
th,
td,
.yume-topbar,
.yume-topbar *,
.yume-header,
.yume-header *,
.yume-hero,
.yume-ingredients,
.yume-ritual,
.yume-made,
.yume-product,
.yume-why,
.yume-about,
.yume-review,
.yume-contact,
.yume-social,
.yume-footer {
    font-family: var(--yume-font) !important;
}


/* ==================================================
   LORA – VELKÉ NADPISY
   ================================================== */

h1,
h2,
h3,
.yume-hero h1,
.yume-hero h2,
.yume-ingredients h1,
.yume-ingredients h2,
.yume-ritual h1,
.yume-ritual h2,
.yume-made h1,
.yume-made h2,
.yume-product h1,
.yume-product h2,
.yume-why h1,
.yume-why h2,
.yume-about h1,
.yume-about h2,
.yume-review h1,
.yume-review h2,
.yume-contact h1,
.yume-contact h2,
.yume-social h1,
.yume-social h2,
.yume-footer h1,
.yume-footer h2 {
    font-family: var(--yume-heading-font) !important;

    color: var(--yume-text);

    text-transform: none !important;

    letter-spacing: -0.025em;
}


/* ==================================================
   H1 + HLAVNÍ NADPISY HOMEPAGE SEKCÍ
   ================================================== */

h1,
.yume-hero h1,
.yume-hero__title,
.yume-ingredients__title,
.yume-ritual__title,
.yume-made__title,
.yume-product__title,
.yume-why__title,
.yume-about__title,
.yume-review__title,
.yume-contact__title,
.yume-social__title {
    font-family: var(--yume-heading-font) !important;

    font-size: var(--yume-h1-size);
    line-height: var(--yume-h1-line);
    font-weight: 600;

    letter-spacing: -0.025em;

    margin-top: 0;
    margin-bottom: 24px;

    text-transform: none !important;
}


/* ==================================================
   H2 – OSTATNÍ NADPISY DRUHÉ ÚROVNĚ
   ================================================== */

h2,
.yume-made__subtitle {
    font-family: var(--yume-heading-font) !important;

    font-size: var(--yume-h2-size);
    line-height: var(--yume-h2-line);
    font-weight: 600;

    letter-spacing: -0.025em;

    margin-top: 0;
    margin-bottom: 22px;

    text-transform: none !important;
}


/* ==================================================
   H3 – MENŠÍ NADPISY
   ================================================== */

h3 {
    font-family: var(--yume-heading-font) !important;

    font-size: var(--yume-h3-size);
    line-height: var(--yume-h3-line);
    font-weight: 600;

    letter-spacing: -0.025em;

    margin-top: 0;
    margin-bottom: 16px;

    text-transform: none !important;
}


/* ==================================================
   BĚŽNÝ TEXT
   ================================================== */

p {
    font-size: var(--yume-body-size);
    line-height: var(--yume-body-line);
}

.yume-hero p,
.yume-ingredients p,
.yume-ritual p,
.yume-made p,
.yume-product p,
.yume-why p,
.yume-about p,
.yume-review p,
.yume-contact p {
    font-size: var(--yume-body-size);
    line-height: var(--yume-body-line);
}


/* ==================================================
   OBRÁZKY
   ================================================== */

img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* ==================================================
   ODKAZY
   ================================================== */

a {
    color: inherit;

    text-decoration: none;
}


/* ==================================================
   FORMULÁŘE
   ================================================== */

button,
input,
textarea,
select {
    font: inherit;
}


/* ==================================================
   SEKCE
   ================================================== */

.yume-section {
    width: 100%;
}

.yume-container {
    width: min(
        calc(100% - 64px),
        var(--yume-container)
    );

    margin-inline: auto;
}


/* ==================================================
   GLOBÁLNÍ TLAČÍTKA
   ================================================== */

.yume-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 14px 36px;

    border: 2px solid var(--yume-hot-pink);
    border-radius: 999px;

    background: var(--yume-hot-pink);
    color: #FFFFFF;

    font-family: var(--yume-font) !important;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.yume-button:hover {
    background: var(--yume-green);
    border-color: var(--yume-green);
    color: #FFFFFF;

    transform: translateY(-2px);
}


/* ==================================================
   FOCUS
   ================================================== */

.yume-button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--yume-pink);
    outline-offset: 3px;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 991px) {

    :root {
        --yume-h1-size: 39px;
        --yume-h2-size: 34px;
        --yume-h3-size: 27px;

        --yume-body-size: 16px;
    }
}


/* ==================================================
   MOBIL
   ================================================== */

@media (max-width: 767px) {

    :root {
        --yume-section-padding: 60px;

        --yume-h1-size: 34px;
        --yume-h2-size: 30px;
        --yume-h3-size: 24px;

        --yume-body-size: 16px;

        --yume-h1-line: 1.10;
        --yume-h2-line: 1.10;
        --yume-h3-line: 1.15;

        --yume-body-line: 1.65;
    }

    body {
        font-size: 15px;
    }

    .yume-container {
        width: min(
            calc(100% - 28px),
            var(--yume-container)
        );
    }
}


/* ==================================================
   YUME – STATICKÉ / PRÁVNÍ STRÁNKY
   ================================================== */


/* Schová automatický Shoptet nadpis stránky */

body[class*="in-"] .content-wrapper-in > main > h1,
body[class*="in-"] main.content h1:first-child,
body[class*="in-"] .content h1:first-child {
    display: none !important;
}


/* ==================================================
   TEXT NA OBSAHOVÝCH / PRÁVNÍCH STRÁNKÁCH
   ================================================== */

body[class*="in-"] main.content,
body[class*="in-"] main.content p,
body[class*="in-"] main.content li,
body[class*="in-"] main.content span,
body[class*="in-"] main.content strong {
    color: #111111 !important;

    font-family: var(--yume-font) !important;
}


/* Nadpisy na obsahových stránkách */

body[class*="in-"] main.content h1,
body[class*="in-"] main.content h2,
body[class*="in-"] main.content h3 {
    color: #111111 !important;

    font-family: var(--yume-heading-font) !important;

    text-transform: none !important;
}


/* Menší nadpisy na právních stránkách */

body[class*="in-"] main.content h4,
body[class*="in-"] main.content h5,
body[class*="in-"] main.content h6 {
    color: #111111 !important;

    font-family: var(--yume-font) !important;

    text-transform: none !important;
}


/* ==================================================
   ODKAZY NA OBSAHOVÝCH STRÁNKÁCH
   ================================================== */

body[class*="in-"] main.content a {
    color: var(--yume-green) !important;

    text-decoration: underline;
    text-underline-offset: 3px;
}

body[class*="in-"] main.content a:hover {
    color: var(--yume-hot-pink) !important;
}


/* ==================================================
   ODSAZENÍ OBSAHOVÝCH STRÁNEK
   ================================================== */

body[class*="in-"] .content-inner {
    padding-top: 45px !important;
}


/* První element nepřidává další mezeru */

body[class*="in-"] .content-inner > p:first-child,
body[class*="in-"] .content-inner > h1:first-child,
body[class*="in-"] .content-inner > h2:first-child,
body[class*="in-"] .content-inner > h3:first-child {
    margin-top: 0 !important;
}


/* ==================================================
   YUME – JEDNOTNÁ ŠÍŘKA VŠECH SEKCÍ
   ================================================== */

.yume-header__inner,
.yume-hero__inner,
.yume-ingredients__inner,
.yume-ritual__inner,
.yume-made__inner,
.yume-why__inner,
.yume-product__inner,
.yume-about__inner,
.yume-review__inner,
.yume-contact__inner,
.yume-social__inner,
.yume-footer__inner {
    width: min(
        calc(100% - 64px),
        var(--yume-container)
    ) !important;

    max-width: var(--yume-container) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==================================================
   MOBIL – ŠÍŘKA SEKCÍ
   ================================================== */

@media (max-width: 767px) {

    .yume-header__inner,
    .yume-hero__inner,
    .yume-ingredients__inner,
    .yume-ritual__inner,
    .yume-made__inner,
    .yume-why__inner,
    .yume-product__inner,
    .yume-about__inner,
    .yume-review__inner,
    .yume-contact__inner,
    .yume-social__inner,
    .yume-footer__inner {
        width: min(
            calc(100% - 28px),
            var(--yume-container)
        ) !important;
    }
}


/* ==================================================
   YUME – GLOBÁLNÍ POZADÍ
   ================================================== */

html,
body,
#content,
.content-wrapper,
.content-wrapper-in,
.content-inner,
main.content {
    background-color: var(--yume-white) !important;
}
/* ==================================================
   SCHOVÁNÍ DROBEČKOVÉ NAVIGACE NA OBSAHOVÝCH STRÁNKÁCH
   ================================================== */

body[class*="in-"] .breadcrumbs,
body[class*="in-"] .breadcrumb,
body[class*="in-"] .navigation-breadcrumb,
body[class*="in-"] #navigation-breadcrumb {
    display: none !important;
}
/* ==================================================
   YUME – COOKIE LIŠTA
   ČISTÁ BÍLÁ VERZE
   ================================================== */


/* ==================================================
   HLAVNÍ COOKIE WRAPPER
   ================================================== */

.siteCookies {
    width: 100% !important;
    max-width: none !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    color: #111111 !important;

    border: 0 !important;
    border-top: 1px solid #EEEEEE !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ==================================================
   VNITŘNÍ WRAPPER
   ================================================== */

.siteCookies__form {
    width: min(calc(100% - 40px), var(--yume-container)) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 18px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ==================================================
   ODSTRANĚNÍ SHOPTET POZADÍ
   ================================================== */

.siteCookies *,
.siteCookies *::before,
.siteCookies *::after {
    box-shadow: none !important;
}

.siteCookies > div,
.siteCookies form {
    background-color: #FFFFFF !important;

    border-radius: 0 !important;
}


/* ==================================================
   TEXT
   ================================================== */

.siteCookies__text {
    flex: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #FFFFFF !important;

    color: #111111 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.siteCookies__text p,
.siteCookies__text span {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: #111111 !important;

    font-size: inherit !important;
    line-height: inherit !important;
}


/* ==================================================
   ODKAZ
   ================================================== */

.siteCookies__text a {
    color: #EE1E9E !important;

    font-weight: 700 !important;

    text-decoration: underline !important;
}

.siteCookies__text a:hover {
    color: #C81782 !important;
}


/* ==================================================
   TLAČÍTKA
   ================================================== */

.siteCookies__buttons {
    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #FFFFFF !important;
}


/* ==================================================
   VŠECHNA TLAČÍTKA
   ================================================== */

.siteCookies button,
.siteCookies .btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    padding: 6px 12px !important;

    background: #FFFFFF !important;

    color: #111111 !important;

    border: 1px solid #111111 !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease !important;
}


/* Hover */

.siteCookies button:hover,
.siteCookies .btn:hover {
    background: #EE1E9E !important;

    border-color: #EE1E9E !important;

    color: #FFFFFF !important;
}


/* ==================================================
   MOBIL
   ================================================== */

@media (max-width: 767px) {

    .siteCookies {
        padding: 11px 14px !important;

        background: #FFFFFF !important;
    }


    .siteCookies__form {
        width: 100% !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 8px !important;

        background: #FFFFFF !important;
    }


    .siteCookies__text {
        width: 100% !important;

        background: #FFFFFF !important;

        font-size: 11px !important;
        line-height: 1.4 !important;
    }


    .siteCookies__buttons {
        width: 100% !important;

        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        gap: 6px !important;

        background: #FFFFFF !important;
    }


    .siteCookies button,
    .siteCookies .btn {
        padding: 6px 11px !important;

        background: #FFFFFF !important;

        font-size: 10px !important;
    }

}


/* ==================================================
   MALÉ MOBILY
   ================================================== */

@media (max-width: 480px) {

    .siteCookies {
        padding: 10px 12px !important;
    }

}