# Listing Page Mobile Audit (fe3-desktop-base.html)

Audit target: `listing/fe3-desktop-base.html` (3582 lines), rendered at 390px and 768px.
Desktop render at 1280px is the spec and must be preserved as-is.

## Verdict

The desktop layout works. Mobile is functional but visually broken in five concrete places and structurally too tall (the 8700px scroll is real, but ~60% of it is dead space from broken image references, oversized empty placeholder boxes, and stacked sections that lose the gold/teal/pink rhythm that organizes the desktop view). Three of the five issues are fixable in CSS only without touching desktop. The "WALK INTO THE SPI PREPARED" rock-card circle and the "YOU MAY ALSO LIKE" placeholder squares are not actually empty boxes by design - they are broken image references to a missing `assets-mockup/` directory, and on mobile that broken state takes up disproportionate viewport. The duplicate price/add-to-cart bar is intentional (in-page card + sticky bottom bar) but currently overlaps in a confusing way at 390px. Fixes below; do not change desktop.

## Issues

| # | Issue | Severity | Section / selector | Why it hurts | Recommended fix |
|---|---|---|---|---|---|
| 1 | Top "secondary nav" pills (SPI / Vascular / OB/GYN / Abdomen / Breast / Echo / MSK) render as a cramped vertical-ish list at 390px instead of being hidden behind the hamburger | High | `.sitm-x-zone--left`, `.sitm-x-zone--right` (header style at line 1734-1740) | The `@media (max-width:1179px)` hides `.sitm-x-zone` and shows `.sitm-x-mobile`, but the categories `<ul class="sitm-x-categories">` inside are still on the page DOM and the dropdown panels (`.sitm-x-dd`) appear stacked under the header in the render. They should not be visible at all until the hamburger is opened. Confirm with DOM check; if zones really are `display:none`, the chips visible in the mobile render are coming from the right zone (Shop / Accessories etc.) bleeding through. | Add explicit `display:none` on `.sitm-x-categories` inside `.sitm-x-zone` at the same `max-width:1179px` breakpoint, OR move the zones outside the sticky header into a slide-in panel that the hamburger toggles. Keep desktop unchanged. |
| 2 | Empty white circle in the "Expertly designed by..." Jenny section | High | `.pcl-jenny__photo` (line 2936) - `background-image: url('assets-mockup/jenny-headshot-hires.webp')` | The `assets-mockup/` directory does not exist in the listing folder, so the headshot fails. The 210px circle with `box-shadow: 0 0 0 6px #fff` then renders as a pure white disc surrounded by the pink band - reads as a broken element, not as intentional. Same root cause as the YOU MAY ALSO LIKE placeholders but more glaring because it is round and large. | Two-part fix. (a) Either ship the real `assets-mockup/jenny-headshot-hires.webp` asset or fall back to a CSS gradient placeholder (`background: var(--sitm-gradient)`) plus initials so it looks intentional. (b) On mobile reduce the photo to 140px and tighten the negative margins (`margin-top:-32px; margin-bottom:-32px`) so it doesn't dominate the section. |
| 3 | "YOU MAY ALSO LIKE" cards are tall dead boxes ("Image placeholder / Future Sonographer / Tote Bag" text inside a dashed-border square) stacked one per row at 390px - each ~390px tall, three of them = ~1170px of nearly empty viewport | High | `.sitm-related__placeholder` (line 2967), grid collapsed by `@media (max-width:560px) { .sitm-related__grid { grid-template-columns: 1fr; } }` (line 3293) | Same broken-asset root cause as #2. The `aspect-ratio:1/1` forces each placeholder to be a 358px tall square at 390px width. Three squares stacked = the second-biggest single contributor to the 8700px scroll. The dashed-border-on-grey treatment also reads as broken, not as a styled placeholder. | (a) Stop collapsing to 1-up on mobile - keep 2-up (`grid-template-columns: 1fr 1fr`) so each card halves in size; 2-up product grids are the SITM/Shopify norm anyway. (b) Replace the dashed-border placeholder with a filled gradient block using `var(--sitm-mint)` or `var(--sitm-gradient)` plus the product name centered - intentional, not broken. (c) Cap placeholder `aspect-ratio` to `4/5` on mobile so each card is shorter. |
| 4 | Duplicate price + "Add to Cart" appears twice in the first viewport-and-a-half: once in `.pcl-price-card` (in-page, $34.99 / Digital download / Add to cart) and once in `.pcl-sticky-atc` (fixed bottom bar, $34.99 / product name / Add to Cart) | Medium | `.pcl-price-card` (line 2055) and `.pcl-sticky-atc` (line 2208 + 2778) | The sticky bar is supposed to appear only after scrolling past `threshold = 500` (script line 2839), but on a 390px wide narrow viewport the in-page price card and the sticky bar are visually very close together in the screenshot - they read as a duplicate. The sticky bar also overlaps content on short pages because there's no body padding-bottom compensating for the 76px-tall fixed bar. | (a) Add `body { padding-bottom: 84px; }` (mobile only) so the sticky bar never covers the footer/content. (b) Raise the scroll threshold to ~900px so the sticky bar only appears after the user scrolls past the in-page card, not while both are on screen. (c) Make the sticky bar visually subordinate: smaller price, shorter button label ("Add to cart" -> cart icon + price), `box-shadow` softer. |
| 5 | Mobile total height ~8700px with weak hierarchy - reader gets stats-banner, walk-into, jenny-credentials, reviews, all-reviews list, you-may-also-like, two policy bands, footer all in stacked single-column with very similar visual weight | Medium | Overall page composition; all `.pcl-ext` sections collapse to single column at `<=900px` (line 2919, 2947) | The desktop uses color bands (mint, pink, teal) and 3-col grids to create rhythm. On mobile, every section reverts to a single white-or-pastel rectangle of similar height, and the eye loses the "this section has ended, new one begins" cue. Combined with #3, the lower half of the page reads as one long scroll of placeholders. | (a) On mobile, add visible section dividers using `.sitm-pulse-divider` from the kit between the major sections (after stats, after WALK INTO, after Jenny, after reviews). (b) Compress padding: `.pcl-walkinto { padding: 32px 16px; }` and `.pcl-jenny { padding: 24px 16px; }` on mobile - currently they inherit 56px top/bottom. (c) Move the two policy bands (`pcl-band--teal`, `pcl-band--pink`) into a single compact disclosure under the price card; they are legal microcopy and don't need 80px of vertical real estate each. |
| 6 | Two policy band sections at the bottom ("Due to the nature of these educational tools..." and "These study tools are intended for personal use only...") render as full-width teal and pink blocks with center-aligned 14px text - ~120px tall each on mobile, no clear hierarchy with the rest of the page | Medium | `.pcl-band--teal`, `.pcl-band--pink` (line 2954-2955) and section HTML at line 3398-3403 | These are refund-policy + IP-rights microcopy. They consume ~240px above the footer and visually compete with the brand sections for attention. | Make them an inline collapsible "Fine print" disclosure under the price card on mobile (closed by default), or render as a single small caption-styled paragraph above the footer. |
| 7 | Trust-bar items stack to single column at `<=767px` (line 2220) leaving the items left-aligned with their 44px icon + multi-line text - looks fine but the icon-to-text spacing reads loose | Low | `.pcl-trust-bar` (line 2124) | Minor. | Tighten gap to 12px and keep the row in a 2-col grid on mobile instead of full column collapse - the items are short enough. |
| 8 | "WALK INTO THE SPI PREPARED" red circular arrow badge is hidden at `<=900px` (line 2932) - correct decision, but the visual replacement should be a small "vs / -> / after" cue between the two cards on mobile | Low | `.pcl-walkinto__arrow` (line 2931-2932) | Without the arrow the BEFORE -> AFTER causality is lost. The mobile reader sees two unrelated pastel cards. | Insert a small `<div class="pcl-walkinto__arrow--m">` shown only on mobile, sitting between BEFORE and AFTER cards (arrow-down icon in a 32px gold circle) so the relationship survives the column collapse. |
| 9 | "WHAT STUDENTS ARE SAYING" review marquee on mobile shrinks cards to `width: 260px` at `<=560px` (line 2768) but the surrounding viewport at 390px still leaves visible peek of the next card - readable, but the card itself feels narrow against the page edges | Low | `.sitm-marquee__card` (line 2768) | Cosmetic. | Bump card to `width: calc(100vw - 64px); max-width: 320px;` on the `<=560px` breakpoint so the card uses the column width properly. |
| 10 | Tap targets: dropdown chevrons in `.pcl-dropdown-trigger` are 18px (line 2155), Judge.me write-review pill is 10px/18px padding (line 2722) - meets 44px overall trigger height for dropdown rows but the bare SVG chevron is small | Low | `.pcl-dropdown-chevron` (line 2155), `.sitm-jdgm__write` (line 2721) | Marginal touch comfort. | Already passes (full trigger row is 44px+). Optional: bump chevron viewBox visual size to 22px. No HIGH-severity tap issues confirmed. |
| 11 | Five thumbnail gallery (`.pcl-gallery-thumbs`) renders as 5 thumbs in a row at 390px, each ~70px wide - usable but cramped | Low | `.pcl-gallery-thumbs` (line 2032), `.pcl-gallery-thumb` (line 2033) | Marginal. Five 70px thumbs share a 358px row. | If preserving 5 thumbs, OK. Could go to a 4-up grid + "more" indicator on mobile, but desktop must keep 5. |
| 12 | Stats banner ("10,000+ Students Helped / 94% / 5-Star / Trusted by ...") collapses to 2-col at `<=700px` (line 2907-2912) - the 4th item "Trusted by Sonography Students Nationwide" has no big number, so it visually orphans next to the 5-Star item | Low | `.pcl-stats-banner` (line 2899) | Asymmetric grid - three items have a big stat number and the fourth is just label text. | Either give the 4th item a stat ("50 States") or restructure mobile as 3 stat cards in a row + 1 wide trust-bar row underneath. |

