/* ==========================================================
   DESIGN LAYER — shared base (loaded after styles.css + catalog.css)
   ========================================================== */
:root{--num:var(--serif);--ease:cubic-bezier(.2,.7,.2,1)}
.dz .stat-v,.dz .point-no,.dz .cat-no,.dz .p-price,.dz .faq-no,.dz .deal-price strong,.dz .f-mark{font-family:var(--num)}
.dz .hero-art{display:none}

/* department art */
.dz .medal{position:relative;display:grid;place-items:center;width:66px;height:66px;margin:0 0 20px;border-radius:50%;color:var(--md-ic,var(--red));background:var(--md-bg,transparent);--accent:var(--md-ac,var(--gold));transition:transform .5s var(--ease)}
.dz .dept-art{width:38px;height:38px;display:block}
.dz .dept-art .ac{fill:var(--accent);stroke:none;opacity:.38}
.dz .cat:hover .medal{transform:translateY(-3px) rotate(-4deg)}
.dz .cat-media .medal{margin:0}
.dz .cat-media.has-img .medal{display:none}
.dz .cat-media img{object-position:50% 55%}
.dz .cat-grid.with-photos .cat-media{background-image:var(--md-pat,none);background-size:var(--md-pat-size,auto)}
.dz .cat-grid.with-photos .cat-count{top:12px;left:12px;right:auto;bottom:auto;z-index:2}

