/*
Theme Name: Hello Elementor Child
Description: A child theme for Hello Elementor.
Author: Serhii Nadolskyi
Author URI: https://www.waterproof-web-wizard.de
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

:root {
    --footer-height: 80px;


    --color-active: #E30613;
    --color-inactive: #444444;
    --color-background-light: #ffffff;
    --color-background-gray: rgba(0, 0, 0, 0.05);
    --color-background-dark-gray: #B4B3B3;
    --color-box-shadow: rgba(0, 0, 0, 0.15);

    --wp-admin-menu-height: 32px;

    --border-radius-small: 5px;

    --box-shadow-big: 0 -2px 20px 0 var(--color-box-shadow);
    --box-shadow-small: 0 0 4px 0.5px var(--color-box-shadow);
}


@media (max-width: 782px) {
    :root {
        --wp-admin-menu-height: 46px;
    }
}




/* ================================= General ================================= */
html,
body {
    min-height: calc(100vh - var(--footer-height));
    margin: 0;
    padding: 0;
}

body * {
    font-family: 'Roboto', 'Open Sans', sans-serif;
}

.site-wrapper {
    min-height: calc(100vh - var(--footer-height));
    display: flex;
    flex-direction: column;
    width: 600px;
    margin: 0 auto;
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

.logged-in .site-wrapper {
    min-height: calc(100vh - var(--footer-height) - var(--wp-admin-menu-height));
}

.site-main {
    flex: 1;
}


#app-content {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    padding-bottom: 140px;
}

body.page-loaded #app-content {
    opacity: 1;
}



/* Page Content */
#content .page-content img {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-small);
}

main#content .page-header h1 {
    display: none;
}

/* Cards */
.cards .elementor-widget-image-box {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-small);
    background-color: var(--color-background-gray);
    padding: 10px;
    transition: all 0.3s ease-in-out;
    min-height: 150px;
}

.cards .elementor-widget-image-box:hover {
    box-shadow: none !important;
    background-color: var(--color-active);
}

.cards .elementor-widget-image-box h5 {
    margin-bottom: 0;
    word-wrap: break-word;
}


.cards .elementor-widget-image-box h5,
.cards .elementor-widget-image-box p {
    transition: all 0.3s ease-in-out;
}

@media (max-width: 480px) {
    .cards .elementor-widget-image-box h5 {
        line-height: 1;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .cards .elementor-widget-image-box p {
        font-size: 12px;
        line-height: 1;
    }
}

.cards .elementor-widget-image-box:hover h5,
.cards .elementor-widget-image-box:hover p {
    color: var(--color-background-light);
}

.cards .elementor-widget-image-box img {
    box-shadow: none !important;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}


.cards .elementor-widget-image-box img[src$="placeholder.png"] {
    display: none !important;
}

.cards .elementor-widget-image-box .elementor-image-box-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 0;
    flex-direction: column;
}


/* ================================= Header ================================= */

header {
    max-width: 100% !important;
    padding: 15px 0 !important;
}

header .header-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

header .header-container .header-left {
    width: 120px;
    min-width: 120px;
}


header .header-container .header-left img {
    width: 120px;
    height: auto;
}

body.home header .header-container .header-center .page-title {
    display: none;
}

header .header-container .header-center {
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}

