/* Drog - Accessory Combo — витринный виджет (v1.2.0). * Премиум-редизайн под десктоп + orange-акцент выгоды, blue-акцент темы. * Виды: --row (полная секция), --stack (узкая колонка), --card, --button (триггер+модалка). * DOM-классы не меняем — на них завязан frontend.js. */ /* Тема оформления виджета — переменные объявлены ТОЛЬКО на собственных корневых * элементах модуля (не на :root/html!), чтобы ничего не текло в чужую вёрстку. * Все корни перечислены, т.к. модалка портируется в , а триггер и карусель * вставляются отдельно от секции. Значения из админки (skin) frontend.js пишет * инлайн на эти же элементы — переопределение остаётся в пределах модуля. */ .uc-combo, .uc-trigger, .uc-modal, .uc-carousel, .uc-tip { --uc-accent: #c2571e; /* orange «выгода/сделка» (тон витрины) */ --uc-accent-strong: #a8481a; --uc-accent-soft: #fff4ec; --uc-accent-line: #f3d8c4; --uc-accent-rgb: 194,87,30; /* для rgba()-теней/обводок под акцент */ --uc-primary: #3b53a4; /* синий темы — ссылки/навигация */ --uc-ink: #1f2937; --uc-ink-soft: #374151; --uc-muted: #6b7280; --uc-line: #e6e8ee; --uc-bg: #ffffff; --uc-bg-soft: #f7f8fb; --uc-sale: #d61f1f; /* v2.1.2 — акционная цена/бейдж (семантический красный, отдельно от акцента) */ --uc-radius: 14px; --uc-radius-sm: 10px; --uc-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px -12px rgba(16,24,40,.18); } .uc-combo { position: relative; border: 1px solid var(--uc-line); border-radius: var(--uc-radius); background: var(--uc-bg); padding: 20px 22px; margin: 18px 0; box-shadow: var(--uc-shadow); opacity: 0; transform: translateY(8px); transition: opacity .28s ease-out, transform .28s ease-out; } .uc-combo.uc-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .uc-combo { transition: none; transform: none; opacity: 1; } } /* ---------- шапка ---------- */ .uc-combo__head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .uc-combo__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--uc-ink); } .uc-combo__badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: linear-gradient(180deg, var(--uc-accent), var(--uc-accent-strong)); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; letter-spacing: .01em; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px -1px rgba(var(--uc-accent-rgb),.5); } /* ---------- состав ---------- */ .uc-combo__items { display: flex; } .uc-item { position: relative; display: flex; align-items: center; min-width: 0; } .uc-item__box { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px; border: 1px solid transparent; border-radius: var(--uc-radius-sm); cursor: default; min-width: 0; font-weight: 400; transition: border-color .15s, background .15s, box-shadow .15s; } .uc-item--optional .uc-item__box { cursor: pointer; } .uc-item--optional .uc-item__box:hover { background: var(--uc-bg-soft); border-color: var(--uc-line); } .uc-item--anchor .uc-item__box { background: #f6f8fe; border-color: #e2e8fb; } .uc-item__check { position: absolute; opacity: 0; pointer-events: none; } .uc-item__mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--uc-line); color: #fff; background: #fff; transition: background .15s, border-color .15s, transform .1s; } .uc-item__mark--lock { background: #aeb4c0; border-color: #aeb4c0; } .uc-item--optional .uc-item__mark--check { background: #fff; border-color: #cbd2dd; } .uc-item--optional .uc-item__check:checked ~ .uc-item__mark--check, .uc-item--optional .uc-item__box input:checked + .uc-item__mark--check { background: var(--uc-accent); border-color: var(--uc-accent); } .uc-item--optional .uc-item__box:hover .uc-item__mark--check { transform: scale(1.06); } .uc-item--optional .uc-item__check:focus-visible ~ .uc-item__mark--check { outline: 2px solid var(--uc-accent); outline-offset: 2px; } .uc-item--off { opacity: .5; } .uc-item--off .uc-item__price { text-decoration: line-through; } .uc-item__thumb { flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--uc-radius-sm); overflow: hidden; border: 1px solid var(--uc-line); background: linear-gradient(180deg, #fff, #f4f6fa); display: inline-flex; align-items: center; justify-content: center; } .uc-item__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; } .uc-item__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .uc-item__name { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--uc-primary); } .uc-item__title { font-size: 13px; line-height: 1.35; color: var(--uc-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uc-item__title a { color: inherit; text-decoration: none; } .uc-item__title a:hover { color: var(--uc-primary); text-decoration: underline; } .uc-item__qty { color: var(--uc-muted); font-size: 12px; } .uc-item__price { font-size: 14px; font-weight: 700; color: var(--uc-ink); font-variant-numeric: tabular-nums; } .uc-item__price s { color: var(--uc-muted); font-weight: 400; margin-right: 6px; } .uc-item__plus { flex: 0 0 auto; width: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--uc-muted); user-select: none; font-size: 0; /* текстовый «+» из twig гасим — рисует ::before */ } .uc-item__plus.uc-plus-break { display: none; } /* плюс на переносе строки */ .uc-item__plus::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--uc-bg-soft); border: 1px solid var(--uc-line); font-size: 15px; line-height: 1; color: var(--uc-muted); } .uc-item:last-child .uc-item__plus { display: none; } /* ---------- итоги ---------- */ .uc-combo__summary { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--uc-radius-sm); background: var(--uc-accent-soft); border: 1px solid var(--uc-accent-line); min-width: 240px; } .uc-combo__totals { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .uc-combo__label { font-size: 13px; color: var(--uc-muted); } .uc-combo__sum-old { color: var(--uc-muted); font-size: 14px; text-decoration: line-through; font-variant-numeric: tabular-nums; } .uc-combo__sum { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--uc-ink); font-variant-numeric: tabular-nums; } .uc-combo__save { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--uc-accent-line); color: var(--uc-accent-strong); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .uc-combo__buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--uc-radius-sm); background: linear-gradient(180deg, var(--uc-accent), var(--uc-accent-strong)); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(var(--uc-accent-rgb),.6); transition: filter .15s, transform .1s, box-shadow .15s; } .uc-combo__buy:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -8px rgba(var(--uc-accent-rgb),.7); } .uc-combo__buy:active { transform: scale(.985); } .uc-combo__buy:focus-visible { outline: 3px solid rgba(var(--uc-accent-rgb),.4); outline-offset: 2px; } .uc-combo__buy:disabled { opacity: .6; cursor: default; } .uc-combo__buy.uc-loading .uc-combo__buy-text, .uc-combo__buy.uc-loading svg { visibility: hidden; } .uc-combo__buy.uc-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: uc-spin .7s linear infinite; } .uc-combo__buy.uc-done { background: #15803d; box-shadow: none; } @keyframes uc-spin { to { transform: rotate(360deg); } } /* ---------- вид row (полная секция, десктоп) ---------- */ .uc-combo--row .uc-combo__body { display: grid; grid-template-columns: 1fr minmax(240px, 300px); align-items: center; gap: 22px; } .uc-combo--row .uc-combo__items { align-items: center; flex-wrap: wrap; gap: 4px; } .uc-combo--row .uc-combo__summary { align-self: stretch; justify-content: center; } /* ---------- вид stack = «Вертикальний список» (чистые строки-товары) ---------- * v2.3.0 — редизайн под «список для вибору» по мокапу (апрув заказчика): строка = * [чекбокс/замок] [фото] [назва …тягнеться] [ціна справа]; якір зафіксований зверху * акцентним фоном; вибрана позиція підсвічена акцентом; підсумок = футер-смуга. * Mobile-first: рядки на всю ширину, тач-ціль ≥44px, БЕЗ горизонтального скролу * (на тачі не конфліктує з вертикальним скролом сторінки). Механіка не змінюється — * тільки CSS-розкладка того ж DOM (recalc/buySet/чекбокси працюють як раніше). */ .uc-combo--stack { padding: 16px; } .uc-combo--stack .uc-combo__title { font-size: 16px; } .uc-combo--stack .uc-combo__body { display: block; } .uc-combo--stack .uc-combo__items { flex-direction: column; align-items: stretch; gap: 6px; } /* ВАЖНО: правила строк скоупим под .uc-combo__items — тайлы аксессуаров тоже несут класс * .uc-item (но живут в .uc-combo__accessories), их карусель трогать нельзя. */ .uc-combo--stack .uc-combo__items > .uc-item { width: 100%; } .uc-combo--stack .uc-combo__items .uc-item__plus { display: none; } .uc-combo--stack .uc-combo__items .uc-item__box { width: 100%; gap: 12px; padding: 8px 10px; min-height: 56px; border: 1px solid var(--uc-line); /* 1px, не 0.5px: на 1x-экранах суб-пиксель округлялся к 0 → выбранная рамка пропадала */ border-radius: 12px; } .uc-combo--stack .uc-combo__items .uc-item--anchor .uc-item__box { background: var(--uc-accent-soft); border-color: var(--uc-accent-line); } .uc-combo--stack .uc-combo__items .uc-item--optional .uc-item__box:hover { background: var(--uc-bg-soft); border-color: var(--uc-accent-line); } /* вибрана опціональна позиція = акцентна рамка+фон; recalc знімає .uc-item--off при checked */ .uc-combo--stack .uc-combo__items .uc-item--optional:not(.uc-item--off) .uc-item__box { border-color: var(--uc-accent); background: var(--uc-accent-soft); } /* у списку невибране = «можна додати», НЕ «недоступно»: без затемнення і закреслення ціни */ .uc-combo--stack .uc-combo__items .uc-item--off { opacity: 1; } .uc-combo--stack .uc-combo__items .uc-item--off .uc-item__price { text-decoration: none; } .uc-combo--stack .uc-combo__items .uc-item__thumb { width: 48px; height: 48px; } /* инфо в строку: «цей товар»-метка сверху, название тянется, цена справа, опции ниже */ .uc-combo--stack .uc-combo__items .uc-item__info { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; } .uc-combo--stack .uc-combo__items .uc-item__name { flex: 1 0 100%; } .uc-combo--stack .uc-combo__items .uc-item__title { flex: 1 1 auto; min-width: 0; } /* якорь = сырой текст (без ×N): кламп в 2 строки */ .uc-combo--stack .uc-combo__items .uc-item--anchor .uc-item__title { -webkit-line-clamp: 2; } /* позиции = ссылка + бейдж ×N: имя усекается многоточием, ×N ВСЕГДА видно (вынесен из * вертикального -webkit-box-клампа, который прятал его на 2-й обрезанной строке) */ .uc-combo--stack .uc-combo__items .uc-item:not(.uc-item--anchor) .uc-item__title { display: flex; align-items: baseline; gap: 6px; overflow: visible; } .uc-combo--stack .uc-combo__items .uc-item:not(.uc-item--anchor) .uc-item__title > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uc-combo--stack .uc-combo__items .uc-item__qty { flex: 0 0 auto; white-space: nowrap; } .uc-combo--stack .uc-combo__items .uc-item__price { margin-left: auto; white-space: nowrap; } .uc-combo--stack .uc-combo__items .uc-item__opts { flex: 1 0 100%; margin-top: 2px; } /* подсумок = футер-смуга на всю ширину (итоги слева, кнопка справа) */ .uc-combo--stack .uc-combo__summary { min-width: 0; margin-top: 12px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 16px; } .uc-combo--stack .uc-combo__totals { flex: 1 1 auto; } .uc-combo--stack .uc-combo__save { align-self: center; } .uc-combo--stack .uc-combo__buy { flex: 0 0 auto; margin-left: auto; } /* ---------- вид card ---------- */ .uc-combo--card { background: linear-gradient(180deg, var(--uc-accent-soft), #fff); border-color: var(--uc-accent-line); } .uc-combo--card .uc-combo__summary { background: #fff; } /* ================= НОВОЕ: триггер «Додаткові аксесуари» ================= */ .uc-trigger { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0; padding: 13px 15px; border: 1px solid var(--uc-accent-line); border-radius: var(--uc-radius); background: var(--uc-accent-soft); color: var(--uc-ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; } .uc-trigger:hover { border-color: var(--uc-accent); box-shadow: 0 8px 22px -14px rgba(var(--uc-accent-rgb),.7); } .uc-trigger:active { transform: scale(.99); } .uc-trigger:focus-visible { outline: 3px solid rgba(var(--uc-accent-rgb),.3); outline-offset: 2px; } .uc-trigger__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--uc-accent); color: #fff; } .uc-trigger__main { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .uc-trigger__text { display: block; font-size: 15px; font-weight: 600; color: #1f2937; } .uc-trigger__sub { display: block; font-size: 12.5px; color: #6b7280; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uc-trigger__count { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--uc-accent); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .uc-trigger__hint { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--uc-accent); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .uc-trigger__hint[hidden] { display: none; } .uc-trigger__chev { flex: 0 0 auto; color: var(--uc-accent); display: inline-flex; transition: transform .15s ease-out; } .uc-trigger:hover .uc-trigger__chev { transform: translateX(2px); } /* ================= НОВОЕ: модалка ================= */ .uc-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .uc-modal[hidden] { display: none; } .uc-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); opacity: 0; transition: opacity .2s ease-out; } .uc-modal.is-open .uc-modal__backdrop { opacity: 1; } .uc-modal__dialog { position: relative; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.5); overflow: hidden; transform: translateY(8px) scale(.97); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease-out; } .uc-modal.is-open .uc-modal__dialog { transform: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .uc-modal__backdrop, .uc-modal__dialog { transition: none; } .uc-modal__dialog { transform: none; } } .uc-modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #eef0f4; } .uc-modal__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--uc-accent); color: #fff; } .uc-modal__titles { flex: 1 1 auto; min-width: 0; } .uc-modal__title { margin: 0; font-size: 17px; font-weight: 600; color: #1f2937; } .uc-modal__sub { font-size: 12.5px; color: #6b7280; margin-top: 1px; } .uc-modal__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: #f2f4f8; color: #4b5563; cursor: pointer; transition: background .15s, color .15s; } .uc-modal__close:hover { background: #e7ebf2; color: #111827; } .uc-modal__close:focus-visible { outline: 2px solid var(--uc-primary); outline-offset: 2px; } .uc-modal__body { padding: 18px 20px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #d3d7e0 transparent; overscroll-behavior: contain; } .uc-modal__body::-webkit-scrollbar { width: 8px; } .uc-modal__body::-webkit-scrollbar-track { background: transparent; } .uc-modal__body::-webkit-scrollbar-thumb { background: #d3d7e0; border-radius: 8px; } .uc-modal__body::-webkit-scrollbar-thumb:hover { background: #b9bfcc; } /* чистая кросс-продажа (только блоки-карусели, без якоря/итога) */ .uc-combo--blocks .uc-combo__accessories:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .uc-combo__accessories + .uc-combo__accessories { margin-top: 16px; } /* внутри модалки виджет — без внешней рамки/тени (её несёт диалог) */ .uc-modal__body .uc-combo { border: 0; box-shadow: none; padding: 0; margin: 0; } .uc-modal__body .uc-combo--row .uc-combo__body { grid-template-columns: 1fr; } .uc-modal__body .uc-combo__items { flex-direction: column; align-items: stretch; } .uc-modal__body .uc-item { width: 100%; } .uc-modal__body .uc-item__box { width: 100%; } .uc-modal__body .uc-item__plus { display: none; } html.uc-lock, html.uc-lock body { overflow: hidden; } /* ---------- карусель комплектов ---------- */ .uc-carousel { position: relative; } .uc-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .uc-carousel__track::-webkit-scrollbar { display: none; } .uc-carousel__cell { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; padding: 2px; } .uc-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; } .uc-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--uc-line, #e6e8ee); background: #fff; color: #374151; cursor: pointer; box-shadow: 0 2px 8px -3px rgba(16,24,40,.25); transition: border-color .15s, color .15s, box-shadow .15s; } .uc-carousel__arrow:hover { border-color: var(--uc-accent); color: var(--uc-accent); box-shadow: 0 4px 12px -4px rgba(var(--uc-accent-rgb),.5); } .uc-carousel__arrow:focus-visible { outline: 2px solid var(--uc-primary); outline-offset: 2px; } .uc-carousel__arrow:disabled { opacity: .35; cursor: default; box-shadow: none; } .uc-carousel__dots { display: flex; gap: 2px; } .uc-carousel__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .uc-carousel__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #d1d5db; transition: background .15s, transform .15s; } .uc-carousel__dot.is-active::after { background: var(--uc-accent); transform: scale(1.35); } .uc-carousel__dot:focus-visible { outline: 2px solid var(--uc-primary); outline-offset: -4px; } /* ---------- авто-аксессуары: грид карточек с чекбоксами ---------- */ .uc-combo__accessories { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--uc-line); } .uc-acc__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .uc-acc__title { font-size: 15px; font-weight: 700; color: var(--uc-ink); } .uc-acc__hint, .uc-acc__count { font-size: 12.5px; color: var(--uc-muted); } .uc-acc__count:empty { display: none; } /* без фантомного зазора в шапке блока */ .uc-acc__nav { margin-left: auto; display: flex; gap: 8px; } /* v2.3.2 — refreshArrows прячет стрелки атрибутом [hidden] (ленте нечего листать). Явный * оверрайд обязателен: авторский display:flex может перебить UA-правило [hidden]{display:none} * в части браузеров → «скрытые» стрелки остаются видимыми и в раскрытом блоке без переполнения * (и в первом блоке модалки, где refreshArrows не вешается) снова «повисают». Как у .uc-modal[hidden]. */ .uc-acc__nav[hidden] { display: none !important; } .uc-acc__arw { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--uc-line); background: #fff; color: var(--uc-ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, color .15s; } .uc-acc__arw:hover { border-color: var(--uc-accent); color: var(--uc-accent); } .uc-acc__arw:disabled { opacity: .35; cursor: default; } /* базовый грид (режим пикер/модалка) */ .uc-acc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } /* аккордеон в модалке: блоки свёрнуты, шапка кликабельна */ .uc-acc__chev { display: none; margin-left: 8px; color: var(--uc-muted); flex: 0 0 auto; transition: transform .2s; } .uc-combo__accessories.is-accordion { border: 1px solid var(--uc-line); border-radius: 10px; padding: 0; margin-top: 10px; overflow: hidden; } .uc-combo__accessories.is-accordion .uc-acc__head { margin: 0; padding: 13px 14px; cursor: pointer; user-select: none; background: var(--uc-bg-soft); transition: background .15s; } .uc-combo__accessories.is-accordion .uc-acc__head:hover { background: #f1f3f7; } /* v2.3.2 — правый край шапки-аккордеона: ОДИН авто-отступ, дальше плотный кластер. * Раньше и .uc-acc__nav, и .uc-acc__chev имели margin-left:auto → две «пружины» с зазором * между ними: стрелки повисали в середине шапки, шеврон улетал к самому краю. * По умолчанию (свёрнут ИЛИ раскрыт без стрелок) авто-отступ у шеврона → он у правого края. * Кластер [стрелки | шеврон] с hairline-разделителем собираем ТОЛЬКО когда стрелки реально * видимы: nav скрывается атрибутом [hidden] (refreshArrows — когда ленте нечего листать), * поэтому таргетимся на `.uc-acc__nav:not([hidden]) ~ .uc-acc__chev` (иначе у раскрытого блока * без переполнения шеврон повисал бы в середине с висячим разделителем). */ .uc-combo__accessories.is-accordion .uc-acc__chev { display: inline-flex; margin-left: auto; } .uc-combo__accessories.is-accordion.is-open .uc-acc__nav:not([hidden]) { margin-left: auto; } .uc-combo__accessories.is-accordion.is-open .uc-acc__nav:not([hidden]) ~ .uc-acc__chev { margin-left: 0; padding-left: 12px; border-left: 1px solid var(--uc-line); color: var(--uc-muted); } .uc-combo__accessories.is-accordion.is-open .uc-acc__chev { transform: rotate(180deg); } .uc-combo__accessories.is-accordion .uc-acc__grid { display: none; padding: 12px 14px 14px; } .uc-combo__accessories.is-accordion.is-open .uc-acc__grid { display: grid; } .uc-combo__accessories.is-accordion .uc-acc__title { font-size: 14px; } /* сброс отступов между аккордеонами (у is-accordion своя рамка) */ .uc-combo__accessories.is-accordion { border-top: 1px solid var(--uc-line); } .uc-combo--blocks .uc-combo__accessories.is-accordion:first-child { margin-top: 0; } /* режим карусели (на странице) — горизонтальная лента */ .uc-combo__accessories.is-carousel .uc-acc__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .uc-combo__accessories.is-carousel .uc-acc__grid::-webkit-scrollbar { display: none; } /* v2.3.1 — аккордеон + карусель (витрина): блоки со 2-го свёрнуты, чтобы не занимать пол-экрана. * Раскрытый блок обязан остаться ГОРИЗОНТАЛЬНОЙ ЛЕНТОЙ: правило * `.is-accordion.is-open .uc-acc__grid{display:grid}` (0,3,1) перебивало `.is-carousel` (0,2,1) * и превращало карусель в сетку — поэтому здесь селектор со всеми тремя классами (0,4,1). */ /* СВЁРНУТЫЙ блок: ленту прячем. Без этого правила не работало — базовое * `.is-accordion .uc-acc__grid{display:none}` (0,2,1) и `.is-carousel .uc-acc__grid{display:flex}` * (0,2,1) равны по специфичности, но is-carousel объявлен НИЖЕ → выигрывал, и блок не сворачивался. */ .uc-combo__accessories.is-accordion.is-carousel:not(.is-open) .uc-acc__grid { display: none; } .uc-combo__accessories.is-accordion.is-carousel.is-open .uc-acc__grid { display: flex; overflow-x: auto; } /* свёрнутый блок: стрелки карусели прячем — ленты не видно, стрелки бессмысленны */ .uc-combo__accessories.is-accordion:not(.is-open) .uc-acc__nav { display: none; } .uc-combo__accessories.is-carousel .uc-acc { flex: 0 0 170px; scroll-snap-align: start; } .uc-acc { position: relative; min-width: 0; margin: 0; } .uc-acc .uc-item__check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .uc-acc__box { display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 12px; border: 1px solid var(--uc-line); border-radius: var(--uc-radius-sm); background: var(--uc-bg); transition: border-color .15s, box-shadow .22s cubic-bezier(.23,1,.32,1), background .15s, transform .22s cubic-bezier(.23,1,.32,1); } .uc-acc:hover .uc-acc__box { border-color: #cdd3e0; } .uc-combo__accessories.is-picker .uc-acc:active .uc-acc__box { transform: scale(.985); } /* v2.1.2 — hover-микроинтеракции карточек (только тонкий указатель; transform/opacity = GPU) */ @media (hover: hover) and (pointer: fine) { .uc-acc:hover .uc-acc__box { transform: translateY(-3px); box-shadow: 0 12px 24px -16px rgba(31, 36, 48, .30); border-color: #d3d8e3; } .uc-acc__thumb img { transition: transform .35s cubic-bezier(.23,1,.32,1); } .uc-acc:hover .uc-acc__thumb img { transform: scale(1.06); } .uc-acc:hover .uc-acc__add { border-color: var(--uc-accent); } } .uc-acc__add { transition: background .15s, border-color .15s, color .15s, transform .12s ease-out; } .uc-acc__add:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .uc-acc__box, .uc-acc__thumb img, .uc-acc__add { transition: border-color .15s, background .15s; } .uc-acc:hover .uc-acc__box, .uc-acc:hover .uc-acc__thumb img { transform: none; } } /* v2.1.3 — скелетон-шиммер фото при lazy-загрузке (убирает мигание пустого/битого бокса) */ .uc-acc__thumb.is-loading, .uc-item__thumb.is-loading { position: relative; background: var(--uc-bg-soft); } .uc-acc__thumb.is-loading::after, .uc-item__thumb.is-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%); transform: translateX(-100%); animation: uc-shimmer 1.25s ease-in-out infinite; } @keyframes uc-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .uc-acc__thumb.is-loading::after, .uc-item__thumb.is-loading::after { animation: none; } } /* v2.1.4 — a11y: скрытый текст для скринридеров + фокус-кольцо ленты-карусели */ .uc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .uc-combo__accessories.is-carousel .uc-acc__grid:focus-visible { outline: 2px solid var(--uc-accent); outline-offset: 3px; border-radius: 6px; } /* v2.1.5 — подтверждение добавления: мягкий «поп» кнопки (feedback, не декор) */ .uc-acc__add.is-done { animation: uc-pop .3s cubic-bezier(.23, 1, .32, 1); } @keyframes uc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .uc-acc__add.is-done { animation: none; } } /* v2.1.6 — бейдж скидки на тайлах основного FBT-блока (консистентность с аксессуарами) */ .uc-item__thumb { position: relative; } .uc-item__badge { position: absolute; top: 3px; left: 3px; z-index: 2; background: var(--uc-sale); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px -1px rgba(214, 31, 31, .5); } /* бейдж «Хіт» */ .uc-acc__badge { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; background: var(--uc-accent); color: #fff; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; } /* v2.1.2 — бейдж скидки «−N%» на фото акционного товара */ .uc-acc__badge--sale { background: var(--uc-sale); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px -1px rgba(214, 31, 31, .45); } /* чекбокс (только режим пикер/модалка) */ .uc-acc__check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1.5px solid var(--uc-line); background: #fff; color: #fff; transition: background .15s, border-color .15s; z-index: 1; } .uc-combo__accessories.is-carousel .uc-acc__check { display: none; } .uc-combo__accessories.is-picker .uc-acc { cursor: pointer; } .uc-acc .uc-item__check:checked ~ .uc-acc__box { border-color: var(--uc-accent); background: var(--uc-accent-soft); box-shadow: 0 0 0 1px var(--uc-accent) inset; } .uc-acc .uc-item__check:checked ~ .uc-acc__box .uc-acc__check { background: var(--uc-accent); border-color: var(--uc-accent); } .uc-acc__thumb { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: transparent; /* v2.1.1 — фото без рамки-в-рамке: единственный контур = карточка .uc-acc__box */ } .uc-acc__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .uc-acc__name { font-size: 12.5px; line-height: 1.35; color: var(--uc-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; text-decoration: none; } a.uc-acc__name:hover { color: var(--uc-accent); text-decoration: underline; } /* в модалке/пикере фото и остальное = чекбокс, курсор pointer */ .uc-combo__accessories.is-picker .uc-acc__thumb { cursor: pointer; } .uc-combo__accessories.is-picker .uc-acc__name { position: relative; z-index: 2; } .uc-acc__price { margin-top: auto; /* прижимаем цену+кнопку к низу → кнопки на одной линии */ font-size: 14px; font-weight: 700; color: var(--uc-ink); font-variant-numeric: tabular-nums; } .uc-acc__price s { color: var(--uc-muted); font-weight: 400; font-size: 12px; margin-right: 5px; } /* v2.1.2 — акционная (новая) цена: выделяем красным, чтобы скидка бросалась в глаза */ .uc-price-now { color: var(--uc-sale); font-weight: 800; } .uc-acc__price .uc-price-now { font-size: 15px; } /* быстрое добавление (только карусель на странице) */ .uc-acc__add { display: none; width: 100%; margin-top: 2px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--uc-accent); color: var(--uc-accent); background: var(--uc-bg); border-radius: var(--uc-radius-sm); padding: 7px; font-size: 12.5px; font-weight: 600; font-family: inherit; white-space: nowrap; /* смена «Додати»→«У кошику» без переноса */ cursor: pointer; min-height: 34px; transition: background .15s, color .15s, border-color .15s; } .uc-acc__add:hover { background: var(--uc-accent-soft); } .uc-acc__add.is-done { background: var(--uc-accent); color: #fff; } .uc-acc__add.is-err { border-color: #dc2626; color: #dc2626; background: #fef2f2; } .uc-combo__accessories.is-carousel .uc-acc__add { display: inline-flex; } .uc-acc__add-idle, .uc-acc__add-done { display: inline-flex; align-items: center; gap: 6px; } /* ---------- чистый пикер: компактная шапка (якорь + итог), грид — главный ---------- */ .uc-combo--picker .uc-combo__body { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; grid-template-columns: none; /* сброс row-грида */ } .uc-combo--picker .uc-combo__items { flex: 1 1 260px; min-width: 0; } .uc-combo--picker .uc-item--anchor { width: 100%; } .uc-combo--picker .uc-item--anchor .uc-item__box { padding: 4px 0; } .uc-combo--picker .uc-item__plus { display: none; } .uc-combo--picker .uc-combo__summary { flex: 0 0 auto; margin-left: auto; } .uc-combo--picker .uc-combo__accessories { margin-top: 14px; padding-top: 14px; } /* ---------- мини-выбор опций (radio/select) ---------- */ .uc-item__opts, .uc-acc__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .uc-acc__opts { margin-top: 6px; } .uc-opt { padding: 4px 24px 4px 8px; font-size: 12px; line-height: 1.2; color: var(--uc-ink-soft); background: var(--uc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid var(--uc-line); border-radius: 7px; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 200px; text-overflow: ellipsis; } .uc-opt:hover { border-color: #cdd3e0; } .uc-opt:focus-visible { outline: 2px solid var(--uc-accent); outline-offset: 1px; } /* ---------- секция в ритме темы ---------- */ .uc-section { padding: 10px 0; } .uc-section .uc-combo { margin: 8px 0; } /* подсветка блока опций, если якорь не добавился без required-опций */ .uc-flash { animation: uc-flash 1.5s ease-out; border-radius: 8px; } @keyframes uc-flash { 0%, 60% { box-shadow: 0 0 0 3px rgba(var(--uc-accent-rgb),.45); } 100% { box-shadow: 0 0 0 3px rgba(var(--uc-accent-rgb),0); } } /* ---------- планшет / мобайл ---------- */ @media (max-width: 900px) { .uc-combo--row .uc-combo__body { grid-template-columns: 1fr; } } @media (max-width: 767px) { .uc-combo { padding: 16px; } .uc-combo--row .uc-combo__items { flex-direction: column; align-items: stretch; gap: 2px; } .uc-combo--row .uc-item__plus { display: none; } .uc-combo__summary { width: 100%; min-width: 0; } .uc-combo__buy { width: 100%; } /* stack-список: подсумок в столбик, кнопка на всю ширину (тач-цель) */ .uc-combo--stack .uc-combo__summary { flex-direction: column; align-items: stretch; } .uc-combo--stack .uc-combo__buy { margin-left: 0; } .uc-modal { padding: 0; align-items: flex-end; } .uc-modal__dialog { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; } /* «ручка» bottom-sheet — понятный аффорданс на мобайле */ .uc-modal__head { position: relative; padding-top: 22px; } .uc-modal__head::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; background: #d3d7e0; } .uc-acc__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .uc-combo__accessories.is-carousel .uc-acc { flex-basis: 150px; } } /* ================= НАСТРАИВАЕМЫЙ СКИН: стиль кнопок ================= */ /* Класс ставится на саму секцию .uc-combo (frontend.js), а не на — стиль * остаётся в пределах модуля. Секция едет и в модалку (кнопка-вид), так что * .uc-combo.uc-skin-btn-* достаёт .uc-combo__buy/.uc-acc__add в любом месте. */ /* контурная — белый фон, акцентная рамка/текст, заливка на hover */ .uc-combo.uc-skin-btn-outline .uc-combo__buy { background: var(--uc-bg); color: var(--uc-accent); border: 1.5px solid var(--uc-accent); box-shadow: none; } .uc-combo.uc-skin-btn-outline .uc-combo__buy:hover { filter: none; background: var(--uc-accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(var(--uc-accent-rgb), .5); } .uc-combo.uc-skin-btn-outline .uc-combo__buy.uc-done, .uc-combo.uc-skin-btn-soft .uc-combo__buy.uc-done { background: #15803d; color: #fff; border-color: #15803d; } .uc-combo.uc-skin-btn-outline .uc-acc__add { background: var(--uc-bg); } .uc-combo.uc-skin-btn-outline .uc-acc__add:hover { background: var(--uc-accent-soft); } .uc-combo.uc-skin-btn-outline .uc-acc__add.is-done { background: var(--uc-accent); color: #fff; } /* мягкая — тонированный фон, акцентный текст, без тени */ .uc-combo.uc-skin-btn-soft .uc-combo__buy { background: var(--uc-accent-soft); color: var(--uc-accent-strong); border: 1px solid var(--uc-accent-line); box-shadow: none; } .uc-combo.uc-skin-btn-soft .uc-combo__buy:hover { filter: none; background: var(--uc-accent-line); box-shadow: none; } .uc-combo.uc-skin-btn-soft .uc-acc__add { background: var(--uc-accent-soft); } .uc-combo.uc-skin-btn-soft .uc-acc__add:hover { background: var(--uc-accent-line); } .uc-combo.uc-skin-btn-soft .uc-acc__add.is-done { background: var(--uc-accent); color: #fff; } /* на светлых кнопках белый спиннер невидим — красим в акцент */ .uc-combo.uc-skin-btn-outline .uc-combo__buy.uc-loading::after, .uc-combo.uc-skin-btn-soft .uc-combo__buy.uc-loading::after { border-color: rgba(var(--uc-accent-rgb), .35); border-top-color: var(--uc-accent); } /* ===== v2.2.1 — фиксы по фидбэку с живых экранов ===== */ /* #1 иконка триггера/модалки — контрастная к боксу (бокс = --uc-accent). * Тема сайта перебивала currentColor (тёмный глиф на цветном боксе = плохо читалось) → !important. * Цвет глифа берём из --uc-on-accent (JS считает по яркости акцента: тёмный акцент → белый глиф, * светлый кастом-акцент → тёмный глиф), fallback #fff для дефолтного амбера без скина. */ .uc-trigger .uc-trigger__icon, .uc-trigger .uc-trigger__icon svg, .uc-modal .uc-modal__icon, .uc-modal .uc-modal__icon svg { color: var(--uc-on-accent, #fff) !important; } /* #2 «замок» = товар всегда в комплекте: акцентная «галка-включено», а не серая * (серая читалась как «выключено/недоступно»). Опциональные до выбора — пустой чекбокс. * Галка тоже контрастна к акцентному боксу через --uc-on-accent (светлый акцент → тёмная галка). */ .uc-item__mark--lock { background: var(--uc-accent); border-color: var(--uc-accent); color: var(--uc-on-accent, #fff); } /* #3 мульти-комбо карусель: высота контейнера подгоняется под АКТИВНЫЙ слайд (высоту ставит JS). * Иначе трек = самый высокий слайд, и короткий комплект оставлял огромный пустой провал под собой. */ /* высота трека выставляется из JS (adjustHeight) под активный слайд; БЕЗ transition — * анимация height ловила застрявший CSSTransition (currentTime=0), держала старую высоту * и оставляла пробел. Мгновенная смена высоты надёжна; «прыжок» при листании допустим. */ .uc-carousel__track { align-items: flex-start; overflow-y: hidden; } /* v2.4.4 — стили рамки вывода (card = базовый вид, класс не добавляется) */ .uc-combo--bd-line { box-shadow: none; } .uc-combo--bd-none { border-color: transparent; background: transparent; box-shadow: none; padding: 8px 0; } .uc-combo--bd-accent { border-color: var(--uc-accent); border-width: 1.5px; box-shadow: 0 6px 18px -10px rgba(var(--uc-accent-rgb), .45); } /* ---------- v2.5.0 · подсказка блока: кнопка ⓘ, заметка текстом, тултип ---------- */ .uc-acc__tipbtn { position: relative; flex: 0 0 auto; width: 30px; height: 30px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--uc-accent-line); cursor: pointer; padding: 0; /* акцентний, а не сірий: іконка-одинак мусить читатися як інтерактивна */ color: var(--uc-accent); background: var(--uc-accent-soft); border-radius: 50%; transition: color .15s, background .15s, transform .12s; } .uc-acc__tipbtn svg { width: 18px; height: 18px; } /* зона нажатия до 44×44 без раздувания вёрстки: значок остаётся 24px, но палец попадает по нормативу (визуально шапка блока не меняется) */ .uc-acc__tipbtn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .uc-acc__tipbtn:hover, .uc-acc__tipbtn[aria-expanded="true"] { color: #fff; background: var(--uc-accent); border-color: var(--uc-accent); transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .uc-acc__tipbtn { transition: none; } .uc-acc__tipbtn:hover { transform: none; } } .uc-acc__tipbtn:focus-visible { outline: 2px solid var(--uc-accent); outline-offset: 2px; } /* режим «Текстом» — заметка под шапкой блока */ .uc-acc__note { margin: -2px 0 10px; padding: 9px 12px; background: var(--uc-accent-soft); border-left: 3px solid var(--uc-accent); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.55; color: var(--uc-ink-soft); } .uc-acc__note p { margin: 0 0 6px; } .uc-acc__note p:last-child { margin-bottom: 0; } .uc-acc__note ul { margin: 4px 0; padding-left: 18px; } .uc-acc__note a { color: var(--uc-primary); } /* тултип: живёт в , поэтому переменные оформления ему копирует frontend.js */ .uc-tip { position: absolute; z-index: 100000; /* width:max-content обязателен: у absolute-элемента ширина по умолчанию = shrink-to-fit * от СТАТИЧЕСКОЙ позиции, а её JS ещё не задал в момент замера — тултип схлопывался * в узкую колонку (~96px). max-content + max-width делают размер предсказуемым. */ width: max-content; max-width: 300px; box-sizing: border-box; /* світла картка — як у поповера звʼязку (.uc-rel): один візуальний набір */ --uc-tip-bg: #fffdf9; /* кремово-білий, тепла нейтраль під amber */ padding: 10px 13px; border-radius: 10px; background: var(--uc-tip-bg); color: var(--uc-ink); border: 1px solid var(--uc-accent-line); font-size: 13px; line-height: 1.5; box-shadow: 0 10px 26px -10px rgba(16, 24, 40, .22), 0 2px 5px rgba(16, 24, 40, .06); animation: uc-tip-in .14s ease-out; } .uc-tip p { margin: 0 0 6px; } .uc-tip p:last-child { margin-bottom: 0; } .uc-tip ul { margin: 4px 0; padding-left: 18px; } /* звичайні посилання — синій темы; пілюлю-посилання виключаємо, щоб їй лишився accent * (інакше тип-селектор `.uc-tip a` перебиває клас `.uc-hintlink` за специфічністю) */ .uc-tip a:not(.uc-hintlink) { color: var(--uc-primary); } .uc-tip b, .uc-tip strong { color: var(--uc-ink); } /* стрелка целится в кнопку через --uc-tip-arrow. * Заливка = фон картки, а 1px-рамку кінчику домальовує drop-shadow (як у .uc-rel). */ .uc-tip::after { content: ''; position: absolute; left: var(--uc-tip-arrow, 50%); margin-left: -6px; border: 6px solid transparent; } .uc-tip:not(.uc-tip--below)::after { top: 100%; border-top-color: var(--uc-tip-bg); filter: drop-shadow(0 1px 0 var(--uc-accent-line)); } .uc-tip--below::after { bottom: 100%; border-bottom-color: var(--uc-tip-bg); filter: drop-shadow(0 -1px 0 var(--uc-accent-line)); } @media (max-width: 360px) { .uc-tip { max-width: calc(100vw - 24px); } } @keyframes uc-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .uc-tip { animation: none; } } /* ---------- v2.5.0 · лічильник кількості ---------- */ .uc-qty { display: inline-flex; align-items: center; align-self: flex-start; border: 1px solid var(--uc-line); border-radius: 999px; overflow: hidden; background: var(--uc-bg); margin-top: 4px; } .uc-qty__b { width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; padding: 0; color: var(--uc-ink-soft); transition: background .12s, color .12s; } .uc-qty__b:hover:not(:disabled) { background: var(--uc-accent-soft); color: var(--uc-accent); } .uc-qty__b:disabled { opacity: .35; cursor: default; } .uc-qty__b:focus-visible { outline: 2px solid var(--uc-accent); outline-offset: -2px; } .uc-qty__v { width: 34px; height: 32px; flex: 0 0 auto; border: 0; border-left: 1px solid var(--uc-line); border-right: 1px solid var(--uc-line); background: #fff; text-align: center; font: inherit; font-size: 13px; font-weight: 600; color: var(--uc-ink); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; } .uc-qty__v:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(var(--uc-accent-rgb), .18); } .uc-qty__note { display: block; margin-top: 3px; font-size: 11px; color: var(--uc-muted); } /* в модалке и на узких экранах — норматив 44px под палец */ .uc-modal .uc-qty__b, .uc-combo--stack .uc-qty__b { width: 46px; height: 46px; } .uc-modal .uc-qty__v, .uc-combo--stack .uc-qty__v { width: 46px; height: 46px; } @media (max-width: 480px) { .uc-qty__b { width: 46px; height: 46px; } .uc-qty__v { width: 46px; height: 46px; } } /* ---------- v2.5.0 · політика вибору в блоці ---------- */ .uc-acc__policy { flex: 0 0 auto; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--uc-accent-soft); border: 1px solid var(--uc-accent-line); color: var(--uc-accent-strong); font-size: 11px; font-weight: 600; white-space: nowrap; } .uc-acc__need { margin: 0 0 10px; padding: 8px 12px; background: #fff8ed; border: 1px solid var(--uc-accent-line); border-radius: 8px; font-size: 12.5px; color: var(--uc-ink-soft); } /* блок-переключатель: круглые отметки читаются как «оберіть одну» */ .uc-acc--single .uc-acc__check, .uc-acc--single .uc-item__mark--check { border-radius: 50%; } /* ---------- v2.5.0 · правила сумісності ---------- */ .uc-item.is-blocked, .uc-acc.is-blocked { opacity: .5; } .uc-item.is-blocked .uc-item__box, .uc-acc.is-blocked .uc-acc__box { cursor: not-allowed; } .uc-item.is-blocked .uc-item__thumb, .uc-acc.is-blocked .uc-acc__thumb { filter: grayscale(1); } .uc-item.is-blocked .uc-acc__add, .uc-acc.is-blocked .uc-acc__add { pointer-events: none; } /* причина — текстом, не только цветом (цвет не должен быть единственным носителем смысла) */ .uc-why { display: block; width: 100%; margin: 4px 0 6px; font-size: 12px; line-height: 1.35; color: var(--uc-ink-soft); padding: 6px 9px; border-radius: 7px; background: var(--uc-bg-soft); border-left: 3px solid var(--uc-line); overflow-wrap: anywhere; /* довга назва товару не рве плитку */ box-sizing: border-box; } /* перший рядок — сам звʼязок («Пасує до «Бортик 2100»»): він і пояснює, ПРО ЩО мова. Обмежуємо двома рядками, повний текст — у title: інакше довга назва товару роздувала пояснення на чверть картки. */ .uc-why__head { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; } /* другий — уточнення власника, тихіше */ .uc-why__msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; opacity: .85; } .is-blocked .uc-why { color: #8a5a52; background: #fdf1ef; border-left-color: #d9a79d; } .is-needed .uc-why, .is-suggested .uc-why { color: var(--uc-accent-strong); background: var(--uc-accent-soft); border-left-color: var(--uc-accent); } .uc-item.is-needed, .uc-acc.is-needed { box-shadow: inset 0 0 0 2px var(--uc-accent-line); border-radius: var(--uc-radius-sm); } .uc-item.is-suggested .uc-item__box, .uc-acc.is-suggested .uc-acc__box { background: var(--uc-accent-soft); } .uc-combo__need { margin: 0 0 10px; padding: 9px 12px; background: #fff8ed; border: 1px solid var(--uc-accent-line); border-radius: 8px; font-size: 12.5px; color: var(--uc-ink-soft); } /* ---------- v2.6.0 · поповер звʼязку ---------- Живе в (як тултип), змінні оформлення переносить JS. */ .uc-rel { position: absolute; z-index: 100001; width: max-content; max-width: 310px; box-sizing: border-box; padding: 12px 13px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--uc-accent-line); box-shadow: 0 14px 34px -10px rgba(16, 24, 40, .3), 0 2px 6px rgba(16, 24, 40, .06); /* виростає З ТОЧКИ, куди клікнули: рух пояснює причину-наслідок */ animation: uc-rel-in .18s cubic-bezier(.2, .8, .3, 1); transform-origin: bottom center; } .uc-rel--below { transform-origin: top center; } .uc-rel::after { content: ''; position: absolute; left: var(--uc-rel-arrow, 50%); margin-left: -7px; border: 7px solid transparent; } .uc-rel:not(.uc-rel--below)::after { top: 100%; border-top-color: #fff; filter: drop-shadow(0 1px 0 var(--uc-accent-line)); } .uc-rel--below::after { bottom: 100%; border-bottom-color: #fff; filter: drop-shadow(0 -1px 0 var(--uc-accent-line)); } .uc-rel__head { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--uc-accent-strong); padding-right: 20px; margin-bottom: 8px; } .uc-rel--block .uc-rel__head { color: #a3453a; } .uc-rel__card { display: flex; align-items: center; gap: 10px; } .uc-rel__thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; object-fit: contain; background: var(--uc-bg-soft); border: 1px solid var(--uc-line); } .uc-rel__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .uc-rel__name { font-size: 13px; line-height: 1.3; color: var(--uc-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uc-rel__price { font-size: 13px; font-weight: 700; color: var(--uc-ink); font-variant-numeric: tabular-nums; } .uc-rel__msg { margin-top: 7px; font-size: 12px; line-height: 1.35; color: var(--uc-muted); } .uc-rel__actions { display: flex; gap: 8px; margin-top: 10px; } .uc-rel__btn { flex: 1 1 auto; min-height: 36px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--uc-line); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--uc-ink-soft); cursor: pointer; transition: background .13s, border-color .13s, color .13s; } .uc-rel__btn:hover { border-color: var(--uc-accent); color: var(--uc-accent-strong); } .uc-rel__btn--primary { background: var(--uc-accent); border-color: var(--uc-accent); color: var(--uc-on-accent, #fff); } .uc-rel__btn--primary:hover { background: var(--uc-accent-strong); border-color: var(--uc-accent-strong); color: var(--uc-on-accent, #fff); } .uc-rel__btn:focus-visible { outline: 2px solid var(--uc-accent); outline-offset: 2px; } .uc-rel__x { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--uc-muted); border-radius: 6px; padding: 0; } .uc-rel__x:hover { color: var(--uc-ink); background: var(--uc-bg-soft); } /* коротка підсвітка позиції, до якої пролистали */ .uc-rel-flash { animation: uc-rel-flash 1.4s ease-out; } @keyframes uc-rel-in { from { opacity: 0; transform: scale(.94) translateY(4px); } to { opacity: 1; transform: none; } } @keyframes uc-rel-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--uc-accent-rgb), 0); } 22% { box-shadow: 0 0 0 4px rgba(var(--uc-accent-rgb), .45); } 70% { box-shadow: 0 0 0 4px rgba(var(--uc-accent-rgb), .18); } } @media (prefers-reduced-motion: reduce) { .uc-rel { animation: none; } .uc-rel-flash { animation: none; box-shadow: 0 0 0 3px rgba(var(--uc-accent-rgb), .35); } } @media (max-width: 420px) { .uc-rel { max-width: calc(100vw - 24px); } } /* бейдж на згорнутому блоці: інакше порада в закритому акордеоні лишається невидимою */ .uc-acc__hints { flex: 0 0 auto; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--uc-accent); color: var(--uc-on-accent, #fff); font-size: 11px; font-weight: 700; white-space: nowrap; } .uc-combo__accessories.is-open .uc-acc__hints { display: none; } /* ---------- v2.6.3 · посилання в підказці ---------- Має ЧИТАТИСЯ як клікабельне: власна пілюля з іконкою «відкрити в новій вкладці», підкреслення і мікрорух іконки на наведення. */ .uc-hintlink { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 12px 7px 10px; border-radius: 9px; border: 1px solid var(--uc-accent-line); background: var(--uc-accent-soft); color: var(--uc-accent-strong); font-size: 12.5px; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; } .uc-hintlink:hover, .uc-hintlink:focus-visible { background: var(--uc-accent); border-color: var(--uc-accent); color: var(--uc-on-accent, #fff); text-decoration: none; } .uc-hintlink:focus-visible { outline: 2px solid var(--uc-accent); outline-offset: 2px; } .uc-hintlink__txt { text-decoration: underline; text-underline-offset: 2px; } .uc-hintlink__ico { display: inline-flex; flex: 0 0 auto; transition: transform .16s cubic-bezier(.2,.8,.3,1); } .uc-hintlink:hover .uc-hintlink__ico { transform: translate(2px, -2px); } /* «вилітає» у нову вкладку */ /* тултип став світлим — пілюля-посилання бере базовий accent-стиль (без переозначень) */ @media (prefers-reduced-motion: reduce) { .uc-hintlink, .uc-hintlink__ico { transition: none; } .uc-hintlink:hover .uc-hintlink__ico { transform: none; } } /* ---------- v2.7.0 · підказка КОМПЛЕКТА ---------- Одна смуга над усіма блоками. Свідомо тихіша за плитки товарів: це супровідний текст, а не пропозиція — тому кремове тло й тонкий акцентний край зліва, без тіні. */ .uc-combo__note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 14px; background: var(--uc-accent-soft); color: var(--uc-ink); border: 1px solid var(--uc-accent-line); /* акцент лише на одному краї — рамка по колу лишається, тому кути не збиваємо */ border-left-width: 3px; border-left-color: var(--uc-accent); border-radius: var(--uc-radius, 14px); font-size: 13.5px; line-height: 1.55; } .uc-combo__note-ico { flex: 0 0 auto; margin-top: 1px; color: var(--uc-accent-strong); } .uc-combo__note-body { min-width: 0; } .uc-combo__note-body > :first-child { margin-top: 0; } .uc-combo__note-body p { margin: 0 0 6px; } .uc-combo__note-body p:last-child { margin-bottom: 0; } .uc-combo__note-body ul { margin: 4px 0; padding-left: 18px; } .uc-combo__note-body a:not(.uc-hintlink) { color: var(--uc-primary); } .uc-combo__note-body b, .uc-combo__note-body strong { color: var(--uc-ink); } /* пілюля-посилання всередині смуги вже на кремовому тлі — робимо її білою, щоб читалася */ .uc-combo__note .uc-hintlink { background: #fff; } .uc-combo__note .uc-hintlink:hover, .uc-combo__note .uc-hintlink:focus-visible { background: var(--uc-accent); } @media (max-width: 480px) { .uc-combo__note { font-size: 13px; padding: 10px 12px; } } /* ⓘ підказки комплекта — в кінці назви. Успадковує механіку .uc-acc__tipbtn, але калібрується під великий заголовок: у блоках вона стоїть біля 14px-підпису, тут — біля 18–20px h3, і розмір «від блоків» там загубився б. */ .uc-combo__tipbtn { vertical-align: middle; margin-left: 8px; transform: translateY(-1px); /* оптичне вирівнювання по х-висоті заголовка */ } @media (prefers-reduced-motion: reduce) { .uc-combo__tipbtn:hover { transform: translateY(-1px); } }