/* ============================================================
       忠曜堂 (ZhongYaoTang) — Brand Design Tokens v1.0
       Applied from the official design system (April 2026)
       ============================================================ */

    /* Brand display font: 阿里妈妈东方大楷 */
    @font-face {
      font-family: 'DongFangDaKai';
      /* 子集字体(仅含全站实际用字,3.6MB→184KB)。新增商品若出现新汉字:重跑 fontTools.subset 重生成 */
      src: url('fonts/DongFangDaKai-subset.woff2') format('woff2'),
           url('fonts/DongFangDaKai-subset.otf') format('opentype');
      font-weight: normal; font-style: normal; font-display: swap;
    }

    :root {
      /* Brand colours (locked) */
      --gold:        #A67C2A;   /* Brand Gold — primary */
      --gold-light:  #E0C470;
      --gold-soft:   #F0DFB0;
      --gold-deep:   #8A642A;
      --red:         #A02022;   /* Chinese Red */
      --red-deep:    #801618;
      --wood:        #2A1608;   /* Deep Wood — primary dark bg (locked) */
      --wood-card:   #3E2210;   /* dark card surface */
      --wood-line:   #5A3418;
      --cream:       #F2E8D0;   /* primary light / text on dark */
      --cream-dim:   #D8C9A8;
      --beige:       #D4B48C;

      --line-gold:   rgba(166,124,42,0.40);
      --line-faint:  rgba(242,232,208,0.12);

      /* Type */
      --font-cjk-display: 'DongFangDaKai', 'Noto Serif SC', serif;
      --font-cjk:    'Noto Serif SC', 'Songti SC', 'SimSun', serif;
      --font-latin-display: 'Playfair Display', 'Cormorant Garamond', serif;
      --font-body:   'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;

      --radius:      3px;       /* near-square corners per brand */
      --maxw:        1140px;
      --shadow-md:   0 4px 16px rgba(20,10,4,0.35);
      --shadow-lg:   0 16px 48px rgba(10,5,2,0.55);
      --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      position: relative;
      background-color: var(--wood);
      color: var(--cream);
      font-family: var(--font-body);
      font-size: 1.05rem;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Layer 1 — fixed photographic atmosphere (底图照片), darkened with a
       deep-wood scrim so text stays fully legible. */
    body::before {
      content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background-color: var(--wood);
      background-image:
        linear-gradient(180deg, rgba(18,9,3,0.97) 0%, rgba(28,15,7,0.93) 18%, rgba(26,14,6,0.94) 60%, rgba(20,11,4,0.97) 100%),
        url('assets/brand_bg_web.jpg');
      background-size:     cover, cover;
      background-position: center, center top;
      background-repeat:   no-repeat, no-repeat;
    }

    /* Layer 2 — 铜钱纹 texture, fixed to the viewport so it stays consistent
       while scrolling: invisible at the TOP of the screen, fading IN to a clear
       pattern toward the BOTTOM of the screen. */
    body::after {
      content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-image: url('assets/coin_pattern.svg');
      background-size: 44px 44px;
      background-repeat: repeat;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(0,0,0,1) 100%);
              mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(0,0,0,1) 100%);
    }

    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
    .cjk  { font-family: var(--font-cjk); }

    /* Thin gold rule used as section divider */
    .rule {
      width: 64px; height: 1px; background: var(--gold);
      margin: 22px auto; opacity: .75;
    }
    .rule.left { margin-left: 0; }

    /* ============================== NAV ============================== */
    header {
      position: sticky; top: 0; z-index: 50;
      /* persistent, always-visible bar */
      background: rgba(24,13,5,0.92);
      -webkit-backdrop-filter: blur(12px);
              backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(166,124,42,0.28);
      box-shadow: 0 6px 22px rgba(0,0,0,0.28);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
    .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--cream); }
    .brand img { width: 38px; height: 38px; object-fit: contain; }
    .brand .names { line-height: 1.1; }
    .brand .cn { font-family: var(--font-cjk-display); font-size: 1.45rem; color: var(--gold-light); letter-spacing: 0.14em; }
    .brand .en { font-family: var(--font-latin-display); font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cream-dim); }
    .nav-links { display: flex; align-items: center; gap: 30px; }
    .nav-links a {
      color: var(--cream-dim); text-decoration: none;
      font-family: var(--font-latin-display);
      font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
      transition: color .3s var(--ease);
    }
    .nav-links a:hover { color: var(--gold-light); }
    .nav-shop {
      border: 1px solid var(--line-gold); padding: 9px 20px;
      color: var(--gold-light) !important;
    }
    .nav-shop:hover { background: rgba(166,124,42,0.10); border-color: var(--gold); }

    /* Language dropdown */
    .lang { position: relative; }
    .lang-btn {
      display: inline-flex; align-items: center; gap: 7px;
      background: transparent; border: none; cursor: pointer;
      color: var(--cream-dim);
      font-family: var(--font-latin-display); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
      transition: color .3s var(--ease);
    }
    .lang-btn:hover, .lang.open .lang-btn { color: var(--gold-light); }
    .lang-btn svg { stroke: currentColor; fill: none; }
    .lang-btn .globe { width: 15px; height: 15px; }
    .lang-btn .chev { width: 11px; height: 11px; transition: transform .3s var(--ease); }
    .lang.open .lang-btn .chev { transform: rotate(180deg); }
    .lang-menu {
      position: absolute; right: 0; top: calc(100% + 16px);
      min-width: 172px; padding: 8px 0;
      background: rgba(24,13,5,0.97);
      border: 1px solid var(--line-gold); border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
      z-index: 60;
    }
    .lang:hover .lang-menu, .lang.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .lang-menu a {
      display: block; padding: 10px 20px;
      color: var(--cream-dim); text-decoration: none;
      font-family: var(--font-latin-display); font-size: 0.84rem; letter-spacing: 0.05em; text-transform: none;
      transition: color .25s var(--ease), background .25s var(--ease);
    }
    .lang-menu a:hover { color: var(--gold-light); background: rgba(166,124,42,0.10); }

    /* ============================== HERO ============================== */
    .hero { padding: 80px 0 70px; }
    .hero-grid {
      display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center;
    }
    .eyebrow {
      font-family: var(--font-latin-display);
      font-size: 0.74rem; letter-spacing: 0.34em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 26px;
    }
    .hero h1 {
      font-family: var(--font-cjk-display);
      font-weight: 400;
      font-size: clamp(2.35rem, 7vw, 5rem);
      letter-spacing: 0.18em; line-height: 1.1;
      color: var(--cream); margin-bottom: 18px;
    }
    .hero .latin-title {
      font-family: var(--font-latin-display);
      font-style: italic; font-weight: 400;
      font-size: clamp(1.4rem, 3vw, 2rem);
      color: var(--gold-light); margin-bottom: 28px; line-height: 1.3;
    }
    .hero p.lede {
      max-width: 460px; color: var(--cream-dim); font-size: 1.12rem;
    }
    .hero p.lede .cjk-line { display: block; color: var(--cream); margin-bottom: 6px; font-size: 1.05rem; letter-spacing: 0.04em; }
    .hero-cta { margin-top: 36px; display: flex; gap: 18px; flex-wrap: wrap; }

    .hero-media { position: relative; }
    .hero-carousel {
      position: relative; aspect-ratio: 3 / 4; overflow: hidden;
      border: 1px solid var(--line-gold); box-shadow: var(--shadow-lg);
    }
    .hero-carousel .hero-slide {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; display: block;
      opacity: 0; transition: opacity 1.2s var(--ease);
    }
    .hero-carousel .hero-slide.active { opacity: 1; }
    .hero-media .stamp-float {
      position: absolute; bottom: -26px; right: -18px;
      width: 132px; height: 132px;
      background: var(--cream); border-radius: 50%;
      display: grid; place-items: center;
      box-shadow: var(--shadow-md);
      transform: rotate(-8deg);
    }
    .hero-media .stamp-float img { width: 84%; height: auto; border: none; box-shadow: none; mix-blend-mode: multiply; }

    .trust-row {
      margin-top: 58px; padding-top: 26px; border-top: 1px solid var(--line-faint);
      display: flex; flex-wrap: wrap; gap: 36px;
      color: var(--cream-dim); font-family: var(--font-latin-display);
      font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
    }
    .trust-row span { display: inline-flex; align-items: center; gap: 10px; }
    .trust-row svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; }

    /* ============================== SECTION HEAD ============================== */
    .section-head { text-align: center; margin: 96px 0 50px; }
    .section-head .eyebrow { margin-bottom: 12px; }
    .section-head h2 {
      font-family: var(--font-cjk-display); font-weight: 400;
      font-size: clamp(1.55rem, 5vw, 2.9rem); letter-spacing: 0.12em; color: var(--cream);
    }
    .section-head .sub { font-family: var(--font-latin-display); font-style: italic; color: var(--gold-light); margin-top: 8px; font-size: 1.1rem; }

    /* ============================== PRODUCT ============================== */
    .grid {
      display: flex; flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
    }
    .card {
      width: 380px; max-width: 100%;
      background: var(--wood-card);
      border: 1px solid var(--line-gold);
      border-radius: var(--radius);
      overflow: hidden; display: flex; flex-direction: column;
      transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

    .card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #1d0f06; }
    .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
    .card:hover .card-media img { transform: scale(1.04); }
    .card-media.placeholder { display: grid; place-items: center; }
    .placeholder-art { text-align: center; color: var(--gold-deep); }
    .placeholder-art img { width: 66px; height: 66px; opacity: .5; margin: 0 auto 12px; }
    .placeholder-art small { font-family: var(--font-latin-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); }
    .badge {
      position: absolute; top: 14px; left: 14px;
      background: var(--red); color: var(--gold-soft);
      font-family: var(--font-latin-display);
      font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
      padding: 6px 13px; border-radius: var(--radius);
    }

    .card-body { padding: 30px 28px 32px; display: flex; flex-direction: column; flex: 1; }
    .card-body h3 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.08em; color: var(--cream); margin-bottom: 4px; }
    .card-body .name-en { font-family: var(--font-latin-display); font-style: italic; font-size: 1.15rem; color: var(--gold-light); margin-bottom: 16px; }
    .card-desc { color: var(--cream-dim); font-size: 1rem; margin-bottom: 22px; }
    .card-desc .poem { display: block; font-family: var(--font-cjk); color: var(--cream); letter-spacing: 0.05em; margin-bottom: 8px; }

    .features { list-style: none; margin-bottom: 26px; }
    .features li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.98rem; color: var(--cream); padding: 5px 0; }
    .features .tick { width: 16px; height: 16px; flex-shrink: 0; margin-top: 5px; stroke: var(--gold); fill: none; }

    .price-row {
      display: flex; align-items: baseline; gap: 12px;
      margin-top: auto; margin-bottom: 22px; padding-top: 22px; border-top: 1px solid var(--line-faint);
    }
    .price { font-family: var(--font-latin-display); font-size: 2.1rem; font-weight: 600; color: var(--cream); }
    .price .cur { font-size: 1.1rem; color: var(--gold-light); vertical-align: super; margin-right: 1px; }
    .price-cny { font-family: var(--font-latin-display); font-size: 1.25rem; color: var(--gold-light); align-self: center; }
    .price-was { font-size: 1.05rem; color: var(--cream-dim); text-decoration: line-through; opacity: .65; }
    .price-note { margin-left: auto; font-family: var(--font-latin-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); }

    /* ============================== BUY BUTTON ============================== */
    .buy-btn {
      display: flex; align-items: center; justify-content: center; gap: 11px;
      width: 100%;
      font-family: var(--font-latin-display);
      font-size: 0.92rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--cream);
      background: var(--gold);
      border: 1px solid var(--gold);
      border-radius: var(--radius);
      padding: 17px 24px; text-decoration: none; cursor: pointer;
      transition: background .3s var(--ease), color .3s var(--ease);
    }
    .buy-btn:hover { background: var(--gold-deep); border-color: var(--gold-light); }
    .buy-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: var(--font-latin-display);
      font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold-light); text-decoration: none;
      border: 1px solid var(--line-gold); border-radius: var(--radius);
      padding: 15px 26px; transition: all .3s var(--ease);
    }
    .btn-ghost:hover { background: rgba(166,124,42,0.10); border-color: var(--gold); }
    .btn-ghost svg { width: 17px; height: 17px; stroke: currentColor; fill: none; flex-shrink: 0; }

    .pay-note { text-align: center; font-family: var(--font-latin-display); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--cream-dim); margin-top: 13px; }
    .pay-note .lock { color: var(--gold); }

    /* ============================== PHILOSOPHY ============================== */
    .story {
      margin: 104px 0;
      border-top: 1px solid var(--line-gold);
      border-bottom: 1px solid var(--line-gold);
      padding: 72px 0; text-align: center;
    }
    .story .seal { width: 190px; height: auto; margin: 0 auto 26px; display: block;
      opacity: .9; transform: rotate(-3deg);
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)); }
    .story blockquote {
      font-family: var(--font-cjk-display); font-weight: 400;
      font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: 0.1em; line-height: 1.5;
      color: var(--cream); max-width: 720px; margin: 0 auto 14px;
    }
    .story .by { font-family: var(--font-latin-display); font-style: italic; color: var(--gold-light); font-size: 1.15rem; }

    .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; margin-top: 56px; text-align: left; }
    .pillar .num { font-family: var(--font-latin-display); color: var(--gold); font-size: 0.72rem; letter-spacing: 0.24em; margin-bottom: 12px; }
    .pillar h4 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0.06em; color: var(--gold-light); margin-bottom: 6px; }
    .pillar .h4-en { font-family: var(--font-latin-display); font-style: italic; color: var(--cream-dim); font-size: 0.95rem; margin-bottom: 10px; }
    .pillar p { color: var(--cream-dim); font-size: 0.96rem; }

    /* ============================== FOOTER ============================== */
    footer { border-top: 1px solid var(--line-faint); padding: 56px 0 46px; text-align: center; }
    footer .flogo { width: 64px; height: auto; margin: 0 auto 16px; display: block; }
    .footer-cn { font-family: var(--font-cjk-display); font-size: 1.5rem; letter-spacing: 0.16em; color: var(--gold-light); margin-bottom: 4px; }
    .footer-tag { font-family: var(--font-latin-display); font-style: italic; color: var(--cream-dim); margin-bottom: 22px; }
    .footer-links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
    .footer-links a { color: var(--cream-dim); text-decoration: none; font-family: var(--font-latin-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color .3s; }
    .footer-links a:hover { color: var(--gold-light); }
    .footer-fine { color: rgba(242,232,208,0.45); font-size: 0.82rem; line-height: 1.7; max-width: 540px; margin: 0 auto; }

    /* ============================== STORES ============================== */
    .city-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
    .city-btn {
      font-family: var(--font-latin-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--cream-dim); background: transparent; cursor: pointer;
      border: 1px solid var(--line-gold); border-radius: var(--radius);
      padding: 9px 18px; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
    }
    .city-btn:hover { color: var(--gold-light); border-color: var(--gold); }
    .city-btn.active { color: var(--wood); background: var(--gold); border-color: var(--gold); }

    .store-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
    .store-card {
      width: 358px; max-width: 100%;
      background: var(--wood-card); border: 1px solid var(--line-gold); border-radius: var(--radius);
      padding: 28px 26px; text-align: left; display: flex; flex-direction: column;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    }
    .store-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .store-card .city-tag { font-family: var(--font-latin-display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
    .store-card h4 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--cream); margin-bottom: 2px; }
    .store-card .store-en { font-family: var(--font-latin-display); font-style: italic; color: var(--gold-light); font-size: 1.02rem; margin-bottom: 18px; }
    .store-info { list-style: none; margin-bottom: 18px; }
    .store-info li { display: flex; align-items: flex-start; gap: 10px; color: var(--cream-dim); font-size: 0.92rem; padding: 4px 0; line-height: 1.5; }
    .store-info svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; flex-shrink: 0; margin-top: 4px; }
    .map-link {
      margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-latin-display); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--gold-light); text-decoration: none;
      border-top: 1px solid var(--line-faint); padding-top: 16px; transition: color .3s var(--ease);
    }
    .map-link:hover { color: var(--gold); }
    .map-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
    .stores-empty { text-align: center; color: var(--cream-dim); font-style: italic; display: none; }

    /* ===== Store locator — city-grouped accordion ===== */
    .city-stores { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
    .city-group { border: 1px solid var(--line-gold); border-radius: var(--radius); background: var(--wood-card); overflow: hidden; transition: border-color .3s var(--ease); contain: layout; }
    @keyframes cgReveal { from { opacity: 0; } to { opacity: 1; } }
    .city-group.open .cg-body { animation: cgReveal .2s var(--ease); }
    .city-group.open { border-color: var(--gold); }
    .cg-head { width: 100%; display: flex; align-items: center; gap: 14px; background: transparent; border: none; cursor: pointer; padding: 18px 22px; text-align: left; color: var(--cream); font-family: inherit; }
    .cg-title { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.06em; display: flex; align-items: baseline; gap: 11px; }
    .cg-en { font-family: var(--font-latin-display); font-style: italic; font-size: 0.9rem; color: var(--gold-light); letter-spacing: 0.02em; }
    .cg-count { margin-left: auto; font-family: var(--font-latin-display); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--cream-dim); white-space: nowrap; }
    .cg-chev { width: 9px; height: 9px; border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(45deg); transition: transform .3s var(--ease); flex-shrink: 0; opacity: 0.7; margin-top: -3px; }
    .city-group.open .cg-chev { transform: rotate(-135deg); margin-top: 3px; }
    .cg-body { display: none; padding: 0 22px 8px; }
    .city-group.open .cg-body { display: block; }
    .store-row { padding: 16px 0; border-top: 1px solid var(--line-faint); }
    .store-row .sr-name { font-family: var(--font-cjk-display); font-size: 1.08rem; color: var(--cream); letter-spacing: 0.04em; margin-bottom: 9px; }
    .store-row .sr-name span { font-family: var(--font-latin-display); font-style: italic; font-size: 0.86rem; color: var(--gold-light); margin-left: 9px; }
    .sr-addr { display: flex; align-items: flex-start; gap: 9px; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.55; margin-bottom: 6px; }
    .sr-addr svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; flex-shrink: 0; margin-top: 3px; }
    .sr-note { color: var(--gold-light); font-size: 0.82rem; font-style: italic; margin: 0 0 6px 24px; }
    .store-row .map-link { border-top: none; padding-top: 10px; margin-top: 0; }

    /* ============================== CONTACT ============================== */
    .contact-inner { max-width: 620px; margin: 0 auto; text-align: center; }
    .contact-label { font-family: var(--font-latin-display); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
    .contact-divider { width: 56px; height: 1px; background: var(--line-gold); margin: 42px auto; opacity: 0.55; }
    .contact-inner .invite { color: var(--cream-dim); font-size: 1.05rem; margin-bottom: 32px; }
    .contact-inner .invite .cjk-line { display: block; color: var(--cream); margin-bottom: 8px; letter-spacing: 0.05em; }
    .email-btn {
      display: inline-flex; align-items: center; gap: 11px;
      font-family: var(--font-latin-display); font-size: 1.08rem; letter-spacing: 0.04em;
      color: var(--wood); background: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius);
      padding: 15px 30px; text-decoration: none;
      transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
    }
    .email-btn:hover { background: var(--gold-deep); color: var(--cream); border-color: var(--gold-light); }
    .email-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
    .contact-note { margin-top: 18px; font-family: var(--font-latin-display); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); }

    /* ============================== BRAND STORY ============================== */
    .bs-mark { width: 58px; height: auto; display: block; margin: 0 auto 20px; opacity: 0.5; }
    .bs-prose { max-width: 720px; margin: 0 auto; text-align: center; }
    .bs-prose p { margin-bottom: 28px; }
    .bs-prose p:last-child { margin-bottom: 0; }
    .bs-prose .cn { display: block; font-family: var(--font-cjk); color: var(--cream); font-size: 1.16rem; line-height: 1.95; letter-spacing: 0.05em; margin-bottom: 9px; }
    .bs-prose .en { display: block; font-family: var(--font-body); color: var(--cream-dim); font-size: 1rem; line-height: 1.7; font-style: italic; }
    .bs-prose .bs-studio { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-faint); }
    .bs-prose .bs-studio .cn { font-size: 1.04rem; color: var(--gold-light); }
    .bs-prose .bs-studio .en { font-size: 0.92rem; }

    /* ============================== PLUSHIES (本草娃娃) ============================== */
    .plush-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
    .plush-card {
      width: 300px; max-width: 100%;
      background: var(--wood-card); border: 1px solid var(--line-gold); border-radius: var(--radius);
      overflow: hidden; display: flex; flex-direction: column;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    }
    .plush-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .plush-card .pm { aspect-ratio: 1 / 1; overflow: hidden; }
    .plush-card .pm img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
    .plush-card:hover .pm img { transform: scale(1.05); }
    .plush-body { padding: 18px 20px 22px; text-align: center; }
    .plush-body h4 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.06em; color: var(--cream); margin-bottom: 3px; }
    .plush-body .pen { font-family: var(--font-latin-display); font-style: italic; color: var(--gold-light); font-size: 0.92rem; margin-bottom: 12px; }
    .plush-price { font-family: var(--font-latin-display); font-size: 1.15rem; color: var(--cream); letter-spacing: 0.02em; }
    .plush-price .cny { color: var(--cream-dim); font-size: 0.92rem; }
    .plush-note { text-align: center; margin-top: 36px; font-family: var(--font-latin-display); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--cream-dim); }
    .plush-note .cjk { font-family: var(--font-cjk); }

    /* ============================== CART / SHOP ============================== */
    .add-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      font-family: var(--font-latin-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--wood); background: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius);
      padding: 9px 18px; cursor: pointer;
      transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
    }
    .add-btn:hover { background: var(--gold-deep); color: var(--cream); border-color: var(--gold-light); }
    .add-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
    .plush-body .add-btn { margin-top: 13px; }

    /* Bottom app bar (mobile) */
    .app-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
      background: rgba(20,11,4,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border-top: 1px solid var(--line-gold); padding: 9px 0 calc(9px + env(safe-area-inset-bottom)); }
    .app-bar-inner { display: flex; justify-content: space-around; align-items: center; max-width: 520px; margin: 0 auto; }
    .app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none;
      color: var(--cream-dim); font-family: var(--font-latin-display); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color .25s; }
    .app-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
    .app-tab:active { color: var(--gold-light); }

    /* Cart floating button */
    .cart-fab { position: fixed; right: 22px; bottom: 24px; z-index: 85; width: 56px; height: 56px; border-radius: 50%;
      background: var(--gold); border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
    .cart-fab.show { display: flex; }
    .cart-fab svg { width: 24px; height: 24px; stroke: var(--wood); fill: none; }
    .cart-fab .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
      background: var(--red); color: var(--cream); border-radius: 999px; font-family: var(--font-latin-display); font-size: 0.7rem;
      display: flex; align-items: center; justify-content: center; }

    /* Cart drawer */
    .cart-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(10,5,2,0.6); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .cart-overlay.open { opacity: 1; visibility: visible; }
    .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: 380px; max-width: 88vw;
      background: var(--wood); border-left: 1px solid var(--line-gold); transform: translateX(100%);
      transition: transform .35s var(--ease); display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .cart-drawer.open { transform: translateX(0); }
    .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 22px 16px; border-bottom: 1px solid var(--line-faint); position: sticky; top: 0; background: var(--wood); z-index: 3; }
    .cart-head h3 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.4rem; color: var(--cream); letter-spacing: 0.08em; }
    .cart-close { background: none; border: none; color: var(--cream-dim); cursor: pointer; font-size: 1.7rem; line-height: 1; padding: 0 4px; }
    .cart-close:hover { color: var(--gold-light); }
    .cart-items { padding: 8px 22px; }
    .cart-empty { color: var(--cream-dim); text-align: center; font-style: italic; padding: 48px 0; line-height: 1.8; }
    .cart-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-faint); }
    .ci-name { flex: 1; }
    .ci-name b { font-family: var(--font-cjk); color: var(--cream); font-weight: 400; display: block; font-size: 0.98rem; }
    .ci-name span { font-family: var(--font-latin-display); color: var(--cream-dim); font-size: 0.78rem; font-style: italic; }
    .qty { display: flex; align-items: center; gap: 9px; }
    .qty button { width: 24px; height: 24px; border: 1px solid var(--line-gold); background: transparent; color: var(--gold-light); border-radius: var(--radius); cursor: pointer; font-size: 1rem; line-height: 1; }
    .qty button:hover { border-color: var(--gold); color: var(--gold); }
    .qty span { color: var(--cream); min-width: 14px; text-align: center; font-family: var(--font-latin-display); }
    .ci-price { font-family: var(--font-latin-display); color: var(--cream); min-width: 50px; text-align: right; }
    .cart-foot { padding: 18px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-gold); }
    .cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
    .cart-total .lbl { font-family: var(--font-latin-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--cream-dim); }
    .cart-total .amt { font-family: var(--font-latin-display); font-size: 1.6rem; color: var(--cream); }
    .checkout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
      font-family: var(--font-latin-display); font-size: 0.92rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--wood); background: var(--gold); border: none; border-radius: var(--radius); padding: 15px; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
    .checkout-btn:hover { background: var(--gold-deep); color: var(--cream); }
    .checkout-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
    #paypalButtons { display: none; margin-bottom: 4px; min-height: 46px; }
    .cart-maint { display: none; text-align: center; background: rgba(166,124,42,0.15); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 16px 14px; }
    .cart-maint .cm-title { font-family: var(--font-latin-display); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--gold-light); margin-bottom: 9px; }
    .cart-maint .cm-body { font-family: var(--font-cjk); font-size: 0.82rem; line-height: 1.65; color: var(--cream-dim); }
    .cart-maint .cm-body a { color: var(--gold-light); text-decoration: none; }
    .cart-maint .cm-body a:hover { text-decoration: underline; }
    .cart-gift { text-align: center; font-family: var(--font-cjk); font-size: 0.8rem; line-height: 1.65; color: var(--gold-light); border: 1px dashed var(--line-gold); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 14px; }
    .cart-gift.on { background: rgba(166, 124, 42, 0.15); border-style: solid; color: var(--cream); }
    .ship-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .ship-row label { font-family: var(--font-latin-display); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--cream-dim); white-space: nowrap; }
    .ship-row select { flex: 1; max-width: 62%; background: var(--wood-deep, #1c0f06); color: var(--cream); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-cjk); font-size: 0.86rem; cursor: pointer; -webkit-appearance: none; appearance: none; }
    .ship-row select:focus { outline: none; border-color: var(--gold-light); }
    .ship-row input { flex: 1; max-width: 62%; background: var(--wood-deep, #1c0f06); color: var(--cream); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-cjk); font-size: 0.86rem; }
    .ship-row input::placeholder { color: var(--cream-dim); opacity: 0.55; }
    .ship-row input:focus { outline: none; border-color: var(--gold-light); }
    .cart-inapp { background: rgba(166,124,42,0.15); border: 1px solid var(--line-gold); border-radius: var(--radius); color: var(--gold-light); font-family: var(--font-cjk); font-size: 0.76rem; line-height: 1.6; text-align: center; padding: 10px 12px; margin-bottom: 12px; }
    .ship-amt { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .ship-amt .lbl { font-family: var(--font-latin-display); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--cream-dim); }
    .ship-amt .amt { font-family: var(--font-latin-display); font-size: 0.95rem; color: var(--cream); }
    .cart-ship { text-align: center; font-size: 0.72rem; color: var(--cream-dim); margin-top: 11px; letter-spacing: 0.04em; }
    .cart-help { text-align: center; font-size: 0.72rem; color: var(--cream-dim); margin-top: 7px; letter-spacing: 0.04em; }
    .cart-help a { color: var(--gold-light); text-decoration: none; }
    .cart-help a:hover { color: var(--gold); text-decoration: underline; }

    /* ============================== RESPONSIVE ============================== */
    @media (max-width: 860px) {
      .hero-grid { grid-template-columns: 1fr; gap: 48px; }
      .hero-media { max-width: 440px; margin: 0 auto; }
      .nav-links a { display: none; }   /* 手机隐藏全部顶部导航(含 E-Shop),改用底部 App 栏 */
      .lang { display: none; }
      .app-bar { display: block; }
      body { padding-bottom: 66px; }
      .cart-fab { bottom: 82px; right: 18px; }
    }
    @media (max-width: 560px) {
      body { font-size: 1rem; }
      .hero { padding: 52px 0 50px; }
      .trust-row { gap: 20px; }
      .hero-media .stamp-float { width: 104px; height: 104px; right: 4px; bottom: -22px; }
      .story { padding: 52px 0; }
    }
    @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }

/* ============================== BLIND BOX (盲盒) ============================== */
.blindbox { max-width: 940px; margin: 0 auto 30px; background: var(--wood-card); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 28px; }
.bb-top { display: flex; gap: 30px; align-items: center; }
.bb-img { flex: 0 0 270px; max-width: 46%; }
.bb-img img { width: 100%; border-radius: var(--radius); display: block; }
.bb-info { flex: 1; }
.bb-tag { font-family: var(--font-latin-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.bb-info h3 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.75rem; letter-spacing: 0.06em; color: var(--cream); margin-bottom: 3px; }
.bb-en { font-family: var(--font-latin-display); font-style: italic; color: var(--gold-light); font-size: 1.02rem; margin-bottom: 14px; }
.bb-note { color: var(--cream-dim); font-size: 0.93rem; line-height: 1.7; margin-bottom: 20px; }
.bb-buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bb-buy .plush-price { font-family: var(--font-latin-display); font-size: 1.35rem; color: var(--cream); }
.bb-options { display: flex; flex-direction: column; gap: 10px; }
.bb-opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px; border: 1px solid var(--line-faint); border-radius: var(--radius); background: rgba(0,0,0,0.12); }
.bb-opt--set { border-color: var(--line-gold); background: rgba(166,124,42,0.08); }
.bb-opt-info { display: flex; flex-direction: column; gap: 3px; }
.bb-opt-label { font-family: var(--font-cjk); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--cream-dim); }
.bb-opt-save { display: inline-block; margin-left: 8px; font-family: var(--font-cjk); font-size: 0.68rem; color: var(--gold-light); border: 1px solid var(--line-gold); border-radius: 999px; padding: 1px 8px; letter-spacing: 0.02em; }
.bb-opt .plush-price { font-family: var(--font-latin-display); font-size: 1.3rem; color: var(--cream); }
.bb-figs { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-faint); }
.bb-figs-title { text-align: center; font-family: var(--font-latin-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 18px; }
.bb-figs-sub { text-align: center; font-family: var(--font-latin-display); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); margin: 6px 0 14px; }
.bb-figs-sub--hidden { color: var(--gold-light); margin-top: 26px; }
.bb-figs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bb-fig { width: 96px; text-align: center; position: relative; }
.bb-fig--hidden img { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(166,124,42,0.5); }
.fig-badge { position: absolute; top: 5px; left: 5px; z-index: 2; background: var(--gold); color: var(--wood); font-family: var(--font-cjk); font-size: 0.58rem; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; }
.bb-fig img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-faint); display: block; }
.bb-fig { cursor: zoom-in; }
.bb-fig span { display: block; font-family: var(--font-cjk); font-size: 0.78rem; color: var(--cream-dim); margin-top: 7px; }
.bb-fig span em { display: block; font-family: var(--font-latin-display); font-style: italic; font-size: 0.66rem; color: var(--gold-light); margin-top: 1px; letter-spacing: 0.02em; }

