/*
Theme Name: WCY Bagasse
Theme URI: https://we-care-you.com
Description: Lightweight custom theme for WCY compostable bagasse tableware B2B site. Presentation only; product data in companion plugin wcy-products.
Version: 1.3.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Author: WCY / built with build-b2b-wordpress-site skill
License: GPL-2.0-or-later
Text Domain: wcy
*/

:root {
  /* WCY 配色 — Pantone 方案（提亮+暖调版）
     7527 C 燕麦 #FAF4EA(暖奶油) = 主背景（天然未漂白浆料质感，温暖明亮）
     563 C 鼠尾草绿 #7EB3A6 = 品牌色（导航/Logo/环保图标/数据条）
     433 C 深炭灰 #1D252D = 正文/CTA（替代纯黑）
     点缀色：暖棕 #C9A24B 仅用于 CTA 与关键数据 */
  --forest:#7EB3A6; --forest-700:#67988B; --fresh:#C9A24B; --fresh-100:#F3EDE1;
  --tan:#C9A24B; --cream:#FAF4EA; --paper:#FFFDF8; --ink:#1D252D; --muted:#6F6A5E;
  --line:#E8DDCC; --accent:var(--fresh);
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --fs-display:clamp(2rem,4vw,3.25rem); --fs-h1:clamp(1.75rem,3vw,2.5rem);
  --fs-h2:clamp(1.4rem,2.2vw,2rem); --fs-h3:1.2rem; --fs-body:1rem; --fs-label:.82rem; --fs-nav:.95rem;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --container:1200px; --container-narrow:920px; --radius:10px; --radius-sm:6px; --radius-card:12px;
  --shadow:0 6px 20px rgba(29,37,45,.08); --shadow-lg:0 12px 36px rgba(29,37,45,.13);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); font-size:var(--fs-body); line-height:1.6; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--forest); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3,h4 { line-height:1.2; margin:0 0 var(--s3); color:var(--ink); }
h1 { font-size:var(--fs-h1); } h2 { font-size:var(--fs-h2); } h3 { font-size:var(--fs-h3); }
p { margin:0 0 var(--s4); }
.container { max-width:var(--container); margin:0 auto; padding:0 var(--s5); }
.container-narrow { max-width:var(--container-narrow); margin:0 auto; padding:0 var(--s5); }

.btn { display:inline-flex; align-items:center; gap:var(--s2); padding:12px 22px; border-radius:var(--radius-sm); font-weight:700; font-size:var(--fs-nav); cursor:pointer; border:1px solid transparent; transition:.15s ease; text-decoration:none; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--ink); color:var(--cream); } .btn-primary:hover { background:#2A333D; }
.btn-accent { background:var(--forest); color:var(--ink); } .btn-accent:hover { background:var(--forest-700); color:#fff; }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--ink); } .btn-ghost:hover { background:rgba(29,37,45,.06); }
.btn-lg { padding:15px 30px; font-size:1.05rem; }

.site-header { position:sticky; top:0; z-index:50; background:rgba(250,246,238,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:var(--s3); font-weight:800; font-size:1.15rem; color:var(--ink); }
.brand img { height:36px; }
.nav-menu { display:flex; align-items:center; gap:var(--s2); list-style:none; margin:0; padding:0; }
.nav-menu > li { position:relative; }
.nav-menu a.navlink { display:inline-block; padding:10px 12px; color:var(--ink); font-size:var(--fs-nav); font-weight:600; }
.nav-menu a.navlink:hover { color:var(--forest); text-decoration:none; }
.nav-cta { margin-left:var(--s3); }
.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; }
.has-dropdown > a::after { content:"▾"; margin-left:6px; font-size:.7em; }
.dropdown { position:absolute; top:100%; left:0; min-width:220px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:var(--s2); display:none; z-index:60; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display:block; }
.dropdown a { display:block; padding:9px 12px; border-radius:var(--radius-sm); color:var(--ink); font-weight:500; }
.dropdown a:hover { background:var(--fresh-100); text-decoration:none; }

.hero { position:relative; color:var(--ink); overflow:hidden; background:var(--fresh-100); }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.25; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(250,244,234,.94), rgba(243,237,225,.9)); z-index:1; }
.hero-inner { position:relative; z-index:2; padding:var(--s9) 0; }
.hero h1 { font-size:var(--fs-display); max-width:16ch; color:var(--ink); }
.hero p.lead { font-size:1.15rem; max-width:52ch; color:var(--muted); }
.hero-actions { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); }

.section { padding:var(--s8) 0; } .section-tight { padding:var(--s7) 0; }
.section-head { max-width:60ch; margin-bottom:var(--s6); }
.section-head .eyebrow { color:var(--forest); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:var(--fs-label); }
.section-head h2 { margin:var(--s2) 0; }

