/* ========================================================================== PODPAWS MOBILE USABILITY — 2026-10-15 Consolidated into ONE partial because assets/css/custom.css is no longer on the page: functions.php globs assets/css/partials/*.css and only falls back to custom.css when that directory is empty. Earlier passes appended to custom.css and were silently dead — nothing was wrong with the rules, they were simply never requested. Numbered 43 so it sorts after 42-pp-about.css and wins the cascade without !important against theme defaults. Measured on iPhone 12 (390x844). Footer was 989px = 1.17 screens with .pp-container alone at 847px; on /cart/ footer outweighed page content (footer:main = 0.83). Login fields rendered at 13.9px and the newsletter field at 12.8px, so focusing either made iOS Safari zoom and stay zoomed. ========================================================================== */ /* ========================================================================== PODPAWS MOBILE FOOTER + TAP TARGETS + TYPE FLOOR — 2026-10-15 Measured on iPhone 12 (390x844): footer 989px = 1.17 screens, with .pp-container alone at 847px. On /cart/ the footer outweighed the page content (footer:main = 0.83) even though the page had almost nothing on it. Same audit found 9-10px text and 21 sub-32px tap targets (38x30 burger, 141x21 "Continue Shopping", 15px-tall footer links). ========================================================================== */ @media(max-width:768px){ /* ---- Footer: tighten, do not restructure ---- */ .pp-footer{padding-top:32px;} .pp-footer-top{gap:20px;padding-bottom:24px;} .pp-footer-tag{font-size:.86rem;line-height:1.5;margin:10px 0 12px;} .pp-footer-news h4{font-size:1.02rem;margin-bottom:4px;} .pp-footer-news p{font-size:.82rem;margin-bottom:8px;} /* the four link columns become two tighter columns instead of one tall stack */ .pp-footer-cols{ grid-template-columns:1fr 1fr !important; gap:18px 16px; padding:24px 0; } .pp-footer-col h5{font-size:12px;letter-spacing:.1em;margin-bottom:8px;} .pp-footer-col li{margin-bottom:0;font-size:.85rem;} /* 15px-tall links become real rows */ .pp-footer-col li a{ display:block; padding:7px 0; min-height:30px; line-height:1.4; } .pp-footer-contact li{align-items:flex-start;line-height:1.5;} .pp-footer-bottom{padding:14px 0;font-size:12px;} .pp-footer-legal{gap:14px;flex-wrap:wrap;} .pp-footer-legal a{display:inline-flex;align-items:center;min-height:30px;} /* ---- Tap targets: 44px where it matters, 32px minimum elsewhere ---- */ .pp-burger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;} .pp-cart-continue{min-height:44px;display:inline-flex;align-items:center;padding:10px 4px;} .pp-logo,.pp-logo-light{min-height:40px;display:inline-flex;align-items:center;} .pp-blog-section-link{min-height:36px;display:inline-flex;align-items:center;} .pp-readmore{min-height:36px;display:inline-flex;align-items:center;} /* ---- Type floor: nothing below 12px on a phone ---- */ .pp-eyebrow, .pp-mobile-sub-title, .ph-tag, .pp-footer-col h5{font-size:12px;} .pp-footer-bottom, .pp-footer-col li, .pp-footer-news p, .pp-footer-tag{font-size:12px;} } /* This block originally dropped the link columns back to a single column at 420px, "so the type can breathe". Measured, that was backwards: the longest footer label is "Shipping & Delivery" at 19 characters, which needs ~110px at 12px — a third of a 354px column. The single column made .pp-footer-cols 732px tall and the whole footer 1192px, i.e. WORSE than the 989px it was meant to fix, and it contradicted the 1fr 1fr rule the 768px block above already sets. Two columns put the same four headings at ~380px, so the single-column fallback now starts at 320px. */ @media(max-width:320px){ .pp-footer-cols{grid-template-columns:1fr;gap:14px;} .pp-footer-col li a{padding:8px 0;min-height:32px;} } /* ========================================================================== PODPAWS MOBILE INPUT USABILITY — 2026-10-15 Same iOS auto-zoom problem as the JFPS pass: /my-account/ rendered its username, password and email fields at 13.9px and the newsletter field at 12.8px. Focusing either makes Safari zoom the page and never zoom back, which shifts the layout and can hide the field mid-typing. 16px on every control below the phone breakpoint; desktop untouched. ========================================================================== */ @media(max-width:768px){ /* !important is not optional here. The login form ships its styling as an inline attribute — style="...font-size:.95rem..." on the input itself — which beats any stylesheet rule no matter how specific the selector is. That inline 0.95rem resolved to 13.86px, i.e. below the 16px iOS threshold, so focusing the username field zoomed the page. Verified in the browser: an identical rule WITHOUT !important changed nothing. */ input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]), select, textarea{ font-size:16px !important; line-height:1.4; min-height:46px !important; padding-left:12px; padding-right:12px; } /* the login fields carry height:48px inline; keep that, just fix the type */ .woocommerce-form-login input, .woocommerce-form-login textarea{min-height:48px !important;} textarea{min-height:110px !important;} input[type=number], input[type=tel], input[type=url], input[type=date], input[type=search], input[type=email]{ font-size:16px !important; min-height:46px !important; } label, .woocommerce-form__label, .pp-form label, .comment-form label, .woocommerce form .form-row label, .pp-login label{ font-size:14px !important; line-height:1.35; } .required{font-size:14px !important;} button[type=submit], input[type=submit], .woocommerce button.button, .woocommerce a.button, .woocommerce .button, .pp-news-form button, .pp-btn{ min-height:46px !important; padding-left:22px; padding-right:22px; font-size:16px !important; display:inline-flex; align-items:center; justify-content:center; } .woocommerce .quantity .qty, input.qty{min-height:44px !important;min-width:56px;font-size:16px !important;text-align:center;} .woocommerce-table__wrapper, table.pp-spec-table{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } input::placeholder, textarea::placeholder{font-size:14px;opacity:.72;} /* These two carry a CLASS selector AND !important — .podpaws-ship-select .9rem and .pp-pet-note .88rem, both ~13px, so iOS zooms when a customer picks a shipping speed or types a pet name on the product page. They ship later than this partial, and at equal-ish specificity the later !important wins, which is why the broad input:not([type=hidden]) rule above did not touch them. Confirmed with CDP getMatchedStylesForNode: both elements report the class rule as the winning declaration. Matching on the class (not the element) is what raises specificity enough. */ .podpaws-ship-select, .pp-pet-note{ font-size:16px !important; } .podpaws-ship-select{min-height:46px !important;} /* The 12px "Username or email address" labels measured earlier. */ .woocommerce form .form-row label, .pp-login label{font-size:14px;} } /* ---- Bottom tab bar: 9px labels — 2026-10-15 ---- .pp-mobinav is the fixed bottom tab bar. Its labels rendered at 9px, which is below the 12px floor and hard to read on a 390px screen in daylight. The bar itself is 57px tall, so there is room to grow the type without making the bar taller — the icons are 18px and sit above the label. */ @media(max-width:768px){ .pp-mobinav a, .pp-mobinav .pp-mobinav-label, .pp-mobinav span{ font-size:12px !important; line-height:1.25; } .pp-mobinav a{min-height:44px;} /* breadcrumbs ("Home / Affiliate / Cart") measured at 9px on cart+checkout */ .pp-mobinav .pp-mobinav-crumb, .pp-mobinav-crumb, .pp-mobinav-crumb a{font-size:12px !important;} } /* ---- Remaining sub-11px text — 2026-10-15 ---- The first pass listed .pp-eyebrow and .ph-tag but without !important, so theme rules still won: measured on the homepage at 390px, ".pp-eyebrow" rendered 9.5px in the hero and 9.3px above the occasion grid, ".ph-tag" 10.5px on the hero photo card, and WooCommerce's own category label ".ast-woo-product-category" 9.9px on product cards. All four are decorative labels rather than body copy, so 11px is enough — that keeps the visual hierarchy of the design while clearing the readability floor. */ @media(max-width:768px){ .ph-tag{font-size:11px !important;line-height:1.4;} /* Same lesson as the category label: .pp-eyebrow is 11px on most pages but two theme rules outrank a bare class selector — .pp-related-sec .pp-eyebrow and .pp-contact-hero .pp-eyebrow both set .72/.75rem, and the audit measured the hero eyebrow at 9.5px and the "Shop By Occasion" eyebrow at 9.3px. Repeat those two ancestor chains so the weights line up. */ .pp-eyebrow, .pp-related-sec .pp-eyebrow, .pp-contact-hero .pp-eyebrow, .pp-hero-copy .pp-eyebrow, .pp-sec-head .pp-eyebrow, .pp-footer-cta .pp-eyebrow, .pp-policy-head .pp-eyebrow{ font-size:11px !important; letter-spacing:.08em; line-height:1.4; } /* The product-card category label needs MATCHING specificity, not just !important. The theme ships .pp-shop-layout ul.products li.product .ast-woo-product-category {font-size:.68rem!important} — that is (0,4,1) with !important, so a bare .ast-woo-product-category (0,1,0) loses even with !important of its own. These two selectors repeat the theme's structure so the weights match and source order decides; 0.68rem is 9.9px, which is what the audit kept reporting on every product card. */ .pp-shop-layout ul.products li.product .ast-woo-product-category, .pp-section.alt ul.products li.product .ast-woo-product-category, ul.products li.product .ast-woo-product-category{ font-size:11px !important; line-height:1.4; } } /* ---- Footer link tap heights — 2026-10-15 ---- 15 footer links measured 169x31px and the three bottom-bar legal links ("Privacy" and siblings) measured 41x30px. The HIG asks for 44px; these sit in a dense list so 40px is the compromise for the column links (they are full-width blocks, easy to hit) and the legal row goes the full 44px since there is only one row of it. Padding is used rather than height so the clickable area grows without changing the type size. */ @media(max-width:768px){ .pp-footer-col li a{ padding:9px 0; min-height:36px; } .pp-footer-legal a, .pp-footer-bottom a{ min-height:44px; display:inline-flex; align-items:center; } .pp-footer-legal{gap:6px;} } /* ---- Breadcrumb links — 2026-10-15 ---- WooCommerce breadcrumbs measure 19x33px for "Home" and 20x34px on product pages: wide enough to tap but only 33-34px tall, because the bar itself is .pp-breadcrumb-wrap{padding:10px 0!important}. Padding the wrap (rather than min-height on the anchors, which would break the flex row of crumbs) gives every crumb a 44px hit area without changing how the bar looks. */ @media(max-width:768px){ .pp-breadcrumb-wrap{padding:15px 0 !important;} .pp-breadcrumb-wrap .woocommerce-breadcrumb{ min-height:44px; align-items:center; } .pp-breadcrumb-wrap .woocommerce-breadcrumb a, .pp-breadcrumb-wrap .woocommerce-breadcrumb span{ display:inline-flex; align-items:center; min-height:44px; } } /* ---- Last sub-11px labels — 2026-10-15 ---- Five selectors, all found by walking the ancestor chain of every remaining under-11px text node at 390px: p.pp-eyebrow inside .pp-sec-head.reveal 9.3px "Shop By Occasion" span.pp-pdp-cat 10.2px category label on PDP span.pp-personalize-req 9.0px the word "required" span.pp-upload-sub 10.8px "JPG or PNG · We'll send" span.pp-sh-lbl 10.5px Facebook/Pinterest/WhatsApp The eyebrow needed .pp-sec-head.reveal rather than .pp-sec-head because the theme's own rule carries the extra class and therefore the extra weight. */ @media(max-width:768px){ .pp-sec-head.reveal .pp-eyebrow, .pp-pdp-cat, .pp-personalize-req, .pp-upload-sub, .pp-sh-lbl{ font-size:11px !important; line-height:1.4; } .pp-sh-btn{min-height:40px;} } /* ---- The last one: an ID beats every class — 2026-10-15 ---- "Shop By Occasion" on the homepage is inside #collections, and the theme ships #collections .pp-eyebrow{font-size:.64rem!important} — that is (1,1,0), which outranks any class-only selector no matter how many classes are stacked or how late it loads. CDP getMatchedStylesForNode listed it as the winning declaration (the two rules above it both set 11px and both lost). Repeating the ID is the only way to match that weight. */ @media(max-width:768px){ #collections .pp-eyebrow{ font-size:11px !important; line-height:1.4; letter-spacing:.08em; } }