/*
Theme Name: Shopire Child
Theme URI: https://wpfable.com/themes/shopire-free/
Template: shopire
Author: WPFable
Author URI: https://wpfable.com/
Description: Shopire is a fast, clean, lightweight theme. Shopire is customizable and modern-looking free responsive WooCommerce WordPress theme for e-commerce stores like clothing, fashion, electronics, ebooks, dress store, sports shop, marketplace, multivendor, equipments or online products. Theme is compatible with Elementor, WPML, Polylang, Yoast SEO, WooCommerce, Contact Form 7, Jetpack and other popular plugins. The theme is SEO friendly, WPML and RTL ready. Looking for a WooCommerce theme? Look no further! Shopire Pro demo https://demos.wpfable.com/premium/shopire/
Tags: one-column,two-columns,right-sidebar,flexible-header,custom-background,custom-header,custom-menu,editor-style,featured-images,footer-widgets,post-formats,theme-options,threaded-comments,translation-ready,full-width-template,custom-logo,blog,e-commerce,portfolio
Version: 1.0.67.1773565303
Updated: 2026-03-15 11:01:43

*/

html {
    font-family: 'Nunito', sans-serif;
    --wf-base-family: 'Nunito', sans-serif !important;
    --wf-title-family: 'Nunito', sans-serif !important;
}

h1,
.h1 {
    font-size: 2.75rem;
}

h2,
.h2 {
    font-size: 2.5rem;
}

h3,
.h3 {
    font-size: 2.2rem;
}

h4,
.h4 {
    font-size: 2rem;
}

h5,
.h5 {
    font-size: 1.8rem;
}

h6,
.h6 {
    font-size: 1.6rem;
}


.wp-block-button__link {
    align-content: center;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    text-align: center;
    word-break: break-word;
    max-height: 50px;
}
.site--logo .site-description {
    font-size: 13px !important;
    color: inherit;
}
/* Категорії на головній сторінці */
.my-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.top-category-title {
    padding: 50px 0;
    text-align: center;
    text-transform: uppercase;
}

.woocommerce-buttons {
    display: flex;
    justify-content: space-around;
}

.wp-block-woocommerce-product-categories.wc-block-product-categories.is-list {
    display: none;
}

@media (max-width: 992px) {
    .my-categories {
        grid-template-columns: repeat(2, 1fr);
    }
    .top-category-title {
    padding: 20px 0;
}
.site--logo .site-description {
    display: none;
}
.woocommerce-buttons {
    display: flex;
    justify-content: column;
}
}

span.sku_wrapper {
    display: none !important;
}
.wf_footer_middle .wf-row {
    display: flex;
    flex-wrap: wrap;
    --wf-gutter-x: 2.4rem;
    margin-right: calc(var(--wf-gutter-x) / -2);
    margin-left: calc(var(--wf-gutter-x) / -2);
}

.wf-row > .block {
    padding: 0 calc(var(--wf-gutter-x) / 2);
}

.wf_footer_middle .wf-row .wf-col-lg-3:nth-child(1) {
    flex: 0 0 50%;
    max-width: 50%;
}
.wf_footer_middle .wf-row .wf-col-lg-3:nth-child(2),
.wf_footer_middle .wf-row .wf-col-lg-3:nth-child(3) {
    flex: 0 0 25%;
    max-width: 25%;
}


@media (max-width: 576px) {
    .my-categories {
        /* grid-template-columns: 1fr; */
    }
}

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

.category-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.my-categories h3 {
    font-size: 1.8rem;
    padding: 10px 0 10px;
    text-decoration: none;
}

.my-categories a {
    text-decoration: none;
}

.wf_widget-area .widget .wp-block-heading, .wf_widget-area .widget .widget-title {
    padding: 0;
    margin-top: -2.5rem;
    margin-right: -3rem;
    margin-bottom: 2.5rem;
    margin-left: -3rem;
    text-align: center;
    background-color: var(--wf-main-color);
    color: #fff;
}
.widget .wp-block-heading, .widget .widget-title {
    position: relative;
    font-size: 1.5rem;
    line-height: 2.5rem;
    margin-bottom: 1.6rem;
}
.site--logo img {
    width: 100%;
    max-height: 100%;
}

.select2-container--default .select2-selection--single span.select2-selection__rendered {
    line-height: 20px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(1) {
    /* max-height: 100%; */
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(1) {
    overflow: hidden;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.woocommerce div.product div.images img {
    /* display: block; */
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    height: 100%;
}

.variations-blocks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.variation-item {
    display: flex;
    flex-direction: column;
}

.variation-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.variation-select select {
    width: 100%;
    padding: 0.5rem;
}

.product-thumbnails-wrapper {
    margin-top: 15px;
    position: relative;
}

.thumbnails-slider .thumbnail-item {
    padding: 0 5px; /* Відступи між фото */
    outline: none;
}

/* Стилізація самого посилання або обгортки зображення */
.thumbnails-slider .thumbnail-item a, 
.thumbnails-slider .thumbnail-item img {
    display: block;
    width: 100%;
    /* Створюємо ідеальний квадрат */
    aspect-ratio: 1 / 1; 
    /* Обрізаємо зайве, щоб фото заповнило квадрат без деформації */
    object-fit: cover; 
    /* Центруємо зображення всередині */
    object-position: center;
    border-radius: 4px; /* Опціонально: заокруглення кутів */
}

/* Додатково для Slick, щоб він не ламав висоту */
.slick-track {
    display: flex !important;
    align-items: center;
}

/* Стилізація стрілок (опціонально) */
.slick-prev, .slick-next {
    z-index: 10;
    width: 30px;
    height: 30px;
}

.slick-prev:before, .slick-next:before {
    color: black !important; /* Зробити стрілки помітними */
}

a.reset_variations{
    display:none !important;
}

@media (max-width: 61.95em) {
    .wf_pagetitle .wf_pagetitle_content .title>* {
        font-size: 2rem;
        line-height: 3rem;
    }
     .woocommerce form p.form-row {
    margin: 0 0 5px 0 !important;
    padding: 0;
}
}

.product-content-outer .product-content em {
    display: none;
}


@media screen and (min-width: 768px) {
    /* 1. Перетворюємо головну форму на двоколонкову сітку */
    form.checkout.woocommerce-checkout {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* Дві рівні колонки (50% на 50%) */
        gap: 30px !important; /* Відступ між колонками */
        align-items: start !important;
    }

    /* 2. ЛІВА КОЛОНКА: Анкета клієнта */
    #customer_details {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important; /* Займає всю висоту (ліву сторону повністю) */
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* 3. ПРАВА КОЛОНКА (Верх): Контейнер з таблицею товарів */
    .woocommerce-checkout-review-order {
        grid-column: 2 !important;
        grid-row: 1 !important; /* Чітко перший рядок праворуч */
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important; /* Невеликий відступ знизу до блоку оплати */
    }

    /* Додатково адаптуємо саму таблицю всередині контейнера */
    table.shop_table.woocommerce-checkout-review-order-table {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* 4. ПРАВА КОЛОНКА (Низ): Блок оплати та кнопка */
    #payment {
        grid-column: 2 !important;
        grid-row: 2 !important; /* Чітко другий рядок праворуч (під таблицею) */
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}