/* ========================================================================== shoner.ru — кастомные стили поверх темы ShowCase (OCTemplates v2.0) ocStore 3.0.3.7 Файл подключается в catalog/view/theme/oct_showcase/template/common/header.twig строкой сразу после цикла {% for style in styles %}, поэтому перебивает style.min.css. Правьте только этот файл — style.min.css не трогаем, чтобы не потерять изменения при обновлении темы. ========================================================================== */ /* ========================================================================== 1. Поиск, перенесённый из жёлтой панели (.header) в верхнюю панель (#top) ========================================================================== */ /* Выпадающий список live-поиска не должен обрезаться тёмной панелью */ #top { overflow: visible; } .top-search { min-width: 0; /* даёт flex-элементу возможность сжиматься */ max-width: 560px; margin: 0 1.25rem; } #top .header-search { width: 100%; /* сбрасываем отступ под абсолютно спозиционированную кнопку каталога, который тема задаёт для .header-search на 768–1199px */ padding-left: 0; } #top .header-search .form-control { background: #fff; border-color: #fff; height: 40px; } #top .header-search .form-control:focus { border-color: #F0BF64; box-shadow: 0 0 0 2px rgba(240, 191, 100, .35); } /* Выпадашка живого поиска по умолчанию равна ширине поля (width: 100% от form#search). В верхней панели поле уже, чем было в жёлтой, поэтому задаём выпадашке собственную минимальную ширину — иначе длинные названия товаров ломаются на 3 строки. Вправо места хватает на всех проверенных ширинах. */ #top .sc-livesearch { min-width: 420px; } /* Планшет: ссылок «О компании / Доставка…» нет, поиску можно отдать всю ширину */ @media (min-width: 768px) and (max-width: 1199.98px) { .top-search { max-width: none; margin: 0 .75rem; } } /* Узкий десктоп: поджимаем логотип и ссылки, чтобы поиск остался читаемым */ @media (min-width: 1200px) and (max-width: 1399.98px) { #logo { padding-right: 1.5rem; } .top-left li:not(:last-child) { margin-right: .75rem; } .top-search { max-width: 340px; margin: 0 .75rem; } } /* ========================================================================== 2. Вкладки разделов в жёлтой панели (.header) — на месте прежнего поиска ========================================================================== */ .header-tabs { min-width: 0; gap: .25rem 1.75rem; flex-wrap: wrap; } .header-tabs-link { display: inline-flex; align-items: center; padding: .5rem .125rem; color: #1c1c28; font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .header-tabs-link:hover, .header-tabs-link:focus { color: #282182; border-bottom-color: #282182; } /* Значок «откроется в новой вкладке» для ссылок на другие сайты */ .header-tabs-link.is-external::after { content: ''; flex: 0 0 10px; width: 10px; height: 10px; margin-left: .4rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain; } /* 768–1199px: кнопки «Каталог товаров» в жёлтой панели нет (её роль играет бургер в верхней панели), поэтому вкладки просто прижаты к левому краю */ @media (min-width: 768px) and (max-width: 1199.98px) { .header-tabs { gap: .25rem 1.25rem; } .header-tabs-link { font-size: .8125rem; } } /* ========================================================================== 3. Лента товаров на главной (модуль «Слайд-шоу +», доп. баннеры) Фото-слайдер скрыт настройкой модуля, лента стала самостоятельным блоком: 4 карточки на десктопе, 3 на планшете, 2 на мобильном, стрелки + точки. ========================================================================== */ /* Полоса заголовка. Даже пустая держит 34px — в этом месте слик рисует стрелки (.slick-arrow спозиционирован top: -34px относительно карусели). */ .products-of-the-day .sc-specials-header { min-height: 34px; margin-bottom: .5rem; padding-right: 80px; /* место под пару стрелок справа */ font-size: 1.375rem; font-weight: 700; line-height: 34px; color: #1c1c28; } @media (max-width: 767.98px) { .products-of-the-day .sc-specials-header { font-size: 1.125rem; } } /* Когда фото-слайдера нет, лента — первый блок под шапкой */ .sc-slideshow-plus.without-slider { margin-top: 1rem; } /* Картинка карточки: пропорции, overflow и скругление уже заданы в теме (.image-container { padding-bottom: 68%; height: 0 } в style.min.css), поэтому здесь только компенсируем убранный из шаблона инлайновый margin. Инлайн задавал ещё и width: calc(100% - 55px) под раскладку в 2 колонки — на 4 колонки это оставляло слишком узкую картинку, теперь ширина 100%. */ .sc-slideshow-plus-specials-item .image-container { margin: 2px auto; } /* Название товара — не даём одной длинной карточке растянуть весь ряд */ .sc-slideshow-plus-specials-block-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Точки-переключатели «министраниц» */ .sc-slideshow-plus-specials .slick-dots { width: 100%; justify-content: center; padding: 1rem 0 0; } .sc-slideshow-plus-specials .slick-dots li button { margin: 0 .25rem; }