/*
Theme Name: Caleader Child
Theme URI: http://https://smartdata.tonytemplates.com/caleader-child/
Author: Websmirno
Author URI: http://smartdatasoft.com
Template:     caleader
Description: Caleader Responsive WordPress Chiild Theme
Version: 1.0
License: This theme or plugin is comprised of two parts.(1) the PHP code and integrated HTML are licensed under the General Public License (GPL). You will find a copy of the GPL in the same directory as this text file. (2) All other parts, but not limited to the CSS code, images, and design are licensed according to the terms of your purchased license. Read more about licensing here: http://themeforest.net/licenses
License URI: License.txt
Text Domain: caleaderchild
Tags: flexible-header,custom-background,custom-header,featured-images
slug: caleaderchild

*/

/* Fix depth-2 nav sub-sub-menus (GALA RIB → подменю) for ALL header layouts (01/02/03 + stuck).
   Parent theme bug: `nav>ul>li.is-hover ul` (descendant combinator) makes ALL nested uls visible
   on top-level hover, so depth-2 was always expanded. Override: hide depth-2 unless its DIRECT
   parent <li> has .is-hover. */
#tt-desctop-menu nav>ul>li ul li.dropdown-submenu>ul,
#tt-desctop-menu nav>ul>li ul li.is-subMenu>ul {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    margin-left: 4px;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: 0.2s ease 0s;
    transition: 0.2s ease 0s;
    visibility: hidden;
}
#tt-desctop-menu nav>ul>li ul li.dropdown-submenu.is-hover>ul,
#tt-desctop-menu nav>ul>li ul li.is-subMenu.is-hover>ul {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 0.3s ease 0.1s;
    transition: 0.3s ease 0.1s;
}
/* Hint arrow on dropdown items that have children */
#tt-desctop-menu nav>ul>li ul li.dropdown-submenu>a:after,
#tt-desctop-menu nav>ul>li ul li.is-subMenu>a:after {
    content: '\203A';
    float: right;
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
    color: #999;
}
#tt-desctop-menu nav>ul>li ul li {
    position: relative;
}

/* On single-product pages the theme's subpages-wrapper renders the product title
   a second time (it's already inside the product summary). Keep the breadcrumb
   but hide the duplicate <h1>. Archive/category titles unaffected. */
.single-product .tt-subpages-wrapper .tt-title {
    display: none;
}
.single-product .tt-subpages-wrapper {
    padding-top: 28px;
    padding-bottom: 28px;
    min-height: 0;
}

/* Breadcrumbs: white text everywhere (current page, links, separators).
   Default theme/custom CSS uses #00a4c3 which blends with dark hero overlay. */
.tt-subpages-wrapper .tt-breadcrumb,
.tt-subpages-wrapper .tt-breadcrumb ul,
.tt-subpages-wrapper .tt-breadcrumb ul li,
.tt-subpages-wrapper .tt-breadcrumb ul li a,
.tt-subpages-wrapper .tt-breadcrumb ul span,
.tt-subpages-wrapper .tt-breadcrumb ul li a span,
.tt-subpages-wrapper .tt-breadcrumb ul li:not(:first-child):before {
    color: #ffffff !important;
}
.tt-subpages-wrapper .tt-breadcrumb ul li a:hover,
.tt-subpages-wrapper .tt-breadcrumb ul li a:hover span {
    color: #00a4c3 !important;
}

/* Breadcrumb NavXT outputs <span> items (not <li>); make them flow nicely on small screens. */
.tt-subpages-wrapper .tt-breadcrumb ul {
    flex-wrap: wrap;
    justify-content: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 0 10px;
}
.tt-subpages-wrapper .tt-breadcrumb ul > span[property="itemListElement"] {
    display: inline-flex;
    align-items: center;
}

