/* ========================================================================== AROS.su — визуальный слой в дизайн-системе aquamoiprofi.com Подключается ПОСЛЕДНИМ в , перекрывает bootstrap 3 + moneymaker2. Версия обновляется в header.tpl через ?v= (статика кэшируется на 10 лет) ВАЖНО: в теме bootstrap.min.css задаёт `html { font-size: 10px }`. Поэтому rem здесь НЕ используется — только px, иначе весь текст выходит на 62.5% от задуманного размера. ========================================================================== */ :root { /* Палитра — та же, что на aquamoiprofi.com */ --a-blue-700: #0f55be; --a-blue-600: #1668e0; --a-blue-500: #2e86f0; --a-blue-400: #5ba5f6; --a-blue-100: #d6e7fc; --a-blue-050: #eaf3fe; --a-blue-025: #f4f9fe; --a-navy-900: #0e2136; --a-navy-800: #17304a; --a-slate-600: #5a7189; --a-slate-500: #6d8299; --a-slate-400: #93a6b8; --a-slate-200: #dde7f0; --a-slate-100: #edf3f9; --a-white: #ffffff; /* #12874f на плашке #eaf9f1 даёт 4.2:1 — для жирных 13px мало, затемнено до 5.4:1 */ --a-green-600: #0f7344; --a-green-050: #eaf9f1; --a-amber-700: #96590a; --a-amber-050: #fdf4e7; --a-red-600: #c0341d; /* Фирменные #2aabee и #25d366 дают с белым значком всего 2.6:1 и 2.0:1 — значок на кружке не читается. Затемнено до 4.0:1 и 3.5:1, узнаваемость цвета при этом сохраняется. */ --a-tg: #1c86bf; --a-tg-dark: #166f9f; --a-wa: #0f9d4f; --a-wa-dark: #0c8241; --a-bg: var(--a-blue-025); --a-surface: var(--a-white); --a-text: var(--a-navy-900); --a-muted: var(--a-slate-600); --a-border: var(--a-slate-200); --a-font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Ритм — в px, см. примечание про html{font-size:10px} */ --a-sp-1: 4px; --a-sp-2: 8px; --a-sp-3: 12px; --a-sp-4: 16px; --a-sp-5: 24px; --a-sp-6: 32px; --a-sp-7: 40px; --a-sp-8: 56px; --a-r-sm: 8px; --a-r-md: 12px; --a-r-lg: 16px; --a-r-xl: 20px; --a-r-pill: 999px; --a-sh-xs: 0 1px 2px rgb(14 33 54 / .05); --a-sh-sm: 0 2px 8px rgb(14 33 54 / .06); --a-sh-md: 0 6px 20px rgb(14 33 54 / .08); --a-sh-lg: 0 14px 40px rgb(14 33 54 / .10); --a-sh-blue: 0 8px 20px rgb(22 104 224 / .28); --a-ease: cubic-bezier(.22, .61, .36, 1); --a-dur-fast: 90ms; --a-dur: 200ms; --a-dur-slow: 380ms; --a-header-h: 74px; } /* -------------------------------------------------------------------------- 1. База -------------------------------------------------------------------------- */ body { font-family: var(--a-font); font-size: 16px; line-height: 1.55; color: var(--a-text); background: var(--a-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { font-family: var(--a-font); font-weight: 700; color: var(--a-navy-900); letter-spacing: -.02em; line-height: 1.2; } a { color: var(--a-blue-700); transition: color var(--a-dur) var(--a-ease); } a:hover, a:focus { color: var(--a-blue-600); text-decoration: none; } :focus-visible { outline: 2px solid var(--a-blue-500); outline-offset: 2px; border-radius: 4px; } hr { border-top: 1px solid var(--a-border); margin: var(--a-sp-6) 0; } /* -------------------------------------------------------------------------- 2. Шапка (собственная разметка .a-header, см. header.tpl) -------------------------------------------------------------------------- */ .a-header { position: relative; z-index: 60; } .a-header__bar { position: sticky; top: 0; z-index: 60; background: var(--a-surface); border-bottom: 1px solid var(--a-border); } .a-header__row { display: flex; align-items: center; gap: var(--a-sp-5); min-height: var(--a-header-h); } /* Логотип */ .a-logo { flex: 0 0 auto; display: flex; align-items: center; } .a-logo img { display: block; width: auto; height: 42px; } .a-logo__text { font-size: 22px; font-weight: 700; color: var(--a-navy-900); } /* Основное меню */ .a-nav { flex: 1 1 auto; min-width: 0; } .a-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .a-nav__item { position: relative; } .a-nav__link { display: inline-flex; align-items: center; gap: 6px; height: var(--a-header-h); padding: 0 14px; font-size: 15px; font-weight: 500; line-height: var(--a-header-h); color: var(--a-navy-800); white-space: nowrap; cursor: pointer; } .a-nav__link:hover, .a-nav__link:focus, .a-nav__item.is-open > .a-nav__link { color: var(--a-blue-700); } .a-chev { width: 12px; height: 12px; transition: transform var(--a-dur) var(--a-ease); } .a-nav__item.is-open .a-chev { transform: rotate(180deg); } /* Выпадающий каталог */ .a-mega { position: absolute; top: 100%; left: 0; min-width: 280px; padding: var(--a-sp-2); background: var(--a-white); border: 1px solid var(--a-border); border-radius: var(--a-r-md); box-shadow: var(--a-sh-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--a-dur) var(--a-ease), transform var(--a-dur) var(--a-ease), visibility var(--a-dur); } .a-nav__item.is-open .a-mega, .a-nav__item:hover .a-mega { opacity: 1; visibility: visible; transform: translateY(0); } .a-mega__list, .a-mega__sub { list-style: none; margin: 0; padding: 0; } .a-mega__list > li > a { display: block; padding: 10px 12px; border-radius: var(--a-r-sm); font-size: 15px; font-weight: 500; color: var(--a-navy-900); } .a-mega__list > li > a:hover { background: var(--a-blue-050); color: var(--a-blue-700); } .a-mega__sub > li > a { display: block; padding: 7px 12px 7px 26px; border-radius: var(--a-r-sm); font-size: 14px; color: var(--a-slate-600); } .a-mega__sub > li > a:hover { background: var(--a-blue-050); color: var(--a-blue-700); } /* Инструменты справа */ .a-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--a-sp-3); margin-left: auto; } .a-phone { display: block; line-height: 1.2; text-align: right; white-space: nowrap; } .a-phone b { display: block; font-size: 17px; font-weight: 700; color: var(--a-navy-900); letter-spacing: -.01em; } .a-phone span { font-size: 12px; color: var(--a-slate-600); } .a-phone:hover b { color: var(--a-blue-700); } .a-msg { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; transition: filter var(--a-dur) var(--a-ease), transform var(--a-dur) var(--a-ease); } .a-msg svg { width: 20px; height: 20px; fill: currentColor; } .a-msg:hover { color: #fff; transform: translateY(-1px); } .a-msg--tg, .a-msg--tg:focus { background: var(--a-tg); } .a-msg--tg:hover { background: var(--a-tg-dark); } .a-msg--wa, .a-msg--wa:focus { background: var(--a-wa); } .a-msg--wa:hover { background: var(--a-wa-dark); } /* Модули OpenCart (поиск, корзина) внутри шапки */ .a-modules { margin: 0; padding: 0; float: none; display: flex; align-items: center; } .a-modules > li { float: none; list-style: none; position: relative; } /* Поиск — круглая кнопка-иконка */ .a-modules #search > a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--a-slate-100); color: var(--a-navy-800); transition: background var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease); } .a-modules #search > a:hover, .a-modules #search.open > a { background: var(--a-blue-050); color: var(--a-blue-700); } .a-modules #search > a .fa { margin: 0; font-size: 16px; } .a-modules #search > a span { display: none; } /* Корзина — синяя пилюля. Белый текст держим и в hover, иначе наследуется синий цвет ссылок и надпись пропадает. */ .a-modules--cart #cart > a, .a-modules--cart #cart > a:hover, .a-modules--cart #cart > a:focus, .a-modules--cart.open #cart > a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--a-r-pill); background: var(--a-blue-600); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: var(--a-sh-blue); transition: background var(--a-dur) var(--a-ease); } .a-modules--cart #cart > a:hover, .a-modules--cart #cart > a:focus { background: var(--a-blue-700); color: #fff; } .a-modules--cart #cart > a .fa-angle-down { display: none; } .a-modules--cart #cart > a .fa-stack { width: auto; height: auto; line-height: 1; } .a-modules--cart #cart > a .fa-stack .fa-circle { display: none; } .a-modules--cart #cart > a .fa-stack-1x { position: static; display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: var(--a-r-pill); background: rgb(255 255 255 / .22); font-size: 12px; font-weight: 700; line-height: 18px; color: #fff; } /* Выпадашки модулей */ .a-modules .dropdown-menu { left: auto; right: 0; border: 1px solid var(--a-border); border-radius: var(--a-r-md); box-shadow: var(--a-sh-lg); padding: var(--a-sp-3); margin-top: 8px; min-width: 300px; } .a-modules .dropdown-menu > li > a { border-radius: var(--a-r-sm); padding: 9px 12px; font-size: 14px; color: var(--a-navy-800); } .a-modules .dropdown-menu > li > a:hover { background: var(--a-blue-050); color: var(--a-blue-700); } /* Мобильные кнопки шапки */ .a-mob-btn { display: none; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; } .a-mob-btn--call { background: var(--a-blue-050); color: var(--a-blue-700); } .a-mob-btn--call:hover { background: var(--a-blue-100); color: var(--a-blue-700); } .a-mob-btn--tg, .a-mob-btn--tg:focus { background: var(--a-tg); color: #fff; } .a-mob-btn--tg:hover { background: var(--a-tg-dark); color: #fff; } .a-mob-btn svg { width: 19px; height: 19px; fill: currentColor; } .a-mob-btn .fa { font-size: 16px; } .a-burger { display: none; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--a-r-sm); background: var(--a-slate-100); cursor: pointer; } .a-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; border-radius: 2px; background: var(--a-navy-900); transition: transform var(--a-dur) var(--a-ease), opacity var(--a-dur) var(--a-ease); } .a-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .a-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .a-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Мобильная панель */ .a-panel { position: fixed; top: var(--a-header-h); right: 0; bottom: 0; width: min(360px, 88vw); z-index: 70; background: var(--a-white); border-left: 1px solid var(--a-border); overflow-y: auto; transform: translateX(100%); transition: transform var(--a-dur-slow) var(--a-ease); } .a-panel[hidden] { display: block; } .a-panel.is-open { transform: translateX(0); } .a-panel__inner { padding: var(--a-sp-5) var(--a-sp-4) var(--a-sp-8); } .a-panel__group + .a-panel__group { margin-top: var(--a-sp-5); } .a-panel__head { margin: 0 0 var(--a-sp-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--a-slate-600); } .a-panel__link { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: var(--a-r-sm); background: transparent; font-size: 16px; font-weight: 500; color: var(--a-navy-900); text-align: left; } .a-panel__link:hover { background: var(--a-blue-050); color: var(--a-blue-700); } .a-panel__link--btn { color: var(--a-blue-700); cursor: pointer; } .a-panel__scrim { position: fixed; inset: var(--a-header-h) 0 0; z-index: 69; background: rgb(14 33 54 / .4); opacity: 0; transition: opacity var(--a-dur) var(--a-ease); } .a-panel__scrim[hidden] { display: none; } .a-panel__scrim.is-on { opacity: 1; } body.a-panel-open { overflow: hidden; } /* Переключение десктоп / мобильный вид шапки */ @media (max-width: 991px) { :root { --a-header-h: 64px; } .a-nav, .a-phone, .a-msg { display: none; } .a-mob-btn { display: inline-flex; } .a-burger { display: block; } .a-header__row { gap: var(--a-sp-2); } .a-tools { gap: var(--a-sp-2); } .a-logo img { height: 34px; } .a-modules--cart #cart > a { padding: 0 12px; height: 40px; font-size: 14px; } .a-modules--cart #cart > a #cart-total { display: none; } .a-modules #search { display: none; } } @media (max-width: 359px) { .a-mob-btn--call { display: none; } } /* -------------------------------------------------------------------------- 3. Хлебные крошки и заголовок -------------------------------------------------------------------------- */ .breadcrumb, .breadcrumb.text-center { background: transparent; padding: 18px 0 4px; margin: 0; font-size: 14px; color: var(--a-slate-600); text-align: left; } .breadcrumb > li + li:before { content: '/'; color: var(--a-slate-200); padding: 0 8px; } .breadcrumb > li > a { color: var(--a-slate-600); } .breadcrumb > li > a:hover { color: var(--a-blue-700); } .breadcrumb > .active { color: var(--a-slate-600); } #content > h1.content-title, #content > .content-title { font-size: clamp(26px, 1.6vw + 20px, 36px); font-weight: 700; letter-spacing: -.025em; color: var(--a-navy-900); margin: 6px 0 var(--a-sp-5); text-align: left; } /* -------------------------------------------------------------------------- 4. Кнопки -------------------------------------------------------------------------- */ .a-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--a-sp-2); min-height: 44px; padding: 0 var(--a-sp-5); border: 1px solid transparent; border-radius: var(--a-r-sm); font-family: var(--a-font); font-weight: 600; font-size: 15px; text-align: center; white-space: nowrap; cursor: pointer; transition: background var(--a-dur) var(--a-ease), border-color var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease), box-shadow var(--a-dur) var(--a-ease), transform var(--a-dur-fast) var(--a-ease); } .a-btn:active { transform: translateY(1px); } /* Белый текст закрепляем и для hover/focus — иначе наследуется синий цвет ссылок и надпись на синей кнопке становится нечитаемой. */ .a-btn--primary, .a-btn--primary:hover, .a-btn--primary:focus { background: var(--a-blue-600); color: #fff; box-shadow: var(--a-sh-blue); } .a-btn--primary:hover, .a-btn--primary:focus { background: var(--a-blue-700); } .a-btn--soft, .a-btn--soft:focus { background: var(--a-white); color: var(--a-navy-900); border-color: var(--a-border); box-shadow: var(--a-sh-xs); } .a-btn--soft:hover { background: var(--a-blue-050); border-color: var(--a-blue-400); color: var(--a-blue-700); } .a-btn--tint, .a-btn--tint:focus { background: var(--a-blue-050); color: var(--a-blue-700); } .a-btn--tint:hover { background: var(--a-blue-100); color: var(--a-blue-700); } .a-btn--block { width: 100%; } .a-btn--disabled, .a-btn[disabled] { opacity: .55; pointer-events: none; box-shadow: none; } .a-btn--lg { min-height: 54px; font-size: 16px; border-radius: var(--a-r-md); } .a-btn--icon { width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; } /* Штатные bootstrap-кнопки приводим к тому же виду */ .btn { font-family: var(--a-font); font-weight: 600; font-size: 15px; border-radius: var(--a-r-sm); border-width: 1px; min-height: 40px; transition: background var(--a-dur) var(--a-ease), border-color var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease); } .btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-primary:active { background: var(--a-blue-600); border-color: var(--a-blue-600); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--a-blue-700); border-color: var(--a-blue-700); color: #fff; } .btn-danger, .btn-danger:focus, .btn-danger:hover { background: var(--a-red-600); border-color: var(--a-red-600); color: #fff; } .btn-danger:hover { background: #a62c18; border-color: #a62c18; } .btn-default, .btn-default:focus { background: var(--a-white); border-color: var(--a-border); color: var(--a-navy-900); } .btn-default:hover { background: var(--a-blue-050); border-color: var(--a-blue-400); color: var(--a-blue-700); } /* -------------------------------------------------------------------------- 5. Чипы наличия -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: var(--a-r-pill); white-space: nowrap; } .chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .chip--ok { color: var(--a-green-600); background: var(--a-green-050); } .chip--order { color: var(--a-amber-700); background: var(--a-amber-050); } .chip--out { color: var(--a-slate-600); background: var(--a-slate-100); } /* -------------------------------------------------------------------------- 6. Подбор по числу постов -------------------------------------------------------------------------- */ .a-post-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a-sp-3); margin: 0 0 var(--a-sp-5); } @media (max-width: 767px) { .a-post-picker { grid-template-columns: repeat(2, 1fr); gap: var(--a-sp-2); } } .post-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; height: 100%; background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r-md); padding: var(--a-sp-4) var(--a-sp-3); transition: box-shadow var(--a-dur) var(--a-ease), border-color var(--a-dur) var(--a-ease), transform var(--a-dur) var(--a-ease); } .post-tile:hover { box-shadow: var(--a-sh-md); border-color: var(--a-blue-400); transform: translateY(-2px); } .post-tile .icon { font-size: 28px; line-height: 1; margin-bottom: 8px; } .post-tile .title { font-size: 18px; font-weight: 700; color: var(--a-navy-900); } .post-tile:hover .title { color: var(--a-blue-700); } .post-tile .desc { font-size: 13px; color: var(--a-muted); line-height: 1.35; margin-top: 2px; } /* -------------------------------------------------------------------------- 7. Теги документов -------------------------------------------------------------------------- */ .doc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-sp-2); margin: 0 0 var(--a-sp-6); } .doc-tag { display: inline-block; background: var(--a-white); border: 1px solid var(--a-border); border-radius: var(--a-r-pill); padding: 7px 15px; font-size: 13px; font-weight: 500; color: var(--a-slate-600); line-height: 1.35; transition: border-color var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease), background var(--a-dur) var(--a-ease); } .doc-tag:hover { background: var(--a-blue-050); border-color: var(--a-blue-400); color: var(--a-blue-700); } /* -------------------------------------------------------------------------- 8. Карточка товара в каталоге (анатомия pcard) -------------------------------------------------------------------------- */ .row.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--a-sp-4); margin: 0 0 var(--a-sp-6); } .row.products::before, .row.products::after { display: none; } /* moneymaker2 раздаёт ширины селектором #content.col-sm-9 .product-layout.product-grid (специфичность 0,3,1) — здесь нужен селектор не слабее. min-width: 0 обязателен: у grid-элемента min-width: auto = min-content, и длинные подписи характеристик распирают колонку. */ #content .row.products .product-layout, #content .row.products .product-layout.product-grid, #content .row.products .product-layout.product-list { width: 100%; max-width: none; min-width: 0; float: none; padding: 0; margin: 0; display: flex; } .pcard { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r-md); padding: 0; overflow: hidden; transition: box-shadow var(--a-dur) var(--a-ease), border-color var(--a-dur) var(--a-ease), transform var(--a-dur) var(--a-ease); } .pcard:hover { box-shadow: var(--a-sh-md); border-color: var(--a-blue-400); transform: translateY(-2px); } /* moneymaker2 центрирует содержимое .product-thumb селектором большей специфичности, поэтому выравнивание задаём таким же «тяжёлым» селектором */ #content .row.products .pcard, #content .row.products .pcard__body { text-align: left; } .pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--a-white); margin: 0; padding: 0; border-radius: calc(var(--a-r-md) - 1px) calc(var(--a-r-md) - 1px) 0 0; } .pcard__media > a { position: absolute; inset: 0; display: block; padding: var(--a-sp-4); } .pcard__media img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.02); transition: transform var(--a-dur-slow) var(--a-ease); } .pcard:hover .pcard__media img { transform: scale(1.07); } .pcard__media .stickers { top: 10px; left: 10px; z-index: 2; } .pcard__media .rating { top: 10px; right: 10px; z-index: 2; } .pcard__media .rating .fa-star { color: var(--a-slate-200); font-size: 12px; } .pcard__media .rating .fa-star.active { color: #e8940c; } .pcard__body { display: flex; flex-direction: column; gap: var(--a-sp-3); flex: 1; padding: var(--a-sp-4); } .pcard__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; } .pcard__title a { color: var(--a-navy-900); } .pcard__title a:hover { color: var(--a-blue-700); } /* Характеристики: приходят готовой разметкой .df / .attr_name / .attr_value */ .pcard__feats { display: grid; gap: 6px; font-size: 14px; } .pcard__feats .df { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-sp-2); padding-left: 15px; line-height: 1.4; } .pcard__feats .df::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--a-blue-500); } /* stylesheet.custom.store0.css задаёт этим span-ам `font-size: 12px !important`, а .attr_value ещё и float:right + max-width:101px + ellipsis (из-за чего значения обрезались). Перебить можно только своим !important. */ .pcard__feats .attr_name, .pcard__feats span.attr_name { font-size: 14px !important; color: var(--a-slate-600); display: inline; min-width: 0; overflow-wrap: anywhere; } .pcard__feats .attr_value, .pcard__feats span.attr_value { font-size: 14px !important; font-weight: 600; color: var(--a-navy-900); text-align: right; float: none; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; flex: 0 1 auto; } .pcard__foot { display: flex; align-items: center; gap: var(--a-sp-2); margin-top: auto; padding-top: var(--a-sp-1); flex-wrap: wrap; } .pcard__foot .chip { margin-left: auto; } /* Только внутри карточки каталога: на главной .price лежит ВНУТРИ синей кнопки, и глобальное правило красило синий текст по синему фону. */ .pcard .price { font-weight: 700; font-size: 20px; color: var(--a-blue-700); line-height: 1.2; } .pcard .price-old { color: var(--a-slate-600); text-decoration: line-through; font-size: 14px; font-weight: 500; margin-left: 4px; } .pcard__actions { display: flex; gap: var(--a-sp-2); } .pcard__actions .a-btn--block { flex: 1 1 auto; } /* Строка сортировки */ .row.limits .btn-group .btn { border-radius: var(--a-r-sm) !important; margin-right: 6px; } /* Пагинация */ .row.paginator { border-top: 1px solid var(--a-border); padding-top: var(--a-sp-4); font-size: 14px; color: var(--a-muted); } .pagination > li > a, .pagination > li > span { border-color: var(--a-border); color: var(--a-navy-800); } .pagination > li > a:hover { background: var(--a-blue-050); color: var(--a-blue-700); } .pagination > .active > span, .pagination > .active > span:hover { background: var(--a-blue-600); border-color: var(--a-blue-600); color: #fff; } /* -------------------------------------------------------------------------- 9. Текст описания категории -------------------------------------------------------------------------- */ .row.catalog-descr { margin-bottom: var(--a-sp-6); } .row.catalog-descr > [class*="col-"] { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: var(--a-r-lg); padding: var(--a-sp-6) var(--a-sp-7); } .catalog-descr h2, .catalog-descr h3 { font-size: clamp(20px, 1vw + 16px, 28px); font-weight: 700; margin: var(--a-sp-6) 0 var(--a-sp-4); } .catalog-descr h2:first-child, .catalog-descr h3:first-child { margin-top: 0; } .catalog-descr p { margin-bottom: var(--a-sp-4); font-size: 16px; color: var(--a-navy-800); } .catalog-descr ul, .catalog-descr ol { padding-left: 0; margin: 0 0 var(--a-sp-5); list-style: none; } .catalog-descr ul > li, .catalog-descr ol > li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 16px; color: var(--a-navy-800); } .catalog-descr ul > li::before { content: ''; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--a-blue-500); } .catalog-descr ol { counter-reset: a-step; } .catalog-descr ol > li { counter-increment: a-step; padding-left: 34px; } .catalog-descr ol > li::before { content: counter(a-step); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--a-blue-050); color: var(--a-blue-700); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .row.catalog-descr > [class*="col-"] { padding: var(--a-sp-5) var(--a-sp-4); border-radius: var(--a-r-md); } } /* -------------------------------------------------------------------------- 10. FAQ — разметка приходит из описания категории со своим inline-