/* ============================================================
   HEYUAN PET V4.2 — P2 Mobile Visual Tune (ISOLATED CANDIDATE, R3 FINAL)
   Status: BUILD ONLY — NOT deployed. No production write.
   Scope: homepage mobile ONLY. CSS-display-layer changes only.
   NO HTML / copy / image / URL / SEO-AI semantic changes.
   ------------------------------------------------------------
   CASCADE STRATEGY (corrected per GPT FINAL REVIEW R2):
   - This file is enqueued AFTER home-v42.css via a hard dependency
     (array('hp-home-v42')) in functions.php, so its <link> is the
     LAST stylesheet in <head>. For any rule with EQUAL specificity
     to the target, source order decides -> p2 wins. => NO !important
     needed for those.
   - !important is used ONLY where the OLD rule being overridden is
     itself !important (p1-home-mobile-ux.css). Normal cascade
     (specificity + source order) can NEVER beat an !important
     declaration, so an !important override is mandatory there.
     Each such rule is annotated with [!imp-justified].
   ------------------------------------------------------------
   REMOVED AFTER VERIFICATION (dead/no-op rules, honesty note):
   - body { padding-bottom: 72px } — REMOVED: p0-mobile-fix.css:560
     already sets `body { padding-bottom: 72px !important; }`, so the
     live site ALREADY has 72px clearance. R2's "56px -> 7px hidden"
     finding was incorrect; no p2 rule needed.
   - .category-card h4 { font-family: var(--font-head) } — REMOVED:
     .category-card does not exist on the V4.2 homepage (0 matches in
     live DOM), so the rule was dead in this homepage-scoped file.
   ============================================================ */

/* ---------- 1. HERO PRODUCT IMAGE — responsive height (clamp) ----------
   OLD rule (override target):
     p1-home-mobile-ux.css:89  body.hp-home .v42-hero-img img { height:150px !important; }  (0,2,1) !imp
     p1-home-mobile-ux.css:123 body.hp-home .v42-hero-img img { height:140px !important; }  (0,2,1) !imp  [<=380px]
   WHY !important is mandatory: p1's declaration is !important. A normal
   declaration (even with higher specificity) loses to any !important
   declaration. So p2 must re-declare with !important; source order then
   decides within the important layer, and p2 (last) wins.
   Scoped to <=767px to mirror p1's scope and avoid desktop regression.
   NOTE: the img sits in a flex column inside a 2-col hero grid, so the
   finally rendered height is flex-modulated around the clamp value
   (measured 165px -> 171.6px at 390px viewport). */
@media (max-width: 767px) {
  body.hp-home .v42-hero-img img {
    height: clamp(140px, calc(45.5vw - 21px), 180px) !important; /* [!imp-justified] */
  }
}

/* ---------- 2. PRODUCT CARD IMAGE — responsive height (clamp) ----------
   OLD rule (override target):
     p1-home-mobile-ux.css:195 body.hp-home .v42-pimg { height:160px !important; } (0,2,0) !imp
   WHY !important mandatory: same reason as hero — p1 uses !important.
   Scoped to <=767px (matches p1 block). Verified computed 160px -> 188.95px
   at 390px viewport (48.4vw of 390 = 188.76, matches design). */
@media (max-width: 767px) {
  body.hp-home .v42-pimg {
    height: clamp(160px, 48.4vw, 210px) !important; /* [!imp-justified] */
  }
}

