/*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 ===== */


.so_advanced_search button[id^="sas_search_button"] {
	position: relative !important;
	top: -3px !important;
}

/* ===== 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: 8 / 3;
}

/* 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: 8 / 3;
	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. */
body.layout-5.common-home #content .so_advanced_search {
	background-image: url(/catalog/view/theme/so-monota/images/id4-bg-search.jpg);
	background-image: -webkit-image-set(url(/catalog/view/theme/so-monota/images/id4-bg-search-v3.webp) 1x);
	background-image: image-set(
		url(/catalog/view/theme/so-monota/images/id4-bg-search-v3.webp) type("image/webp"),
		url(/catalog/view/theme/so-monota/images/id4-bg-search.jpg) type("image/jpeg")
	);
}

/* ===== 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;
}