/*
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).
   Breadcrumb NavXT outputs <span> directly inside <ul> (no <li>), so selectors
   must cover `ul > span`, `ul a`, and the inner `<a> > span` combo — otherwise
   the .body-type anchors (Aluminium Boats / Cruising Boats / etc.) keep the
   default link color and blend into the dark hero background. */
.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 li a span,
.tt-subpages-wrapper .tt-breadcrumb ul span,
.tt-subpages-wrapper .tt-breadcrumb ul a,
.tt-subpages-wrapper .tt-breadcrumb ul a span,
.tt-subpages-wrapper .tt-breadcrumb ul li:not(:first-child):before {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.tt-subpages-wrapper .tt-breadcrumb ul a:hover,
.tt-subpages-wrapper .tt-breadcrumb ul a:hover span,
.tt-subpages-wrapper .tt-breadcrumb ul li a:hover,
.tt-subpages-wrapper .tt-breadcrumb ul li a:hover span {
    color: #00a4c3 !important;
}

/* ---- Product gallery polish (WC native flexslider + PhotoSwipe lightbox) ----
   Client feedback: default arrows too small / invisible. Make flexslider
   prev/next big and on the sides of the main image, plus beef up the
   PhotoSwipe lightbox arrows. */

/* WC flexslider arrows on the main product image */
.woocommerce-product-gallery .flex-direction-nav {
    position: static;
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-product-gallery .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav li a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55) !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 20;
    opacity: 1 !important;
    transition: background 0.18s, transform 0.18s;
    margin: 0;
}
.woocommerce-product-gallery .flex-prev { left: 12px; }
.woocommerce-product-gallery .flex-next { right: 12px; }
.woocommerce-product-gallery .flex-direction-nav a:hover {
    background: #00a4c3 !important;
    transform: translateY(-50%) scale(1.06);
}
.woocommerce-product-gallery .flex-direction-nav a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border: solid #fff;
    border-width: 3px 3px 0 0;
    font-family: inherit !important;
    color: transparent !important;
}
.woocommerce-product-gallery .flex-prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.woocommerce-product-gallery .flex-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}
.woocommerce-product-gallery .flex-direction-nav .flex-disabled {
    opacity: 0.35 !important;
    pointer-events: none;
}

/* Make gallery container the positioning context for arrows */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
    position: relative;
}

/* WC product gallery flexslider dot nav — theme doesn't style these since
   it normally uses thumbnails. Keep them consistent with slick-dots. */
.woocommerce-product-gallery .flex-control-nav {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 20px 0 30px;
    padding: 0;
}
.woocommerce-product-gallery .flex-control-nav li a {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    text-indent: -9999px;
    overflow: hidden;
    transition: background 0.2s;
    cursor: pointer;
}
.woocommerce-product-gallery .flex-control-nav li a.flex-active,
.woocommerce-product-gallery .flex-control-nav li a:hover {
    background: #00a4c3;
}

/* Overlay prev/next arrows on the main boat image (.tt-product-single-img)
   and on the WC flexslider gallery. Dark semi-transparent circles that
   sit on the left/right edges of the image area. */
.be-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    padding: 0;
}
.be-gallery-arrow:hover {
    background: #00a4c3;
    transform: translateY(-50%) scale(1.06);
}
.be-gallery-arrow svg { width: 20px; height: 20px; }
.be-gallery-arrow--prev { left: 12px; }
.be-gallery-arrow--next { right: 12px; }

/* Lightbox is now Fancybox 5 (enqueued via functions.php). It ships a
   polished UI and its own stylesheet — nothing to override here. Only
   bump the z-index so it sits above the sticky site header. */
.fancybox__container { z-index: 9999; }

/* Boat single gallery cursor: force `pointer` on the main image + thumbnails.
   Without it the user sees an I-beam (text cursor) on hover because the
   <a href="#"> wrappers let the browser fall through to the <img> which
   inherits cursor:text from somewhere. ТЗ задача 9.2. */
#smallGallery,
#smallGallery li,
#smallGallery a,
#smallGallery img,
.tt-product-single-img,
.tt-product-single-img a,
.tt-product-single-img img,
.tt-mobile-product-slider,
.tt-mobile-product-slider img,
.tt-mobile-product-slider .slick-slide,
.zoomContainer {
    cursor: pointer !important;
}