header .header-container .header-center .page-title {
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

body.page-loaded header .header-container .header-center .page-title {
    opacity: 1;
}


header .header-container .header-right .language-switcher {
    white-space: nowrap;
}

/* ================================= Footer ================================= */

.site-footer {
    position: fixed !important;
    background-color: var(--color-background-light);
    bottom: 0;
    height: var(--footer-height);
    max-height: var(--footer-height);
    width: 100vw;
    max-width: 100% !important;
    box-shadow: var(--box-shadow-big);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.footer-navigation {
    max-width: 100%;
}

.footer-navigation .container {
    width: 600px;
    max-width: 100%
}

/* App Navigation */
.app-navigation {
    margin: 0 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

.app-navigation .menu-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--color-inactive);
    font-size: 14px;
}

.app-navigation .menu-item::before {
    content: none;
}

.app-navigation .menu-item.current-menu-item a {
    color: var(--color-active);
}

.app-navigation .menu-item a i {
    font-size: 30px;
}

@media (max-width: 782px) {
    .app-navigation .menu-item a {
        font-size: 12px;
    }

    .app-navigation .menu-item a i {
        font-size: 20px;
    }

}



/* ============================== WooCommerce ============================== */

.woocommerce-breadcrumb {
    text-align: center;
    margin-bottom: 20px;
    margin-top: -10px;
}


.woocommerce-page div.product div.images {
    float: none;
    width: 100%;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
}

.woocommerce-page div.product div.summary {
    display: flex;
    flex-direction: column;
}

.woocommerce div.product .product_title {
    order: 0;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    order: 1;
}

.woocommerce div.product .price {
    order: 2;
    font-size: 48px !important;
    font-weight: 700;
    margin: 15px 0 25px 0;
}

.woocommerce div.product .product_meta {
    order: 3;
    display: none;
}

.woocommerce div.product .cart {
    order: 4;
}


.woocommerce div.product #enquiry {
    order: 6;
}

.woocommerce div.product #enquiry input {
    background-color: var(--color-active);
    width: 100%;
    display: inline-block;
    max-width: unset;
}

.woocommerce div.product .product_title {
    color: var(--color-active);
}

.woocommerce div.product form.cart .button {
    min-height: 42px;
    width: calc(100% - 63px);
    background-color: var(--color-active);
}

.product .woocommerce-tabs ul.tabs {
    display: none;
}

.product .related.products,
.product .woocommerce-tabs h1,
.product .woocommerce-tabs h2,
.product .woocommerce-tabs h3,
.product .woocommerce-tabs h4,
.product .woocommerce-tabs h5,
.product .woocommerce-tabs h6 {
    color: var(--color-active);
}


.woocommerce-message {
    border-top-color: var(--color-active);
}

.woocommerce-message::before {
    color: var(--color-active);
}

/* Cart */

.woocommerce-cart .wp-block-woocommerce-cart.alignwide {
    margin-inline: 0 !important;
}

.woocommerce-cart .wc-block-cart {
    flex-direction: column;
}


.woocommerce-cart .wc-block-cart__submit-button {
    background-color: var(--color-active);
    color: white;
    text-decoration: none !important;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.woocommerce-cart .wc-block-cart__submit-button:hover {
    opacity: .7;
}

.wc-block-components-button__text {
    color: white;
    text-decoration: none !important;
}

.wc-block-components-button__text:hover {
    text-decoration: none;
    color: white;
    text-decoration: none !important;
}

/* Checkout */
.woocommerce-checkout .page-content h2,
.woocommerce-checkout .page-content h3,
.woocommerce-checkout .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--color-active);
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background-color: var(--color-active);
    color: white;
    text-decoration: none !important;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    opacity: .7;
}

/* Account */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce-account .col2-set .col-2 {
    float: none;
    width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 10px;
}

.woocommerce-account main#content {
    max-width: unset !important;
}


.woocommerce-account .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link {
    background-color: var(--color-background-dark-gray);
    color: var(--color-background-light);
    padding: 5px 10px;
    border-radius: var(--border-radius-small);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active {
    background-color: var(--color-active);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    text-decoration: none;
    color: var(--color-background-light);
}


.woocommerce-account .woocommerce-info {
    border-top-color: var(--color-active);
}



.woocommerce-account .woocommerce-info::before {
    color: var(--color-active);
}


.woocommerce-account .col2-set h2 {
    color: var(--color-active);
}


.woocommerce-account .woocommerce-Button {
    margin-top: 15px !important;
    width: 100% !important;
}

/* Shop */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-products-header__title.page-title,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    display: none;
}

/* 
.woocommerce .woocommerce-products-header__title.page-title {
    color: var(--color-active);
} */


.woocommerce .products li.product,
.product .products li.product {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-small);
    background-color: var(--color-background-gray);
    padding: 10px !important;
    transition: all 0.3s ease-in-out;
}

.woocommerce .products li.product img,
.product .products li.product img {
    border-radius: var(--border-radius-small);
}

.woocommerce .products li.product h2,
.product .products li.product h2 {
    word-break: break-word;
}


