/** * Bonza (client-specific CSS overrides). * * This file is loaded LAST (highest cascade priority). * Only add styles specific to THIS client's design that can't * be done via Blocksy Customizer. * * Decision checklist: would this rule make sense on a different client's site? * YES: put it in assets/css/components/{component}.css * NO: put it here. * * RULES: * - Every rule MUST have a WHY comment * - Every rule MUST have a @date tag * - Every value MUST be verified against Figma * * @package Blocksy_Child * @client Bonza */ /* ============================================================================ Cart Off-Canvas. Figma "Cart Off Canvas" component set (file cY9QX6IwGVaaGI4r7J2RRF, node 64:14596; Filled variant 367:52841, Empty variant 64:14595). CU-86eypb6jt. WHY here (not shared offcanvas.css): the cream/green brand palette, the Nominee/ Kobe fonts, the header grass-pattern strip and the pill CTA are Bonza-only, they would NOT make sense on another client's drawer. Overrides the shared #woo-cart-panel baseline in assets/css/components/offcanvas.css, which stays generic for future clients. @date 2026-08-25 ============================================================================ */ /* --- Panel container ------------------------------------------------------- Figma: fill #F8EDE3, radius 24px on the two LEFT corners only (right-side drawer), box-shadow 0px 2px 3px rgba(0,0,0,.08). ---------------------------------------------------------------------- */ /* The radius, shadow AND cream fill all belong on the sliding surface (.ct-panel-inner), not the outer #woo-cart-panel element, which Blocksy also uses as the fixed, full-viewport dark backdrop/scrim behind it (confirmed via computed style: #woo-cart-panel itself resolves to rgba(18,21,25,.6), the dark overlay color, while .ct-panel-inner is the actual visible white/cream drawer box). Putting any of these three on #woo-cart-panel directly would style the scrim, not the drawer. */ #woo-cart-panel .ct-panel-inner { border-radius: 24px 0 0 24px; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.08); background-color: #F8EDE3; } /* --- Header bar ------------------------------------------------------------- Figma: fill #247B4E, padding 32px 20px 16px, 76px tall, space-between layout. `position:relative` + `overflow:visible` is required so the decorative pattern strip (below) can bleed past the header's own bottom edge without being clipped. ---------------------------------------------------------------------- */ #woo-cart-panel .ct-panel-actions { background-color: #247B4E; padding: 32px 20px 16px; min-height: 76px; border-bottom: none; position: relative; overflow: visible; z-index: 2; } /* Decorative grass-pattern strip along the header's bottom edge (Figma node 34394:263682, exported from Figma image ref e7a9d3cb...). Figma places it from y:58 to y:96 inside/under a 76px header, an 18px overlap into the header plus a 20px bleed into the content below. `pointer-events:none` so it never blocks clicking the first cart item under it. */ #woo-cart-panel .ct-panel-actions::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 38px; background-image: url('assets/images/cart-header-pattern.png'); background-size: cover; background-repeat: no-repeat; pointer-events: none; z-index: 1; } /* Extra top padding on the scroll region so cart items clear the pattern strip's 20px bleed instead of sitting underneath it. */ #woo-cart-panel .ct-panel-content { padding-top: 28px; } /* --- Header heading text ----------------------------------------------- Figma "H6/bold": Nominee Heavy Extended 900, 18px/20px, UPPERCASE, white. Nominee is not currently loaded on this site (no @font-face, no Customizer typography match); falls back to the site's own configured heading font var so weight/size/case/color still match even without the exact typeface. Overrides the shared offcanvas.css rule (24px/400/#111/none-transform). ---------------------------------------------------------------------- */ #woo-cart-panel .ct-panel-heading { color: #FFFFFF; font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; font-size: 18px; line-height: 20px; text-transform: uppercase; letter-spacing: normal; gap: 8px; } #woo-cart-panel .ct-cart-panel-title, #woo-cart-panel .ct-cart-panel-count { color: #FFFFFF; } /* Bag icon + close icon inherit white via currentColor from the heading / ct-panel-actions text color. */ #woo-cart-panel .ct-panel-actions .ct-toggle-close, #woo-cart-panel .ct-cart-panel-icon { color: #FFFFFF; } /* --- Sticky footer ------------------------------------------------------ Figma: own decorative texture background (near-white/paper-grain; the exported node rendered essentially blank at 2x, so we use a solid cream fill matching the panel background instead of chasing an invisible texture asset). Divider + Total row + pill CTA + secondary link + trust row all already exist (inc/woocommerce.php); this section only re-skins colors/shapes to match the Figma pill/shadow spec. ---------------------------------------------------------------------- */ #woo-cart-panel .woocommerce-mini-cart__total, #woo-cart-panel .bc-mini-cart-totals, #woo-cart-panel .woocommerce-mini-cart__buttons, #woo-cart-panel .bc-mini-cart-secure { background-color: #F8EDE3; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } #woo-cart-panel .bc-mini-cart-totals__total { font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } /* Primary CTA. pill, green, BUTTON SHADOW effect (Figma "BUTTON SHADOW": 0px 4px 6px -2px rgba(0,0,0,.03), 0px 12px 16px -4px rgba(0,0,0,.08)). :hover/:focus-visible states reuse the site's global .button treatment (Blocksy core button hover/focus rules; not redefined per-drawer). */ #woo-cart-panel .woocommerce-mini-cart__buttons .button.checkout { background-color: #247B4E; color: #FFFFFF; border: none; border-radius: 999px; height: 48px; line-height: 48px; padding: 0 16px; box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08); font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; } /* Secondary "Continue Shopping" link. plain text, centered, no button chrome. */ #woo-cart-panel .bc-continue-shopping { display: block; text-align: center; margin: 10px auto 0; padding: 0; background: none; border: none; color: #494545; font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; width: auto; } /* Trust row copy already renamed via clients/bonza/bonza.php gettext filter ("Secure checkout - 256-bit SSL"); just recolor to Figma's #9CA3AF. */ #woo-cart-panel .bc-mini-cart-secure { color: #9CA3AF; padding-bottom: 20px; } /* --- "Frequently bought together" upsell block -------------------------- Figma: rgba(255,168,37,.05) fill, 12px radius, 12px padding, bold uppercase label, ONE white 8px-radius product row (image + name + price + ADD pill). WHY we keep Blocksy's native flexy carousel instead of a bespoke single row: this is State #1 of docs/patterns/drawer-suggested-products.md, a real, working, cart-fragments-safe carousel already bound to Blocksy's own cross-sell/related-products source. Forcing a full column width (--grid-columns-width: 100%) turns it into a single full-width row per item, matching the Figma layout, while preserving flexy's swipe mechanics (prev/next arrow hover/focus states untouched, they are Blocksy's own flexy.min.js-driven component) for carts whose cross-sell list has more than one product. Do NOT touch `.flexy-container`, `data-flexy`, `.flexy-items` positioning per the explicit warnings in drawer-suggested-products.md. ---------------------------------------------------------------------- */ #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products { background-color: rgba(255, 168, 37, 0.05); border-radius: 12px; padding: 12px; margin: 16px 0; --grid-columns-width: 100%; } #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .ct-module-title { font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; font-size: 14px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #494545; } /* Single horizontal card row: image left, title/price/add-to-cart right, white background, 8px radius, 8px padding. matches Figma's "PRODUCT CARD" instance inside the upsell block. */ #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .flexy-item { display: flex; flex-direction: row; align-items: center; gap: 12px; background-color: #FFFFFF; border-radius: 8px; padding: 8px; } #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .flexy-item .ct-media-container { width: 64px; min-width: 64px; height: 64px; aspect-ratio: 1 / 1; border-radius: 4px; margin-bottom: 0; } #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .flexy-item section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; } #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .flexy-item .ct-product-title { flex-basis: 100%; font-weight: 700; -webkit-line-clamp: 1; } /* "ADD" pill, small yellow pill matching Figma's cross-sell CTA. Native WC loop add-to-cart button/link keeps its own label + AJAX behavior (incl. its existing "added"/"loading" state classes from WC core, not redefined here); only the shape/color changes here (relabeling would require overriding WooCommerce's core translated string globally, which would leak into every product archive on the site, out of scope for a drawer-only visual change). */ #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .flexy-item .button, #woo-cart-panel .bc-minicart-suggested-grid.ct-suggested-products .flexy-item a.add_to_cart_button { background-color: #FFC125; color: #000000; border: none; border-radius: 999px; height: 32px; line-height: 32px; padding: 0 14px; font-size: 12px; font-weight: 700; box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08); } /* --- Empty state ---------------------------------------------------------- Figma 64:14595: same cream panel + green header chrome as the Filled variant (already covered above, both variants share #woo-cart-panel / .ct-panel-actions). Body copy comes from mini-cart-empty.php's own "Return to shop" + suggested-products markup (bc-empty-cart-* classes in the shared offcanvas.css); recolor only, no structural change needed. ---------------------------------------------------------------------- */ #woo-cart-panel .bc-empty-cart-section-title { color: #494545; } #woo-cart-panel .return-to-shop .button { background-color: #247B4E; color: #FFFFFF; border-radius: 999px; box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(0, 0, 0, 0.08); } @media (max-width: 480px) { #woo-cart-panel .ct-panel-actions { padding: 24px 16px 14px; } } /* ============================================================================ Search Suggestion Result (dropdown). Figma component set "Search Suggestion Result" (file cY9QX6IwGVaaGI4r7J2RRF, node 68:31254). Two variants exist: SMALL (68:31056, 400px compact dropdown) and BIG (68:27592, 1408px full-page overlay with a 240px filter sidebar). Only SMALL is built here: it is the autocomplete-style dropdown this task (CU-86eypb6kw) describes, and it is what FiboSearch Pro's own suggestion dropdown structurally is. BIG is a different, full-page search-overlay feature (own header bar, own sidebar) with no equivalent route on this site today; out of scope for this task. Result row spec verified against node 29847:48268 inside the SMALL component. Real data pulled live via WP-CLI against FiboSearch's own AjaxQuery class (2026-08-25, phrase "bites"): confirms this site's actual dropdown groups are Categories, then Products, then a "See all products (N)" row, in that order, exactly matching the SMALL mockup's section order. WHY here (not shared search-dropdown.css): that shared file belongs to the "search-restructure" feature (a two-column category/product grid), which Bonza's manifest.json does NOT enable (confirmed: blocksy_child_feature_enabled('search-restructure') reads Bonza's feature list and returns false). Bonza's dropdown is FiboSearch's default flat suggestion list, which is exactly the layout the SMALL variant depicts, so no restructure feature or new PHP template is needed, only recoloring/retyping the plugin's own markup. Config-first per Gate 2 (figma-to-wordpress-frontend skill): FiboSearch Appearance settings already had "Show product image" on, but "Show product price" was off (verified via wp eval read, 2026-08-25) so the plugin's own JS never wrote a `.dgwt-wcas-sp` price span into the DOM at all; CSS cannot style an element that isn't there, so this was flipped on via the plugin's own dgwt_wcas_settings option (update_option with the full 83-key array preserved, not `wp option update`) rather than attempting a structural PHP workaround. "Show product description" and "Show product SKU" stay off; the SMALL mockup does not show either. The panel's own JS (adjustContainerWidth in the plugin's search.js) always sets `.dgwt-wcas-suggestions-wrapp` width as an inline style matching the live search bar's rendered width, on every open. An external CSS width rule would be silently overridden by that inline style, and this file's own house rule is no !important, so the panel is intentionally left width-fluid here (matching the real 562px header search bar via .header-fibosearch-bar in header.css) rather than forcing Figma's 400px frame width, which was that specific Figma artboard's own size, not a literal fixed value FiboSearch's JS would ever honor. @date 2026-08-25 ============================================================================ */ /* --- Panel container -------------------------------------------------------- Figma SMALL (68:31056): fill #F8EDE3, box-shadow 0px 8px 40px 0px rgba(0,0,0,.12), no border-radius (confirmed: BIG has 24px, SMALL has none), outer padding 38px 0px 0px + inner content 0px 20px collapsed into one shorthand since the real DOM has no separate inner wrapper between the panel and its suggestion rows. ---------------------------------------------------------------------- */ .dgwt-wcas-suggestions-wrapp { background: #F8EDE3; border: none; border-radius: 0; box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12); padding: 38px 20px 20px; } /* Specificity fix (CU-86eypb6kw, audit finding, verified live against ajax-search-for-woocommerce-premium/assets/css/style.css:1999-2003 in this plugin build). FiboSearch's own Pirx-style CSS ships ".dgwt-wcas-open-pirx .dgwt-wcas-suggestions-wrapp{padding-top:10px; padding-bottom:10px}" at specificity (0,2,0), which the bare ".dgwt-wcas-suggestions-wrapp" rule above (0,1,0) cannot beat regardless of load order, so the panel's top/bottom padding was silently pinned to 10px. ".dgwt-wcas-open-pirx" is the real class FiboSearch's JS adds to for this template, so doubling it here (a standard specificity bump, matching selector semantics unchanged) raises this rule to (0,3,0), genuinely outranking the plugin's rule with no !important. */ .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestions-wrapp { padding-top: 38px; padding-bottom: 20px; } /* --- Section headline ("Categories", "Products", "Blog") ------------------- Figma "Links/Regular": Kobe1.1 400, 14px/16px, color #6B7280, sentence case. Kobe1.1 is not currently loaded on this site (no @font-face, no Customizer typography match, same situation as Nominee in the cart drawer above); falls back to the site's own body font var. Overrides the plugin default (12px, uppercase, bordered) which does not match Figma. ---------------------------------------------------------------------- */ .dgwt-wcas-has-headings .dgwt-wcas-suggestion-headline .dgwt-wcas-st { font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-weight: 400; font-size: 14px; line-height: 16px; color: #6B7280; text-transform: none; border-bottom: none; margin-top: 16px; padding-bottom: 0; } /* --- Category / tag links ("Superfoods (1)") -------------------------------- Figma "Links/Bold 2": Kobe1.1 700, 14px/16px, color #494545. ---------------------------------------------------------------------- */ .dgwt-wcas-has-headings .dgwt-wcas-suggestion-tax .dgwt-wcas-st { font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-weight: 700; font-size: 14px; line-height: 16px; color: #494545; } /* --- Row divider ------------------------------------------------------------- Figma dividers (node EL-56237fee): 1px solid #D1D9E6. FiboSearch already puts a border-bottom on every `.dgwt-wcas-suggestion` row by default (#dfdfdf); recoloring it is enough to get the divider between every section, above AND below the "See all products" row, with no new markup. ---------------------------------------------------------------------- */ .dgwt-wcas-suggestion { border-bottom-color: #D1D9E6; } /* Specificity fix (CU-86eypb6kw, audit finding, verified live against ajax-search-for-woocommerce-premium/assets/css/style.css:2006-2010 in this plugin build). FiboSearch's own Pirx-style CSS ships ".dgwt-wcas-open-pirx .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion {padding-left:20px;padding-right:20px}" at specificity (0,3,0), matched exactly (same ">" direct-child combinator, confirmed against the real DOM) so it also covers the product rows and the "See all products" row below, both of which are ".dgwt-wcas-suggestion" elements too. A bare ".dgwt-wcas-suggestion" rule (0,1,0) cannot outrank that regardless of load order. Doubling the real "dgwt-wcas-open-pirx" class (added to by FiboSearch's own JS) raises this to (0,4,0), genuinely outranking the plugin's rule with no !important. */ .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion { padding-left: 0; padding-right: 0; } /* Specificity fix (CU-86eypb6kw, round 4 audit finding, verified live: computed border-bottom-width:0px / border-bottom-style:none on every suggestion row, so the 1px #D1D9E6 divider above never rendered). Root cause: ajax-search-for-woocommerce-premium/assets/css/style.css:1769-1771 ships ".dgwt-wcas-has-headings .dgwt-wcas-suggestion{border-bottom:none}" at specificity (0,2,0). The panel always carries "dgwt-wcas-has-headings" (FiboSearch's headings-grouped template, confirmed live), so this rule always applies; being a shorthand it resets border-bottom-width AND -style AND -color together, so the ".dgwt-wcas-suggestion{border-bottom- color:#D1D9E6}" rule above (0,1,0) can never win regardless of load order -- only the color channel was ever contested, width/style were already lost. Same doubled-class technique as the two padding fixes above: raises this to (0,3,0), genuinely outranking the plugin's rule with no !important. */ .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestion { border-bottom: 1px solid #D1D9E6; } /* --- Product row (node 29847:48268) ------------------------------------------ 80x80 image, 8px radius, image left / title+price stacked right. Default plugin layout puts price on the same row as the title (space-between); Figma stacks price BELOW the title, so content-wrapp switches to a column. ---------------------------------------------------------------------- */ .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si { width: 80px; height: 80px; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-si img { width: 80px; height: 80px; max-width: 80px; max-height: none; object-fit: cover; border: none; border-radius: 8px; padding: 0; background: transparent; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding-left: 12px; } /* Title. Figma "Links/Bold": Nominee Heavy Extended 900, 14px/16px, UPPERCASE, letter-spacing 0.02em, color #494545. Same "Nominee not loaded, fall back to the theme heading font var" situation as the cart drawer above. */ .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-st-title { font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; font-size: 14px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #494545; } /* Price. Figma "Kobe1.1 Bold": 700, 14px/16px, color #247B4E. WooCommerce's own get_price_html() already renders a range ("£20.25 - £22.50") for variable products with no extra code needed here. */ .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-meta { padding-left: 0; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product .dgwt-wcas-sp { font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-weight: 700; font-size: 14px; line-height: 16px; color: #247B4E; text-align: left; padding-left: 0; } /* --- "See all products" button (node 29266:40748) --------------------------- Transparent background, 2px solid bottom border only (accent #FF9572), text Nominee Heavy Extended 900 12px UPPERCASE #494545, letter-spacing 0.04em, centered, trailing arrow. Plugin default already centers the text and uppercases it; only color/border/font/spacing need overriding. The arrow is a plain unicode glyph (no extra SVG asset/PHP needed) sized and colored to match the Figma icon. ---------------------------------------------------------------------- */ .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more { border: none; border-bottom: 2px solid #FF9572; background: transparent; min-height: 28px; padding: 0; margin: 4px 0; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more { font-family: "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)); font-weight: 900; font-size: 12px; line-height: 26px; letter-spacing: 0.04em; color: #494545; padding: 0; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more::after { content: "\2192"; display: inline-block; margin-left: 8px; color: #FF9572; font-weight: 700; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more-total { color: inherit; } /* Specificity fix (CU-86eypb6kw, round 4 audit finding, verified live: computed border-bottom on the "SEE ALL PRODUCTS" button was 0px/none, same symptom, same root cause as the row divider above). The button carries ".dgwt-wcas-suggestion" too (see markup: `class="dgwt-wcas-suggestion js-dgwt-wcas-suggestion-more dgwt-wcas-suggestion-more"`), so it is also caught by ajax-search-for-woocommerce-premium's ".dgwt-wcas-has-headings .dgwt-wcas-suggestion{border-bottom:none}" (specificity 0,2,0). The plain ".dgwt-wcas-suggestion.dgwt-wcas-suggestion- more{border-bottom:2px solid #FF9572}" rule above is ALSO (0,2,0) -- a tie the plugin's rule was winning by load order. Doubled-class fix raises this to (0,4,0), genuinely outranking the plugin's rule with no !important. */ .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more { border-bottom: 2px solid #FF9572; } /* --- Hover states (CU-86eypb6kw, round 4 audit finding) ----------------------- FiboSearch's own ".dgwt-wcas-suggestion-selected{background-color:#eeeeee}" (assets/css/style.css:358-360, specificity 0,1,0) is the plugin's default hover/keyboard-nav highlight class -- a cold grey with no relation to this panel's #F8EDE3 cream fill or the #247B4E brand green used everywhere else in this build (cart drawer header/CTA above). Replacing it with a subtle brand-tinted cream (a light blend of the panel cream toward the brand green, not a new arbitrary color) keeps the highlight readable without introducing an unrelated hue. Doubled-class per the same specificity pattern as every other fix in this section, since a plain single-class rule here would tie the plugin's (0,1,0) rule and risk losing on load order the same way the border-bottom rules did. */ .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestion-selected { background-color: #E7E4D7; } .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestion-selected .dgwt-wcas-st-title { color: #247B4E; } /* "See all products" hover/keyboard-selected state: without this rule the button would inherit the grey/cream row background above on hover (it is also a ".dgwt-wcas-suggestion", so FiboSearch's JS adds "dgwt-wcas- suggestion-selected" to it too), which the Figma spec does not show for this transparent-background CTA. The border-bottom fix above already wins the resting state; this keeps it winning on hover too and shifts the accent to the brand green as the hover affordance (verified before this fix: computed border-bottom on hover was 0px/none, the same root cause as the resting-state bug above, not a separate regression). */ .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover, .dgwt-wcas-open-pirx.dgwt-wcas-open-pirx .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected { background: transparent; border-bottom-color: #247B4E; } @media (max-width: 690px) { .dgwt-wcas-suggestions-wrapp { padding: 24px 16px 16px; } }