/* Figure lightbox */
.fig-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,5,2,0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; cursor: zoom-out; }
.fig-lightbox[hidden] { display: none; }
.fig-lightbox img { max-width: min(86vw, 420px); max-height: 66vh; border-radius: var(--radius); border: 1px solid var(--line-gold); box-shadow: var(--shadow-lg); }
.fig-lightbox #flCaption { font-family: var(--font-cjk-display); font-size: 1.2rem; letter-spacing: 0.06em; color: var(--cream); margin: 0; }
.fig-lightbox .fl-hint { font-family: var(--font-latin-display); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--cream-dim); }

/* Solo full-width product (药壶) */
.solo-product { max-width: 940px; margin: 8px auto 30px; background: var(--wood-card); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 28px; display: flex; gap: 34px; align-items: center; }
.sp-media { flex-basis: 44%; flex-shrink: 0; position: relative; }
.sp-media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line-faint); display: block; filter: contrast(1.06) saturate(1.05) brightness(0.99); }
.sp-media::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  box-shadow: inset 0 0 58px 16px rgba(8,4,1,0.62), inset 0 0 110px 40px rgba(8,4,1,0.42);
  background: radial-gradient(78% 78% at 50% 44%, rgba(0,0,0,0) 40%, rgba(12,6,2,0.45) 80%, rgba(8,4,1,0.82) 100%); }