/* Boat Catalog sidebar filter FOUC (ТЗ задача 7): hide the raw <select>
   markup until SumoSelect has wrapped them into custom dropdowns. Our
   fixes.js adds `.is-ready` on window.load. */
.tt-aside02 .caleader-listings-search {
    visibility: hidden;
}
.tt-aside02 .caleader-listings-search.is-ready {
    visibility: visible;
}

/* Shop list-view: force one-per-row layout with fixed-width thumbnail on
   the left and description/price/button on the right (ТЗ задача 12).
   Parent theme leaves the 33% col width intact in list mode which made
   rows look like broken cards. */
.tt-product-listing.tt-row-view {
    display: block !important;
}
.tt-product-listing.tt-row-view .tt-col-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 20px;
}
.tt-product-listing.tt-row-view .tt-col-item .tt-product.tt-view {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 12px;
    border: 1px solid #eee;
    background: #fff;
}
.tt-product-listing.tt-row-view .tt-col-item .tt-product.tt-view .tt-image-box {
    flex: 0 0 170px;
    max-width: 170px;
}
.tt-product-listing.tt-row-view .tt-col-item .tt-product.tt-view .tt-description,
.tt-product-listing.tt-row-view .tt-col-item .tt-product.tt-view .tt-wrapper-description {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 576px) {
    .tt-product-listing.tt-row-view .tt-col-item .tt-product.tt-view {
        flex-wrap: wrap;
    }
    .tt-product-listing.tt-row-view .tt-col-item .tt-product.tt-view .tt-image-box {
        flex: 0 0 120px;
        max-width: 120px;
    }
}

/* Boat Catalog list-view: hide the "more info" button — it overlaps the
   MSRP price block in list-view (ТЗ задача 4). Grid-view keeps the button
   as the theme designed. Card title + image are already clickable links
   to the single-listing page, so the CTA is not lost. */
.tt-product-02.tt-view .tt-btn,
.tt-product-02.tt-view .tt-btn-moreinfo {
    display: none !important;
}

/* Boat-listing Specification table (.tt-table-options.rr1 on /boat-catalog/*).
   Parent theme fixes label column at 37% which is too narrow in the right
   sidebar — "Deadrise at transom", "Max weight capacity", "Transform height"
   wrap to 2 lines and the column widths "float". Force labels on one line at
   >=577px; fall back to stacked layout on phones for legibility. */
.tt-table-options tr td:first-child {
    white-space: nowrap;
    min-width: 160px;
}
@media (max-width: 576px) {
    .tt-table-options,
    .tt-table-options tbody,
    .tt-table-options tr {
        display: block;
        width: 100%;
    }
    .tt-table-options tr td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .tt-table-options tr td:first-child {
        white-space: normal;
        min-width: 0;
        padding-bottom: 2px;
    }
    .tt-table-options tr td:last-child {
        padding-top: 2px;
    }
}

/* Slick-dots: give vertical breathing room on every slider so the dot row
   doesn't butt against the following text block (client feedback 2026-04-20
   on single-listing galleries / related products carousels). Parent theme
   only sets margin-top at >=1025px; we want 20px on every breakpoint plus
   an equal gap below. */
.slick-slider .slick-dots {
    /* Parent theme renders .slick-dots absolutely positioned — that breaks
       margin-bottom (element not in flow) and the dot row ends up overlapping
       the next section. Force back into flow + wrap long dot rows. */
    position: static !important;
    margin-top: 25px !important;
    margin-bottom: 40px !important;
    flex-wrap: wrap !important;
    max-width: 100%;
    box-sizing: border-box;
    row-gap: 12px;
    padding-bottom: 8px;
}

/* 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: 2;
    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[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 {
    /* Parent shop.css:1647 sets `.quantity { margin: 0 auto !important }` which
       in a flex container eats all free space and pushes the Add-to-Cart button
       to a new line. Force static margin to keep qty + button on one row. */
    margin: 0 !important;
    background: transparent;
}
.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;
    /* parent theme draws a 1px border-top on .tt-tabs__body; adding another
       border-bottom here produces the double-line seen in the bug report
       (ТЗ задача 18.2) — keep just the body's border as the divider. */
}
.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;
}

/* ---- Policy / static pages typography (.page-content-section) ----
   Theme provides no baseline spacing for headings, lists and paragraphs
   inside the generic page template. Without this, everything collapses
   into a single block with no breathing room. */