/* Mobile fixes for subpages hero */
@media (max-width: 767px) {
    .tt-subpages-wrapper {
        height: auto !important;
        min-height: 110px;
        padding: 22px 16px;
    }
    .tt-subpages-wrapper .tt-title {
        font-size: 26px !important;
        line-height: 1.25;
        word-break: break-word;
    }
    .tt-subpages-wrapper .tt-breadcrumb {
        margin-top: 8px;
    }
    .tt-subpages-wrapper .tt-breadcrumb ul {
        font-size: 13px;
        line-height: 1.4;
        margin: 0;
    }
}
@media (max-width: 480px) {
    .tt-subpages-wrapper .tt-title {
        font-size: 22px !important;
    }
    .tt-subpages-wrapper .tt-breadcrumb ul {
        font-size: 12px;
    }
}

/* WooCommerce product badges: Sale (yellow), Out of stock (red), On backorder (blue).
   Same shape/position as stock Sale flash — top-left of product image. */
.woocommerce span.onsale {
    background: #FFA700 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.3px;
    top: 9px !important;
    left: 9px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 9;
}
.be-stock-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    color: #ffffff;
    padding: 6px 10px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.3px;
    z-index: 10;
    border-radius: 0;
}
.be-stock-badge--out { background: #F92422; }
.be-stock-badge--backorder { background: #00ADE6; }
/* Stagger when both Sale + stock badge present */
.woocommerce span.onsale + .be-stock-badge,
.be-stock-badge + span.onsale {
    top: 39px;
}
/* Single product page: badges anchor inside the gallery wrapper */
.woocommerce div.product .images,
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

/* Listings: keep col-md-12 default behaviour for sidebar template (md is meant to stack);
   layout fix is handled by template override in /listings/archive-carleader-listing.php */

/* Hero Slick slider FOUC — отложено. */

/* Главная: блок "Types of Boats". Все картинки одного размера на всю карточку. */
@media (min-width: 1230px) {
    .tt-list-media-02 > .col-lg-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}
.tt-list-media-02 > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}
.tt-list-media-02 .tt-media-02 {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}
.tt-list-media-02 .tt-media-02:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.tt-list-media-02 .tt-media-02 > img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    padding: 0 !important;
    transition: transform 0.4s ease;
}
.tt-list-media-02 .tt-media-02:hover > img {
    transform: scale(1.05);
}
/* Затемнение снизу для читабельности текста */
.tt-list-media-02 .tt-media-02::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.tt-list-media-02 .tt-media-02 .tt-description {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 20px;
    text-align: center;
    gap: 10px;
    background: transparent;
}
.tt-list-media-02 .tt-media-02 .tt-description .tt-title {
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.tt-list-media-02 .tt-media-02 .tt-description .tt-title .tt-total {
    background: #00a4c3;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 5px 14px;
    min-width: 74px;
    min-height: 28px;
    box-sizing: border-box;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: lowercase;
    line-height: 1.4;
    text-shadow: none;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}
.tt-list-media-02 .tt-media-02 .tt-description .tt-title .tt-total span {
    font-weight: 500 !important;
    opacity: 0.9;
}
.tt-list-media-02 .tt-media-02 .tt-description .tt-link-marker {
    display: none;
}

/* ──────────────────────────── Mobile header fixes ──────────────────────────── */

/* Theme's sticky header is 56px on mobile but logo has no size constraint → 60px SVG
   overflows the 56px bar. Constrain and vertically center it. */
@media (max-width: 1024px) {
    #tt-stuck .tt-stuck-row .tt-logo {
        margin-top: 0;
        display: flex;
        align-items: center;
        height: 100%;
    }
    #tt-stuck .tt-stuck-row .tt-logo img {
        max-height: 38px;
        width: auto;
    }
}

/* Theme renders empty <img src=""> placeholder inside .quickLinks-map on mobile
   (meant to be a map preview — never configured). Hide it so the expanded panel
   doesn't show a broken-image icon under the address. */
.quickLinks-map img[src=""],
.quickLinks-map img:not([src]),
.quickLinks-map img[src="#"] {
    display: none !important;
}

/* Our language-switcher column in .tt-mobile-quickLinks was `col` (grows equally) which
   squeezed the two icon-toggle columns. Shrink to content width and push to the right
   so the location+contact icons keep their original size. */
.tt-mobile-quickLinks .row > .be-lang-flags-quicklinks {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
}

/* Single product page polish — adds breathing room between sections.
   Targets: gallery / right-side info block / quantity+button row / meta / tabs / related products. */
