/*
Theme Name: Feiqi Food Packaging
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Description: Feiqi B2B food packaging website, adapted from the previous AI website.
Text Domain: feiqi
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');



:root { --background: 46 38% 96%; --foreground: 153 32% 15%; --primary: 155 47% 20%; --primary-foreground: 0 0% 100%; --secondary: 99 22% 87%; --muted: 103 20% 90%; --muted-foreground: 153 13% 42%; --border: 120 12% 80%; --ring: 155 47% 20%; --radius: 1rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f8f7f0; color: #193d2f; font-family: 'DM Sans', sans-serif; overflow-x: clip; }
a { text-decoration: none; color: inherit; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: #b9cfac; color: #163c2d; }
.site-header { background: #f8f7f0; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #e1e7da; }
.header-inner { max-width: 1500px; height: 100px; margin: auto; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-mark { width: 43px; height: 43px; background: #24563f; border-radius: 12px; color: white; display: grid; place-items: center; font: 800 27px 'Manrope',sans-serif; letter-spacing: -.1em; padding-right: 5px; }
.brand-mark span { color: #bbd4a7; }
.brand-name { font: 800 clamp(22px,1.9vw,28px) 'Manrope',sans-serif; letter-spacing: -.045em; line-height: 1; }
.brand-name small { display: block; font: 700 clamp(9px,.72vw,11px) 'Manrope',sans-serif; letter-spacing: .16em; margin-top: 6px; }
.navigation { display: flex; align-items: center; gap: clamp(13px,2vw,32px); }
.navigation a { font-size: clamp(13px,1.1vw,16px); font-weight: 700; white-space: nowrap; color: #4e6859; transition: color .2s; }
.navigation a:hover,.navigation a.active { color: #153c2c; }
.header-quote,.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 7px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.header-quote { padding: 17px 22px; background: #255740; color: white; white-space: nowrap; font-size: clamp(14px,1.1vw,17px); font-weight: 800; }
.header-quote:hover,.button:hover { transform: translateY(-2px); }
.menu-toggle,.mobile-contact { display: none; }
.button { padding: 17px 24px; min-height: 52px; border: 0; }
.button-green { background: #24563f; color: white; }
.button-green:hover { background: #173e2d; }
.button-cream { background: #f5f3e9; color: #1d4934; }
.text-link { display: inline-flex; align-items: center; gap: 15px; font-size: 13px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #50745a; font: 800 10px 'Manrope',sans-serif; letter-spacing: .18em; }
.eyebrow.light { color: #bcd5ba; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #6c9a68; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: 'Manrope',sans-serif; letter-spacing: -.055em; }
h1 { font-weight: 700; } h2 { font-weight: 700; }
em { font-style: normal; color: #7e9f79; }
.hero { min-height: min(760px,calc(100dvh - 86px)); display: grid; grid-template-columns: 55% 45%; background: #f8f7f0; }
.hero-copy { padding: clamp(80px,9vw,150px) 8% 35px 9%; display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { font-size: clamp(48px,5.4vw,88px); line-height: 1.06; margin: 32px 0 25px; max-width: 840px; }
.hero-copy > p { max-width: 500px; font-size: 16px; line-height: 1.75; color: #647569; }
.hero-actions { display: flex; align-items: center; gap: 35px; margin-top: 24px; flex-wrap: wrap; }
.hero-foot { margin-top: auto; padding-top: 70px; width: 100%; display: flex; justify-content: space-between; color: #8b9c8e; font: 700 10px 'Manrope',sans-serif; letter-spacing: .13em; }
.hero-visual { background: #e2e9d8; min-height: 650px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-image { width: 78%; aspect-ratio: 1; background: white; padding: 10px; border-radius: 49% 49% 10px 10px; box-shadow: 18px 20px 0 #c8d6bb; overflow: hidden; transform: rotate(-3deg); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 49% 49% 5px 5px; }
.hero-image-caption { position: absolute; bottom: 7%; left: 6%; background: #f8f7f0; padding: 20px 22px; width: 240px; display: grid; grid-template-columns: 1fr auto; box-shadow: 8px 8px 0 #a7bea0; }
.hero-image-caption span { grid-column: 1/-1; color: #738876; font: 700 9px 'Manrope',sans-serif; letter-spacing: .15em; margin-bottom: 8px; }
.hero-image-caption strong { font: 700 16px/1.3 'Manrope',sans-serif; letter-spacing: -.04em; }
.hero-image-caption a { align-self: end; }
.vertical-label { position: absolute; right: 18px; top: 35%; writing-mode: vertical-rl; font: 700 10px 'Manrope',sans-serif; letter-spacing: .2em; color: #58735f; }
.section-pad { padding: 110px max(5%,calc((100% - 1360px)/2)); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; }
.section-heading h2 { font-size: clamp(38px,4vw,62px); line-height: 1.1; margin: 16px 0 0; }
.section-heading p { max-width: 380px; line-height: 1.7; color: #647569; margin: 0; }
.collection { background: #fff; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.product-card { display: block; min-width: 0; }
.product-photo { background: #eef1e8; aspect-ratio: 1.1; border-radius: 12px; overflow: hidden; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover img { transform: scale(1.035); }
.product-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 19px; color: #7e9a82; font: 800 10px 'Manrope',sans-serif; letter-spacing: .12em; }
.product-card h3 { font-size: 22px; margin: 8px 0 8px; }
.product-card p { font-size: 13px; line-height: 1.6; color: #65766b; }
.collection-link { margin-top: 42px; }
.story { display: grid; grid-template-columns: 30% 70%; background: #ebf0e4; }
.story-rail { display: flex; flex-direction: column; justify-content: space-between; color: #8b9c8e; font: 700 10px 'Manrope',sans-serif; letter-spacing: .13em; }
.story-main h2 { font-size: clamp(38px,5vw,76px); line-height: 1.12; max-width: 880px; margin-bottom: 75px; }
.story-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; border-top: 1px solid #b8cbb6; padding-top: 32px; }
.story-bottom p { max-width: 520px; line-height: 1.8; color: #506757; }
.round-arrow { width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid #24563f; border-radius: 50%; flex-shrink: 0; }
.proof { background: #24563f; color: white; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.proof h2 { font-size: clamp(40px,4vw,65px); line-height: 1.12; margin: 25px 0 40px; }
.proof-stats { display: grid; grid-template-columns: repeat(3,1fr); align-content: center; gap: 25px; }
.proof-stats div { border-top: 1px solid #789c82; padding-top: 20px; }
.proof-stats strong { display: block; font: 700 clamp(38px,4vw,58px) 'Manrope',sans-serif; letter-spacing: -.08em; }
.proof-stats span { font-size: 12px; color: #d5e2d4; }
.proof-stats p { grid-column: 1/-1; color: #d5e2d4; font-size: 12px; line-height: 1.7; }
.page-intro { background: #e8efe2; padding-top: 105px; padding-bottom: 105px; }
.page-intro h1 { font-size: clamp(50px,6vw,90px); line-height: 1.07; max-width: 920px; margin: 25px 0; }
.page-intro p { font-size: 17px; line-height: 1.7; max-width: 650px; color: #556b59; }
.all-products { background: white; }
.all-product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 55px 20px; }
.all-product-grid .product-photo { aspect-ratio: 1; }
.image-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #65816a; background: repeating-linear-gradient(135deg,#ecf0e8,#ecf0e8 12px,#e5ebdf 12px,#e5ebdf 13px); }
.image-placeholder span { font: 800 10px 'Manrope',sans-serif; letter-spacing: .15em; }
.image-placeholder p { font-size: 13px; margin: 12px 0 0; }
.inline-link { font-size: 12px; font-weight: 700; border-bottom: 1px solid #255740; padding-bottom: 5px; }
.detail-section { display: grid; grid-template-columns: 30% 70%; background: white; }
.detail-label { color: #709073; font: 800 11px 'Manrope',sans-serif; letter-spacing: .15em; }
.detail-section h2 { font-size: clamp(38px,4vw,65px); line-height: 1.1; max-width: 720px; }
.detail-section p { max-width: 650px; color: #647569; line-height: 1.8; font-size: 16px; }
.step-list { margin: 45px 0; border-top: 1px solid #d7e0d3; }
.step-list span { display: flex; gap: 35px; padding: 20px 0; border-bottom: 1px solid #d7e0d3; color: #729078; font-size: 13px; }
.step-list strong { color: #24563f; font-size: 18px; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 35px; }
.fact-grid div { background: #edf2e8; padding: 25px; border-radius: 12px; }
.fact-grid strong { display: block; font: 700 36px 'Manrope',sans-serif; letter-spacing: -.06em; }
.fact-grid span { color: #647569; font-size: 13px; }
.end-cta { background: #e6eddf; }
.end-cta h2 { font-size: clamp(40px,5vw,75px); line-height: 1.1; margin: 20px 0 35px; }
.end-cta > div { display: flex; gap: 35px; align-items: center; flex-wrap: wrap; }
.contact-layout { display: grid; grid-template-columns: 32% 1fr; gap: 8%; background: white; }
.contact-layout aside h2 { font-size: 40px; line-height: 1.15; margin: 20px 0; }
.contact-layout aside p { color: #687c6c; line-height: 1.75; }
.contact-aside-link { border-top: 1px solid #d5dfd0; border-bottom: 1px solid #d5dfd0; padding: 22px 0; display: flex; justify-content: space-between; gap: 15px; font-size: 13px; }
.contact-aside-link a { display: inline-flex; gap: 8px; font-weight: 700; }
.muted-note { font-size: 12px; margin-top: 24px; }
.inquiry-form { background: #f3f5ed; border-radius: 16px; padding: clamp(24px,4vw,55px); }
.form-heading h2 { font-size: 35px; margin: 10px 0; }
.form-heading p { color: #718173; font-size: 13px; margin-bottom: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; font-size: 12px; font-weight: 700; }
.field input,.field select,.field textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: white; border: 1px solid #d4dfd1; border-radius: 6px; color: #24563f; outline: none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: #24563f; box-shadow: 0 0 0 3px #bcd3b4; }
.field input[type=file] { padding: 10px; }
.field small { color: #718173; font-weight: 400; }
.field textarea { resize: vertical; }
.submit-button:disabled { opacity: .6; cursor: wait; }
.form-success,.form-error { margin: 20px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.form-error { color: #a33232; }
.site-footer { background: #173d2c; color: #fff; padding: 90px 5% 28px; }
.footer-top { max-width: 1360px; margin: auto; display: flex; justify-content: space-between; gap: 50px; padding-bottom: 85px; }
.footer-top h2 { font-size: clamp(40px,5vw,70px); line-height: 1.1; margin: 25px 0 35px; }
.footer-links { min-width: 230px; display: flex; flex-direction: column; gap: 13px; }
.footer-links span { color: #adc6ab; font: 800 10px 'Manrope',sans-serif; letter-spacing: .15em; margin-bottom: 10px; }
.footer-links a { font-size: 13px; color: #d3e1d2; }
.footer-links a:hover { color: white; }
.footer-bottom { max-width: 1360px; margin: auto; border-top: 1px solid #50715a; padding-top: 25px; display: flex; justify-content: space-between; gap: 20px; color: #adc6ab; font-size: 11px; }
@media (max-width: 1100px) { .navigation { gap: 12px; } .navigation a { font-size: 10px; } .header-quote { font-size: 11px; padding: 12px; } .all-product-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 800px) { .header-inner { height: 72px; } .navigation { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #f8f7f0; padding: 20px 5% 30px; flex-direction: column; align-items: stretch; box-shadow: 0 15px 20px #143c2b22; } .navigation.open { display: flex; } .navigation a { font-size: 15px; padding: 10px 0; } .mobile-contact { display: block; } .menu-toggle { display: grid; place-items: center; border: 0; background: none; color: #24563f; width: 44px; height: 44px; } .header-quote { margin-left: auto; } .hero { grid-template-columns: 1fr; } .hero-copy { padding: 75px 6% 40px; min-height: 580px; } .hero-visual { min-height: 560px; } .hero-image { max-width: 500px; } .section-pad { padding: 80px 6%; } .story,.detail-section { grid-template-columns: 1fr; gap: 40px; } .story-rail { gap: 15px; } .proof { gap: 35px; } .contact-layout { grid-template-columns: 1fr; gap: 45px; } }
@media (max-width: 600px) { .header-quote { display: none; } .hero h1 { font-size: clamp(43px,10vw,62px); } .hero-copy { min-height: 620px; } .hero-visual { min-height: 440px; } .hero-image { width: 75%; } .hero-image-caption { bottom: 5%; width: 205px; } .section-heading { display: block; } .section-heading p { margin-top: 20px; } .product-grid,.all-product-grid { grid-template-columns: 1fr 1fr; gap: 30px 14px; } .product-card h3 { font-size: 17px; } .product-card p { font-size: 12px; } .product-meta { font-size: 9px; } .proof { grid-template-columns: 1fr; } .proof-stats { gap: 10px; } .proof-stats strong { font-size: 36px; } .footer-top { flex-direction: column; gap: 65px; } .footer-bottom { flex-direction: column; } .form-grid { grid-template-columns: 1fr; gap: 0; } .fact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .product-grid,.all-product-grid { grid-template-columns: 1fr; } .hero-actions { gap: 22px; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.hero-visual{min-height:700px}.hero-image{aspect-ratio:1/1.08}.hero-image img{object-position:center 58%}.product-photo img{object-fit:contain;background:#f3f2ed}.product-photo.pp-tray img{object-fit:cover;object-position:center 63%;height:115%;margin-top:-7%}.factory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.factory-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.factory-grid h3{font-size:20px;margin:15px 0 8px}.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.cert-card{background:#f1f4eb;border-radius:12px;padding:25px}.cert-card img{width:100%;height:280px;object-fit:contain;background:white}.cert-card h3{font-size:20px;margin:20px 0 10px}.cert-card p{font-size:13px;line-height:1.7;color:#647569}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:50px}.process-grid article{border-top:1px solid #b8cbb6;padding-top:25px}.process-grid span{font-size:12px;color:#779774}.process-grid h3{font-size:24px;margin:20px 0 12px}.process-grid p{font-size:14px;line-height:1.8;color:#647569}.hero-foot{gap:12px}.skip-link{position:absolute;left:20px;top:-80px;background:#fff;padding:15px;z-index:100}.skip-link:focus{top:10px}a:focus-visible,button:focus-visible{outline:3px solid #83a277;outline-offset:5px}.notice{padding:20px;background:#e3ecd9;border-radius:8px;margin-bottom:25px}.notice.error{background:#fae8e4;color:#943b27}.entry-content{line-height:1.8}.entry-content img{max-width:100%;height:auto}.privacy-note{font-size:12px;color:#647569;line-height:1.7}.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.section-pad h2{overflow-wrap:break-word}.cert-grid a{display:inline-block;margin-top:10px}.facts-photo{width:100%;border-radius:14px;margin-bottom:30px}.empty-state{padding:30px;background:#edf2e8}.product-card{scroll-margin-top:120px}.gallery-note{font-size:12px;color:#65766b}.header-inner{height:92px}.navigation a{font-size:13px}.site-header{position:relative}.admin-bar .site-header{top:0}.hero-copy{padding-top:100px}.page-intro h1{max-width:1050px}.proof-stats span{display:block}.logo-text{font-weight:800;font-size:25px;line-height:1.1;letter-spacing:-1px}.logo-text small{display:block;font-size:10px;letter-spacing:2px;margin-top:6px}figure{margin:0} @media(max-width:800px){.factory-grid,.cert-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.hero-visual{min-height:560px}.hero-copy{padding-top:70px}.navigation{top:92px}.header-inner{height:92px}.proof{grid-template-columns:1fr}.hero{min-height:initial}} @media(max-width:600px){.factory-grid,.cert-grid,.process-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.hero-copy{min-height:initial}.hero-visual{min-height:480px}.hero-image{width:78%}.hero-foot{padding-top:45px}.section-pad{padding:64px 6%}.hero-image-caption{width:205px}.header-inner{height:76px}.navigation{top:76px}.hero h1{font-size:48px}.proof-stats{grid-template-columns:repeat(3,1fr)}.cert-card img{height:350px}}