:root{
  --green-deep:#0f1f17;
  --green:#1f3d2b;
  --green-2:#2d5a3d;
  --green-soft:#3c6b4c;
  --gold:#c9a24b;
  --gold-soft:#e3c987;
  --cream:#f5efe3;
  --cream-2:#ece1cc;
  --paper:#fbf8f1;
  --ink:#1c211c;
  --muted:#7e8c80;
  --line:rgba(31,61,43,.12);
  --shadow:0 18px 50px -22px rgba(15,31,23,.45);
  --shadow-sm:0 8px 24px -14px rgba(15,31,23,.4);
  --r:18px;
  --font:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}
em{font-style:normal}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(120deg,var(--green-deep),var(--green));
  color:var(--cream);
  border-bottom:1px solid rgba(201,162,75,.25);
  backdrop-filter:saturate(1.2);
}
.header-inner{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:700;letter-spacing:.5px}
.brand-mark{color:var(--gold-soft);display:flex}
.brand-text{font-size:19px}
.brand-text em{font-size:12px;letter-spacing:2px;color:var(--gold-soft);font-weight:600;margin-left:2px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav a{position:relative;padding:6px 2px;color:rgba(245,239,227,.82);transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav a:hover,.nav a.active{color:#fff}
.nav a.active::after,.nav a:hover::after{width:100%}
.cart-btn{position:relative;background:none;border:none;color:var(--cream);cursor:pointer;display:flex;align-items:center;padding:6px;border-radius:10px;transition:background .2s}
.cart-btn:hover{background:rgba(255,255,255,.08)}
.cart-count{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#1c1c1a;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.menu-toggle{display:none;background:none;border:none;color:var(--cream);font-size:24px;cursor:pointer}

/* ===== View / sections ===== */
.view{min-height:60vh}
section{margin:0}
.sec{padding:72px 0}
.sec-head{text-align:center;margin-bottom:42px}
.sec-head .kicker{display:inline-block;font-size:12px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.sec-head h2{font-size:30px;letter-spacing:1px;color:var(--green)}
.sec-head p{color:var(--muted);margin-top:10px;font-size:15px}

/* Hero */
.hero{
  position:relative;color:var(--cream);
  background:
    radial-gradient(900px 500px at 78% -8%,rgba(201,162,75,.18),transparent 60%),
    linear-gradient(155deg,var(--green-deep) 0%,var(--green) 55%,#244a33 100%);
  overflow:hidden;
}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:88px 0 96px}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.15;letter-spacing:1px;font-weight:800}
.hero h1 .hl{color:var(--gold-soft)}
.hero p.lead{margin-top:22px;font-size:17px;color:rgba(245,239,227,.85);max-width:30em}
.hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative;display:flex;justify-content:center}
.hero-card{width:min(340px,80%);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(201,162,75,.3);border-radius:24px;padding:30px;backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.hero-card .bottle{height:150px;border-radius:16px;background:linear-gradient(180deg,var(--green-soft),var(--green-deep));display:flex;align-items:center;justify-content:center;color:var(--gold-soft);font-size:54px;margin-bottom:18px}
.hero-card h3{color:#fff;font-size:18px;margin-bottom:6px}
.hero-card .price{color:var(--gold-soft);font-size:22px;font-weight:700}
.hero-card .note{color:rgba(245,239,227,.7);font-size:13px;margin-top:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:600;padding:13px 26px;border-radius:999px;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#241c08;box-shadow:0 10px 26px -12px rgba(201,162,75,.8)}
.btn-gold:hover{box-shadow:0 14px 32px -10px rgba(201,162,75,.9)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(245,239,227,.4)}
.btn-ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn-green{background:linear-gradient(135deg,var(--green-2),var(--green));color:var(--cream)}
.btn-line{background:#fff;color:var(--green);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--green-soft)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Strength strip */
.strength{background:var(--green);color:var(--cream)}
.strength .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:30px 0}
.strength .item{text-align:center;padding:8px 16px;border-right:1px solid rgba(255,255,255,.12)}
.strength .item:last-child{border-right:none}
.strength .num{font-size:26px;font-weight:800;color:var(--gold-soft)}
.strength .lab{font-size:13px;color:rgba(245,239,227,.8);margin-top:4px}

/* Product grid */
.sec-products{background:linear-gradient(180deg,var(--paper),#f1ead9)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .thumb{height:188px;background:linear-gradient(150deg,var(--green-soft),var(--green-deep));display:flex;align-items:center;justify-content:center;color:var(--gold-soft);font-size:46px;position:relative}
.card .thumb .tag{position:absolute;top:12px;left:12px;background:rgba(15,31,23,.55);color:var(--cream);font-size:12px;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.card .thumb .sold{position:absolute;top:12px;right:12px;background:var(--gold);color:#241c08;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:17px;color:var(--green)}
.card .sub{color:var(--muted);font-size:13px;margin-top:4px}
.card .eff{color:var(--green-2);font-size:13px;margin-top:10px;min-height:38px}
.card .priceline{margin-top:auto;display:flex;align-items:baseline;gap:10px;padding-top:12px}
.card .price{color:var(--gold);font-size:22px;font-weight:800}
.card .old{color:var(--muted);text-decoration:line-through;font-size:14px}
.card .acts{display:flex;gap:10px;margin-top:14px}
.card .acts .btn{flex:1;padding:10px 0;font-size:14px}

/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.chip{border:1px solid var(--line);background:#fff;color:var(--green);padding:8px 18px;border-radius:999px;cursor:pointer;font-size:14px;transition:all .2s}
.chip:hover{border-color:var(--green-soft)}
.chip.active{background:var(--green);color:var(--cream);border-color:var(--green)}

/* Articles */
.sec-articles{background:var(--cream)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.art-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.art-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.art-card .cat{display:inline-block;font-size:12px;color:var(--gold);letter-spacing:1px;margin-bottom:10px}
.art-card h3{font-size:18px;color:var(--green);line-height:1.5}
.art-card .date{margin-top:auto;color:var(--muted);font-size:13px;padding-top:14px}

/* OEM */
.sec-oem{background:linear-gradient(160deg,var(--green-deep),var(--green));color:var(--cream)}
.sec-oem .sec-head h2{color:#fff}
.sec-oem .sec-head p{color:rgba(245,239,227,.8)}
.oem-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.oem-info .lead{font-size:17px;color:rgba(245,239,227,.9)}
.oem-feats{list-style:none;margin-top:22px;display:grid;gap:14px}
.oem-feats li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(201,162,75,.2);border-radius:14px;padding:14px 16px}
.oem-feats .ic{color:var(--gold-soft);font-size:20px;flex:none}
.oem-feats b{color:#fff}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.dual .pill{background:rgba(255,255,255,.05);border:1px solid rgba(201,162,75,.2);border-radius:14px;padding:16px}
.dual .pill h4{color:var(--gold-soft);font-size:15px;margin-bottom:6px}
.dual .pill p{font-size:13px;color:rgba(245,239,227,.8)}

/* Forms */
.form{background:rgba(255,255,255,.06);border:1px solid rgba(201,162,75,.22);border-radius:20px;padding:26px}
.form .field{margin-bottom:16px}
.form label{display:block;font-size:13px;color:rgba(245,239,227,.85);margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);color:#fff;font-family:var(--font);font-size:14px;outline:none;transition:border .2s
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold-soft)}
.form select option{color:#1c1c1a}
.form textarea{resize:vertical;min-height:84px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:12px;color:rgba(245,239,227,.6);margin-top:6px}

/* Footer */
.site-footer{background:var(--green-deep);color:rgba(245,239,227,.8);padding:54px 0 26px;margin-top:0}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.footer-brand{font-size:18px;font-weight:700;color:#fff}
.footer-brand em{font-size:11px;color:var(--gold-soft);margin-left:3px}
.fdesc{margin-top:12px;font-size:14px;line-height:1.8}
.fcol h4{color:var(--gold-soft);font-size:14px;letter-spacing:1px;margin-bottom:14px}
.fcol a,.fcol p{display:block;font-size:14px;color:rgba(245,239,227,.75);margin-bottom:9px;transition:color .2s}
.fcol a:hover{color:var(--gold-soft)}
.copyright{text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(245,239,227,.5)}

/* Drawer */
.drawer-mask{position:fixed;inset:0;background:rgba(15,31,23,.5);opacity:0;visibility:hidden;transition:.25s;z-index:60}
.drawer-mask.show{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,90vw);background:var(--paper);z-index:61;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4)}
.cart-drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:18px;color:var(--green)}
.drawer-close{background:none;border:none;font-size:28px;color:var(--muted);cursor:pointer;line-height:1}
.drawer-body{flex:1;overflow:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.ci{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.ci .ci-thumb{width:56px;height:56px;border-radius:10px;background:linear-gradient(150deg,var(--green-soft),var(--green-deep));color:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.ci .ci-info{flex:1;min-width:0}
.ci .ci-name{font-size:14px;color:var(--green);font-weight:600}
.ci .ci-sub{font-size:12px;color:var(--muted)}
.ci .ci-price{color:var(--gold);font-weight:700;font-size:14px}
.ci .ci-acts{display:flex;align-items:center;gap:10px;margin-top:6px}
.step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.step button{width:26px;height:26px;border:none;background:#fff;color:var(--green);font-size:16px;cursor:pointer}
.step span{min-width:30px;text-align:center;font-size:14px}
.ci-remove{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;margin-left:auto}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--line);background:#fff}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:15px}
.cart-total strong{font-size:22px;color:var(--gold)}
.drawer-foot .btn{width:100%}

/* Modal */
.modal-mask{position:fixed;inset:0;background:rgba(15,31,23,.6);opacity:0;visibility:hidden;transition:.25s;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.modal-mask.show{opacity:1;visibility:visible}
.modal{background:var(--paper);width:min(720px,94vw);max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:0;transform:translateY(30px);transition:transform .3s;box-shadow:var(--shadow)}
.modal-mask.show .modal{transform:translateY(0)}
.modal .m-hero{height:200px;background:linear-gradient(150deg,var(--green-soft),var(--green-deep));display:flex;align-items:center;justify-content:center;color:var(--gold-soft);font-size:64px;position:relative}
.modal .m-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(15,31,23,.5);color:#fff;font-size:22px;cursor:pointer}
.modal .m-body{padding:26px 28px 30px}
.modal h2{font-size:24px;color:var(--green)}
.modal .m-sub{color:var(--muted);margin-top:4px}
.modal .m-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.modal .m-tags span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--green-2)}
.modal .m-block{margin-top:18px}
.modal .m-block h4{color:var(--gold);font-size:14px;letter-spacing:1px;margin-bottom:8px}
.modal .m-block p{color:var(--ink);font-size:15px}
.modal .m-price{display:flex;align-items:baseline;gap:12px;margin:18px 0}
.modal .m-price .now{font-size:30px;font-weight:800;color:var(--gold)}
.modal .m-price .old{text-decoration:line-through;color:var(--muted)}
.modal .m-subs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 20px}
.modal .m-subs .sub{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;cursor:pointer;font-size:14px;color:var(--green);transition:all .2s}
.modal .m-subs .sub.active{border-color:var(--gold);background:linear-gradient(135deg,#fff,var(--cream))}
.modal .m-subs .sub b{color:var(--gold)}

/* Toast */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);background:var(--green-deep);color:var(--cream);padding:13px 24px;border-radius:999px;font-size:14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.25s;z-index:80;border:1px solid rgba(201,162,75,.3)}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Loading */
.loading{text-align:center;color:var(--muted);padding:60px 0;font-size:15px}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px}
@keyframes sk{to{background-position:-200% 0}}

/* Responsive */
@media(max-width:880px){
  .hero-inner{grid-template-columns:1fr;padding:60px 0 70px}
  .hero-visual{order:-1}
  .grid,.art-grid{grid-template-columns:repeat(2,1fr)}
  .strength .wrap{grid-template-columns:repeat(2,1fr)}
  .strength .item:nth-child(2){border-right:none}
  .oem-cols{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:24px}
}
@media(max-width:620px){
  .nav{position:fixed;top:66px;left:0;right:0;background:var(--green-deep);flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s;border-bottom:1px solid rgba(201,162,75,.2)}
  .nav.open{max-height:280px}
  .nav a{padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.06);width:100%}
  .menu-toggle{display:block;margin-left:auto;background:none;border:none;color:var(--cream);font-size:24px;cursor:pointer}
  .cart-btn{margin-left:14px}
  .grid,.art-grid{grid-template-columns:1fr}
  .strength .wrap{grid-template-columns:1fr 1fr}
  .sec{padding:54px 0}
  .dual{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* ===== 手机版底部 Tab 导航（桌面隐藏） ===== */
.tabbar{display:none}
@media(max-width:860px){
  .menu-toggle{display:none !important}
  .nav{display:none !important}
  .header-inner{height:54px;gap:12px}
  .brand-text{font-size:16px}
  .brand-text em{font-size:10px;letter-spacing:1px}
  .cart-btn{display:none}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:linear-gradient(180deg, rgba(15,31,23,.92), rgba(15,31,23,.98));
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(201,162,75,.3);
    padding:7px 2px calc(7px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -16px rgba(0,0,0,.5);
  }
  .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:rgba(245,239,227,.55);font-size:11px;padding:3px 0;
    -webkit-tap-highlight-color:transparent;transition:color .2s;position:relative;
  }
  .tab .ti{display:flex;align-items:center;justify-content:center}
  .tab .ti svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
  .tab.active{color:var(--gold-soft)}
  .tab.active .ti svg{stroke:var(--gold-soft)}
  .tab-cart .cart-count{
    position:absolute;top:-3px;right:-7px;min-width:17px;height:17px;padding:0 5px;
    border-radius:9px;background:var(--gold);color:#1c1c1a;font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;border:2px solid var(--green-deep);
  }
  .view{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .modal-mask{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:22px 22px 0 0;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5)}
  .cart-drawer{width:100%;border-radius:22px 22px 0 0}
  .grid,.art-grid{grid-template-columns:1fr}
  .card .thumb{height:200px;font-size:54px}
  .sec{padding:48px 0}
  .sec-head h2{font-size:25px}
  .form .row{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr;padding:48px 0 56px;text-align:center}
  .hero-cta{justify-content:center}
  .hero-visual{order:-1;margin-bottom:18px}
  .strength .wrap{grid-template-columns:1fr 1fr;gap:14px 0}
  .strength .item{border-right:none;padding:10px 0}
  .footer-inner{grid-template-columns:1fr;gap:22px}
  .dual,.oem-cols{grid-template-columns:1fr;gap:26px}
}