/* ===================================================== KREATOR LAB BG — ADDITIONAL CSS ===================================================== */ /* =========================== LOGO =========================== */ img[src*="logo"] { max-width: 120px !important; height: auto !important; } /* =========================== 404 PAGE =========================== */ body.error404 main.site-main { background-color: red; } /* =========================== SITE TITLE AND DESCRIPTION =========================== */ /* Kreator Lab BG — без изменения исходного цвета */ .site-branding .site-title a { cursor: default !important; pointer-events: none !important; text-decoration: none !important; transition: none !important; } /* Слоган — цвет голубой полосы */ .site-branding .site-description, .site-branding .site-description a, .site-branding .site-description a:link, .site-branding .site-description a:visited, .site-branding .site-description a:hover, .site-branding .site-description a:focus, .site-branding .site-description a:active { color: #4CBAE3 !important; text-decoration: none !important; cursor: default !important; transition: none !important; } /* Слоган не реагирует на нажатия */ .site-branding .site-description a { pointer-events: none !important; } /* =========================== EMAIL LINKS =========================== */ a.custom-email { color: #003366 !important; text-decoration: none; transition: color 0.3s ease; } a.custom-email:hover { color: #ff6600 !important; text-decoration: underline; } .email-link { color: #001F54 !important; text-decoration: none !important; } .email-link:hover { color: #ff6600 !important; text-decoration: underline !important; } /* ===================================================== PRODUCT GRID — REAL PRODUCTS Каталоги и страницы категорий ===================================================== */ @media (min-width: 768px) { /* Карточка товара */ .woocommerce ul.products li.product:not(.product-category), .woocommerce-page ul.products li.product:not(.product-category) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; min-height: 390px; text-align: center; } /* Ссылка внутри карточки товара */ .woocommerce ul.products li.product:not(.product-category) > a.woocommerce-loop-product__link, .woocommerce-page ul.products li.product:not(.product-category) > a.woocommerce-loop-product__link { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } /* Изображение товара */ .woocommerce ul.products li.product:not(.product-category) a img, .woocommerce-page ul.products li.product:not(.product-category) a img { display: block; width: 100%; max-width: 260px; height: 200px; margin: 0 auto 8px; padding: 2px; box-sizing: border-box; object-fit: contain; background: #fff; } /* Название товара */ .woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title, .woocommerce-page ul.products li.product:not(.product-category) .woocommerce-loop-product__title { width: 100%; height: auto; margin: 4px 0 12px; padding: 0 6px; box-sizing: border-box; font-size: 1.3rem; font-weight: 800; line-height: 1.35; color: #111; text-align: center; white-space: normal; overflow-wrap: break-word; word-break: normal; } /* Кнопка Read more внизу карточки */ .woocommerce ul.products li.product:not(.product-category) a.button, .woocommerce-page ul.products li.product:not(.product-category) a.button { margin-top: auto; } } /* ===================================================== CATEGORY TILES — ALL SCREEN SIZES Исправление длинных названий категорий ===================================================== */ /* * Важно: * используются также селекторы без .woocommerce, * поскольку категории могут выводиться через блок или шорткод * на обычной странице WordPress. */ .woocommerce ul.products li.product-category, .woocommerce-page ul.products li.product-category, ul.products li.product-category { min-width: 0 !important; box-sizing: border-box !important; text-align: center !important; overflow: visible !important; } /* Ссылка внутри карточки категории */ .woocommerce ul.products li.product-category > a, .woocommerce-page ul.products li.product-category > a, ul.products li.product-category > a { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; text-align: center !important; white-space: normal !important; overflow: visible !important; } /* Заголовок категории */ .woocommerce ul.products li.product-category .woocommerce-loop-category__title, .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title, ul.products li.product-category .woocommerce-loop-category__title { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; transform: none !important; display: block !important; width: 100% !important; max-width: 260px !important; min-width: 0 !important; height: auto !important; min-height: 3.4em !important; margin: 8px auto 0 !important; padding: 0 6px !important; box-sizing: border-box !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: #111 !important; text-align: center !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; word-break: normal !important; hyphens: none !important; } /* Счётчик товаров — отдельная строка */ .woocommerce ul.products li.product-category .woocommerce-loop-category__title .count, .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title .count, ul.products li.product-category .woocommerce-loop-category__title .count { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 3px auto 0 !important; padding-left: 3px !important; padding-right: 3px !important; line-height: 1.2 !important; text-align: center !important; vertical-align: baseline !important; } /* ===================================================== CATEGORY TILES — DESKTOP AND TABLET ===================================================== */ @media (min-width: 768px) { /* Карточка категории */ .woocommerce ul.products li.product-category, .woocommerce-page ul.products li.product-category, ul.products li.product-category { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } /* Изображение категории */ .woocommerce ul.products li.product-category a img, .woocommerce-page ul.products li.product-category a img, ul.products li.product-category a img { display: block !important; width: 100% !important; max-width: 260px !important; height: 200px !important; margin: 0 auto 8px !important; padding: 2px !important; box-sizing: border-box !important; object-fit: contain !important; background: #fff !important; } } /* ===================================================== CATEGORY TILES — MOBILE ===================================================== */ @media (max-width: 767px) { /* Список категорий */ .woocommerce ul.products, .woocommerce-page ul.products, ul.products { box-sizing: border-box; } /* Одна категория на всю ширину */ .woocommerce ul.products li.product-category, .woocommerce-page ul.products li.product-category, ul.products li.product-category { float: none !important; clear: both !important; display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 30px !important; padding-left: 12px !important; padding-right: 12px !important; } /* Ссылка категории */ .woocommerce ul.products li.product-category > a, .woocommerce-page ul.products li.product-category > a, ul.products li.product-category > a { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important; } /* Изображение категории */ .woocommerce ul.products li.product-category a img, .woocommerce-page ul.products li.product-category a img, ul.products li.product-category a img { display: block !important; width: 100% !important; max-width: 270px !important; height: 210px !important; margin: 0 auto 8px !important; padding: 2px !important; box-sizing: border-box !important; object-fit: contain !important; background: #fff !important; } /* Название категории */ .woocommerce ul.products li.product-category .woocommerce-loop-category__title, .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title, ul.products li.product-category .woocommerce-loop-category__title { width: 100% !important; max-width: 280px !important; height: auto !important; min-height: 0 !important; margin: 10px auto 0 !important; padding: 0 5px !important; font-size: 1rem !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } } /* ===================================================== SHOPAY PRO — белые значки соцсетей на голубом фоне ===================================================== */ /* Внутренний элемент иконки */ #shopay-follow-icons-wrapper .follow-us-icon:hover a i.fab, #shopay-follow-icons-wrapper .follow-us-icon a:hover i.fab, #shopay-follow-icons-wrapper .follow-us-icon a:focus i.fab { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; opacity: 1 !important; } /* Сам символ Font Awesome находится в ::before */ #shopay-follow-icons-wrapper .follow-us-icon:hover a i.fab::before, #shopay-follow-icons-wrapper .follow-us-icon a:hover i.fab::before, #shopay-follow-icons-wrapper .follow-us-icon a:focus i.fab::before { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; opacity: 1 !important; } /* ===================================================== HEADER EMAIL — CLICKABLE LINK Черный цвет, голубой при наведении ===================================================== */ /* Обычное состояние */ .site-info-contact .header-email-link, .site-info-contact .header-email-link:link, .site-info-contact .header-email-link:visited { color: #000000 !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; transition: color 0.25s ease !important; } /* При наведении и фокусе */ .site-info-contact .header-email-link:hover, .site-info-contact .header-email-link:focus, .site-info-contact .header-email-link:focus-visible { color: #29ABE2 !important; text-decoration: none !important; } ===================================================== HEADER — COMPANY DESCRIPTION AND MENU POSITION Описание компании над меню, меню ближе к голубой полосе ===================================================== */ @media (min-width: 1024px) { /* * Главное меню переводим во flex-режим, * чтобы пункты оставались ровно по центру. */ #primary-menu { position: relative !important; z-index: 100 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; /* * Опускаем About / Service / Equipment / Contacts * ближе к голубой полосе. */ transform: translateY(64px) !important; } /* * Описание компании на прежнем месте меню. */ #primary-menu::before { content: "Supply and Service of Laboratory and Analytical Equipment"; position: absolute !important; top: -62px !important; left: 50% !important; transform: translateX(-50%) !important; display: block !important; width: 760px !important; max-width: calc(100vw - 500px) !important; margin: 0 !important; padding: 0 15px !important; box-sizing: border-box !important; color: #333333 !important; font-size: 19px !important; font-weight: 500 !important; line-height: 1.35 !important; text-align: center !important; text-transform: none !important; letter-spacing: normal !important; white-space: normal !important; pointer-events: none !important; } /* * Убираем float, который тема может задавать * пунктам главного меню. */ #primary-menu > li { position: relative !important; float: none !important; display: block !important; flex: 0 0 auto !important; } /* * Сохраняем корректную работу выпадающего * списка Equipment. */ #primary-menu > li.menu-item-has-children { position: relative !important; } #primary-menu .sub-menu { z-index: 9999 !important; } } /* ===================================================== HEADER — SMALL DESKTOP Адаптация описания для небольших экранов ===================================================== */ @media (min-width: 1024px) and (max-width: 1250px) { #primary-menu { transform: translateY(60px) !important; } #primary-menu::before { top: -60px !important; width: 580px !important; max-width: 580px !important; font-size: 17px !important; line-height: 1.3 !important; } } /* ===================================================== SHOPAY PRO — HIDE UNUSED STICKY HEADER SIDEBAR Убираем лишнюю кнопку и боковую панель с email ===================================================== */ .sticky-header-sidebar-section { display: none !important; }