/** * Ряд тегів на картці товару — структурні стилі (тікет #8070). * * Класи `product-tags-row*` вішає /assets/js/product-card-tags.js, тож файл * однаково працює для обох шаблонів: default малює теги в `.product-card__tags`, * bakery — у `.bakery-product-card__badges`. Тут лежить тільки те, що спільне * (розкладка ряду, чип «+N», поповер); кольори й відступи самих бейджів * лишаються в CSS свого шаблону. * * Ширину ряду («не ширше за картинку») задає теж шаблон — інсет у default і * bakery різний, а без max-width вимір переповнення в JS не спрацює. */ .product-tags-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; overflow: hidden; } /* Теги не стискаються: інакше scrollWidth дорівнював би clientWidth і JS ніколи б не побачив, що ряд не влазить. */ .product-tags-row > * { flex: 0 0 auto; } /* Приховані теги лишаються в DOM (див. шапку product-card-tags.js), тому ховаємо їх саме стилем, і з !important — бейджі шаблонів мають власний display і специфічність та сама. */ .product-tags-row__tag--hidden { display: none !important; } /* Ряд не вліз у ширину картинки. Скільки тегів показати, вирішує ТЗ (три і менше не згортаємо), тож ховати зайвий не можна — дозволяємо перенос. Рядків буде щонайбільше два: у ряду ніколи не більше трьох елементів — або три теги, або два теги й чип. Саме тому перенос тут безпечний, хоча початкова біда тікету була якраз у вертикальній колонці з п'яти бейджів. Трикрапка лишається останнім запобіжником для одного довгого підпису, який мерчант вписав руками: перенести його нікуди, а вилізти за картинку він не має права. Поки тег коротший за рядок, flex його не стискає. */ .product-tags-row--clamp { flex-wrap: wrap; } .product-tags-row--clamp > * { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .product-tags-row--clamp > .product-tags-row__more { flex: 0 0 auto; } /* Чип «+N» — завжди останній у ряду. Межа саме border, а не тільки тінь: у default-темі стоїть глобальний скид `input, button, textarea { box-shadow: unset !important }` (style.css), і білий чип на світлому фото лишився б без жодного контуру. */ .product-tags-row__more { flex: 0 0 auto; margin: 0; padding: 1px 8px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; background: #fff; color: #111827; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .product-tags-row__more:hover { background: #f3f4f6; } /* Той самий скид гасить і outline, тож фокус-кільце доводиться повертати через !important — інакше чип неможливо побачити з клавіатури. */ .product-tags-row__more:focus-visible { outline: 2px solid #111827 !important; outline-offset: 2px; background: #f3f4f6; } /* Поповер із прихованими тегами. Лежить у : картки в обох шаблонах мають overflow:hidden, всередині картки список просто обрізало б. Координати ставить JS. */ .product-tags-popover { position: fixed; z-index: 1200; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 6px; max-width: 260px; padding: 10px; border-radius: 12px; background: #22262b; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); /* Колір тексту задано КОНТЕЙНЕРУ, а не .product-tags-popover__tag, і саме тому: клон тега приносить свій клас, а тег, у якого колір не білий, мав би той колір затерти. Специфічність у обох по одному класу, а цей файл підключається останнім — тож правило на самому тезі вигравало завжди. Так білий бейдж «Новинка» в bakery (фон #fff, текст бренд-кольором) отримував ще й білий текст і зникав у поповері зовсім. Через inherit виграє будь-який власний color тега, а цей лишається запасним для тих, хто свого не має. */ color: #fff; } @media screen and (max-width: 360px) { .product-tags-popover { max-width: calc(100vw - 16px); } } /* Більше за POPOVER_SCROLL_FROM тегів — контейнер скролиться, щоб поповер не виріс на пів екрана. */ .product-tags-popover--scroll { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; } .product-tags-popover__tag { flex: 0 0 auto; max-width: 100%; margin: 0; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: default; }