.single-product .tt-wrapper-single {
    padding: 30px 0 50px;
}
.single-product .tt-product-single-img,
.single-product .woocommerce-product-gallery {
    margin-bottom: 30px;
}
.single-product .product-single-info {
    padding: 0 10px;
}
.single-product .product-single-info > .wrapper-title,
.single-product .product-single-info .product_title {
    margin: 0 0 14px;
    line-height: 1.25;
}
.single-product .product-single-info .price,
.single-product .product-single-info .tt-price {
    margin: 0 0 18px;
    display: block;
    font-size: 28px;
    font-weight: 700;
}
.single-product .woocommerce-product-details__short-description {
    margin: 0 0 22px;
    line-height: 1.6;
    color: #444;
}
.single-product .product-single-info form.cart {
    margin: 0 0 24px;
    padding: 18px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.single-product .product-single-info form.cart .quantity {
    margin: 0;
}
.single-product .product-single-info form.cart .quantity input.qty {
    height: 46px;
    width: 70px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.single-product .product-single-info form.cart .single_add_to_cart_button,
.single-product .product-single-info form.cart button.btn {
    height: 46px;
    padding: 0 28px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.single-product .product_meta {
    margin: 22px 0 0 !important;
    padding: 16px 0 0;
    border-top: 1px solid #eee;
    line-height: 1.9;
    color: #707070;
    font-size: 14px;
}
.single-product .product_meta > span {
    display: block;
}
.single-product .product_meta > span + span {
    margin-top: 4px;
}
.single-product .product_meta a {
    color: #00a4c3;
}
.single-product .product_meta a:hover { text-decoration: underline; }
/* Tabs section */
.single-product .tt-product-page__tabs {
    margin-top: 50px;
}
.single-product .tt-product-page__tabs .tt-tabs__head {
    margin-bottom: 24px;
    border-bottom: 1px solid #eaeaea;
}
.single-product .tt-product-page__tabs .tt-tabs__content {
    padding: 8px 0;
    line-height: 1.7;
    color: #444;
}
.single-product .tt-product-page__tabs .tt-tabs__content p { margin-bottom: 1em; }
.single-product .tt-product-page__tabs .tt-tabs__content table { margin: 12px 0; }
.single-product .tt-product-page__tabs .tt-tabs__content table th,
.single-product .tt-product-page__tabs .tt-tabs__content table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}
/* Related / upsells carousel */
.single-product .related,
.single-product .upsells {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}
.single-product .related > h2,
.single-product .upsells > h2 {
    margin-bottom: 24px;
}
/* Services page (.tt-promo-list) — фикс кривого грида.
   Тема рендерит карточки .tt-promo с background-image (через <img>) — высота
   карточки = высота картинки, поэтому 4 разных по размеру изображения дают
   разную высоту и грид плывёт.
   Решение: фиксированный aspect ratio на саму карточку + object-fit:cover
   на картинку. Описание (overlay) и так абсолютно позиционировано темой. */
.tt-promo-list > [class*="col-"] {
    display: flex;
}
.tt-promo-list .tt-promo {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    display: block;
}
/* EWWW wraps the <img> in a <picture>, so the direct-child selector we used before
   never matched. Match both wrapped and bare <img>. */
.tt-promo-list .tt-promo > picture,
.tt-promo-list .tt-promo > picture img,
.tt-promo-list .tt-promo > img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.tt-promo-list .tt-promo > picture img,
.tt-promo-list .tt-promo > img {
    object-fit: cover;
    object-position: center;
}
/* Description overlay: dark gradient + centered title/text so it reads on any photo. */
.tt-promo-list .tt-promo .tt-description {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 18px 18px 20px;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 60%);
    pointer-events: none;
}
/* Service-card icon: transparent circle with centered glyph.
   Theme uses a solid red circle (#dd3d53) and centers the glyph via line-height:2.35
   — which mis-centers when we override font-size. Use flex centering instead,
   make the circle transparent (white hairline border keeps the shape visible). */
.tt-promo-list .tt-promo .tt-description .tt-icon {
    width: 88px;
    height: 88px;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 38px;
    line-height: 1 !important;
    margin: 0 0 12px;
    padding: 0;
    transition: background-color 0.2s linear, border-color 0.2s linear;
}
.tt-promo-list .tt-promo .tt-description .tt-icon::before {
    display: block;
    line-height: 1;
}
body:not(.touch) .tt-promo-list .tt-promo:hover .tt-icon {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #fff;
}
@media (max-width: 1024px) {
    .tt-promo-list .tt-promo .tt-description .tt-icon {
        width: 74px;
        height: 74px;
        font-size: 32px;
    }
}
@media (max-width: 575px) {
    .tt-promo-list .tt-promo .tt-description .tt-icon {
        width: 62px;
        height: 62px;
        font-size: 28px;
    }
}
.tt-promo-list .tt-promo .tt-description .tt-title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.tt-promo-list .tt-promo .tt-description .tt-text {
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}
@media (max-width: 575px) {
    .tt-promo-list .tt-promo {
        aspect-ratio: 4 / 3;
    }
    .tt-promo-list .tt-promo .tt-description .tt-title { font-size: 15px; }
    .tt-promo-list .tt-promo .tt-description .tt-text { font-size: 12px; }
}

/* Глобальная типографика — приводим в порядок.
   Тема использует Poppins 600 для меню (выглядит тяжёло), 8/11px в служебных
   местах (нечитаемо). Уменьшаем вес меню, поднимаем micro-sizes до читаемых. */
/* Меню: было 600 / 15px → делаем 500 / 14px (тоньше + чуть компактнее) */
#tt-header #tt-desctop-menu nav > ul > li > a,
#tt-header.tt-header-01 #tt-desctop-menu nav > ul > li a,
#tt-header.tt-header-03 #tt-desctop-menu nav > ul > li a,
#tt-stuck #tt-desctop-menu nav > ul > li a {
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px;
}
#tt-header #tt-desctop-menu nav > ul ul li a {
    font-weight: 500 !important;
}
/* Бургер-меню (мобильное) — тоже тоньше */
#mobile-menu .mm-listview > li > a,
#mobile-menu a {
    font-weight: 500 !important;
}
/* Micro-fonts (8-11px) → бесчеловечно. Минимум 12px. */
.caleader-style * {
    /* пустой селектор для специфичности — пусть у нас будет общий пас */
}
[class*="font-size:8px"],
[class*="font-size:9px"],
[class*="font-size:10px"],
[class*="font-size:11px"] {
    font-size: 12px !important;
}
/* Footer copyright + подобные мелкие подписи — поднимаем минимум до 13px */
.tt-footer-copyright,
.tt-footer-copyright span,
.tt-footer-copyright a {
    font-size: 13px;
}
/* Footer policy links — space between © span and first link, pipe between sibling links. */
.tt-footer-copyright .be-policy-link {
    margin-left: 14px;
}
.tt-footer-copyright .be-policy-link + .be-policy-link {
    margin-left: 0;
    padding-left: 14px;
    border-left: 1px solid currentColor;
}