## What already works on mobile

- Header collapses cleanly to logo + hamburger + cart icons (line 1734-1740 breakpoint fires correctly for the wrapper).
- The price card itself reflows correctly: `flex-wrap: wrap` at `<=700px` (line 2063-2067) puts the qty + ATC on their own full-width row below the price - this is a good fix and should be kept.
- Feature grid collapses to single column at `<=767px` (line 2219) - reads cleanly.
- Rating stars + score + review count wrap to multiple lines without overflow.
- "What's Included" + "Product Specs" accordions are touch-friendly and the chevron rotation animation works.
- BEFORE/AFTER cards in WALK INTO collapse from 3-col to 1-col at `<=900px` (line 2919) cleanly.
- Footer 4-column grid uses `auto-fit, minmax(200px, 1fr)` (line 3411) which naturally becomes single column on mobile - no special breakpoint needed.
- Sticky ATC bar is correctly hidden at desktop (`@media (min-width:1024px)` line 2210).
- No horizontal scroll detected at 390px.
- Body text stays at 15px (line 2012), meets readability minimum.

## Desktop is the spec - do not change it

The 1280px render (`fe3-desktop-1280.png`) is the approved design. Every fix above is mobile-only, scoped inside `@media (max-width: ...)` blocks, and must not regress the desktop layout. Specifically:

- The three-column WALK INTO grid with the red circular arrow stays at >900px.
- The Jenny row stays horizontal (photo / quote / credentials) at >900px.
- The four-up stats banner stays inline at >700px.
- The three-up YOU MAY ALSO LIKE grid stays at >880px.
- The in-page `.pcl-price-card` stays as a single row at >700px.
- The dropdown topic chips in the header stay as inline hover-reveal categories at >=1180px.

Any redesign build derived from this audit must preserve all of the above pixel-for-pixel at 1280px width.

## Build guidance for the two mobile redesign variants

The two redesigns should diverge on philosophy, not on bug count:

- **Variant A (conservative reflow)**: fix issues 1-6 with scoped media-query CSS only. Same HTML, same desktop, just a polished mobile. Lower risk, easier client review.
- **Variant B (mobile-first restructure)**: keep desktop intact but reorder the mobile DOM via flex `order` so the highest-conversion blocks (price card -> trust bar -> WALK INTO benefits -> WHAT STUDENTS SAY -> What's Included accordion -> related products -> reviews list -> fine print) come first. Replace placeholder image boxes with branded gradient cards. Tighten total scroll to roughly 4500px.

Both variants must use only tokens/components from `shared/sitm-mockup-kit.css`.