/*
Theme Name: Fengda Machinery
Theme URI: https://yourdomain.com
Author: Fengda (Yantai) International Trade Co., Ltd.
Description: Custom theme for Fengda -- garden and agricultural machinery manufacturer. Industrial-agricultural design system (Loam / Field / Machine Amber / Steel / Canvas) built for a WooCommerce product catalog with a staff-only inquiry pipeline.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
WC requires at least: 8.0
Text Domain: fengda
*/

/* ==========================================================================
   FENGDA — Garden & Agricultural Machinery — Design System
   Palette   : Loam / Field / Machine Amber / Steel / Canvas
   Display   : "Big Shoulders Display"  (industrial nameplate character)
   Body/UI   : "IBM Plex Sans"          (technical, legible, multi-script)
   Signature : furrow-line contour pattern (tilled field / mower stripe)
   ========================================================================== */

:root{
  --loam:#2A2320;        --loam-2:#372E29;
  --field:#3F6B3B;       --field-light:#6B9B5E;   --field-pale:#E4EDDC;
  --amber:#F2A900;       --amber-dark:#C98800;
  --steel:#5C6670;       --steel-light:#8B95A0;
  --canvas:#F6F2E7;      --white:#FFFFFF;
  --ink:#211C19;         --ink-muted:#6B6058;
  --border:#E4DDC9;      --border-dark:#4A4038;
  --radius-sm:3px;       --radius:6px;
  --shadow-sm:0 2px 8px rgba(42,35,32,.10);
  --shadow:0 14px 34px rgba(42,35,32,.14);
  --display:'Big Shoulders Display', sans-serif;
  --body:'IBM Plex Sans', sans-serif;
  --container:1220px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--canvas);
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:16px;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}
input,select,textarea{font-family:inherit; font-size:1rem;}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.04; color:var(--loam); margin:0 0 .4em;
}
h1{font-size:clamp(2.6rem,6vw,5rem); font-weight:800;}
h2{font-size:clamp(1.9rem,4vw,2.7rem);}
h3{font-size:1.28rem;}
h4{font-size:1.02rem; letter-spacing:.04em;}
p{margin:0 0 1em; color:var(--ink);}
.lede{font-size:1.18rem; color:var(--ink-muted); max-width:60ch;}
small,.small{font-size:.85rem;}
.eyebrow{
  font-family:var(--display); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:.8rem; color:var(--field); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--amber); display:inline-block;}
.eyebrow.on-dark{color:var(--amber);}

/* ---------- Layout ---------- */
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--white);}
.section-dark{background:var(--loam); color:var(--white);}
.section-dark h2,.section-dark h3{color:var(--white);}
.section-dark p{color:#D8CFC2;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:.92rem; padding:15px 30px; border-radius:var(--radius-sm); border:2px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-amber{background:var(--amber); color:var(--loam);}
.btn-amber:hover{background:var(--amber-dark);}
.btn-outline-loam{border-color:var(--loam); color:var(--loam);}
.btn-outline-loam:hover{background:var(--loam); color:var(--white);}
.btn-outline-white{border-color:rgba(255,255,255,.55); color:var(--white);}
.btn-outline-white:hover{background:var(--white); color:var(--loam); border-color:var(--white);}
.btn-ghost{color:var(--field); font-weight:700; letter-spacing:.02em; text-transform:none; font-family:var(--body); padding:8px 0;}
.btn-ghost::after{content:"→"; margin-left:6px; transition:margin .15s ease;}
.btn-ghost:hover::after{margin-left:10px;}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:.8rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(246,242,231,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); transition:box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 24px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{width:38px; height:38px; flex:none;}
.logo-text{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:.02em; color:var(--loam); line-height:1;}
.logo-text small{display:block; font-family:var(--body); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.56rem; color:var(--ink-muted); margin-top:3px;}
.logo-mark-custom{width:38px; height:38px; object-fit:contain; border-radius:9px; flex:none;}
.main-nav ul{display:flex; gap:30px;}
.main-nav a{font-weight:600; font-size:.95rem; color:var(--ink); position:relative; padding:6px 0;}
.main-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--amber); transition:right .18s ease;}
.main-nav a:hover::after,.main-nav a.active::after{right:0;}
.main-nav a.active{color:var(--field);}
.header-actions{display:flex; align-items:center; gap:18px;}
.lang-switch{display:flex; align-items:center; gap:5px; font-size:.85rem; font-weight:600; color:var(--ink-muted); cursor:pointer;}
.nav-toggle{display:none; font-size:1.5rem; line-height:1; color:var(--loam);}

