/* ==========================================================================
   HEYUAN PET — V4.2 Home candidate styles (SCOPED, v42- prefix)
   --------------------------------------------------------------------------
   These styles belong ONLY to front-page-v42-candidate.php.
   They are intentionally prefixed with `v42-` so they never collide with the
   production theme CSS (main.min.css / p0-mobile-fix.css / local-fonts.css),
   which are NOT modified (instruction §10).

   Mobile rule (instruction §10 / §12): S2 category + product grids collapse
   to a SINGLE column on phones. No multi-column on <600px.
   ========================================================================== */

:root{
  --v42-beige:#F5F1E8;
  --v42-green:#2F6B45;
  --v42-green-d:#27583a;
  --v42-gold:#C89B3C;
  --v42-gold-d:#b78a2f;
  --v42-ink:#2A2A28;
  --v42-muted:#6B6B66;
  --v42-card:#FFFFFF;
  --v42-radius:16px;
  --v42-radius-sm:14px;
  --v42-hair:1px solid #e7e0d2;
  --v42-shadow:0 1px 2px rgba(0,0,0,.04);
}

.v42-hero,
.v42-section{
  max-width:1200px;
  margin:0 auto;
  padding:80px 24px;
  box-sizing:border-box;
}
.v42-hero{
  padding:56px 24px 24px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-areas:
    "top media"
    "bottom media";
  gap:24px 48px;
  align-items:center;
}
.v42-hero-top{ grid-area:top; }
.v42-hero-bottom{ grid-area:bottom; }
.v42-hero-media{ grid-area:media; align-self:center; }
.v42-eyebrow{
  color:var(--v42-gold);
  font-weight:700;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.v42-h2{
  font-size:34px;
  font-weight:700;
  margin-bottom:10px;
  line-height:1.22;
}
.v42-sub{
  color:var(--v42-muted);
  font-size:16px;
  margin-bottom:36px;
  max-width:680px;
  line-height:1.6;
}

/* ---------- S1 HERO ---------- */
.v42-hero-eyebrow{
  color:var(--v42-gold);
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  margin-bottom:14px;
}
.v42-hero-h1{
  font-size:46px;
  line-height:1.18;
  font-weight:700;
  margin-bottom:18px;
}
.v42-hero-body{
  font-size:17px;
  color:#44443f;
  margin-bottom:20px;
  max-width:540px;
  line-height:1.6;
}
.v42-hero-params{
  display:inline-block;
  background:#fff;
  border:var(--v42-hair);
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  font-size:14px;
  color:var(--v42-green);
  margin-bottom:18px;
}
.v42-hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.v42-hero-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  max-height:470px;
}
.v42-hero-img{
  position:relative;
  border-radius:var(--v42-radius-sm);
  overflow:hidden;
  box-shadow:var(--v42-shadow);
  background:#e9e3d6;
  height:215px;
  display:flex;
  flex-direction:column;
}
.v42-hero-img img{
  width:100%;
  height:100%;
  flex:1 1 auto;
  min-height:0;
  object-fit:cover;
  display:block;
}
/* Product-name label on hero images: unified green badge.
   - White 14px / 600, consistent across languages
   - HEYUAN PET main-green background
   - Fixed min-height so 1-line and 2-line labels share same height rule
   - Fixed border-radius (not pill) so corner radius is identical regardless of content
   - Max-width prevents over-wide labels; left-bottom position identical on all 4 images */
.v42-hero-img .v42-tag{
  position:static;
  background:var(--v42-green);
  color:#fff;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  padding:7px 10px;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  margin:0;
  border-radius:0 0 var(--v42-radius-sm) var(--v42-radius-sm);
}

