/*
 * HEYUAN PET | V4.2 Quality Patch — MOBILE CSS CANDIDATE (OFFLINE, NOT DEPLOYED)
 * ----------------------------------------------------------------------------
 * Scope: homepage mobile ONLY, @media (max-width: 767px).
 * Implements directive B / C / D / E of the POST-LAUNCH QUALITY PATCH.
 *   B. Hero product label (.v42-tag) -> plain text BELOW image (no overlay).
 *   C. Unified 18px mobile side gutter (was 16px) on all main content areas.
 *   D. Mobile type scale: H1 30 / H2 26 / Body 16 / Eyebrow 13 / CTA 16 /
 *      Hero product name 12-13.
 *   E. CTA hierarchy preserved: primary = solid green, outline = green border
 *      (already correct; no change needed, verified in preview).
 *
 * Hard constraints honoured:
 *   - NO desktop (>767px) change. NO other-page change.
 *   - NO URL / SEO / structure / functions.php change.
 *   - This file deploys AS p1-home-mobile-ux.css (replaces current mobile CSS).
 *   - Desktop label (.v42-tag absolute green badge) is NOT touched.
 */

/* ===================== S1 HERO ===================== */
@media (max-width: 767px) {
	/* C: unified 18px side gutter (was 16px) */
	body.hp-home .v42-hero{
		display: flex !important;
		flex-direction: column !important;
		padding: 34px 22px 14px !important;
		gap: 14px !important;
	}
	body.hp-home .v42-hero-top{ order: 1 !important; }
	body.hp-home .v42-hero-media{ order: 2 !important; margin-top: 2px !important; }
	body.hp-home .v42-hero-bottom{ order: 3 !important; }

	/* D: H1 30px / lh 1.16 (was clamp ~22-28px) */
	body.hp-home .v42-hero-h1{
		font-size: 30px !important;
		line-height: 1.16 !important;
		margin-bottom: 10px !important;
	}

	/* D: body 16px / lh 1.55 (was 0.9rem ~14.4px) */
	body.hp-home .v42-hero-body{
		font-size: 16px !important;
		line-height: 1.55 !important;
		margin-bottom: 12px !important;
		max-width: 100% !important;
		display: block !important;
		-webkit-line-clamp: unset !important;
		overflow: visible !important;
	}

	/* C+D: params strip stays readable (15px) */
	body.hp-home .v42-hero-params{
		font-size: 15px !important;
		padding: 8px 14px !important;
		margin-bottom: 12px !important;
		border-radius: 999px !important;
		line-height: 1.3 !important;
	}

	/* E: CTA hierarchy — primary solid green, outline green border (unchanged
	   by design). Only bump font to 16px per type scale. */
	body.hp-home .v42-hero-cta{
		gap: 8px !important;
		width: 100% !important;
	}
	body.hp-home .v42-hero-cta .v42-btn{
		width: 100% !important;
		min-height: 46px !important;
		padding: 12px 16px !important;
		font-size: 16px !important;   /* D: CTA 16-17px */
	}

	/* B: Hero product label -> plain text BELOW the image, fully unobstructed.
	   The image container stops clipping; the label flows under the picture. */
	body.hp-home .v42-hero-media{
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		max-height: none !important;
	}
	body.hp-home .v42-hero-img{
		height: auto !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
		background: transparent !important;
		box-shadow: var(--v42-shadow) !important;
	}
	body.hp-home .v42-hero-img img{
		height: 150px !important;
		object-fit: cover !important;
		border-radius: var(--v42-radius-sm) !important;
		display: block !important;
	}
	body.hp-home .v42-hero-img.extra2{
		display: none !important; /* keep the 2 locked products on mobile */
	}
	/* B: static, transparent, brand dark-green, 12-13px, 600, max 2 lines, centred */
	body.hp-home .v42-hero-img .v42-tag{
		position: static !important;
		background: transparent !important;
		color: #2F6B45 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		max-width: 100% !important;
		text-align: center !important;
		margin: 6px 0 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		min-height: 0 !important;
		left: auto !important;
		bottom: auto !important;
		display: block !important;
	}
}

/* Extra-small phones: keep H1 >=30px (do NOT drop below type-scale min) */
@media (max-width: 380px) {
	body.hp-home .v42-hero-h1{ font-size: 30px !important; }
	body.hp-home .v42-hero-img{ height: auto !important; }
	body.hp-home .v42-hero-img img{ height: 140px !important; }
}