.sp-info { flex: 1; }
.sp-tag { font-family: var(--font-latin-display); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.sp-info h3 { font-family: var(--font-cjk-display); font-weight: 400; font-size: 1.75rem; letter-spacing: 0.06em; color: var(--cream); margin-bottom: 3px; }
.sp-en { font-family: var(--font-latin-display); font-style: italic; color: var(--gold-light); font-size: 1.02rem; margin-bottom: 16px; }
.sp-desc { color: var(--cream-dim); font-size: 0.93rem; line-height: 1.7; margin-bottom: 12px; }
.sp-note { color: var(--cream-dim); font-size: 0.8rem; line-height: 1.6; margin-bottom: 20px; opacity: 0.85; }
.sp-buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sp-buy .plush-price { font-family: var(--font-latin-display); font-size: 1.35rem; color: var(--cream); }
@media (max-width: 640px) {
  .blindbox { padding: 22px; }
  .bb-top { flex-direction: column; gap: 20px; text-align: center; }
  .bb-img { max-width: 78%; flex-basis: auto; }
  .bb-buy { justify-content: center; }
  .bb-opt { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
  .bb-opt-info { align-items: center; }
  .bb-opt .add-btn { justify-content: center; }
  .bb-opt-save { display: block; margin-left: 0; margin-top: 4px; }
  .bb-fig { width: 78px; } .bb-fig img { width: 78px; height: 78px; }
  .solo-product { flex-direction: column; padding: 22px; gap: 20px; text-align: center; }
  .sp-media { flex-basis: auto; max-width: 86%; margin: 0 auto; }
  .sp-info h3 { font-size: 1.45rem; }
  .sp-buy { justify-content: center; }

  /* 商品网格:手机改 2 列 */
  .plush-grid { gap: 12px; }
  .plush-card { width: calc(50% - 6px); max-width: calc(50% - 6px); }
  .plush-body { padding: 13px 10px 16px; }
  .plush-body h4 { font-size: 1.1rem; }
  .plush-body .pen { font-size: 0.76rem; margin-bottom: 8px; }
  .plush-price { font-size: 1rem; }
  .plush-body .add-btn { width: 100%; margin-top: 11px; padding: 9px 8px; font-size: 0.72rem; letter-spacing: 0.06em; }

  /* 购物车抽屉:手机铺满全宽 */
  .cart-drawer { width: 100%; max-width: 100vw; }

  /* Hero CTA:手机改干净的满宽按钮(文字左、箭头右、单行) */
  .hero-cta { margin-top: 28px; }
  .btn-ghost { width: 100%; justify-content: space-between; padding: 15px 22px; font-size: 0.78rem; letter-spacing: 0.06em; }

  /* 门店页:筛选改横向滑动 chips、卡片收紧 */
  .city-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; margin-bottom: 28px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .city-filter::-webkit-scrollbar { display: none; }
  .city-btn { flex-shrink: 0; white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.07em; padding: 8px 14px; }
  /* 门店:城市下拉分组(手机收紧) */
  .city-stores { gap: 10px; }
  .cg-head { padding: 15px 18px; }
  .cg-title { font-size: 1.15rem; }
  .cg-en { font-size: 0.82rem; }
  .cg-body { padding: 0 18px 6px; }
  .store-row .sr-name { font-size: 1.04rem; }
  .sr-addr { font-size: 0.9rem; }

  /* 手机字号降噪:更克制精致的阅读排版(主客群 <40) */
  body { font-size: 1rem; line-height: 1.7; }
  .section-head { margin: 52px 0 30px; }
  .section-head .sub { font-size: 0.94rem; margin-top: 6px; }
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.26em; margin-bottom: 14px; }
  .hero h1 { letter-spacing: 0.13em; margin-bottom: 14px; }
  .hero .latin-title { font-size: 1.28rem; margin-bottom: 18px; line-height: 1.35; }
  .hero p.lede { font-size: 1rem; }
  .hero p.lede .cjk-line { font-size: 1rem; }
  .trust-row { margin-top: 36px; gap: 20px; font-size: 0.7rem; }
  .bs-prose .cn { font-size: 1.02rem; line-height: 1.8; }
  .bs-prose .en { font-size: 0.92rem; line-height: 1.65; }
  .bs-prose p { margin-bottom: 22px; }
  .plush-note { font-size: 0.76rem; }
  .card-body h3 { font-size: 1.45rem; }
  .card-body .name-en { font-size: 1rem; margin-bottom: 12px; }
  .bb-info h3 { font-size: 1.45rem; }
  .bb-en { font-size: 0.95rem; }
  .cart-head h3 { font-size: 1.2rem; }
}