/* ---------- S2 categories + products ---------- */
.v42-cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:56px;
}
.v42-cat-card{
  border-radius:var(--v42-radius);
  overflow:hidden;
  background:var(--v42-card);
  border:var(--v42-hair);
  box-shadow:var(--v42-shadow);
  display:flex;
  flex-direction:column;
  transition:.15s;
  text-decoration:none;
  color:inherit;
}
.v42-cat-card img{
  width:100%;
  height:auto;
  aspect-ratio:1024/742;
  object-fit:cover;
}
.v42-cat-body{
  padding:18px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.v42-cat-body h3{
  font-size:21px;
  font-weight:600;
  margin-bottom:4px;
  line-height:1.22;
}
.v42-cat-count{
  color:var(--v42-green);
  font-weight:700;
  font-size:13px;
  margin-bottom:8px;
}
.v42-cat-desc{
  color:var(--v42-muted);
  font-size:14px;
  margin-bottom:12px;
  min-height:40px;
  flex:1;
}
.v42-cat-more{
  color:var(--v42-gold);
  font-weight:700;
  font-size:14px;
}

.v42-prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.v42-prod-card{
  border-radius:var(--v42-radius);
  overflow:hidden;
  background:var(--v42-card);
  border:var(--v42-hair);
  box-shadow:var(--v42-shadow);
  display:flex;
  flex-direction:column;
  transition:.15s;
}
.v42-prod-link{
  display:flex;
  flex-direction:column;
  flex:1;
  text-decoration:none;
  color:inherit;
}
.v42-pimg{
  height:220px;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid #f0ece2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.v42-pimg img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.v42-prod-body{
  padding:10px 12px 8px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.v42-prod-code{
  color:var(--v42-gold);
  font-weight:700;
  font-size:13px;
  letter-spacing:.05em;
}
.v42-prod-name{
  font-size:17px;
  font-weight:700;
  margin:2px 0 5px;
}
.v42-prod-tag{
  display:inline-block;
  background:#eef3ee;
  color:var(--v42-green);
  font-size:13px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:6px;
}
.v42-prod-diff{
  color:var(--v42-muted);
  font-size:12px;
  line-height:1.35;
  margin-bottom:6px;
  flex:1;
}
.v42-prod-moq{
  font-size:13px;
  font-weight:700;
  color:var(--v42-ink);
}
.v42-prod-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:0 12px 10px;
  border-top:1px solid #f0ece2;
  padding-top:8px;
}
.v42-prod-actions a{
  color:var(--v42-gold);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
}
.v42-prod-actions a.v42-prod-view{
  color:var(--v42-green);
}

/* ---------- S3 OEM steps ---------- */
.v42-step-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.v42-step{
  background:var(--v42-card);
  border-radius:var(--v42-radius-sm);
  padding:22px;
  border:var(--v42-hair);
  box-shadow:var(--v42-shadow);
  border-top:3px solid var(--v42-gold);
}
.v42-step-n{
  font-size:15px;
  font-weight:800;
  color:var(--v42-green);
  margin-bottom:8px;
}
.v42-step p{
  color:var(--v42-muted);
  font-size:14px;
  line-height:1.55;
}
.v42-step-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

/* ---------- S4 quality evidence ---------- */
.v42-cert-ev{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:8px;
}
.v42-cert-ev .v42-c{
  background:#fff;
  border:var(--v42-hair);
  border-top:3px solid var(--v42-green);
  border-radius:var(--v42-radius-sm);
  padding:22px 14px;
  text-align:center;
}
.v42-cert-ev .v42-c-nm{
  font-weight:800;
  font-size:18px;
  color:var(--v42-green);
  letter-spacing:.02em;
}
.v42-cert-ev .v42-c-mn{
  font-size:13px;
  color:var(--v42-muted);
  margin-top:8px;
  line-height:1.45;
}
.v42-layer-h{
  font-size:20px;
  font-weight:700;
  margin:30px 0 6px;
  color:var(--v42-ink);
}
.v42-doc-note{
  background:var(--v42-beige);
  border:var(--v42-hair);
  border-left:4px solid var(--v42-green);
  border-radius:var(--v42-radius-sm);
  padding:18px 22px;
  margin-top:14px;
  font-size:15px;
  color:#44443f;
  line-height:1.6;
}

/* ---------- S5 production base ---------- */
.v42-stat-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin:18px 0 8px;
}
.v42-stat{
  background:var(--v42-beige);
  border-radius:var(--v42-radius-sm);
  padding:16px 10px;
  text-align:center;
  border:var(--v42-hair);
}
.v42-stat-v{
  font-size:22px;
  font-weight:800;
  color:var(--v42-green);
}
.v42-stat-k{
  font-size:13px;
  color:var(--v42-muted);
  margin-top:6px;
}
.v42-base-note{
  font-size:14px;
  color:var(--v42-muted);
  border-top:1px solid #e7e0d2;
  padding-top:14px;
  margin-top:8px;
  line-height:1.55;
}
.v42-fac-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
  margin-top:24px;
  height:460px;
}
.v42-fac-item{
  position:relative;
  background:var(--v42-card);
  border-radius:var(--v42-radius-sm);
  overflow:hidden;
  box-shadow:var(--v42-shadow);
  margin:0;
  height:100%;
}
.v42-fac-item.v42-large{
  grid-row:span 2;
  height:100%;
}
.v42-fac-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.v42-fac-item figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to top,rgba(26,26,24,.80),rgba(26,26,24,0));
  color:#fff;
  font-size:13px;
  padding:18px 14px 10px;
  text-align:left;
  font-weight:600;
  line-height:1.35;
}
.v42-flow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.v42-flow .v42-f{
  background:#fff;
  border:var(--v42-hair);
  border-radius:999px;
  padding:8px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--v42-green);
}
.v42-flow .v42-f:last-child{
  background:var(--v42-green);
  color:#fff;
  border-color:var(--v42-green);
}

