/* Шорткод [cashback_coupons_icons] — иконки активных купонов товара. */ .cashback-coupons-icons { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1; } .cashback-coupons-icons .cashback-coupons-icons__item { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; text-decoration: none; color: inherit; transition: transform 0.15s ease, opacity 0.15s ease; } .cashback-coupons-icons__item:hover, .cashback-coupons-icons__item:focus-visible { transform: scale(1.08); outline: none; } .cashback-coupons-icons__item img { display: block; width: 32px; height: 32px; object-fit: contain; } .cashback-coupons-icons--sm .cashback-coupons-icons__item img { width: 22px; height: 22px; } .cashback-coupons-icons--lg .cashback-coupons-icons__item img { width: 44px; height: 44px; } /* CSS-only fallback (когда JS не загрузился). Может обрезаться `overflow: hidden` карточек темы — это компромисс ради a11y / no-JS. */ .cashback-coupons-icons__tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 4px 8px; background: #f76b41; color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; border-radius: 4px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 10; } .cashback-coupons-icons__tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #f76b41; } .cashback-coupons-icons__item:hover .cashback-coupons-icons__tooltip, .cashback-coupons-icons__item:focus-visible .cashback-coupons-icons__tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Когда JS загружен — он добавляет класс на и работает через DOM-portal в . Inline-tooltip скрывается, чтобы не дублировать floating-версию. */ html.cashback-coupons-icons-js .cashback-coupons-icons__tooltip { display: none; } /* Floating-tooltip монтируется JS-ом прямо в — над ним нет transform/will-change/overflow родителей темы (Woodmart product card), которые ломают `position: fixed` и `position: absolute`. */ .cashback-coupons-icons__floating { position: fixed; top: 0; left: 0; transform: translate(-50%, calc(-100% - 8px)); padding: 4px 8px; background: #f76b41; color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; border-radius: 4px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s; z-index: 100000; } .cashback-coupons-icons__floating.is-visible { opacity: 1; visibility: visible; } .cashback-coupons-icons__floating::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #f76b41; } @media (prefers-reduced-motion: reduce) { .cashback-coupons-icons__item, .cashback-coupons-icons__tooltip, .cashback-coupons-icons__floating { transition: none; } } /* ───────────────────────────────────────────────────────────────── Woodmart Custom Loop Layout: ❤ всегда на одной линии (с купонами или без) ───────────────────────────────────────────────────────────────── Контекст: в Woodmart Custom Loop Layout (Gutenberg-блоки) шорткод [cashback_coupons_icons] и кнопка wishlist лежат в двух соседних .wp-block-wd-column внутри одной .wp-block-wd-row. На узких вьюпортах row рендерится как flex-direction: column. Issue 1 (карточки С купонами): купоны выводятся в первой колонке, row становится высокой (32 + 10 gap + 34), сердечко оказывается в y≈42 row. Issue 2 (карточки БЕЗ купонов): первая колонка пустая (shortcode возвращает '' когда нет активных купонов), но gap=10px между колонками всё равно применяется — сердечко в y=10 row. Результат до фикса: сердечки на разных Y между карточками с/без купонов. Фикс: row position: relative; ЛЮБАЯ non-wishlist колонка-сосед в row становится position: absolute (top:0 left:0). Колонка с wishlist всегда первая в потоке row, на y=0. Это работает и для купонов (overlay поверх), и для пустой колонки (h=0 не добавляет gap). Использует CSS :has() / :not(:has()) (Safari 15.4+, Chrome 105+, Firefox 121+). На старых браузерах правило игнорируется, layout остаётся прежним — graceful degradation. */ .wd-product .wp-block-wd-row:has(> .wp-block-wd-column .wd-wishlist-btn) { position: relative; } .wd-product .wp-block-wd-row:has(> .wp-block-wd-column .wd-wishlist-btn) > .wp-block-wd-column:not(:has(.wd-wishlist-btn)) { position: absolute; top: 0; left: 0; flex: 0 0 auto; width: auto; height: auto; /* z-index 11 перекрывает WoodMart hover-mask / .product-element-top (типичные значения темы 3-10) — на мобильных без этого тематический overlay перехватывал тап и клик доходил до бесфрагового permalink вместо нашего href с ?cb_tab=coupons. */ z-index: 11; /* Overlay-колонка не должна перехватывать клики на сердечке/ изображении. pointer-events возвращаем на сами иконки купонов через дочерний селектор. */ pointer-events: none; } .wd-product .wp-block-wd-row:has(> .wp-block-wd-column .wd-wishlist-btn) > .wp-block-wd-column:not(:has(.wd-wishlist-btn)) .cashback-coupons-icons, .wd-product .wp-block-wd-row:has(> .wp-block-wd-column .wd-wishlist-btn) > .wp-block-wd-column:not(:has(.wd-wishlist-btn)) .cashback-coupons-icons__item { /* position:relative + z-index:12 защищают тач-таргет на мобильных: иконки гарантированно лежит выше любых тематических overlay'ев в той же визуальной точке (z-index:11 на родителе уже выше hover-mask). */ position: relative; z-index: 12; pointer-events: auto; }