/* ============================================================ custom.css — кастомные стили проекта AgroPioneer. Подключается в (catalog/controller/octemplates/events/header.php), поэтому применяется ДО первой отрисовки — мигания цвета нет. Сюда кладём всё, что не должно "прыгать" при загрузке. all.css грузится в конце с media="print" onload="this.media='all'", то есть уже после первого кадра — для цветов и шрифтов он не годится. ============================================================ */ :root { /* Цвет текста вариантов опции (радио-кнопки на карточке товара). Оба состояния заданы явно и одинаково — при выборе варианта цвет текста не меняется, скачка нет. Нужен другой цвет у выбранного — поменяйте вторую переменную. */ --ap-option-text: var(--pr-black-color); --ap-option-text-selected: var(--pr-black-color); } .pr-sidebar-cart{z-index:2147483649!important} /* ---------- Опции товара: цвет текста ---------- */ body .ocf-btn-link, body .ocf-btn-link:hover { color: rgb(61, 176, 67) } label.option.pr-radio, label.option.pr-radio.not-selected { color: var(--ap-option-text); } label.option.pr-radio.selected { color: var(--ap-option-text-selected); } .pr-header-search-input{ border-color: #ffb30026 !important; } /* Карточка товара — специфичность выше базовых правил темы (.pr-product-options .radio label.selected), !important не нужен. */ .pr-product-options .radio label.option.pr-radio, .pr-product-options .radio label.option.pr-radio.not-selected { color: var(--ap-option-text); } .pr-product-options .radio label.option.pr-radio.selected { color: var(--ap-option-text-selected); } .pr-header-buttons-item-count:not(.pr-header-buttons-item-count-cart) { background-color: rgb(255, 179, 0); } /* ---------- Фильтр в левой колонке (extension/module/filter.twig) ---------- */ .pr-column-filter-list-item + .pr-column-filter-list-item { border-top: 1px solid var(--pr-light-grey-color); } .dark-theme .pr-column-filter-list-item + .pr-column-filter-list-item { border-color: var(--pr-border-color); } .pr-column-filter-head { gap: .5rem; } .pr-column-filter-head .no-btn svg { transform: rotate(90deg); transition: transform var(--pr-main-transition); } .pr-column-filter-head[aria-expanded="false"] .no-btn svg { transform: rotate(0deg); } .pr-column-filter-options { max-height: 17.5rem; overflow-y: auto; } .pr-column-filter-options li + li { margin-top: .5rem; } .pr-column-filter-options .filter-label { color: var(--pr-black-color); cursor: pointer; gap: .5rem; } .pr-column-filter-options .filter-label:hover { color: var(--pr-links-color); } .pr-column-filter-options .form-check-input { margin-right: 0; } .pr-column-filter-options::-webkit-scrollbar { width: 4px; } .pr-column-filter-options::-webkit-scrollbar-track { background-color: var(--pr-light-grey-color); border-radius: 4px; } .pr-column-filter-options::-webkit-scrollbar-thumb { background-color: var(--pr-border-color); border-radius: 4px; } /* Тема в @media (min-width:1200px) объявляет .offcanvas-xl{background-color:transparent!important} — это обнулило бы фон карточки фильтра на десктопе. Специфичность ID + !important перебивает. */ #pr-filter-offcanvas.pr-column-filter { background-color: var(--pr-white-color) !important; } /* Ниже 1200px фильтр работает как offcanvas (класс offcanvas-xl в filter.twig): левая колонка остаётся скрытой темой, блок открывается кнопкой у сортировки. */ @media (max-width: 1199.98px) { #pr-filter-offcanvas.pr-column-filter { border-radius: 0; height: 100%; max-width: 92vw; width: 22rem; } /* Скроллится вся панель, а не отдельный список внутри неё. */ #pr-filter-offcanvas .pr-column-filter-list { flex: 1 1 auto; overflow-y: auto; } #pr-filter-offcanvas .pr-column-filter-options { max-height: none; overflow-y: visible; } /* Кнопка применения всегда видна внизу панели. */ #pr-filter-offcanvas .pr-column-filter-footer { background-color: var(--pr-white-color); border-top: 1px solid var(--pr-light-grey-color); flex: 0 0 auto; padding-top: 1rem; } .dark-theme #pr-filter-offcanvas .pr-column-filter-footer { border-color: var(--pr-border-color); } } /* ---------- Сопутствующие товары на карточке (вкладка «Рекомендуємо») ---------- В сборке CSS темы на сервере правил [data-type=carousel] нет, поэтому саму горизонтальную прокрутку описываем здесь и не привязываемся к data-type — иначе карточки просто переносятся на новую строку и слайдера не получается. */ .pr-product-tab-related .pr-module { margin-top: 0 !important; } .pr-product-tab-related .pr-module .pr-module-items { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .pr-product-tab-related .pr-module .pr-module-items::-webkit-scrollbar { display: none; } .pr-product-tab-related .pr-module .pr-module-item { flex: 0 0 54%; max-width: 54%; scroll-snap-align: start; } @media (min-width: 576px) { .pr-product-tab-related .pr-module .pr-module-item { flex: 0 0 calc(50% - .5rem); max-width: calc(50% - .5rem); } } @media (min-width: 768px) { .pr-product-tab-related .pr-module .pr-module-item { flex: 0 0 calc(33.3333% - .667rem); max-width: calc(33.3333% - .667rem); } } /* Максимум 4 карточки в строке — на больших экранах шире не растягиваем. */ @media (min-width: 992px) { .pr-product-tab-related .pr-module .pr-module-item { flex: 0 0 calc(25% - .75rem); max-width: calc(25% - .75rem); } } /* Стрелки листания в строке заголовка. Разметку добавляет product.twig, перенос в заголовок и прокрутку — его же скрипт. */ .pr-related-title { align-items: center; display: flex; gap: 1rem; justify-content: space-between; } .pr-related-nav-box { display: none; flex-shrink: 0; gap: .5rem; } .pr-related-nav { align-items: center; background-color: var(--pr-white-color); border: 1px solid var(--pr-border-color); border-radius: 50%; cursor: pointer; display: flex; flex-shrink: 0; height: 2.25rem; justify-content: center; padding: 0; transition: background-color var(--pr-main-transition), opacity var(--pr-main-transition); width: 2.25rem; } .pr-related-nav:hover:not(:disabled) { background-color: var(--pr-light-grey-color); } .pr-related-nav[hidden], .pr-related-nav:disabled { opacity: .35; pointer-events: none; } /* Обе кнопки скрыты — прячем и контейнер, чтобы не было пустого отступа. */ .pr-related-nav-box:has(.pr-related-nav-prev[hidden]):has(.pr-related-nav-next[hidden]) { display: none !important; } /* Мышью прокручивать строку неудобно, поэтому стрелки от планшета и выше — на телефонах остаётся свайп. Проверку pointer:fine не ставим: у ноутбуков с сенсорным экраном она не срабатывает, и кнопки бы не появились. */ @media (min-width: 768px) { .pr-related-nav-box { display: flex; } } /* Кнопка «Фільтр» в панели сортировки (product/category.twig). */ .pr-category-filter-btn { height: 2.5rem; white-space: nowrap; } .pr-category-filter-btn svg { flex: 0 0 auto; } .light-link { color: var(--pr-links-color); } .pr-footer-item-link svg path{ fill: var(--pr-primary-dark-color); } .pr-footer-item-title svg path{ stroke: var(--pr-primary-dark-color); } .pr-product-tab-content-text a, .pr-blog-post-text a{ color: var(--pr-links-color); text-decoration: underline; } .pr-product-tab-content-text a:hover, .pr-blog-post-text a:hover{ text-decoration: none; } .pr-header-buttons-item:not(.pr-header-buttons-item-cart) .pr-header-buttons-item-count { background-color: rgb(255, 179, 0) } .pr-cart-column-total-item span:first-child { text-align: left !important; } .ocf-between .ocf-btn-link { color: rgb(61, 176, 67) !important; } .ocf-theme-light .ocf-search-btn-static, .ocf-theme-light .ocf-search-btn-popover, .ocf-theme-light .ocf-search-btn-static.ocf-disabled, .ocf-theme-light .ocf-search-btn-popover.ocf-disabled { background-color: rgb(255, 179, 0) !important; } .ocf-theme-light .ocf-search-btn-static:hover, .ocf-theme-light .ocf-search-btn-popover:hover{ background-color: var(--pr-primary-dark-color) !important; } .ocf-selected .ocf-value-input::before { border-color: rgb(61, 176, 67) !important; background-color: rgb(61, 176, 67) !important; } /* Ниже 1200px в строку добавилась кнопка фильтра, а тема держит .pr-category-sort-select{min-width:200px} — сумма ширин не влезает. Разрешаем селекту сортировки сжиматься и уменьшаем промежутки. */ @media (max-width: 1199.98px) { .pr-category-sort .content-block > div { gap: .5rem !important; min-width: 0; } .pr-category-sort-select { min-width: 0; } } /* На узких экранах кнопка остаётся только иконкой (подпись в aria-label), чтобы селектам сортировки и количества хватило места. */ @media (max-width: 575.98px) { .pr-category-filter-btn { padding-left: .75rem !important; padding-right: .75rem !important; } .pr-category-filter-btn span { display: none; } } /* ============================================================ Типографика текстового контента: описание товара, статьи блога, информационные страницы, описание категории. Группа селекторов повторяется в каждом правиле намеренно — вложенности и препроцессора здесь нет. ============================================================ */ /* ---------- Отступ текста от заголовков ---------- */ .pr-product-tab-content-text h2, .pr-blog-post-text h2, .pr-information h2, .pr-category-description-text h2 { margin-bottom: 1.25rem; } .pr-product-tab-content-text h3, .pr-blog-post-text h3, .pr-information h3, .pr-category-description-text h3, .pr-product-tab-content-text h4, .pr-blog-post-text h4, .pr-information h4, .pr-category-description-text h4 { margin-bottom: 1rem; } /* ---------- Списки: дополнительный отступ вправо ---------- Тема задаёт .content-block ul/ol { padding-left: 1rem }, добавляем сверху 8px — маркеры не липнут к краю текста. */ .pr-product-tab-content-text ul, .pr-product-tab-content-text ol, .pr-blog-post-text ul, .pr-blog-post-text ol, .pr-information ul, .pr-information ol, .pr-category-description-text ul, .pr-category-description-text ol { margin-left: .5rem; padding-left: 1.25rem; } .pr-product-tab-content-text li + li, .pr-blog-post-text li + li, .pr-information li + li, .pr-category-description-text li + li { margin-top: .375rem; } /* ---------- Таблицы: внутренние границы ---------- В теме у таблиц контента границ нет вообще — только утилиты Bootstrap (.table-bordered и т.п.), которые в текст из редактора не попадают. */ .pr-product-tab-content-text table, .pr-blog-post-text table, .pr-information table, .pr-category-description-text table { border-collapse: collapse; width: 100%; } .pr-product-tab-content-text table th, .pr-product-tab-content-text table td, .pr-blog-post-text table th, .pr-blog-post-text table td, .pr-information table th, .pr-information table td, .pr-category-description-text table th, .pr-category-description-text table td { border: 1px solid var(--pr-border-color); padding: .5rem .75rem; vertical-align: top; } .pr-product-tab-content-text table th, .pr-blog-post-text table th, .pr-information table th, .pr-category-description-text table th { background-color: var(--pr-light-grey-color); font-weight: 600; text-align: left; } .dark-theme .pr-product-tab-content-text table th, .dark-theme .pr-blog-post-text table th, .dark-theme .pr-information table th, .dark-theme .pr-category-description-text table th { background-color: var(--pr-background-color); } /* ---------- Картинки в контенте ---------- Тема даёт всем img только margin-bottom: .5rem — в тексте картинка липнет к соседним абзацам. Отбиваем сверху и снизу, как таблицы. display не меняем: строчная картинка сохраняет и выравнивание по центру через text-align у абзаца, и обтекание через float. */ .pr-product-tab-content-text img, .pr-blog-post-text img, .pr-information img, .pr-category-description-text img { height: auto; margin-bottom: 1.5rem; margin-top: 1.5rem; max-width: 100%; } /* Отступы строчной картинки с отступами абзаца-обёртки не схлопываются. Поэтому у абзаца, в котором только картинка, свой отступ снизу убираем — иначе под картинкой зазор оказывался бы заметно больше, чем над ней. */ .pr-product-tab-content-text p:has(> img:only-child), .pr-blog-post-text p:has(> img:only-child), .pr-information p:has(> img:only-child), .pr-category-description-text p:has(> img:only-child) { margin-bottom: 0; } /* ---------- Адаптивность таблиц ---------- Обёртку .table-wrap проставляет custom.js автоматически. */ .table-wrap { -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; margin-top: 1.5rem; overflow-x: auto; width: 100%; } /* По краям блока лишний отступ не нужен: сверху его даёт заголовок или отбивка самого блока, снизу — следующий за ним элемент. */ .table-wrap:first-child { margin-top: 0; } .table-wrap:last-child { margin-bottom: 0; } /* width:auto + min-width:100% — узкая таблица растягивается на всю ширину, широкая сохраняет свою ширину и прокручивается, а не сжимается. Отступы держит только обёртка, иначе к ним прибавится margin от .table. */ .table-wrap > table { margin-bottom: 0; min-width: 100%; width: auto; } /* На мобильных не даём таблице ужаться до нечитаемого состояния: ниже этой ширины появляется горизонтальный скролл. */ @media (max-width: 767.98px) { .table-wrap > table { min-width: 36rem; } .ocf-btn-mobile-fixed .ocf-btn { background-color: rgb(255, 179, 0) !important; } } .table-wrap::-webkit-scrollbar { height: 4px; } .table-wrap::-webkit-scrollbar-track { background-color: var(--pr-light-grey-color); border-radius: 4px; } .table-wrap::-webkit-scrollbar-thumb { background-color: var(--pr-border-color); border-radius: 4px; } /* Инструкция способа оплаты в SmartCheckout (реквизиты банковского перевода). */ .pr-payment-instruction { background-color: var(--pr-light-grey-color); color: var(--pr-black-color); line-height: 1.5; word-break: break-word; } .dark-theme .pr-payment-instruction { background-color: var(--pr-background-color); } /* ---------- Перемикач мов ---------- Пункты в agootemplates/record/langmark.twig стали ссылками с href, чтобы переход работал без JavaScript. Тег тянет за собой свой цвет и подчёркивание (в т.ч. из a:hover, который перебивает .primary-light-text), поэтому гасим их — внешне пункт остаётся той же кнопкой, что и был. Подчёркивание названия языка живёт на вложенном span и не задевается. */ .pr-dropdown-language, .pr-dropdown-language:hover, .pr-dropdown-language:focus, .pr-dropdown-language:visited { color: var(--pr-primary-light-color); text-decoration: none; } /* ---------- Слайдер подкатегорий на странице категории ---------- Разметка (обёртка + стрелки) — в product/category.twig, листание стрелками — в custom.js. Сама прокрутка нативная: на тачскринах блок листается пальцем и без JS. Механика одна для обоих видов подкатегорий, различается только число элементов в кадре: -tiles (плитки с фото у категорий верхнего уровня) и -buttons (кнопки у вложенных категорий). */ .pr-subcategories-slider { position: relative; } .pr-subcategories-box { /* Промежуток между элементами = gap-3 из разметки. Число элементов в кадре наращивается по брейкпоинтам ниже, на мобильных для обоих видов — по 2. */ --pr-subcat-gap: 1rem; --pr-subcat-per-view: 2; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; flex-wrap: nowrap; margin: 0; overscroll-behavior-x: contain; padding-bottom: 0; scroll-behavior: smooth; /* proximity, а не mandatory: точка привязки последней плитки лежит за пределом прокрутки, и mandatory уводил кадр в пустоту — все подкатегории оказывались вне видимой области. Стрелки и так листают ровно по началу плитки, это считает custom.js. */ scroll-snap-type: x proximity; scrollbar-width: none; } .pr-subcategories-box::-webkit-scrollbar { display: none; } /* Ширина элемента — точная доля видимой области с учётом промежутков, поэтому в кадр попадает целое число элементов. Селектор с потомком — чтобы перебить разбивку темы из main.min.css. */ .pr-subcategories-box > .pr-subcategories-item { flex: 0 0 calc((100% - (var(--pr-subcat-per-view) - 1) * var(--pr-subcat-gap)) / var(--pr-subcat-per-view)); max-width: calc((100% - (var(--pr-subcat-per-view) - 1) * var(--pr-subcat-gap)) / var(--pr-subcat-per-view)); scroll-snap-align: start; } /* У последнего элемента привязка по правому краю: его начало за пределом прокрутки, и привязка по началу для него недостижима. */ .pr-subcategories-box > .pr-subcategories-item:last-child { scroll-snap-align: end; } /* Кнопка вложенной категории: название переносится по словам, высоту по самой длинной подгоняет align-items-stretch у контейнера. */ .pr-subcategories-button { line-height: 1.25; min-height: 3rem; padding: .75rem 1rem; white-space: normal; word-break: break-word; } /* Плитки с фото */ @media (min-width: 576px) { .pr-subcategories-box-tiles { --pr-subcat-per-view: 3; } } @media (min-width: 768px) { .pr-subcategories-box-tiles { --pr-subcat-per-view: 4; } } @media (min-width: 1200px) { .pr-subcategories-box-tiles { --pr-subcat-per-view: 5; } } /* Кнопки — их меньше в кадре: в них длинные названия без картинки */ @media (min-width: 768px) { .pr-subcategories-box-buttons { --pr-subcat-per-view: 3; } } @media (min-width: 992px) { .pr-subcategories-box-buttons { --pr-subcat-per-view: 4; } } /* Стрелки: на всех разрешениях, включая мобильные. Класс is-scrollable проставляет custom.js, когда прокручивать есть что. */ .pr-subcategories-nav { align-items: center; background-color: var(--pr-white-color); border: 1px solid var(--pr-border-color); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); color: var(--pr-black-color); display: none; height: 36px; justify-content: center; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: color var(--pr-main-transition), opacity var(--pr-main-transition); width: 36px; z-index: 2; } .pr-subcategories-nav:hover { color: var(--pr-links-color); } .pr-subcategories-nav-prev { left: 0; } .pr-subcategories-nav-next { right: 0; } .pr-subcategories-nav.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; } .pr-subcategories-slider.is-scrollable .pr-subcategories-nav { display: flex; } /* ---------- Блок «Категорії» в левой колонке: вложенные уровни ---------- Разметку строки со стрелкой добавляет extension/module/category.twig. Поворот стрелки берётся из темы: .pr-column-categories-list-item .no-btn[aria-expanded="true"] svg — селектор потомка, вложенные кнопки он тоже покрывает, дублировать не нужно. */ .pr-column-categories-sub-head { gap: .5rem; } .pr-column-categories-sub-head .no-btn { flex-shrink: 0; margin-right: -.5rem; }