@media (max-width:900px){
  .main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--canvas); padding:32px 24px;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:6px;}
  .main-nav a{display:block; font-size:1.3rem; padding:14px 4px; border-bottom:1px solid var(--border);}
  .lang-switch{display:none;}
  .nav-toggle{display:block;}
  .header-actions .btn{padding:11px 18px; font-size:.8rem;}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:80px 0 150px;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-copy{max-width:640px;}
.hero h1{margin-bottom:.3em;}
.text-field{color:var(--field);}
.text-amber{color:var(--amber-dark);}
.hero-sub{font-size:1.15rem; color:var(--ink-muted); max-width:54ch; margin-bottom:34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* The "mask effect" photo panel: real photography, softly blended into the
   design system rather than dropped in as a plain rectangle -- an
   asymmetric corner (echoing the one deliberate diagonal cut below) plus a
   gradient fade the photo sits inside of. */
.hero-photo-frame{
  position:relative; border-radius:28px 28px 28px 90px; overflow:hidden;
  aspect-ratio:4/3; box-shadow:0 24px 60px rgba(42,35,32,.22); background:var(--field-pale);
}
.hero-photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-photo-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(27,67,50,0) 42%, rgba(27,67,50,.58) 100%),
    linear-gradient(100deg, rgba(27,67,50,.18), rgba(27,67,50,0) 55%);
}
.hero-photo-caption{position:absolute; left:22px; bottom:18px; color:#fff; font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;}
.hero-photo-caption small{display:block; font-family:var(--body); font-weight:500; text-transform:none; letter-spacing:0; font-size:.78rem; color:#E4EDDC; margin-top:2px;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo-frame{max-width:520px; margin:0 auto;}
}

/* ---------- Trust strip (diagonal cut — the one deliberate blade edge) ---------- */
.trust-strip{
  background:var(--loam); color:var(--white); position:relative; z-index:2;
  clip-path:polygon(0 46px, 100% 0, 100% 100%, 0 100%);
  margin-top:-70px; padding:104px 0 46px;
}
.trust-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.trust-item{text-align:center; border-left:1px solid rgba(255,255,255,.14); padding:0 12px;}
.trust-item:first-child{border-left:none;}
.trust-num{font-family:var(--display); font-weight:800; font-size:2.1rem; color:var(--amber); line-height:1;}
.trust-label{font-size:.78rem; letter-spacing:.04em; color:#D8CFC2; margin-top:6px;}
@media (max-width:900px){
  .trust-grid{grid-template-columns:repeat(2,1fr); row-gap:28px;}
  .trust-item{border-left:none; border-top:1px solid rgba(255,255,255,.14); padding-top:16px;}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-top:none;}
}

/* ---------- Cards (nameplate rivets = signature detail, used sparingly) ---------- */
.card{position:relative; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:30px;}
.card.riveted::before,.card.riveted::after{
  content:""; position:absolute; top:12px; width:6px; height:6px; border-radius:50%;
  background:var(--border); box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.card.riveted::before{left:12px;}
.card.riveted::after{right:12px;}

/* ---------- Category grid ---------- */
.category-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.category-card{transition:transform .18s ease, box-shadow .18s ease; padding:0; overflow:hidden; display:flex; flex-direction:column;}
.category-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.category-card-media{
  aspect-ratio:16/10; background:var(--field-pale); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.category-card-media img{width:100%; height:100%; object-fit:cover;}
.category-card-media .cat-icon-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:16%;}
.category-card-body{padding:22px 24px 26px;}
.category-card-body h3{margin-bottom:8px; font-size:1.2rem;}
.category-card-body p{color:var(--ink-muted); font-size:.92rem; margin-bottom:16px;}
@media (max-width:900px){.category-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.category-grid{grid-template-columns:1fr;}}

/* ---------- Product grid / cards ---------- */
.product-card{display:flex; flex-direction:column; overflow:hidden; padding:0;}
.product-card-media{
  aspect-ratio:4/3; background:var(--field-pale); display:flex; align-items:center; justify-content:center;
  padding:22px; position:relative;
}
.product-card-media .cat-icon{width:56%;}
/* Real WooCommerce product photos (via $product->get_image()) land here as
   a plain <img> -- without this rule they render at WooCommerce's default
   thumbnail size instead of filling the card, which is the main reason
   product tiles were looking small once real photos replaced the
   hand-drawn placeholder icons. object-fit:contain (not cover) so a
   product is never cropped -- letterboxed on the --field-pale background
   instead if its proportions don't exactly match the 4:3 frame. */
.product-card-media img{width:100%; height:100%; object-fit:contain;}
.badge{
  position:absolute; top:10px; left:10px; background:var(--loam); color:var(--white);
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px;
}
.badge-amber{background:var(--amber); color:var(--loam);}
.product-card-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1;}
.product-card-cat{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--field); font-weight:700; margin-bottom:7px;}
.product-card-body h3{font-size:1.22rem; margin-bottom:10px; line-height:1.2;}
.product-card-specs{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.82rem; color:var(--ink-muted); margin-bottom:18px;}
.product-card-specs strong{color:var(--ink); font-weight:600;}
.product-card-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.price-tag{font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--loam);}
.price-tag small{display:block; font-family:var(--body); font-weight:500; font-size:.68rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em;}