.stat-band { background:var(--forest); color:var(--ink); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); padding:var(--s7) 0; }
.stat .num { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:var(--ink); }
.stat .label { color:#3E4A42; font-size:var(--fs-label); }

.grid { display:grid; gap:var(--s5); }
.grid-4 { grid-template-columns:repeat(4,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; transition:.18s ease; display:flex; flex-direction:column; }
.card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.card-media { aspect-ratio:4/3; background:var(--fresh-100); }
.card-media img { width:100%; height:100%; object-fit:cover; }
.card-body { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.card-body h3 { margin:0; font-size:1.05rem; } .card-body .meta { color:var(--muted); font-size:var(--fs-label); }
.card-body .price-note { margin-top:auto; font-weight:700; color:var(--forest); }
.cat-tile { position:relative; border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/3; display:block; color:var(--cream); }
.cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
.cat-tile span { position:absolute; left:var(--s4); bottom:var(--s4); z-index:2; font-weight:700; font-size:1.1rem; }
.cat-tile:hover { text-decoration:none; }

.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:start; }
.gallery-main { border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; aspect-ratio:1/1; background:var(--fresh-100); }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); }
.gallery-thumbs img { border:1px solid var(--line); border-radius:var(--radius-sm); aspect-ratio:1/1; object-fit:contain; cursor:pointer; }
.spec-table { width:100%; border-collapse:collapse; margin:var(--s4) 0; }
.spec-table th, .spec-table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.95rem; }
.spec-table th { color:var(--muted); font-weight:600; width:38%; }
.tag-row { display:flex; flex-wrap:wrap; gap:var(--s2); }
.tag { background:var(--fresh-100); color:var(--forest); padding:4px 10px; border-radius:999px; font-size:var(--fs-label); font-weight:600; }

.breadcrumb { font-size:var(--fs-label); color:var(--muted); padding:var(--s4) 0 0; } .breadcrumb a { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.field { display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4); }
.field.full { grid-column:1 / -1; }
label { font-weight:600; font-size:var(--fs-label); }
input, select, textarea { font-family:inherit; font-size:1rem; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--fresh); border-color:var(--forest); }
.inquiry-box { background:var(--fresh-100); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--s5); }

.page-banner { background:var(--forest); color:var(--ink); } .page-banner .inner { padding:var(--s7) 0; }
.page-banner h1 { color:var(--ink); margin:0; } .page-banner p { color:#3E4A42; margin:var(--s2) 0 0; max-width:60ch; }

.site-footer { background:var(--ink); color:#C9C4BA; padding:var(--s8) 0 var(--s6); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s6); }
.site-footer h4 { color:var(--cream); font-size:.95rem; letter-spacing:.04em; }
.site-footer a { color:#C9C4BA; } .site-footer a:hover { color:var(--forest); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:var(--s6); padding-top:var(--s5); font-size:var(--fs-label); color:#9B968D; }

.notice { background:#FFF7E6; border:1px solid #F0D9A8; color:#7A5A12; padding:var(--s3) var(--s4); border-radius:var(--radius-sm); font-size:var(--fs-label); }
.bg-paper { background:var(--paper); } .bg-fresh-100 { background:var(--fresh-100); }
.muted { color:var(--muted); } .center { text-align:center; } .mt-4 { margin-top:var(--s4); } .mt-6 { margin-top:var(--s6); }
.flex { display:flex; } .gap-3 { gap:var(--s3); } .wrap { flex-wrap:wrap; } .align-center { align-items:center; }

/* pagination */
.pagination { display:flex; gap:var(--s2); justify-content:center; margin-top:var(--s6); }
.pagination a, .pagination span { padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.pagination .current { background:var(--forest); color:#fff; border-color:var(--forest); }

/* floating WhatsApp button */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:99; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,.4); transition:.18s ease; }
.wa-float:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(37,211,102,.5); text-decoration:none; }
.wa-float svg { width:32px; height:32px; fill:#fff; }

/* contact action cards (email / whatsapp / address) */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.contact-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--s5); text-align:center; }
.contact-card .big { font-size:1.05rem; font-weight:700; color:var(--forest); word-break:break-all; }
.contact-card .ico { font-size:1.8rem; margin-bottom:var(--s2); }

@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .product-layout { grid-template-columns:1fr; gap:var(--s5); }
}
@media (max-width:768px) {
  .nav-menu { position:absolute; top:68px; left:0; right:0; background:var(--paper); flex-direction:column; align-items:stretch; padding:var(--s3); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); display:none; }
  .nav-menu.open { display:flex; }
  .nav-menu a.navlink { padding:12px; } .dropdown { position:static; box-shadow:none; border:none; padding-left:var(--s4); }
  .has-dropdown:hover .dropdown { display:none; } .has-dropdown.open .dropdown { display:block; }
  .nav-toggle { display:block; } .nav-cta { margin:var(--s3) 0 0; }
  .grid-3, .grid-2, .form-grid { grid-template-columns:1fr; }
  .hero-inner { padding:var(--s8) 0; } .section { padding:var(--s7) 0; }
}
@media (max-width:480px) { .grid-4 { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto; } }