/* Shop3 — компоненты темы. Только роли и шкалы из tokens.css (var(--s3-*)): без сырых цветов и чисел вне шкал (canon.md 6.2). Bootstrap 3 подключён раньше как слой совместимости; здесь его база перекрывается токенами. */ /* ---------- база ---------- */ html { font-size: var(--s3-page-root-font-size); -webkit-text-size-adjust: 100%; } body { min-height: var(--s3-viewport-screen-height); margin: 0; background: var(--s3-bg); color: var(--s3-text); font: var(--s3-font-weight-regular) var(--s3-font-size-md)/1.55 var(--s3-font-family-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--s3-font-family-heading); color: inherit; line-height: var(--s3-line-height-snug); } a { color: var(--s3-link); } a:hover, a:focus { color: var(--s3-link); text-decoration: underline; } /* ссылка внутри текста отличается не только цветом (WCAG 1.4.1): согласие с условиями, статьи, описания, подсказки */ p a, li > label a, .s3-prose a, .s3-check a, .s3-notice a, .s3-muted a, .s3-field__help a { text-decoration: underline; } .s3-prose a.s3-btn { text-decoration: none; } img { max-width: 100%; height: auto; } /* .dropdown-toggle: у Bootstrap .dropdown-toggle:focus { outline: 0 } сильнее :focus-visible — кнопка корзины в шапке (канон §4.2) */ /* одно кольцо у всего, что получает фокус с клавиатуры. У Bootstrap a:focus, .btn:focus и флажков input[type]:focus — кольцо браузера (auto, с отрицательным отступом) с той же или большей специфичностью, чем :focus-visible: перекрываем теми же селекторами (shop3.css грузится позже), а после щелчка мышью (:focus без :focus-visible) кольца Bootstrap нет */ :focus-visible, a:focus-visible, .btn:focus-visible, .btn.active:focus-visible, .dropdown-toggle:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input[type="file"]:focus-visible { outline: var(--s3-border-width-thick) solid var(--s3-focus); outline-offset: var(--s3-border-width-thick); } a:focus:not(:focus-visible), .btn:focus:not(:focus-visible), input[type="checkbox"]:focus:not(:focus-visible), input[type="radio"]:focus:not(:focus-visible), input[type="file"]:focus:not(:focus-visible) { outline: none; } .s3-i { width: var(--s3-size-icon-md); height: var(--s3-size-icon-md); flex: none; vertical-align: middle; } .s3-i--sm { width: var(--s3-size-icon-xs); height: var(--s3-size-icon-xs); } .s3-muted { color: var(--s3-text-muted); } /* видно экранному диктору и поисковику, не видно глазу */ .s3-visually-hidden { position: absolute; width: var(--s3-border-width-thin); height: var(--s3-border-width-thin); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .s3-skip { position: absolute; inset-inline-start: var(--s3-space-4); top: var(--s3-space-4); z-index: var(--s3-z-skip); transform: translateY(var(--s3-skip-link-offset)); } .s3-skip:focus { transform: none; background: var(--s3-surface); padding: var(--s3-space-2) var(--s3-space-4); } [hidden] { display: none !important; } .s3-container { box-sizing: border-box; width: 100%; max-width: var(--s3-container-width); margin: 0 auto; padding: 0 var(--s3-container-gutter); } .s3-page { padding-top: var(--s3-layout-page-offset); padding-bottom: var(--s3-space-7); } /* первый блок под шапкой — во всю ширину: отступа нет (shop3.flush_top, класс на ; tokens.md §2.3а) */ .s3-flush-top .s3-page { padding-top: 0; } .s3-h1 { font-size: var(--s3-font-size-2xl); font-weight: var(--s3-font-weight-bold); margin: 0 0 var(--s3-space-4); } .s3-h2 { font-size: var(--s3-font-size-xl); font-weight: var(--s3-font-weight-bold); margin: 0 0 var(--s3-space-4); } .s3-prose { color: var(--s3-text-muted); max-width: var(--s3-prose-measure); } .s3-prose p:last-child { margin-bottom: 0; } /* ---------- кнопки ---------- */ .s3-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3-button-gap); box-sizing: border-box; min-height: var(--s3-button-height); padding: 0 var(--s3-button-padding-inline); border: var(--s3-border-width-thin) solid transparent; border-radius: var(--s3-button-radius); cursor: pointer; font: var(--s3-font-weight-medium) var(--s3-font-size-sm)/1 var(--s3-font-family-body); text-decoration: none; transition: background var(--s3-duration-fast), color var(--s3-duration-fast), border-color var(--s3-duration-fast); } /* кнопка из : a:hover, a:focus (0,1,1) подчёркивал бы её и красил в цвет ссылки (VD-2 #2) */ .s3-btn:is(:hover, :focus) { text-decoration: none; } .s3-btn--primary { background: var(--s3-primary); color: var(--s3-on-primary); } /* заливка наведения — и при фокусе с клавиатуры, но не после щелчка мышью: иначе кнопка «залипает» до щелчка в другом месте (VD-2 #11) */ .s3-btn--primary:hover, .s3-btn--primary:focus-visible { background: var(--s3-primary-hover); color: var(--s3-on-primary); } .s3-btn--secondary { background: transparent; color: var(--s3-text); border-color: var(--s3-border); } .s3-btn--secondary:hover, .s3-btn--secondary:focus-visible { border-color: var(--s3-text); color: var(--s3-text); } .s3-btn--accent { background: var(--s3-button-fill-accent); color: var(--s3-button-fill-accent-on); } .s3-btn--accent:is(:hover, :focus) { color: var(--s3-button-fill-accent-on); } .s3-btn[disabled], .s3-btn.disabled { opacity: var(--s3-opacity-muted); pointer-events: none; } .s3-icon-btn { display: inline-grid; place-items: center; width: var(--s3-size-control-md); height: var(--s3-size-control-md); padding: 0; border: 0; border-radius: var(--s3-radius-pill); background: var(--s3-surface); color: var(--s3-text); box-shadow: var(--s3-shadow-sm); cursor: pointer; } .s3-icon-btn:hover { color: var(--s3-link); } .s3-icon-btn .s3-i { width: var(--s3-size-icon-sm); height: var(--s3-size-icon-sm); } /* Bootstrap-кнопки модулей и непереоформленных страниц — в цвета палитры */ .btn-primary { background: var(--s3-primary); border-color: var(--s3-primary); color: var(--s3-on-primary); border-radius: var(--s3-button-radius); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--s3-primary-hover); border-color: var(--s3-primary-hover); color: var(--s3-on-primary); } .btn-default { background: var(--s3-surface); color: var(--s3-text); border-color: var(--s3-border); border-radius: var(--s3-button-radius); } .form-control { background: var(--s3-surface); color: var(--s3-text); border-color: var(--s3-border); border-radius: var(--s3-field-radius); box-shadow: none; } .table > tbody > tr > td, .table > thead > tr > td, .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--s3-border-subtle); } .well, .panel, .list-group-item, .dropdown-menu { background: var(--s3-surface); border-color: var(--s3-border-subtle); color: var(--s3-text); } .dropdown-menu > li > a { color: var(--s3-text); } .dropdown-menu > li > a:hover { background: var(--s3-surface-alt); color: var(--s3-text); } .alert { border-radius: var(--s3-alert-radius); } /* Страницы на штатных шаблонах (пошаговый чекаут в режиме «OpenCart default», страницы сторонних модулей): разметку не трогаем — на неё опираются скрипты модулей, — подгоняем вид под тему: ширина и поля контейнера, крошки, заголовки, панели-шаги */ .container { width: auto; max-width: var(--s3-container-width); padding-inline: var(--s3-container-gutter); } .container > .breadcrumb { margin: var(--s3-space-4) 0; padding: 0; background: transparent; font-size: var(--s3-font-size-xs); } .container > .breadcrumb a { color: var(--s3-text-muted); } .container > .breadcrumb > li + li::before { color: var(--s3-text-muted); } .container h1 { margin: 0 0 var(--s3-space-4); font-size: var(--s3-font-size-2xl); font-weight: var(--s3-font-weight-bold); } .container h2 { font-size: var(--s3-font-size-xl); font-weight: var(--s3-font-weight-bold); } .container h3, .container legend { font-size: var(--s3-font-size-lg); font-weight: var(--s3-font-weight-bold); } .container legend { border-bottom-color: var(--s3-border-subtle); color: var(--s3-text); } .container label { font-weight: var(--s3-font-weight-medium); } .panel { border-radius: var(--s3-panel-radius); box-shadow: none; } .panel-group .panel + .panel { margin-top: var(--s3-space-2); } .panel-default > .panel-heading { padding: var(--s3-space-3) var(--s3-space-4); border-color: var(--s3-border-subtle); border-radius: var(--s3-panel-radius) var(--s3-panel-radius) 0 0; background: var(--s3-surface-alt); color: var(--s3-text); } .panel-title { font-size: var(--s3-font-size-md); font-weight: var(--s3-font-weight-medium); } .panel-title > a { color: var(--s3-link); } .panel-body { padding: var(--s3-space-5); } .form-control { min-height: var(--s3-size-control-md); } .btn { min-height: var(--s3-size-control-md); } .text-danger { color: var(--s3-danger); } .has-error .form-control { border-color: var(--s3-danger); } /* ---------- поля ---------- */ .s3-input { box-sizing: border-box; width: 100%; min-height: var(--s3-field-height); padding: 0 var(--s3-field-padding-inline); border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-field-radius); background: var(--s3-surface); color: var(--s3-text); font: inherit; } .s3-input:focus { outline: none; border-color: var(--s3-primary); box-shadow: 0 0 0 var(--s3-border-width-ring) color-mix(in srgb, var(--s3-focus) var(--s3-field-focus-ring-mix), transparent); } .s3-field { display: flex; flex-direction: column; gap: var(--s3-space-1); margin: 0; font-weight: var(--s3-font-weight-regular); } .s3-field__label { font-size: var(--s3-font-size-sm); color: var(--s3-text-muted); } .s3-check { display: inline-flex; align-items: center; gap: var(--s3-check-gap); font-weight: var(--s3-font-weight-regular); margin: 0; } /* Верхняя строка, хедер, меню категорий и подвал — в stylesheet/chrome/{header,menu,footer}.css: подключаются после этого файла (event.php headerAssets(), CHROME_CSS), правки шапки, меню и подвала — только там */ /* боковое меню категорий (модуль category) */ .s3-catnav ul { margin: 0; padding: 0; list-style: none; } .s3-catnav > ul > li > a { display: block; padding: var(--s3-space-2) var(--s3-space-3); border-radius: var(--s3-radius-sm); color: var(--s3-text); font-size: var(--s3-font-size-sm); text-decoration: none; } .s3-catnav a:hover { background: var(--s3-surface-alt); color: var(--s3-text); } .s3-catnav li.is-active > a { font-weight: var(--s3-font-weight-bold); color: var(--s3-link); } .s3-catnav ul ul { margin-block: var(--s3-space-1) var(--s3-space-2); margin-inline: var(--s3-space-3) 0; padding-inline-start: var(--s3-space-3); border-inline-start: var(--s3-border-width-thin) solid var(--s3-border-subtle); } .s3-catnav ul ul a { display: block; padding: var(--s3-space-1) 0; color: var(--s3-text-muted); font-size: var(--s3-font-size-sm); text-decoration: none; } .s3-layout__aside { min-width: 0; } /* ---------- хлебные крошки, раскладка ---------- */ .s3-breadcrumbs { margin: 0 0 var(--s3-space-4); font-size: var(--s3-font-size-xs); color: var(--s3-text-muted); } .s3-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s3-space-1); margin: 0; padding: 0; list-style: none; } .s3-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--s3-space-1); opacity: var(--s3-opacity-overlay); } .s3-breadcrumbs a { color: var(--s3-text-muted); } .s3-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3-space-6); } .s3-layout--left { grid-template-columns: var(--s3-layout-aside) minmax(0, 1fr); } .s3-layout--right { grid-template-columns: minmax(0, 1fr) var(--s3-layout-aside); } .s3-layout--left.s3-layout--right { grid-template-columns: var(--s3-layout-aside-narrow) minmax(0, 1fr) var(--s3-layout-aside-narrow); } .s3-chip { padding: var(--s3-chip-padding-block) var(--s3-chip-padding-inline); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-chip-radius); color: var(--s3-text); font-size: var(--s3-font-size-sm); text-decoration: none; background: var(--s3-surface); } .s3-chip:hover { border-color: var(--s3-primary); color: var(--s3-link); text-decoration: none; } /* ---------- сетка и карточка ---------- */ .s3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--s3-card-min-width), 1fr)); gap: var(--s3-space-5) var(--s3-space-4); } .s3-rail { margin-bottom: var(--s3-space-7); } .s3-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--s3-surface); border: var(--s3-card-border-width) solid var(--s3-border-subtle); border-radius: var(--s3-card-radius); } .s3-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: var(--s3-card-image-ratio); border-radius: var(--s3-card-radius) var(--s3-card-radius) var(--s3-card-image-radius-bottom) var(--s3-card-image-radius-bottom); background: var(--s3-surface-alt); } .s3-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--s3-duration-base) var(--s3-easing-standard); } .s3-card:hover .s3-card__media img { transform: scale(var(--s3-card-image-hover-scale)); } .s3-card__actions { position: absolute; top: var(--s3-space-2); inset-inline-end: var(--s3-space-2); display: flex; flex-direction: column; gap: var(--s3-space-1); opacity: 0; transition: opacity var(--s3-duration-base); } .s3-card:hover .s3-card__actions, .s3-card:focus-within .s3-card__actions { opacity: 1; } .s3-tag { position: absolute; top: var(--s3-space-2); inset-inline-start: var(--s3-space-2); padding: var(--s3-chip-tag-padding-block) var(--s3-chip-tag-padding-inline); border-radius: var(--s3-chip-tag-radius); font-size: var(--s3-font-size-xs); font-weight: var(--s3-font-weight-bold); text-transform: uppercase; letter-spacing: var(--s3-font-tracking-wide); } .s3-tag--sale { background: var(--s3-chip-tag-accent); color: var(--s3-chip-tag-accent-on); } .s3-card__body { display: flex; flex-direction: column; gap: var(--s3-card-gap); padding: var(--s3-card-padding-block) var(--s3-card-padding-inline) var(--s3-space-2); flex: 1; } .s3-card__name { margin: 0; font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); line-height: var(--s3-line-height-normal); } .s3-card__name a { color: var(--s3-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .s3-card__name a:hover { color: var(--s3-link); } /* Кнопка карточки (ЗВ-6, design/card-default.md). Тихая: цвет появляется там, куда покупатель уже смотрит. Цвета — роли: они следуют палитре области */ .s3-card__cart { align-self: flex-start; min-height: var(--s3-card-button-height); margin: 0 var(--s3-card-padding-inline) var(--s3-card-padding-block); padding: 0 var(--s3-card-button-padding-inline); } /* вид — класс карточки, значения перечислений button-style, button-width ставит сервер (Settings::cardButton); solid — обычная основная кнопка */ .s3-card--btn-quiet .s3-card__btn, .s3-card--btn-icon .s3-card__btn { background: var(--s3-surface-alt); border-color: transparent; color: var(--s3-text); } .s3-card--btn-outline .s3-card__btn { background: transparent; border-color: var(--s3-border); color: var(--s3-text); } .s3-card--btn-quiet:hover .s3-card__btn, .s3-card--btn-icon:hover .s3-card__btn, .s3-card--btn-outline:hover .s3-card__btn, .s3-card--btn-quiet .s3-card__btn:focus-visible, .s3-card--btn-icon .s3-card__btn:focus-visible, .s3-card--btn-outline .s3-card__btn:focus-visible { background: var(--s3-primary); border-color: var(--s3-primary); color: var(--s3-on-primary); } .s3-card--btn-full .s3-card__cart { align-self: stretch; width: 100%; min-height: var(--s3-card-button-height-full); margin: 0; padding: 0 var(--s3-card-button-padding-inline-full); } .s3-card--btn-icon .s3-card__cart { width: var(--s3-card-button-height); padding: 0; } .s3-card--btn-icon.s3-card--btn-full .s3-card__cart { width: 100%; } .s3-rating { --size: var(--s3-rating-size); display: inline-block; line-height: var(--s3-rating-line-height); } .s3-rating__stars { display: inline-block; width: calc(var(--size) * 5); height: var(--size); background: linear-gradient(to right, var(--s3-rating) calc(var(--s3x-rating, var(--rating)) / 5 * 100%), var(--s3-border) 0); /* rtl-ok: звёзды заполняются слева, как и в 0.3 */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.8l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.8l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x; } .s3-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3-price-gap); margin-top: auto; padding-top: var(--s3-space-1); } .s3-price__now, .s3-price__new { font-size: var(--s3-price-size); font-weight: var(--s3-font-weight-bold); color: var(--s3-price); } .s3-price__new { color: var(--s3-sale); } .s3-price__old { color: var(--s3-price-old); font-size: var(--s3-price-old-size); } .s3-price__tax { width: 100%; color: var(--s3-text-muted); font-size: var(--s3-price-tax-size); } /* пагинация (разметка OpenCart) */ .s3-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3-space-3); margin-top: var(--s3-space-6); font-size: var(--s3-font-size-sm); } .s3-pager .pagination { margin: 0; display: flex; gap: var(--s3-pager-gap); } .s3-pager .pagination > li > a, .s3-pager .pagination > li > span { float: none; display: grid; place-items: center; min-width: var(--s3-pager-size); height: var(--s3-pager-size); padding: 0 var(--s3-space-2); margin: 0; border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-pager-radius) !important; background: var(--s3-surface); color: var(--s3-text); } .s3-pager .pagination > .active > span { background: var(--s3-primary); border-color: var(--s3-primary); color: var(--s3-on-primary); } .s3-empty { padding: var(--s3-empty-padding-block) 0; text-align: center; color: var(--s3-text-muted); } .s3-gallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; } .s3-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .s3-buy__title { margin: 0; font-size: var(--s3-font-size-3xl); letter-spacing: var(--s3-font-tracking-snug); } .s3-buy__tax { margin: 0; font-size: var(--s3-font-size-sm); } .s3-buy__cart { flex: 1; min-width: var(--s3-layout-column); min-height: var(--s3-size-control-xl); font-size: var(--s3-font-size-md); } /* в ряду покупки рядом с количеством и «В корзину»: форма — радиусом кнопки, а не кругом (VD #10) */ .s3-icon-btn--lg { width: var(--s3-size-control-xl); height: var(--s3-size-control-xl); border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-button-radius); box-shadow: none; } .s3-opt.has-error .s3-input, .s3-opt.has-error .s3-pill > span { border-color: var(--s3-danger); } .s3-pill > span { display: inline-flex; align-items: center; gap: var(--s3-space-2); min-height: var(--s3-size-control-md); padding: 0 var(--s3-space-4); border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-radius-sm); background: var(--s3-surface); font-size: var(--s3-font-size-sm); transition: border-color var(--s3-duration-fast), box-shadow var(--s3-duration-fast); } .s3-pill:hover > span { border-color: var(--s3-text); } .s3-pill input:checked + span { border-color: var(--s3-primary); box-shadow: inset 0 0 0 var(--s3-border-width-thin) var(--s3-primary); } .s3-pill--swatch img { width: var(--s3-size-control-sm); height: var(--s3-size-control-sm); border-radius: var(--s3-radius-sm); object-fit: cover; } .s3-input--area { min-height: var(--s3-size-area); padding: var(--s3-space-2) var(--s3-space-3); resize: vertical; } .s3-qty { display: inline-flex; align-items: stretch; height: var(--s3-qty-height); border: var(--s3-border-width-thin) solid var(--s3-border); border-radius: var(--s3-qty-radius); overflow: hidden; background: var(--s3-surface); } .s3-qty button { width: var(--s3-qty-button-width); border: 0; background: none; color: var(--s3-text); font-size: var(--s3-font-size-lg); cursor: pointer; } .s3-qty button:hover { background: var(--s3-surface-alt); } .s3-qty input { width: var(--s3-qty-height); border: 0; background: none; color: var(--s3-text); text-align: center; font: inherit; font-weight: var(--s3-font-weight-bold); } .s3-prose--full { max-width: var(--s3-prose-measure-full); color: var(--s3-text); } .s3-specs th, .s3-specs td { padding: var(--s3-space-2) var(--s3-space-3); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); vertical-align: top; } .s3-specs th { width: var(--s3-table-label-width); color: var(--s3-text-muted); font-weight: var(--s3-font-weight-regular); } .s3-specs tr:nth-child(odd) td, .s3-specs tr:nth-child(odd) th { background: var(--s3-surface-alt); } .s3-reviews__form .s3-h2 { margin: 0; font-size: var(--s3-font-size-lg); } .s3-stars-input legend { border: 0; margin: 0 0 var(--s3-space-1); } .s3-lightbox img { display: block; max-width: 100%; max-height: var(--s3-lightbox-max-height); object-fit: contain; } /* ---------- уведомления на странице ---------- */ .s3-notice { margin-bottom: var(--s3-space-4); padding: var(--s3-alert-padding-block) var(--s3-alert-padding-inline); border-radius: var(--s3-alert-radius); border: var(--s3-border-width-thin) solid; font-size: var(--s3-font-size-sm); } .s3-notice--success { border-color: var(--s3-success); color: var(--s3-success); background: color-mix(in srgb, var(--s3-success) var(--s3-alert-tint), var(--s3-surface)); } .s3-notice--danger { border-color: var(--s3-danger); color: var(--s3-danger); background: color-mix(in srgb, var(--s3-danger) var(--s3-alert-tint), var(--s3-surface)); } .s3-lines { border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle); } .s3-line { display: grid; grid-template-columns: var(--s3-size-thumb-lg) minmax(0, 1fr) auto var(--s3-size-area); gap: var(--s3-space-4); align-items: center; padding: var(--s3-space-4) 0; border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); } .s3-line__img img { display: block; width: var(--s3-size-thumb-lg); height: var(--s3-size-thumb-lg); object-fit: cover; border-radius: var(--s3-radius-md); background: var(--s3-surface-alt); } .s3-line__info { display: flex; flex-direction: column; gap: var(--s3-space-1); min-width: 0; } .s3-line__name { color: var(--s3-text); font-weight: var(--s3-font-weight-medium); text-decoration: none; } .s3-line__name:hover { color: var(--s3-link); } .s3-line__meta { display: flex; flex-wrap: wrap; gap: 0 var(--s3-space-3); font-size: var(--s3-font-size-xs); } .s3-line__unit { font-size: var(--s3-font-size-sm); } .s3-line.is-out .s3-line__name { color: var(--s3-danger); } .s3-line__qty { display: flex; flex-direction: column; align-items: center; gap: var(--s3-space-1); } .s3-line__remove { padding: 0; border: 0; background: none; color: var(--s3-text-muted); font-size: var(--s3-font-size-xs); text-decoration: underline; cursor: pointer; } .s3-line__remove:hover { color: var(--s3-danger); } .s3-qty--sm input { width: var(--s3-size-control-md); } .s3-summary__totals dt { font-weight: var(--s3-font-weight-regular); color: var(--s3-text-muted); } .s3-summary__totals dd { margin: 0; padding-inline-start: var(--s3-space-4); text-align: end; font-weight: var(--s3-font-weight-medium); } .s3-summary__totals dt:last-of-type, .s3-summary__totals dd:last-of-type { padding-top: var(--s3-space-3); border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle); color: var(--s3-text); font-size: var(--s3-font-size-lg); font-weight: var(--s3-font-weight-bold); } .s3-cartpage__extras .s3-h2 { margin-bottom: var(--s3-space-1); font-size: var(--s3-font-size-lg); } .s3-accordion .panel-title a { display: flex; justify-content: space-between; padding: var(--s3-accordion-padding-block) var(--s3-accordion-padding-inline); color: var(--s3-text); text-decoration: none; } .s3-empty--page { max-width: var(--s3-layout-narrow); margin: 0 auto; } .s3-empty__icon { width: var(--s3-empty-icon-size); height: var(--s3-empty-icon-size); margin-bottom: var(--s3-space-4); color: var(--s3-border-subtle); } .s3-empty--page .s3-h1 { color: var(--s3-text); } .s3-co__agree input { margin-top: var(--s3-space-half); } .s3-link { padding: 0; border: 0; background: none; color: var(--s3-link); font-size: var(--s3-link-size); cursor: pointer; } .s3-field__label.is-required::after { content: " *"; } .s3-err { color: var(--s3-danger); font-size: var(--s3-font-size-xs); } .s3-err:empty { display: none; } .s3-field.has-error .s3-input { border-color: var(--s3-danger); } .s3-method input { flex: none; width: var(--s3-size-icon-sm); height: var(--s3-size-icon-sm); margin: 0; accent-color: var(--s3-primary); } .s3-co__sumhead .s3-h2 { margin: 0; font-size: var(--s3-font-size-lg); } .s3-co__thumb img { display: block; border-radius: var(--s3-radius-sm); background: var(--s3-surface); } .s3-btn.is-loading { opacity: var(--s3-opacity-subtle); cursor: progress; } /* уведомление вместо alert штатной темы */ .s3-toast { position: fixed; inset-inline-end: var(--s3-space-4); bottom: var(--s3-space-4); z-index: var(--s3-z-toast); max-width: min(var(--s3-toast-max-width), calc(var(--s3-viewport-screen-width) - 2 * var(--s3-space-4))); display: flex; gap: var(--s3-toast-gap); align-items: flex-start; padding: var(--s3-toast-padding-block) var(--s3-toast-padding-inline); border-radius: var(--s3-toast-radius); background: var(--s3-text); color: var(--s3-bg); box-shadow: var(--s3-shadow-lg); font-size: var(--s3-font-size-sm); animation: s3-in var(--s3-duration-base) var(--s3-easing-standard); } .s3-toast a { color: inherit; text-decoration: underline; } .s3-toast.is-error { background: var(--s3-danger); color: var(--s3-on-danger); } @keyframes s3-in { from { opacity: 0; transform: translateY(var(--s3-space-2)); } } /* ---------- колонки модулей: штатная разметка (