/* Badi.by identity and commerce-ready refinements. */

#header.classic div.menu-wrapper .grid-container {
    padding-top: 28px;
}

#header.classic .logo {
    margin: 0 auto;
}

#header .logo.text-logo .badi-site-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(920px, calc(100vw - 120px));
    line-height: 1.1;
}

#header .logo.text-logo .badi-site-identity {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

#header .logo.text-logo .badi-brand-name,
#header .logo.text-logo .badi-brand-description {
    display: block;
}

#header .logo.text-logo .badi-brand-name {
    flex: 0 0 auto;
    color: var(--epcl-black-color);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1.2px;
}

#header .logo.text-logo .badi-brand-name::first-letter {
    color: var(--epcl-main-color);
}

#header .logo.text-logo .badi-brand-description {
    max-width: 560px;
    color: var(--epcl-black-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
}

#header .logo.text-logo .badi-brand-description::first-letter {
    color: inherit;
}

#header.classic nav {
    margin: 22px 0 18px;
}

#header.classic .epcl-social-buttons {
    top: 42px;
}

#header .epcl-search-button {
    top: 42px;
}

/* Replace arbitrary title initials with one calm, recognisable health icon. */
.epcl-dropcap.text-only > span,
#single .post-style-text > .epcl-dropcap > span {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    transform: none !important;
    color: transparent !important;
    font-size: 0 !important;
}

.epcl-dropcap.text-only > span::after,
#single .post-style-text > .epcl-dropcap > span::after {
    content: "";
    position: absolute;
    inset: 24%;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.8 3.2C13 3.4 7.1 6 5.2 10.3c-1 2.2-.7 4.5.6 6.2L3 19.3l1.7 1.7 2.8-2.8c1.7 1.1 3.9 1.2 5.9.3 4.2-1.9 6.7-7.8 6.9-14.6 0-.4-.2-.7-.5-.7ZM8.2 16c1.7-3 4.3-5.5 7.6-7.2-2.3 2.2-4.4 4.8-6 7.7-.6 0-1.1-.2-1.6-.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.8 3.2C13 3.4 7.1 6 5.2 10.3c-1 2.2-.7 4.5.6 6.2L3 19.3l1.7 1.7 2.8-2.8c1.7 1.1 3.9 1.2 5.9.3 4.2-1.9 6.7-7.8 6.9-14.6 0-.4-.2-.7-.5-.7ZM8.2 16c1.7-3 4.3-5.5 7.6-7.2-2.3 2.2-4.4 4.8-6 7.7-.6 0-1.1-.2-1.6-.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* WooCommerce follows the theme's existing typography and colour system. */
.woocommerce .woocommerce-breadcrumb {
    color: var(--epcl-text-color);
    font-size: 13px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce div.product {
    border-radius: 14px;
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: 8px;
    background: var(--epcl-main-color);
    color: #fff;
    font-weight: 700;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--epcl-black-color);
    color: #fff;
}

.main-nav .badi-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--epcl-main-color);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

@media screen and (max-width: 767px) {
    #header.classic div.menu-wrapper .grid-container {
        padding-top: 18px;
    }

    #header .logo.text-logo .badi-site-title {
        max-width: calc(100vw - 95px);
    }

    #header .logo.text-logo .badi-site-identity {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        text-align: left;
    }

    #header .logo.text-logo .badi-brand-name {
        font-size: 27px;
        letter-spacing: -.7px;
    }

    #header .logo.text-logo .badi-brand-description {
        max-width: 420px;
        font-size: 11px;
        line-height: 1.3;
    }
}