.woocommerce .products li.product .price,
.product .products li.product .price {
    font-size: 14px !important;
}

.woocommerce .products li.product .button,
.product .products li.product .button {
    width: 100%;
    text-align: center;
    background-color: var(--color-active);
    color: white;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: calc(50% - 3.8%);
    max-width: 50%;
}


/* Shop */

.text-center {
    text-align: center;
}

.woo-page-title {
    font-size: 2rem;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--color-active);
}

.custom-category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* grid-template-columns: 1fr 1fr; */
    gap: 20px;
}
@media (max-width: 480px) {
    .custom-category-list {
        grid-template-columns: 1fr;
    }
}

.category-item {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-small);
    background-color: var(--color-background-gray);
    padding: 10px;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.category-item:hover {
    box-shadow: none !important;
    background-color: var(--color-active);
}

.category-item h5,
.category-item a {
    color: var(--color-active);
    word-wrap: break-word;
    font-size: 24px;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.category-item:hover h5,
.category-item:hover a h5 {
    color: var(--color-background-light);
}

.category-item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 1em;
    box-shadow: none;
    border-radius: var(--border-radius-small);
}

.woo-page-title--1 {
    margin-bottom: 35px !important;
}

.woo-page-title--2 {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
}


@media (max-width: 480px) {

    .category-item h5,
    .category-item a h5 {
        font-size: 16px;
    }
}

.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.woocommerce ul.products::before {
    display: none !important;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: none !important;
    background-color: var(--color-active) !important;
}


.woocommerce ul.products li.product a {
    color: var(--color-active);
}

.woocommerce ul.products li.product:hover a {
    color: var(--color-background-light);
}

.woocommerce ul.products li.product a,
.woocommerce ul.products li.product .price {
    transition: color 0.3s ease-in-out;
}

.woocommerce ul.products li.product:hover .price {
    color: var(--color-background-light);
}


.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
    display: block !important;
}

.woocommerce .woocommerce-ordering select {
    background-color: var(--color-background-light);
    color: var(--color-active);
    border-radius: var(--border-radius-small);
    padding: 5px 10px;
    border: 1px solid var(--color-background-dark-gray);
}

.woocommerce .product-grid--no-category ul.products li.product-category {
    display: none !important;
}

.woocommerce .product-grid--no-category ul.products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.woocommerce .product-grid--no-category ul.products li.product {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-small);
    background-color: var(--color-background-gray);
    padding: 10px;
    transition: all 0.3s ease-in-out;
    min-height: 150px;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
}

.woocommerce .product-grid--no-category ul.products::before {
    display: none !important;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 1em;
    box-shadow: none;
    border-radius: var(--border-radius-small);
}

.woocommerce .product-grid--no-category ul.products li.product::hover {
    box-shadow: none !important;
    background-color: var(--color-active) !important;
}

.category-description {
    margin-bottom: 35px;
}

.back-to-parent,
.back-to-shop {
    margin-top: 35px;
    margin-bottom: 35px;

}

.back-to-parent a,
.back-to-shop a {
    background-color: transparent!important;
    border: 1px solid var(--color-active)!important;
    border-radius: var(--border-radius-small)!important;
    color: var(--color-active)!important;
    font-weight: 400!important;
    font-size: 14px!important;
}



/* Button */
button.filter-category-button,
button.sort-button {
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-small);
    background-color: transparent;
    padding: 10px;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    border: 1px solid var(--color-active);
    color: var(--color-active);
    opacity: .8;
}

button.sort-button {
    font-size: 13px;
    line-height: 1;
    padding: 7px;
}

button.filter-category-button:hover,
button.filter-category-button.active,
button.sort-button:hover,
button.sort-button.active {
    color: var(--color-background-light);
    background-color: var(--color-active);
    box-shadow: none;
}

button.filter-category-button:hover,
button.sort-button:hover {
    opacity: .7;
}

button.filter-category-button.active,
button.sort-button.active {
    opacity: 1;
}

.custom-sorting-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 480px) {
    .custom-sorting-buttons {
        grid-template-columns: 1fr;
    }
}

.category-image {
    width: 100%;
}