/* Shop loop product cards — равные высоты независимо от исходных пропорций картинок.
   Тема ставит .tt-image-box img { height: auto } → высота карточки = высота картинки.
   Разные товары имеют разные размеры (300x300 / 300x258 / etc) → грид плывёт.
   Решение: aspect-ratio 1:1 + object-fit: contain (сохраняем пропорции товара,
   белый фон закрашивает пустоту чтобы товар не растягивался). */
.tt-product .tt-image-box {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-product .tt-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
}
/* Карточка в целом — flex column с равной высотой через flex на колонке */
.tt-product-listing > [class*="col-"] {
    display: flex;
}
.tt-product-listing .tt-product {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.tt-product-listing .tt-product .tt-description {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.tt-product-listing .tt-product .tt-description .wrapper-title {
    flex: 1 1 auto;
}
/* Шрифты в карточках товара — тоньше */
.tt-product .tt-description .tt-title,
.tt-product .tt-description .tt-title a {
    font-weight: 500 !important;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0.1px;
}
.tt-product .tt-title-info {
    font-weight: 400 !important;
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}
.tt-product .tt-price,
.tt-product .tt-price .amount {
    font-weight: 600 !important;
    font-size: 17px;
    letter-spacing: 0;
}
.tt-product .tt-btn-addtocart {
    font-weight: 500 !important;
    letter-spacing: 0.4px;
    font-size: 13px;
}

/* Related/Upsells карусель на single product.
   Тема рендерит .js-carousel-col-4 (Slick 4-column) — до инициализации Slick
   карточки .tt-product не имеют ограничения ширины, моё .tt-image-box{aspect-ratio:1/1}
   делает их огромными квадратами на широких экранах.
   Решение: фиксированный max-width на slide pre-init + лёгкая стилизация секции. */
.related.products,
.upsells.products {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    overflow: hidden;
}
.related.products > .tt-block-title,
.upsells.products > .tt-block-title {
    margin-bottom: 24px;
}
.related.products > .tt-block-title .tt-title,
.upsells.products > .tt-block-title .tt-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}
/* Pre-init Slick: каждый "слайд"-обёртка ограничена по ширине ~280px,
   чтобы карточки не растягивались на весь viewport. После init Slick управляет. */
.js-carousel-col-4:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    max-height: 420px;
}
.js-carousel-col-4:not(.slick-initialized) > div {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 8px;
}
@media (max-width: 991px) {
    .js-carousel-col-4:not(.slick-initialized) > div { flex: 0 0 33.33%; max-width: 33.33%; }
}
@media (max-width: 767px) {
    .js-carousel-col-4:not(.slick-initialized) > div { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 480px) {
    .js-carousel-col-4:not(.slick-initialized) > div { flex: 0 0 100%; max-width: 100%; }
}
/* После init Slick — карточки занимают свою ячейку, image остаётся 1:1 */
.js-carousel-col-4 .tt-product {
    margin: 0 5px;
}

/* Related/Upsells: уменьшаем картинки в 2 раза — карточки в карусели должны
   быть компактнее чем в shop loop. Перебиваем aspect-ratio:1/1 (общее правило) */
.related.products .tt-product .tt-image-box,
.upsells.products .tt-product .tt-image-box,
.js-carousel-col-4 .tt-product .tt-image-box {
    aspect-ratio: auto !important;
    max-height: 180px;
    height: 180px;
}
.related.products .tt-product .tt-image-box img,
.upsells.products .tt-product .tt-image-box img,
.js-carousel-col-4 .tt-product .tt-image-box img {
    max-height: 180px;
    height: 100%;
}
/* Уменьшаем шрифты в карточках Related/Upsells относительно shop loop */
.related.products .tt-product .tt-title,
.related.products .tt-product .tt-title a,
.upsells.products .tt-product .tt-title,
.upsells.products .tt-product .tt-title a,
.js-carousel-col-4 .tt-product .tt-title,
.js-carousel-col-4 .tt-product .tt-title a {
    font-size: 13px !important;
    line-height: 1.3;
}
.related.products .tt-product .tt-price,
.related.products .tt-product .tt-price .amount,
.upsells.products .tt-product .tt-price,
.upsells.products .tt-product .tt-price .amount,
.js-carousel-col-4 .tt-product .tt-price,
.js-carousel-col-4 .tt-product .tt-price .amount {
    font-size: 14px !important;
}
.related.products .tt-product .tt-title-info,
.upsells.products .tt-product .tt-title-info,
.js-carousel-col-4 .tt-product .tt-title-info {
    font-size: 12px;
}
.related.products .tt-product .tt-btn-addtocart,
.upsells.products .tt-product .tt-btn-addtocart,
.js-carousel-col-4 .tt-product .tt-btn-addtocart {
    font-size: 12px;
    padding: 8px 12px;
}
/* Pre-init max-height тоже уменьшаем под новый размер */
.js-carousel-col-4:not(.slick-initialized) {
    max-height: 320px;
}

/* WooCommerce sub-category карточки.
   Тема рендерит их в <ul.products> ИЛИ в <div.tt-product-listing.row>.
   Удобный alias-селектор `.product-category` уникален для этих карточек —
   срабатывает в обоих контейнерах. */
.product-category {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.product-category > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.product-category > a:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: #00a4c3;
    transform: translateY(-2px);
}
/* Изображение — fill контейнер с object-fit:contain, без кропа */
.product-category > a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: contain !important;
    object-position: center;
    display: block;
    background: #fafafa;
    padding: 12px;
    box-sizing: border-box;
}
.product-category > a picture {
    display: block;
    width: 100%;
}
.product-category .woocommerce-loop-category__title {
    flex: 1 1 auto;
    margin: 0;
    padding: 16px 14px 18px;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}