/* ---------- S6 inquiry entry block ---------- */
.v42-inq-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:24px;
}
.v42-closing{
  font-size:15px;
  color:var(--v42-muted);
  text-align:center;
  margin-top:8px;
  line-height:1.6;
}

/* ---------- buttons (scoped) ---------- */
.v42-btn{
  display:inline-flex;
  align-items:center;
  padding:13px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  border:0;
  transition:.15s;
  min-height:46px;
  text-decoration:none;
}
.v42-btn-primary{
  background:var(--v42-green);
  color:#fff;
}
.v42-btn-primary:hover{
  background:var(--v42-green-d);
}
.v42-btn-outline{
  background:transparent;
  border:2px solid var(--v42-green);
  color:var(--v42-green);
}
.v42-btn-outline:hover{
  background:var(--v42-green);
  color:#fff;
}
.v42-btn-gold{
  background:var(--v42-gold);
  color:#fff;
}
.v42-btn-gold:hover{
  background:var(--v42-gold-d);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .v42-hero{
    grid-template-columns:1fr;
    grid-template-areas:"top" "media" "bottom";
    gap:20px;
  }
  .v42-cat-grid,
  .v42-prod-grid{grid-template-columns:repeat(2,1fr);}
  .v42-step-grid{grid-template-columns:repeat(2,1fr);}
  .v42-cert-ev{grid-template-columns:repeat(2,1fr);}
  .v42-stat-grid{grid-template-columns:repeat(3,1fr);}
  .v42-fac-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;}
  .v42-fac-item.v42-large{grid-column:span 2;grid-row:auto;height:auto;aspect-ratio:16/10;}
  .v42-fac-item{height:auto;aspect-ratio:4/3;}
}
@media (max-width:600px){
  :root{
    --v42-radius:14px;
    --v42-radius-sm:12px;
  }
  .v42-hero{
    display:flex;
    flex-direction:column;
    padding:34px 18px 16px;
  }
  .v42-hero-media{
    margin-top:18px;
  }
  .v42-hero-h1{font-size:30px;}
  .v42-hero-body{font-size:16px;margin-bottom:14px;}
  .v42-hero-params{margin-bottom:12px;}
  .v42-h2{font-size:26px;}
  .v42-section{padding:56px 18px;}

  /* MOBILE S2 LOCKED SINGLE COLUMN (instruction §10 / §12) */
  .v42-cat-grid,
  .v42-prod-grid,
  .v42-step-grid,
  .v42-stat-grid{grid-template-columns:1fr;}

  .v42-cert-ev{grid-template-columns:repeat(2,1fr);}
  .v42-fac-grid{grid-template-columns:1fr;}
  .v42-fac-item.v42-large{grid-column:auto;aspect-ratio:16/9;height:auto;}
  .v42-fac-item{aspect-ratio:4/3;height:auto;}
  .v42-btn{width:100%;text-align:center;}
  .v42-hero-cta{flex-direction:column;}
  .v42-hero-media{grid-template-columns:1fr 1fr;gap:10px;}
  .v42-hero-img{height:150px;}
  .v42-hero-img.extra2{display:none;}
}


