:root { --ink:#182622; --muted:#718079; --line:#dce3dc; --paper:#f7f8f3; --accent:#d66d45; --accent-deep:#ad4d31; --mint:#dfece1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Outfit,"Noto Sans SC",sans-serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.38; background-image:radial-gradient(#cad8cb 0.6px,transparent .6px); background-size:14px 14px; mask-image:linear-gradient(to bottom,black,transparent 68%); }
.app-shell { width:min(100%,1120px); margin:auto; padding:0 22px 46px; position:relative; }
.hero { min-height:270px; margin:0 -22px; padding:36px max(22px,calc((100% - 1076px)/2)) 30px; color:#f7f4ea; background:#14221f; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.hero:after { content:"茶"; position:absolute; right:4%; bottom:-68px; font:700 250px/1 "Noto Serif SC",serif; color:rgba(255,255,255,.055); transform:rotate(-10deg); }
.brand-lockup { display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.seal { width:42px; height:42px; display:grid; place-items:center; border:1px solid #df7653; color:#f4c2a5; font:600 24px "Noto Serif SC",serif; }
.eyebrow,.hero-kicker,.section-label { margin:0; letter-spacing:.16em; text-transform:uppercase; font-size:10px; font-weight:600; }
h1,h2,h3,p { margin:0; }
h1 { font:600 25px/1.1 "Noto Serif SC",serif; letter-spacing:.08em; }
.hero-copy { display:flex; align-items:end; gap:18px; position:relative; z-index:1; }
.hero-kicker { color:#ef9e7a; }.hero-note { color:#d6dfd8; font:500 14px "Noto Serif SC",serif; }
main { padding-top:22px; }
.search-panel { position:sticky; top:0; z-index:5; padding:0 0 18px; background:linear-gradient(var(--paper) 72%,transparent); }
.search-row { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); min-height:54px; padding:0 15px; box-shadow:0 8px 28px rgba(38,64,51,.06); }
.search-icon { color:var(--accent); font-size:28px; line-height:0; transform:rotate(-20deg); }.search-row input { border:0; outline:0; background:transparent; min-width:0; flex:1; color:var(--ink); font:500 15px Outfit,"Noto Sans SC",sans-serif; }.search-row input::placeholder { color:#99a69e; }.clear-button { border:0; background:transparent; color:#9ba8a1; font-size:22px; cursor:pointer; padding:5px; }
.category-tabs { display:flex; gap:8px; overflow:auto; padding:14px 1px 2px; scrollbar-width:none; }.category-tabs::-webkit-scrollbar { display:none; }.category-tab { white-space:nowrap; border:1px solid var(--line); background:rgba(255,255,255,.55); color:#64736b; padding:7px 13px; font:500 12px Outfit,"Noto Sans SC",sans-serif; cursor:pointer; }.category-tab.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.catalog-head { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:12px 0 20px; }.section-label { color:var(--accent-deep); margin-bottom:7px; }.catalog-head h2 { font:600 clamp(22px,4vw,30px)/1.15 "Noto Serif SC",serif; letter-spacing:.02em; }.result-count { color:var(--muted); font-size:12px; white-space:nowrap; padding-bottom:2px; }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.product-card { background:#fff; border:1px solid #e5ebe4; min-width:0; cursor:pointer; transition:transform .2s,box-shadow .2s; }.product-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(32,56,43,.1); }.product-image { aspect-ratio:1; background:linear-gradient(140deg,#edf3ed,#dbe8dc); overflow:hidden; }.product-image img { width:100%; height:100%; object-fit:cover; display:block; }.product-image.no-image { display:grid; place-items:center; color:#a2b2a6; font:500 28px "Noto Serif SC",serif; }.product-body { padding:13px 13px 14px; }.product-category { color:var(--accent-deep); font-size:10px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.product-name { font:600 15px/1.35 "Noto Serif SC",serif; margin:5px 0 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.product-meta { color:#758179; display:flex; gap:7px; flex-wrap:wrap; font-size:11px; line-height:1.35; min-height:16px; }.product-price { margin-top:12px; color:var(--ink); font:600 22px/1 Outfit,sans-serif; }.product-price small { font-size:11px; color:#7d8982; font-weight:400; margin-left:3px; }
.load-more-wrap { display:flex; justify-content:center; padding:28px 0 10px; }.load-more { border:1px solid var(--ink); color:var(--ink); background:transparent; padding:11px 24px; font:500 12px Outfit,"Noto Sans SC",sans-serif; cursor:pointer; }.load-more[hidden] { display:none; }.empty-state { text-align:center; padding:70px 0 90px; }.empty-mark { display:block; color:var(--accent); font-size:38px; margin-bottom:10px; }.empty-state h3 { font:600 20px "Noto Serif SC",serif; }.empty-state p { color:var(--muted); font-size:13px; margin-top:8px; }
footer { border-top:1px solid var(--line); margin-top:50px; padding-top:16px; display:flex; justify-content:space-between; gap:20px; color:#8b978f; font-size:11px; }.footer-brand,.footer-links { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }.footer-links { justify-content:flex-end; }.footer-links a { color:#718079; text-decoration:none; }.footer-links a:hover { color:var(--accent-deep); text-decoration:underline; }.police-link { display:inline-flex; align-items:center; gap:4px; }.police-link img { width:14px; height:14px; object-fit:contain; }
@media (max-width:800px) { .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px) { .app-shell { padding:0 15px 32px; }.hero { min-height:224px; margin:0 -15px; padding:25px 15px 23px; }.hero:after { font-size:190px; right:-4%; bottom:-50px; } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.product-body { padding:11px 10px 12px; }.product-name { font-size:14px; margin:4px 0 7px; }.product-price { font-size:20px; margin-top:10px; }.catalog-head { align-items:start; flex-direction:column; gap:6px; }.result-count { order:-1; }.catalog-head h2 { font-size:24px; } footer { margin-top:36px; flex-direction:column; gap:12px; }.footer-links { justify-content:flex-start; } }
@media (prefers-reduced-motion:reduce) { .product-card { transition:none; } }