/* hero photo + floating product showcase (real order-sheet images) */
.dz .hero-media{position:relative}
.dz .showcase{position:absolute;inset:0;pointer-events:none}
.dz .sc-orn{display:none}
.dz .sc{position:absolute;margin:0;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:#fff;box-shadow:0 18px 40px -18px rgba(60,20,10,.35);min-width:200px;max-width:240px;animation:dzFloat 7s ease-in-out infinite}
.dz .sc:nth-of-type(n+4){display:none}
.dz .sc-img{flex:none;width:64px;height:64px;display:grid;place-items:center;background:#f4f1ec;overflow:hidden}
.dz .sc-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:4px}
.dz .sc figcaption{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0}
.dz .sc-n{font-size:13px;color:var(--ink);font-weight:600}
.dz .sc-p{font-family:var(--num);font-size:19px;color:var(--red);font-weight:600}
.dz .sc-0{left:-56px;bottom:22%}
.dz .sc-1{right:-34px;top:16%;animation-delay:-2.3s}
.dz .sc-2{right:-18px;bottom:6%;animation-delay:-4.6s}
.dz .sc-seal{position:absolute;left:-14px;top:10%;writing-mode:vertical-rl;padding:14px 8px;background:var(--red);color:#fff;font:600 13px/1 var(--serif-zh);letter-spacing:.3em;box-shadow:0 10px 24px -10px rgba(120,10,20,.6)}
html:not([data-lang="zh"]) .dz .sc-seal{writing-mode:horizontal-tb;padding:8px 12px;letter-spacing:.14em;text-transform:uppercase;font:600 11px/1 var(--sans)}
@keyframes dzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* store photo strip (about) */
.store-strip{margin-top:88px}
.ss-label{display:flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:22px}
html[data-lang="zh"] .ss-label{letter-spacing:.4em;font-size:13.5px}
.ss-label::before{content:"";width:40px;height:1px;background:var(--gold)}
.ss-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:18px}
.sp{position:relative;margin:0;overflow:hidden;background:#eee}
.sp img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1.2s var(--ease)}
.sp-a img{aspect-ratio:auto;height:100%}
.sp:hover img{transform:scale(1.04)}
.sp figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;color:#fff;font-size:14px;letter-spacing:.06em;background:linear-gradient(transparent,rgba(20,8,6,.62))}
html[data-lang="zh"] .sp figcaption{letter-spacing:.16em}
.visit-side{display:grid;gap:18px;align-self:stretch}
.sp-ext img{aspect-ratio:16/9}

/* catalogue banner */
.cx-banner{position:relative;isolation:isolate;overflow:hidden;padding:64px 28px 60px;color:#fff}
.cx-banner-bg{position:absolute;inset:0;z-index:-1}
.cx-banner-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.cx-banner-bg::after{content:"";position:absolute;inset:0;background:var(--bn-ov,linear-gradient(90deg,rgba(90,8,18,.86),rgba(90,8,18,.55)))}
.cx-banner .h-display{color:#fff}
.cx-banner .label{color:var(--gold-l)}
.cx-banner .sub{color:rgba(255,255,255,.86)}
.catalog .section-head.cat-head.cx-banner{margin-bottom:40px}

/* scroll reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.cat-grid.rv .cat,.prod-grid.rv .prod,.points.rv .point{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s var(--ease)}
.cat-grid.rv.in .cat,.prod-grid.rv.in .prod,.points.rv.in .point{opacity:1;transform:none}
.rv.in>:nth-child(2){transition-delay:.05s}.rv.in>:nth-child(3){transition-delay:.1s}.rv.in>:nth-child(4){transition-delay:.15s}.rv.in>:nth-child(5){transition-delay:.2s}.rv.in>:nth-child(6){transition-delay:.25s}.rv.in>:nth-child(7){transition-delay:.3s}.rv.in>:nth-child(8){transition-delay:.35s}.rv.in>:nth-child(n+9){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.dz .sc{animation:none}.rv,.rv *{opacity:1!important;transform:none!important}}

@media (max-width:1100px){.dz .sc-0{left:-20px}.dz .sc-1{right:-10px}.dz .sc-2{right:-6px}}
@media (max-width:900px){
  .dz .hero-inner>*{min-width:0}
  .dz .showcase{position:static;display:flex;gap:10px;overflow-x:auto;padding:16px 2px 4px;scrollbar-width:none;pointer-events:auto}
  .dz .showcase::-webkit-scrollbar{display:none}
  .dz .sc{position:relative;inset:auto;flex:none;min-width:0;max-width:none;width:auto;animation:none;padding:8px 12px 8px 8px}
  .dz .sc:nth-of-type(n+4){display:flex}
  .dz .sc-img{width:52px;height:52px}
  .dz .sc-seal{display:none}
  .dz .hero-media{flex-direction:column;align-items:stretch}
  .ss-grid{grid-template-columns:1fr 1fr}
  .sp-a{grid-column:1/-1}
  .sp-a img{aspect-ratio:16/10}
}
@media (max-width:640px){
  .store-strip{margin-top:56px}
  .ss-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px;scrollbar-width:none}
  .ss-grid::-webkit-scrollbar{display:none}
  .sp{flex:none;width:78%;scroll-snap-align:start}
  .sp img,.sp-a img{aspect-ratio:4/5}
  .cx-banner{padding:40px 18px 36px}
  .dz .medal{width:56px;height:56px;margin-bottom:14px}
  .dz .dept-art{width:32px;height:32px}
}

.catalog .section-head.cat-head.cx-banner{max-width:none}
/* ==========================================================
   DIRECTION A — "Imperial Lacquer 御品"
   lacquer red · gold foil · ivory silk · Cinzel / Cormorant / Noto Serif SC
   ========================================================== */
:root{
  --lq:#5a0912; --lq-2:#7d0d1b; --lq-3:#3a050b;
  --red:#a30f24; --red-d:#7d0d1b; --gold:#c9a14a; --gold-l:#f1d48c; --gold-d:#8a6a22;
  --ivory:#fbf4e8; --line:#ead9bd;
  --foil:linear-gradient(100deg,#b8892f 0%,#f6dc95 28%,#c99a3e 52%,#f9e3a6 74%,#a77a26 100%);
  --silk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --glat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e2bd6a' stroke-width='.7' opacity='.55'%3E%3Cpath d='M0 32h16V16h32v32H16V32M32 0v16M32 48v16M48 32h16'/%3E%3Cpath d='M24 24h16v16H24z'/%3E%3C/g%3E%3C/svg%3E");
  --num:"Cormorant Garamond",Georgia,serif;
  --cap:"Cinzel","Cormorant Garamond",Georgia,serif;
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cg fill='none' stroke='%23c9a14a'%3E%3Cpath d='M0 7h62M98 7h62'/%3E%3Cpath d='M80 1l6 6-6 6-6-6z' fill='%23c9a14a'/%3E%3Ccircle cx='68' cy='7' r='2'/%3E%3Ccircle cx='92' cy='7' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
body{background:var(--ivory) var(--silk)}
.label{font-family:var(--cap);letter-spacing:.28em;color:var(--red)}
html[data-lang="zh"] .label{font-family:var(--serif-zh);letter-spacing:.42em}
.rule{width:160px;height:14px;background:var(--orn) no-repeat center/contain}
.section-head .label::after,.label::before{background:var(--gold)}

/* top bar + header */
.topbar{background:linear-gradient(90deg,var(--lq-3),var(--lq) 50%,var(--lq-3));color:#f0dcae}
.topbar a.tb-item:hover{color:var(--gold-l)}
.site-header{background:rgba(251,244,232,.96);border-bottom:0;box-shadow:0 1px 0 var(--gold),0 4px 0 -2px rgba(201,161,74,.35)}
.nav a{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.06em}
html[data-lang="zh"] .nav a{font-family:var(--serif-zh);font-size:15.5px;letter-spacing:.14em}
.nav a::after{background:var(--gold)}
.lang-sw{border-color:var(--gold-d)}
.lang-sw button{color:var(--red-d)}
.lang-sw button+button{border-left-color:rgba(138,106,34,.35)}
.lang-sw button.on{background:var(--lq);color:var(--gold-l)}

/* hero — lacquer panel */
.hero{background:radial-gradient(ellipse 70% 90% at 70% 40%,#93111f 0%,var(--lq-2) 38%,var(--lq) 70%,var(--lq-3) 100%);color:#f5e7c8;padding-top:92px}
.hero::before{content:"";position:absolute;inset:0;background:var(--glat);background-size:64px;opacity:.16;-webkit-mask:radial-gradient(ellipse at 70% 45%,transparent 25%,#000 75%);mask:radial-gradient(ellipse at 70% 45%,transparent 25%,#000 75%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--foil)}
.hero-pattern{display:none}
.eyebrow{color:var(--gold-l);font-family:var(--cap);letter-spacing:.3em}
html[data-lang="zh"] .eyebrow{font-family:var(--serif-zh);letter-spacing:.5em}
.eyebrow .line{background:var(--gold)}
.display{color:#fbf0d6;text-shadow:0 2px 30px rgba(0,0,0,.25)}
html[data-lang] .display em{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
html[data-lang="zh"] .display em{font-style:normal;-webkit-text-fill-color:transparent}
.lead{color:#ecd7b6}
.btn-gold{background:var(--foil);background-size:200% 100%;border:0;color:var(--lq-3);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:background-position .6s ease,transform .3s}
.btn-gold:hover{background:var(--foil);background-size:200% 100%;background-position:100% 0;color:var(--lq-3);transform:translateY(-2px)}
.hero .btn-ghost{background:transparent;color:var(--gold-l);border-color:rgba(241,212,140,.6)}
.hero .btn-ghost:hover{background:rgba(241,212,140,.1);color:#fff}
.hero-frame{background:linear-gradient(160deg,#f1d48c,#a77a26 60%,#e9c77a);border:0;padding:8px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.hero-frame::before{inset:-14px;border:1px solid rgba(241,212,140,.45)}
.hero-frame::after{content:"";position:absolute;inset:-28px;border-radius:999px 999px 26px 26px;border:1px dashed rgba(241,212,140,.18);pointer-events:none}
.dz .sc{background:#fbf4e8;border:1px solid var(--gold);outline:1px solid rgba(201,161,74,.4);outline-offset:3px;box-shadow:0 24px 50px -20px rgba(0,0,0,.65)}
.dz .sc-img{background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.dz .sc-p{color:var(--red)}
.dz .sc-seal{background:var(--foil);color:var(--lq-3)}
.stats{background:transparent;box-shadow:none;border-top:1px solid rgba(241,212,140,.28);margin-top:72px}
.stats li+li{border-left:1px solid rgba(241,212,140,.22)}
.stat-v{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:54px}
.stat-l{color:#ecd7b6}

/* sections */
.about,.cats,.products,.visit,.faq{background:transparent}
.about{background:linear-gradient(#fffaf1,transparent 40%)}
.point{background:rgba(255,255,255,.7);border-color:var(--line)}
.point:hover{background:#fff}
.point-ic{color:var(--red)}
.point-no{color:var(--gold-d)}
.cats{background:#fffaf2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.cats::before{content:"";position:absolute;inset:0;background:var(--lattice);background-size:96px;opacity:.07;pointer-events:none}
.cat-grid{gap:16px;border:0;background:transparent}
.cat{background:#fff;border:1px solid var(--line);box-shadow:0 1px 0 rgba(201,161,74,.25)}
.cat::after{background:var(--foil)}
.cat:hover{border-color:var(--gold);box-shadow:0 24px 44px -26px rgba(122,13,27,.45);transform:translateY(-4px)}
.dz .medal{--md-ic:var(--lq-2);background:radial-gradient(circle at 35% 30%,#fffaf0,#f6e7c6);box-shadow:0 0 0 1px var(--gold),0 0 0 4px #fff,0 0 0 5px rgba(201,161,74,.55)}
.cat-no{color:var(--gold-d)}
.cat-grid.with-photos .cat-media{background-color:#fbf3e4;border-bottom:1px solid var(--line);--md-pat:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 22%,transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20h10V10h20v20H10V20M20 0v10M20 30v10M30 20h10' fill='none' stroke='%23c9a14a' stroke-width='.6' opacity='.45'/%3E%3C/svg%3E");--md-pat-size:auto,40px}
.cat-more{background:var(--lq)!important;color:#f0dcae;border-color:var(--lq)!important}
.cat-more h3{color:var(--gold-l)!important}
.cat-more p{color:#ecd7b6!important}
.cat-more .more-ic{color:var(--gold-l)}

/* product cards */
.prod{background:#fffdf8;border:1px solid var(--line);position:relative}
.prod::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,161,74,.28);pointer-events:none;z-index:1;transition:border-color .3s}
.prod:hover{border-color:var(--gold);box-shadow:0 26px 50px -30px rgba(122,13,27,.5);transform:translateY(-4px)}
.prod:hover::before{border-color:var(--gold)}
.p-img,.cx-prod .p-img{--prod-bg:radial-gradient(circle at 50% 45%,#fff 0%,#f4ede0 75%)}
.p-img{background:var(--prod-bg)}
.p-price{color:var(--red);font-weight:600}
.chip{border-color:var(--line);background:#fffaf2}
.chip.on{background:var(--lq);border-color:var(--lq);color:var(--gold-l)}
.chip.on small{color:#f0dcae}
.cx-search,.cx-sort{border-color:var(--gold);background-color:#fffdf8}
.cx-banner{border:1px solid var(--gold);outline:1px solid rgba(201,161,74,.4);outline-offset:5px}
.cx-banner{--bn-ov:radial-gradient(ellipse at 50% 40%,rgba(125,13,27,.72),rgba(58,5,11,.92))}
.cx-banner .h-display{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-more .btn-ghost{border-color:var(--gold-d);color:var(--lq)}
.cx-more .btn-ghost:hover{background:var(--lq);color:var(--gold-l)}

/* photos */
.sp{box-shadow:0 0 0 1px var(--gold),0 0 0 5px var(--ivory),0 0 0 6px rgba(201,161,74,.5)}
.sp figcaption{background:linear-gradient(transparent,rgba(58,5,11,.82));font-family:var(--serif);font-size:17px}
html[data-lang="zh"] .sp figcaption{font-family:var(--serif-zh);font-size:15px}
.ss-label{font-family:var(--cap);color:var(--red)}
.map-frame::before{border-color:var(--gold)}

/* footer */
.site-footer{background:radial-gradient(ellipse at 50% 0%,var(--lq-2),var(--lq-3) 70%);color:#e8d3ad}
.site-footer::before{background:var(--foil);height:4px}
.site-footer h4{color:var(--gold-l)}
.f-bottom{border-top-color:rgba(241,212,140,.2)}
.wa-float{box-shadow:0 0 0 3px var(--gold-l),0 12px 30px -10px rgba(0,0,0,.5)}
@media (max-width:900px){
  .hero{padding-top:56px}
  .hero-frame::after{display:none}
  .tabbar a.on{color:var(--lq-2)}
  .tabbar a.on::before{background:var(--gold)}
}
@media (max-width:640px){
  .cat-grid{gap:10px}
  .stat-v{font-size:38px}
}