/* ---------- Filter bar (products page) ---------- */
.filter-bar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--border);}
.filter-pills{display:flex; gap:10px; flex-wrap:wrap;}
.filter-pill{
  padding:9px 18px; border:1.5px solid var(--border-dark); border-radius:30px; font-size:.85rem; font-weight:600;
  color:var(--ink); transition:all .15s ease;
}
.filter-pill:hover{border-color:var(--field);}
.filter-pill.active{background:var(--loam); border-color:var(--loam); color:var(--white);}
.search-box{position:relative; min-width:220px;}
.search-box input{
  width:100%; padding:10px 16px 10px 38px; border:1.5px solid var(--border-dark); border-radius:30px;
  background:var(--white); font-size:.9rem;
}
.search-box svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px;}
.results-note{font-size:.85rem; color:var(--ink-muted); margin-bottom:20px;}
.no-results{display:none; text-align:center; padding:60px 20px; color:var(--ink-muted);}
.no-results.show{display:block;}

/* ---------- Split section (About / R&D) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split-media{
  aspect-ratio:1/1; background:var(--field-pale); border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.split-media-img{width:100%; height:100%; object-fit:cover; display:block;}
.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:32px;}
.stat{border-top:2px solid var(--loam); padding-top:12px;}
.stat-num{font-family:var(--display); font-weight:800; font-size:2rem; color:var(--field); line-height:1;}
.stat-label{font-size:.82rem; color:var(--ink-muted); margin-top:4px;}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:40px;} .split-media{order:-1;}}

/* ---------- Region / global reach ---------- */
.region-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.region-card{text-align:center; padding:28px 18px;}
.region-card h4{color:var(--field); margin-bottom:8px;}
.region-card p{font-size:.86rem; color:var(--ink-muted); margin:0;}
@media (max-width:900px){.region-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--field); color:var(--white); padding:64px 0;}
.cta-banner h2{color:var(--white); font-size:clamp(1.7rem,3.4vw,2.3rem);}
.cta-banner-inner{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.cta-banner p{color:#E4EDDC; margin-bottom:0; max-width:44ch;}

/* ---------- Footer ---------- */
.site-footer{background:var(--loam); color:#D8CFC2; padding:72px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);}
.footer-col h4{color:var(--white); font-size:.82rem; letter-spacing:.1em; margin-bottom:18px;}
.footer-col p,.footer-col a{color:#B9AF9F; font-size:.92rem; line-height:1.8;}
.footer-col ul li{margin-bottom:10px;}
.footer-col a:hover{color:var(--amber);}
.footer-logo{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--white); margin-bottom:12px;}
.cert-badges{display:flex; gap:10px; margin-top:16px;}
.cert-badge{border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-sm); padding:8px 12px; font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--amber);}
.social-links{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.social-link{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); color:var(--amber); transition:all .15s ease; flex:none;
}
.social-link svg{width:18px; height:18px;}
/* Default state stays on-brand (amber on loam, matching every other footer
   accent); :hover switches to that platform's own real brand color so the
   icon is unmistakable, with the icon fill flipped for contrast against it
   ("tellable" against the new background, not just a color swap). */
.social-link:hover{transform:translateY(-2px); border-color:transparent;}
.social-link[data-brand="whatsapp"]:hover{background:#25D366; color:#fff;}
.social-link[data-brand="facebook"]:hover{background:#1877F2; color:#fff;}
.social-link[data-brand="x"]:hover{background:#000000; color:#fff;}
.social-link[data-brand="tiktok"]:hover{background:#000000; color:#fff;}
.social-link[data-brand="linkedin"]:hover{background:#0A66C2; color:#fff;}
.social-link[data-brand="email"]:hover{background:var(--amber); color:var(--loam);}
.footer-bottom{display:flex; justify-content:space-between; padding:26px 0; font-size:.8rem; color:#8A8175; flex-wrap:wrap; gap:10px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--ink-muted); flex-wrap:wrap; margin-bottom:28px;}
.breadcrumb a:hover{color:var(--field);}
.breadcrumb span{color:var(--border-dark);}

/* ---------- Product detail: gallery ---------- */
.pd-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; margin-bottom:80px;}
.gallery-main{aspect-ratio:1/1; background:var(--field-pale); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:50px; margin-bottom:14px;}
.gallery-main .cat-icon{width:60%;}
.gallery-thumbs{display:flex; gap:10px;}
.thumb{width:64px; height:64px; border-radius:var(--radius-sm); border:2px solid var(--border); background:var(--field-pale); padding:10px; transition:border-color .15s ease;}
.thumb.active{border-color:var(--field);}
.product-info .product-card-cat{margin-bottom:10px;}
.product-info h1{font-size:clamp(1.8rem,3.4vw,2.5rem); margin-bottom:10px;}
.sku-row{font-size:.85rem; color:var(--ink-muted); margin-bottom:22px;}
.sku-row strong{color:var(--ink);}
.cert-inline{display:inline-flex; align-items:center; gap:6px; background:var(--field-pale); color:var(--field); font-size:.74rem; font-weight:700; letter-spacing:.05em; padding:5px 11px; border-radius:20px; margin-bottom:22px;}
.price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--border);}
.price-row .price-tag{font-size:1.8rem;}
.spec-list{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin-bottom:30px;}
.spec-list dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:3px;}
.spec-list dd{margin:0; font-weight:600; font-family:var(--display); font-size:1.1rem; color:var(--loam);}
.qty-row{display:flex; align-items:center; gap:18px; margin-bottom:20px;}
.qty-stepper{display:flex; align-items:center; border:1.5px solid var(--border-dark); border-radius:var(--radius-sm);}
.qty-stepper button{width:38px; height:44px; font-size:1.1rem; color:var(--loam);}
.qty-stepper input{width:44px; height:44px; border:none; border-left:1.5px solid var(--border-dark); border-right:1.5px solid var(--border-dark); text-align:center; font-weight:700;}
.action-row{display:flex; gap:14px; flex-wrap:wrap;}

/* Tabs */
.tabs{margin-bottom:80px;}
.tab-buttons{display:flex; gap:6px; border-bottom:2px solid var(--border); margin-bottom:30px; overflow-x:auto;}
.tab-btn{padding:14px 22px; font-weight:700; font-size:.92rem; color:var(--ink-muted); border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap;}
.tab-btn.active{color:var(--loam); border-color:var(--amber);}
.tab-panel{display:none;}
.tab-panel.active{display:block; max-width:760px;}
.spec-table{width:100%; border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--border);}
.spec-table td{padding:14px 4px; font-size:.94rem;}
.spec-table td:first-child{color:var(--ink-muted); width:44%;}
.spec-table td:last-child{font-weight:600;}

/* ---------- Forms ---------- */
.form-group{margin-bottom:20px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
label{display:block; font-size:.82rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px;}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--border-dark); border-radius:var(--radius-sm);
  background:var(--white); color:var(--ink); transition:border-color .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--field);}