/* ---------- 3. FACTORY FIGURES — per-image focal point (NO !important) ----------
   OLD rules (override targets), p1-home-mobile-ux.css:243-247,
   @media(max-width:767px), specificity (0,2,1), NO !important:
     01 .v42-fac-item.v42-large img        -> 50% 75%  -> 50% 60% + height:100%!important  (CHANGE, OP60 crop fix)
     02 .v42-fac-item:nth-of-type(2) img   -> 50% 55%  (KEEP — no p2 rule; 4:3 src = 4:3 box, position inert)
     03 .v42-fac-item:nth-of-type(3) img   -> 50% 60%  -> 50% 80%  (CHANGE)
     04 .v42-fac-item:nth-of-type(4) img   -> 50% 60%  -> 50% 78%  (CHANGE)
     05 .v42-fac-item:nth-of-type(5) img   -> 50% 55%  (KEEP — no p2 rule; 4:3 src = 4:3 box, position inert)
   NOTE: home-v42.css:630 (.v42-fac-item img {object-position:50%55%}, 0,1,1) is
   LOWER specificity, so it does NOT win on mobile; p1 (0,2,1) is the real
   current value (verified via getComputedStyle on live DOM: 03=60%, 04=60%).
   p2 re-declares 03/04 with EQUAL (0,2,1) specificity and later source
   order => wins, with NO !important (verified: computed becomes 80% / 78%).
   02/05 are NOT given a position override: their source aspect ratio equals
   the 4:3 box, so cover produces zero crop and object-position is inert. */
@media (max-width: 767px) {
  /* 01 Production Line — OP60 crop fix (GO-LIVE 2026-09-30).
     ROOT CAUSE: p0-mobile-fix.css:291 `img { max-width:100% !important; height:auto !important }`
     overrides home-v42's non-important height:100%, so the img box renders at its
     NATURAL portrait ratio and overflows the 16:9 figure (overflow:hidden => top hard-crop
     => the top ~42% of the source = ceiling/lights is permanently shown, and object-position
     is inert). FIX: restore the cover box with height:100% !important (specificity 0,2,1
     beats p0's 0,1,1), then move the focal point to 50% 60% so workers + production table +
     product trays become the first visual subject. NO effect on desktop (>767px) — the
     media query scopes this, so p0's natural-height rule still governs there. */
  .v42-fac-item.v42-large img {
    height: 100% !important;       /* [!imp-justified] override p0:291 global img{height:auto!important} */
    object-position: 50% 60%;
  }
  .v42-fac-item:nth-of-type(3) img { object-position: 50% 80%; }
  .v42-fac-item:nth-of-type(4) img { object-position: 50% 78%; }
}

/* ---------- 4. BOTTOM BAR LABEL TEXT — readability floor (NO !important) ----------
   OLD rule (override target):
     main.css:3996  .mobile-contact-btn span { font-size: 0.7rem; }  (0,1,1) NO !important
   0.7rem = 11.2px. Raise to 12px. Equal specificity (0,1,1), p2 later
   source => wins. NO !important. Verified on live DOM: 11.2px -> 12px.
   (Bottom-bar clearance itself is ALREADY solved by p0-mobile-fix.css:560
   `body { padding-bottom: 72px !important; }` — no p2 rule added.) */
@media (max-width: 768px) {
  .mobile-contact-btn span { font-size: 12px; }
}

/* ============================================================
   5. [2026-10-01 · APPROVED + DEPLOYED] Production Line big cell —
      mobile reuses the DESKTOP composition, proportional down-scale ONLY.
      Sign-off: GPT + 于姐 visual acceptance 2026-10-01.
      Scope: homepage mobile, media <=768px, ONLY `.v42-fac-item.v42-large`
             (the Production Line photo). No other factory cell, no desktop.

      - frame ratio 560/460 == the desktop big-cell ratio, measured on the
        live desktop page (desktop cell = 560 x 460). The mobile cell is that
        same desktop frame scaled to the mobile column width (354/560 = 0.632)
        -> no new crop frame is introduced.
      - object-position 50% 70% is the EXACT value live on desktop today
        (measured: desktop big <img> computed objectPosition = "50% 70%").
        It overrides the 50% 60% value set in section 3 above, which pushed
        the visible window back to the ceiling band on mobile.
      Result (measured on the live DOM): visible source band
             desktop y 459..1509  /  mobile y 459..1509, centre 984 both.
      Two blue-suited workers + the line + the right-hand equipment stay in
      frame exactly as on desktop; no ceiling-dominant framing.
   ============================================================ */
@media (max-width: 768px) {
  .v42-fac-item.v42-large { aspect-ratio: 560 / 460; }
  .v42-fac-item.v42-large img { object-position: 50% 70% !important; }
}