@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
/*Add Css Custom Here*/

/*====== Fix bugs Megamenu not showing icon font (26/1/2018) =====*/
@media (min-width: 992px){
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a {  line-height: 24px; height: auto;}
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a i,
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a b {
	    display: inline-block;
	}
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li.with-sub-menu > a:before{display: none;}
	.menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a img{position: static; transform: inherit;}

}

/*====== Рівна висота карток товарів у гріді категорії (21/05/2026) ======
  Bootstrap-колонки .product-layout float'яться, тому за будь-якої різниці
  у висоті (довжина назви, наявність ціни/рейтингу, бейдж "Немає в наявності")
  сусідні картки чіпляються і ламають грід. Робимо рядок гріду flex'ом —
  усі картки в ряду стають однакової висоти, а ціна притискається донизу. */
.products-category .products-list.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Розтягуємо картку на всю висоту колонки — тільки в grid-режимах
   (list/table мають власну розкладку і col-xs-12, тож по одному в ряд). */
.products-category .products-list .product-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.products-category .products-list .product-grid > .product-item-container {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

/* Права частина (назва / рейтинг / ціна) заповнює залишок висоти,
   а ціна (нижній видимий елемент у гріді) лягає на спід картки. */
.products-category .products-list .product-grid > .product-item-container > .right-block {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.products-category .products-list .product-grid > .product-item-container > .right-block .price {
    margin-top: auto;
}

/*====== Характеристики товару: відступ між назвою і значенням (21/05/2026) ======
  Тема дає назві лише min-width:150px (не обмежує довгі назви), тож значення
  приклеюється впритул до назви ("...мм²/с14.6"). Робимо кожну пару flex'ом:
  назва — фіксовані ~60% колонки, значення — окремий блок із відступом ліворуч,
  тож усі значення в стовпчику починаються з одного вертикального краю.
  Між лівою та правою колонками — 24px. На мобільному (<=768px) — 1 колонка. */
.product-detail .producttab .tab-content ul.product-property-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.product-detail .producttab .tab-content ul.product-property-list li.property-item {
    width: 50%;
    float: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/* 24px-гутер між лівою та правою колонками */
.product-detail .producttab .tab-content ul.product-property-list li.property-item:nth-child(odd) {
    padding-right: 12px;
}
.product-detail .producttab .tab-content ul.product-property-list li.property-item:nth-child(even) {
    padding-left: 12px;
}
/* назва: фіксовані ~60% колонки, лівовирівняна (колір #999 лишається від теми) */
.product-detail .producttab .tab-content ul.product-property-list li .propery-title {
    float: none;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    min-width: 0;
}
/* значення: займає решту, лівовирівняне, з чітким лівим краєм, текст не обрізається */
.product-detail .producttab .tab-content ul.product-property-list li .propery-des {
    float: none;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: none;
    padding-left: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* мобільний: 1 колонка, кожна пара "назва — значення" на своєму рядку */
@media (max-width: 768px) {
    .product-detail .producttab .tab-content ul.product-property-list li.property-item,
    .product-detail .producttab .tab-content ul.product-property-list li.property-item:nth-child(odd),
    .product-detail .producttab .tab-content ul.product-property-list li.property-item:nth-child(even) {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/*====== Теги товару: рівний вертикальний відступ між рядками (21/05/2026) ======
  Теги — inline-block кнопки .btn без вертикального margin, тож при переносі на
  2-й рядок рядки налазять вертикально. Робимо контейнер flex'ом із gap —
  рівні проміжки і по горизонталі, і по вертикалі; теги виходять з інлайн-потоку,
  тож overlap неможливий. Колір/розмір/border самих тегів не чіпаємо.
  flex-gap працює в усіх сучасних браузерах (Chrome/Edge/FF, Safari 14.1+). */
#tab-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px 6px; /* row-gap 8px (між рядками), column-gap 6px (між сусідами) */
}
#tab-tags > .btn {
    margin: 0; /* gap уже задає відступи — обнуляємо, щоб не подвоювати */
}

/*====== Тулбар категорії: усі кнопки виду в одному ряду (21/05/2026) ======
  У розмітці колонки виду — друкарська помилка "com-md-4" замість "col-md-4",
  тож на десктопі діє лише col-sm-4 = 33% ширини. На >=1200px у ці 33% мітка
  "Вигляд сітки:" + 5 кнопок ([2][3][4][list][table]) не влазять → кнопка таблиці
  падала окремо вниз. Робимо рядок тулбару flex'ом: блок виду бере ширину за
  вмістом, блок "Сортувати/Показати" — решту; кнопки виду тримаємо в один ряд. */
@media (min-width: 768px) {
    .products-category .product-filter-top > .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .products-category .product-filter-top > .row > .view-mode {
        width: auto;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    .products-category .product-filter-top > .row > .short-by-show {
        width: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
}
/* Кнопки виду — завжди один ряд, рівний gap 5px, без float (не міняємо їх розмір/колір) */
.products-category .product-filter-top .list-view {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
}
.products-category .product-filter-top .list-view > .btn {
    float: none;
    margin: 0;
}

/*====== Фільтр категорії: заголовок групи клікабельний (22/05/2026) ======
  Toggle (slideToggle + зміна стрілки) уже реалізовано в самому модулі
  so_filter_shop_by; тут лише курсор-вказівник і заборона виділення тексту
  при повторних кліках. Початковий стан (які групи згорнуті) задається в JS. */
.so_filter_wrap .so-filter-heading {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*====== Кнопки в дропдауні кошика — в один ряд (22/05/2026) ======
  "Переглянути кошик" + "Оформити" були float left/right і не вміщались у
  вузький (320px) дропдаун — друга кнопка падала вниз. Робимо flex-ряд з
  рівними половинами, центруванням і меншим горизонтальним padding. */
/* Трохи розширюємо сам дропдаун, щоб і рядок товару не переносився, і дві
   кнопки вмістились в один рядок без шрифтових хитрощів. (03/06/2026) */
#cart .dropdown-menu,
.btn-shopping-cart .dropdown-menu {
    min-width: 400px;
}
#cart .dropdown-menu .checkout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 8px;
    /* менший бічний padding контейнера = більше місця під кнопки */
    padding-left: 12px;
    padding-right: 12px;
}
#cart .dropdown-menu .checkout .btn-view-cart,
#cart .dropdown-menu .checkout .btn-checkout {
    float: none;
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    /* в один рядок, як було (без переносу) */
    white-space: nowrap;
}


/* ===== Phase 3.4-display HYBRID C: badges + tech props ===== */
/* Reclaim dead sidebar column: тема резервує під товаром бічну колонку
   (.content-product-content отримує col-md-9 fluid-sidebar), але жоден модуль
   у неї не виводиться -> праворуч "гуляє" порожні 25% ширини. Жодного сайдбару
   на сторінці товару немає, тож контент розтягуємо на всю ширину контейнера. */
.product-detail .content-product-content.fluid-sidebar {
    width: 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

/* Опис: 2 колонки — текст ліворуч, специфікації/допуски/властивості праворуч.
   Заповнює порожнечу, що раніше "гуляла" праворуч від тексту, і не дає допускам
   витягуватись у вертикальну "простиню" внизу. */
.p34-desc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
}
.p34-desc-main {
    flex: 1 1 0;
    min-width: 0;
}
.p34-desc-side {
    flex: 0 0 375px;
    max-width: 420px;
}
@media (max-width: 991px) {
    .p34-desc-side { flex-basis: 290px; }
}
@media (max-width: 767px) {
    .p34-desc-row { display: block; }
    .p34-desc-side { max-width: none; margin-top: 22px; }
}

/* Десктоп: опис показуємо повністю, без згортки "ПОКАЗАТИ БІЛЬШЕ".
   Згортка лишається тільки для вузьких/мобільних екранів (<768px). */
@media (min-width: 768px) {
    .p34-desc-main .desc-collapse.showdown {
        max-height: none !important;
        overflow: visible !important;
    }
    .p34-desc-main .desc-collapse.showdown:before { display: none !important; }
    .p34-desc-main .button-toggle { display: none !important; }
}

.p34-specs-block {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 18px 20px;
    margin: 0 0 24px 0;
}
.p34-specs-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1da5db;
    display: inline-block;
}
.p34-specs-section { margin-bottom: 18px; }
.p34-specs-section:last-child { margin-bottom: 0; }
.p34-specs-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 10px;
}
.p34-specs-groups {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.p34-specs-group {
    display: flex;
    align-items: baseline;
    position: relative; /* containing block for the badge tooltip (see below) */
}
.p34-specs-group-label {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    /* DV-8: was min-width:0, which let a long nowrap label (e.g. "Mercedes-Benz")
       shrink to nothing and overflow on top of the first badge. min-width:auto keeps
       the label at its text width so the first badge starts after it (no overlap);
       flex-grow stays 1 so the dotted leader still pushes the badges to the right. */
    min-width: auto;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}
/* dotted leader between label and value.
   Tech rows (single value, never wraps) use this label-leader as-is. */
.p34-specs-group-label::after {
    content: "";
    flex: 1 1 auto;
    align-self: flex-end;
    margin: 0 10px 5px 8px;
    border-bottom: 1px dotted #cdcdcd;
}
.p34-specs-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 1 auto;
}
/* DV-9: approval / standard rows can wrap their badges onto several lines. A leader living
   inside the label cannot fill the "phantom" width of the wrapping badge column, so on
   Mercedes-Benz / ZF it showed only a short stub with a gap before the badges. Instead put
   the leader at the FRONT of the badge column: it grows to meet the first badge on the top
   row, while the label keeps its natural width. (Tech rows keep the label-leader above.) */
.p34-specs-group:not(.p34-tech-row) > .p34-specs-group-label {
    flex: 0 0 auto;
}
.p34-specs-group:not(.p34-tech-row) > .p34-specs-group-label::after {
    display: none;
}
.p34-specs-group:not(.p34-tech-row) > .p34-specs-badges {
    flex: 1 1 auto;
    align-items: baseline;
}
.p34-specs-group:not(.p34-tech-row) > .p34-specs-badges::before {
    content: "";
    flex: 1 1 auto;
    min-width: 22px;
    align-self: flex-end;
    margin: 0 8px 5px 8px;
    border-bottom: 1px dotted #cdcdcd;
}
.p34-spec-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: help;
    position: static; /* tooltip anchors to .p34-specs-group (the row), not the badge */
    transition: all 0.15s;
    line-height: 1.4;
}
.p34-spec-standard {
    background: #fff;
    color: #222;
    border: 1px solid #d0d0d0;
}
.p34-spec-standard:hover {
    background: #eef6fb;
    border-color: #1da5db;
    color: #1da5db;
}
.p34-spec-oem {
    background: #eef6fb;
    color: #043559;
    border: 1px solid #cfeaf6;
}
.p34-spec-oem:hover {
    background: #1da5db;
    color: #fff;
    border-color: #1da5db;
}

/* Tooltip on hover — UNIFIED for all viewports.
   The badges hug the RIGHT edge of the row (.p34-specs-group), and the row is
   exactly the card-content width. So we anchor the tooltip to the row's right
   edge (right:0) and let it grow LEFTWARD, sized to its text but capped to the
   row width (max-width:100%). That guarantees it can never overflow the card
   or the viewport on either side — on a narrow phone or the desktop sidebar
   alike — and it always appears in the same predictable spot just above the
   hovered row's badges, with the arrow pointing down at them. */
.p34-spec-badge[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    width: max-content;
    max-width: 100%;
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    z-index: 999;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    pointer-events: none;
}
.p34-spec-badge[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 18px;
    left: auto;
    border: 6px solid transparent;
    border-top-color: #222;
    z-index: 999;
    pointer-events: none;
}

/* Типові властивості — окрема картка в стилі Специфікацій/Допусків:
   назва ліворуч, крапкова лінія-лідер, значення праворуч. */
.p34-tech-row .p34-specs-group-label {
    white-space: normal;   /* довгі назви властивостей можуть переноситися */
    font-weight: 600;
}
.p34-tech-value {
    flex: 0 1 auto;
    color: #222;
    font-weight: 700;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .p34-specs-block { padding: 14px; }
    .p34-specs-group-label { font-size: 12px; }
    /* Tooltip uses the unified right-anchored rule above (anchored to the row,
       capped to the card width) so it can't overflow the phone screen. Only the
       text size is nudged down here for the narrow viewport. */
    .p34-spec-badge[data-tooltip]:hover::after { font-size: 11px; }
}
/* ===== END Phase 3.4 hybrid C ===== */

/* ===== Phase 3.2 RESTORE: Volume picker thumbnails ===== */
.volume-thumbnails-wrap {
    margin: 20px 0;
    padding: 16px 0;
    border-bottom: 1px solid #eee;   /* роздільник перед "Кількість"; верхньої рамки НЕ повертаємо (вона перекреслювала "Лінійка") */
}
.volume-thumbnails-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    /* без text-transform, без letter-spacing — щоб співпадало з "Лінійка:", "Артикул:" */
}
.volume-thumbnails {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.volume-thumb {
    display: block;
    width: 80px;
    text-align: center;
    text-decoration: none;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px 6px;
    transition: border-color 0.15s, color 0.15s;
    /* Phase 3.2 hover fix A+B+D — keep these */
    position: relative !important;
    z-index: 2;
    pointer-events: auto !important;
    background: #fff !important;
    cursor: pointer;
}
/* Phase 3.2-abort: hover = red border + red text only, NO pastel fill */
.volume-thumb:hover {
    border-color: #1da5db !important;
    background: #fff !important;
    text-decoration: none;
}
.volume-thumb:hover .volume-thumb-label {
    color: #1da5db;
}
/* Phase 3.2-abort: active = red border + red bold text only, NO pastel fill */
.volume-thumb.active {
    border-color: #1da5db !important;
    background: #fff !important;
    position: relative !important;
    z-index: 2;
    pointer-events: auto !important;
}
.volume-thumb img {
    max-width: 100%;
    height: 50px;
    object-fit: contain;
    margin-bottom: 4px;
}
.volume-thumb-label {
    font-size: 12px;
    font-weight: 700;
    color: #222;
    display: block;
}
.volume-thumb.active .volume-thumb-label {
    color: #1da5db;
    font-weight: 700;
}
/* ===== END Phase 3.2 RESTORE ===== */

/* ===== Fix: elevateZoom service layers must never block clicks/selection =====
   Симптом: після звичайного F5 + перемикання вкладки вся смуга на рівні
   великого фото товару переставала реагувати — ні клік, ні посилання, ні
   навіть виділення тексту. Діагностика показала, що зверху лежить невидимий
   <div class="zoomLens"> від elevateZoom. При zoomType:"none" бібліотека
   створює lens БЕЗ inline-стилів (position:static, z-index:auto), і через
   таймінг lazyload (кеш швидше за перерахунок розмірів) .zoomContainer інколи
   отримує застарілі offset/розмір і перекриває колонку з інфо.
   Ці шари суто візуальні (зум на сайті вимкнено), тож робимо їх click-through.
   Браузер пропускає pointer-events:none елементи і в hit-test, і у виділенні. */
.zoomContainer,
.zoomContainer .zoomLens,
.zoomLens,
.zoomWindowContainer,
.zoomWindow,
.zoomTint {
    pointer-events: none !important;
}
/* ===== END elevateZoom click-through fix ===== */

/* ===== Phase 3.4-fix#2: hide "Переглянуто N переглядів" counter
   (so-monota theme renders this in .inner-box-viewed; no other selector matches) ===== */
.inner-box-viewed {
    display: none !important;
}
/* fallback selectors — keep in case a future theme update renames the wrapper */
.product-views,
.viewed:not(.viewed-products),
.product-info-view .viewed {
    display: none !important;
}
/* ===== END viewed hide ===== */

/* ===== Volume picker mobile 4-per-row fix#2 — keep bottle proportions ===== */
@media (max-width: 480px) {
    .volume-thumbnails {
        gap: 6px !important;
    }
    .volume-thumb {
        width: calc((100% - 18px) / 4) !important;  /* 4 thumbs, 3 gaps × 6px = 18 */
        min-width: 0 !important;
        padding: 8px 4px !important;  /* трохи менше horizontal padding, vertical як було */
    }
    /* НЕ ЗМІНЮЄМО height — пляшка має лишатись пропорційною (50px default) */
    .volume-thumb img {
        max-width: 90% !important;
    }
    .volume-thumb-label {
        font-size: 11px !important;
    }
}

/* Tablet (481-767px) — теж 4 у ряд */
@media (min-width: 481px) and (max-width: 767px) {
    .volume-thumbnails {
        gap: 8px !important;
    }
    .volume-thumb {
        width: calc((100% - 24px) / 4) !important;
        min-width: 0 !important;
    }
}
/* ===== END mobile fix ===== */

/* ===== Phase 3.2-cleanup: hide "Рекомендовані товари" tab block on product page =====
   Volume picker (вгорі в product info) вже показує siblings, тож цей блок дублює.
   Wrapper selector: <div class="content-product-bottom clearfix"> — містить tab nav + #product-related. */
.product-detail .content-product-bottom {
    display: none !important;
}
/* Defensive fallbacks: hide nested wrappers if theme generates this DOM differently elsewhere. */
#product-related,
.product-detail .related-horizontal {
    display: none !important;
}
/* ===== END hide related ===== */

/* ===== Phase 3.2-product-info polish ===== */
/* (1) Прибрати зелену вертикальну смужку, що перекреслює Лінійка/Артикул/Наявність */
.product-view .content-product-right .product-box-desc .inner-box-desc:before {
    display: none !important;
    content: none !important;
}
/* (2) Вирівняти значення фіксованою колонкою-міткою (130px) */
.product-view .content-product-right .product-box-desc .brand,
.product-view .content-product-right .product-box-desc .model,
.product-view .content-product-right .product-box-desc .stock {
    display: flex;
    align-items: baseline;
}
.product-view .content-product-right .product-box-desc .brand > span:first-child,
.product-view .content-product-right .product-box-desc .model > span:first-child,
.product-view .content-product-right .product-box-desc .stock > span:first-child {
    flex: 0 0 130px;
    min-width: 0;
    padding-right: 0;
}
/* ===== END Phase 3.2-product-info polish ===== */

/* ===== stock-row icon gap ===== */
.product-view .content-product-right .product-box-desc .stock i {
    margin-right: 5px;
}
/* ===== END stock-row icon gap ===== */


/* ===== RESTORE 2026-05-31: vehicle picker overlay + C-1f result page + PDS button (recovered from NEW_custom.css.p33; these blocks were lost when custom.css was regenerated) ===== */
/* ===== Phase C-1e v2 fix#3: custom dropdown overlay ===== */
.so_advanced_search .search-boxes {
	position: relative;
	/* CLS fix#3 (PS-5, 03/06/2026): the vehicle picker ("Підбір за автомобілем")
	   was pushing all content below it down by ~0.21 on load. Cause: the native
	   <select> is display:none from first paint (rule below), while its visible
	   replacement .cs-trigger (height:40px) is only appended by JS at DOMReady —
	   so each .search-boxes was ~0px tall until JS ran, then jumped to 40px.
	   Reserve the trigger's final height up front so the block never grows. */
	min-height: 40px;
}
.so_advanced_search .search-boxes select.form-control {
	display: none !important;
}
.so_advanced_search .search-boxes .cs-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	padding: 0 26px 0 12px;
	border: 1px solid #ddd;
	background: #fff url('/catalog/view/javascript/so_advanced_search/images/bg-selectbox.png') no-repeat right center;
	border-radius: 0;
	font-size: 14px;
	color: #555;
	cursor: pointer;
	vertical-align: middle;
	box-sizing: border-box;
	user-select: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.so_advanced_search .search-boxes .cs-trigger.is-placeholder {
	color: #999;
}
.so_advanced_search .search-boxes.cs-disabled .cs-trigger {
	background-color: #f5f5f5;
	color: #aaa;
	cursor: not-allowed;
}
.so_advanced_search .search-boxes .cs-popup {
	display: none;
	position: fixed;
	/* top/left/width set inline via JS from trigger.getBoundingClientRect */
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	max-height: 360px;
	overflow-y: auto;
	z-index: 999999;
}
.so_advanced_search .search-boxes.cs-open .cs-popup {
	display: block;
}
.so_advanced_search .cs-option {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f3f3f3;
	display: flex;
	gap: 10px;
	align-items: center;
}
.so_advanced_search .cs-option:hover {
	background: #f9f9f9;
}
.so_advanced_search .cs-option.is-selected {
	background: #eef6fb;
}
.so_advanced_search .cs-option-img {
	width: 32px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}
.so_advanced_search .cs-option-text {
	flex: 1;
	min-width: 0;
}
.so_advanced_search .cs-option-name {
	font-size: 13px;
	font-weight: 700;
	color: #000;
	line-height: 1.3;
}
.so_advanced_search .cs-option-meta {
	font-size: 11px;
	color: #888;
	line-height: 1.3;
	margin-top: 1px;
}
/* ===== END fix#3 ===== */

/* ===== Phase C-1e v2 fix#4: popup overlay escape ===== */
.so_advanced_search {
	position: relative;
	z-index: 100;
}
.so_advanced_search,
.so_advanced_search .sas_wrap,
.so_advanced_search .sas_inner,
.so_advanced_search .sas_inner-box-search,
.so_advanced_search .sas_inner-box-search .row {
	overflow: visible !important;
}
.so_advanced_search .search-boxes.cs-open {
	z-index: 99999 !important;
}
.so_advanced_search .search-boxes .cs-popup {
	z-index: 99999 !important;
}
/* ===== END fix#4 ===== */


/* (старий хак top:-3px для кнопки прибрано 2026-06-11 — у finder card
   кнопка вирівнюється лейблом-спейсером, див. WOLF FINDER CARD) */

/* ===== Phase C-1f result page ===== */
.c1f-container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.c1f-category-bar { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; margin-bottom: 12px; }
.c1f-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 16px; }
.c1f-category-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.c1f-cat-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border: 1px solid #eee; border-radius: 6px; cursor: pointer; transition: all 0.15s; text-decoration: none; color: #555; background: #fff; border-top: 3px solid transparent; }
.c1f-cat-card:hover { background: #fafafa; border-color: #ccc; text-decoration: none; }
.c1f-cat-card.active { border-top-color: #1da5db; background: #eef6fb; border-color: #bfe4f2; }
.c1f-cat-card.active .c1f-label { color: #222; font-weight: 700; }
.c1f-cat-card .c1f-label { font-size: 13px; text-align: center; line-height: 1.3; }

.c1f-mmt-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.c1f-mmt-field { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 14px 18px; }
.c1f-field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 6px; }
.c1f-mmt-select { width: 100%; border: none; background: transparent; font-size: 16px; font-weight: 700; color: #222; padding: 4px 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%231da5db' d='M2 4l4 4 4-4z'/></svg>"); background-repeat: no-repeat; background-position: right center; padding-right: 24px; }

.c1f-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.c1f-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 18px; }

.c1f-vehicle-hero { display: grid; grid-template-columns: 200px 1fr 80px; gap: 24px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; }
.c1f-photo { width: 200px; height: 140px; background: #f9f9f9; border: 1px solid #eee; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.c1f-photo img { max-width: 95%; max-height: 95%; object-fit: contain; }
.c1f-info { padding-top: 10px; }
.c1f-make-name { font-size: 13px; color: #999; margin-bottom: 6px; font-weight: 500; }
.c1f-model { font-size: 17px; font-weight: 600; color: #555; margin-bottom: 8px; }
.c1f-engine { font-size: 32px; font-weight: 700; color: #222; margin-bottom: 4px; line-height: 1.1; }
.c1f-years { font-size: 14px; color: #888; }
.c1f-logo { width: 80px; height: 80px; background: #f9f9f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 8px; }
.c1f-logo img { max-width: 100%; max-height: 100%; }

.c1f-tech-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.c1f-spec { display: flex; align-items: baseline; font-size: 14px; }
.c1f-spec .c1f-label { color: #888; flex-shrink: 0; }
.c1f-spec .c1f-dots { flex: 1; border-bottom: 1px dotted #d0d0d0; margin: 0 8px; transform: translateY(-3px); }
.c1f-spec .c1f-value { color: #222; font-weight: 600; }
.c1f-engine-code .c1f-value { background: #eef6fb; color: #1da5db; padding: 2px 8px; border-radius: 3px; font-family: monospace; font-size: 13px; }

.c1f-component-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; margin-bottom: 20px; }
.c1f-component-tab { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; cursor: pointer; min-width: 110px; max-width: 170px; border-radius: 6px; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.c1f-component-tab:hover { background: #eef6fb; }
.c1f-component-tab.active { border-bottom-color: #1da5db; background: #eef6fb; }
.c1f-component-tab.active .c1f-comp-icon { opacity: 1; }
.c1f-component-tab.active .c1f-comp-name { color: #222; font-weight: 700; }
.c1f-component-tab:hover .c1f-comp-icon { opacity: 1; }
.c1f-comp-icon { width: 34px; height: 34px; opacity: .72; transition: opacity .15s ease; }
.c1f-comp-icon svg { width: 100%; height: 100%; display: block; }
.c1f-comp-name { font-size: 12px; color: #888; text-align: center; line-height: 1.35; }

.c1f-name-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.c1f-comp-detail-name { font-size: 20px; font-weight: 700; color: #222; }
.c1f-comp-code { background: #eef6fb; color: #1da5db; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 700; font-family: monospace; }
.c1f-cap-int { display: flex; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.c1f-cap-item { font-size: 14px; }
.c1f-cap-label { color: #888; }
.c1f-cap-value { color: #222; font-weight: 700; margin-left: 8px; font-size: 16px; }

.c1f-products { display: flex; flex-direction: column; gap: 12px; }
.c1f-product { background: #fff; border: 1px solid #eee; border-left: 4px solid #1da5db; border-radius: 6px; padding: 16px; display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; }
.c1f-product:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.c1f-prod-photo { width: 80px; height: 80px; background: #fafafa; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.c1f-prod-photo img { max-width: 90%; max-height: 90%; object-fit: contain; }
.c1f-prod-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.c1f-prod-name a { color: #222; text-decoration: none; }
.c1f-prod-name a:hover { color: #1da5db; }
.c1f-ext { color: #888; margin-left: 4px; font-size: 14px; }
.c1f-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #666; background: #f5f5f5; padding: 4px 10px; border-radius: 12px; }
.c1f-btn-product { padding: 10px 20px; border-radius: 4px; font-size: 13px; font-weight: 700; text-decoration: none; background: #1da5db; color: #fff; }
.c1f-btn-product:hover { background: #043559; color: #fff; }

.c1f-no-products { color: #888; font-style: italic; padding: 20px; text-align: center; }

@media (max-width: 768px) {
  .c1f-category-cards { grid-template-columns: repeat(2, 1fr); }
  .c1f-mmt-bar { grid-template-columns: 1fr; }
  .c1f-vehicle-hero { grid-template-columns: 1fr; text-align: center; }
  .c1f-logo { margin: 0 auto; }
  .c1f-tech-specs { grid-template-columns: 1fr; }
  .c1f-product { grid-template-columns: 1fr; text-align: center; }
}
/* ===== END Phase C-1f ===== */


/* ===== Phase C-1f-polish#1: category SVG sizing ===== */
.c1f-cat-card .c1f-icon { width: 48px; height: 48px; color: #aaa; }
.c1f-cat-card .c1f-icon svg { width: 100%; height: 100%; }
.c1f-cat-card.active .c1f-icon { color: #1da5db; }
/* ===== END polish#1 ===== */


/* ===== Phase C-1f-polish#2: custom MMT dropdowns ===== */
.c1f-mmt-field {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 14px 18px;
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: border 0.15s;
}
.c1f-mmt-field:hover { border-color: #1da5db; }
.c1f-mmt-field.is-open {
	border-color: #1da5db;
	border-radius: 8px 8px 0 0;
	z-index: 1000;
}
.c1f-field-content { flex: 1; min-width: 0; overflow: hidden; }
.c1f-field-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c1f-chevron {
	color: #1da5db;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.2s;
}
.c1f-mmt-field.is-open .c1f-chevron { transform: rotate(180deg); }
.c1f-hidden-select { display: none !important; }

.c1f-popup {
	display: none;
	position: absolute;
	top: 100%;
	left: -1px; right: -1px;
	background: #fff;
	border: 1px solid #1da5db;
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	z-index: 1001;
	max-height: 400px;
	flex-direction: column;
}
.c1f-mmt-field.is-open .c1f-popup { display: flex; }
.c1f-popup-search {
	width: 100%;
	padding: 12px 16px;
	border: none;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	outline: none;
	flex-shrink: 0;
	font-family: inherit;
	box-sizing: border-box;
}
.c1f-popup-options { overflow-y: auto; flex: 1; }
.c1f-popup-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	cursor: pointer;
	border-bottom: 1px solid #f5f5f5;
}
.c1f-popup-option:hover { background: #eef6fb; }
.c1f-popup-option.is-selected {
	background: #eef6fb;
	border-left: 3px solid #1da5db;
	padding-left: 13px;
}
.c1f-opt-img { width: 36px; height: 28px; object-fit: contain; flex-shrink: 0; }
.c1f-opt-text { flex: 1; min-width: 0; }
.c1f-opt-name {
	font-size: 14px;
	font-weight: 600;
	color: #222;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.c1f-opt-meta {
	font-size: 12px;
	color: #888;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* ===== END polish#2 ===== */


/* ===== Phase C-1f-polish#3: stay on result page styling ===== */
.c1f-cat-card.active { pointer-events: none; cursor: default; }
.c1f-placeholder { color: #999; font-weight: 400; font-style: italic; }
.c1f-empty { text-align: center; padding: 60px 24px; }
.c1f-empty-title { font-size: 22px; font-weight: 700; color: #222; margin-bottom: 12px; }
.c1f-empty-text { font-size: 15px; color: #666; line-height: 1.5; max-width: 500px; margin: 0 auto; }
.c1f-empty-text b { color: #1da5db; font-weight: 700; }
/* ===== END polish#3 ===== */


/* ===== Phase 3.3-deploy: PDS button ===== */
.product-pds { margin: 16px 0 0 0; }
.btn-pds-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 20px;
	background: #fff;
	color: #00b7ff;
	border: 1px solid #00b7ff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-pds-link:hover { background: #00b7ff; color: #fff; border-color: #00b7ff; text-decoration: none; }
.c1f-btn-pds {
	display: inline-block;
	padding: 8px 14px;
	background: #fff;
	color: #1da5db;
	border: 1px solid #1da5db;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	margin-right: 6px;
}
.c1f-btn-pds:hover { background: #eef6fb; color: #043559; text-decoration: none; }
/* ===== END Phase 3.3-deploy ===== */

/* ===== SVG site logo (vector => crisp at any DPI / size). Responsive:
   - Desktop (>=992px, the horizontal-nav layout): keep the trimmed 34px height
     and nudge it 4px down / 13px right so it sits perfectly in the header band.
     position:relative shifts only the rendered image, so nothing reflows.
   - Mobile/compact (<=991px, the hamburger layout): use the bigger logo, which
     looks ideal in the narrow layout, with no offset. ===== */
.typeheader-5 .logo img,
.logo-w .logo img { width: auto; max-width: 100%; }

@media (min-width: 992px) {
	.typeheader-5 .logo img,
	.logo-w .logo img { height: 34px; position: relative; top: 4px; left: 13px; }
}
@media (max-width: 991px) {
	.typeheader-5 .logo img,
	.logo-w .logo img { height: 40px; position: static; top: auto; left: auto; }
}

/* ===== Header action icons (wishlist / compare / search): all identical
   circles like the search button, with perfectly equal spacing between them.
   Overrides the theme defaults where heart+compare were 44px rounded squares
   and search was a 36px circle. High specificity (#header) beats header5.css.

   DESKTOP ONLY (>=992px). Below that, heart+compare are hidden by the theme
   (hidden-md/sm/xs) and the search uses the theme's own native styling, which
   lives inside @media(min-width:768px). Scoping our overrides to >=992px keeps
   the mobile/compact search intact (a bare global override floated the search
   behind the absolutely-positioned cart block, hiding it). ===== */
@media (min-width: 992px) {
	#header.typeheader-5 .wishlist,
	#header.typeheader-5 .compare,
	#header.typeheader-5 .search-header-w {
		float: right;
		margin: 5px 5px 0 5px;   /* 5px each side => uniform 10px gap between circles */
		padding: 0;
	}
	/* keep a little breathing room between the search circle and the red cart block */
	#header.typeheader-5 .search-header-w { margin-right: 14px; }
	#header.typeheader-5 .top-link-wishlist,
	#header.typeheader-5 .compare,
	#header.typeheader-5 .search-header-w .ico-search {
		box-sizing: border-box;
		width: 36px;
		height: 36px;
		line-height: 32px;          /* 36 - 2*2px border */
		border: 2px solid #e5e5e5;
		border-radius: 50%;
		text-align: center;
		font-size: 14px;
		color: #282828;
		display: block;
		padding: 0;
	}
	#header.typeheader-5 .top-link-wishlist i,
	#header.typeheader-5 .compare i,
	#header.typeheader-5 .compare .top-link-compare,
	#header.typeheader-5 .search-header-w .ico-search i {
		line-height: 32px;
		color: #282828;
		margin: 0;
	}
	/* unified hover: ENEOS-red ring + icon */
	#header.typeheader-5 .top-link-wishlist:hover,
	#header.typeheader-5 .compare:hover,
	#header.typeheader-5 .search-header-w .ico-search:hover {
		border-color: #1da5db;
		cursor: pointer;
	}
	#header.typeheader-5 .top-link-wishlist:hover i,
	#header.typeheader-5 .compare:hover i,
	#header.typeheader-5 .compare:hover .top-link-compare,
	#header.typeheader-5 .search-header-w .ico-search:hover i {
		color: #1da5db;
	}
}

/* ===== Product page main image (so-monota grid gallery) =====
   1) strip the Bootstrap .thumbnail frame (1px border + 4px padding);
   2) portrait 1000:1200 box instead of the default square;
   3) object-fit:cover so the tall bottles/cans fill the portrait frame;
   4) zoom-in cursor since clicking the image now opens the lightbox.
   The wide 20L cans are the one exception: cover crops their sides badly,
   so images whose source filename contains "20L" fall back to contain. */
.product-detail #thumb-slider .gallery-grid .thumbnail {
	border: 0;
	padding: 0;
	margin: 0 0 15px;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	display: block;
	cursor: zoom-in;
}
.product-detail #thumb-slider .gallery-grid .thumbnail img {
	width: 100%;
	aspect-ratio: 1000 / 1200;
	object-fit: cover;
	cursor: zoom-in;
}
.product-detail #thumb-slider .gallery-grid .thumbnail img[data-src*="20L" i] {
	object-fit: contain;
}

/* ===== Product page title =====
   22px and the font's standard bold (700 — the heaviest Rubik weight loaded).
   Scoped to body.product-product so (a) it outranks layout5/red.css, which
   uses the same selector but loads later, and (b) it only ever touches the
   product detail page — never category cards or the quick-view modal. */
body.product-product .product-view .content-product-right .title-product h1 {
	font-size: 22px;
	font-weight: 700;
}

/* ===== Product page: quantity stepper + cart buttons on one row =====
   product.twig was restructured so .cart (В КОШИК / КУПИТИ ЗАРАЗ) is a direct
   child of .box-info-product, sitting right after .option.quantity and before
   .detail-action (wishlist / compare / "ask a question").
   Layout: .box-info-product is a wrapping flex row.
     row 1 = stepper + the two buttons, bottom-aligned (align-items:flex-end)
             so the buttons line up with the stepper, not with the "Кількість"
             label that floats above it;
     row 2 = .detail-action, forced full-width (flex-basis:100%) and itself a
             flex row, so wishlist + compare + ask-question sit inline.
   On phones the buttons drop to their own full-width row and split it 50/50,
   so КУПИТИ ЗАРАЗ never overflows the screen.
   Scoped to body.product-product (a) to outrank layout5/red.css, which uses
   the same selectors but loads later, and (b) so it only touches the product
   page — never category cards or the quick-view modal. */
body.product-product .product-view .content-product-right .box-info-product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 18px;
	row-gap: 14px;
	float: none;
	margin: 0 0 20px;
}
body.product-product .product-view .content-product-right .box-info-product .option.quantity {
	margin: 0;
}
body.product-product .product-view .content-product-right .box-info-product .cart {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	margin: 0;
	overflow: visible;
}
body.product-product .product-view .content-product-right .box-info-product .cart .btn {
	margin: 0;
}
body.product-product .product-view .content-product-right .box-info-product .detail-action {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* One gap value drives BOTH inter-item gaps (wishlist->compare via the ul
	   rule below, compare->askquestion via this flex container) so they read
	   identical instead of the askquestion gap being visibly wider. */
	gap: 14px;
	/* Drop the whole actions row 4px further below the buy buttons (user ask). */
	margin: 4px 0 0;
	/* The wishlist heart used to sit ~5px in (bootstrap .list-inline>li
	   padding-left, zeroed below). Re-apply that 5px to the WHOLE row so the
	   heart keeps its original x AND the askquestion "?" lines up under it when
	   the row wraps to a column on narrow widths. */
	padding-left: 5px;
}
/* "Є ПИТАННЯ?" alignment. The ask-question control is a separate
   <div id="so_askquestion"> that the template hard-codes with an inline
   style="margin-bottom:10px"; its siblings (the wishlist/compare links inside
   .add-to-links.wish_comp) carry no such margin. In this flex row
   (align-items:center) that lone bottom margin pushes the button ~5px above its
   neighbours, so "Є ПИТАННЯ?" drifts out of line. Inline styles outrank normal
   rules, so margin:0 alone never won — !important is required to neutralise it.
   With the margin gone all three items share the row's centre line on wide
   layouts and left-align cleanly when the row wraps to a column on narrow ones. */
body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp,
body.product-product .product-view .content-product-right .box-info-product .detail-action #so_askquestion,
body.product-product .product-view .content-product-right .box-info-product .detail-action #btn-addquestion {
	margin: 0 !important;
	padding: 0;
	/* Never let a label break mid-word ("ЗАКЛАД-/КИ"); when the row is too tight
	   the whole item should drop to the next line instead (handled below). */
	white-space: nowrap;
}
/* The wishlist + compare links live inside one <ul class="list-inline">; their
   spacing came from bootstrap's li padding (5px/side) plus inline whitespace,
   which read narrower than the 18px flex gap that separated the askquestion.
   Turn the <ul> into a flex row with the SAME 14px gap as .detail-action and
   zero the li padding, so wishlist->compare equals compare->askquestion. Zeroing
   the li padding also pulls the heart to the row's content-left edge, where the
   5px padding-left on .detail-action above restores its original position. */
body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp .list-inline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}
body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp .list-inline > li {
	margin: 0;
	padding: 0;
}
/* Tablet + desktop (>=768px): height fine-tuning so the stepper and the two
   buttons read as one balanced row at every non-phone width.
   "Кількість" stays stacked ABOVE the stepper; the buttons bottom-align with
   it (align-items:flex-end on the base rule) and are nudged down 2px so the
   extra height splits evenly (2px up + 2px down), staying centred on it.
   The same selectors match in both layout regimes: >=1200px uses red.css's
   float-based +/- stepper, while 768-1199px falls back to the plain Bootstrap
   .input-group (still a side-by-side [- 1 +]). box-sizing is border-box
   globally, so these are true outer heights. <=767px (50/50 full-width
   buttons) is left untouched below. */
@media (min-width: 768px) {
	body.product-product .product-view .content-product-right .box-info-product .option.quantity .quantity-control input.form-control {
		height: 36px;
		line-height: 36px;
	}
	body.product-product .product-view .content-product-right .box-info-product .option.quantity .quantity-control span {
		height: 36px;
		line-height: 36px;
	}
	body.product-product .product-view .content-product-right .box-info-product .cart .btn {
		height: 42px;
		line-height: 42px;
		padding-top: 0;
		padding-bottom: 0;
	}
	/* The buttons are bottom-aligned to the stepper (align-items:flex-end), so
	   the +4px of height above grows them UPWARD only. Nudge the whole .cart
	   group down 2px so the extra height splits evenly: 2px up + 2px down,
	   keeping the buttons centred on the stepper. transform doesn't reflow, so
	   the wishlist/compare row below stays put. */
	body.product-product .product-view .content-product-right .box-info-product .cart {
		transform: translateY(2px);
	}
}
@media (max-width: 767px) {
	body.product-product .product-view .content-product-right .box-info-product .cart {
		flex: 1 1 100%;
	}
	body.product-product .product-view .content-product-right .box-info-product .cart .btn {
		flex: 1;
		min-width: 0;
		max-width: none;
		width: auto;
	}
}
/* Phones (<=480px): the actions row no longer fits on one line, so stack the
   three items as clean left-aligned rows — ДОДАТИ В ЗАКЛАДКИ / ДОДАТИ ДО
   ПОРІВНЯННЯ / Є ПИТАННЯ?, one under another — instead of letting the labels
   break mid-word. Forcing column direction (rather than relying on flex-wrap)
   guarantees the stack: when the wishlist/compare pair wraps it gets narrow
   enough that askquestion could otherwise tuck in beside it. The 14px gaps and
   the row's padding-left:5 from the base rules keep the spacing even and the
   heart / arrows / "?" circles left-aligned in a single column. */
@media (max-width: 480px) {
	body.product-product .product-view .content-product-right .box-info-product .detail-action {
		flex-direction: column;
		align-items: flex-start;
	}
	body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp .list-inline {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ===== Product tabs: keep them in a row on phones (<=480px) =====
   responsive.css (inside its own @media max-width:480px) forces each tab
   li AND its link to width:100%, which stacks "Опис / Відгуків / Доставка"
   one under another. At 481-767px the same theme renders them in a single
   horizontal row (no width:100%), which is the look we want everywhere. We
   only undo the width:100% (display stays inline-block, float stays none),
   so the tabs flow left-to-right and wrap gracefully if a very narrow phone
   can't fit all three. Prefixed with body.product-product to out-specify the
   responsive.css rule, which loads after custom.css. */
@media (max-width: 480px) {
	body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li,
	body.product-product .producttab .tabsslider.horizontal-tabs .nav-tabs li a {
		width: auto;
	}
}

/* ===== Product image height cap on the stacked layout (<992px) =====
   The gallery columns are col-md-* (two columns >=992px) but col-sm-12 below
   992px, so the image goes full container width. Combined with the forced
   portrait box above (width:100% + aspect-ratio 1000/1200), that made the
   bottle absurdly tall on narrow single-column views. Here we drop the forced
   ratio and let the image scale to its natural proportions within a sensible
   height cap, centred and never cropped. Desktop (>=992px) keeps the portrait
   frame, where the constrained left column keeps the height in check. */
@media (max-width: 991px) {
	.product-detail #thumb-slider .gallery-grid .thumbnail img {
		width: auto;
		max-width: 100%;
		max-height: 60vh;
		aspect-ratio: auto;
		object-fit: contain;
		display: block;
		margin: 0 auto;
	}
}

/* ===== Homepage listing-tabs: keep the category tab as a red pill button
   on mobile / narrow desktop (<=991px) ============================
   The so_listing_tabs JS adds `.ltabs-selectbox` to `.ltabs-tabs-wrap` at
   <=991px, which turns the styled tab into a grey native-looking <select>
   (a white label box + a grey arrow box, with the real <ul> hidden in an
   absolutely-positioned dropdown). Meanwhile red.css only paints the rounded
   red pill button inside `@media (min-width: 992px)`, so below that breakpoint
   the tab loses its styling entirely. There is only ONE category here
   ("Моторні оливи"), so the dropdown serves no purpose and just looks broken.
   Below we neutralise the selectbox look and render the tab(s) as centred,
   wrapping pill buttons that match the desktop appearance. Selectors are
   prefixed with `body.common-home` + the full module chain so they out-specify
   so-listing-tabs.css, which loads AFTER custom.css. */
@media (max-width: 991px) {
	/* Hide the fake <select> trigger (label box + arrow) */
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox span.ltabs-tab-selected,
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox span.ltabs-tab-arrow {
		display: none !important;
	}
	/* Centre the wrap and pull the tab list out of the dropdown flow */
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox {
		display: block;
		text-align: center;
		line-height: normal;
	}
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox .ltabs-tabs {
		position: static;
		display: inline-block;
		width: auto;
		border: none;
		background: transparent;
		overflow: visible;
		text-align: center;
	}
	/* Each tab -> rounded pill.
	   NOTE: responsive.css carries `#content ... li.ltabs-tab > span` rules
	   (text-transform:capitalize; color:#222; padding:10px 20px; width:100%;
	   border-bottom:1px solid #ededed) inside the <=767px and 768-991px media
	   queries. Those use an ID (#content) so they out-specify our class-only
	   selectors; that is why an earlier attempt produced a smaller pill with
	   black, title-case "Моторні Оливи" text. `!important` on the affected
	   properties beats them regardless of specificity, so the pill matches the
	   >=992px desktop button EXACTLY (padding 13px 20px, uppercase, #fff on
	   #00b7ff for the active tab). */
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox .ltabs-tabs li.ltabs-tab {
		float: none;
		display: inline-block;
		margin: 0 5px 5px;
		text-align: center;
	}
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox .ltabs-tabs li.ltabs-tab > span {
		display: inline-block;
		width: auto !important;
		line-height: normal;
		font-weight: 500;
		text-transform: uppercase !important;
		font-size: 14px !important;
		color: #282828 !important;
		padding: 13px 20px !important;
		border-radius: 30px !important;
		background-color: #f5f5f5;
		border: 1px solid #ddd !important;
	}
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox .ltabs-tabs li.ltabs-tab.tab-sel > span,
	body.common-home .listingtab-layout5 .so-listing-tabs .ltabs-tabs-container .ltabs-tabs-wrap.ltabs-selectbox .ltabs-tabs li.ltabs-tab:hover > span {
		color: #fff !important;
		background-color: #00b7ff !important;
		border-color: #00b7ff !important;
	}
}

/* ============================================================
   HOMEPAGE LISTING-TABS — 6px white frame inside the photo box
   ------------------------------------------------------------
   The card has a thin grey border (red.css 5905
   .product-item-container{border:1px solid #e5e5e5}). The product
   photo sits flush against it. Adding inner white padding to the
   image container insets the photo by 6px so it floats inside a
   white frame instead of touching the grey line. box-sizing is
   border-box globally (bootstrap) and the image uses width:100%,
   so the padding shrinks the rendered photo rather than overflowing.
   Scoped to common-home + this module.
   NOTE: an earlier flex-wrap "grid layout fix" lived here too but was
   reverted at the user's request (it looked worse); the float-based
   grid is left as-is. */
body.common-home .listingtab-layout5 .so-listing-tabs .product-item-container .left-block .product-image-container {
	padding: 6px;
	background: #fff;
}

/* ============================================================
   PRODUCT LISTING PAGES — white frame inside the photo box
   ------------------------------------------------------------
   Applies to every page that uses soconfig/listing.twig: category,
   product/special, product/manufacturer/info, product/search.
   The grid view-switcher JS (listing.twig) stamps a persistent
   marker class on each .product-layout depending on how many cards
   per row the visitor picked:
       2 per row -> .product-grid-2
       3 per row -> .product-grid-3
       4 per row -> .product-grid-4
       5 per row -> .product-grid-5
   Per the request: 6px frame on the roomier 2- and 3-up grids, 4px
   on the tighter 4-up grid. Same mechanism as the homepage frame
   (padding + #fff background; box-sizing:border-box + img width:100%
   inset the photo so it floats off the card's grey border).
   No theme rule sets padding on .product-image-container here, so
   plain class selectors suffice (no !important needed). The homepage
   module uses .product-grid with NO numeric suffix, so it is not
   affected by these rules. */
.products-list .product-grid-2 .left-block .product-image-container,
.products-list .product-grid-3 .left-block .product-image-container {
	padding: 6px;
	background: #fff;
}
.products-list .product-grid-4 .left-block .product-image-container {
	padding: 4px;
	background: #fff;
}

/* ============================================================
   BLOG ARTICLE LIST (route=extension/simple_blog/article)
   ------------------------------------------------------------
   Article titles arrive verbatim from the DB and used to be lowercased
   by Twig's |capitalize filter (removed in article.twig). Render them in
   capitals to match the homepage blog's uppercase title style. red.css
   styles the same node at high specificity, so mirror its selector. */
.blog-listitem .blog-item .blog-item-inner .blog-content h4 > a {
	text-transform: uppercase;
}

/* ============================================================
   CLS — reserve image space (PageSpeed: mobile CLS was 0.79)
   ------------------------------------------------------------
   Every storefront <img> is emitted without width/height and most are
   lazy-loaded (lazysizes + tiny placeholder), so the browser reserves no
   height and the page jumps as each image arrives. Declaring an
   aspect-ratio (plus width:100%/height:auto) reserves the correct box
   from first paint; once lazysizes swaps in the real image nothing moves.
   object-fit:contain guards any non-square source from being distorted.
   Scoped to existing module wrappers — no other layout is touched. */

/* Hero slider banners: real files are 1920x720 (8:3); theme already
   sets height:auto on these, so we only add the reserved ratio. */
.sohomepage-slider .so-homeslider img,
.sohomepage-slider .item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 880;
}

/* Product card thumbnails — square 540x540. */
.product-image-container img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Category circle banners — square 200x200. */
.cat-wrap .image-cat img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* ------------------------------------------------------------
   CLS fix#2 (PS-5, 03/06/2026): the hero slider still jumped ~0.73 on mobile.
   Root cause: the theme makes the inner .so-homeslider display:inline-block, so
   before owlCarousel2 + lazysizes run it shrink-wraps the 1px placeholder GIF.
   That made the <img>'s width:100% resolve to ~0, so the aspect-ratio rule above
   reserved almost no height; once the slider initialised it snapped to full
   height and shoved every block below it down (categories / vehicle picker).
   Pin the one-slide ratio on the full-width module wrapper (it already has
   position:relative + width:100% + overflow:hidden) so the box holds the correct
   height from first paint and the stacked, not-yet-initialised slides are clipped
   — no shift in either direction. Scoped to the homepage so a right-column slider
   instance (different proportions) is never forced to 8:3. */
body.common-home .sohomepage-slider {
	aspect-ratio: 1920 / 880;
	overflow: hidden;
}

/* ------------------------------------------------------------
   CLS fix#3 (PS-5, 04/06/2026): live PSI mobile shows CLS 0.211 attributed
   ENTIRELY to box-advanced-search (the vehicle picker) — every other element
   scores 0.000. Same bug class as fix#2 above, but the shifter is the CATEGORY
   SLIDER sitting directly above the picker in the homepage (layout-5) DOM.
   .slider-cates5 .cat-wrap is an owlCarousel2 whose items (.content-box) are
   plain float:left boxes with NO pre-init height guard: before owl runs, the N
   categories wrap onto several rows (tall); on init owl collapses them into a
   single row + carousel, snapping the wrapper short and yanking the picker up.
   Hide every category except the first until owl adds .owl2-loaded to .cat-wrap
   (verified: owl.carousel.js line 429 adds the class to the very element it is
   initialised on, and default_theme3.twig puts only .content-box children in
   .cat-wrap, so :nth-child counting is exact). One floated box ≈ the height of
   one finished carousel row, so the reserved height matches the post-init height
   -> no shift. The :not(.owl2-loaded) guard switches itself off the instant the
   carousel is ready, so all categories render normally. Scoped to the homepage. */
body.common-home .cat-wrap:not(.owl2-loaded) > .content-box:nth-child(n+2) {
	display: none;
}

/* ------------------------------------------------------------
   PS-5 WebP#1 (04/06/2026): id4-bg-search.jpg (1170x336, 113 KiB) is the
   BACKGROUND of .so_advanced_search — which is the homepage LCP element. Serve a
   WebP derivative (id4-bg-search-v3.webp, 20 KiB @ q85 — an earlier q62 pass looked
   over-compressed on this detailed wheel/brake photo once the cascade fix below
   actually made the webp render, so quality was bumped back to q85 for balance;
   still -83% vs the 112 KiB jpg. Each new -vN filename bypasses the 31-day
   Cloudflare cache on the prior .webp) via image-set() with a
   plain-url JPG fallback first (for browsers without image-set) and a
   -webkit-image-set line (older Chrome/Safari). The image-set itself also carries
   the JPG as a webp-less fallback, so even if the minifier collapses the duplicate
   declarations, non-webp browsers still get the jpg. Absolute URLs so the CSS
   minifier never rewrites them. Only background-IMAGE is overridden — no-repeat /
   center / background-size:100% 100% stay from layout5/*.css.
   CASCADE FIX (04/06/2026): custom.css is NOT last in the bundle — layout5's own
   ".layout-5.common-home #content .so_advanced_search{background:url(...jpg)...}"
   comes AFTER it with identical specificity, so it was winning and the browser
   painted the JPG (wasting the webp preload). Prefixing "body" raises specificity
   to (1,3,1) > layout5's (1,3,0), so this image-set now wins regardless of order. */
/* 2026-06-11: the wheel-photo background is gone — the advisor was re-skinned
   as a white "finder card" overlapping the hero slider (official wolflubes
   style; see WOLF FINDER CARD section at the end of this file). Keeping the
   selector with background:none so the theme's layout5 jpg never resurfaces. */
body.layout-5.common-home #content .so_advanced_search {
	background: none !important;
}

/* ===== Wolf rebrand: logo sizing + compact, balanced header =====
   The Wolf SVG has only a viewBox (no width/height attrs), so pin a compact
   width (~130px; height:auto keeps the 2.13:1 ratio). header5's stock
   ".logo-w{padding:23px 0}" makes the white row taller than the absolute
   cart plate (top:-45px, fixed height) -> a thin white strip under the cart.
   Trim padding to 12px so the row matches the plate. The logo is an inline
   <img>, so its line-box adds uneven top/bottom spacing; collapse it with
   line-height/font-size:0 + vertical-align:top so symmetric padding yields
   EQUAL top and bottom gaps. */
.typeheader-5 .logo-w { padding: 12px 0 !important; }
.logo-w .logo, .logo-w .logo a { line-height: 0 !important; font-size: 0 !important; }
.logo-w .logo img,
.logo-w .logo a img { width: 130px !important; max-width: 100% !important; height: auto !important; vertical-align: top !important; }
/* Phones (xs, <768px): header5.twig makes .logo-w col-xs-12 (full width) and the
   absolute cart plate floats top-right, high above the banner — so a bigger,
   roomier logo here can't recreate the plate/banner white strip (that strip is a
   desktop/tablet concern, kept aligned at 130px/12px above). 100px looked tiny &
   cramped on phones; bump to a prominent 140px with a touch more padding. */
@media (max-width: 767px){
	.typeheader-5 .logo-w { padding: 14px 0 !important; }
	.logo-w .logo img, .logo-w .logo a img { width: 140px !important; }
}

/* ============================================================
   CLS fix#4 (Wolf, 2026-06-05): same owl-collapse + lazy-img mechanism as
   fix#2/#3 above, extended to the modules BELOW the vehicle picker.
   ------------------------------------------------------------
   #2 (hero slider) + #3 (category slider) only stabilised ABOVE the fold —
   what PageSpeed measured. Wolf's homepage is still on the theme's DEMO
   layout, so the SAME so-monota mechanism (owlCarousel2 items render as
   wrapping float-boxes before JS init, then snap to one row; lazysizes
   swaps images with no reserved box) repeats further down: the two product
   so-extraslider carousels collapse on init and the demo banner row loads
   lazily — both reflow the page as you scroll past them on narrow screens
   (jitter + scroll feels like it fights the swipe). Reserve them the same
   way. When the demo modules are replaced by the real Wolf homepage layout
   these selectors simply stop matching — harmless. */

/* a) identical guard to #3: hide carousel cards until owl adds .owl2-loaded.
      Height-agnostic + self-disabling; owl still counts display:none DOM
      children, so the carousel initialises with all items intact. */
body.common-home .so-extraslider:not(.owl2-loaded) .extraslider-inner > .item:nth-child(n+2) {
	display: none;
}

/* b) demo banner row (.banners .item img = id5-bn*.jpg, real files 640x400)
      lazy-loads with no reserved height -> pops in on scroll. */
body.common-home .banners .item img {
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
}

/* =====================================================================
   WOLF BRAND RESTYLE — Phase 1: font (Exo 2) + brand tokens  (PS 06/06/2026)
   Design tokens lifted from wolflubes.com. blue.css recolored separately
   (#1f83cf -> #1DA5DB Wolf-blue, #1867a3 -> #043559 Wolf-navy).
   Wolf font = Titillium Web (latin-only); Exo 2 = closest Cyrillic match.
   ===================================================================== */
:root{
  --wolf-navy:#043559; --wolf-blue:#1DA5DB; --wolf-blue-bright:#00B7FF;
  --wolf-teal:#01E0D2; --wolf-bg:#F1F5F6; --wolf-text:#12120D;
  --wolf-text-2:#686363; --wolf-border:#D2D8DA;
  --wolf-officialtech:#1CA897; --wolf-ecotech:#95C11F; --wolf-guardtech:#009DF4;
  --wolf-vitaltech:#585FA8; --wolf-extendtech:#EC6608; --wolf-arow:#009DF4;
}
/* Exo 2 site-wide (Wolf uses Titillium Web; Exo 2 = same technical character + Cyrillic) */
body, input, button, select, textarea, optgroup, .form-control,
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.typeheader-5, .megamenu, .megamenu > li > a, .breadcrumb,
.box .box-heading, .ltabs-tabs li, .product-info .nav-tabs > li > a,
.price, .title-product, .producttitle, .product-label, button.btn{
  font-family:'Exo 2', Arial, sans-serif !important;
}
/* Wolf large headings are LIGHT weight (Titillium 300) */
h1,.h1,h2,.h2,.page-title,.product-info .title-product h1{ font-weight:300; }

/* ===== WOLF RESTYLE — Phase 2 (06/06): top bar navy + fix thin text ===== */
/* Top strip: black -> Wolf navy; icons/links readable (white, Wolf-blue on hover) */
.header-top{ background-color:#043559 !important; background-image:none !important; }
.header-top, .header-top a, .header-top span, .header-top .telephone,
.header-top .socials a, .header-top .socials i,
.header-top .top-link > li > a, .header-top .btn-link, .header-top .dropdown-toggle{
  color:#fff !important;
}
.header-top a:hover, .header-top a:hover i,
.header-top .socials a:hover, .header-top .socials a:hover i,
.header-top .top-link > li > a:hover, .header-top .btn-link:hover{
  color:#1DA5DB !important;
}
/* language/currency dropdown panel keeps a light background -> dark text */
.header-top .dropdown-menu a{ color:#282828 !important; }
.header-top .dropdown-menu a:hover{ color:#1DA5DB !important; }

/* Exo 2 renders lighter than Rubik -> restore weight on menu + category titles */
.container-megamenu ul.megamenu > li > a,
.container-megamenu ul.megamenu > li > a strong,
.container-megamenu.vertical .vertical-wrapper ul.megamenu > li > a{ font-weight:600 !important; }
.so-categories .cat-title, .so-categories .cat-title a, .so-categories .item .cat-title{ font-weight:600 !important; }

/* ===== WOLF RESTYLE — Phase 2b (06/06): header = EXACTLY like ENEOS (verified live, in-page Claude) =====
   Two real diffs vs the ENEOS reference: (1) icon order was mirrored (theme floats all three
   right, and the DOM order in .middle-right is menu/wishlist/compare/search -> visually
   search/compare/wishlist); (2) the cart plate had a 1px strip at the bottom. Both fixed below,
   SCOPED to the desktop breakpoint (>=992px). The theme's own mobile breakpoint is max-width:991px,
   so these rules never touch tablet/mobile (proven by disabling them below 992px -> native header). */
@media (min-width: 992px){
  /* Icon order like ENEOS: wishlist -> compare -> search (magnifier sits next to the cart).
     Desktop-only (theme's own mobile menu kicks in at <=991px). */
  #header .middle-right{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
  #header .middle-right .main-menu-w{ order:0; margin-right:auto; float:none; }
  #header .middle-right .wishlist{ order:1; float:none; }
  #header .middle-right .compare{ order:2; float:none; }
  #header .middle-right .search-header-w{ order:3; float:none; }
  /* Cart plate flush to header bottom (kills the 1px strip) — DESKTOP ONLY.
     (Applying this globally ballooned the cart on narrow/mobile, so it stays scoped here.) */
  #header .shopping_cart{ bottom:0 !important; }
}
/* Search: the trigger icon becomes a clickable × when the bar is open (raised above the bar).
   No position change on .search-header-w (that collapsed the bar width) — only on the icon. */
#header.typeheader-5 .search-header-w .ico-search.active{ position: relative !important; z-index: 1100 !important; }
#header.typeheader-5 .search-header-w .ico-search.active i:before{ content: "\f00d" !important; }

/* Mobile (<=991px) header fixes — RESTORED (these worked; only the later flex-centering
   experiment broke things, that one is NOT here). */
@media (max-width: 991px){
  /* Logo left-aligned with the hamburger row (our padding:12px 0 had zeroed left padding) */
  #header.typeheader-5 .logo-w{ padding-left: 15px !important; }
  /* No ENEOS-style enlargement -> smaller logo => shorter white band */
  #header.typeheader-5 .logo-w .logo img,
  #header.typeheader-5 .logo-w .logo a img{ width: 110px !important; }
  /* Lift the hamburger (≡) + search row by 4px to trim the white band */
  #header.typeheader-5 .middle-right{ margin-top: -4px !important; }
}

/* ===== Volume picker (ported from ENEOS; Wolf-blue accent) ===== */
.volume-thumbnails-wrap { margin: 20px 0; padding: 16px 0; border-bottom: 1px solid #eee; }
.volume-thumbnails-label { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 10px; }
.volume-thumbnails { display: flex; gap: 12px; flex-wrap: wrap; }
.volume-thumb { display: block; width: 80px; text-align: center; text-decoration: none; border: 2px solid #e5e5e5; border-radius: 6px; padding: 8px 6px; transition: border-color .15s, color .15s; position: relative !important; z-index: 2; pointer-events: auto !important; background: #fff !important; cursor: pointer; }
.volume-thumb:hover { border-color: #1DA5DB !important; background: #fff !important; text-decoration: none; }
.volume-thumb:hover .volume-thumb-label { color: #1DA5DB; }
.volume-thumb.active { border-color: #1DA5DB !important; background: #fff !important; position: relative !important; z-index: 2; pointer-events: auto !important; }
.volume-thumb img { max-width: 100%; height: 50px; object-fit: contain; margin-bottom: 4px; }
.volume-thumb-label { font-size: 12px; font-weight: 700; color: #043559; display: block; }
.volume-thumb.active .volume-thumb-label { color: #1DA5DB; font-weight: 700; }
@media (max-width: 480px) {
  .volume-thumbnails { gap: 6px !important; }
  .volume-thumb { width: calc((100% - 18px) / 4) !important; min-width: 0 !important; padding: 8px 4px !important; }
  .volume-thumb img { max-width: 90% !important; }
  .volume-thumb-label { font-size: 11px !important; }
}
@media (min-width: 481px) and (max-width: 767px) {
  .volume-thumbnails { gap: 8px !important; }
  .volume-thumb { width: calc((100% - 24px) / 4) !important; min-width: 0 !important; }
}
/* ===== END Volume picker ===== */

/* ===== Product specs/approvals block (ported from ENEOS Phase 3.4; Wolf-blue) ===== */
.p34-desc-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.p34-desc-main { flex: 1 1 0; min-width: 0; }
.p34-desc-side { flex: 0 0 375px; max-width: 420px; }
@media (max-width: 991px) { .p34-desc-side { flex-basis: 290px; } }
@media (max-width: 767px) { .p34-desc-row { display: block; } .p34-desc-side { max-width: none; margin-top: 22px; } }
@media (min-width: 768px) {
  .p34-desc-main .desc-collapse.showdown { max-height: none !important; overflow: visible !important; }
  .p34-desc-main .desc-collapse.showdown:before { display: none !important; }
  .p34-desc-main .button-toggle { display: none !important; }
}
.p34-specs-block { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 18px 20px; margin: 0 0 24px 0; }
.p34-specs-title { font-size: 15px; font-weight: 700; color: #043559; margin: 0 0 14px 0; padding-bottom: 8px; border-bottom: 2px solid #1DA5DB; display: inline-block; }
.p34-specs-section { margin-bottom: 18px; }
.p34-specs-section:last-child { margin-bottom: 0; }
.p34-specs-groups { display: flex; flex-direction: column; gap: 9px; }
.p34-specs-group { display: flex; align-items: baseline; position: relative; }
.p34-specs-group-label { display: flex; align-items: baseline; flex: 1 1 auto; min-width: auto; font-size: 13px; font-weight: 600; color: #555; white-space: nowrap; }
.p34-specs-group-label::after { content: ""; flex: 1 1 auto; align-self: flex-end; margin: 0 10px 5px 8px; border-bottom: 1px dotted #cdcdcd; }
.p34-specs-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 1 auto; }
.p34-specs-group:not(.p34-tech-row) > .p34-specs-group-label { flex: 0 0 auto; }
.p34-specs-group:not(.p34-tech-row) > .p34-specs-group-label::after { display: none; }
.p34-specs-group:not(.p34-tech-row) > .p34-specs-badges { flex: 1 1 auto; align-items: baseline; }
.p34-specs-group:not(.p34-tech-row) > .p34-specs-badges::before { content: ""; flex: 1 1 auto; min-width: 22px; align-self: flex-end; margin: 0 8px 5px 8px; border-bottom: 1px dotted #cdcdcd; }
.p34-spec-badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: help; position: static; transition: all 0.15s; line-height: 1.4; }
.p34-spec-standard { background: #fff; color: #222; border: 1px solid #d0d0d0; }
.p34-spec-standard:hover { background: #eef6fb; border-color: #1DA5DB; color: #1077a8; }
.p34-spec-oem { background: #eef6fb; color: #043559; border: 1px solid #cfe6f5; }
.p34-spec-oem:hover { background: #1DA5DB; color: #fff; border-color: #1DA5DB; }
/* Approval-certificate download badges: a spec/approval badge linking to its official PDF.
   Rendered as a two-part chip — [ code | download-icon ] — with a hairline divider so the
   icon reads as a distinct action rather than being glued to the code. */
.p34-spec-cert { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; border-color: #9fd2ec; padding-right: 9px; }
.p34-spec-cert .p34-cert-ic { display: inline-flex; align-items: center; margin-left: 8px; padding-left: 8px; border-left: 1px solid currentColor; font-size: 11px; opacity: .4; transition: opacity .15s; }
.p34-spec-cert:hover { background: #1DA5DB; color: #fff; border-color: #1DA5DB; box-shadow: 0 2px 8px rgba(29,165,219,.28); }
.p34-spec-cert:hover .p34-cert-ic { opacity: .85; }
.p34-spec-cert:focus-visible { outline: 2px solid #1DA5DB; outline-offset: 2px; }
@media (max-width: 768px) { .p34-specs-block { padding: 14px; } .p34-specs-group-label { font-size: 12px; } }
.product-pds { margin: 16px 0 0 0; }
.btn-pds-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 20px; background: #fff; color: #1DA5DB; border: 1px solid #1DA5DB; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 13px; transition: background-color 0.15s ease, color 0.15s ease; }
.btn-pds-link:hover { background: #1DA5DB; color: #fff; border-color: #1DA5DB; text-decoration: none; }
/* hide "Переглянуто" counter (as ENEOS) */
.inner-box-viewed { display: none !important; }
/* elevateZoom service layers must never block clicks (as ENEOS) */
.zoomContainer, .zoomContainer .zoomLens, .zoomLens, .zoomWindowContainer, .zoomWindow, .zoomTint { pointer-events: none !important; }
/* ===== END product specs block ===== */

/* hide "Без ПДВ" tax line on product card (as ENEOS) */
.product-info .price-tax { display: none !important; }
.price-tax { display: none !important; }


/* ===== Product CTA row (ported from ENEOS; layout only) ===== */
/* ===== Product page: quantity stepper + cart buttons on one row =====
   product.twig was restructured so .cart (В КОШИК / КУПИТИ ЗАРАЗ) is a direct
   child of .box-info-product, sitting right after .option.quantity and before
   .detail-action (wishlist / compare / "ask a question").
   Layout: .box-info-product is a wrapping flex row.
     row 1 = stepper + the two buttons, bottom-aligned (align-items:flex-end)
             so the buttons line up with the stepper, not with the "Кількість"
             label that floats above it;
     row 2 = .detail-action, forced full-width (flex-basis:100%) and itself a
             flex row, so wishlist + compare + ask-question sit inline.
   On phones the buttons drop to their own full-width row and split it 50/50,
   so КУПИТИ ЗАРАЗ never overflows the screen.
   Scoped to body.product-product (a) to outrank layout5/red.css, which uses
   the same selectors but loads later, and (b) so it only touches the product
   page — never category cards or the quick-view modal. */
body.product-product .product-view .content-product-right .box-info-product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 18px;
	row-gap: 14px;
	float: none;
	margin: 0 0 20px;
}
body.product-product .product-view .content-product-right .box-info-product .option.quantity {
	margin: 0;
}
body.product-product .product-view .content-product-right .box-info-product .cart {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	margin: 0;
	overflow: visible;
}
body.product-product .product-view .content-product-right .box-info-product .cart .btn {
	margin: 0;
}
body.product-product .product-view .content-product-right .box-info-product .detail-action {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* One gap value drives BOTH inter-item gaps (wishlist->compare via the ul
	   rule below, compare->askquestion via this flex container) so they read
	   identical instead of the askquestion gap being visibly wider. */
	gap: 14px;
	/* Drop the whole actions row 4px further below the buy buttons (user ask). */
	margin: 4px 0 0;
	/* The wishlist heart used to sit ~5px in (bootstrap .list-inline>li
	   padding-left, zeroed below). Re-apply that 5px to the WHOLE row so the
	   heart keeps its original x AND the askquestion "?" lines up under it when
	   the row wraps to a column on narrow widths. */
	padding-left: 5px;
}
/* "Є ПИТАННЯ?" alignment. The ask-question control is a separate
   <div id="so_askquestion"> that the template hard-codes with an inline
   style="margin-bottom:10px"; its siblings (the wishlist/compare links inside
   .add-to-links.wish_comp) carry no such margin. In this flex row
   (align-items:center) that lone bottom margin pushes the button ~5px above its
   neighbours, so "Є ПИТАННЯ?" drifts out of line. Inline styles outrank normal
   rules, so margin:0 alone never won — !important is required to neutralise it.
   With the margin gone all three items share the row's centre line on wide
   layouts and left-align cleanly when the row wraps to a column on narrow ones. */
body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp,
body.product-product .product-view .content-product-right .box-info-product .detail-action #so_askquestion,
body.product-product .product-view .content-product-right .box-info-product .detail-action #btn-addquestion {
	margin: 0 !important;
	padding: 0;
	/* Never let a label break mid-word ("ЗАКЛАД-/КИ"); when the row is too tight
	   the whole item should drop to the next line instead (handled below). */
	white-space: nowrap;
}
/* The wishlist + compare links live inside one <ul class="list-inline">; their
   spacing came from bootstrap's li padding (5px/side) plus inline whitespace,
   which read narrower than the 18px flex gap that separated the askquestion.
   Turn the <ul> into a flex row with the SAME 14px gap as .detail-action and
   zero the li padding, so wishlist->compare equals compare->askquestion. Zeroing
   the li padding also pulls the heart to the row's content-left edge, where the
   5px padding-left on .detail-action above restores its original position. */
body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp .list-inline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}
body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp .list-inline > li {
	margin: 0;
	padding: 0;
}
/* Tablet + desktop (>=768px): height fine-tuning so the stepper and the two
   buttons read as one balanced row at every non-phone width.
   "Кількість" stays stacked ABOVE the stepper; the buttons bottom-align with
   it (align-items:flex-end on the base rule) and are nudged down 2px so the
   extra height splits evenly (2px up + 2px down), staying centred on it.
   The same selectors match in both layout regimes: >=1200px uses red.css's
   float-based +/- stepper, while 768-1199px falls back to the plain Bootstrap
   .input-group (still a side-by-side [- 1 +]). box-sizing is border-box
   globally, so these are true outer heights. <=767px (50/50 full-width
   buttons) is left untouched below. */
@media (min-width: 768px) {
	body.product-product .product-view .content-product-right .box-info-product .option.quantity .quantity-control input.form-control {
		height: 36px;
		line-height: 36px;
	}
	body.product-product .product-view .content-product-right .box-info-product .option.quantity .quantity-control span {
		height: 36px;
		line-height: 36px;
	}
	body.product-product .product-view .content-product-right .box-info-product .cart .btn {
		height: 42px;
		line-height: 42px;
		padding-top: 0;
		padding-bottom: 0;
	}
	/* The buttons are bottom-aligned to the stepper (align-items:flex-end), so
	   the +4px of height above grows them UPWARD only. Nudge the whole .cart
	   group down 2px so the extra height splits evenly: 2px up + 2px down,
	   keeping the buttons centred on the stepper. transform doesn't reflow, so
	   the wishlist/compare row below stays put. */
	body.product-product .product-view .content-product-right .box-info-product .cart {
		transform: translateY(2px);
	}
}
@media (max-width: 767px) {
	body.product-product .product-view .content-product-right .box-info-product .cart {
		flex: 1 1 100%;
	}
	body.product-product .product-view .content-product-right .box-info-product .cart .btn {
		flex: 1;
		min-width: 0;
		max-width: none;
		width: auto;
	}
}
/* Phones (<=480px): the actions row no longer fits on one line, so stack the
   three items as clean left-aligned rows — ДОДАТИ В ЗАКЛАДКИ / ДОДАТИ ДО
   ПОРІВНЯННЯ / Є ПИТАННЯ?, one under another — instead of letting the labels
   break mid-word. Forcing column direction (rather than relying on flex-wrap)
   guarantees the stack: when the wishlist/compare pair wraps it gets narrow
   enough that askquestion could otherwise tuck in beside it. The 14px gaps and
   the row's padding-left:5 from the base rules keep the spacing even and the
   heart / arrows / "?" circles left-aligned in a single column. */
@media (max-width: 480px) {
	body.product-product .product-view .content-product-right .box-info-product .detail-action {
		flex-direction: column;
		align-items: flex-start;
	}
	body.product-product .product-view .content-product-right .box-info-product .detail-action .add-to-links.wish_comp .list-inline {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Wolf: enable product-description collapse on desktop too (cut ~at Технології); expand handled by .showup */
@media (min-width: 768px) {
  .p34-desc-main .desc-collapse.showdown { max-height: 560px !important; overflow: hidden !important; position: relative; }
  .p34-desc-main .desc-collapse.showdown:before { display: block !important; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255,255,255,0), #fff); }
  .p34-desc-main .button-toggle { display: block !important; }
}

/* Wolf: colored line name in title + Замінено на / Замінює blocks (official wolflubes style) */
.title-product h1 .wolf-ln { font-weight: 700; }
.wolf-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.wolf-info-row > .inner-box-desc { flex: 1 1 auto; }
.wolf-repl-box { flex: 0 0 auto; max-width: 62%; }
.wolf-repl-of { margin: 12px 0 4px; }
.wolf-repl-label { font-size: 12px; font-weight: 700; color: #5a6470; margin-bottom: 7px; }
.wolf-repl-of .wolf-repl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #8a8f94; }
/* secondary outline button matching official wolflubes .a-btn--secondary.
   display:inline-block + width:auto !important override the theme's flex/justify on <a>
   (which was stretching the button full-width and spreading "WOLF OFFICIAL — TECH…"). */
.wolf-repl-btn { display: inline-block !important; width: auto !important; max-width: 100%; box-sizing: border-box; text-align: left !important; text-align-last: left !important; white-space: nowrap; border: 1.5px solid #1DA5DB; border-radius: 5px; padding: 9px 20px; margin: 0 6px 7px 0; background: #fff; color: #043559; font-weight: 700; font-size: 13px; line-height: 1.35; text-decoration: none; transition: background-color .15s, color .15s; }
.wolf-repl-btn:hover { background: #1DA5DB; color: #fff; text-decoration: none; }
.wolf-repl-btn:hover .wolf-ln, .wolf-repl-btn:hover .wolf-repl-name .wolf-ln { color: #fff !important; }
/* the whole name on one line as a single inline node — kills any flex/justify gap inside the button */
.wolf-repl-name { display: inline; white-space: nowrap; }
/* "Замінює" = plain coloured link (official renders REPLACES as a link, not a button) */
.wolf-repl-link { display: inline-block; color: #043559; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; margin: 0 8px 4px 0; }
.wolf-repl-link:hover { color: #1DA5DB; }
/* moved "Замінює" block — below the wishlist/compare action links */
.wolf-repl-below { margin-top: 16px; clear: both; }
.wolf-repl-link:hover .wolf-ln { filter: brightness(.9); }
@media (max-width: 767px) { .wolf-repl-box { max-width: 100%; } .wolf-info-row { gap: 10px; } }
/* Wolf: product title dark-navy (primary) instead of black, like official.
   Higher specificity than theme's `.title-product h1{color:#222}`; NO !important so the
   inline-styled .wolf-ln line-colour still wins. */
.content-product-right .title-product h1 { color: #043559; }
.content-product-right .title-product h1 .wolf-ln { font-weight: 700; }

/* defeat theme .product-box-desc span{min-width:120px} for coloured line spans (caused OFFICIAL—TECH gap) */
.product-box-desc .wolf-ln{display:inline !important;min-width:0 !important;}
.wolf-repl-row{margin-top:14px;}

/* ===== Home category strip (2026-06-11): no circles, full names up to 3 lines ===== */
.slider-cates5.so-categories .cat-wrap .content-box .image-cat {
	border: none !important;
	border-radius: 0 !important;
	width: 150px;
}
.slider-cates5.so-categories .cat-wrap .content-box .cat-title a {
	display: block;
	max-width: 170px;
	margin: 0 auto;
	line-height: 1.35;
}

/* Home category icons: tint the black sketch PNGs Wolf-blue on hover
   (filter chain measured to land on ~#1DA5DB from black). */
.slider-cates5.so-categories .cat-wrap .content-box .image-cat img {
	transition: filter .2s ease, transform .2s ease;
}
/* Hover = crossfade the original sketch into its two-tone (navy+blue) -duo version.
   Per-category duo image matched by the link's path=N ($= avoids path=1/path=10 clash). */
.slider-cates5.so-categories .cat-wrap .content-box .image-cat a {
	position: relative;
	display: block;
}
.slider-cates5.so-categories .cat-wrap .content-box .image-cat a::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .18s ease;
}
.slider-cates5.so-categories .cat-wrap .content-box:hover .image-cat a::after { opacity: 1; }
.slider-cates5.so-categories .cat-wrap .content-box:hover .image-cat img { opacity: 0; transition: opacity .18s ease; }
.slider-cates5.so-categories .image-cat a[href$="path=1"]::after,
.slider-cates5.so-categories .image-cat a[href$="/lehkovi-avtomobili"]::after,
.slider-cates5.so-categories .image-cat a[href$="/passenger-cars"]::after  { background-image: url('/image/catalog/banners/icon/auto_icon-duo.png'); }
.slider-cates5.so-categories .image-cat a[href$="path=10"]::after,
.slider-cates5.so-categories .image-cat a[href$="/vantazhnyi-ta-komertsiinyi-transport"]::after,
.slider-cates5.so-categories .image-cat a[href$="/trucks-and-buses"]::after { background-image: url('/image/catalog/banners/icon/truck_icon-duo.png'); }
.slider-cates5.so-categories .image-cat a[href$="path=20"]::after,
.slider-cates5.so-categories .image-cat a[href$="/mototsykly-ta-kvadrotsykly"]::after,
.slider-cates5.so-categories .image-cat a[href$="/motorcycle-and-atv"]::after { background-image: url('/image/catalog/banners/icon/moto_icon-duo.png'); }
.slider-cates5.so-categories .image-cat a[href$="path=26"]::after,
.slider-cates5.so-categories .image-cat a[href$="/vodnyi-transport"]::after,
.slider-cates5.so-categories .image-cat a[href$="/marine"]::after { background-image: url('/image/catalog/banners/icon/boat_icon-duo.png'); }
.slider-cates5.so-categories .image-cat a[href$="path=32"]::after,
.slider-cates5.so-categories .image-cat a[href$="/silske-hospodarstvo"]::after,
.slider-cates5.so-categories .image-cat a[href$="/agriculture"]::after { background-image: url('/image/catalog/banners/icon/agro_icon-duo.png'); }
.slider-cates5.so-categories .image-cat a[href$="path=44"]::after,
.slider-cates5.so-categories .image-cat a[href$="/pozashliakhova-tekhnika"]::after,
.slider-cates5.so-categories .image-cat a[href$="/construction-and-mining"]::after { background-image: url('/image/catalog/banners/icon/bau_icon-duo.png'); }

/* ============================================================
   WOLF FINDER CARD (2026-06-11) — advisor widget re-skinned as the
   official wolflubes.com finder: a white card with a centered title,
   uppercase field labels and one row of fields, OVERLAPPING the hero
   slider bottom. Page-builder Home 5 (module 249) row_heul cols were
   swapped (advisor now renders right after the slider; categories
   strip moved below the card); the content_top duplicate of
   so_advanced_search.319 was removed from layout 1.
   Specificity: theme rules live in layout5/blue.css as
   ".layout-5.common-home #content ..." — prefixing "body" beats them
   regardless of file order (same trick as the WebP LCP fix above). */

/* the page-builder col wrapper: kill the theme's 20px gap.
   КРИТИЧНО: generated so_page_builder/css/style_render_249.css ставить
   overflow:hidden на .col_slla І на .so-page-builder .container — обидва
   ЗРІЗАЛИ верх картки (заголовок зникав, насування на банер не було видно).
   Розкліплюємо обох. */
body.layout-5.common-home #content .box-advanced-search {
	margin-top: 0;
	overflow: visible;
}
body.layout-5.common-home #content .so-page-builder .container {
	overflow: visible;
}

/* the card itself: white, shadowed, pulled up over the slider */
body.layout-5.common-home #content .so_advanced_search {
	background-color: transparent;
	margin-top: -95px;
	margin-bottom: 30px;
	/* fix#4 already gives position:relative; raise above the slider */
	z-index: 60;
}
body.layout-5.common-home #content .so_advanced_search .sas_inner {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 15px 45px rgba(7, 25, 55, 0.11);
	padding: 42px 48px 46px;
}

/* centered title — official style (no uppercase, regular weight, navy) */
body.layout-5.common-home #content .so_advanced_search .heading-title h2 {
	font-size: 38px;
	font-weight: 300;
	text-transform: none;
	letter-spacing: 0;
	color: #043559;
	text-align: center;
	padding: 0 10px 32px;
	margin: 0;
}

body.layout-5.common-home #content .so_advanced_search .sas_inner-box-search {
	padding: 0;
}

/* uppercase field labels above the selects */
.wolf-advisor-widget .wf-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #3a4757;
	line-height: 15px;
	height: 15px;
	margin: 0 1px 8px;
	white-space: nowrap;
	overflow: hidden;
}

/* fields: trigger restyled to the official input look */
.wolf-advisor-widget .search-boxes .cs-trigger {
	height: 48px;
	border: 1px solid #c5cdd8;
	border-radius: 6px;
	font-size: 14px;
	color: #333;
}
.wolf-advisor-widget .search-boxes .cs-trigger:hover {
	border-color: #8fa1b5;
}
.wolf-advisor-widget .search-boxes .cs-trigger.is-placeholder {
	color: #98a2b0;
}
/* CLS guard: label (15+8) + trigger 46 — reserve before JS builds triggers */
body.layout-5.common-home #content .box-advanced-search .search-boxes {
	min-height: 71px;
	margin-bottom: 0;
}

/* button: aligned by the label spacer, brand blue, navy hover */
body.layout-5.common-home #content .so_advanced_search .sas_inner-box-search .search-button button {
	width: 100%;
	height: 48px;
	line-height: 48px;
	border: none;
	border-radius: 6px;
	background-color: #1da5db;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	transition: background-color .15s ease;
}
body.layout-5.common-home #content .so_advanced_search .sas_inner-box-search .search-button button:hover {
	background-color: #043559;
}

/* responsive: theme's 20% row only fits >=992px */
@media (min-width: 992px) {
	body.layout-5.common-home #content .box-advanced-search .search-boxes,
	body.layout-5.common-home #content .box-advanced-search .search-button {
		width: 20%;
		padding: 0 8px;
	}
	body.layout-5.common-home #content .so_advanced_search .sas_inner-box-search .row {
		margin: 0 -8px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	body.layout-5.common-home #content .so_advanced_search {
		margin-top: -60px;
	}
	body.layout-5.common-home #content .so_advanced_search .sas_inner {
		padding: 26px 24px 28px;
	}
	body.layout-5.common-home #content .so_advanced_search .heading-title h2 {
		font-size: 24px;
		padding-bottom: 20px;
	}
	body.layout-5.common-home #content .box-advanced-search .search-boxes {
		width: 50%;
		padding: 0 8px;
		margin-bottom: 14px;
	}
	body.layout-5.common-home #content .box-advanced-search .search-button {
		width: 100%;
		padding: 0 8px;
	}
	body.layout-5.common-home #content .so_advanced_search .sas_inner-box-search .row {
		margin: 0 -8px;
	}
	.wolf-advisor-widget .search-button .wf-label-spacer {
		display: none;
	}
}
@media (max-width: 767px) {
	body.layout-5.common-home #content .so_advanced_search {
		margin-top: -30px;
	}
	body.layout-5.common-home #content .so_advanced_search .sas_inner {
		padding: 20px 16px 22px;
	}
	body.layout-5.common-home #content .so_advanced_search .heading-title h2 {
		font-size: 20px;
		padding-bottom: 16px;
	}
	body.layout-5.common-home #content .box-advanced-search .search-boxes {
		width: 100%;
		padding: 0;
		margin-bottom: 12px;
	}
	body.layout-5.common-home #content .box-advanced-search .search-button {
		width: 100%;
		padding: 0;
	}
	body.layout-5.common-home #content .so_advanced_search .sas_inner-box-search .row {
		margin: 0;
	}
	.wolf-advisor-widget .search-button .wf-label-spacer {
		display: none;
	}
}
/* ===== END WOLF FINDER CARD ===== */

/* ============================================================
   WOLF BLOG — article body styling (2026-06-12)
   Scoped to .article-description .wolf-blog so it only affects
   ported blog articles, never the theme's other rich-text.
   Wolf palette: navy #043559, blue #1da5db, ink #21303d.
   ============================================================ */
.article-description .wolf-blog { color: #21303d; font-size: 16px; line-height: 1.72; }
.article-description .wolf-blog > *:first-child { margin-top: 0; }

/* Lead / intro paragraph */
.wolf-blog .wb-lead {
	font-size: 19px;
	line-height: 1.65;
	color: #2b3a48;
	border-left: 4px solid #1da5db;
	padding: 4px 0 4px 22px;
	margin: 0 0 34px;
}

/* Headings */
.wolf-blog h2 {
	font-size: 28px;
	font-weight: 600;
	color: #043559;
	margin: 44px 0 18px;
	padding-bottom: 12px;
	position: relative;
}
.wolf-blog h2::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 54px; height: 3px; background: #1da5db;
}
.wolf-blog h3 {
	font-size: 20px;
	font-weight: 600;
	color: #0f5c86;
	margin: 30px 0 12px;
}
.wolf-blog p { margin: 0 0 16px; }
.wolf-blog a { color: #1273a8; text-decoration: underline; }
.wolf-blog a:hover { color: #043559; }

/* Lists */
.wolf-blog ul { list-style: none; margin: 0 0 18px; padding: 0; }
.wolf-blog ul > li {
	position: relative; padding: 0 0 0 26px; margin: 0 0 10px;
}
.wolf-blog ul > li::before {
	content: ""; position: absolute; left: 4px; top: 9px;
	width: 8px; height: 8px; border-radius: 2px; background: #1da5db;
}
.wolf-blog ul ul { margin: 10px 0 0; }

/* Spec/footnote */
.wolf-blog .wb-note { font-size: 13px; color: #7c8a97; margin: 8px 0 26px; }

/* Range legend */
.wolf-blog .wb-legend {
	display: flex; flex-wrap: wrap; gap: 8px 20px;
	margin: 6px 0 30px; padding: 14px 18px;
	background: #f4f7fa; border-radius: 8px; font-size: 13px;
}
.wolf-blog .wb-legend b { display: block; width: 100%; color: #043559; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.wolf-blog .wb-legend span { display: inline-flex; align-items: center; gap: 7px; color: #44525f; }
.wolf-blog .wb-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }

/* Tables */
.wolf-blog .wb-tablewrap { margin: 0 0 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; box-shadow: 0 1px 0 #e3e9ef; }
.wolf-blog table.wb-table {
	width: 100%; border-collapse: collapse; min-width: 540px;
	font-size: 14.5px; background: #fff;
}
.wolf-blog .wb-table thead.wb-grp th {
	background: #1da5db; color: #fff; font-weight: 700;
	text-align: left; padding: 11px 14px; font-size: 12px;
	text-transform: uppercase; letter-spacing: .6px;
	border-right: 1px solid rgba(255,255,255,.22);
}
.wolf-blog .wb-table thead.wb-sub th {
	background: #eef3f7; color: #51616e; font-weight: 700;
	text-align: left; padding: 9px 14px; font-size: 11px;
	text-transform: uppercase; letter-spacing: .5px;
	border-bottom: 2px solid #d6e0e8;
}
.wolf-blog .wb-table td {
	padding: 9px 14px; border-bottom: 1px solid #edf1f4;
	vertical-align: middle;
}
.wolf-blog .wb-table td.wb-spec, .wolf-blog .wb-table td.wb-dtfr {
	font-weight: 600; color: #21303d; text-align: center;
	background: #fafcfd; border-right: 1px solid #e7eef3; white-space: nowrap;
}
.wolf-blog .wb-table td.wb-dtfr { color: #0f5c86; }
.wolf-blog .wb-table td.wb-code { color: #6a7884; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wolf-blog .wb-table td.wb-prod { color: #2b3a48; }
.wolf-blog .wb-table tr.wb-ok td.wb-prod { font-weight: 700; color: #07314e; }
.wolf-blog .wb-table tr.wb-ok { background: #f3fbf7; }
.wolf-blog .wb-table tr:hover td { background: #f7fbfd; }
.wolf-blog .wb-table tr.wb-ok:hover td { background: #ecf8f1; }
.wolf-blog .wb-prod .wb-dot { display: inline-block; vertical-align: middle; margin-right: 9px; }
.wolf-blog .wb-table td.wb-prod a { color: inherit; text-decoration: none; border-bottom: 1px dotted #b9c6d1; transition: color .12s ease; }
.wolf-blog .wb-table td.wb-prod a:hover { color: #1273a8; border-bottom-color: #1273a8; }
.wolf-blog .wb-table td.wb-code a { color: inherit; text-decoration: none; }
.wolf-blog .wb-table td.wb-code a:hover { color: #1273a8; }
/* clickable approval spec cells */
.wolf-blog .wb-table td.wb-spec a, .wolf-blog .wb-table td.wb-dtfr a { color: inherit; text-decoration: none; border-bottom: 1px dotted #9fb3c4; }
.wolf-blog .wb-table td.wb-spec a:hover, .wolf-blog .wb-table td.wb-dtfr a:hover { color: #1da5db; border-bottom-color: #1da5db; }

/* CTA box */
.wolf-blog .wb-cta {
	margin: 40px 0 10px; padding: 30px 34px; border-radius: 12px;
	background: linear-gradient(120deg, #043559, #0a4f7a);
	color: #fff; text-align: center;
}
.wolf-blog .wb-cta h3 { color: #fff; margin: 0 0 16px; font-size: 22px; font-weight: 600; }
.wolf-blog .wb-cta .wb-btn {
	display: inline-block; background: #1da5db; color: #fff;
	padding: 13px 30px; border-radius: 6px; font-weight: 600;
	text-decoration: none; transition: background .15s ease;
}
.wolf-blog .wb-cta .wb-btn:hover { background: #fff; color: #043559; }

@media (max-width: 767px) {
	.article-description .wolf-blog { font-size: 15px; }
	.wolf-blog h2 { font-size: 23px; }
	.wolf-blog h3 { font-size: 18px; }
	.wolf-blog .wb-lead { font-size: 17px; padding-left: 16px; }
	.wolf-blog .wb-cta { padding: 24px 18px; }
}

/* --- WOLF BLOG additions (2026-06-12, TBN article): expert quotes,
   info-box insert, captioned figure, product reco cards --- */
.wolf-blog .wb-quote {
	margin: 30px 0; padding: 26px 30px 22px 64px; position: relative;
	background: #f4f9fc; border-radius: 10px;
}
.wolf-blog .wb-quote::before {
	content: "\201C"; position: absolute; left: 20px; top: 6px;
	font-size: 64px; line-height: 1; color: #1da5db; font-family: Georgia, serif;
}
.wolf-blog .wb-quote p {
	margin: 0; font-size: 19px; line-height: 1.55; color: #043559; font-weight: 500;
}
.wolf-blog .wb-quote .wb-quote-author {
	display: block; margin-top: 12px; font-size: 13px; font-weight: 400; color: #7c8a97;
}
.wolf-blog .wb-infobox {
	margin: 30px 0; padding: 26px 30px; border: 1px solid #cfe4f0;
	border-top: 4px solid #1da5db; border-radius: 10px; background: #fbfdfe;
}
.wolf-blog .wb-infobox h3 { margin-top: 0; }
.wolf-blog .wb-figure { margin: 22px 0 6px; }
.wolf-blog .wb-figure img { width: 100%; height: auto; }
.wolf-blog .wb-figcap { font-size: 12.5px; color: #7c8a97; margin: 8px 0 0; }
.wolf-blog .wb-products { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0 10px; }
.wolf-blog .wb-prodcard {
	flex: 1 1 260px; border: 1px solid #dde6ed; border-radius: 10px;
	padding: 20px 22px; background: #fff; text-decoration: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wolf-blog .wb-prodcard:hover { border-color: #1da5db; box-shadow: 0 6px 18px rgba(4,21,47,.08); }
.wolf-blog .wb-prodcard b { display: block; color: #043559; font-size: 16px; margin-bottom: 6px; }
.wolf-blog .wb-prodcard span { display: block; color: #51616e; font-size: 13.5px; }
.wolf-blog .wb-prodcard em { display: inline-block; margin-top: 12px; font-style: normal; color: #1273a8; font-size: 13.5px; font-weight: 600; }
@media (max-width: 767px) {
	.wolf-blog .wb-quote { padding: 22px 18px 18px 50px; }
	.wolf-blog .wb-quote p { font-size: 17px; }
	.wolf-blog .wb-infobox { padding: 20px 16px; }
}
/* --- END WOLF BLOG additions (TBN) --- */

/* --- WOLF BLOG additions (TCO article, 2026-06-12): native bar chart --- */
.wolf-blog .wb-bars { margin: 18px 0 6px; }
.wolf-blog .wb-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wolf-blog .wb-bar-label { flex: 0 0 215px; font-size: 13.5px; line-height: 1.25; color: #44525f; text-align: right; }
.wolf-blog .wb-bar-track { flex: 1; height: 26px; background: #eef3f7; border-radius: 6px; overflow: hidden; }
.wolf-blog .wb-bar-fill { display: block; height: 100%; border-radius: 6px; background: #1da5db; }
.wolf-blog .wb-bar-val { flex: 0 0 44px; font-size: 14px; font-weight: 700; color: #043559; font-variant-numeric: tabular-nums; }
.wolf-blog .wb-bar-hl .wb-bar-fill { background: #043559; }
.wolf-blog .wb-bar-hl .wb-bar-label { color: #043559; font-weight: 600; }
@media (max-width: 767px) {
	.wolf-blog .wb-bar { flex-wrap: wrap; gap: 6px; }
	.wolf-blog .wb-bar-label { flex: 1 1 100%; text-align: left; }
	.wolf-blog .wb-bar-val { flex: 0 0 40px; }
}
/* --- END TCO additions --- */

/* --- WOLF BLOG additions (grease article, 2026-06-12 v2): clean eco columns (no boxes) --- */
.wolf-blog .wb-eco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 30px 0 16px; }
.wolf-blog .wb-eco-card { text-align: center; background: none; border: none; padding: 0; }
.wolf-blog .wb-eco-card img { width: 92px; height: 92px; object-fit: contain; margin: 0 auto 16px; display: block; }
.wolf-blog .wb-eco-card .wb-eco-txt b { display: block; color: #043559; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; line-height: 1.3; margin-bottom: 10px; }
.wolf-blog .wb-eco-card .wb-eco-txt span { display: block; color: #5a6b78; font-size: 14px; line-height: 1.55; }
.wolf-blog .wb-eco-card .wb-eco-stat { color: #1aa179; font-weight: 700; }
/* comparison: 2-column (title left, A–H list right) — matches official */
.wolf-blog .wb-cmp { display: grid; grid-template-columns: 240px 1fr; gap: 30px; margin: 4px 0 8px; align-items: start; }
.wolf-blog .wb-cmp-title { font-size: 23px; font-weight: 700; line-height: 1.25; color: #043559; }
.wolf-blog .wb-cmp-title .accent-win { color: #1aa179; }
.wolf-blog .wb-cmp-title .accent-eq { color: #5b54b8; }
.wolf-blog .wb-cmp-list { margin: 0; }
.wolf-blog .wb-cmp-list p { margin: 0 0 13px; }
.wolf-blog .wb-cmp-list p:last-child { margin-bottom: 0; }
.wolf-blog .wb-cmp-list b { color: #043559; }
.wolf-blog .wb-cmp + .wb-cmp { margin-top: 22px; }
@media (max-width: 680px) { .wolf-blog .wb-cmp { grid-template-columns: 1fr; gap: 10px; } .wolf-blog .wb-cmp-title { font-size: 20px; } }
/* performance metrics: 2-column simple checkmark list */
.wolf-blog ul.wb-perf2 { columns: 2; column-gap: 44px; margin: 10px 0 18px; padding: 0; list-style: none; }
.wolf-blog ul.wb-perf2 > li { break-inside: avoid; position: relative; padding: 5px 0 5px 26px; margin: 0; color: #44525f; }
.wolf-blog ul.wb-perf2 > li::before { content: "\2713"; position: absolute; left: 0; top: 5px; color: #1aa179; font-weight: 700; width: auto; height: auto; background: none; border-radius: 0; }
@media (max-width: 560px) { .wolf-blog ul.wb-perf2 { columns: 1; } }
@media (max-width: 767px) { .wolf-blog .wb-eco { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 460px) { .wolf-blog .wb-eco { grid-template-columns: 1fr; } }
/* --- END grease additions --- */

/* --- WOLF BLOG additions (C&M article, 2026-06-12): challenge cards + numbered steps --- */
.wolf-blog .wb-chal {
	margin: 0 0 18px; padding: 22px 26px 16px;
	background: #fff; border: 1px solid #dde6ed; border-left: 4px solid #1da5db;
	border-radius: 0 10px 10px 0;
}
.wolf-blog .wb-chal h3 { margin: 0 0 10px; }
.wolf-blog .wb-chal p { margin-bottom: 12px; }
.wolf-blog .wb-chal .wb-chal-sub { font-weight: 600; color: #043559; margin-bottom: 8px; }
.wolf-blog .wb-chal ul { margin-bottom: 6px; }
.wolf-blog .wb-chal ul > li { margin-bottom: 6px; }
.wolf-blog ol.wb-steps { list-style: none; counter-reset: wbstep; margin: 0 0 18px; padding: 0; }
.wolf-blog ol.wb-steps > li {
	counter-increment: wbstep; position: relative;
	padding: 4px 0 14px 58px; margin: 0 0 10px;
}
.wolf-blog ol.wb-steps > li::before {
	content: counter(wbstep); position: absolute; left: 0; top: 2px;
	width: 40px; height: 40px; border-radius: 50%;
	background: #1da5db; color: #fff; font-size: 19px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.wolf-blog ol.wb-steps > li > b { display: block; color: #043559; font-size: 17px; margin-bottom: 6px; }
.wolf-blog ol.wb-steps > li > p { margin: 0; }
/* --- END C&M additions --- */

/* --- WOLF BLOG additions (API SQ article, 2026-06-12): check-list + new badge --- */
.wolf-blog ul.wb-checks > li::before {
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	top: 4px; left: 0;
	background: #1aa179 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="none" stroke="white" stroke-width="2" d="M1.5 5.2l2.3 2.3 4.5-4.8"/></svg>') center no-repeat;
}
.wolf-blog ul.wb-checks > li { padding-left: 28px; }
.wolf-blog .wb-prodcard .wb-new {
	display: inline-block; background: #1aa179; color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	padding: 2px 9px; border-radius: 20px; margin-bottom: 8px;
}
.wolf-blog span.wb-prodcard { cursor: default; }
.wolf-blog span.wb-prodcard:hover { border-color: #dde6ed; box-shadow: none; }
.wolf-blog .wb-prodcard .wb-prodimg {
	display: flex; align-items: center; justify-content: center;
	height: 150px; margin: 6px 0 14px;
}
.wolf-blog .wb-prodcard .wb-prodimg img {
	max-height: 100%; max-width: 100%; object-fit: contain;
}
.wolf-blog .wb-banner {
	display: block; position: relative;
	aspect-ratio: 2000 / 800;
	background: #022359 center / cover no-repeat;
	border-radius: 10px; overflow: hidden;
	margin: 24px 0 14px; text-decoration: none !important;
}
.wolf-blog .wb-banner .wb-banner-btn {
	position: absolute; right: 9%; top: 50%; transform: translateY(-50%);
	background: #1da5db; color: #fff;
	padding: 14px 30px; border-radius: 6px;
	font-size: 15px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
	white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.wolf-blog .wb-banner:hover .wb-banner-btn { background: #fff; color: #043559; }
@media (max-width: 700px) {
	.wolf-blog .wb-banner .wb-banner-btn { padding: 8px 14px; font-size: 11px; right: 5%; letter-spacing: .3px; }
}
/* --- END API SQ additions --- */

/* --- WOLF BLOG additions (coolant article, 2026-06-13): miscibility
   matrix + inline View button --- */
.wolf-blog .wb-mixwrap { margin: 6px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wolf-blog table.wb-mix { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 520px; }
.wolf-blog table.wb-mix th {
	background: #1da5db; color: #fff; font-weight: 700; font-size: 13.5px;
	padding: 12px 10px; text-align: center; border-radius: 6px; white-space: nowrap;
}
.wolf-blog table.wb-mix th.wb-mix-corner {
	background: #eef3f7; color: #51616e; font-size: 11px;
	text-transform: uppercase; letter-spacing: .5px; text-align: left;
}
.wolf-blog table.wb-mix td { background: #f4f7fa; text-align: center; padding: 11px 10px; border-radius: 6px; }
.wolf-blog .wb-mixdot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	vertical-align: middle; box-shadow: inset 0 -2px 4px rgba(0,0,0,.14);
	color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
	font-family: Arial, "Segoe UI", sans-serif;
}
.wolf-blog .wb-mixdot.g { background: #2e9e4f; }
.wolf-blog .wb-mixdot.o { background: #ef8a17; }
.wolf-blog .wb-mixdot.r { background: #d8362f; }
/* accessibility: shape cue inside each dot (colour-blind safe) */
.wolf-blog .wb-mixdot.g::before { content: "\2713"; }
.wolf-blog .wb-mixdot.o::before { content: "\0021"; }
.wolf-blog .wb-mixdot.r::before { content: "\2715"; }
.wolf-blog .wb-mixlegend {
	display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 28px;
	padding: 15px 20px; background: #f4f7fa; border-radius: 8px; font-size: 13.5px;
}
.wolf-blog .wb-mixlegend span { display: inline-flex; align-items: center; gap: 10px; color: #44525f; }
.wolf-blog .wb-mixlegend .wb-mixdot { width: 18px; height: 18px; flex: 0 0 18px; font-size: 11px; }
/* inline View button (matches official EVO LL CTA) */
.wolf-blog a.wb-view {
	display: inline-flex; align-items: center; gap: 9px;
	background: #1aa179; color: #fff !important; text-decoration: none !important;
	padding: 12px 28px; border-radius: 6px; font-weight: 700; font-size: 14px;
	letter-spacing: .5px; text-transform: uppercase; margin: 2px 0 24px;
	transition: background-color .15s ease;
}
.wolf-blog a.wb-view::after { content: "\2192"; font-size: 17px; line-height: 1; }
.wolf-blog a.wb-view:hover { background: #043559; }
@media (max-width: 560px) {
	.wolf-blog table.wb-mix th, .wolf-blog table.wb-mix td { padding: 8px 5px; font-size: 12px; }
	.wolf-blog .wb-mixdot { width: 18px; height: 18px; }
}
/* --- END coolant additions --- */

/* --- WOLF BLOG additions (Stellantis article, 2026-06-13): vs comparison table --- */
.wolf-blog .wb-table.wb-vs { table-layout: fixed; }
.wolf-blog .wb-table.wb-vs thead.wb-grp th { text-align: center; font-size: 14px; vertical-align: middle; }
.wolf-blog .wb-table.wb-vs thead.wb-grp th:first-child { background: #073a5e; }
.wolf-blog .wb-table.wb-vs thead.wb-grp th a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); }
.wolf-blog .wb-table.wb-vs thead.wb-grp th a:hover { border-bottom-color: #fff; }
.wolf-blog .wb-table.wb-vs td { vertical-align: top; }
.wolf-blog .wb-table.wb-vs td.wb-rowlabel {
	width: 22%; font-weight: 700; color: #043559; background: #eef3f7;
	text-align: left; border-right: 1px solid #d6e0e8; white-space: normal;
}
.wolf-blog .wb-table.wb-vs ul { margin: 0; }
.wolf-blog .wb-table.wb-vs ul > li { margin: 0 0 8px; padding-left: 16px; }
.wolf-blog .wb-table.wb-vs ul > li:last-child { margin-bottom: 0; }
.wolf-blog .wb-table.wb-vs ul > li::before { top: 8px; left: 2px; width: 5px; height: 5px; }
@media (max-width: 600px) { .wolf-blog .wb-table.wb-vs td.wb-rowlabel { width: 30%; } }
/* --- END Stellantis additions --- */

/* --- WOLF BLOG additions (coolant range article, 2026-06-13):
   full-width hero + product range matrix --- */
.article--mainimage .article-image img { width: 100%; height: auto; display: block; }
.wolf-blog .wb-range { border-collapse: separate; border-spacing: 0; min-width: 1120px; width: 100%; font-size: 12.5px; background: #fff; }
.wolf-blog .wb-range thead th {
	background: #1da5db; color: #fff; vertical-align: top; padding: 10px 7px;
	text-align: center; border-right: 1px solid rgba(255,255,255,.18); font-weight: 700;
}
.wolf-blog .wb-range thead th.wb-range-corner { background: #073a5e; vertical-align: bottom; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.wolf-blog .wb-range .wb-range-prod { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none !important; }
.wolf-blog .wb-range .wb-range-prod img { height: 62px; width: auto; background: #fff; border-radius: 4px; padding: 3px; }
.wolf-blog .wb-range .wb-range-prod .nm { color: #fff; font-size: 11px; line-height: 1.22; text-transform: uppercase; font-weight: 700; }
.wolf-blog .wb-range .wb-range-prod .cd { color: #d4eefb; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; }
.wolf-blog .wb-range thead th a:hover .nm { text-decoration: underline; }
.wolf-blog .wb-range tbody th { background: #4cb7e3; color: #fff; text-align: center; font-weight: 700; padding: 8px 10px; white-space: nowrap; }
.wolf-blog .wb-range tbody td { text-align: center; padding: 8px 7px; border-bottom: 1px solid #edf1f4; border-right: 1px solid #f0f3f6; color: #2b3a48; font-variant-numeric: tabular-nums; }
.wolf-blog .wb-range tbody tr:nth-child(even) td { background: #f7fafc; }
.wolf-blog .wb-range td.wb-range-dash { color: #c3ccd4; }
.wolf-blog .wb-range td.wb-range-soon { color: #1273a8; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
/* --- END coolant range additions --- */

/* ============================================================
   LATEST BLOG widget polish (2026-06-12): full-bleed thumbs +
   2-line title clamp (title_maxlength=90 в настройках модуля 103;
   дату/readmore локалізує контролер so_latest_blog). */
.module.so-latest-blog .item .media-left .imag { display: block; overflow: hidden; }
.module.so-latest-blog .item .media-left .imag img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.module.so-latest-blog .media-heading,
.module.so-latest-blog .media-heading a {
	white-space: normal;
}
.module.so-latest-blog .media-heading a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	max-height: 2.75em;
}
/* ===== END latest blog polish ===== */

/* ============================================================
   PASSENGER CARS SOLUTIONS landing (info page, 2026-06-13)
   ============================================================ */
.wpc { color:#21303d; font-size:16px; line-height:1.7; }
.wpc *{ box-sizing:border-box; }
/* full-bleed breakout (info-page content sits in a centered container) */
.wpc-hero, .wpc-onestop-wrap, .wpc-feature { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
/* HERO */
.wpc-hero { background:#022e57 right center/cover no-repeat; min-height:480px; display:flex; align-items:center; }
.wpc-hero-inner { max-width:1180px; margin:0 auto; padding:56px 30px; width:100%; }
.wpc-hero h1 { color:#fff; font-size:44px; font-weight:800; line-height:1.08; max-width:560px; margin:0 0 18px; text-transform:uppercase; letter-spacing:.3px; }
.wpc-hero p { color:#dce8f3; font-size:19px; max-width:470px; margin:0 0 28px; line-height:1.28; }
.wpc-btn { display:inline-block; background:#1da5db; color:#fff !important; text-decoration:none !important; padding:15px 34px; border-radius:6px; font-weight:700; font-size:14px; letter-spacing:.6px; text-transform:uppercase; transition:background-color .15s ease, color .15s ease; }
.wpc-btn:hover { background:#198cba; color:#fff !important; }
/* INTRO */
.wpc-intro { max-width:880px; margin:62px auto 8px; padding:0 20px; text-align:center; }
.wpc-intro h2 { color:#043559; font-size:30px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:0 0 18px; position:relative; padding-bottom:16px; }
.wpc-intro h2::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:56px; height:3px; background:#1da5db; }
.wpc-intro p { color:#44525f; font-size:17px; }
/* 3 FEATURES */
.wpc-features { max-width:1120px; margin:46px auto 60px; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }
.wpc-feat { text-align:center; }
.wpc-feat-ic { display:flex; align-items:center; justify-content:center; height:84px; margin:0 auto 24px; }
.wpc-feat-ic img { height:auto; width:auto; max-height:82px; max-width:114px; display:block; }
.wpc-feat h4 { color:#043559; font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; line-height:1.3; margin:0 0 20px; }
.wpc-feat p { color:#5a6b78; font-size:15px; line-height:1.55; margin:0; }
/* ONE STOP — product cards */
.wpc-onestop-wrap { background:#f4f7fa; padding:62px 0; }
.wpc-onestop { max-width:1180px; margin:0 auto; padding:0 20px; }
.wpc-onestop-head { text-align:center; max-width:760px; margin:0 auto 42px; }
.wpc-onestop-head h2 { color:#043559; font-size:30px; font-weight:700; margin:0 0 14px; }
.wpc-onestop-head p { color:#44525f; font-size:17px; margin:0; }
.wpc-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.wpc-cards .wpc-card:nth-child(1), .wpc-cards .wpc-card:nth-child(2) { grid-column:span 2; }
.wpc-cards .wpc-card:nth-child(1) .wpc-card-h3, .wpc-cards .wpc-card:nth-child(2) .wpc-card-h3 { font-size:22px; }
.wpc-card { display:flex; flex-direction:column; background:#fff; border-radius:0; overflow:hidden; text-decoration:none !important; box-shadow:0 2px 10px rgba(7,25,55,.06); transition:box-shadow .18s ease, transform .18s ease; }
.wpc-card:hover { box-shadow:0 14px 32px rgba(7,25,55,.14); transform:translateY(-3px); }
.wpc-card-img { display:block; aspect-ratio:4/3; background:#022e57 center/cover no-repeat; }
.wpc-card-body { padding:22px 24px 24px; flex:1; display:flex; flex-direction:column; }
.wpc-card-h3 { display:block; color:#043559; font-size:20px; font-weight:700; line-height:1.25; margin:0 0 10px; }
.wpc-card-p { display:block; color:#5a6b78; font-size:14.5px; line-height:1.55; margin:0 0 16px; flex:1; }
.wpc-card-link { display:block; color:#1273a8; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.4px; }
.wpc-card-link::after { content:" \2192"; }
.wpc-card:hover .wpc-card-link { color:#043559; }
/* SPLIT feature sections */
.wpc-feature { background:#022e57 center/cover no-repeat; min-height:500px; display:flex; align-items:center; }
.wpc-feature-inner { max-width:1180px; margin:0 auto; padding:0 30px; width:100%; display:flex; }
.wpc-feature--right .wpc-feature-inner { justify-content:flex-end; }
.wpc-feature-box { width:48%; max-width:545px; padding:48px 52px; display:flex; flex-direction:column; }
.wpc-feature-box--navy { background:rgba(2,33,73,.93); color:#fff; }
.wpc-feature-box--white { background:#fff; box-shadow:0 18px 52px rgba(7,25,55,.20); }
.wpc-feature .wpc-label { color:#1da5db; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.6px; margin-bottom:12px; }
.wpc-feature-box--white .wpc-label { color:#1273a8; }
.wpc-feature h3 { font-size:28px; font-weight:700; text-transform:uppercase; margin:0 0 16px; line-height:1.2; }
.wpc-feature-box--navy h3 { color:#fff; }
.wpc-feature-box--white h3 { color:#043559; }
.wpc-feature p { font-size:16px; margin:0 0 26px; }
.wpc-feature-box--navy p { color:#cfe0ee; }
.wpc-feature-box--white p { color:#44525f; }
.wpc-btn-outline-light { display:inline-block; border:2px solid #fff; color:#fff !important; text-decoration:none !important; padding:12px 28px; border-radius:6px; font-weight:700; font-size:14px; letter-spacing:.5px; text-transform:uppercase; width:fit-content; transition:background-color .15s ease, color .15s ease; }
.wpc-btn-outline-light:hover { background:#fff; color:#043559 !important; }
.wpc-btn-outline { display:inline-block; border:2px solid #1da5db; color:#1273a8 !important; text-decoration:none !important; padding:12px 28px; border-radius:6px; font-weight:700; font-size:14px; letter-spacing:.5px; text-transform:uppercase; width:fit-content; transition:background-color .15s ease, color .15s ease; }
.wpc-btn-outline:hover { background:#1da5db; color:#fff !important; }
@media (max-width:900px){
  .wpc-features { grid-template-columns:1fr; gap:30px; max-width:420px; }
  .wpc-cards { grid-template-columns:repeat(2,1fr); }
  .wpc-cards .wpc-card:nth-child(1), .wpc-cards .wpc-card:nth-child(2) { grid-column:span 1; }
  .wpc-feature { min-height:0; }
  .wpc-feature-inner { padding:0; }
  .wpc-feature--right .wpc-feature-inner { justify-content:flex-start; }
  .wpc-feature-box, .wpc-feature--right .wpc-feature-box { width:100%; max-width:none; padding:42px 30px; }
  .wpc-feature-box--navy { background:rgba(2,33,73,.96); }
  .wpc-hero h1 { font-size:33px; }
}
@media (max-width:560px){
  .wpc-cards { grid-template-columns:1fr; gap:20px; }
  .wpc-hero { min-height:400px; }
  .wpc-hero-inner { padding:40px 22px; }
  .wpc-hero h1 { font-size:26px; }
  .wpc-hero p { font-size:16px; }
  .wpc-intro h2, .wpc-onestop-head h2 { font-size:24px; }
  .wpc-feature-box { padding:34px 22px; }
}
/* --- heavy-duty variant: 4-feature row + dark hero overlay (для світлих фото-hero) --- */
.wpc-features-4 { grid-template-columns:repeat(4,1fr); gap:42px; max-width:1180px; }
/* фіксований слот заголовка (3 рядки) → описи стартують на одній висоті незалежно від довжини заголовка */
.wpc-features-4 .wpc-feat h4 { min-height:72px; }
.wpc-hero--dark { position:relative; }
.wpc-hero--dark::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,30,68,.88) 0%, rgba(2,30,68,.5) 50%, rgba(2,30,68,.08) 100%); }
.wpc-hero--dark .wpc-hero-inner { position:relative; z-index:1; }
@media (max-width:900px){
  .wpc-features-4 { grid-template-columns:repeat(2,1fr); max-width:600px; gap:30px 34px; }
  .wpc-hero--dark::before { background:linear-gradient(90deg, rgba(2,30,68,.9), rgba(2,30,68,.62)); }
}
@media (max-width:560px){ .wpc-features-4 { grid-template-columns:1fr; max-width:420px; } }
/* --- off-road landing extras --- */
/* 2 segment columns (icon + heading + text + link) */
.wpc-segs { max-width:1120px; margin:50px auto 8px; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.wpc-seg { text-align:center; }
.wpc-seg img { height:92px; width:auto; margin:0 auto 18px; display:block; }
.wpc-seg h4 { color:#043559; font-size:22px; font-weight:700; line-height:1.2; margin:0 0 14px; }
.wpc-seg p { color:#5a6b78; font-size:15.5px; line-height:1.6; margin:0 auto 18px; max-width:480px; }
.wpc-seg .wpc-card-link { display:inline-block; color:#1273a8; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.4px; text-decoration:none; }
.wpc-seg .wpc-card-link::after { content:" \2192"; }
/* 6-benefit grid */
.wpc-benefits { max-width:1080px; margin:30px auto 6px; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px 44px; }
.wpc-benefit h4 { color:#043559; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; line-height:1.3; margin:0 0 9px; }
.wpc-benefit p { color:#5a6b78; font-size:14.5px; line-height:1.55; margin:0; }
/* centered text section + button (CORS) */
.wpc-textcta { max-width:820px; margin:56px auto 10px; padding:0 20px; text-align:center; }
.wpc-textcta h2 { color:#043559; font-size:28px; font-weight:700; margin:0 0 16px; }
.wpc-textcta p { color:#44525f; font-size:16.5px; line-height:1.7; margin:0 0 24px; }
.wpc-cors-banner { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); display:block; margin-top:50px; }
.wpc-cors-banner img { width:100%; display:block; }
/* full-bleed photo band */
.wpc-band { width:100vw; margin:50px 0 0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); height:430px; background:#022e57 center/cover no-repeat; }
/* benefits band: photo + overlay heading (right) + 3 white columns (2 benefits each) overlapping bottom */
.wpc-bb { width:100vw; margin:50px 0 0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.wpc-bb-photo { height:520px; background:#022e57 center/cover no-repeat; position:relative; }
.wpc-bb-head { position:absolute; right:0; top:0; width:50%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 6% 150px; text-align:center; }
.wpc-bb-head h2 { color:#fff; font-size:33px; font-weight:700; line-height:1.15; margin:0 0 16px; }
.wpc-bb-head p { color:#e8f1f8; font-size:15.5px; line-height:1.6; margin:0; }
.wpc-bb-cw { max-width:1190px; margin:-215px auto 0; padding:0 60px; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.wpc-bb-col { background:#fff; box-shadow:0 18px 30px -16px rgba(7,25,55,.30); padding:34px 32px 30px; }
.wpc-bb-item + .wpc-bb-item { margin-top:28px; }
.wpc-bb-item h4 { color:#043559; font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; line-height:1.28; margin:0 0 11px; }
.wpc-bb-item p { color:#5a6b78; font-size:14.5px; line-height:1.55; margin:0; }
/* CORS specialist: full-bleed banner = or-cors.webp as backdrop (aspect locked so full image shows, canister right), text overlaid on navy-left */
.wpc-specialist { position:relative; width:100vw; margin:54px 0 0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); aspect-ratio:2000/430; min-height:300px; background:#06264f right center/cover no-repeat; }
.wpc-specialist-inner { position:absolute; inset:0; left:0; right:0; max-width:1190px; margin:0 auto; padding:0 60px; display:flex; flex-direction:column; justify-content:center; }
.wpc-specialist-txt { width:60%; }
.wpc-specialist-txt h2 { color:#fff; font-size:28px; font-weight:700; line-height:1.2; margin:0 0 14px; }
.wpc-specialist-txt p { color:#cfe0f2; font-size:14.5px; line-height:1.6; margin:0 0 22px; max-width:600px; }
/* 3 blog article cards */
.wpc-artcards { max-width:1180px; margin:30px auto 6px; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.wpc-artcard { display:flex; flex-direction:column; background:#fff; text-decoration:none !important; box-shadow:0 2px 10px rgba(7,25,55,.06); transition:box-shadow .18s ease, transform .18s ease; }
.wpc-artcard:hover { box-shadow:0 14px 32px rgba(7,25,55,.14); transform:translateY(-3px); }
.wpc-artcard-img { display:block; aspect-ratio:16/9; background:#022e57 center/cover no-repeat; }
.wpc-artcard-body { padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
.wpc-artcard-h4 { display:block; color:#043559; font-size:16px; font-weight:700; line-height:1.32; margin:0 0 12px; flex:1; }
.wpc-artcard-link { color:#1273a8; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px; }
.wpc-artcard-link::after { content:" \2192"; }
/* feature CTA (services) */
.wpc-feat-cta { display:inline-block; margin-top:14px; color:#1273a8; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px; text-decoration:none; }
.wpc-feat-cta::after { content:" \2192"; }
/* why-choose: image + multi-paragraph */
.wpc-whychoose { max-width:1180px; margin:58px auto 20px; padding:0 20px; display:grid; grid-template-columns:0.82fr 1fr; gap:52px; align-items:center; }
.wpc-whychoose-img { aspect-ratio:3/2; background:#022e57 center/cover no-repeat; }
.wpc-whychoose-txt h2 { color:#043559; font-size:27px; font-weight:700; line-height:1.2; margin:0 0 18px; }
.wpc-whychoose-txt p { color:#44525f; font-size:15px; line-height:1.62; margin:0 0 14px; }
.wpc-whychoose-txt p:last-child { margin-bottom:0; }
@media (max-width:900px){
  .wpc-segs { grid-template-columns:1fr; gap:36px; max-width:520px; }
  .wpc-benefits { grid-template-columns:1fr 1fr; }
  .wpc-artcards { grid-template-columns:1fr; max-width:480px; }
  .wpc-whychoose { grid-template-columns:1fr; gap:28px; }
  .wpc-whychoose-img { aspect-ratio:16/9; }
  .wpc-bb-photo { height:300px; }
  .wpc-bb-head { width:100%; padding:0 22px 60px; }
  .wpc-bb-head h2 { font-size:25px; }
  .wpc-bb-cw { grid-template-columns:1fr; margin-top:-110px; padding:0 22px; gap:18px; }
  .wpc-specialist { aspect-ratio:auto; min-height:0; background-image:none !important; }
  .wpc-specialist-inner { position:relative; padding:34px 22px; }
  .wpc-specialist-txt { width:100%; }
}
@media (max-width:560px){ .wpc-benefits { grid-template-columns:1fr; } }
/* accordion (гармошка) for why-choose */
.wpc-acc { margin:8px 0 0; }
.wpc-acc details { border-bottom:1px solid #d6e0e8; }
.wpc-acc details:first-of-type { border-top:1px solid #d6e0e8; }
.wpc-acc summary { list-style:none; cursor:pointer; padding:15px 34px 15px 0; position:relative; color:#043559; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.wpc-acc summary::-webkit-details-marker { display:none; }
.wpc-acc summary::after { content:""; position:absolute; right:6px; top:calc(50% - 5px); width:8px; height:8px; border-right:2px solid #1da5db; border-bottom:2px solid #1da5db; transform:rotate(45deg); transition:transform .2s ease; }
.wpc-acc details[open] summary::after { top:calc(50% - 2px); transform:rotate(225deg); }
.wpc-acc details > p { margin:-2px 0 16px; color:#44525f; font-size:14.5px; line-height:1.6; }
/* CORS split: text + video */
.wpc-cors { width:100vw; margin:50px 0 0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:#f4f7fa; }
.wpc-cors-txt { padding:54px 5% 54px max(20px, calc(50vw - 590px)); display:flex; flex-direction:column; justify-content:center; }
.wpc-cors-txt h2 { color:#043559; font-size:32px; font-weight:700; line-height:1.15; margin:0 0 18px; }
.wpc-cors-txt p { color:#44525f; font-size:16px; line-height:1.65; margin:0 0 26px; }
.wpc-cors-txt .wpc-btn { align-self:flex-start; }
.wpc-cors-media { position:relative; min-height:400px; background:#022e57; }
.wpc-cors-media iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.wpc-cors-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block; background:#022e57; }
@media (max-width:900px){
  .wpc-cors { grid-template-columns:1fr; }
  .wpc-cors-txt { padding:40px 22px 30px; }
  .wpc-cors-media { min-height:0; aspect-ratio:16/9; }
}
/* services carousel — photo with overlaid heading + cards over image */
.wpc-svc { width:100vw; margin:54px 0 0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.wpc-svc-photo { height:540px; background:#022e57 center/cover no-repeat; position:relative; }
.wpc-svc-head { position:absolute; right:0; top:0; width:50%; height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 6% 150px; text-align:center; }
.wpc-svc-head h2 { color:#fff; font-size:34px; font-weight:700; line-height:1.15; margin:0 0 16px; }
.wpc-svc-head p { color:#e8f1f8; font-size:15.5px; line-height:1.6; margin:0; }
.wpc-svc-cw { max-width:1190px; margin:-220px auto 0; padding:0 60px; position:relative; }
.wpc-svc-track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.wpc-svc-track::-webkit-scrollbar { display:none; }
.wpc-svc-card { flex:0 0 calc((100% - 48px)/3); scroll-snap-align:start; background:#fff; box-shadow:0 18px 30px -16px rgba(7,25,55,.30); padding:32px 30px 30px; display:flex; flex-direction:column; }
.wpc-svc-top { display:flex; align-items:center; gap:18px; margin-bottom:18px; min-height:72px; }
.wpc-svc-top img { height:60px; width:auto; flex:0 0 auto; }
.wpc-svc-top .h { color:#043559; font-size:21px; font-weight:700; line-height:1.18; }
.wpc-svc-card p { color:#5a6b78; font-size:14.5px; line-height:1.55; margin:0 0 20px; flex:1; }
.wpc-svc-card a { display:inline-block; align-self:flex-start; border:2px solid #1da5db; color:#1273a8 !important; text-decoration:none !important; padding:11px 24px; font-weight:700; font-size:12.5px; letter-spacing:.4px; text-transform:uppercase; transition:background-color .15s ease, color .15s ease; }
.wpc-svc-card a:hover { background:#1da5db; color:#fff !important; }
.wpc-svc-arrow { position:absolute; top:42%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid #cdd8e2; background:#fff; cursor:pointer; z-index:3; box-shadow:0 4px 14px rgba(7,25,55,.12); }
.wpc-svc-arrow::before { content:""; position:absolute; top:50%; left:52%; width:9px; height:9px; border-right:2px solid #5a6b78; border-bottom:2px solid #5a6b78; }
.wpc-svc-prev { left:6px; } .wpc-svc-prev::before { transform:translate(-30%,-50%) rotate(135deg); }
.wpc-svc-next { right:6px; } .wpc-svc-next::before { transform:translate(-70%,-50%) rotate(-45deg); }
.wpc-svc-dots { text-align:center; margin:26px 0 0; }
.wpc-svc-dots span { display:inline-block; width:9px; height:9px; border-radius:50%; background:#cdd8e2; margin:0 5px; cursor:pointer; transition:background-color .15s ease; }
.wpc-svc-dots span.on { background:#1da5db; }
@media (max-width:900px){
  .wpc-svc-photo { height:330px; }
  .wpc-svc-head { width:100%; padding:0 22px 80px; }
  .wpc-svc-head h2 { font-size:26px; }
  .wpc-svc-cw { margin-top:-130px; padding:0 22px; }
  .wpc-svc-card { flex:0 0 82%; }
  .wpc-svc-arrow { display:none; }
}
/* ===== END passenger cars landing ===== */

/* ===== Footer background — Wolf navy mesh pattern (overrides stock typefooter-5 bg) ===== */
.footer-container.typefooter-5 { background:#0a2a52 url('/image/catalog/lp/footer-bg.webp') center center / cover no-repeat; }

/* ===== Wolf competitor-alternative finder (homepage block, replaces brand carousel) ===== */
/* kill theme's gray brands-row padding so the navy band sits flush */
.container-fluid.page-builder-ltr:has(.row-brands) { overflow:visible !important; }
.row-brands { padding:0 !important; margin:0 !important; background:#0b2c54 !important; overflow:visible !important; }
.row-brands [class*="col-"] { overflow:visible !important; }
.wolf-cfind { position:relative; z-index:100; overflow:visible; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#0b2c54; padding:58px 20px 62px; }
.wolf-cfind-inner { max-width:720px; margin:0 auto; }
/* oil-finder variant: contained (container width, like .c1f-card) + rounded corners (not full-bleed) */
.wolf-cfind.wolf-cfind--wide { width:auto; margin:0 0 20px; border-radius:8px; padding:48px 24px 52px; }
.wolf-cfind--wide .wolf-cfind-inner { max-width:800px; }
.wolf-cfind h2 { text-align:center; color:#1da5db; font-size:22px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin:0 0 26px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wolf-cfind h2::before, .wolf-cfind h2::after { content:""; width:44px; height:2px; background:#fff; display:inline-block; flex:0 0 auto; }
.wolf-cfind-label { display:block; color:#dbe6f2; font-size:15px; font-weight:400; letter-spacing:.3px; text-transform:uppercase; margin:0 0 12px; }
.wolf-cfind-box { position:relative; max-width:none; }
.wolf-cfind-box input { width:100%; box-sizing:border-box; border:0; background:#eef2f5; color:#22303a; font-family:inherit; font-size:15px !important; font-weight:400; padding:16px 20px; border-radius:4px; outline:none; height:auto; }
.wolf-cfind-box input::placeholder { color:#8a97a1; font-family:inherit; font-weight:400; font-size:15px !important; }
.wolf-cfind-drop { display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border-radius:4px; box-shadow:0 14px 36px rgba(0,0,0,.28); overflow:hidden; z-index:200; max-height:380px; overflow-y:auto; }
.wolf-cfind-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; cursor:pointer; border-bottom:1px solid #eef1f4; }
.wolf-cfind-item:last-child { border-bottom:0; }
.wolf-cfind-item:hover { background:#f2f8fc; }
.wolf-cfind-item .t { color:#0b2c54; font-size:14px; font-weight:600; }
.wolf-cfind-item .b { color:#8a97a1; font-size:11px; text-transform:uppercase; letter-spacing:.4px; flex:0 0 auto; }
.wolf-cfind-none { padding:14px 18px; color:#8a97a1; font-size:14px; }
.wolf-cfind-result { margin-top:24px; }
.wolf-cfind-card { display:flex; align-items:center; gap:22px; background:#fff; border-radius:6px; padding:18px 22px; box-shadow:0 10px 30px rgba(0,0,0,.22); }
.wolf-cfind-card img { width:84px; height:84px; object-fit:contain; flex:0 0 auto; }
.wolf-cfind-card-b { display:flex; flex-direction:column; gap:4px; }
.wolf-cfind-card-b .lbl { color:#1da5db; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.wolf-cfind-card-b .nm { color:#0b2c54; font-size:17px; font-weight:700; line-height:1.2; }
.wolf-cfind-card-b .sub { color:#8a97a1; font-size:12.5px; }
.wolf-cfind-btn { display:inline-block; align-self:flex-start; margin-top:8px; background:#1da5db; color:#fff !important; text-decoration:none !important; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:10px 22px; border-radius:4px; transition:background-color .15s ease; }
.wolf-cfind-btn:hover { background:#198cba; }
@media (max-width:600px){ .wolf-cfind h2 { font-size:17px; } .wolf-cfind h2::before,.wolf-cfind h2::after{width:18px;} .wolf-cfind-card{flex-direction:column;align-items:flex-start;} }

/* ============ Wolf FAQ page (info id7) ============ */
.wolf-faq{max-width:900px;margin:0 auto;padding:10px 0 30px}
.wolf-faq-hero{background:linear-gradient(135deg,#0a2c54 0%,#103e74 58%,#0d3460 100%);border-radius:14px;padding:48px 34px;text-align:center;color:#fff;margin-bottom:26px;position:relative;overflow:hidden}
.wolf-faq-hero::after{content:"";position:absolute;right:-50px;bottom:-50px;width:240px;height:240px;background:radial-gradient(circle,rgba(41,171,226,.28),transparent 70%);pointer-events:none}
.wolf-faq-hero::before{content:"";position:absolute;left:-60px;top:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);pointer-events:none}
.wolf-faq-kicker{display:inline-block;font-size:12px;letter-spacing:2.5px;font-weight:700;color:#7fd0f5;margin-bottom:14px}
.wolf-faq-hero h1{color:#fff;font-size:36px;line-height:1.15;margin:0 0 12px;font-weight:700}
.wolf-faq-hero p{color:#cfe0f2;font-size:17px;margin:0;position:relative}
.wolf-faq-intro{font-size:16px;line-height:1.75;color:#3a4654;margin:0 auto 26px;text-align:center;max-width:780px}
.wolf-faq-intro a{color:#1a73c2;font-weight:600}
.wolf-faq-group{font-size:21px;color:#0a2c54;font-weight:700;margin:32px 0 14px;padding-bottom:9px;border-bottom:2px solid #e3e9f0}
.wolf-faq-item{background:#fff;border:1px solid #e1e7ee;border-radius:10px;margin-bottom:12px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.wolf-faq-item[open]{border-color:#bcd3ea;box-shadow:0 6px 22px rgba(10,44,84,.09)}
.wolf-faq-item>summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-size:16.5px;font-weight:600;color:#13314f;position:relative;outline:none;user-select:none}
.wolf-faq-item>summary::-webkit-details-marker{display:none}
.wolf-faq-item>summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:300;line-height:1;color:#29abe2;transition:.2s}
.wolf-faq-item[open]>summary::after{content:"\2013";color:#0a2c54}
.wolf-faq-item>summary:hover{color:#0a2c54}
.wolf-faq-a{padding:2px 22px 20px;font-size:15.5px;line-height:1.75;color:#48535f}
.wolf-faq-a a{color:#1a73c2;font-weight:600}
.wolf-faq-cta{margin-top:38px;background:#f4f7fb;border:1px solid #e1e7ee;border-radius:12px;padding:32px 26px;text-align:center}
.wolf-faq-cta h4{font-size:21px;color:#0a2c54;margin:0 0 8px;font-weight:700}
.wolf-faq-cta p{color:#56616d;margin:0 0 18px;font-size:15.5px}
.wolf-faq-btn{display:inline-block;background:#29abe2;color:#fff;font-weight:600;padding:12px 28px;border-radius:8px;text-decoration:none;margin:4px;transition:background .2s}
.wolf-faq-btn:hover{background:#1a8fc4;color:#fff}
.wolf-faq-btn--ghost{background:transparent;color:#0a2c54;border:1px solid #b9c8d8}
.wolf-faq-btn--ghost:hover{background:#0a2c54;color:#fff;border-color:#0a2c54}
@media(max-width:600px){.wolf-faq-hero{padding:36px 20px}.wolf-faq-hero h1{font-size:27px}.wolf-faq-hero p{font-size:15px}.wolf-faq-item>summary{font-size:15px;padding:16px 46px 16px 16px}.wolf-faq-group{font-size:19px}}

/* ===== Best Sellers (so_listing_tabs) grid: рівні висоти карток =====
   ВУЗЬКИЙ скоуп: лише .ltabs-items-inner (клас є ТІЛЬКИ в so_listing_tabs; so-extraslider має
   .extraslider-inner — поза зоною дії). Картки-клітинки .ltabs-item плавають → 2-рядкові назви
   ламали float-сітку (+ «Завантажити ще»). Flex → рівні висоти; нові картки лягають чисто. */
.wap-listing-tabs .ltabs-items-inner{display:flex !important;flex-wrap:wrap}
.wap-listing-tabs .ltabs-items-inner > .ltabs-item{float:none !important;display:flex}
.wap-listing-tabs .ltabs-items-inner > .ltabs-item > .product-layout{width:100% !important}
.wap-listing-tabs .ltabs-item .right-block h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;line-height:1.25}

/* ===== Кнопка вішлиста в картках: сердечко → закладка (як у шапці, fa-bookmark-o) ===== */
.wishlist .fa-heart::before,
.wishlist .fa-heart-o::before{content:"\f097" !important;-webkit-text-stroke:0.7px currentColor}

/* ===== Регістр назв категорій ===== */
/* Заголовок категорії: зберігати регістр як у БД (укр — реченнєвий; англ — Title Case; + «for/для» з малої в описовому H1) */
.title-category{text-transform:none !important}
/* Українська: назви категорій у БД реченнєвим регістром — не робити кожне слово з великої у хлібних крихтах і боковому меню */
html[lang="uk"] ul.breadcrumb li a,
html[lang="uk"] .box-category > ul > li > a{text-transform:none !important}

/* === Technology page: split (text+media) sections, thin large headings, grey benefit band === */
.wpc-split{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:#fff; }
.wpc-split-txt{ display:flex; flex-direction:column; justify-content:center; padding:64px 6% 64px max(22px, calc(50vw - 588px)); }
.wpc-split--rev .wpc-split-txt{ padding:64px max(22px, calc(50vw - 588px)) 64px 6%; }
.wpc-split-label{ display:block; color:#1da5db; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.8px; margin-bottom:16px; }
.wpc-split-txt h2{ color:#0c2a47; font-size:42px; font-weight:300; line-height:1.04; text-transform:uppercase; letter-spacing:.4px; margin:0 0 22px; }
.wpc-split-txt p{ color:#5a6b78; font-size:16px; line-height:1.75; margin:0; }
.wpc-split-media{ position:relative; min-height:520px; background:#06264f center/cover no-repeat; overflow:hidden; }
.wpc-split-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* MultiFactor Oil Serum — centered thin intro on a grey full-width band (як оригінал) */
.wpc-tintro{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#eef3f7; padding:66px 22px 72px; text-align:center; }
.wpc-tintro h2{ color:#0c2a47; font-size:39px; font-weight:300; line-height:1.08; text-transform:uppercase; letter-spacing:.4px; margin:0 auto 20px; max-width:960px; }
.wpc-tintro p{ color:#5a6b78; font-size:16.5px; line-height:1.49; margin:0 auto; max-width:960px; }
/* benefit band (light grey-blue bg, like original) — larger icons here only */
.wpc-feat-band{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#eef3f7; }
.wpc-feat-band .wpc-features{ margin:0 auto; padding:58px 20px 62px; }
.wpc-feat-band .wpc-feat-ic{ height:118px; margin-bottom:26px; }
.wpc-feat-band .wpc-feat-ic img{ max-height:116px; max-width:158px; }
@media (max-width:900px){
  .wpc-split{ grid-template-columns:1fr; }
  .wpc-split-txt, .wpc-split--rev .wpc-split-txt{ padding:40px 24px; }
  .wpc-split-media{ min-height:0; aspect-ratio:16/10; order:2; }
  .wpc-split--rev .wpc-split-media{ order:2; }
  .wpc-split-txt h2{ font-size:27px; }
  .wpc-tintro{ padding:46px 22px 52px; }
  .wpc-tintro h2{ font-size:27px; }
}
@media (max-width:560px){ .wpc-split-txt h2{ font-size:27px; } .wpc-feat-band .wpc-features{ padding:38px 20px 42px; } }


/* === Electrum e-mobility page === */
.wpc-hero-sub{ color:#1da5db; font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:1.6px; margin:-6px 0 18px; }
.wpc-tintro--tight{ padding-bottom:34px; }
/* split sub-heading (H3) — smaller than the 52px formula heading */
.wpc-split-txt .wpc-split-h3{ color:#0c2a47; font-size:30px; font-weight:300; line-height:1.1; text-transform:uppercase; letter-spacing:.4px; margin:0 0 18px; }
.wpc-split-txt p{ line-height:1.32; }
.wpc-split-txt p + p{ margin-top:14px; }
/* infographic split — whole section WHITE; chart blends in (no card) */
.wpc-split--info{ background:#fff; }
.wpc-split-media--info{ background:transparent; }
.wpc-split-media--info img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:34px 40px; }
/* product / category card grid */
.wpc-prods{ max-width:1180px; margin:36px auto 60px; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.wpc-prods--4{ grid-template-columns:repeat(4,1fr); margin-bottom:28px; }
.wpc-prod{ display:flex; flex-direction:column; background:#fff; border:1px solid #e6ecf1; border-radius:0; text-decoration:none !important; transition:box-shadow .18s ease, transform .18s ease; }
.wpc-prod:hover{ box-shadow:0 14px 32px rgba(7,25,55,.12); transform:translateY(-3px); }
.wpc-prod-img{ display:block; aspect-ratio:1/1; background:#f4f7fa center/contain no-repeat; padding:6px 0 0; background-origin:content-box; }
.wpc-prods--4 .wpc-prod-img{ aspect-ratio:4/3; background-color:#fff; padding:7px 6px 0; background-origin:content-box; }
.wpc-prod-body{ padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
.wpc-prod-h{ display:block; color:#043559; font-size:15.5px; font-weight:700; text-transform:uppercase; line-height:1.28; margin:0 0 9px; }
.wpc-prod-d{ display:block; color:#5a6b78; font-size:14px; line-height:1.5; margin:0 0 16px; flex:1; }
.wpc-prod-link{ display:block; color:#1273a8; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px; }
.wpc-prod-link::after{ content:" \2192"; }
.wpc-prod:hover .wpc-prod-link{ color:#043559; }
.wpc-prod--cat .wpc-prod-body{ padding:18px 20px 20px; }
@media (max-width:900px){
  .wpc-hero-sub{ font-size:16px; }
  .wpc-prods{ grid-template-columns:repeat(2,1fr); }
  .wpc-prods--4{ grid-template-columns:repeat(2,1fr); }
  .wpc-split-media--info{ aspect-ratio:4/3; }
  .wpc-split-txt .wpc-split-h3{ font-size:24px; }
}
@media (max-width:560px){ .wpc-prods, .wpc-prods--4{ grid-template-columns:1fr; max-width:380px; } }


/* === About Wolf page === */
/* hero overlay — piston image is dark; keep left text crisp without over-darkening */
.wpc-hero--ab{ position:relative; background-size:cover; background-position:center; }
.wpc-hero--ab::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,21,43,.72) 0%, rgba(4,21,43,.38) 48%, rgba(4,21,43,.12) 100%); }
.wpc-hero--ab .wpc-hero-inner{ position:relative; }
.wpc-hero--ab h1{ max-width:620px; }
.wpc-twin-link{ color:#1273a8; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px; text-decoration:none !important; }
.wpc-twin-link::after{ content:" \2192"; }
.wpc-twin-link:hover{ color:#043559; }
/* light separator strip between full-bleed banners (as on wolflubes) */
.wpc-strip{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); height:72px; background:#eef3f7; }
@media (max-width:768px){ .wpc-strip{ height:40px; } }
/* banner-CTA: full-bleed bg image + floating text box (serum / WRC) */
.wpc-bcta{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); position:relative; background:#0c2a47 center/cover no-repeat; min-height:560px; display:flex; align-items:center; }
.wpc-bcta-inner{ width:100%; padding:48px 4.5vw; display:flex; }
.wpc-bcta--right .wpc-bcta-inner{ justify-content:flex-end; }
.wpc-bcta-box{ width:42%; min-width:400px; max-width:540px; padding:46px 44px; }
.wpc-bcta--narrow .wpc-bcta-box{ width:31.5%; min-width:340px; max-width:405px; }
.wpc-bcta-box .wpc-label{ margin-bottom:12px; }
.wpc-bcta-box h1, .wpc-bcta-box h3{ font-size:29px; font-weight:300; line-height:1.12; text-transform:uppercase; letter-spacing:.3px; margin:0 0 18px; }
.wpc-bcta-box h1{ font-size:38px; }
.wpc-bcta-box p{ font-size:15px; line-height:1.38; margin:0 0 26px; }
/* check-mark list (ATF splits) */
.wpc-checklist{ list-style:none; margin:4px 0 22px; padding:0; }
.wpc-checklist li{ position:relative; padding:0 0 11px 30px; color:#5a6b78; font-size:14.5px; line-height:1.4; }
.wpc-checklist li::before{ content:"\2713"; position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%; background:#1da5db; color:#fff; font-size:11px; font-weight:700; line-height:19px; text-align:center; }
/* square-bullet list */
.wpc-bullets{ list-style:none; margin:6px 0 20px; padding:0; }
.wpc-bullets li{ position:relative; padding:0 0 11px 24px; color:#5a6b78; font-size:14.5px; line-height:1.5; }
.wpc-bullets li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:#9aa6ae; }
/* solid button inside a split text column — content-width, not stretched by the flex column */
.wpc-split-txt .wpc-btn{ align-self:flex-start; margin-top:8px; }
.wpc-split-txt .wpc-twin-link{ align-self:flex-start; }
.wpc-split-txt strong{ color:#3a4a55; }
.wpc-split-txt em{ font-style:italic; }
.wpc-bcta-box--navy{ background:#043559; }
.wpc-bcta-box--navy h3{ color:#fff; }
.wpc-bcta-box--navy p{ color:#cfe0ee; }
.wpc-bcta-box--white{ background:#fff; }
.wpc-bcta-box--white h3{ color:#0c2a47; }
.wpc-bcta-box--white p{ color:#54616b; }
.wpc-bcta-btn{ display:inline-block; padding:13px 30px; border-radius:6px; font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase; text-decoration:none !important; border:2px solid; }
.wpc-bcta-box--navy .wpc-bcta-btn{ color:#fff !important; border-color:rgba(255,255,255,.7); }
.wpc-bcta-box--navy .wpc-bcta-btn:hover{ background:#fff; color:#043559 !important; }
.wpc-bcta-box--white .wpc-bcta-btn{ color:#1da5db !important; border-color:#1da5db; }
.wpc-bcta-box--white .wpc-bcta-btn:hover{ background:#1da5db; color:#fff !important; }
@media (max-width:768px){
  .wpc-bcta{ min-height:0; }
  .wpc-bcta-inner{ padding:0; }
  .wpc-bcta--right .wpc-bcta-inner{ justify-content:flex-start; }
  .wpc-bcta-box{ width:100%; min-width:0; max-width:none; padding:34px 24px; }
  .wpc-bcta-box h1, .wpc-bcta-box h3{ font-size:23px; }
  .wpc-bcta-box h1{ font-size:27px; }
}
/* stats band */
.wpc-stats{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#eef3f7; padding:8px 22px 70px; }
.wpc-stats-inner{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.wpc-stat{ text-align:center; }
.wpc-stat-n{ display:block; color:#0c2a47; font-size:64px; font-weight:300; line-height:1; margin:0 0 16px; }
.wpc-stat-l{ display:block; color:#54616b; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; line-height:1.45; }
@media (max-width:900px){
  .wpc-twin{ grid-template-columns:1fr; margin:40px auto 46px; }
  .wpc-stats-inner{ grid-template-columns:1fr 1fr; gap:34px 22px; }
  .wpc-stat-n{ font-size:40px; }
}
@media (max-width:480px){ .wpc-stats-inner{ grid-template-columns:1fr; } }
/* 3-column stats variant + market icon cards (Hybrid page) */
.wpc-stats--3 .wpc-stats-inner{ grid-template-columns:repeat(3,1fr); max-width:860px; }
@media (max-width:900px){ .wpc-stats--3 .wpc-stats-inner{ grid-template-columns:1fr; gap:30px; } }
.wpc-mcards{ max-width:1180px; margin:28px auto 54px; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.wpc-mcard{ background:#fff; border:1px solid #e6ecf1; padding:34px 30px 30px; text-align:center; }
.wpc-mcard img{ height:62px; width:auto; margin:0 auto 18px; display:block; }
.wpc-mcard h4{ color:#043559; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin:0 0 12px; line-height:1.25; }
.wpc-mcard p{ color:#5a6b78; font-size:14px; line-height:1.55; margin:0; }
@media (max-width:880px){ .wpc-mcards{ grid-template-columns:1fr; max-width:460px; } }
/* icon-column section: big circular icons, no card borders (Hybrid market & OEM blocks) */
.wpc-icolsec{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:62px 22px 66px; }
.wpc-icolsec--grey{ background:#eef3f7; }
.wpc-icolsec h2{ color:#0c2a47; font-size:39px; font-weight:300; line-height:1.1; text-transform:uppercase; letter-spacing:.4px; text-align:center; margin:0 auto 20px; max-width:1000px; }
.wpc-icolsec-intro{ color:#5a6b78; font-size:16.5px; line-height:1.49; text-align:center; margin:0 auto; max-width:960px; }
.wpc-icols{ max-width:1180px; margin:40px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.wpc-icol{ text-align:center; }
.wpc-icol img{ height:118px; width:auto; margin:0 auto 24px; display:block; }
.wpc-icol h4{ color:#043559; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; line-height:1.28; margin:0 0 14px; }
.wpc-icol p{ color:#5a6b78; font-size:14.5px; line-height:1.55; margin:0; }
@media (max-width:880px){ .wpc-icols{ grid-template-columns:1fr; max-width:460px; gap:38px; } .wpc-icolsec h2{ font-size:28px; } }
/* WOLF: STICKY (compact) header ONLY — drop the menu + wishlist/compare/search icons 10px lower.
   Scoped to header.navbar-compact (the on-scroll sticky state) and desktop widths; the
   static top header is untouched.
   NB: the search loupe is shifted on the ICON (.ico-search) ONLY — never on .search-header-w,
   because positioning that container makes the absolute #sosearchpro search bar anchor to it and
   collapse. Shifting only the icon keeps the search bar opening exactly like the non-sticky header. */
@media (min-width:992px){
  #header.navbar-compact .main-menu-w,
  #header.navbar-compact .wishlist,
  #header.navbar-compact .compare,
  #header.navbar-compact .search-header-w .ico-search{ position:relative; top:10px; }
}
/* WOLF: typeheader-5 header search — fix the OPEN bar at 768-991px (tablet) ONLY.
   Real root cause: header5.css sets `.typeheader-5 #sosearchpro{ position:absolute; top:23px; right:53px }`
   with NO media query, anchored to .header-middle>.container. At >=992 the wide container places it
   exactly at the loupe (perfect). At 768-991 our custom menu makes .middle-right flex/align-items:center,
   so the loupe moves but the bar stays pinned 23px from the container top -> it lands ~30px below the loupe.
   Fix: make the loupe wrapper the containing block and re-anchor the (already absolute) panel to it —
   vertically centred on the loupe row and opening LEFTWARD, with an explicit width (defeats the 60% collapse). */
@media (min-width: 768px) and (max-width: 991px){
  #header.typeheader-5 .search-header-w{ position: relative; }
  #header.typeheader-5 .search-header-w #sosearchpro{
    position: absolute;
    top: 50%; bottom: auto;
    right: 100%; left: auto;
    transform: translateY(-50%);
    margin: 0 8px 0 0;
    padding: 0;
    width: 300px;
    max-width: calc(100vw - 150px);
    z-index: 1090;
  }
}
/* === About-store page (mobil-1.net "Про нас"): advantage cards, official notice band, CTA band === */
.wpc-advs{ max-width:1180px; margin:6px auto 56px; padding:0 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.wpc-adv{ background:#fff; border:1px solid #e6ecf1; padding:30px 26px 28px; }
.wpc-adv-n{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#1da5db; color:#fff; font-size:17px; font-weight:700; margin-bottom:16px; }
.wpc-adv h4{ color:#043559; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; line-height:1.25; margin:0 0 10px; }
.wpc-adv p{ color:#5a6b78; font-size:14px; line-height:1.55; margin:0; }
@media (max-width:980px){ .wpc-advs{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .wpc-advs{ grid-template-columns:1fr; max-width:420px; } }
.wpc-notice{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#eef3f7; border-top:3px solid #1da5db; padding:58px 22px 60px; }
.wpc-notice-in{ max-width:920px; margin:0 auto; }
.wpc-notice h2{ color:#0c2a47; font-size:32px; font-weight:300; line-height:1.12; text-transform:uppercase; letter-spacing:.4px; margin:0 0 22px; }
.wpc-notice p{ color:#42525e; font-size:15.5px; line-height:1.68; margin:0 0 16px; }
.wpc-notice a{ color:#1273a8; text-decoration:underline; }
.wpc-notice-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
.wpc-notice-btn{ display:inline-block; padding:12px 26px; border:2px solid #1da5db; border-radius:6px; color:#1273a8 !important; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px; text-decoration:none !important; }
.wpc-notice-btn:hover{ background:#1da5db; color:#fff !important; }
.wpc-cta{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#043559; padding:60px 22px 64px; text-align:center; }
.wpc-cta-in{ max-width:760px; margin:0 auto; }
.wpc-cta h2{ color:#fff; font-size:30px; font-weight:300; line-height:1.15; text-transform:uppercase; letter-spacing:.4px; margin:0 0 14px; }
.wpc-cta p{ color:#cfe0ee; font-size:16px; line-height:1.6; margin:0 0 26px; }
@media (max-width:767px){ .wpc-notice h2, .wpc-cta h2{ font-size:25px; } }


/* wolf-cat-desc-toolbar : SEO category description (collapsed) + narrow-only (<992px) toolbar */
.cat-seo-desc{clear:both;margin:35px 0 5px;padding-top:22px;border-top:1px solid #e6e8eb}
.cat-seo-desc__body{position:relative;font-size:14px;line-height:1.72;color:#54585c}
.cat-seo-desc__body h2,.cat-seo-desc__body h3{color:#1a1a1a;font-weight:700;line-height:1.3}
.cat-seo-desc__body h2{font-size:20px;margin:0 0 12px}
.cat-seo-desc__body h3{font-size:16px;margin:20px 0 8px}
.cat-seo-desc__body p{margin:0 0 12px}
.cat-seo-desc__body ul{margin:0 0 12px 18px;padding:0}
.cat-seo-desc__body li{margin:0 0 6px}
.cat-seo-desc__body a{color:#0a4a8f}
.cat-seo-desc.is-collapsible:not(.is-open) .cat-seo-desc__body{max-height:150px;overflow:hidden}
.cat-seo-desc.is-collapsible:not(.is-open) .cat-seo-desc__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58px;background:linear-gradient(rgba(255,255,255,0),#ffffff)}
.cat-seo-desc__toggle{display:none;margin-top:14px;background:none;border:0;color:#0a4a8f;font-weight:600;font-size:14px;cursor:pointer;padding:4px 0}
.cat-seo-desc.is-collapsible .cat-seo-desc__toggle{display:inline-block}
.cat-seo-desc__toggle::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);vertical-align:middle}
.cat-seo-desc.is-open .cat-seo-desc__toggle::after{transform:translateY(1px) rotate(-135deg)}

/* ============================================================================
   CATEGORY TOOLBAR — applies ONLY below 992px. Desktop (>=992px) untouched.
   One row (nowrap): view-mode left, Sort/Show pushed right. Brand cyan #1da5db.
   ============================================================================ */
@media (max-width:991px){
  .product-filter-top{margin-top:14px}
  .product-filter-top > .row{display:flex !important;align-items:center !important;flex-wrap:nowrap !important;column-gap:8px !important;margin:0 !important}
  .product-filter-top .view-mode,
  .product-filter-top .short-by-show{float:none !important;width:auto !important;max-width:none !important;padding:0 !important;margin:0 !important;display:flex !important;align-items:center !important}
  .product-filter-top .view-mode{gap:8px;flex:0 0 auto}
  .product-filter-top .short-by-show{gap:10px;flex:0 1 auto;min-width:0;margin-left:auto !important;text-align:left !important}

  .product-filter-top .short-by-show .form-group{display:inline-flex !important;align-items:center;margin:0 !important}
  .product-filter-top .short-by-show .form-group.product-compare{display:none !important}
  .product-filter-top .short-by-show .control-label{float:none !important;margin:0 6px 0 0 !important;font-weight:600;color:#44525f;white-space:nowrap}
  .product-filter-top .short-by-show .form-control{width:auto !important;min-width:60px;max-width:160px;height:36px !important;border-radius:8px !important}

  .product-filter-top #grid-view-2,.product-filter-top #grid-view-3,.product-filter-top #grid-view-4,.product-filter-top #grid-view-5{display:none !important}
  .product-filter-top #grid-view{display:inline-flex !important}
  .product-filter-top .list-view{display:flex !important;align-items:center;gap:6px}
  .product-filter-top .list-view .btn-gridview{display:none !important}
  .product-filter-top .list-view button.btn{float:none !important;margin:0 !important;width:36px !important;height:36px !important;line-height:1 !important;padding:0 !important;background:#fff !important;border:1px solid #dfe3e7 !important;border-radius:8px !important;display:inline-flex !important;align-items:center;justify-content:center;box-shadow:none !important}
  .product-filter-top .list-view button.btn i{color:#44525f !important;font-size:15px}
  .product-filter-top .list-view button.btn.active{background:#1da5db !important;border-color:#1da5db !important}
  .product-filter-top .list-view button.btn.active i{color:#fff !important}

  .product-listing .product-filter-top .open-sidebar,
  .product-detail .product-filter-top .open-sidebar{display:inline-flex !important;align-items:center;height:36px;line-height:1 !important;padding:0 13px !important;margin:0 !important;background:#1da5db !important;border:1px solid #1da5db !important;border-radius:8px !important;color:#fff !important;font-size:11px;letter-spacing:.4px;white-space:nowrap}
  .product-listing .product-filter-top .open-sidebar:hover,
  .product-detail .product-filter-top .open-sidebar:hover{background:#1273a8 !important;border-color:#1273a8 !important;color:#fff !important}
  .product-filter-top .open-sidebar .fa{color:#fff !important;margin-right:7px !important;font-size:14px}
}
@media (max-width:767px){
  .product-filter-top .short-by-show .form-group:not(.short-by){display:none !important}
}
@media (max-width:479px){
  .product-filter-top .short-by-show .short-by .control-label{display:none !important}
}
@media (max-width:429px){
  .product-filter-top .list-view #table-view{display:none !important}
}

/* ===== Category sidebar: TOP categories UPPERCASE (section labels) + SUBcategories sentence-case (items) ===== */
.box-category a{text-transform:uppercase !important}
html[lang="uk"] .box-category > ul > li > a{text-transform:uppercase !important}
/* compact lacing expand chevron (no square, like the product filters) + small reserved space so long names stay on ONE line */
.box-category > ul > li > a{padding-right:15px !important;letter-spacing:0 !important}
.box-category > ul > li > a:not(.active){color:#444 !important}
.box-category ul li .head{top:12px !important;right:5px !important}
.box-category > ul > li a.accordion-toggle{width:auto !important;min-width:0 !important;height:auto !important;line-height:1 !important;padding:0 !important;background:transparent !important;background-color:transparent !important;color:#9aa6ae !important;box-shadow:none !important;border:none !important}
.box-category > ul > li a.accordion-toggle:hover{background:transparent !important;background-color:transparent !important;color:#1da5db !important}
.box-category ul li .head .accordion-toggle:before{content:"\f107" !important;font-size:13px}
.box-category ul li .head .accordion-toggle:not(.collapsed):before{content:"\f106" !important}
/* subcategories: sentence case, grouped in a soft tinted block, spaced, no FontAwesome chevron */
.box-category .panel-collapse{background:#f5fafd;border-left:2px solid #bfe3f3;border-radius:0 6px 6px 0;margin:2px 14px 12px 16px;padding:5px 0}
.box-category .panel-collapse ul{margin:0;padding:0;list-style:none}
.box-category .panel-collapse li{margin:0;border:none;background:none}
.box-category .panel-collapse a{display:block;text-transform:none !important;padding:8px 16px !important;color:#5b6b76 !important;font-size:15px;line-height:1.45;border:none !important}
.box-category .panel-collapse a:before{content:none !important;margin:0 !important}
.box-category .panel-collapse a:hover{color:#1273a8 !important;background:rgba(29,165,219,.07)}
.box-category .panel-collapse a.active{color:#1273a8 !important;font-weight:500}

/* ===== Wolf legal pages: offer / privacy / returns (v129) ===== */
.wpc-legal{max-width:880px;margin:0 auto;padding:34px 18px 60px;color:#2a3a47;font-size:15px;line-height:1.72;}
.wpc-legal h1{color:#043559;font-size:30px;font-weight:700;line-height:1.2;margin:0 0 20px;letter-spacing:.2px;}
.wpc-legal>p{margin:0 0 14px;}
.wpc-legal>p:first-of-type{font-size:16px;color:#37485a;}
.wpc-legal h2{color:#043559;font-size:19px;font-weight:600;margin:0 0 12px;}
.wpc-legal h3{color:#0c2a47;font-size:16px;font-weight:600;margin:16px 0 8px;}
.wpc-legal p{margin:0 0 12px;}
.wpc-legal ul,.wpc-legal ol{margin:0 0 14px;padding-left:22px;}
.wpc-legal li{margin:0 0 7px;}
.wpc-legal a{color:#1da5db;text-decoration:none;border-bottom:1px solid rgba(29,165,219,.4);}
.wpc-legal a:hover{color:#043559;border-bottom-color:#043559;}
.wpc-legal strong{color:#0c2a47;}
.wpc-legal>ol{counter-reset:wsec;list-style:none;padding-left:0;}
.wpc-legal>ol>li{counter-increment:wsec;margin:0;padding:22px 0;border-top:1px solid #e3ebf2;}
.wpc-legal>ol>li:first-child{border-top:0;padding-top:6px;}
.wpc-legal>ol>li>h2:first-child{margin-top:0;}
.wpc-legal>ol>li>h2:first-child::before{content:counter(wsec) ". ";color:#1da5db;font-weight:700;}
.wpc-legal>ol ol{list-style:decimal;padding-left:22px;}
.wpc-legal>ol ol>li{margin:0 0 7px;padding:0;border:0;}
@media(max-width:600px){.wpc-legal{padding:24px 14px 46px}.wpc-legal h1{font-size:25px}.wpc-legal h2{font-size:17px}}

/* ===== Wolf delivery & payment section (v133) — white cards w/ shadow on tinted page ===== */
.wpc-dp-cards{max-width:980px;margin:6px auto 0;padding:0 18px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.wpc-dp-card{background:#fff;border-radius:12px;border-left:4px solid #1da5db;box-shadow:0 8px 26px rgba(7,25,55,.09);padding:28px 30px;transition:transform .18s ease, box-shadow .18s ease;}
.wpc-dp-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(7,25,55,.13);}
.wpc-dp-card h4{color:#043559;font-size:19px;font-weight:600;margin:0 0 10px;}
.wpc-dp-card p{margin:0;color:#42525e;font-size:15px;line-height:1.65;}
.wpc-dp-price{display:inline-block;margin-top:14px;font-size:18px;font-weight:700;color:#1da5db;}
.wpc-dp-note{max-width:760px;margin:22px auto 6px;padding:0 18px;text-align:center;font-size:13.5px;color:#7a8896;line-height:1.6;}
.wpc-dp-note a{color:#1273a8;text-decoration:none;border-bottom:1px solid rgba(29,165,219,.4);}
.wpc-dp-note a:hover{color:#043559;border-bottom-color:#043559;}
.wpc-dp-panel{max-width:860px;margin:8px auto 0;padding:34px 40px;background:#fff;border-radius:14px;border-top:3px solid #1da5db;box-shadow:0 12px 38px rgba(7,25,55,.12);}
.wpc-dp-panel-h{display:flex;align-items:center;gap:15px;margin:0 0 20px;}
.wpc-dp-ico{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#e8f5fc;display:flex;align-items:center;justify-content:center;}
.wpc-dp-ico svg{width:25px;height:25px;display:block;}
.wpc-dp-panel h3{color:#043559;font-size:22px;font-weight:600;margin:0;line-height:1.2;}
.wpc-dp-panel p{color:#42525e;font-size:15px;line-height:1.72;margin:0 0 13px;}
.wpc-dp-panel p:last-of-type{margin-bottom:0;}
.wpc-dp-btn{display:inline-block;margin-top:22px;padding:12px 28px;border:2px solid #1da5db;border-radius:7px;color:#1273a8 !important;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none !important;transition:background-color .15s ease, color .15s ease;}
.wpc-dp-btn:hover{background:#1da5db;color:#fff !important;}
.wpc-dp-band{width:100vw;margin:48px 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:clamp(260px,32vw,440px);background:#0a2a52 center center/cover no-repeat;}
@media(max-width:640px){.wpc-dp-cards{grid-template-columns:1fr;gap:16px;}.wpc-dp-panel{padding:26px 22px;}.wpc-dp-card{padding:22px 22px;}.wpc-dp-band{height:220px;margin:32px 0;}}
/* ===== Mobil header6 — final: native grid, all 6 items stretch & fit, NO hide/clip (2026-06-19) ===== */
#header .header-bottom .logo img{ height:30px !important; width:auto !important; max-width:none !important; }
@media (min-width: 992px){
  /* native float grid (.row/columns NOT flexed -> responsive intact). Logo column hugs the logo so the gap to the menu is small. */
  #header .header-bottom .col-lg-3{ width:11% !important; }
  #header .header-bottom .col-lg-9{ width:89% !important; }
  #header .header-bottom .logo{ padding:0 !important; }
  #header .header-bottom .col-lg-9.middle-right{ display:flex !important; align-items:center !important; height:84px !important; }
  #header .header-bottom .main-menu-w{ flex:1 1 auto !important; min-width:0 !important; margin:0 15px !important; height:84px !important; }
  #header .header-bottom .shopping_cart{ flex:0 0 auto !important; margin-left:12px !important; position:relative !important; z-index:2 !important; }
  /* all 6 items stretch evenly across the full menu width; compact padding + 13px so everything fits (no hide, no clip) */
  #header .header-bottom ul.megamenu{ display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; height:84px !important; margin:0 !important; padding:0 !important; }
  #header .header-bottom ul.megamenu > li{ float:none !important; padding:0 !important; height:84px !important; display:flex !important; align-items:center !important; }
  #header .header-bottom ul.megamenu > li > a{ white-space:nowrap !important; margin:0 !important; padding:0 6px !important; font-size:13px !important; line-height:normal !important; display:flex !important; align-items:center !important; justify-content:center !important; height:84px !important; }
}
/* WIDE only (>=1200px): flex row -> logo hugs + menu fills. space-evenly = equal gaps; ul padding 3px makes the two EDGE gaps (logo->first, last->cart) exactly 3px bigger than the inter-item gaps. Logo +23px via REAL margin so the menu flows after it and the left air stays normal. */
@media (min-width: 1200px){
  #header .header-bottom .row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; }
  #header .header-bottom .col-lg-3{ flex:0 0 auto !important; width:auto !important; float:none !important; }
  #header .header-bottom .col-lg-9.middle-right{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; float:none !important; display:flex !important; align-items:center !important; }
  #header .header-bottom .logo{ position:static !important; left:auto !important; margin-left:23px !important; }
  #header .header-bottom .main-menu-w{ flex:1 1 auto !important; min-width:0 !important; margin:0 !important; }
  #header .header-bottom .shopping_cart{ flex:0 0 auto !important; margin-left:0 !important; }
  #header .header-bottom ul.megamenu{ justify-content:space-evenly !important; padding-left:3px !important; padding-right:3px !important; width:100% !important; }
}