/* =========================================================================== * PDP redesign — desktop * * Design: Figma `PDP` 33110:107212 (inside `Product page` 33110:105527), 1512 * wide. Loaded on is_product() only, by inc/pdp-redesign.php, after * blutcher-webfonts.css. * * SCOPE: the audit's "reuse" and "restyle / rewire" items. Parts the design adds * from nothing — vet endorsement line, benefit bullets, the five new sections, * wishlist — are not here, nor is anything blocked on a licence or client * content. * * ── Two environment facts that shape every rule below ────────────────────── * * 1. NOTHING is scoped on a body class, and that is not an oversight. The theme * never calls body_class(): header.php is a bare ``, and the classes * present at runtime (`pt-12 md:pt-20 bg-gray-900`) are Tailwind utilities * added by the bundled JS. So `single-product`, `woocommerce`, `postid-*` and * every other WordPress body class is absent site-wide. Page scoping is the * conditional enqueue plus ancestors that only exist on a PDP * (.chuni-beef-banner, .summary); tokens sit on :root for the same reason. * * (The checkout stylesheet CAN use body.woocommerce-checkout — Fluid Checkout * renders its own page template, which does call body_class().) * * 2. The theme loads DUPLICATE copies of its CSS from the footer, through the * calculator.php include. An enqueued stylesheet is therefore document-order * EARLIER than those copies and loses every specificity tie. Where a theme * rule competes for a property, `!important` on that property is the fix, not * a longer selector. Every flag below names what it is beating. * ========================================================================= */ /* --------------------------------------------------------------------------- * Tokens, named after the Figma variables * ------------------------------------------------------------------------- */ :root { /* Color/Color 1-8 + 11 */ --pdp-c1: #a4866c; --pdp-c2: #8a6e57; --pdp-c3: #c9a98a; /* Gold Light/100 — buttons, headings, active states */ --pdp-c4: #f5f2ee; /* body text */ --pdp-c5: #d1d0cf; /* secondary text */ --pdp-c6: #49423f; /* dividers, inactive borders */ --pdp-c7: #1f1f1f; /* page */ --pdp-c8: #322b27; /* raised panels */ --pdp-c11: #ffffff; /* The DISABLED tone from `Button` 33034:255272 row 4 — both of that row's * disabled cells use it, as a fill on the filled variant and as border + * label on the outline one. Sampled from the set's export rather than read * from the node (the connector was unauthenticated), and trustworthy because * the same sampling returns row 1's `#c9a98a`/`#49423f` exactly as item 337 * read them from the node itself. 7.3:1 on the card ground. */ --pdp-c12: #c4b9b0; /* * The postcode checker's error state (QA 2026-09-10). Not in the Figma token * set - the frames draw no error state for this field - so both values are read * off Mitz's mock: a pale pink ground with a saturated red message. One token * each, used by the PDP panel and the category gate alike. */ --pdp-error-bg: #fbeceb; --pdp-error-fg: #e3261c; /* Divider grey, sampled off the export at the PRODUCT DETAILS rule. Warmer * and lighter than c6, which is what the dividers had been using. */ --pdp-rule: #5f5347; /* * The "why feed raw" band's own ground. Sampled down the export's left gutter: * the page runs #1f1f1f until y=2662 — exactly where Figma's `Section` node for * this block starts — and #292929 from there to the end of the photo band. * * A NEUTRAL grey, not a warm one: r=g=b. Every other raised surface on this page * is warm (c8 #322b27), so reaching for c8 here would have been wrong in a way * that is hard to see and easy to assume. */ --pdp-band: #292929; /* Success tokens, for the Best Value pill and the stock dot */ --pdp-ok-50: #f0fdf4; --pdp-ok-200: #bbf7d0; --pdp-ok-400: #4ade80; --pdp-ok-900: #14532d; --pdp-ok-950: #052e16; /* * Fonts. * * ⚠ InterLocal, not Inter. The inherited twentytwentyfour theme.json * registers a broken `Inter` face on every page (404, FontFace.status = * error) whose 300-900 weight range swallows ours. See * assets/css/blutcher-webfonts.css. * * ⚠ NorthwestTextured is a SEPARATE FAMILY from NorthwestRegular, not a style * of it. No font-weight or font-style reaches it — the design's H2/Textured * title has to name the family. */ --pdp-font-body: "InterLocal", "Inter", "HelveticaNeue", Helvetica, Arial, sans-serif; --pdp-font-heading: "NorthwestRegular", Georgia, serif; --pdp-font-textured: "NorthwestTextured", "NorthwestRegular", Georgia, serif; /* * The design's `Fonts/Decoration`, permitted by RULE 6 from 2026-08-28. Declared * in blutcher-webfonts.css — see the note there on why it is not called * "Special Elite". `Specialelite` next in the stack is the campaign pages' own * declaration of the same file, used when that stylesheet is present. */ --pdp-font-decoration: "SpecialEliteLocal", "Specialelite", "Courier New", Courier, monospace; /* Type scale (Size/*, Line Height/*) */ --pdp-h2: 48px; --pdp-h2-lh: 48px; --pdp-h6: 20px; --pdp-h6-lh: 24px; --pdp-para: 18px; --pdp-para-big: 20px; /* Size/Paragraph big */ --pdp-body: 16px; --pdp-links: 14px; --pdp-lh-6: 24px; --pdp-lh-links: 26px; /* Layout: Display/Screen Width 1512 − 2 × Layout/Horizontal-Padding 64 = 1384 */ --pdp-gutter: 64px; --pdp-content: 1384px; --pdp-col: 668px; --pdp-col-gap: 48px; } /* --------------------------------------------------------------------------- * RESTYLE — page geometry * * Was a full-bleed hero of 907 + 605 over body copy in a separate 1140 Bootstrap * container: two widths on one page. Now one grid — 1384 centred in a 64px * gutter, two 668 columns, 48 gap. * * Bootstrap stays where it is. It is CDN 4.3.1 and unpicking it means touching * ~4,400 template lines; this overrides the containers it produces. * ------------------------------------------------------------------------- */ .chuni-beef-banner { padding-left: var(--pdp-gutter); padding-right: var(--pdp-gutter); background-color: var(--pdp-c7); } .chuni-beef-banner .chunny-butlee-under { display: grid; /* * ⚠ FLUID TRACKS, NOT `var(--pdp-col) var(--pdp-col)` — QA 2026-09-11 (ClickUp * 86eyvw3ec). Two fixed 668 columns and a 48 gap are 1384 whatever the * window is; at 1400 the grid box was 1272 wide and the right column ran to * x1448, 48px past the viewport — "$22.7" and "$21.0" were the per-kg * prices with their last digit off-screen. `max-width: var(--pdp-content)` * below already caps the grid at the design's 1384, so at 1512 and above * each track is still exactly 668; below that they share what the gutters * leave. `minmax(0, …)` so a wide child cannot push a track past its share. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pdp-col-gap); align-items: start; box-sizing: border-box; width: 100%; max-width: var(--pdp-content); margin: 0 auto; } /* The columns were sized by width declarations on the old flex children. */ .chuni-beef-banner .chunii-left-image, .chuni-beef-banner .chunii-right-image { width: auto; max-width: none; min-width: 0; padding: 0; float: none; } /* * The gallery column is pinned while the panel scrolls — QA 2026-09-11 (ClickUp * 86eyvw3mh). The grid is `align-items: start`, so the 668-tall gallery sat at * the top of a 2800px row and the left half of the page was empty from the first * scroll. `sticky` inside the grid item's own track releases at the row's end on * its own; no ancestor between here and clips overflow (measured). Top * clears the fixed header — alert bar 52 + `#myHeader` 82 = 133 — with 16 to * spare. Desktop only: below 1000 the grid is one column and the gallery leads. * * ⚠ THE BODY MUST NOT BE A SCROLL CONTAINER, or `sticky` sticks to nothing. The * theme's `html, body { overflow-x: hidden }` (assets/css/style.css:82) puts * the clip on BOTH elements. On `html` it propagates to the viewport, which is * what clips horizontal overflow. On `body` it cannot propagate — `html` has * already taken a non-visible overflow — so it applies to the body itself, * which makes the body the gallery's nearest scrolling ancestor. The body's * content fits the body, so it never scrolls, and the gallery, measured, * scrolled off with the page with `position: sticky` computed all the while. * `visible` on the body hands the clip back to the viewport alone; the page * still cannot scroll sideways because `html` still says so. Scoped to the PDP * body and to the widths that stick. * * ⚠ NOT `body.single-product`. This theme's never calls body_class() — * it carries `pt-12 md:pt-20 bg-gray-900` and nothing else — so the * WooCommerce class is not there to match; it lands on the page's own * `section.chuni-beef-banner.single-product` instead. The first cut of this * rule was written against the body class, matched nothing, and the gallery * went on scrolling away with `position: sticky` computed. `html body` beats * the theme's `html, body` on specificity; `:has()` keeps it to the PDP, * because this stylesheet also loads on the category page for the cards. */ @media (min-width: 1000px) { html body:has(.chuni-beef-banner.single-product) { overflow-x: visible; } .chuni-beef-banner .chunii-left-image { position: sticky; top: 149px; } } /* * Inside the right column the theme nests .working-dog-butler > .container > * .row > .col-md-12 — three Bootstrap wrappers, each with its own padding and * max-width, before any panel content. Flattened to the column width. */ .chunii-right-image .working-dog-butler, .chunii-right-image .working-dog-butler .container, .chunii-right-image .working-dog-butler .row, .chunii-right-image .working-dog-butler [class*="col-"] { width: 100%; max-width: 100%; margin: 0; padding: 0; flex: none; } /* --------------------------------------------------------------------------- * RESTYLE — breadcrumb * * Was in the DOM and `display: none`. Now above the gallery at the gutter, with * the design's fourth level ("Shop") added in PHP. * * Four `nav.woocommerce-breadcrumb { display: none }` rules exist across the * theme's stylesheets, all unflagged, so specificity alone wins here. * ------------------------------------------------------------------------- */ .chuni-beef-banner > nav.woocommerce-breadcrumb { display: block; box-sizing: border-box; width: 100%; max-width: var(--pdp-content); margin: 0 auto; padding: 24px 0; color: var(--pdp-c5); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 400; line-height: 20px; } .chuni-beef-banner > nav.woocommerce-breadcrumb a { color: var(--pdp-c5); text-decoration: none; } .chuni-beef-banner > nav.woocommerce-breadcrumb a:hover, .chuni-beef-banner > nav.woocommerce-breadcrumb a:focus-visible { color: var(--pdp-c3); text-decoration: underline; } /* --------------------------------------------------------------------------- * REWIRE — gallery * * The theme hid WooCommerce's gallery outright: * .woocommerce-product-gallery--with-images { display: none } * and showed ACF decorative images in its place. The templates now render the * real gallery in the left column; this makes it visible and squares it. * ------------------------------------------------------------------------- */ .chunii-left-image .woocommerce-product-gallery, .chunii-left-image .woocommerce-product-gallery--with-images, .chunii-left-image .woocommerce-product-gallery.woocommerce-product-gallery--with-images { /* * !important for DOCUMENT ORDER, not specificity. The hiding rule is * .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4 * at (0,3,0) — a tie with the longest selector here — and it appears in THREE * stylesheets that all load after this file. Confirmed with * CSS.getMatchedStylesForNode. */ display: block !important; /* The column's width, now that the column is fluid (86eyvw3ec). */ width: 100%; max-width: 100%; margin: 0; float: none; /* * !important, and the reason is worth spelling out — it cost a released * regression. * * WooCommerce ships `.woocommerce div.product div.images.woocommerce-product-gallery * { opacity: 0 }` and clears it from its own gallery script once flexslider has * initialised. On this site that script never gets that far, because the theme * hid the gallery outright and WooCommerce's single-product gallery JS has * nothing to initialise. So the base rule stands and the container stays fully * transparent. * * `display` above already carried `!important` for the same document-order * reason; `opacity` did not, and the gallery therefore occupied the correct * 668×668 with the correct image loaded inside it and painted NOTHING. Every * check of it measured geometry — rect, position, dot indicator — and geometry * was right the whole time. Measure paint, not just layout. */ opacity: 1 !important; } .chunii-left-image .woocommerce-product-gallery__wrapper { margin: 0; width: 100%; } .chunii-left-image .woocommerce-product-gallery__image, .chunii-left-image .woocommerce-product-gallery__image a { display: block; width: 100%; } /* * Square crop. object-fit rather than a fixed height, so the image is cropped * instead of distorted — the design's gallery is 1:1 and the source media is * 16:9, so something has to give either way. aspect-ratio keeps this correct if * the column ever narrows. */ .chunii-left-image .woocommerce-product-gallery__image img, .chunii-left-image .woocommerce-product-gallery img.wp-post-image { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 0; } /* * WooCommerce's zoom appends a second, full-size `img.zoomImg` inside the * slide and positions it by hand (inline width/height/left/top). The square- * crop rule above must not touch it: a 1:1 crop of the magnified image would * cut it, and object-fit would re-fit what zoom has already sized. */ .chunii-left-image .woocommerce-product-gallery__image img.zoomImg { aspect-ratio: auto; object-fit: fill; max-width: none; /* * The product PNGs are transparent box renders. Without a ground the * original image shows through the zoomed copy's empty area — measured on * the Carnivore Box as a second, smaller box above the magnified one. * WooCommerce's own stylesheet gives .zoomImg a white ground for the same * reason; ours is the page's. */ background-color: var(--pdp-c7); } /* * One slide at a time. * * flexslider never initialises on this theme — the container shipped * display:none, so by the time it is unhidden the slider has already skipped a * zero-size element. Left alone, every image stacks: raw meals rendered 2004px * tall (668 × 3). * * Two rules: the no-JS floor, then the state pdp-gallery.js drives. The active * rule names the container so it out-specifies the first for slides 2+. */ .chunii-left-image .woocommerce-product-gallery__image:not(:first-child) { display: none; } .chunii-left-image .woocommerce-product-gallery .woocommerce-product-gallery__image.bc-pdp-gallery--active { display: block; } .chunii-left-image .woocommerce-product-gallery:has(.bc-pdp-gallery--active) .woocommerce-product-gallery__image:not(.bc-pdp-gallery--active) { display: none; } /* Page indicator, built by the script — nothing renders for a single image. */ .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__dots { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; } .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__dot { /* * The design's dot is 8px. An 8px button fails the 44px touch minimum, so the * hit area is 44 and the mark is drawn at 8 by ::before. */ display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; } .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 9999px; background-color: var(--pdp-c6); transition: background-color 120ms ease, transform 120ms ease; } .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__dot.bc-pdp-gallery--active::before { background-color: var(--pdp-c3); transform: scale(1.25); } .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__dot:focus-visible { outline: 2px solid var(--pdp-c3); outline-offset: -6px; } /* * Zoom button, built by pdp-gallery.js inside the slide on screen. * * The design (tablet and mobile PDP frames; the desktop frame draws none, and * Mitz asked for it on every width, 2026-09-12) is a bare white magnifier — * no disc — about 13px, some 20px in from the image's top and right edges. * Mitz's own artwork, 13×13, drawn 1:1. A 13px control fails the 44px touch * minimum, so the box is 44 and the glyph is centred: box at 5/5 puts the * glyph's centre 27px in, its edges at 20.5. * * The slide is the containing block: jquery.zoom sets it position: relative * and appends the zoomed copy as an absolute sibling, so the button keeps * z-index 2 to stay on top of it. */ .chunii-left-image .woocommerce-product-gallery__image { position: relative; } .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__zoom { position: absolute; top: 5px; right: 5px; z-index: 2; display: block; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 9999px; background: transparent url("../pdp/zoom-icon.png") center / 13px 13px no-repeat; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } /* Pressed: a faint 28px disc behind the glyph says the zoom is on; the 44px hit area stays. */ .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__zoom::before { content: ""; position: absolute; top: 8px; left: 8px; z-index: -1; width: 28px; height: 28px; border-radius: 9999px; background-color: transparent; transition: background-color 120ms ease; } .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__zoom[aria-pressed="true"]::before { background-color: rgba(31, 31, 31, 0.55); } /* style.css kills button:focus outlines site-wide with !important (audit A1). */ .chunii-left-image .woocommerce-product-gallery .bc-pdp-gallery__zoom:focus-visible { outline: 2px solid var(--pdp-c3) !important; outline-offset: 2px; } .chunii-left-image .woocommerce-product-gallery.bc-pdp-gallery--zooming .woocommerce-product-gallery__image { cursor: zoom-in; } /* --------------------------------------------------------------------------- * RETIRE — things the design has no equivalent for * ------------------------------------------------------------------------- */ /* The decorative ACF media the gallery replaces. Hidden, not deleted. */ .bc-pdp-legacy-media { display: none; } /* * The floating Food calculator button — pinned over the page on raw meals and * gifts only. The design puts this entry point in the panel, which now carries * it on all four categories. */ .chuni-beef-banner .float-box { display: none; } /* * The Yotpo widget that escapes into the hero. * * Every product renders a `.yotpo-reviews-main-widget` as a DIRECT CHILD of * section.chuni-beef-banner. On three categories it measures 0×0 and nobody * noticed; on combo it fills out at 1384×1477, inflating that hero to 3106px and * rendering the product's reviews TWICE — once in the hero, once in the * below-hero card. * * Direct-child selector on purpose: it hits only the escaped instance, leaving * the star rating inside form.cart and the real widget in the card alone. */ .chuni-beef-banner > .yotpo-widget-instance { display: none; } /* --------------------------------------------------------------------------- * REWIRE — product title * * The page had NO usable h1: `h1.product_title` was `display: none !important` * and the visible title was a `p.babtitle` at NorthwestRegular 30px. So the * product name — the one thing that should be the page heading — was a * paragraph, and assistive tech got an empty outline. * * !important is required on display: the rule hiding it has one, and the theme * flips the same element between none and inline-block in four further rules. * ------------------------------------------------------------------------- */ .chuni-beef-banner .summary h1.product_title, .chuni-beef-banner .working-dog-butler .summary.entry-summary h1.product_title.entry-title { display: block !important; margin: 0 0 12px; padding: 0; color: var(--pdp-c3); font-family: var(--pdp-font-textured); font-size: var(--pdp-h2); font-weight: 400; line-height: var(--pdp-h2-lh); letter-spacing: 0; text-transform: none; } /* * The paragraph that stood in for the title. Hidden rather than removed from the * template: it is printed by the subscription-options template, and hiding it * here leaves that file to the purchase-options work. */ .chuni-beef-banner .summary p.babtitle { display: none; } /* --------------------------------------------------------------------------- * Body type * * `body` computes to `font-family: Inter, sans-serif` — the broken family — so * every piece of panel copy was rendering in the platform sans regardless of the * design. Pointing the panel at InterLocal is what makes any typography * comparison below this point meaningful. * ------------------------------------------------------------------------- */ .chuni-beef-banner, .chuni-beef-banner p, .chuni-beef-banner span, .chuni-beef-banner label, .chuni-beef-banner li, .chuni-beef-banner a, .chuni-beef-banner button, .chuni-beef-banner input { font-family: var(--pdp-font-body); } /* * Northwest for group headings, per the design. * * These were set in Cardo, which 404s — one of the inherited twentytwentyfour * families — so they rendered in a serif fallback that appears nowhere in the * design. */ .chuni-beef-banner h2, .chuni-beef-banner h3, .chuni-beef-banner h4, .chuni-beef-banner h5, .chuni-beef-banner h6, .chuni-beef-banner .acc-head p { font-family: var(--pdp-font-heading); font-size: var(--pdp-h6); font-weight: 400; line-height: var(--pdp-h6-lh); color: var(--pdp-c3); text-transform: uppercase; } /* --------------------------------------------------------------------------- * RESTYLE — "In stock" * * The line already existed in the panel and was display:none, so the data was * present and unseen. !important because the rule hiding it arrives from the * duplicate footer stylesheets this file cannot outrank on order. * ------------------------------------------------------------------------- */ .chuni-beef-banner .summary p.stock.bc-pdp-stock { display: flex !important; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; color: #4ADE80; font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 600; line-height: 20px; text-transform: none; } /* --------------------------------------------------------------------------- * REUSE — Food Calculator entry point * ------------------------------------------------------------------------- */ .chuni-beef-banner .summary .bc-pdp-calc { margin: 16px 0 0; color: var(--pdp-c5); font-family: var(--pdp-font-body); font-size: var(--pdp-links); line-height: var(--pdp-lh-links); } .chuni-beef-banner .summary .bc-pdp-calc__link { /* * A button, not a link: it opens the calculator modal rather than navigating, * so an would misdescribe it to a screen reader. Styled as a link * because that is what the design draws. */ display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--pdp-c3); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 600; line-height: var(--pdp-lh-links); text-align: left; text-decoration: underline; text-transform: none; cursor: pointer; } .chuni-beef-banner .summary .bc-pdp-calc__link:hover, .chuni-beef-banner .summary .bc-pdp-calc__link:focus-visible { color: var(--pdp-c4); } /* --------------------------------------------------------------------------- * RESTYLE — action row: stepper + primary button * * The design draws one 668×70 row: stepper 119, primary button 461, wishlist 72. * Wishlist needs a new plugin and is out of scope, so this is two columns and the * button takes that space. When wishlist lands, the template becomes * `119px 1fr 72px` and nothing else moves. * * WHY A GRID: form.cart has ~16 children, mostly display:none scripts and * styles, and the stepper and button are NOT adjacent — a Yotpo rating widget * sits between them. So the form becomes a grid where every child spans full * width and only those two are placed in columns. * * ⚠ The theme already assigns flex `order` to these children — quantity 1, * wcsatt-options-wrapper 2, button 3 — which is why an earlier attempt put the * two in the right columns but different ROWS: the full-width options block sat * between them. Grid honours `order`, so the whole sequence is stated below. * ------------------------------------------------------------------------- */ /* * ⚠ THE THIRD COLUMN IS THE WISHLIST BOX, and this rule has said so since the * grid was written — "`119px 1fr 72px` and nothing else moves". It carried two * columns because the control was parked (item 17, Mitz 2026-08-28). Unparked * 2026-09-09; the 72px column is all that was missing, and the CTA drops from * 541 to the design's 461 on its own: 668 - 119 - 8 - 72 - 8 = 461. */ .chuni-beef-banner .summary form.cart { display: grid; grid-template-columns: 119px 1fr 72px; column-gap: 8px; row-gap: 16px; align-items: center; width: 100%; } .chuni-beef-banner .summary form.cart > * { grid-column: 1 / -1; min-width: 0; } .chuni-beef-banner .summary form.cart > .yotpo-widget-instance { order: -2; } .chuni-beef-banner .summary form.cart > .single-pro-acc { order: -1; } .chuni-beef-banner .summary form.cart > .wcsatt-options-wrapper { order: 1; } .chuni-beef-banner .summary form.cart > .quantity { order: 4; /* was 2; the postcode gate now takes 2 and 3 */ grid-column: 1; } .chuni-beef-banner .summary form.cart > button.single_add_to_cart_button { order: 5; grid-column: 2; } .chuni-beef-banner .summary form.cart > .bc-pdp-trust { order: 6; } /* Stepper shell */ .chuni-beef-banner .summary form.cart .quantity { display: flex !important; align-items: center; box-sizing: border-box; width: 119px; height: 70px; padding: 0; border: 1px solid var(--pdp-c6); border-radius: 9999px; background-color: transparent; overflow: hidden; } /* * ⚠ The three controls are wrapped in `span.quantity-box`, and THAT is what * carries display:none — not the inputs. Styling `.quantity input` directly * gave them a computed width of 34px and visibility:visible while * getBoundingClientRect stayed 0×0, because computed styles resolve normally * inside a display:none subtree. The stepper rendered as an empty pill. A zero * rect inside a non-zero parent is the tell. */ .chuni-beef-banner .summary form.cart .quantity .quantity-box { display: flex !important; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; min-height: 68px; } .chuni-beef-banner .summary form.cart .quantity input.qty_button { flex: 0 0 34px; width: 34px; /* * Explicit height. `height: 100%` resolved to 20px — a percentage height * against a flex container is not the definite parent height it looks like — * and align-self: stretch then only reached 40px, because stretch applies only * when the cross size is auto and the theme gives these inputs a definite * height. 68 = the 70px pill less its borders, which also clears the 44px * touch minimum. */ height: 68px !important; padding: 0; border: 0; background: transparent; color: var(--pdp-c3); font-family: var(--pdp-font-body); font-size: var(--pdp-para); line-height: 1; cursor: pointer; } /* * Hover — Mitz, 2026-09-12: "update hover background color to #fff of wishlist * + and - button and the number qty". Then: "when hovered only the background * color updated, the color stays the same" — so the ground goes white and the * glyph and number keep their resting tan. All three cells of the pill, so the * pointer lights whichever part it is over. ⚠ Tan on white measures ~2.2:1; * applied as instructed, the same ruling as the Check button's white hover. */ .chuni-beef-banner .summary form.cart .quantity input.qty_button:hover, .chuni-beef-banner .summary form.cart .quantity input.qty:hover { background-color: var(--pdp-c11); } .chuni-beef-banner .summary form.cart .quantity input.qty { display: block !important; flex: 1 1 auto; width: auto !important; min-width: 0; height: 68px !important; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--pdp-c3); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 500; text-align: center; -moz-appearance: textfield; } /* * Primary button. * * The design's pairing is #1f1f1f on #c9a98a. Adopting it is an accessibility * fix, not a preference: the build's white on #a4866c measures 3.38:1 and fails * WCAG AA, while the design's measures 7.6:1. * * The competing rule is `.working-dog-butler form.cart button.single_add_to_cart_button` * at (0,3,2) — it outranked a shorter selector, which is why an earlier attempt * saw min-height apply (the theme sets none) while width, background, colour, * radius and font-size all lost. Hence the matching selector AND !important on * exactly those properties, and nothing else. */ .chuni-beef-banner .working-dog-butler form.cart button.single_add_to_cart_button, .chuni-beef-banner .working-dog-butler form.cart .single_add_to_cart_button.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100% !important; max-width: none !important; min-height: 70px; padding: 12px 24px; background-color: var(--pdp-c3) !important; border: 1px solid var(--pdp-c3); /* * ⚠ SQUARE. This was 9999px, and it is the rule that kept winning: at (0,5,1) * it outranks anything written against `.summary`, so a later override with * !important still lost. The radius has to be corrected HERE. * * The design system does define `Atom Component/Buttons/Radius: 9999`, which * is where the pill almost certainly came from — but that token is what the * FREQUENCY PILLS use. Rendering `Frame 1261154912` shows all three controls * in this row with square corners, and the export settles it: the tan block is * a clean 461px run on every row from y=916 to y=984, which a pill cannot do. */ border-radius: 0 !important; color: var(--pdp-c7) !important; font-family: var(--pdp-font-body); font-size: var(--pdp-para) !important; font-weight: 600; line-height: 1; text-align: center; text-transform: none; cursor: pointer; } /* * ⚠ WAS c2 WITH WHITE TEXT, which measures 4.37:1 — under AA for 18px semibold. * 18px at weight 600 is NOT "large text" by WCAG (that needs 18.66px bold), so * 4.5 is the threshold it has to clear, and it did not. * * c1 keeping the resting dark text measures 5.24:1 and reads as the same button * pressed rather than a different colour. See the hover system note below. * * ⚠ SUPERSEDED 2026-09-12 — Mitz: "the Add to cart button hover background color * and text color is not correct." Two hover intents had been written for this * one button: this rule (c1, dark label, (0,5,2)) and the general tan-control * block further down (`.on-pincode-required:hover` — c6 with white, (0,4,0), * the same hover the sticky bar and the "Check & Add to Cart" trigger wear). * This one won on specificity for background and colour while the general * block's flagged border-color won for the border — so the button hovered to * a c1 fill inside a c6 outline with a dark label, a state no rule describes. * Measured: bg rgb(164,134,108), border rgb(73,66,63), color rgb(31,31,31). * Aligned to the general block: c6 fill, c6 line, white label (8.6:1). */ .chuni-beef-banner .working-dog-butler form.cart button.single_add_to_cart_button:hover, .chuni-beef-banner .working-dog-butler form.cart button.single_add_to_cart_button:focus-visible { background-color: var(--pdp-c6) !important; border-color: var(--pdp-c6) !important; color: var(--pdp-c11) !important; } /* --------------------------------------------------------------------------- * REUSE — trust rows and payment marks * * Two of the design's three rows. The third — "FREE on eligible orders over * $150" — is not printed: no free-shipping method on this store has an * order-value threshold, they all require a coupon, so the claim would be false. * See the note in inc/pdp-redesign.php. * ------------------------------------------------------------------------- */ /* * ⚠ NO RULE HERE. The design draws the shipping row and the delivery-problem row * as two filled boxes with a plain gap between them — no hairline. This had a * `border-top`, which put a full-width line between them. */ .chuni-beef-banner .summary .bc-pdp-trust { margin: 0; } .chuni-beef-banner .summary .bc-pdp-trust__row { margin: 0 0 8px; color: var(--pdp-c5); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 400; line-height: var(--pdp-lh-links); } .chuni-beef-banner .summary .bc-pdp-trust__row a { color: inherit; text-decoration: underline; } .chuni-beef-banner .summary .bc-pdp-trust__marks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } .chuni-beef-banner .summary .bc-pdp-trust__marks img { display: block; width: 35px; height: 24px; max-width: none; margin: 0; } /* --------------------------------------------------------------------------- * REWIRE — purchase options * * Markup comes from woocommerce/single-product/product-subscription-options.php, * rebuilt so the convert_to_sub radios ARE the control. Read the note at the top * of that file for why there used to be two groups and what happened to the * other one. * * Selected state is pure CSS: :has() on the container for the rows, an * adjacent-sibling match for each pill. No JavaScript, so nothing to re-run on an * AJAX price refresh. * * ⚠ :has() needs Chrome 105+, Safari 15.4+, Firefox 121+. Where it is missing the * rows show no selected outline and the pills stay visible — degraded, still * fully usable, nothing hidden or unreachable. * ------------------------------------------------------------------------- */ .chuni-beef-banner .summary .bc-pdp-options { display: block !important; /* the template wrapper ships an inline display:none */ width: 100%; margin: 0; } /* * ⚠ THE NOTE THAT STOOD HERE WAS WRONG, and Mitz's 2026-09-02 change corrects it. * * It claimed "PURCHASE OPTION" is "a small tan uppercase label, the same Gold * Light/100 as the section headings". Re-read off `PDP-with-sticky.png` at 2×: * the label is WHITE, in the condensed textured face — the tan treatment belongs * to "PRODUCT DETAILS" and the section headings, not to this one. * * So c4 and `--pdp-font-textured` are the design, and the tan this had was the * assumption the old note accused its predecessor of. */ .chuni-beef-banner .summary .bc-pdp-options__legend { margin: 0 0 12px; color: var(--pdp-c4); font-family: var(--pdp-font-textured); font-size: var(--pdp-links); font-weight: 400; letter-spacing: 0.6px; line-height: 26px; text-transform: uppercase; } .chuni-beef-banner .summary .bc-pdp-options__rows { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; } .chuni-beef-banner .summary .bc-pdp-option { /* * !important on display. The rows live inside ul.wcsatt-options-product — * kept so existing selectors still find the radios — and the theme hides any * li in that list which is not .one-time-option or .subscription-option. The * Subscribe row carries neither, so it rendered at 0x0 with a perfectly * healthy computed display:flex on its label. */ display: block !important; margin: 0; padding: 0; list-style: none; } /* * Inputs stay in the DOM and focusable. NOT display:none — that would take them * out of the tab order and off the accessibility tree, which for the only price * control on the page is not acceptable. Clipped instead. */ .chuni-beef-banner .summary .bc-pdp-option__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* * ⚠ `position: relative` IS LOAD-BEARING and was missing, despite a comment further * down this file asserting it was here. * * The radio ring is an absolutely positioned ::before at `top: 50%`, so it * resolves against the nearest POSITIONED ancestor. Without this, only the * One Time row looked right — and only by accident, because the plugin's own * `.one-time-option` class happens to be positioned, so that ring resolved * against its 70px row and landed at 35. * * The Subscribe row carries no plugin class, so its ring resolved against * `.bc-pdp-options` instead — 249 tall — putting it at top: 124px. On screen * that is a stray ring sitting at the BOTTOM of the One Time box, with the * Subscribe row showing no radio at all. Two symptoms, one cause, and neither * looked like a positioning bug. */ .chuni-beef-banner .summary .bc-pdp-option__label { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; box-sizing: border-box; width: 100%; margin: 0; padding: 16px 20px; /* * ⚠ c8 AND SQUARE, both sampled from the export rather than chosen. * Scanning across seven x positions on each border line: * * y=452/453 One Time box, top #322B27 * y=524 One Time box, bottom #322B27 * y=534/535 Subscribe box, top #322B27 * y=598 divider to the pills #49423F * y=706 frequency box, bottom #322B27 * x=778/779 left edge, all three #322B27 * * And the corners are sharp: the frequency box's bottom-left in the export is * a 90° angle, as are the postcode input, the Check button, the quantity * stepper and the wishlist button beside it. The 8px this carried was ours. */ border: 1px solid var(--pdp-c8); border-radius: 0; background-color: transparent; color: var(--pdp-c4); cursor: pointer; } /* Focus has to be visible on the label, since the input itself is clipped. */ .chuni-beef-banner .summary .bc-pdp-option__radio:focus-visible + .bc-pdp-option__label { outline: 2px solid var(--pdp-c3); outline-offset: 2px; } .chuni-beef-banner .summary .bc-pdp-option__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .chuni-beef-banner .summary .bc-pdp-option__title { display: flex; align-items: center; gap: 8px; color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 600; line-height: var(--pdp-lh-6); } .chuni-beef-banner .summary .bc-pdp-option__badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; background-color: var(--pdp-ok-200); color: var(--pdp-ok-950); /* 12.6:1 on that fill */ font-size: 12px; font-weight: 600; line-height: 18px; text-transform: none; white-space: nowrap; } .chuni-beef-banner .summary .bc-pdp-option__note { color: var(--pdp-c5); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 400; line-height: 20px; } .chuni-beef-banner .summary .bc-pdp-option__figures { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; } /* * ⚠ `--pdp-body`, not `--pdp-para` — 16px, not 18. The design's price nodes are * `Size/Body` on a 24px line (One Time `;33265:105272`, Subscribe * `;33265:105305`), both Inter Semi Bold. The 18 made the price the largest * thing in the row where the design has it one step BELOW the 16px label's * 26px line. Found while auditing the panel and left alone as out of scope; * Mitz, 2026-09-09: "For price always follow the design." */ .chuni-beef-banner .summary .bc-pdp-option__price { color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 600; line-height: 24px; white-space: nowrap; } /* * The per-kg line. Read off the design's own text nodes 2026-09-09 — * `Subscribe` 33265:105331, price column `Frame 1261154963`: * * One Time ;33265:105273 12px / 14px / Inter Medium / right / #49423f * Subscribe ;33265:105306 12px / 14px / Inter Medium / right / #a4866c * * ⚠ THE DESIGN USES TWO DIFFERENT COLOURS, and this had been built as one. * The Subscribe row's per-kg is the brand tan — the design accents the * better-value row and recesses the other. Item 20 recorded only the One * Time colour, so the tan was never noticed. * * ⚠ `font-weight: 500`, not 400. The design is Inter **Medium** on both rows; * this was Regular. * * ⚠ THE TWO COLOURS ARE THE TWO STATES, NOT THE TWO ROWS — Mitz, 2026-09-09: * "when Purchase Option not selected One Time Purchase or Subscribe & Save * and its Price the color should be #F5F2EE and kg color is #49423F, when * selected their color turns #C9A98A." * * That is why the frame reads the way it does: it mocks Subscribe SELECTED * (item 340), so `#49423f` was the UNSELECTED per-kg and the tan was the * SELECTED one. An earlier pass on 2026-09-09 read them as a per-row * distinction and set the Subscribe row's unit tan unconditionally. Same two * values, wrong axis — it would have shown a tan per-kg on a row nobody had * chosen. The state rules live further down this file. * * ⚠ `#49423f` UNSELECTED IS ~1.5:1 ON THIS ROW, and it is applied on * instruction after being raised. It is the M8 defect (item 20) and I raised * it again; this is the reply, and it is a defensible one — the unselected * per-kg is deliberately recessive and the figure a shopper is acting on is * on the row they have chosen, in tan. Recorded so nobody "fixes" it back. */ .chuni-beef-banner .summary .bc-pdp-option__unit { color: var(--pdp-c6); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 500; line-height: 20px; white-space: nowrap; } /* Selected: the one-time row when value 0 is checked. */ /* * ⚠ NO FILL. Sampling the export inside both boxes gives #1f1f1f either way. The * c8 fill that used to be here lifted the row to a visibly warmer brown, which * is part of what read as the panel's background being wrong. That still holds. * * ⚠ BUT THE REST OF THAT NOTE WAS WRONG: it said "the selected row is signalled by * its BORDER going tan". It is not. In the export the SELECTED Subscribe box and * the unselected One Time box carry the identical #322B27 border — checked at * seven x positions on each. Selection is signalled by the radio filling and the * label and price going tan, and by nothing else. * * So the rule that lived here, turning the chosen row's border tan, is gone. */ /* * Selected: the Subscribe row whenever ANY scheme is checked. That is the whole * reason the row is a label rather than a control — it represents the group, not * one value. * * ⚠ Its border does NOT change with selection — see the note above. The `:has()` * test still drives the row's tan label and price, and the frequency box below * it; only the border-colour change has gone. */ /* Frequency pills — hidden until a subscription is chosen, as the design shows. */ .chuni-beef-banner .summary .bc-pdp-freq { display: none; margin: 0 0 24px; } .chuni-beef-banner .summary .bc-pdp-options:has(.bc-pdp-freq__pill .bc-pdp-option__radio:checked) .bc-pdp-freq { display: block; } .chuni-beef-banner .summary .bc-pdp-freq__legend { margin: 0 0 12px; color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 600; line-height: var(--pdp-lh-6); } .chuni-beef-banner .summary .bc-pdp-freq__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; } .chuni-beef-banner .summary .bc-pdp-freq__pill { display: block !important; /* same theme rule as the rows above */ margin: 0; padding: 0; list-style: none; } .chuni-beef-banner .summary .bc-pdp-freq__pill-label { display: inline-flex; align-items: center; justify-content: center; /* * 30, measured: the export's freq area runs y=598 to y=706 and budgets 108 for * a legend (24), one row of pills and the reassurance line (20). The 44 here was * a touch target picked before that area had been measured, and it made the * pills read as chunky buttons rather than the design's quiet chips. * * Widths follow: "Every 2 weeks" is 124 in the export, which is what 15px Inter * plus this padding produces. */ min-height: 30px; margin: 0; padding: 4px 14px; /* (!) --pdp-rule, sampled: an unselected pill's border in the export is #5F5347 * at y=664, checked on two pills - one step lighter than the c6 this carried. * The pill keeps its 9999px radius: that IS the design, and the square corners * elsewhere in this block do not apply here. */ border: 1px solid var(--pdp-rule); border-radius: 9999px; color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap; cursor: pointer; } .chuni-beef-banner .summary .bc-pdp-freq__pill .bc-pdp-option__radio:checked + .bc-pdp-freq__pill-label { border-color: var(--pdp-c3); background-color: var(--pdp-c3); color: var(--pdp-c7); font-weight: 600; } .chuni-beef-banner .summary .bc-pdp-freq__pill .bc-pdp-option__radio:focus-visible + .bc-pdp-freq__pill-label { outline: 2px solid var(--pdp-c3); outline-offset: 2px; } .chuni-beef-banner .summary .bc-pdp-freq__note { position: relative; margin: 0; padding-left: 20px; color: var(--pdp-c5); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 400; line-height: 20px; } /* * Mitz's artwork, 2026-09-09 — a 12×12 clock to the left of the reassurance * line. Same construction as the benefit ticks above: an absolute `::before` * rather than a flex child, so a wrap keeps the icon on the FIRST line beside * the opening words instead of floating it against the centre of a two-line * block. `padding-left: 20px` is the file's 12 plus the 8px gap the other two * icon rows use, and `top: 4px` centres 12 on this 20px line. */ .chuni-beef-banner .summary .bc-pdp-freq__note::before { content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; background-image: url("../pdp/clock-icon.png"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; } /* --------------------------------------------------------------------------- * REWIRE — PRODUCT DETAILS accordion in the panel * * The design puts this group inside the 668 panel: a Northwest 20px heading in * the gold, then rows separated by 1px dividers, each a full-width button with * its label at 16px Inter Semi Bold and a chevron on the right. * * The build had the same content as 1100px Bootstrap cards below the hero; those * are retired per product by the inline rule PHP emits, since the fields are * populated unevenly. * * ⚠ Panels start OPEN and are closed by the script adding * .bc-pdp-details--ready. That ordering is the point: if pdp-accordion.js never * loads, every row stays readable instead of being sealed behind a dead * control. * ------------------------------------------------------------------------- */ /* * ⚠ THE RULE IS UNDER THE HEADING, NOT ABOVE IT. The design draws * "PRODUCT DETAILS" and then a hairline directly beneath it, above the first * accordion row. This carried a `border-top`, which drew the line above the * heading instead and left nothing under it. Moved to `__heading` — see the end * of this file. */ .chuni-beef-banner .summary .bc-pdp-details { margin: 24px 0 0; } .chuni-beef-banner .summary .bc-pdp-details__heading { margin: 0 0 8px; color: var(--pdp-c3); font-family: var(--pdp-font-heading); font-size: var(--pdp-h6); font-weight: 400; line-height: var(--pdp-h6-lh); text-transform: uppercase; } .chuni-beef-banner .summary .bc-pdp-details__list { margin: 0; padding: 0; list-style: none; } .chuni-beef-banner .summary .bc-pdp-details__row { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--pdp-c6); } .chuni-beef-banner .summary .bc-pdp-details__row-heading { /* * A heading wrapping the button, so the rows appear in the document outline. * Every visual property is reset here and set on the button instead — the * theme styles h4 globally. */ margin: 0; padding: 0; font: inherit; color: inherit; text-transform: none; } .chuni-beef-banner .summary .bc-pdp-details__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; margin: 0; padding: 16px 6px; /* the design's 6px-padded chevron button */ border: 0; border-radius: 0; background: transparent; color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 600; line-height: var(--pdp-lh-6); text-align: left; text-transform: none; cursor: pointer; } .chuni-beef-banner .summary .bc-pdp-details__toggle:hover { color: var(--pdp-c3); } .chuni-beef-banner .summary .bc-pdp-details__toggle:focus-visible { outline: 2px solid var(--pdp-c3); outline-offset: -2px; } /* Chevron from a border, so there is no icon font or SVG to load. */ /* * The design draws each row's toggle as a 28px TAN DISC with a white chevron * inside it, flush to the panel's right edge — not the bare 10px caret this was. * Measured off the export: disc 28, fill #a4866c (c1), chevron white, right edge * at x=1448, which is the panel's own right edge. * * The caret moves to ::after so the disc itself does not rotate — rotating a * circle is invisible, and it kept the open/closed transform on the wrong box. * * ⚠ The design's disc carries the brand's grain texture. That is an image asset, * not a CSS effect; at 28px the grain is barely legible, so this is a flat tan * fill. Recorded as a fidelity nit rather than approximated with feTurbulence. */ .chuni-beef-banner .summary .bc-pdp-details__chevron { position: relative; flex-shrink: 0; box-sizing: border-box; width: 28px; height: 28px; border: 0; border-radius: 50%; background-color: var(--pdp-c1); transform: none; } .chuni-beef-banner .summary .bc-pdp-details__chevron::after { content: ""; position: absolute; top: 9px; left: 50%; width: 8px; height: 8px; border: solid var(--pdp-c11); border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); transition: transform 150ms ease, top 150ms ease; } /* Open: the caret points up, and drops 3px so it stays optically centred. */ .chuni-beef-banner .summary .bc-pdp-details__row.bc-pdp-details--open .bc-pdp-details__chevron { transform: none; } .chuni-beef-banner .summary .bc-pdp-details__row.bc-pdp-details--open .bc-pdp-details__chevron::after { top: 12px; transform: translateX(-50%) rotate(-135deg); } .chuni-beef-banner .summary .bc-pdp-details__panel { padding: 0 6px 16px; color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 400; line-height: var(--pdp-lh-links); } /* Closed only once the script says things can close. */ .chuni-beef-banner .summary .bc-pdp-details--ready .bc-pdp-details__row:not(.bc-pdp-details--open) .bc-pdp-details__panel { display: none; } .chuni-beef-banner .summary .bc-pdp-details__panel p:last-child { margin-bottom: 0; } /* The design's QUANTITIES / THIS BOX INCLUDES pair, Northwest 14px in the gold. */ .chuni-beef-banner .summary .bc-pdp-details__pair { margin-top: 16px; } .chuni-beef-banner .summary .bc-pdp-details__pair-label, .chuni-beef-banner .summary .bc-pdp-details__sub { margin: 0 0 4px; color: var(--pdp-c3); font-family: var(--pdp-font-heading); font-size: var(--pdp-links); font-weight: 400; line-height: 20px; text-transform: uppercase; } /* ── The ingredient breakdown, folded in from the retired light bands ──────── * * Mitz, 2026-09-09: the four `#f5f5f5` sections below the panel move into this * dropdown, "make sure the image was added/transfer as well". The artwork in * question is this block's — three or four ingredient icons with a percentage * and a label, from the `Ingredient` repeater on raw meals and gifts. It is the * only imagery in any of the four bands. * * The design has NO node for this, so the geometry is chosen rather than * measured, and chosen to be quiet: it is supporting detail inside a collapsed * row, not a feature. A row per ingredient, icon left, keeps every label * readable at 668 — the band drew them as a horizontal strip of five cards that * would give each label about 150px here. * * ⚠ `background: var(--pdp-c11)` on the icon is deliberate and not a mistake. * These PNGs were drawn for the light band: they are dark line art on * transparency, and on the panel's `#1f1f1f` they are all but invisible. The * white disc is what makes the client's existing artwork usable on a dark * panel without re-cutting it. Verified against `TBD_Turkey.png`, * `Beef-icon.png` and `TBD_Vegetables.png`. * ------------------------------------------------------------------------- */ .chuni-beef-banner .summary .bc-pdp-details__ingredients { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; } .chuni-beef-banner .summary .bc-pdp-details__ingredient { display: grid; grid-template-columns: 64px auto 1fr; align-items: center; gap: 0 12px; margin: 0 !important; padding: 0 !important; list-style: none !important; } .chuni-beef-banner .summary .bc-pdp-details__ingredient-icon { grid-column: 1; width: 64px; height: 64px; padding: 4px; border-radius: 9999px; background-color: var(--pdp-c11); object-fit: contain; } /* No icon: the text takes the whole width rather than leaving a 64px hole — * common, since the repeater is filled without images on several products. */ .chuni-beef-banner .summary .bc-pdp-details__ingredient:not(:has(.bc-pdp-details__ingredient-icon)) { grid-template-columns: auto 1fr; } .chuni-beef-banner .summary .bc-pdp-details__ingredient-pct { color: var(--pdp-c3); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 600; line-height: 24px; white-space: nowrap; } .chuni-beef-banner .summary .bc-pdp-details__ingredient-label { color: var(--pdp-c4); font-family: var(--pdp-font-body); font-size: var(--pdp-links); font-weight: 400; line-height: 20px; } /* --------------------------------------------------------------------------- * REUSE + RESTYLE — "You may also like" * * The design's section is a heading, four 334-wide cards and a page indicator. * * An earlier pass restyled the old carousel's heading and dots and left a note * saying the in-card subscription UI was "a separate, larger job". It turned out * not to be a job at all: the card the category page renders is entirely * hook-driven, so woocommerce/pdp/product-cards.php gets it — purchase options, * prices, Yotpo stars and a working postcode-gated cart form — by rendering a * standard WooCommerce loop. The old carousel's hand-written card had none of * that. * * What is left for CSS is therefore mostly SUBTRACTION. A loop card here renders * the SINGLE-product add-to-cart template, so it arrives carrying panel-scale * furniture the design's card does not have: * * .choose-fequancy a SECOND, non-functional subscribe control, printed by * inc/subscribe-and-save.php alongside the real one * .bc-pdp-freq the frequency pills; the design's card has no picker * .bc-pdp-options__legend "Purchase Option"; a panel label, not a card one * .quantity a stepper; the design's card has no quantity control * .price WooCommerce's loop price. Handled separately further * down, because it is redundant only where the two * priced rows exist to replace it — gifts have no * subscription schemes and would be left with no price * .stock "25 in stock"; inventory detail the design keeps off * cards, as it does off the panel * * None of it is unhooked in PHP, deliberately: every one of those is shared with * the category page, which still needs them. * * ⚠ Desktop only. The breakout and the four-up grid are inside * `min-width: 1000px`, which is also where footer.php:238 switches owl to four * items. Tablet and mobile are not built yet and must not be half-changed. * ------------------------------------------------------------------------- */ /* * The templates put this section inside a Bootstrap `.container`, which caps at * 1140 — the reason the old cards measured 263 wide against the design's 334. * Negative inline margins widen the section to the page grid. `100%` here is the * container's content box, so no viewport-unit arithmetic is involved and the * scrollbar cannot cause overflow; the `100vw` term only clamps narrow windows. */ @media (min-width: 1000px) { .bc-pdp-cards-section { margin-inline: calc((100% - min(var(--pdp-content), calc(100vw - 128px))) / 2); } } /* `h2` beats the theme's `.relatd-last-prod` on specificity, which matters: * this stylesheet is document-order EARLIER than the footer's duplicate copies * of style.css and loses every tie. See note 2 in inc/pdp-redesign.php. */ /* * MEASURED AGAINST THE DESIGN 2026-08-27. * * The Figma section heading is a text box 1384×**48** — the same height as * "WHY CHOOSE THE BUTCHER'S DOG?" and "RECENTLY VIEWED ITEMS" elsewhere on the * page, and the same as the panel's product title. An earlier pass set this to * 20px because the design names the layer "Heading 6"; the box height says * otherwise, and a 20px H6 would occupy 24, not 48. * * ⚠ FAMILY UNCONFIRMED. NorthwestRegular is used here, not Textured. The panel's * product title was confirmed as H2/Textured; whether section headings share * that treatment is not readable from the metadata, and Textured is a separate * family rather than a style, so it cannot be inferred. Flagged rather than * guessed — one line changes it if the design says Textured. * * Letter-spacing dropped: at 48px the design's box is 1384 wide with no tracking * implied, and 1.4px was carried over from the theme's 12px `.relatd-last-prod`. */ h2.bc-pdp-cards__heading { max-width: none; margin: 0 0 12px; padding: 0; color: var(--pdp-c3); font-family: var(--pdp-font-heading); font-size: var(--pdp-h2); font-weight: 400; letter-spacing: normal; line-height: var(--pdp-h2-lh); text-transform: uppercase; } /* * The design's supporting line, which the first pass omitted outright even * though its own comment listed it. 1384×24 at 12px below the heading, then 64px * before the cards. */ .bc-pdp-cards__sub { margin: 0 0 64px; padding: 0; color: var(--pdp-c5); font-family: var(--pdp-font-body); font-size: var(--pdp-body); font-weight: 400; line-height: var(--pdp-lh-6); } /* `.featured-meals` carries `padding: 0 15px` from style.css. */ .bc-pdp-cards-section .bc-pdp-cards { padding: 0; } /* ── The slide and the list wrapper ──────────────────────────────────────── */ /* * One `