.product-category .woocommerce-loop-category__title .count {
    background: #00a4c3;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: none;
    line-height: 1.4;
    min-width: 28px;
    text-align: center;
}
.product-category > a:hover .woocommerce-loop-category__title {
    color: #00a4c3;
}
/* Sub-category cards grid.
   Тема использует .tt-product-listing.row для ОБОИХ списков:
   - Shop loop (продукты в .col-6.col-md-4 обёртках) — Bootstrap row, оставляем как есть
   - Category page sub-categories (<li class="product-category"> напрямую) — нужен grid
   Используем :has() (Chrome 105+ / Safari 15.4+ / FF 121+) для точного таргета. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.tt-product-listing.row:has(> .product-category),
#tt-product-listing:has(> .product-category) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
    list-style: none;
}
.tt-product-listing.row > .product-category,
#tt-product-listing > .product-category,
ul.products > li.product-category {
    flex: 0 0 300px;
    max-width: 300px;
    margin: 0 !important;
}
@media (max-width: 480px) {
    .tt-product-listing.row > .product-category,
    #tt-product-listing > .product-category,
    ul.products > li.product-category {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Сбрасываем bootstrap col-* если они применены к li через тему */
.woocommerce ul.products > li,
.woocommerce-page ul.products > li {
    width: auto !important;
    margin: 0 !important;
    max-width: none !important;
    flex: none !important;
}