/* === HEYUAN PET V4.2 DESKTOP VISUAL QUALITY PATCH — GO-LIVE 2026-09-26 === */
/* Task A: desktop hero product-label de-weight | Task B: S2 category-card image square (1/1) */
/* Desktop-only via @media (min-width: 981px); appended at EOF; mobile & other breakpoints untouched. */
@media (min-width: 981px) {
  /* ---------- Task A: Hero product-name label de-weight ---------- */
  /* Keep label overlay on desktop; reduce visual weight so product imagery
     remains the first visual focus. Use brand green at 78% opacity so the
     badge is lighter but still readable and consistent across all 4 hero
     products. Reduce font, padding, radius and min-height. */
  .v42-hero-img .v42-tag {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--v42-green) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    padding: 7px 10px !important;
    border-radius: 0 0 var(--v42-radius-sm) var(--v42-radius-sm) !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  /* ---------- Task B: S2 category-card image-zone fullness ---------- */
  /* Square crop balances the product subject within the card image area,
     making the image zone feel fuller and reducing the surrounding blank
     canvas. object-fit:cover with center positioning keeps the product
     visible; a warm neutral background blends any transparent edges. */
  .v42-cat-card img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    background-color: #f6f4ef !important;
  }
}

/* ============================================================
   V4.2 Quality Closure - INTEGRATED CANDIDATE PATCHES (desktop/base)
   Appended 2026-09-26. Minimal, additive only; does not alter other rules.
   ============================================================ */
/* Task B: category cards - cover crop to reduce decorative-frame whitespace */
.v42-cat-card img { object-fit: cover; object-position: 50% 60%; }
/* Task C: Production Line figure - desktop crop to show production floor */
.v42-fac-item img { object-fit: cover; object-position: 50% 55%; }

/* ============================================================
   V4.2 Visual Quality Round 2 — desktop Production Base per-image focal locks
   2026-09-27. Wrapped in @media (min-width:981px) so these DESKTOP-ONLY
   focal locks do NOT override the mobile media-query focal rules in
   p1-home-mobile-ux.css (home-v42.css is enqueued AFTER the mobile CSS,
   so global rules would otherwise win on mobile too).
   ============================================================ */
@media (min-width: 981px) {
.v42-fac-item.v42-large img { object-position: 50% 70%; }      /* 01 Production Line: less ceiling, more workers/action */
.v42-fac-item:nth-of-type(2) img { object-position: 50% 55%; } /* 02 Handcrafted Production: workers centered */
.v42-fac-item:nth-of-type(3) img { object-position: 50% 55%; } /* 03 Processing Equipment: full machine + gauge */
.v42-fac-item:nth-of-type(4) img { object-position: 50% 60%; } /* 04 Packaging Line: machine belt */
.v42-fac-item:nth-of-type(5) img { object-position: 50% 50%; } /* 05 Export Shipment: existing asset shows stacked cartons inside container */
}