/** * Bonza. Wishlist Off-Canvas Drawer skin. * * Skins the SHARED wishlist-offcanvas module (assets/css/components/wishlist-offcanvas.css, * inc/wishlist-offcanvas.php) to Bonza's Figma spec. Structure and behaviour stay in the * shared module; this file is colors, type, spacing and the card-grid layout only. * * Figma file cY9QX6IwGVaaGI4r7J2RRF, component set 68:34939 "Wishlist": * 68:34938 Property 1=Empty (desktop, 445px) * 68:34937 Property 1=Filled (desktop, 445px) * 2138:116628 Property 1=Variant3 (mobile filled, 340px) * 2138:116569 Property 1=Variant4 (mobile empty, 340px) * * Bonza opts into the card-grid item layout (blocksy_child_wishlist_card_layout * filter, set in clients/bonza/bonza.php). Figma shows a 2-col PRODUCT CARD grid, * not the shared module's default list-row layout. * * Colors are bare literals, not `var(--theme-palette-color-N, )`. Blocksy * always emits its own palette to :root (themes/blocksy/inc/classes/colors.php), so * a var() fallback here never fires and the rule silently renders Blocksy's default * blue instead of Bonza's brand green. Same convention already used by the Cart * Off-Canvas precedent in this file (see the #woo-cart-panel section above). * * @package Blocksy_Child * @client Bonza * @date 2026-08-26 * * editor-friendly-ok: this whole file already uses bare hex literals by * design (see the "Colors are bare literals" note above) since Blocksy's own * palette vars always win over a var() fallback here. Not block-editor * content; this skins a JS-rendered off-canvas panel with no editor surface. */ /* ========================================================================== Panel container. width/radius/shadow/background. WHY: Figma's Filled/Empty frames are 445px wide with a light shadow and a cream fill; the shared module's PHP-generated defaults (500px width, 0/0/70/0.35 shadow) come from mirroring the Cart panel's Customizer values, which haven't been set for Bonza yet. `inc/wishlist-offcanvas.php` prints its own inline style block (#blocksy-child-wishlist-panel-css) in wp_footer at priority 99, targeting these exact same selectors at the exact same specificity, LATER in the document than this enqueued stylesheet. Equal specificity plus later source order means that inline block always wins over a plain `#woo-wishlist-panel { ... }` rule here, so `--side-panel-width` and the close-button icon color need one extra type-selector (`body`) so they actually take effect. ========================================================================== */ body #woo-wishlist-panel { --side-panel-width: 445px; } #woo-wishlist-panel .ct-panel-inner { border-radius: 24px 0 0 24px; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08); } body #woo-wishlist-panel .ct-panel-inner { background-color: #F8EDE3; } /* `.ct-wishlist-suggested` sits outside the shared module's scroll box (`.ct-panel-content`), as a flex-shrink:0 sibling, so it never scrolls with the wishlist items. Move the scrollbar up to `.ct-panel-inner` instead, and pin the header so it stays visible while the rest scrolls. */ #woo-wishlist-panel .ct-panel-inner { overflow-y: auto; } #woo-wishlist-panel .ct-panel-content { flex: 0 0 auto; overflow-y: visible; } /* Blocksy's own mobile breakpoint (NOT 768px). Figma's mobile frames (Variant3/Variant4) are a fixed 340px, not the shared module's 90vw. */ @media (max-width: 690px) { body #woo-wishlist-panel { --side-panel-width: 340px; } #woo-wishlist-panel .ct-panel-inner { border-radius: 24px 0 0 24px; } } /* ========================================================================== Header band. heart icon + "Wishlist (N)" + close button. WHY: Figma's header is a solid brand-green (#247B4E) 76px band with white type and icons; the shared module leaves .ct-panel-actions unstyled (inherits page text color) since most sites don't want a colored band here. `border-bottom: none` clears the grey divider assets/css/components/ offcanvas.css puts on every panel header by default (visible against a solid green band; matches the same reset in the Cart Off-Canvas section). ========================================================================== */ /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. The panel's own rounded corner is on .ct-panel-inner (24px 0 0 24px), but the header sits at its very top with square corners of its own, so its opaque green rectangle visibly squares off the panel's top-left corner underneath it. Matching the same top-left radius here (no overflow:hidden needed - nothing inside spills past this corner) fixes that without touching the pattern-strip pseudo-element's own 20px bleed below, which is unrelated to this corner. Found live 9 Sep 2026. editor-friendly-ok: bare hex literal below is this same intentional exception, and `position: sticky` now lives on this rule instead of a separate earlier one, so a same-specificity `position: relative` elsewhere can't win the cascade by source order and unstick the header. */ #woo-wishlist-panel .ct-panel-actions { background-color: #247B4E; /* unchanged value, 5.23:1 white-on-green (same pair as the price rule below, ratio is symmetric) */ padding: 16px 20px; min-height: 76px; border-bottom: none; border-radius: 24px 0 0 0; align-items: center; position: sticky; top: 0; z-index: 2; } /* Figma places a decorative hill/grass strip image at y:58 inside the 76px header band (444x38 on desktop, 340x29 on mobile - node 34425:263906 / 34434:264042), so its bottom edge sits 20px below the header (bleeding onto the cream body). A pseudo-element keeps this purely decorative and needs no new markup in the shared PHP template, so byronbay/ alternateworlds/thenaturalmattress (which don't enqueue this file) are unaffected. contrast-exempt: decorative background image, no text renders on or near it. Verified against Figma's own file 9 Sep 2026: the source asset (wishlist-header-icon-strip.png, 1920x84) is Figma's own unmodified fill image for this rectangle (`fileKey cY9QX6IwGVaaGI4r7J2RRF`, imageRef 9ad6faab3b3ae47d7ae28c93ead3b8857985ef2c), and Figma renders that fill with `scaleMode: FILL` and `needsCropping: false` - i.e. a plain centered cover-style crop, the same algorithm as CSS `background-size: cover`. `cover` (not `100% 100%`, ruled out the same day) is the pixel-accurate scale mode - that part of the earlier analysis holds. What that analysis missed, caught from a client screenshot 9 Sep 2026: the ORIENTATION was wrong. The source PNG is a hill silhouette drawn with its green fill at the BOTTOM of the frame and transparency at the TOP (grass tufts along the hill's upper edge, sky above). Composited directly at the box's natural top-to-top mapping, that puts transparency near the header (fine, still on the green header background) but puts the SOLID GREEN FILL near the box's bottom edge, deep in the cream body - the opposite of the "green tapers off into cream" wave the header actually needs. `transform: scaleY(-1)` flips the composited result vertically (cover/position are computed first, then the whole box is mirrored), so the hill's transparent sky now sits at the bottom (revealing cream) and its solid fill sits at the top (against the header), producing a proper downward-fading wave instead of an inverted green intrusion into the cream area. */ #woo-wishlist-panel .ct-panel-actions::after { content: ""; position: absolute; left: 0; top: 58px; width: 100%; height: 38px; background-image: url(../assets/wishlist-drawer/wishlist-header-icon-strip.png); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scaleY(-1); pointer-events: none; } @media (max-width: 690px) { #woo-wishlist-panel .ct-panel-actions::after { top: 67px; height: 29px; } } #woo-wishlist-panel .ct-panel-heading, #woo-wishlist-panel .ct-wishlist-panel-title { color: #fff; font-family: "Nominee", var(--theme-font-family, sans-serif); font-weight: 900; font-size: 18px; line-height: 20px; text-transform: uppercase; letter-spacing: normal; } /* Figma's heroicons-mini/heart (uploaded as the drawer icon, attachment 145143) is a stroked outline (fill="none", stroke on the path), not a filled shape. The shared module's `.ct-icon{fill:currentColor}` default and Blocksy core's `.ct-icon{fill:var(--theme-icon-color,...)}` both beat the SVG's own fill="none" attribute, so a plain `fill:#fff` here re-fills the outline solid white, same problem this exact fix already solves for the Cart drawer (see `#woo-cart-panel .ct-cart-panel-icon` above). */ #woo-wishlist-panel .ct-wishlist-panel-icon { fill: none; stroke: #fff; } #woo-wishlist-panel .ct-wishlist-panel-count { color: #fff; opacity: 0.7; } /* Same specificity bump as the panel-width rule above: the shared module's wp_footer block also writes a literal --theme-icon-color on this exact selector, later in the document. */ body #woo-wishlist-panel .ct-toggle-close { --theme-icon-color: #fff; } /* source: DERIVED -- close (X) icon opacity dim, same treatment as the cart drawer's identical control (cart-drawer-filled.css); not a contract component. Color-only, no reflow. */ body #woo-wishlist-panel .ct-toggle-close:hover { --theme-icon-color: rgba(255, 255, 255, 0.75); } /* The pattern-strip pseudo-element above bleeds 20px past the header's own 76px height (top:58px + height:38px = 96px from the header's top, same total on mobile: 67px + 29px). The shared module's scrollable content area (.ct-panel-content-inner) starts right at the header's bottom edge with no top padding, so the first item/card touches the pattern's bleed zone with no breathing room. 24px clears past 96px with a few px to spare and matches this file's other 24px paddings (button horizontal padding, panel corner radius). Found live 9 Sep 2026. */ #woo-wishlist-panel .ct-panel-content-inner { padding-top: 24px; } /* Blocksy drops the panel body to 16px side padding below 782px; the panel is still the 445px desktop width from 691px, so keep desktop's 24px there (QA 5 Oct: 744 used mobile padding). */ @media (min-width: 691px) and (max-width: 781.98px) { #woo-wishlist-panel .ct-panel-content-inner { padding-left: 24px; padding-right: 24px; } } /* ========================================================================== Card-grid item layout (Figma "Filled" state, a 2-col PRODUCT CARD grid). Active only when clients/bonza/bonza.php's blocksy_child_wishlist_card_layout filter is on, via the .ct-wishlist-cards scope class the shared JS/PHP already add to #woo-wishlist-panel in that mode. ========================================================================== */ #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-items--cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; padding: 0; margin: 0; } #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border-bottom: none; position: relative; } #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item .ct-media-container { width: 100%; min-width: 0; aspect-ratio: 3 / 4; border-radius: var(--theme-border-radius, 8px); } #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item .ct-media-container img { width: 100%; height: 100%; object-fit: cover; } #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-item-info { padding-right: 0; } #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-remove { position: static; margin-top: 4px; opacity: 1; font-size: 12px; text-decoration: underline; color: #666; } #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-remove-label { pointer-events: none; } /* ========================================================================== "You May Also Like" heading. shared between the Filled state's suggested- products carousel (.ct-wishlist-suggested, always rendered by the module) and the Empty state's category grid (.ct-wishlist-categories, card-layout only, added below). Figma "Links/Bold": Nominee Heavy Extended 900, 14px/16px, UPPERCASE, letter-spacing 0.02em, color #353638. ========================================================================== */ #woo-wishlist-panel .ct-wishlist-categories .ct-module-title, #woo-wishlist-panel .ct-wishlist-suggested .ct-module-title { font-family: "Nominee", var(--theme-font-family, sans-serif); font-weight: 900; font-size: 14px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #353638; margin-bottom: 12px; } /* ========================================================================== Empty-state "You May Also Like" category grid (Figma Empty state, a 2x2 grid of category cards: cover image(s), name, live product count). ========================================================================== */ #woo-wishlist-panel .ct-wishlist-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #woo-wishlist-panel .ct-wishlist-category-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; } #woo-wishlist-panel .ct-wishlist-category-media { display: flex; gap: 2px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--theme-border-radius, 8px); } #woo-wishlist-panel .ct-wishlist-category-media--single { aspect-ratio: 1 / 1; } /* Wrapped-cover markup, produced when the aw_category_cards_image_htmls() helper is present. */ #woo-wishlist-panel .ct-wishlist-category-img-wrap { flex: 1; overflow: hidden; } #woo-wishlist-panel .ct-wishlist-category-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Bare-img fallback markup. That helper does not exist on this site, so inc/wishlist-offcanvas.php's else-branch runs instead: a plain wp_get_attachment_image() call with no wrapper span. Without this rule the image sits unsized inside the flex/aspect-ratio box above. */ #woo-wishlist-panel .ct-wishlist-category-media > img { width: 100%; height: 100%; object-fit: cover; display: block; } #woo-wishlist-panel .ct-wishlist-category-name { font-size: 14px; font-weight: 600; color: #353638; } #woo-wishlist-panel .ct-wishlist-category-count { font-size: 12px; opacity: 0.6; } /* ========================================================================== Sign-up / continue CTAs. Figma's full-width pill button ("register" on the guest notice, "Continue Shopping" on the empty state): brand green, 999px pill radius, soft double drop-shadow, Nominee 900 12px uppercase. ========================================================================== */ /* source: FIGMA -- Button/Secondary/Large (hover-type-contract.md). This is the contract's own cited live usage ("register" on the guest notice is one of the 8 confirmed real-page Button instances). Default matches Secondary/ Large exactly: bg #247B4E, no border, white text, visible shadow. A transparent border is declared so the hover-state border addition below causes zero layout shift (box-sizing:border-box already set). editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. */ #woo-wishlist-panel .ct-wishlist-signup-btn, #woo-wishlist-panel .ct-wishlist-continue-btn { background: #247B4E; color: #fff; border: 1.5px solid transparent; border-radius: 999px; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08); padding: 16px 24px; height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-family: "Nominee", var(--theme-font-family, sans-serif); font-weight: 900; font-size: 12px; letter-spacing: 0.04em; transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out; } /* source: FIGMA -- Secondary/Large hover delta: green->gold swap, 1.5px border added, text->dark, shadow removed. Corrects the previous plain darken (#1d6640), which had no Figma backing. editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. */ #woo-wishlist-panel .ct-wishlist-signup-btn:hover, #woo-wishlist-panel .ct-wishlist-continue-btn:hover { background: #FFC125; /* 8.7:1 with the #2E2A2A text below (WCAG relative-luminance formula), same pair verified elsewhere (cart-drawer-filled.css .bcd-empty-cta--primary) */ border-color: #B86E00; color: #2E2A2A; box-shadow: none; } #woo-wishlist-panel .ct-wishlist-guest-notice { background: transparent; padding: 0; text-align: left; } /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. This skins a JS-rendered off-canvas panel, not block editor content. */ /* ========================================================================== Empty-state heading. Figma text node #7078:189399: Nominee Heavy Extended 900, 18px/32px, CENTERED, colour #247B4E (brand green) on the cream panel background (passes AA easily: dark green on #F8EDE3 cream far exceeds 4.5:1). The wrapping frame is also center-aligned (justifyContent/ alignItems: center), so the whole block, not just the text, is centered. ========================================================================== */ /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. CONFIRMED root cause, round-3 audit: Blocksy core (2.1.56) sets .ct-panel-content-inner to `align-items: var(--horizontal-alignment, flex-start)`, and nothing in this build sets that custom property for the wishlist panel (core only sets it to stretch for #woo-cart-panel), so it resolves to flex-start - its flex children (including this wrapper) shrink-wrap to their own content width and sit at the container's start (left) edge, regardless of this rule's own correct align-items:center. width:100% (kept from round 2) is what actually fixes it, by giving the flex item an explicit cross-size instead of the auto size flex-start would otherwise shrink-wrap to. align-self:stretch (added round 3) is redundant next to an explicit width:100% - Flexbox only applies stretch when the item's cross size is auto - but is harmless, so left in place rather than removed for a one-line simplification. Not verified live this session (no browser access); confirmed only by reading Blocksy's actual core CSS and this same fix already shipping on thenaturalmattress's sibling site (sites/thenaturalmattress/custom/css/wishlist-offcanvas.css). */ #woo-wishlist-panel .ct-wishlist-empty { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; align-self: stretch; } #woo-wishlist-panel .ct-wishlist-empty-message { color: #247B4E; /* unchanged value; corrected note 9 Sep 2026: measures 4.53:1 on #F8EDE3, passes AA but this file's older comment overstated it as "far exceeds" */ font-family: "Nominee", var(--theme-font-family, sans-serif); font-weight: 900; font-size: 18px; line-height: 32px; margin: 0; text-align: center; width: 100%; } /* ========================================================================== "You May Also Like" suggestions. Figma's Wishlist component (both the Empty and Filled variants) shows the SAME static 2-card product row here, never a category grid and never an arrow-driven slider. The shared module renders both blocks and toggles them with the state classes below (see assets/js/wishlist-offcanvas.js setPanelEmptyState()); Bonza overrides that toggle so the product row always wins. ========================================================================== */ #woo-wishlist-panel .ct-wishlist-categories { display: none !important; } #woo-wishlist-panel .ct-wishlist-suggested { display: block !important; /* CU-86eyuup3c: the shared blaze-blocksy stylesheet puts a solid border-top above this section (styled for its own carousel-based sites: Byron Bay, AlternateWorlds, The Natural Mattress). Figma's Wishlist component (68:34939, node #34457:266441/266442, verified against a downloaded render) has no border above "You May Also Like" at all - the divider sits below the heading instead, see the .ct-module-title override below. Bonza-only, so this cannot affect the sites that still want that border-top. */ border-top: none; } /* CU-86eyuup3c: the suggested row now renders its own static grid via blocksy_child_render_wishlist_suggested_product_cards() (server-side, inc/wishlist-product-card.php), not Blocksy's carousel template, so there is no flexy/carousel markup left to override here. */ #woo-wishlist-panel .ct-wishlist-suggested-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* CU-86eyuup3c: divider below "You May Also Like", Bonza-only override of the shared .ct-module-title rule above (same selector depth, wins by source order). Figma node #34457:266442: 12px gap from the heading text to a 1px #E4E5E7 divider rule (node #34457:266444, a "Divider" component instance), then a 24px gap from the divider down to the product cards row (node #34457:266441's own gap:24px). padding-bottom is the text-to-line gap, border-bottom is the line itself, margin-bottom is the line-to-cards gap (overrides the shared rule's plain margin-bottom:12px above for this selector only). Figma's divider carries a 2px border-radius, omitted here as negligible on a 1px hairline. Scoped to .ct-wishlist-suggested only, not .ct-wishlist-categories (the empty-state variant), which was not part of the client's report and is not addressed here. */ #woo-wishlist-panel .ct-wishlist-suggested .ct-module-title { padding-bottom: 12px; border-bottom: 1px solid #E4E5E7; /* contrast-exempt: decorative divider line, not text */ margin-bottom: 24px; } /* Grid rows stretch equal-height by default, but that only sizes this wrapper div; .ct-wishlist-card-inner (the visible white card) still shrinks to its own content unless it's told to fill this box too. Made flex so the flex:1 rule on .ct-wishlist-card-inner below can do that. */ #woo-wishlist-panel .ct-wishlist-suggested-card { display: flex; flex-direction: column; } /* ========================================================================== Shared PRODUCT CARD (CU-86eyuup3c). Figma component 29089:54366, the "category / Show Subheadline / Regular price" variant used for both the actual wishlist item cards (.ct-wishlist-item, JS-injected via product.card) and the "You May Also Like" suggested cards (.ct-wishlist-suggested-card, server-rendered). Both wrap this same markup, so one set of rules below styles both contexts. Contrast, measured (WCAG 2.1 AA, 4.5:1 normal text): #2E2A2A on #FFFFFF (name/subheadline) 14.18:1 #2E2A2A on #F8EDE3 (pill text) 12.32:1 #247B4E on #FFFFFF (price) 5.23:1 #FFFFFF on #CC0000 (badge) 5.89:1, darkened from Figma's literal #FF0000. White on #FF0000 measures about 4.0:1 at this 10px size, below AA; #CC0000 is the closest passing red. ========================================================================== */ /* Card chrome (rounded corners, clipped image, white background) lives on the INNER .ct-wishlist-card-inner element that blocksy_child_wishlist_product_card_html() renders, not on the caller's own wrapper (.ct-wishlist-item / .ct-wishlist-suggested-card). Those wrappers also hold the "Remove" control in the item context (a sibling of .ct-wishlist-card-inner, appended after it); clipping at the wrapper level cut off its focus ring. */ /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. flex:1 makes this fill whatever height its flex-column parent has (the equal-height grid row in both the suggested grid and the wishlist items grid below), so a short card's white box matches a long-content card's box instead of shrinking to its own content height. Found live 9 Sep 2026: unequal-length real product descriptions produced visibly unequal card heights side by side. */ #woo-wishlist-panel .ct-wishlist-card-inner { display: flex; flex: 1; flex-direction: column; border-radius: 12px; overflow: hidden; background-color: #FFFFFF; /* contrast-exempt: card background, covered by the text-on-white pairs already measured above */ } #woo-wishlist-panel .ct-wishlist-card-media { display: block; aspect-ratio: 1 / 1; } #woo-wishlist-panel .ct-wishlist-card-media .ct-wishlist-card-image { width: 100%; height: 100%; object-fit: cover; display: block; } #woo-wishlist-panel .ct-wishlist-card-info { display: flex; flex-direction: column; gap: 12px; padding: 16px; } #woo-wishlist-panel .ct-wishlist-card-name { font-family: "Nominee", var(--theme-font-family, sans-serif); font-weight: 900; font-size: 16px; line-height: 1.2; /* was 16px (1.0x), 86eypb6j8 */ letter-spacing: 0.02em; text-transform: uppercase; color: #2E2A2A; text-decoration: none; } #woo-wishlist-panel .ct-wishlist-card-pills { display: flex; flex-wrap: wrap; gap: 4px; } #woo-wishlist-panel .ct-wishlist-card-pill { padding: 4px 6px; background: #F8EDE3; border-radius: 999px; font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-size: 12px; line-height: 14px; color: #2E2A2A; } /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. Real WooCommerce short_description fields run far longer than Figma's sample copy (seen live 9 Sep 2026: one product's description ran to roughly 300 characters, several sentences). Clamped to 2 lines, the shortest cap that still reads as a real sentence fragment rather than a single truncated word; the price/badge below stay visible regardless of description length, and the flex:1 rule on .ct-wishlist-card-inner equalizes the rest of the card's height either way. */ #woo-wishlist-panel .ct-wishlist-card-subheadline { font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-size: 12px; line-height: 14px; /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. */ color: #2E2A2A; /* unchanged value, already measured 14.18:1 on #FFFFFF above (line ~421) */ margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #woo-wishlist-panel .ct-wishlist-card-divider { height: 1px; border: 0; background: #F3F4F6; margin: 0; width: 100%; } /* editor-friendly-ok: bare hex literals throughout this file are intentional, see the file header. CORRECTION, round-3 audit: an earlier version of this rule (round 2) bumped font-weight from 700 to 900 on the inherited Kobe1.1 family, reasoning that 900 was "closer" to Figma's boldWeight:900. That was a no-op - custom/css/fonts.css only registers Kobe1.1 at 700/400 (the same file twice), so requesting 900 just falls back to 700 with an identical render; no browser synthesizes bold on an already-bold face. Figma's price text (node #29323:47306) is genuinely drawn in "Archivo Black", not a Kobe1.1 weight variant. Archivo Black is SIL OFL and freely available (the same route already used for footer.css's Inter eyebrow), so it is now registered properly - see custom/css/fonts.css - rather than approximated. editor-friendly-ok: font-family below already uses the var(--wp--preset--font-family--*, literal) pattern, not a bare literal, matching every other font rule in this file. No !important needed: fonts.css's `body { font-family: ... !important }` only sets the INHERITED value body-wide; any element with its own cascaded font-family declaration - !important or not - wins over an inherited value, which is exactly how this file's other card rules (.ct-wishlist-card-name/-pill/-badge) already override that same body rule with no !important of their own. An earlier version of this comment claimed !important was required to beat that rule; it was not, and has been removed. */ /* REVERTED (CU-86eyxb3yv, operator ruling): a previous pass here switched this rule from "Archivo Black" to the brand body pair (Kobe1.1), following hover-type-contract.md's blanket "remove non-brand fonts" directive. The operator has since ruled that a specific CITED Figma node outranks that blanket directive -- it applies only to uncited/incidental usage. This rule cites a real node (round-3 audit comment above, Figma #29323:47306, genuinely drawn in Archivo Black, registered SIL OFL in custom/css/fonts.css), so the citation wins. Restored to Archivo Black. editor-friendly-ok: font-family uses the var(--wp--preset--font-family--*, literal) pattern, not a bare literal, matching every other font rule in this file (see the round-3 comment above for why !important is not needed here). */ #woo-wishlist-panel .ct-wishlist-card-price { font-family: var(--wp--preset--font-family--archivo-black, "Archivo Black", var(--theme-font-family, sans-serif)); font-size: 14px; font-weight: 400; color: #247B4E; /* unchanged value, already measured 5.23:1 on #FFFFFF above */ } #woo-wishlist-panel .ct-wishlist-card-badge { display: inline-block; background: #CC0000; color: #FFFFFF; border-radius: 4px; padding: 4px 8px; font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-weight: 700; font-size: 10px; line-height: 10px; width: fit-content; } /* ============================================================= UNIFIED WISHLIST HEART, EVERY SURFACE (86eyxb3vc, 2026-09-21) ============================================================= Figma: WISHLIST ICON component set 29089:54165, classified BONZA and resolved down to the glyph vector (not just the wrapper): not wishlisted -> unfilled #FFC125 outline wishlisted -> solid #FFC125 fill with a #6E5D84 outline It is an outline-to-filled toggle, NOT a colour swap of an already filled shape. That distinction is what the markup supports, see below. WHAT WAS WRONG, all measured live on bonza-retheme.blz.au 2026-09-21: product cards .ct-wishlist-button-archive glyph #3A4F66, no active rule at all PDP button .ct-wishlist-button-single glyph #3A4F66, active -> #2872FA header trigger .ct-header-wishlist glyph #3A4F66 cart drawer .bcd-wishlist-btn active -> #FF9572 peach Five treatments, and three different state conventions. #3A4F66 is --theme-text-color and #2872FA is --theme-palette-color-1, both Blocksy stock values the heart inherited through currentColor because nothing here ever set it. Neither is a Bonza colour. The blue only appeared once a product was actually wishlisted, which is why it survived earlier passes. The blue specifically comes from the SHARED theme layer, blaze-blocksy assets/css/components/woo-single.css: .ct-wishlist-button-single[data-button-state="active"] .ct-heart-fill { fill: var(--theme-palette-color-1, #111111) !important; } That file is shared with Byron Bay, AlternateWorlds and The Natural Mattress, so it is deliberately NOT edited here. These rules override it from Bonza's own layer instead, which is why they carry !important: matching an !important declaration requires one, specificity alone loses. WHY fill-toggling BOTH paths rather than stroking one. The button SVG (viewBox 0 0 15 15) contains TWO filled paths, confirmed live: `.ct-heart-fill` (d length 276) is the inner solid heart, and an unclassed sibling (d length 527) is the outline ring, itself drawn as a filled shape rather than a stroke. Blocksy's own design intends the ring to be permanent and the inner fill to appear when active. Both were the same colour, which is why the heart read as solid in both states and the only difference a shopper saw was slate turning blue. Toggling `.ct-heart-fill` between `none` and gold, and recolouring the ring, reproduces Figma's outline-to-filled behaviour using the markup's own structure. Setting `stroke` on a fill-drawn path would double the visual weight instead. editor-friendly-ok: bare hex literals match the convention already used throughout this file. */ /* --- not wishlisted: hollow centre, gold ring ------------------------- */ .ct-wishlist-button-archive .ct-heart-fill, .ct-wishlist-button-single .ct-heart-fill { fill: none !important; } .ct-wishlist-button-archive svg path:not(.ct-heart-fill), .ct-wishlist-button-single svg path:not(.ct-heart-fill) { fill: #2E2A2A !important; /* Operator ruling 2026-09-21: the NOT-wishlisted outline is black, not gold. Was #FFC125, which measured 1.93:1 on white and survived only because the ring is not the sole means of conveying state. #2E2A2A is this project's established ink (the same value the out-of-stock swatch label and every #2E2A2A-on-#FFC125 pairing in cart-drawer-filled.css already use) and computes 14.2:1 on white, so the rest state now clears 3:1 outright instead of relying on the exemption. The wishlisted rule below is deliberately untouched and stays #FFC125, so the state change is now black outline -> gold solid, which is a stronger distinction than the gold -> gold it replaced. */ } /* --- wishlisted: gold fill, purple ring ------------------------------- */ .ct-wishlist-button-archive[data-button-state="active"] .ct-heart-fill, .ct-wishlist-button-single[data-button-state="active"] .ct-heart-fill { fill: #FFC125 !important; } .ct-wishlist-button-archive[data-button-state="active"] svg path:not(.ct-heart-fill), .ct-wishlist-button-single[data-button-state="active"] svg path:not(.ct-heart-fill) { fill: #FFC125 !important; /* matches the inner fill, so the wishlisted heart is a solid gold shape, which is what State=Hover draws. 1.93:1 on white: below the 3:1 non-text floor on its own, but the state is carried by the shape filling in rather than by this colour, and the chip's own white background plus the shape change remain the distinguishing cues. Previously #6E5D84, which is not in the component set at all. */ } /* --- header trigger --------------------------------------------------- */ /* Single-path glyph, no separate fill layer, so it cannot render the outline-only variant without swapping the SVG for the Figma export. Recoloured to the brand gold so it stops reading as Blocksy slate; the outline treatment is flagged rather than faked. */ .ct-header-wishlist svg path { fill: #FFC125 !important; } /* --- cart drawer toggle ----------------------------------------------- */ /* Same two states, but this button uses data-active rather than Blocksy's data-button-state, and its own path is stroke-drawn, so fill and stroke are both set here. Was #FF9572 peach, a value with no Figma backing. */ .bcd-wishlist-btn svg path { fill: none !important; stroke: #2E2A2A !important; /* rest state black, operator ruling 2026-09-21, same change as the shared rule above. The [data-active] rule directly below keeps #FFC125 and is deliberately untouched. */ } .bcd-wishlist-btn[data-active="true"] svg path { fill: #FFC125 !important; stroke: #FFC125 !important; } /* --- search overlay result cards --------------------------------------- */ /* The search UI is a custom overlay (.bcsp-*), not FiboSearch suggestions, so its wishlist control is a separate implementation again. It was fill:none / stroke:#FF0000, going to fill:#FF0000 when active: pure red, which is not a Bonza colour and appears nowhere in the Figma file. Same two states as everything above, and it uses data-active like the cart drawer rather than Blocksy's data-button-state. Its glyph is stroke-drawn, so fill and stroke are both set. */ .bcsp-card__wishlist svg { fill: none !important; stroke: #2E2A2A !important; /* rest state black, operator ruling 2026-09-21. This is the search overlay result card. The [data-active="true"] rule below keeps #FFC125 and is untouched. */ } .bcsp-card__wishlist[data-active="true"] svg { fill: #FFC125 !important; stroke: #FFC125 !important; } /* --- button chrome must NOT change on the wishlisted state ------------- */ /* Follow-up to the unification above, 86eyxb3vc. The first pass corrected the glyph and left the BUTTON untouched, so clicking a heart still turned its whole chip Blocksy blue. Reproduced by real click on both controls: .ct-wishlist-button-single white #FFFFFF -> #2872FA bg AND border .ct-wishlist-button-archive white #FFFFFF -> #2872FA bg Source is the shared blaze-blocksy layer again, assets/css/components/woo-single.css: .ct-wishlist-button-single[data-button-state="active"] { background: var(--theme-button-background-initial-color) !important; border-color: var(--theme-button-background-initial-color) !important; } and --theme-button-background-initial-color is #2872fa, Blocksy's stock button colour. That file is shared with Byron Bay, AlternateWorlds and The Natural Mattress, so it is overridden from here rather than edited. WHY the chrome holds still. Figma's WISHLIST ICON set (29089:54165) describes a glyph-level outline-to-filled toggle and specifies no chrome change between states. The contract also records the card's heart slot as a white #FFFFFF background chip. So the heart filling in IS the state change, and the chip stays put. METHOD NOTE, worth keeping. Setting data-button-state="active" by hand computed WHITE here, while a real .click() computed BLUE, on the same element with identical attributes afterwards. The simulation was not equivalent to the real interaction and it hid this bug through a full verification pass. Exercise these controls with a real click. editor-friendly-ok: bare hex literals match this file's convention. */ .ct-wishlist-button-single[data-button-state="active"] { background: #FFFFFF !important; border-color: #FFA825 !important; /* its own rest-state border, held */ } .ct-wishlist-button-archive[data-button-state="active"] { background: #FFFFFF !important; border-color: transparent !important; /* rest state renders at 0 width */ } /* --- full property set, not just colour (86eyxb3vc) -------------------- */ /* Earlier passes corrected colour and left geometry alone. Measured against Figma and corrected here: product card chip live 32x32, pad 0 -> 26x26, pad 0 8px heart vector live svg 14x14 -> 16x14 heart stroke weight live 1px -> 1.333px Sources. The WISHLIST ICON component set (29089:54165) draws State=Default at 32x32 with a #FFFFFF fill at 80% opacity, fully round, padding 0 8px, holding a 16x14 vector stroked #FFC125 at weight 1.3333. The PRODUCT CARD instance (29323:46945) overrides that to 26x26 with a SOLID #FFFFFF fill. The instance is what the designer actually placed on a card, so it wins for this surface; operator ruling 2026-09-21. The component's 80% opacity is deliberately not applied here for the same reason. The heart keeps rendering as a filled ring rather than a stroked vector: the markup's outline path is itself a filled shape, so `fill` reproduces Figma's stroked look at the right weight, and adding `stroke` on top would double the visual weight. stroke-width is still set for the controls whose glyph genuinely is stroke-drawn (cart drawer, search overlay). editor-friendly-ok: bare hex literals match this file's convention. */ .ct-wishlist-button-archive { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; padding: 0 8px !important; border-radius: 50% !important; background: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ct-wishlist-button-archive svg { width: 16px !important; height: 14px !important; } /* --- cart drawer uses the Cart's Card variant ------------------------- */ /* Figma 29390:48387 (and its mobile twin 31441:253860) draw this one as a 32x32 chip with a #F8EDE3 cream fill and a 1px #FF9572 peach stroke, not the white chip the other surfaces use. An earlier pass removed that peach as an unbacked value; it is the variant's own border and is restored here. Operator ruling 2026-09-21. The heart inside still follows the shared gold/purple state toggle above. */ .bcd-wishlist-btn { width: 32px !important; height: 32px !important; padding: 0 8px !important; border-radius: 50% !important; background: #F8EDE3 !important; border: 1px solid #FF9572 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .bcd-wishlist-btn svg { width: 16px !important; height: 14px !important; } .bcd-wishlist-btn svg path { stroke-width: 1.333 !important; } .bcsp-card__wishlist svg path { stroke-width: 1.333 !important; } /* --- CORRECTION: there is no purple in this component set ------------- */ /* Shipped earlier with a #6E5D84 purple ring on the wishlisted state, taken from a summary line in hover-type-contract.md rather than from the node. Re-read the source data 2026-09-21: State=Default vector 29089:20232 strokes ['#FFC125'], fills [] State=Hover vector 29089:54162 fills ['#FFC125'], strokes [] Both states are gold. Only outline-versus-fill changes, and #6E5D84 does not appear anywhere in WISHLIST ICON 29089:54165. The wishlisted heart is therefore a SOLID GOLD heart: both the inner fill and the outline ring are #FFC125, which is how the two-path markup renders Figma's filled vector. The rules above are rewritten accordingly; this note records why, because a derived summary disagreed with the node it was derived from and the summary was believed. Read the node. */ /* --- PDP: the chrome override has to OUT-SPECIFY the shared chain ------ */ /* The earlier chrome fix used `.ct-wishlist-button-single[data-button-state= "active"]`, specificity (0,2,0). The shared blaze-blocksy layer carries the SAME declaration at (0,4,0): .ct-product-add-to-cart .ct-cart-actions .ct-wishlist-button-single[data-button-state="active"] { background: var(--theme-button-background-initial-color) !important; } Both are !important, so specificity decides and the shared rule won. The PDP button therefore still turned #2872FA on click while the product card, which has no such ancestor chain, was correctly white. Verifying only the card is what let this through. Measured live on the PDP after a real click: background AND border-color both rgb(40, 114, 250). Fixed by leading with `body`, taking every ancestor chain the shared file uses (.ct-product-add-to-cart .ct-cart-actions, .bundle_button, and this site's own .single-product form.cart), so each branch clears (0,4,0) with an element on top. Figma's WISHLIST ICON specifies no chrome change between states, so the chip holds its rest-state white and gold border and the heart carries the state. editor-friendly-ok: bare hex, file convention. */ body .ct-product-add-to-cart .ct-cart-actions .ct-wishlist-button-single[data-button-state="active"], body .single-product form.cart .ct-cart-actions .ct-wishlist-button-single[data-button-state="active"], body .bundle_button .ct-wishlist-button-single[data-button-state="active"], body .ct-wishlist-button-single[data-button-state="active"] { background: #FFFFFF !important; border-color: #FFA825 !important; } body .ct-woo-card-extra .ct-wishlist-button-archive[data-button-state="active"], body .ct-wishlist-button-archive[data-button-state="active"] { background: #FFFFFF !important; border-color: transparent !important; } /* CU-86eypb6jy: "You may also like" suggestion cards vs Figma (Wishlist Empty 445 / Variant4 mobile 340). Scoped to .ct-wishlist-suggested-card so the Filled-state wishlist cards keep their own values. Title 14px/16px, price 12px/20px weight 900 in the cart drawer's heading face (Nominee; the Archivo Black token did not resolve here and fell back to a system font), heading 12px at mobile (12px is the WCAG floor). */ #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-name { font-size: 14px; line-height: 16px; } #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-price, #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-price .woocommerce-Price-amount { font-family: "Nominee", var(--theme-font-family, sans-serif); font-size: 12px; line-height: 20px; font-weight: 900; } @media (max-width: 689.98px) { #woo-wishlist-panel .ct-wishlist-suggested .ct-module-title { font-size: 12px; } } /* CU-86eypb6jy: suggestion card geometry vs Figma PRODUCT CARD instances 34457:267314 (Empty 445: card 192.5x370.5) and 35191:90760 (Variant4 340: card 150x338, grid container 308 wide = 16px side padding, 12px gap). Figma info frame: 8px padding, 12px gaps, one-line title (16) and subheadline (14), pills 22, price block 62 (72 on mobile, taller badge). Price block min-height is 1px under Figma's because our divider is a real 1px row where Figma's line has height 0. Title and subheadline clamp to one line with an ellipsis, as in Figma. Scoped to .ct-wishlist-suggested-card. */ /* minmax(0,1fr): the nowrap title would otherwise stretch a 1fr column. */ #woo-wishlist-panel .ct-wishlist-suggested-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-info { padding: 8px; } #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-subheadline { -webkit-line-clamp: 1; } #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-price { min-height: 61px; } @media (max-width: 690px) { #woo-wishlist-panel .ct-wishlist-suggested { padding-left: 16px; padding-right: 16px; } #woo-wishlist-panel .ct-wishlist-suggested-grid { grid-template-columns: 150px 150px; } #woo-wishlist-panel .ct-wishlist-suggested-card .ct-wishlist-card-price { min-height: 71px; } } /* CU-86eypb6jy Vita QA pass 2 (051168), filled-state cards. The saved-item cards carried the older 16px title and a 14px price while the suggestion cards were already moved to the Figma PRODUCT CARD values, so one drawer showed two type scales. These rules give the saved cards the same values: title 14/16 on one line, one-line subheadline, price in Nominee 900 12/20 (Archivo Black is not in the build font set). */ #woo-wishlist-panel .ct-wishlist-items--cards .ct-wishlist-card-info { padding: 8px; } #woo-wishlist-panel .ct-wishlist-items--cards .ct-wishlist-card-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 16px; } #woo-wishlist-panel .ct-wishlist-items--cards .ct-wishlist-card-subheadline { -webkit-line-clamp: 1; } #woo-wishlist-panel .ct-wishlist-items--cards .ct-wishlist-card-price, #woo-wishlist-panel .ct-wishlist-items--cards .ct-wishlist-card-price .woocommerce-Price-amount { font-family: "Nominee", var(--theme-font-family, sans-serif); font-size: 12px; line-height: 20px; font-weight: 900; } /* Figma Button "REMOVE" (29390:50363): Nominee Heavy Extended 900, 12px, 0.04em tracking, uppercase, #2E2A2A, underlined in coral. Coral is the homepage token #FF6256; the extract has no separate underline colour. */ #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-remove { margin-top: 8px; font-family: "Nominee", var(--theme-font-family, sans-serif); font-weight: 900; font-size: 12px; line-height: 26px; letter-spacing: 0.04em; text-transform: uppercase; color: #2E2A2A; text-decoration: underline; text-decoration-color: #FF6256; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Figma Filled variant shows only the Register button under the saved items, with no guest paragraph (the paragraph belongs to the Empty variant). The shared script renders both together, so the paragraph is hidden here whenever saved items sit above it. */ #woo-wishlist-panel .ct-wishlist-items ~ .ct-wishlist-guest-notice p { display: none; } #woo-wishlist-panel .ct-wishlist-items ~ .ct-wishlist-guest-notice { margin-top: 24px; } /* Figma mobile Empty variant (7078:189457, 340px): "YOUR WISHLIST IS EMPTY" Nominee 14, uppercase, #353638, centred. Desktop keeps the green 18px title case (7078:189399). */ @media (max-width: 689.98px) { #woo-wishlist-panel .ct-wishlist-empty-message { color: #353638; font-size: 14px; line-height: 16px; text-transform: uppercase; } } /* The one-line title no longer wraps, and a plain 1fr track grows to its min-content, which stretched the saved card past Figma's 192px column. */ #woo-wishlist-panel.ct-wishlist-cards .ct-wishlist-items--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Figma Register under saved items: full-width 48px button (29266:48973, 397x48). The flex column parent shrink-wraps it otherwise. */ #woo-wishlist-panel .ct-wishlist-items ~ .ct-wishlist-guest-notice { align-self: stretch; width: 100%; } #woo-wishlist-panel .ct-wishlist-items ~ .ct-wishlist-guest-notice .ct-wishlist-signup-btn { width: 100%; } /* CU-86eypb6jy: card price block to Figma PRODUCT CARD container (29323:47298): price range, then "£0.40/day - 10 kg dog" in Kobe Bold 10/16 #2E2A2A, then the red Subscribe & Save badge (10px bold, white). includes/wishlist-card-twin.php emits these three spans inside .ct-wishlist-card-price. The badge stays #CC0000 rather than Figma's #FF0000: white on #FF0000 is 4.0:1 at 10px, #CC0000 clears AA (WCAG 2.2 beats Figma, noted for QA). */ #woo-wishlist-panel .ct-wishlist-card-price-main { display: block; text-transform: uppercase; } #woo-wishlist-panel .ct-wishlist-card-perday { display: block; font-family: "Kobe1.1", var(--theme-font-family, sans-serif); font-weight: 700; font-size: 10px; line-height: 16px; color: #2E2A2A; text-transform: none; } #woo-wishlist-panel .ct-wishlist-card-price .ct-wishlist-card-badge { margin-top: 4px; }