.page-content-section {
    max-width: 860px;
    margin: 0 auto;
    padding: 30px 0 60px;
    line-height: 1.75;
    color: #333;
    font-size: 15px;
}
.page-content-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #222;
}
.page-content-section h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 36px 0 14px;
    color: #222;
}
.page-content-section h4 {
    font-size: 17px;
    font-weight: 600;
    margin: 28px 0 10px;
    color: #333;
}
.page-content-section p {
    margin: 0 0 16px;
}
.page-content-section ul {
    margin: 8px 0 20px 24px;
    padding: 0;
    list-style: disc;
}
.page-content-section ul li {
    margin-bottom: 8px;
    padding-left: 4px;
}
.page-content-section hr {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 36px 0;
}
.page-content-section a {
    color: #00a4c3;
    text-decoration: none;
}
.page-content-section a:hover {
    text-decoration: underline;
}

/* Mobile rhythm for .tt-block-title section headers on the homepage
   ("Types of Boats", "What BoatsExpert Offer", "Exclusive/Official Dealers",
   "Partners" and their small sub-titles). Parent theme sets title=42px/600,
   description=11px which looks heavy and disproportionate on a 390px
   viewport. Scale the title down and bump the description to a readable
   size so they balance as a pair.
   NB: the page emits a late-cascade inline <style> re-declaring the same
   `.tt-block-title .tt-title { font-size:42px }` at equal specificity, so
   !important is required — not a broad override, just escape of that one
   hardcoded widget rule. */
@media (max-width: 767px) {
    .tt-block-title .tt-title {
        font-size: 30px !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }
    .tt-block-title .tt-description {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}
@media (max-width: 480px) {
    .tt-block-title .tt-title {
        font-size: 26px !important;
    }
}

/* Category cards ("Types of Boats" grid: Aluminium Boats, Boat Trailer, etc.)
   On a 390px viewport each card is ~145px wide. Parent theme renders
   `h5.tt-title` as display:flex row with the category name and a
   `.tt-total` pill ("3 Offers") next to each other — together they
   exceed 145px so the title wraps to two lines and the pill pushes
   it off-center (see "BOAT TRAILER" / "FIBERGLASS BOATS").
   Stack them as a column with a small gap, nudge the title smaller,
   trim the inner padding so the overlay fits the 109px card height. */
@media (max-width: 767px) {
    .tt-media-02 .tt-description .tt-title {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 15px;
        line-height: 1.2;
    }
    .tt-media-02 .tt-description .tt-title .tt-total {
        margin: 0;
    }
    .tt-media-02 .tt-description {
        padding: 10px 8px 12px;
    }
}

/* Elementor text-editor bullet list (homepage "What BoatsExpert Offer"
   services, and every other themed bullet list). Parent theme attaches
   an icon via `li::before { position:absolute; left:0; width:13px }`,
   but the `<li>` itself only gets `padding-left: 4px` from the reset —
   so the icon sits on top of the first character and text reads as if
   it was glued to the bullet. Give the text a clear start after the
   icon + breathing room. */
.elementor-widget-text-editor ul li {
    padding-left: 22px;
}

/* Parent caleader style-7.css inlines url("../images/custom/mainSlider-layout*-color06.png").
   When parent CSS is injected inline, browser resolves ".." relative to document root,
   not CSS file → 404/301 redirects. Absolute override. */
.mainSlider .tt-caption-custom {
    background-image: url("/wp-content/themes/caleader/assets/images/custom/mainSlider-layout01-color06.png") !important;
}
.mainSlider .tt-caption-custom::before {
    background: url("/wp-content/themes/caleader/assets/images/custom/mainSlider-layout02-color06.png") 0 0 no-repeat !important;
}

/* iOS Safari does not fire synthetic click on <img> without cursor:pointer
   or anchor wrap. Parent theme inits elevateZoom only above 575px, so on
   mobile .zoom-product is a bare <img> — tap never opens the Fancybox
   handler bound in fixes.js. cursor:pointer restores iOS click firing. */
.tt-product-single-img img.zoom-product {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Product gallery navigation arrows are redundant on mobile — user swipes
   thumbnails or taps main image for lightbox. Hide below Bootstrap md (768). */
@media (max-width: 767.98px) {
    .tt-product-single-img .be-gallery-arrow {
        display: none !important;
    }
}