/* Layout: boxed 1200px on all pages (theme default). Client preferred boxed over
   wide after viewing the demo — cards and nav stay aligned, readability over coverage. */

/* Footer "subscribe" banner. Source 1920×165 (panoramic). Theme renders bg via JS
   reading data-bg, but on Elementor-built pages (homepage etc.) the JS sometimes
   doesn't reach this element (multiple [data-bg] selectors, defer race). Hard-set
   the background in CSS too so it always shows. */
#tt-footer.tt-footer-03 .subscribe-custom,
#tt-footer .subscribe-custom {
    background-image: url('/wp-content/uploads/2022/03/Slider_1920-165_02.webp') !important;
    aspect-ratio: 1920 / 165;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
@media (max-width: 767px) {
    /* 1920/165 on 375px screens is a 32px sliver — unreadable. Use cover + min-height. */
    #tt-footer.tt-footer-03 .subscribe-custom,
    #tt-footer .subscribe-custom {
        aspect-ratio: auto !important;
        min-height: 120px;
        background-size: cover !important;
    }
}

/* Mobile — even more breathing room since elements stack */
@media (max-width: 767px) {
    .single-product .tt-wrapper-single { padding: 18px 0 30px; }
    .single-product .product-single-info { padding: 18px 4px 0; }
    .single-product .product-single-info form.cart { padding: 14px 0; }
    .single-product .tt-product-page__tabs { margin-top: 30px; }
    .single-product .related, .single-product .upsells { margin-top: 36px; }
}
/* Shop sidebar "Filter by Color" (Layered Nav dropdown) — Select2 container
   overflows the form width because theme has no baseline rule. "Any color" text
   pokes out the right edge. Constrain Select2 wrapper to 100% of the form. */
form.woocommerce-widget-layered-nav-dropdown {
    position: relative;
    max-width: 100%;
}
form.woocommerce-widget-layered-nav-dropdown > .select2-container,
form.woocommerce-widget-layered-nav-dropdown .select2 {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
}
form.woocommerce-widget-layered-nav-dropdown .select2-selection {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}
form.woocommerce-widget-layered-nav-dropdown .select2-selection__rendered {
    line-height: 1.3;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
form.woocommerce-widget-layered-nav-dropdown .select2-selection__arrow {
    height: 40px;
    right: 8px;
    flex: 0 0 auto;
}