/** * PDP — overrides on WooCommerce-owned markup * * Ported from "Majid CSS" (code-snippets row 2) — Phase 1 of the port-then-retire * plan in docs/findings/majid-css-audit-2026-07-25.md. * * WHY THIS FILE EXISTS AND NOT pdp.css * ------------------------------------ * Two reasons, both hard blockers: * * 1. COVERAGE. pdp.css is enqueued by inc/pdp/bootstrap.php behind * gerbs_pdp_active(), a PER-PRODUCT meta gate (_gpdp_v2_enabled / * _gpdp_v3_enabled). Products without that meta render the v1 PDP and load * no pdp.css at all. The snippet these rules come from is injected on every * page, so it styles v1 PDPs too. Putting them in pdp.css would silently * regress every non-v2/v3 product page the moment the snippet is switched * off in Phase 3. This file is enqueued on all is_product() pages. * * 2. CONTRACT. pdp.css states in its header that it "NEVER touches classes * owned by Divi, WooCommerce, or existing Gerbs CSS" — every rule there is * .gpdp-* scoped. Every rule below is the opposite: it deliberately styles * WooCommerce / WooCommerce-Subscriptions / Back-In-Stock markup. Mixing * them would break a contract that is doing useful work. * * SCOPING RULE FOR THIS FILE * -------------------------- * The snippet's selectors are bare generics (`#comments`, `.star-rating`, * `.woocommerce ul.products li.product a img`). Those generics are exactly what * let three dormant display:none rules hide the WCS recurring-totals rows on * production on 2026-07-25 (fixed in 1.2.2.78–.80). Everything here is re-scoped * to `.single-product` — the surface the audit actually verified — so a future * blog rebuild, a new listing surface, or a plugin that reuses the same class * cannot be caught by it. Do NOT widen these selectors back to match the * snippet. * * TWO KINDS OF RULE LIVE HERE * --------------------------- * PORTS (§1, 3–6) — snippet behaviour we are keeping. No-ops today, because * the snippet still wins by source order; they take over at Phase 3. * * NEUTRALISERS (§2, 7) — snippet behaviour Chris has decided against. These * must actively BEAT the snippet, because the DB row stays active until Phase * 3 and simply not porting a rule leaves it applying. They change the site the * moment this ships, and each is enumerated in the PR. * * Chris's standing principle for this work (2026-07-25): the snippet "is stuff * that was never contemplated by me or any of the current developers" — treat * its behaviour as accidental until proven intentional, and never preserve a * snippet behaviour for parity's sake alone. * * Token source: gerbs-tokens.css (declared as a dependency at enqueue). * Colours on the PORT rules are kept as the snippet's literals (#f0d032, brown, * #000) so those ports stay exact no-ops; colours on the NEUTRALISER rules are * the upstream plugin's own defaults, read off the bundled stylesheet rather * than guessed. Re-tokenising either set is a design decision for after the * snippet is retired. */ /* ========================================================================== 1. Reviews — two-column layout (form beside the comment list) ========================================================================== Snippet original (mirror lines 47–48): #review_form_wrapper { float:right; width:35%; padding:10px; border:1px solid #999; margin-top:0!important; } #comments { float:left; width:65%; } This layout is ENTIRELY the snippet — nothing in the theme reproduces it. Without it the review form stacks full-width under the comment list. `border:1px solid #999` is deliberately NOT ported: the audit measured it computing to 0 on production, i.e. newer CSS already beats it. Porting it would ADD a border that is not on the site today — a visible change, not a parity port. `padding:10px` is dropped for the same reason — measured on staging as computing to 0px on every side, with the snippet live, on both the in-stock and out-of-stock PDPs. Scoped to `.single-product` because `#comments` is WordPress's standard comment-list ID and would otherwise float the comment list on every blog post the day one is published. */ .single-product #review_form_wrapper { float: right; width: 35%; margin-top: 0 !important; } .single-product #comments { float: left; width: 65%; } /* ========================================================================== 2. NEUTRALISER — the "earn X points" message becomes VISIBLE on the PDP ========================================================================== Snippet original (mirror line 70): .single-product .wc-points-rewards-product-message { display:none; } Chris's call 2026-07-25: a legacy artifact, not policy — "those two things should not be hidden." (Reverses an earlier read of it as deliberate.) The WooCommerce Points & Rewards plugin is ACTIVE and emits this message on product pages; the snippet was the ONLY thing suppressing it, so the store has been paying for a loyalty nudge nobody could see. SPECIFICITY: the snippet's selector is (0,2,0). `body.single-product` is (0,2,1) — one notch above, no !important needed, and it stays pinned to the PDP exactly as the snippet's version was. `display: revert` returns the element to its UA default rather than asserting a box type. Points & Rewards emits it as a `` today (see gerbs_sticky_atc_strip_br() in functions.php, which strips the `
` that follows it) — `revert` survives a plugin markup change. DELIBERATELY BELOW sticky-atc.css, which hides this same class inside `#sticky-atc` with `!important` at (1,1,0). That hide is intentional and scoped: the sticky bar's price cell wants only the canonical price. This override must not lift it, and at (0,2,1) it cannot. Related landmine, still NOT ported (see audit § LANDMINES L6): `.woocommerce-checkout .wc_points_rewards_earn_points { display:none }` and `.woocommerce div.product form.cart .points { display:none }` match nothing today, so they need no neutraliser — but they are live rules in the DB row and will suppress points messaging on checkout if that markup ever returns before Phase 3. */ body.single-product .wc-points-rewards-product-message { display: revert; } /* ========================================================================== 3. Subscription plan dropdown (WooCommerce Subscribe All The Things) ========================================================================== Snippet originals (mirror lines 226, 141): div.product form.cart select { width:auto; color:#000; } div.product form.cart select.wcsatt-options-product-dropdown { min-width:120px; } SPECIFICITY MUST MATCH THE SNIPPET EXACTLY — do not add `.single-product`. These two rules deliberately break the re-scoping convention used everywhere else in this file, and the reason is a bug caught on staging. `div.product form.cart select` is (0,2,3). The snippet's version LOSES on production for the first select on the page — something more specific already sets its width, so it computes 538.641px, not `auto`. Adding `.single-product` made the ported rule (0,3,3), which WINS where the snippet loses, and the select narrowed to 403.969px on staging. That is a visible layout change to the Buy Box v3 plan picker that nobody asked for — a bug in the port, not one of the three sanctioned diffs. A ported rule must inherit the snippet's cascade position, not improve on it. Re-scoping is only safe when it does not change which declaration wins. Here it did, so the selector is carried across verbatim. Losing the `.single-product` prefix costs nothing in scope: this stylesheet is only enqueued on `is_product()` pages (see functions.php), so the body-class was pure specificity with no containment value. Verified after the fix: the select computes 538.641px on staging and production alike. */ div.product form.cart select { width: auto; color: #000; } div.product form.cart select.wcsatt-options-product-dropdown { min-width: 120px; } /* ========================================================================== 4. Related / up-sell product images ========================================================================== Snippet original (mirror line 160): .woocommerce ul.products li.product a img { width:90%; } The PDP related-products grid renders through WooCommerce core's content-product.php (woocommerce/content-product.php delegates to core when gerbs_cat_archive_v2_is_active() is false, which it is on a PDP), so these are stock Woo cards and the snippet is what shrinks their images. Scoped to `.single-product` on purpose. The SAME snippet rule also matches the category archive V2 grid, where category-archive-v2.css beats it — porting it unscoped would make it win there and shrink every archive card image. */ .single-product ul.products li.product a img { width: 90%; } /* ========================================================================== 5. Star ratings in the reviews block ========================================================================== Snippet originals (mirror lines 948–959). The snippet's last selector in this cluster is a BARE `.star-rating { font-size:15px }` with no namespace at all — that one is deliberately not carried across. Only the reviews-block and product-rating instances the audit found on the PDP are ported, scoped to `.single-product`. Also not ported: `.woocommerce .product_item .star-rating` — `.product_item` is TheRetailer-theme markup, dead since the Divi migration (audit § DEAD) — and `.woocommerce .woocommerce-product-rating .star-rating`, which the audit listed as live but which measured ZERO matches on both the in-stock and out-of-stock PDPs during this PR's staging pass. Buy Box v3 renders its own rating markup; `.woocommerce-product-rating` no longer exists on the page. The two rules below are the ones that do match. Both verified on staging by toggling the snippet's stylesheet off via CSSOM and re-measuring: font-size, width and margin-left are unchanged, and the gold `::before` fill computes rgb(240, 208, 50) with and without the snippet. */ .single-product #reviews .star-rating { font-size: 15px; margin-left: 2px; width: 100px; } .single-product #reviews .star-rating span::before { color: #f0d032; } /* ========================================================================== 6. Back-In-Stock notification form (out-of-stock PDPs) ========================================================================== Snippet originals (mirror lines 55–58, 105–115). All are already anchored to the plugin's own `#wc_bis_product_form` ID, so no re-scoping is needed — they cannot match anything outside that form. NOT ported: `#wc_bis_send_form { padding:5px; color:orange }`. The audit measured it LOSING to current button CSS on production, so porting it would turn the submit button orange — a change, not a parity port. The shared float/margin rule below keeps `#wc_bis_send_form` because `margin-right` does still apply to it (its `float` computes `none` either way). Also NOT ported: `#wc_bis_product_form .wc_bis_opt_in { float:left; border-bottom:1px solid #000; margin-bottom:10px }` — zero matches on the out-of-stock PDP during this PR's staging pass. The current Back-In-Stock plugin version does not render that opt-in wrapper. Verified on staging: the title computes rgb(165, 42, 42) / 700 / 20px bottom margin with the snippet's stylesheet toggled off. */ #wc_bis_product_form .wc_bis_form_title { margin: 0 0 20px; color: brown; font-weight: bold; } #wc_bis_product_form #wc_bis_email, #wc_bis_product_form #wc_bis_send_form { float: left; margin-right: 5px; } /* ========================================================================== 7. NEUTRALISER — the PhotoSwipe lightbox backdrop goes back to near-black ========================================================================== Snippet original (mirror line 155): .pswp__bg, .pswp__ui--fit .pswp__caption { background: gold!important; opacity: 0.9 !important; } Chris's call 2026-07-25: drop it. A gold scrim behind product photography lowers contrast and casts a colour tint across the image. WHERE THIS IS ACTUALLY REACHABLE: exactly 11 published products — the non-Buy-Box-v3 merch (trucker hat, water bottle, knit cap, …) that still use WooCommerce's stock gallery and its zoom triggers. On the 128 v3 food products our `gpdp-gallery` replaces Woo's gallery entirely and emits no zoom trigger, so PhotoSwipe never opens there even though its root element is in the DOM. QA target: /shop/gerbs-heather-trucker-snapback-hat/. VALUES ARE PHOTOSWIPE'S OWN DEFAULTS, read off the bundled stylesheets rather than guessed — woocommerce/assets/css/photoswipe/photoswipe.min.css has `.pswp__bg { background:#000 }`, and default-skin.min.css has `.pswp__ui--fit .pswp__caption { background-color: rgba(0,0,0,.3) }`. `!important` + one extra class is required, not optional: the snippet's declarations carry `!important` at (0,1,0) and (0,2,0) and are injected after every enqueued stylesheet, so nothing weaker can reach them. OPACITY IS DELIBERATELY LEFT ALONE. The snippet also pins `opacity:.9 !important`, which currently defeats PhotoSwipe's JS-driven fade (PhotoSwipe animates `.pswp__bg` opacity 0 -> 1 on open and dims it on drag-to-close by writing an INLINE style, and an inline style loses to a CSS `!important`). That animation cannot be restored from CSS — you cannot un-`!important` a declaration, and any static value we pick would freeze the fade at a different wrong point. So the backdrop stays at 90% for now, which is the near-black the decision asked for. Phase 3 removes the pin and the fade returns on its own. Do not "fix" this by adding an opacity override here. */ .pswp .pswp__bg { background: #000 !important; } .pswp .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3) !important; }