/* Базовый сброс заголовков. color был захардкожен #01090c (не токен) - на большинстве страниц это не видно, т.к. .goods/.contact/.pdp/.prose и т.п. переопределяют color сами, но .contact_right h4 (телефон в карточке контактов) ничего не переопределяет и рисовался этим хардкодом, а не --color-ink - на глаз оттенки почти неотличимы (оба почти-чёрные), поэтому расхождение не заметили раньше. */ h1,h2,h3,h4,h5,h6 { letter-spacing: 0px; padding: 0 0 10px 0; font-weight: 600; line-height: 140%; color: var(--color-ink); } h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4 { font-size: 16px; margin-top: 0; } h5 { font-size: 14px; } h6 { font-size: 13px; } /* .info (было: 16x16 квадрат #fd2015 - не фирменный красный, а другой оттенок) удалён: проверено grep -a по всему дереву проекта, класса "info" нет ни в одной разметке. Мёртвый код чужого шаблона. */ /* Вступительный текст раздела каталога (Content::PrintContent, goods.php) - печатается перед плиткой товаров/подразделов, если у раздела в БД заполнены descriptpath/descriptfile. На стенде такого текста нет ни у одной фикстуры (потому и не был замечен раньше), но метод и разметка живые - на проде могут быть заполненные разделы. Было Verdana 11px #000000 text-align:justify margin:0 10% - другой шрифт, размер мельче всего остального текста на сайте, хардкод-чёрный вместо токена, justify (рваные пробелы на коротких строках) и margin в процентах вместо сетки контента. Приведено к тому же языку, что вводный абзац о компании (.prose-lead): та же ширина контента 1200px/отступы var(--space-5), что у breadcrumbs/.subgoods на той же странице, иначе вступительный текст «гулял» бы по горизонтали относительно всего остального на странице раздела. */ .topdescript { max-width: 1200px; margin: 0 auto var(--space-5); padding: 0 var(--space-5); font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); text-decoration: none; text-align: left; } /* Смена цвета рамки/текста недостаточна для клавиатурного фокуса (DESIGN.md). .company_address a, .breadcrumbs a, .contact_right h4 a - обычные текстовые ссылки в контенте, а не карточки/кнопки - у них был только :hover-стиль цвета, без явного outline. Собраны в одно правило: у всех одинаковое требование, один источник, не три копии. */ .company_address a:focus-visible, .breadcrumbs a:focus-visible, .contact_right h4 a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } /* ---------- Контентные страницы ---------- */ /* Контейнер контента страницы (about / news / prod / policy / разделы каталога) */ .goods { /* width:100%, не auto: .goods - прямой ребёнок .page-wrap (flex, align-items:stretch по умолчанию) - при width:auto стретч иногда не срабатывал и .goods схлопывался по контенту (~916px вместо 1200, жалоба 2026-08-09 про /products/). max-width+margin ниже по-прежнему кадрируют и центрируют поверх 100%, так что тут ничего не меняется визуально там, где бага не было. */ width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); float: none; display: block; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-ink); } .goods h1, .goods h2, .goods h3, .search-page h1 { font-family: var(--font-heading); color: var(--color-ink); line-height: 1.25; padding: 0; } .goods h1, .search-page h1 { /* .search-page h1 добавлен сюда же (2026-08-11, просьба заказчицы "сделай название... также как и везде, как контакты, продукция") - раньше у .search-page не было отдельного правила для h1 вообще, заголовок "Поиск по каталогу" падал на дефолтный браузерный стиль вместо общего фирменного заголовка страниц сайта. */ font-size: 32px; font-weight: 700; margin: 0 0 var(--space-5); } .goods h2 { font-size: 22px; font-weight: 600; margin: var(--space-7) 0 var(--space-4); } .goods h3 { font-size: 18px; font-weight: 600; margin: var(--space-6) 0 var(--space-3); } /* Текстовая колонка: 65-75 символов в строке. Шире делать нельзя - длинные строки не читаются. Центрируем, иначе на широком экране колонка прижимается к левому краю и выглядит съехавшей. */ .prose { max-width: 72ch; margin-inline: auto; } .prose p { margin: 0 0 var(--space-4); } .prose > p:last-child { margin-bottom: 0; } .prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } .prose a:hover, .prose a:focus-visible { color: var(--color-brand-red-dark); } .prose strong, .prose b { font-weight: 700; } /* Подзаголовок под h1 */ .prose-lead { font-size: 18px; line-height: 1.6; color: var(--color-ink-soft); margin: 0 0 var(--space-6); } /* Хронология "С 2014 года ..." */ .timeline { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-left: 2px solid var(--color-border); } .timeline li { position: relative; margin: 0; padding: 0 0 var(--space-4) var(--space-5); } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-red); } .timeline-year { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--color-brand-red); } /* Списки в тексте */ .policy-list { list-style: disc; /* явно: чужой сброс уже прятал маркеры глобально */ margin: 0 0 var(--space-4); padding-left: var(--space-5); } .policy-list li { list-style-type: disc; /* сброс ol,ul,li{list-style:none} в layout.css бьёт прямо по li, наследование от .policy-list его не перекрывает */ margin-bottom: var(--space-2); } .policy-updated { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-ink-soft); font-size: 14px; } /* Новости */ .news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .news-item { padding: var(--space-5); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .news-date { display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--color-brand-red); margin-bottom: var(--space-2); } .news-item p { margin: 0; } /* Пустое состояние */ .empty-state { margin: 0; padding: var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink-soft); text-align: center; } /* Блок услуги на странице «Продукция и услуги» */ .service-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin: 0 0 var(--space-7); padding: var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .service-cta-text { flex: 1 1 320px; min-width: 0; } .goods .service-cta-text h2 { margin: 0 0 var(--space-2); font-size: 22px; } .service-cta-text p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); } .service-cta-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-3) var(--space-5); font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; background: var(--color-brand-red); border-radius: var(--radius-sm); transition: background-color var(--transition-base); } .service-cta-btn:hover { background: var(--color-brand-red-dark); color: #fff; } .service-cta-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } /* Кнопка + вторичная ссылка одной группой: раньше кнопка была единственным действием и лежала прямо в .service-cta (flex со space-between). Теперь действий два - основное (калькулятор) и запасное (форма-заявка для тех, у кого нет гербер-файлов), поэтому им нужна своя обёртка, иначе space-between расшвыривает их по краям блока как два независимых элемента. */ .service-cta-actions { flex: 0 0 auto; display: flex; flex-direction: column; /* flex-end, а не flex-start: ссылка шире кнопки, и при выравнивании по левому краю она вылезала правее кнопки в никуда. По правому краю оба элемента заканчиваются там же, где правый край самой плашки. */ align-items: flex-end; gap: var(--space-2); } /* Вторичное действие - текстовая ссылка, а не вторая кнопка: две кнопки рядом читались бы как равнозначные, а основной путь здесь один (см. DESIGN.md про единственный акцент в блоке). */ .service-cta-link { font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--color-ink-soft); text-decoration: underline; text-underline-offset: 2px; } .service-cta-link:hover { color: var(--color-brand-red); } .service-cta-link:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } /* Заголовок над плиткой разделов */ .goods .section-title { margin: 0 0 var(--space-5); font-size: 22px; } /* Сетка разделов каталога. font-family переопределён явно: vendor/zui.min.css содержит правило `.icon, [class*=" icon-"], [class^=icon-] { font-family: ZenIcon; }` (иконочный шрифт zui) — .icon-grid попадает под [class^=icon-] по имени и без этой строки получал бы ZenIcon вместо Nunito Sans. Сейчас это не видно (сам .icon-grid текста не несёт, только .icon-карточки со своим шрифтом), но при первом же прямом тексте в контейнере шрифт «поехал» бы молча. */ /* minmax(220px, ...), не 200px - .subgoods (второй такой же по смыслу грид плиток разделов, classes/podrazdel.php) использует 220px. Разница в 20px в минимуме меняет то, сколько треков auto-fill создаёт при том же доступном месте - при ОДНОМ реальном элементе (как на /products/ и /laser-machines/ сейчас) это давало разное количество треков (5 против 4) и, соответственно, разную итоговую ширину плитки - карточка на /products/ получалась заметно мельче карточки на /laser-machines/, хотя обе должны выглядеть одинаково (жалоба 2026-08-09 со скриншотами: "они разные, ты не видишь?"). */ .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; font-family: var(--font-body); } .icon { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-5); width: auto; height: auto; float: none; position: relative; font-family: var(--font-body); font-size: 15px; color: var(--color-ink); text-align: center; text-decoration: none; background: var(--color-bg); border: none; border-radius: var(--radius-md); transition: box-shadow var(--transition-base); } /* Раньше на плитке РАЗДЕЛА каталога был бейдж-значок в углу (сперва корзина, потом стрелка) - убран совсем 2026-08-08: вся карточка и так кликабельна и ведёт внутрь раздела, отдельный значок ничего не добавлял, только путался под ногами ("а зачем вообще эта стрелка на карточках?"). */ /* Смены цвета рамки для клавиатуры недостаточно - нужно явное кольцо фокуса. */ .icon:focus-visible, .icon a:focus-visible, .prose a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } /* Место под картинку резервируется заранее - без скачка вёрстки при загрузке */ .iconpic { position: static; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; } /* object-fit: cover, не contain - contain оставлял разное количество пустого места вокруг фото в зависимости от его собственных пропорций (квадратное фото - узкая картинка в середине 3:2 бокса, широкое - заполняет целиком) - плитки внутри одинакового бокса выглядели визуально РАЗНОГО размера (жалоба 2026-08-09: "надо чтобы размер этих квадратиков был всегда одинаковый независимо от фотографии"). cover + width/height 100% обрезает фото по краям, но заполняет бокс всегда одинаково. */ .iconpic img { width: 100%; height: 100%; object-fit: cover; display: block; } .iconlink { position: static; width: auto; margin: 0; font-family: var(--font-heading); font-weight: 500; line-height: 1.35; color: var(--color-ink); } .icon:hover .iconlink, .icon:focus-visible .iconlink { color: var(--color-brand-red); } /* Карточки, где ссылки лежат внутри (разделы каталога из customclasses.php) */ .icon a { color: var(--color-ink); text-decoration: none; } .icon a:hover, .icon a:focus-visible { color: var(--color-brand-red); } .icon img { max-width: 100%; height: auto; } /* Страница результатов поиска (/search/, pages/search.html) - 2026-08-11, форма поиска раньше вела на несуществующий search.php (см. TZ.md). Та же поверхность/сетка, что у .goods/.icon-grid - переход между поиском и разделом каталога не должен ощущаться как другой сайт. */ .search-page { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5); } .search-page-form { display: flex; gap: var(--space-3); width: 100%; margin: 0 0 var(--space-5); } .search-page-input { flex: 1 1 auto; min-width: 0; padding: var(--space-3) var(--space-4); font: inherit; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .search-page-submit { flex: 0 0 auto; padding: var(--space-3) var(--space-5); font: inherit; font-weight: 600; color: var(--color-bg); background: var(--color-brand-red); border: 0; border-radius: var(--radius-md); cursor: pointer; } .search-page-submit:hover, .search-page-submit:focus-visible { background: var(--color-brand-red-dark); } .search-page-count { margin: 0 0 var(--space-4); color: var(--color-ink-soft); } .search-load-more { display: block; width: fit-content; margin: var(--space-6) auto 0; padding: var(--space-3) var(--space-6); font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; cursor: pointer; transition: border-color var(--transition-base); } .search-load-more:hover, .search-load-more:focus-visible { border-color: var(--color-brand-red); color: var(--color-brand-red); } .search-page-subtitle { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--color-ink); } .search-page-subtitle:first-of-type { margin-top: 0; } .search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; } .search-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); color: inherit; text-decoration: none; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-base); } .search-result:hover, .search-result:focus-visible { border-color: var(--color-brand-red); } .search-result-thumb { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 64px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg-alt); border-radius: var(--radius-sm); } .search-result-thumb img { width: 100%; height: 100%; object-fit: contain; } .search-result-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .search-result-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); } .search-result-section { font-size: 13px; color: var(--color-ink-soft); } /* Фильтры по параметрам (pages/search.html) - задача заказчицы 2026-08-11: "нужен поисковик с фильтрами по параметрам по каталогу товаров". Сетка вместо flex, чтобы сайдбар не "прыгал" по высоте относительно колонки результатов - 260px фиксированной ширины, тот же принцип, что уже применяется на сайте для похожих раскладок "сайдбар + контент". */ .search-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; } .search-filters { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); position: sticky; top: var(--space-4); } .search-filters-title { margin: 0; font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--color-ink); } /*
/, не
/ - список значений одного параметра может быть длинным (жалоба заказчицы 2026-08-11: "чтобы фильтры были раскрывающим списком"). Стрелка-индикатор - тот же приём, что уже в admin.css (.adm-nav-danger-summary::before) - повторно решённая задача "collapsible-секция", нет смысла придумывать новый вид. */ .search-filter-group { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .search-filter-group summary { display: flex; align-items: center; gap: var(--space-2); padding: 0 0 var(--space-2); font-size: 13px; font-weight: 600; color: var(--color-ink); cursor: pointer; list-style: none; } .search-filter-group summary::-webkit-details-marker { display: none; } .search-filter-group summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--color-ink-soft); } .search-filter-group[open] > summary::before { content: '▾'; } .search-filter-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: 14px; color: var(--color-ink); cursor: pointer; } .search-filter-option input[type="checkbox"] { accent-color: var(--color-brand-red); width: 16px; height: 16px; flex: 0 0 auto; } .search-filter-option span:first-of-type { flex: 1 1 auto; } .search-filter-count { color: var(--color-ink-soft); font-size: 12px; } .search-filter-actions { display: flex; flex-direction: column; gap: var(--space-2); } .search-filter-apply { padding: var(--space-2) var(--space-4); font: inherit; font-weight: 600; color: var(--color-bg); background: var(--color-brand-red); border: 0; border-radius: var(--radius-md); cursor: pointer; } .search-filter-apply:hover, .search-filter-apply:focus-visible { background: var(--color-brand-red-dark); } .search-filter-reset { text-align: center; font-size: 13px; color: var(--color-ink-soft); text-decoration: underline; } .search-filter-reset:hover, .search-filter-reset:focus-visible { color: var(--color-brand-red); } @media (max-width: 900px) { .search-layout { grid-template-columns: 1fr; } .search-filters { position: static; } } @media (max-width: 620px){ .goods { padding: var(--space-5) var(--space-4) var(--space-6); } .goods h1 { font-size: 26px; } .icon-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }}@media (prefers-reduced-motion: reduce){ .icon, .icon::after, .prose a, .service-cta-btn { transition: none; }} /* Карточки подразделов каталога (класс Podrazdel). Раньше это была раскладка на text-align: justify с font-size:1px у родителя и «лекарствами для IE6-7». Теперь та же плитка, что и на /prod/, чтобы переход из раздела в подраздел не выглядел переходом на другой сайт. В разметке заголовок идёт перед картинкой, поэтому порядок правим через order. */ /* Заголовок страницы подраздела (Podrazdel::PrintPodrazdel, например /laser-machines/) - раньше такие страницы не печатали вообще никакого заголовка, только плитку разделов (жалоба 2026-08-09: "надо бы большими буквами название раздела написать"). Не .pdp-title напрямую - тот рассчитан на обёртку .pdp (max-width/паддинги), а тут заголовок - прямой сосед .subgoods без такой обёртки, поэтому та же ширина/паддинг, что у .subgoods, продублированы здесь явно. */ .podrazdel-title { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-5); font-family: var(--font-heading); /* 22px - тот же размер, что у "Разделы каталога" (.section-title на /products/), по просьбе пользователя 2026-08-09 - не крупный 26px .pdp-title карточки товара. */ font-size: 22px; font-weight: 700; color: var(--color-ink); } .subgoods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); width: auto; max-width: 1200px; min-height: 0; margin: 0 auto; padding: 0 var(--space-5) var(--space-7); text-align: left; line-height: normal; font-size: 16px; } .subgoods > div { display: flex; flex-direction: column; gap: var(--space-3); width: auto; height: auto; position: relative; padding: var(--space-5); font-family: var(--font-body); font-size: 15px; line-height: normal; text-align: center; vertical-align: top; background: var(--color-bg); border: none; border-radius: var(--radius-md); transition: box-shadow var(--transition-base); } .bigiconheader { order: 2; height: auto; font-family: var(--font-heading); font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; } .bigiconheader a { color: var(--color-ink); text-decoration: none; } .bigiconheader a:hover, .bigiconheader a:focus-visible { color: var(--color-brand-red); } .bigiconimage { order: 1; text-align: center; } /* Место под картинку резервируется заранее — без скачка вёрстки при загрузке */ .bigiconimage a { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; } /* object-fit: cover - тот же приём, что у .iconpic img выше (одинаковый размер плитки независимо от пропорций исходного фото). */ .bigiconimage img { width: 100%; height: 100%; object-fit: cover; display: block; } .bigiconimage:hover { box-shadow: none; /* тень теперь у всей карточки, а не у картинки */ } .bigiconheader a:focus-visible, .bigiconimage a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }@media (max-width: 620px){ .subgoods { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); padding: 0 var(--space-4) var(--space-6); }}@media (prefers-reduced-motion: reduce){ .subgoods > div, .subgoods > div::after { transition: none; }} /* новая верстка вывода товаров*/ .box { display: table-cell; text-align: left; vertical-align:top; } .tradepage { margin:0 auto 2%; min-width: 275px; max-width: 80%; border:1px solid #ccc; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; //float:left; } .tradepage_color { width: 80%; margin: 0 auto; //min-height: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; //float:left; } .tradepagename { width:100%; background:#eee; font-family: 'Open Sans', sans-serif; font-size: 1.5em; font-weight:bold; text-align: center; } .tradepage_horizontal_block { display:table; width: 100%; // height: 100%; border:2px solid #888; margin-bottom: 3px; } .tradepage_photo_block { margin: 25px 0 0 0; } .tradepagephoto { min-width: 270px; width: 30%; text-align: center; } .tradepageledphoto { min-width: 270px; text-align: center; width: 5%; } .tradepagedescript { min-width: 250px; } .descripttext { font-size: 14px; padding: 10px; } .tradepagedescript { min-width: 270px; //width: 30%; } .tradepage_price_block { min-width: 180px; width: 30%; border-left:1px solid #888; background:#ccc; } .tradepagedeprice { width:100%; background:#f3f3f3; text-align:left; padding-left:5px; } .tradepagedeorder { width:100%; text-align:left; padding-left:5px; } .tradepagedescript_color { min-width: 270px; //width: 30%; } .tradepage_price_block_color { min-width: 180px; width:100%; text-align:left; float: left; background:#ccc; } .tradepage_price_smallblock_color { min-width: 80px; width:100%; text-align:left; float: left; margin-bottom: 3px; background:#ccc; } .tradepage_price_color { min-width: 190px; width:29%; background:#f3f3f3; text-align:left; float: left; margin: 2px 0 0 2px; } .tradepage_price_colorled { min-width: 190px; width: 45%; background: #f3f3f3; text-align: left; float: left; margin: 2px 0 0 2px; } .tradepage_order_color { min-width: 190px; width: 69%; text-align: left; padding-left: 5px; } .tradepage_order_colorled { min-width: 190px; width: 54%; text-align: left; padding-left: 5px; } .tradepage_order_color { min-width: 190px; width:69%; text-align:left; padding-left:5px; } .tradepage h1{ margin: 0; padding: 0 10px 10px 10px; font-size: 18px; font-weight: 400; font-family: 'Open Sans', sans-serif; } h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; margin: 0; font-weight: normal; padding: 0; } .item { float:left; min-width: 150px; /*width:250px; height: 200px;*/ } .leditem { float:left; width: 100%; font-size: 14px; font-weight: bold; } .leditem a { cursor: pointer; } .leditem_wavelength { float:left; padding: 20px 8px 0 0; width: 90px; text-align: center; } .leditem_photodiode_wavelength { float:left; padding: 8px 8px 0 0; width: 160px; text-align: center; } .leditem_photodiode_current { float:left; padding: 8px 8px 0 0; width: 160px; text-align: center; } .leditem_photodiode_risetime { float:left; padding: 8px 8px 0 0; width: 110px; text-align: center; } .leditem_brightness { float:left; padding: 20px 8px 0 0; width: 100px; } .leditem_voltage { float:left; padding: 20px 8px 0 0; width: 60px; } .leditem_frequency { float:left; padding: 20px 8px 0 0; width: 50px; } .leditem_pdf { float:left; padding: 18px 2px 0 0; width: 20px; } .ledspectrum_pdf { float:left; padding: 18px 2px 0 0; width: 20px; } .leditem_lens { float:left; padding: 20px 8px 0 0; width: 90px; text-align: center; } .item_name { float:left; padding-top: 10px; } .item_special_parameters { float:left; width: 25%; } .order_color { text-align: right; margin-right:1%; } .price { float:left; min-width: 280px; } .priceright { float:right; } .priceright_color { float:right; } .stok_color { float:left; min-width: 280px; margin-right: 8%; } /* вывод товаров с различием по цветам*/ .colorbox { display:inline-block; // width:49%; } /* 768px */ @media only screen and (max-width:88em) { .colorbox { display:block; width:99.7%; } } /* .boxes/.box2/.katalogdescript/.katalogdata_*/.priceitem/.itemname/ .item_pdf/.nextitem/.headtree/#container/#slider/#carousel/.pdp-shipping/ .pdp-note/.pdp-nextprev*/.pdp-variants удалены (catalog.php, страница отдельного товара, переверстана на .pdp-*: см. классы .pdp-group, .pdp-price, .pdp-stock, .pdp-specs, .pdp-datasheet, .pdp-gallery-* ниже в файле). Проверено grep -a по всему проекту перед каждым удалением - ни одного элемента с этими id/классами в разметке не осталось. */ /*start search*/ /* Collapsed to a 40px icon button at rest, expands on hover/focus-within - back to this after a detour through "fixed width always" (that lost the interaction entirely) and "shrink to 20px to match cart/account" (that lost the button's own padding). This time cart/account get the matching 40px box instead (see .header-cart-link / .pe-7s-lock in layout.css), so all three glyphs line up evenly without shrinking anything. #sb-search has margin-left:auto (layout.css), so there is always slack space to its left - growing its width eats into that slack and pushes the field's own left edge further left, while its right edge (and so the gap to .homeheader-r) never moves. That is what keeps the icon cluster's spacing constant while the field expands, instead of the field eating into the gap. Mobile overrides this back to a full-width always-open bar, see layout.css max-width:620px block - there is no hover on touch. */ .sb-search{ display:flex; align-items:center; } .sb-search form{ display:flex; align-items:center; justify-content:flex-end; width:40px; height:40px; box-sizing:border-box; background:transparent; border:1px solid transparent; border-radius:999px; padding:0; overflow:hidden; transition:width var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .sb-search:hover form, .sb-search form:focus-within{ width:260px; background:var(--color-bg-alt); border-color:var(--color-border); padding:0 var(--space-1) 0 var(--space-4); } .sb-search form:focus-within{ border-color:var(--color-brand-red); box-shadow:0 0 0 3px rgba(207,24,24,0.12); } /* visible only to screen readers: the placeholder alone is not a label */ .sb-search-label{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .sb-search-input{ flex:1 1 auto; width:0; min-width:0; height:100%; padding:0; border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:14px; color:var(--color-ink); opacity:0; transition:opacity var(--transition-fast); } .sb-search:hover .sb-search-input, .sb-search form:focus-within .sb-search-input{ width:auto; opacity:1; } .sb-search-input::placeholder{color:var(--color-ink-soft);opacity:1;} .sb-search-submit{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:none; border-radius:50%; /* Plain icon, ink at rest, red only on hover/focus - matches cart/login, no filled circle at any state (flat design: color changes, not chrome). */ background:none; color:var(--color-ink); cursor:pointer; transition:color var(--transition-fast); } .sb-search-submit:hover, .sb-search-submit:focus-visible{color:var(--color-brand-red);} .sb-search-submit svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } /*-- start-smartphone_nav --*/ .nav { display:none; } .nav-item { float:left; display:inline; line-height:10px !important; height:31px !important; padding:0px !important; margin:0px !important; zoom:1; } .nav-item a { display:block; } .nav-item a:hover { background: var(--color-brand-red); color: #FFFFFF; } .nav-mobile { display: none; cursor: pointer; position: absolute; top: 5px; left: 5px; background: url(/images/nav_icon.png) 60% 60% no-repeat; height:32px; width: 32px; } .nav-mobile { display:block; } .nav { margin-top:44px; width:100%; } .nav-list { display:none; } .nav-item { width:100%; float:none; } .nav-item a { font-family: var(--font-heading) !important; font-weight:600 !important; background: var(--color-ink); border-bottom: 1px solid rgba(255,255,255,0.12); padding: 12px 16px !important; text-transform:uppercase !important; color:#FFF !important; -webkit-transition: color .2s linear,background .2s linear; -moz-transition: color .2s linear,background .2s linear; -o-transition: color .2s linear,background .2s linear; transition: color .2s linear,background .2s linear; font-size: 0.8725em; } .nav-inner { display: none; } .nav-active, .nav-active-inner .nav-inner { display:block; position: relative; z-index:1; } /* Стили для формы контактов */ .cont_form_box { max-width: 560px; } .cont_form_style p { margin: 0 0 var(--space-5); position: relative; } .cont_form_style .rcheck { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); /* внутри группы тесно */ } /* Группа полей целиком отбивается так же, как одиночное поле, - иначе ритм рвётся */ .cont_form_style .field-group { margin-bottom: var(--space-5); } .cont_form_style p label { display: block; margin-bottom: var(--space-2); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-ink); cursor: pointer; } .cont_form_style .rcheck label { display: inline; margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--color-ink); vertical-align: baseline; } /* Поля ввода: минимум 44px по высоте - иначе неудобно на тач-экранах. Селектор по классу .rfield, а не по type: поля бывают text/email/tel, и привязка к type="text" однажды уже оставила поле Email без стилей. */ .cont_form_style .rfield:not([type="radio"]):not([type="checkbox"]), .cont_form_style select, .cont_form_style textarea { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--space-3); font-family: var(--font-body); font-size: 16px; /* меньше 16px - iOS зумит страницу при фокусе */ line-height: 1.4; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .cont_form_style textarea { min-height: 120px; resize: vertical; } /* Место под стрелку: без этого длинные варианты наезжали на неё. appearance:none + своя SVG-стрелка - без сброса рисовалась родная стрелка браузера не по рамке поля (тот же баг и фикс, что у .order_form_style select и остальных форм группы, см. выше по файлу). */ .cont_form_style select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235A5654' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right var(--space-3) center !important; /* Без background-size SVG без width/height в самом (только viewBox) рендерился в дефолтном "внутреннем" размере браузера - огромная стрелка на весь select вместо аккуратной 16px (жалоба пользователя 2026-08-08: "это шо за гигант"). */ background-size: 16px 16px !important; text-overflow: ellipsis; } .cont_form_style input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--color-brand-red); flex: 0 0 auto; } .cont_form_style input:not([type="radio"]):focus, .cont_form_style select:focus, .cont_form_style textarea:focus { border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(207, 24, 24, 0.15); } .cont_form_style input:focus-visible, .cont_form_style select:focus-visible, .cont_form_style textarea:focus-visible, .cont_form_style .btnsubmit:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .cont_form_style input::placeholder, .cont_form_style textarea::placeholder { color: var(--color-ink-soft); opacity: 1; } /* Незаполненное поле. Класс rf_error навешивает js/formcontactcheck.js. */ .cont_form_style input.rf_error, .cont_form_style input[type="radio"].rf_error, .cont_form_style textarea.rf_error, .cont_form_style select.rf_error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } /* Сообщение об ошибке. Показывается/прячется через visibility из того же js, поэтому display трогать нельзя. Позиционируем ПОД полем, а не поверх него: раньше плашка перекрывала сам инпут. */ .cont_form_style .rfield_error { display: block; position: absolute; top: 100%; left: 0; right: auto; margin-top: var(--space-1); padding: 2px var(--space-2); font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: #fff; background-color: var(--color-error); border-radius: var(--radius-sm); z-index: 1; visibility: hidden; } .cont_form_style .rcheck .rfield_error { top: 100%; left: 0; } /* Заголовок группы полей (пара радио «Организация / Частное лицо») */ .cont_form_style .field-group-title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--color-ink); } /* Пустой контейнер #cont_org не должен занимать место до выбора «Организация» */ .cont_form_style #cont_org:empty { display: none; margin: 0; } /* Обязательные поля: js блокирует кнопку, пока форма не заполнена, поэтому пометки обязательности здесь не украшение, а объяснение, почему кнопка серая. */ .cont_form_style .req { color: var(--color-error); margin-left: 2px; } .cont_form_style .form-hint { margin: 0 0 var(--space-5); font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); } .cont_form_style .btnsubmit { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; min-height: 44px; padding: var(--space-3) var(--space-5); font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1; color: #fff; text-align: center; background: var(--color-brand-red); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-base); } .cont_form_style .btnsubmit:hover { background: var(--color-brand-red-dark); } .cont_form_style .btnsubmit:active { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); } .cont_form_style .btnsubmit.disabled, .cont_form_style .btnsubmit.disabled:hover { /* Серый текст на серой заливке давал контраст ~3.9:1 - ниже нормы AA */ background: var(--color-bg-alt); color: var(--color-ink-soft); box-shadow: inset 0 0 0 1px var(--color-border); cursor: not-allowed; }@media (prefers-reduced-motion: reduce){ .cont_form_style input, .cont_form_style select, .cont_form_style textarea, .cont_form_style .btnsubmit { transition: none; }} /* Конец стилей для формы контактов */ /* Стили личного кабинета*/ .accountfield{ width: 350px; min-height: 650px; margin: 15px auto; } .account{ font-size: 14px; font-weight: bold; } .accountcoment{ font-size: 12px; margin-bottom: 15px; } /* Форма авторизации. Была практически не оформлена: input[type="text"] с height:10px, метки с line-height:10px, кнопка с line-height:8px, а поле пароля вообще не попадало под селектор по type. Приведено к тем же правилам, что и форма контактов. */ .loginform_style { text-align: left; } .loginform_style p { margin: 0 0 var(--space-5); position: relative; } .loginform_style p label { display: block; margin-bottom: var(--space-2); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-ink); cursor: pointer; } /* Поля: минимум 44px по высоте, 16px шрифт (меньше — iOS зумит при фокусе) */ .loginform_style .rfield, .loginform_style input[type="text"], .loginform_style input[type="password"] { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: var(--space-3); font-family: var(--font-body); font-size: 16px; line-height: 1.4; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .loginform_style input:focus { border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(207, 24, 24, 0.15); } .loginform_style input:focus-visible, .loginform_style .btnlogin:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .loginform_style input::placeholder { color: var(--color-ink-soft); opacity: 1; } .loginform_style .btnlogin { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; height: auto; padding: var(--space-3) var(--space-5); font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1; color: #fff; text-align: center; background: var(--color-brand-red); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-base); } .loginform_style .btnlogin:hover { background: var(--color-brand-red-dark); } .loginform_style .btnlogin:active { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); } .loginform_style .btnlogin.disabled, .loginform_style .btnlogin.disabled:hover { background: var(--color-bg-alt); color: var(--color-ink-soft); box-shadow: inset 0 0 0 1px var(--color-border); cursor: not-allowed; } /* Незаполненное поле: класс rf_error навешивает js */ .loginform_style input.rf_error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } /* Сообщение об ошибке. Прячется/показывается через visibility из js, поэтому display трогать нельзя. Ставим под полем, а не поверх него. */ .loginform_style .rfield_error { display: block; position: absolute; top: 100%; left: 0; right: auto; margin-top: var(--space-1); padding: 2px var(--space-2); font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: #fff; background-color: var(--color-error); border-radius: var(--radius-sm); z-index: 1; visibility: hidden; }@media (prefers-reduced-motion: reduce){ .loginform_style input, .loginform_style .btnlogin { transition: none; }} /* Конец стилей для формы авторизации */ /* Формы личного кабинета: регистрация, изменение профиля, восстановление пароля. * * Раньше каждая из них описывалась отдельным блоком по ~150 строк, и во всех * повторялись одни и те же поломки: input[type="text"] с height:10px, кнопки с * line-height:8px, контейнеры с фиксированной высотой (#reg_mail — 750px), * прозрачный фон и чёрная рамка 1px у полей. Поля типа password и email под * селектор по type вообще не попадали и оставались неоформленными. * * Теперь один набор правил на все три формы, в тех же токенах, что и форма * контактов (.cont_form_style) и авторизации (.loginform_style). * Классы, id и структуру разметки не меняем — на них держится JS-валидация. */ #reg_mail { /* было height: 750px — обрезало форму, когда появлялись сообщения об ошибках */ height: auto; } .reg_form_box { width: 100%; max-width: 560px; margin: 0 auto; font-size: 16px; font-weight: 400; } .reg_form_style p, .chengeprofile_form_style p, .forgotpass_form_style p, .order_form_style p { margin: 0 0 var(--space-5); position: relative; } .reg_form_style .rcheck, .chengeprofile_form_style .rcheck, .forgotpass_form_style .rcheck, .order_form_style .rcheck { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .reg_form_style p label, .chengeprofile_form_style p label, .forgotpass_form_style p label, .order_form_style p label { display: block; margin-bottom: var(--space-2); font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-ink); cursor: pointer; } .reg_form_style .rcheck label, .chengeprofile_form_style .rcheck label, .forgotpass_form_style .rcheck label, .order_form_style .rcheck label { display: inline; margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.5; } /* Селектор по классу .rfield, а не по type: поля бывают text/email/tel/password */ .reg_form_style .rfield:not([type="radio"]):not([type="checkbox"]), .chengeprofile_form_style .rfield:not([type="radio"]):not([type="checkbox"]), .forgotpass_form_style .rfield:not([type="radio"]):not([type="checkbox"]), .order_form_style .rfield:not([type="radio"]):not([type="checkbox"]), .reg_form_style input[type="text"], .reg_form_style input[type="password"], .reg_form_style input[type="email"], .chengeprofile_form_style input[type="text"], .chengeprofile_form_style input[type="password"], .forgotpass_form_style input[type="text"], .order_form_style input[type="text"], .reg_form_style select, .chengeprofile_form_style select, .forgotpass_form_style select, .order_form_style select, .reg_form_style textarea, .chengeprofile_form_style textarea, .forgotpass_form_style textarea, .order_form_style textarea { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: var(--space-3); font-family: var(--font-body); font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */ line-height: 1.4; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .reg_form_style select, .chengeprofile_form_style select, .forgotpass_form_style select, .order_form_style select { /* appearance не был сброшен - рисовалась родная стрелка браузера, а не привязанная к нашей рамке/паддингам: на скрине она висела снаружи рамки поля (жалоба пользователя 2026-08-08: "стрелка вниз плохо расположена"). Тот же баг есть и в .cont_form_style select (форма контактов) - исправлен там же, см. ниже по файлу. !important на background-image/repeat/position - без него застревал на background-image:none несмотря на верный порядок и специфичность правил (соседний select { ... } shorthand-background чуть выше по файлу в той же группе селекторов - похоже на особенность движка именно для
, не

(см. Goods::PrintCartDeliveryEstimate) -

не получает отступ браузера по умолчанию, как

, а остальные .rline на этой форме - именно

и по-прежнему держатся на нём. margin здесь просто повторяет обычный браузерный отступ у

(1em сверху и снизу), чтобы строка с городом не выбивалась из общего ритма формы. */ /* #deliveryaddressRow - то же самое, тот же

-без-margin-по-умолчанию, что и #deliverycityRow выше (жалоба заказчицы 2026-08-11 "опять проблема с отступом" - то же самое замечание, что уже было для города, теперь и для нового поля адреса). */ #deliverycityRow, #deliveryaddressRow { margin: 1em 0; } /* Иконка-подсказка рядом с подписью поля (Goods::PrintCartDeliveryEstimate) - всплывающий текст по наведению/фокусу (клавиатурная доступность через tabindex="0" на самой иконке - подсказку можно открыть и без мыши). */ .field-hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--color-ink-soft); cursor: help; } .field-hint:hover, .field-hint:focus-visible { color: var(--color-brand-red); outline: none; } .field-hint svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .field-hint-tooltip { display: none; position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 8px; width: 280px; padding: var(--space-3); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .field-hint:hover .field-hint-tooltip, .field-hint:focus-visible .field-hint-tooltip { display: block; } /* display:block, не inline (по умолчанию у -обёртки, которой она была раньше) - position:relative на строчном элементе не даёт предсказуемого контейнера для position:absolute у дочернего списка подсказок: тот рендерился в самом низу страницы вместо места сразу под полем (жалоба заказчицы 2026-08-11: "дроп даун должен появляться под самим полем", "видишь как в irnby"). Причина была глубже, чем просто inline/block -
    вообще не может лежать внутри по HTML5 (phrasing content), браузер молча переносил его в другое место дерева - заодно и обёртку сменили со на
    (см. комментарий в PHP). */ .deliverycity-wrap { position: relative; display: block; } .deliverycity-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); max-height: 260px; overflow-y: auto; } .deliverycity-suggest-item { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink); } .deliverycity-suggest-item:hover, .deliverycity-suggest-item:focus-visible { background: var(--color-bg-alt); color: var(--color-brand-red); } /* Оценка стоимости доставки (Goods::PrintCartDeliveryEstimate, shop/confirm.php/confirmform.php) - карточка появляется после ввода города и выбора способа доставки (assets/js/my.js, UpdateDeliveryEstimate). Та же поверхность, что у .top_order_form - единый визуальный язык формы, а не чужой iframe-виджет перевозчика (см. комментарий у PrintCartDeliveryEstimate - решение заказчицы 2026-08-09 отказаться от СДЭК/Dellin iframe на этой странице). */ /* margin-bottom - без него следующая строка формы (.rline, обычный

    ) держалась только на браузерном margin по умолчанию у

    (эта карточка -

    , своего нижнего отступа не было вообще) - на глаз читалось как слипшиеся блоки (жалоба заказчицы 2026-08-10: "нет отступа от рассчитанной стоимости доставки и полем комментарий"). */ .checkout-delivery-estimate { margin-top: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-4); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .checkout-delivery-estimate-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--color-ink); } .checkout-delivery-estimate-price { margin: 0 0 var(--space-2); font-size: 15px; color: var(--color-ink-soft); } .checkout-delivery-estimate-price strong { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--color-brand-red); } .checkout-delivery-estimate-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-ink-soft); } .order_form_note { width: 100%; min-width: 0; max-width: none; margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--color-ink-soft); text-align: left; box-sizing: border-box; } .order_form_note a { color: var(--color-brand-red); } .order_form_note a:hover, .order_form_note a:focus-visible { color: var(--color-brand-red-dark); } .additionalgoods { border: none; width: 50%; min-width: 280px; margin: 0 auto; margin-bottom: 40px; } .additionalgoodsitem { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; border: none; width: 84%; min-width: 280px; float: left; } .order_aditional_item { height: 60px; min-width: 150px; padding: 40px 0px 25px 0px; } /* Конец стилей для служебного поиска */ @media (max-width: 1100px){ .box { /*вывод товаров*/ display: block; width: 100%; } .video-gallery { display:table; width:100%; } .videobox { display:block; width:100%; } .video { display:table-footer-group; } ul.navbar-nav li a{ font-size: 12px; } .blog-item h3{ font-size: 15px; } .blog-item p{ font-size: 12px; } .blog-item a:last-child{ font-size: 14px; } .contact-form .col-md-6 { display: block; margin-bottom: 10px; overflow: hidden; } .carousel-caption { right: 15%; left: 15%; padding-bottom: 30px; } } /* Хлебные крошки (MainTree::PrintMainTree) — .tree было классом обёртки, но контент рендерился как голый

    : unstyled, крупный, плюс на странице товара получалось два

    (этот и .pdp-title). Теперь