textarea{resize:vertical; min-height:120px;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:26px;}
.checkbox-row input{width:18px; height:18px; margin-top:2px; accent-color:var(--field);}
.checkbox-row label{text-transform:none; font-weight:400; font-size:.88rem; color:var(--ink-muted); letter-spacing:0;}
.field-error{color:#B5432E; font-size:.78rem; margin-top:5px; display:none;}
.form-group.invalid input,.form-group.invalid select,.form-group.invalid textarea{border-color:#B5432E;}
.form-group.invalid .field-error{display:block;}
.form-success{display:none; background:var(--field-pale); border:1.5px solid var(--field); border-radius:var(--radius); padding:32px; text-align:center;}
.form-success.show{display:block;}
.form-success.show + form{display:none;}
.form-success h3{color:var(--field); margin-bottom:8px;}
.prefill-note{background:var(--field-pale); border-left:3px solid var(--field); padding:14px 18px; font-size:.88rem; margin-bottom:26px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}

/* ---------- Contact layout ---------- */
.contact-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px;}
.info-item{display:flex; gap:14px; margin-bottom:26px;}
.info-icon{width:36px; height:36px; flex:none; border-radius:50%; background:var(--field-pale); display:flex; align-items:center; justify-content:center;}
.info-item h4{font-size:.92rem; margin-bottom:3px;}
.info-item p{font-size:.9rem; color:var(--ink-muted); margin:0;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;} .pd-grid{grid-template-columns:1fr;}}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); z-index:100;
  background:var(--loam); color:var(--white); padding:14px 26px; border-radius:30px; font-weight:600; font-size:.9rem;
  opacity:0; pointer-events:none; transition:all .25s ease; display:flex; align-items:center; gap:10px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