/* ===================== S2 CATEGORIES + PRODUCTS ===================== */
@media (max-width: 767px) {
	/* C: unified 18px side gutter */
	body.hp-home .v42-section{
		padding: 44px 22px !important;
	}

	/* D: H2 26px / lh 1.25 (was 1.35rem ~21.6px) */
	body.hp-home .v42-h2{
		font-size: 26px !important;
		line-height: 1.25 !important;
		margin-bottom: 6px !important;
	}
	/* D: section subtitle 16px (was 0.85rem) */
	body.hp-home .v42-sub{
		font-size: 16px !important;
		line-height: 1.55 !important;
		margin-bottom: 20px !important;
	}

	body.hp-home .v42-cat-grid{
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		margin-bottom: 34px !important;
	}
	body.hp-home .v42-cat-card{
		flex-direction: row !important;
		align-items: stretch !important;
	}
	body.hp-home .v42-cat-card > img{
		width: 38% !important;
		max-width: 140px !important;
		height: auto !important;
		aspect-ratio: 1024 / 742 !important;
		object-fit: cover !important;
	}
	body.hp-home .v42-cat-body{
		padding: 12px 14px !important;
		gap: 2px !important;
	}
	body.hp-home .v42-cat-body h3{
		font-size: 1.02rem !important;
		margin-bottom: 2px !important;
		line-height: 1.2 !important;
	}
	body.hp-home .v42-cat-count{
		font-size: 0.8rem !important;
		margin-bottom: 4px !important;
	}
	/* D: card description 16px (was 0.76rem) — 2-line clamp keeps height tight */
	body.hp-home .v42-cat-desc{
		font-size: 15px !important;
		line-height: 1.4 !important;
		margin-bottom: 6px !important;
		min-height: 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}
	body.hp-home .v42-cat-more{
		font-size: 0.85rem !important;
	}

	body.hp-home .v42-prod-grid{
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	body.hp-home .v42-pimg{
		height: 160px !important;
		padding: 8px !important;
	}
	body.hp-home .v42-prod-body{
		padding: 10px 12px 8px !important;
	}
	/* D: product name 17px, diff 15px (within body scale) */
	body.hp-home .v42-prod-name{ font-size: 17px !important; }
	body.hp-home .v42-prod-diff{
		font-size: 15px !important;
		line-height: 1.4 !important;
		margin-bottom: 6px !important;
	}
	body.hp-home .v42-prod-actions a{ font-size: 14px !important; }
}

/* ===================== S3 / S4 / S5 / S6 type-scale (mobile) ===================== */
@media (max-width: 767px) {
	/* D: step / cert / stat / flow text readable at 15-16px */
	body.hp-home .v42-step p{ font-size: 15px !important; line-height: 1.5 !important; }
	body.hp-home .v42-step-n{ font-size: 15px !important; }
	body.hp-home .v42-c-mn{ font-size: 14px !important; }
	body.hp-home .v42-layer-h{ font-size: 20px !important; line-height: 1.25 !important; }
	body.hp-home .v42-base-note{ font-size: 16px !important; line-height: 1.55 !important; }
	body.hp-home .v42-flow .v42-f{ font-size: 14px !important; }
	body.hp-home .v42-closing{ font-size: 16px !important; line-height: 1.6 !important; }
	body.hp-home .v42-doc-note{ font-size: 15px !important; line-height: 1.6 !important; }
	/* E: all section CTAs 16px */
	body.hp-home .v42-btn{ font-size: 16px !important; }
	body.hp-home .v42-step-cta .v42-btn,
	body.hp-home .v42-inq-cta .v42-btn{ font-size: 16px !important; }
}

/* ===================== FLOATING WHATSAPP vs BOTTOM BAR ===================== */
@media (max-width: 767px) {
	.hp-home .whatsapp-float-desktop{
		display: none !important;
		visibility: hidden !important;
	}
}

/* ============================================================
   V4.2 Quality Closure - INTEGRATED CANDIDATE PATCHES (mobile)
   Appended 2026-09-26. Minimal, additive only; scoped to homepage mobile.
   ============================================================ */
/* Task C: Production Line figure - mobile crop to show production floor (not ceiling) */
@media (max-width: 767px) {
  /* Per-image focal-point lock: People > Product/Equipment > Background */
  .v42-fac-item.v42-large img { object-fit: cover; object-position: 50% 75%; }       /* 01 Production Line: less ceiling, more workers/floor action */
  .v42-fac-item:nth-of-type(2) img { object-fit: cover; object-position: 50% 55%; }  /* 02 Handcrafted Production: workers centered */
  .v42-fac-item:nth-of-type(3) img { object-fit: cover; object-position: 50% 60%; }  /* 03 Processing Equipment: full machine + gauge */
  .v42-fac-item:nth-of-type(4) img { object-fit: cover; object-position: 50% 60%; }  /* 04 Packaging Line: machine belt */
  .v42-fac-item:nth-of-type(5) img { object-fit: cover; object-position: 50% 55%; }  /* 05 Export Shipment: existing asset, stacked cartons inside container */
}
/* Task D: 8 representative products - minor mobile rhythm tightening */
@media (max-width: 767px) {
  .v42-prod-grid { gap: 16px; }
  .v42-prod-card { padding: 0; }
  .v42-prod-body { padding: 12px 14px 16px; }
}

/* ============================================================
   V4.2 Visual Quality Round 2 — RU/CN long-word overflow protection
   2026-09-27. overflow-wrap: break-word only breaks when a word
   actually overflows its container; normal words stay intact.
   ============================================================ */
@media (max-width: 767px) {
  body.hp-home .v42-hero-h1,
  body.hp-home .v42-hero-body,
  body.hp-home .v42-h2,
  body.hp-home .v42-sub,
  body.hp-home .v42-step-n,
  body.hp-home .v42-step p,
  body.hp-home .v42-cat-body h3,
  body.hp-home .v42-cat-desc,
  body.hp-home .v42-prod-name,
  body.hp-home .v42-prod-diff,
  body.hp-home .v42-prod-moq,
  body.hp-home .v42-btn {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}