:root{
  --red:#cf2321; --red-dk:#9a1715; --gold:#c9a24b; --ink:#1f1a17; --muted:#6b625b;
  --cream:#fbf7f0; --paper:#ffffff; --line:#e8dfd1; --radius:14px;
  --serif:"Playfair Display","Noto Serif SC",Georgia,serif;
  --sans:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);line-height:1.2;font-weight:700}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:600}
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:999px;font-weight:600;font-size:.95rem;border:2px solid var(--red);background:var(--red);color:#fff;transition:.2s;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--red)}
.btn.ghost:hover{background:var(--red);color:#fff}
.btn.light{background:#fff;color:var(--red);border-color:#fff}
.btn.light:hover{background:var(--cream)}

/* header */
.topbar{background:var(--red-dk);color:#f3e6d6;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;flex-wrap:wrap}
.topbar a:hover{color:#fff}
header.site{position:sticky;top:0;z-index:50;background:rgba(251,247,240,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:.8rem}
.brand .mark{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem;font-weight:700;box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--gold)}
.brand b{display:block;font-family:var(--serif);font-size:1.25rem;letter-spacing:.04em;line-height:1.1}
.brand small{display:block;font-size:.68rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
nav.main ul{display:flex;gap:2rem;list-style:none}
nav.main a{font-weight:500;font-size:.95rem;padding:.4rem 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--red);border-color:var(--red)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:.2s}

/* hero */
.hero{position:relative;color:#fff;min-height:min(82vh,700px);display:grid;align-items:center;overflow:hidden;background:#2a1210}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-img) center/cover;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(40,10,8,.92) 0%,rgba(40,10,8,.6) 55%,rgba(40,10,8,.25) 100%)}
.hero .wrap{position:relative;z-index:2;padding:5rem 0}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:15ch;margin:.8rem 0 1.2rem}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{max-width:46ch;font-size:1.15rem;color:#f0e2d2;margin-bottom:2rem}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero .cn{position:absolute;right:4vw;bottom:-2vw;font-family:var(--serif);font-size:clamp(8rem,22vw,20rem);color:rgba(255,255,255,.06);line-height:1;z-index:1;user-select:none}

section{padding:5.5rem 0}
.sec-head{max-width:640px;margin-bottom:3rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:.5rem 0 1rem}
.sec-head p{color:var(--muted)}

/* stats */
.stats{background:var(--paper);padding:0;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:2.2rem 1rem;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat b{display:block;font-family:var(--serif);font-size:2.4rem;color:var(--red)}
.stat span{font-size:.85rem;color:var(--muted);letter-spacing:.06em}

/* category cards */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cat{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:#eee;display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover img{transform:scale(1.06)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(30,8,6,.85))}
.cat div{position:absolute;left:1.2rem;right:1.2rem;bottom:1.1rem;z-index:2;color:#fff}
.cat h3{font-size:1.2rem}
.cat small{color:#e9d9c4;font-size:.8rem}

/* brands */
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.brand-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(80,30,20,.35)}
.brand-card .pic{aspect-ratio:4/3;background:#f4ede1;overflow:hidden}
.brand-card .pic img{width:100%;height:100%;object-fit:cover}
.brand-card .body{padding:1.5rem 1.6rem 1.8rem}
.brand-card .cn{color:var(--red);font-family:var(--serif);font-size:1.05rem}
.brand-card h3{font-size:1.5rem;margin:.2rem 0 .6rem}
.brand-card p{color:var(--muted);font-size:.95rem}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split .pic{border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -30px rgba(80,30,20,.45)}
.split .pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.5rem 0 1.2rem}
.split p{color:#4a423b;margin-bottom:1rem}
.ticks{list-style:none;margin:1.4rem 0 2rem}
.ticks li{padding-left:1.8rem;position:relative;margin-bottom:.55rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.9rem;height:.5rem;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg) translateY(-50%)}
.alt{background:var(--paper)}

/* banner */
.banner{background:var(--red);color:#fff;text-align:center;padding:4.5rem 0}
.banner h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.8rem}
.banner p{color:#f6dcd2;margin-bottom:1.8rem}

/* page head */
.page-head{background:linear-gradient(120deg,var(--red-dk),var(--red));color:#fff;padding:4.2rem 0 3.6rem;position:relative;overflow:hidden}
.page-head::after{content:"繁荣";position:absolute;right:3vw;top:-1.5rem;font-family:var(--serif);font-size:12rem;color:rgba(255,255,255,.07);line-height:1}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-top:.4rem}
.page-head .eyebrow{color:var(--gold)}
.crumb{font-size:.85rem;color:#f0cfc6;margin-top:.6rem}
.crumb a:hover{color:#fff;text-decoration:underline}

/* products */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.chip{padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:.9rem;cursor:pointer;font-family:inherit;color:var(--ink);transition:.15s}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip i{font-style:normal;opacity:.65;margin-left:.3rem;font-size:.8rem}
.count{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem}
.item{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:zoom-in;transition:.2s;padding:0;font:inherit;text-align:left}
.item:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(80,30,20,.4);border-color:#d9c9ac}
.item .im{aspect-ratio:1;background:#faf6ee;display:grid;place-items:center;padding:.8rem}
.item img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.item .tag{display:block;padding:.6rem .9rem;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(20,8,6,.88);display:none;place-items:center;z-index:100;padding:2rem}
.lb.open{display:grid}
.lb img{max-height:86vh;max-width:min(92vw,900px);border-radius:10px;background:#fff}
.lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .x{top:20px;right:20px}.lb .p{left:20px;top:50%}.lb .n{right:20px;top:50%}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.8rem;margin-bottom:1rem;display:flex;gap:1.1rem;align-items:flex-start}
.info-card .ic{width:46px;height:46px;border-radius:50%;background:#f7e6e1;color:var(--red);display:grid;place-items:center;font-size:1.2rem;flex:none}
.info-card small{color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.info-card b{display:block;font-size:1.1rem;font-family:var(--serif)}
.info-card a:hover{color:var(--red)}
form.enq{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
form.enq h3{font-size:1.5rem;margin-bottom:1.2rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form.enq label{display:block;font-size:.85rem;font-weight:600;margin:0 0 .35rem}
form.enq input,form.enq textarea,form.enq select{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--cream);margin-bottom:1rem}
form.enq input:focus,form.enq textarea:focus,form.enq select:focus{outline:2px solid var(--red);outline-offset:1px;background:#fff}
form.enq textarea{min-height:130px;resize:vertical}

/* footer */
footer.site{background:#1c1311;color:#cfc3b6;padding:4rem 0 1.5rem}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid #3a2d29}
footer h4{font-family:var(--serif);color:#fff;font-size:1.05rem;margin-bottom:1rem}
footer li{list-style:none;margin-bottom:.5rem;font-size:.92rem}
footer a:hover{color:var(--gold)}
footer .about p{font-size:.92rem;max-width:34ch;margin-top:1rem}
footer .brand b{color:#fff}
footer .brand small{color:#a89a8c}
footer .copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding-top:1.4rem;font-size:.82rem;color:#8d7f72}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:.7s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:980px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .brands-grid{grid-template-columns:1fr}
  .split,.contact-grid{grid-template-columns:1fr;gap:2rem}
  footer .cols{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  .burger{display:block}
  nav.main{position:absolute;top:88px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s}
  nav.main.open{max-height:360px}
  nav.main ul{flex-direction:column;gap:0;padding:.5rem 20px 1rem}
  nav.main a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line)}
  .topbar .wrap>span:last-child{display:none}
}
@media (max-width:560px){
  section{padding:3.8rem 0}
  .cats{gap:.8rem}
  .row{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .brand small{display:none}
}

/* real logo */
.brand .logo{height:72px;width:auto;aspect-ratio:720/571;flex:none}
footer .brand .logo{background:#fff;padding:6px 14px;border-radius:12px;height:64px}
.hero{background:linear-gradient(120deg,#3a0f0d 0%,#6e1512 55%,#9a1715 100%)}
.hero::before{display:none}.hero::after{background:radial-gradient(circle at 80% 40%,rgba(255,255,255,.08),transparent 55%)}
.hero .wrap{padding-right:min(38vw,460px)}
.hero-logo{position:absolute;z-index:2;right:max(20px,calc((100vw - 1180px)/2));top:50%;transform:translateY(-50%);width:min(34vw,440px);aspect-ratio:1;background:#fff;border-radius:50%;overflow:hidden;padding:0;box-shadow:0 30px 70px -20px rgba(0,0,0,.5),0 0 0 10px rgba(255,255,255,.12)}
.hero-logo img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;height:auto;max-width:none}
.logo-panel{background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:2.5rem}
.logo-panel img{aspect-ratio:auto;width:min(100%,380px);object-fit:contain}
.brand-card .pic.logo{position:relative;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.brand-card .pic.logo img{position:absolute;left:1.4rem;top:1.4rem;width:calc(100% - 2.8rem);height:calc(100% - 2.8rem);object-fit:contain}
.brand-card .bcat{display:inline-block;margin:.1rem 0 .5rem;font-size:.74rem;font-weight:700;letter-spacing:.06em;color:#8a6a1c;background:#f6ecd0;border-radius:999px;padding:.2rem .7rem}
.page-head::after{content:none}
@media (max-width:820px){
  nav.main{top:88px}
  .hero{min-height:auto}
  .hero .wrap{padding:3.5rem 0 3rem}
  .hero-logo{position:relative;right:auto;top:auto;transform:none;width:min(62vw,260px);margin:0 auto 3rem}
  .brand .logo{height:56px}
}

/* ===== v3: catalogue, featured, locations ===== */
.logo-img{height:70px;width:auto;mix-blend-mode:multiply}
.stats .wrap{grid-template-columns:repeat(4,1fr)}
.stat b small{font-size:.55em;margin-left:2px}
.feature-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.feature-head .meta{display:flex;gap:.6rem;flex-wrap:wrap}
.pill{display:inline-block;padding:.35rem .9rem;border-radius:999px;background:#f7e6e1;color:var(--red-dk);font-size:.8rem;font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(80,30,20,.35)}
.fcard .ph{display:block;position:relative;width:100%;aspect-ratio:1/1;background:#faf6ee;overflow:hidden;flex:none}
.fcard .ph img{position:absolute;left:1.2rem;top:1.2rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem);object-fit:contain}
.fcard .bd{padding:1.2rem 1.4rem 1.5rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.35rem;flex:1}
.fcard .cn{color:var(--red);font-family:var(--serif)}
.fcard h3{font-size:1.2rem}
.fcard .spec{font-size:.82rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.fcard p{font-size:.9rem;color:#5a5149;margin-top:.3rem}
.tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--line);margin-bottom:2rem;flex-wrap:wrap}
.tab{background:none;border:0;padding:.9rem 1.4rem;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab:hover{color:var(--red)}
.tab.on{color:var(--red);border-color:var(--red)}
.tool{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.search{flex:1;min-width:220px;padding:.8rem 1.1rem;border:1px solid var(--line);border-radius:999px;font:inherit;background:#fff}
.search:focus{outline:2px solid var(--red);outline-offset:1px}
.subchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.6rem 0 1.4rem}
.subchips .chip{font-size:.82rem;padding:.4rem .9rem;background:transparent}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.2s;padding:0;font:inherit;text-align:left;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(80,30,20,.4);border-color:#d9c9ac}
.pcard .im{display:block;position:relative;width:100%;aspect-ratio:1;background:#fff;overflow:hidden;flex:none}
.pcard .im img{position:absolute;left:.8rem;top:.8rem;width:calc(100% - 1.6rem);height:calc(100% - 1.6rem);object-fit:contain}
.pcard .tx{padding:.7rem .9rem .9rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem;flex:1}
.pcard b{font-size:.88rem;line-height:1.35;font-weight:600}
.pcard .zh{font-size:.82rem;color:var(--red)}
.pcard .sp{font-size:.76rem;color:var(--muted);margin-top:auto;padding-top:.3rem}
.empty{padding:3rem 0;text-align:center;color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(20,8,6,.7);display:none;place-items:center;z-index:100;padding:1.2rem}
.modal.open{display:grid}
.modal .box{background:#fff;border-radius:18px;max-width:760px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative;max-height:92vh}
.modal .pic{background:#fff;display:grid;place-items:center;padding:1.5rem;min-height:300px}
.modal .pic img{max-width:100%;max-height:60vh;object-fit:contain}
.modal .inf{padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.5rem;background:var(--cream);overflow:auto}
.modal .inf h3{font-size:1.5rem}
.modal .inf .zh{font-family:var(--serif);color:var(--red);font-size:1.2rem}
.modal .inf .row2{color:var(--muted);font-size:.9rem}
.modal .inf .btn{margin-top:auto;text-align:center}
.modal .x{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.08);font-size:1.4rem;cursor:pointer}
.mono{background:linear-gradient(135deg,#fff5f0,#f7e6e1)!important;display:grid;place-items:center}
.mono span{font-family:var(--serif);font-size:3rem;color:var(--red);font-weight:700;letter-spacing:.08em}
.brands-grid.four{grid-template-columns:repeat(4,1fr)}
.brand-card .count{font-size:.78rem;color:var(--muted);margin-top:.8rem;font-weight:600;letter-spacing:.05em}
.brand-card a.more{display:inline-block;margin-top:.8rem;color:var(--red);font-weight:600;font-size:.9rem}
.brand-card a.more:hover{text-decoration:underline}
.loc{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.loc .info-card{margin:0}
.loc a{color:var(--red);font-size:.88rem;font-weight:600}
@media (max-width:980px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .brands-grid.four{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .loc{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr 1fr;gap:.8rem}
  .fcard .bd{padding:.9rem}
  .fcard p{display:none}
  .brands-grid.four{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .modal .box{grid-template-columns:1fr;overflow:auto}
  .modal .pic{min-height:200px;padding:1rem}
  .modal .pic img{max-height:34vh}
  .tab{padding:.7rem .9rem;font-size:.9rem}
}

@media (max-width:980px){#cats{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){#cats{grid-template-columns:1fr 1fr!important}.cat{aspect-ratio:1/1.1}.cat h3{font-size:1rem}}
.cat img{transition:transform .5s}

/* category cards: image on top, text below */
#cats .cat{aspect-ratio:auto;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
#cats .cat::after{display:none}
#cats .cat img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:1rem;background:#fff}
#cats .cat div{position:static;color:var(--ink);padding:.9rem 1.1rem 1.1rem;border-top:1px solid var(--line)}
#cats .cat small{color:var(--muted)}
@media (max-width:560px){.stat b{font-size:1.7rem}.stat{padding:1.4rem .4rem}.stat span{font-size:.72rem}#cats .cat{aspect-ratio:auto}#cats .cat h3{font-size:.95rem}}

.hero{min-height:min(82vh,700px)}
@media(max-width:860px){.hero{min-height:auto}.hero-logo{overflow:hidden;width:min(70vw,300px)}}