.reveal.visible{opacity:1; transform:none;}

/* ---------- Page banner (products/contact) ---------- */
.page-banner{background:var(--loam); color:var(--white); padding:64px 0 54px; position:relative; overflow:hidden;}
.page-banner .eyebrow{color:var(--amber);}
.page-banner h1{color:var(--white); font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:8px;}
.page-banner p{color:#D8CFC2; max-width:56ch; margin:0;}

/* ---------- Related products spacing ---------- */
.related h2{margin-bottom:30px;}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.text-muted{color:var(--ink-muted);}

/* ==========================================================================
   Lead-capture pop-up (public site, all pages)
   ========================================================================== */
.lead-popup-overlay{
  position:fixed; inset:0; background:rgba(42,35,32,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lead-popup-overlay.show{opacity:1; pointer-events:auto;}
.lead-popup{
  background:var(--canvas); border-radius:var(--radius); padding:36px; max-width:400px; width:100%;
  position:relative; box-shadow:var(--shadow); transform:translateY(14px); transition:transform .25s ease;
}
.lead-popup-overlay.show .lead-popup{transform:translateY(0);}
.lead-popup-close{position:absolute; top:12px; right:14px; font-size:1.5rem; color:var(--ink-muted); line-height:1; width:34px; height:34px;}
.lead-popup-close:hover{color:var(--loam);}
.lead-popup-success{text-align:center; padding:14px 0;}
.lead-popup-success h3{color:var(--field);}

/* ==========================================================================
   Testimonials (homepage)
   ========================================================================== */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.star-row{display:flex; gap:2px; margin-bottom:14px;}
.testimonial-quote{font-size:.98rem; color:var(--ink); line-height:1.7; margin-bottom:16px;}
.testimonial-attribution{font-size:.78rem; font-weight:700; color:var(--field); text-transform:uppercase; letter-spacing:.04em; margin:0;}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Admin panel (separate shell — no public header/footer, not linked from
   the front end; open admin.html directly)
   ========================================================================== */
.admin-login{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--loam); padding:24px;}
.admin-login-card{background:var(--white); border-radius:var(--radius); padding:40px; max-width:360px; width:100%; box-shadow:var(--shadow);}
.admin-login-logo{font-family:var(--display); font-weight:800; font-size:1.6rem; margin-bottom:10px; color:var(--loam);}
.admin-login-logo span{color:var(--amber);}
.admin-login-card .small{margin-bottom:24px; display:block; line-height:1.6;}

.admin-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh;}
.admin-sidebar{background:var(--loam); color:#D8CFC2; padding:26px 18px; display:flex; flex-direction:column;}
.admin-sidebar-logo{font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--white); margin-bottom:28px; padding:0 8px;}
.admin-sidebar-logo span{color:var(--amber);}
.admin-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.admin-nav-item{text-align:left; padding:11px 14px; border-radius:var(--radius-sm); font-weight:600; font-size:.9rem; color:#D8CFC2; width:100%;}
.admin-nav-item:hover{background:rgba(255,255,255,.07);}
.admin-nav-item.active{background:var(--amber); color:var(--loam);}
.admin-view-site{font-size:.8rem; color:#B9AF9F; padding:16px 8px 0; border-top:1px solid rgba(255,255,255,.14); margin-top:14px;}
.admin-view-site:hover{color:var(--amber);}
.admin-main{padding:40px 44px; background:var(--canvas); overflow-x:auto;}
.admin-tab-panel{display:none;}
.admin-tab-panel.active{display:block;}
.admin-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px;}
.admin-stat-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.admin-stat-num{font-family:var(--display); font-weight:800; font-size:2rem; color:var(--field); line-height:1;}
.admin-stat-label{font-size:.8rem; color:var(--ink-muted); margin-top:6px;}
.admin-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:26px; margin-bottom:24px;}
.admin-logo-preview{width:80px; height:80px; display:flex; align-items:center; justify-content:center; background:var(--field-pale); border-radius:var(--radius); padding:14px; flex:none;}
.admin-logo-preview .logo-mark, .admin-logo-preview .logo-mark-custom{width:100%; height:100%;}
.admin-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.admin-table th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); padding:12px 16px; background:var(--field-pale); border-bottom:1px solid var(--border);}
.admin-table td{padding:13px 16px; border-bottom:1px solid var(--border); font-size:.9rem;}
.admin-table tr:last-child td{border-bottom:none;}
.tag-sample{font-size:.66rem; background:var(--field-pale); color:var(--field); padding:3px 9px; border-radius:20px; font-weight:700; letter-spacing:.03em;}
.admin-remove-link{color:#B5432E; font-size:.82rem; font-weight:600;}
@media (max-width:800px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{flex-direction:row; flex-wrap:wrap; align-items:center;}
  .admin-sidebar-logo{width:100%;}
  .admin-nav{flex-direction:row; flex-wrap:wrap;}
  .admin-view-site{border-top:none; margin-top:0;}
  .admin-main{padding:24px;}
  .admin-stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* ==========================================================================
   WooCommerce integration — restyles WooCommerce's OWN markup rather than
   replacing it, so cart/checkout/structured-data/hooks all keep working.
   Paired with woocommerce/content-product.php for the product-card markup
   itself (that file emits our .product-card classes directly).
   ========================================================================== */
.woocommerce-breadcrumb{font-size:.85rem; color:var(--ink-muted); margin-bottom:28px;}
.woocommerce-breadcrumb a:hover{color:var(--field);}

/* Archive header (result count / ordering) restyled to sit inside our filter-bar rhythm */
.woocommerce-result-count{font-size:.85rem; color:var(--ink-muted); margin:0;}
.woocommerce-ordering select{
  padding:9px 14px; border:1.5px solid var(--border-dark); border-radius:30px; font-size:.85rem; background:var(--white);
}
ul.products{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; margin:0; padding:0;}
@media (max-width:960px){ul.products{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){ul.products{grid-template-columns:1fr;}}
nav.woocommerce-pagination{margin-top:44px; text-align:center;}
nav.woocommerce-pagination ul{display:inline-flex; gap:6px; list-style:none;}
nav.woocommerce-pagination a, nav.woocommerce-pagination span{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm); font-weight:600; font-size:.85rem;
}
nav.woocommerce-pagination .current{background:var(--loam); color:var(--white); border-color:var(--loam);}

/* Single-product gallery — WooCommerce's own markup, restyled */
.woocommerce-product-gallery{margin-bottom:14px;}
.woocommerce-product-gallery__wrapper{border-radius:var(--radius); overflow:hidden; background:var(--field-pale);}
.woocommerce-product-gallery .flex-control-thumbs{display:flex; gap:10px; margin-top:10px; list-style:none; padding:0;}
.woocommerce-product-gallery .flex-control-thumbs li{width:64px; height:64px;}
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm); border:2px solid var(--border); cursor:pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--field);}

/* Price + quantity + cart-button row (relabelled via PHP to "Request a Quote") */
.summary .price{font-family:var(--display); font-weight:700; font-size:1.8rem; color:var(--loam); display:block; margin-bottom:22px;}
.summary .price ins{text-decoration:none;}
.quantity{display:inline-flex; align-items:center; border:1.5px solid var(--border-dark); border-radius:var(--radius-sm); margin-right:12px;}
.quantity .qty{width:60px; height:44px; border:none; text-align:center; font-weight:700;}
.fengda-quote-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:.92rem; padding:15px 30px; border-radius:var(--radius-sm); border:2px solid transparent;
  background:var(--amber); color:var(--loam); transition:all .15s ease;
}
.fengda-quote-btn:hover{background:var(--amber-dark); transform:translateY(-2px);}

/* Tabs (Description / Specifications-via-Additional-Information / Downloads) */
.woocommerce-tabs ul.tabs{display:flex; gap:6px; border-bottom:2px solid var(--border); margin-bottom:30px; list-style:none; padding:0; overflow-x:auto;}
.woocommerce-tabs ul.tabs li{margin:0;}
.woocommerce-tabs ul.tabs li a{
  display:block; padding:14px 22px; font-weight:700; font-size:.92rem; color:var(--ink-muted);
  border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--loam); border-color:var(--amber);}
.woocommerce-tabs .panel{max-width:760px;}
table.woocommerce-product-attributes{width:100%; border-collapse:collapse;}
table.woocommerce-product-attributes tr{border-bottom:1px solid var(--border);}
table.woocommerce-product-attributes th, table.woocommerce-product-attributes td{padding:14px 4px; font-size:.94rem; text-align:left; font-weight:400;}
table.woocommerce-product-attributes th{color:var(--ink-muted); width:44%; font-weight:400;}
table.woocommerce-product-attributes td p{margin:0; font-weight:600;}

/* Related products (WooCommerce's own block, same visual language as our grid) */
.related.products{margin-top:0;}
.related.products > h2{margin-bottom:30px;}

/* WooCommerce core notices restyled to match the design system instead of the default green/red */
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  list-style:none; padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:.92rem;
  background:var(--field-pale); border-left:3px solid var(--field); color:var(--ink);
}
.woocommerce-error{background:#FBEAE6; border-left-color:#B5432E;}