.home-product-matrix{
      --ink:#18241e;
      --ink-soft:#3f4d45;
      --muted:#718078;
      --green:#176340;
      --green-2:#5d8970;
      --silver:#e9efeb;
      --silver-deep:#dce4df;
      --line:rgba(28,73,49,.105);
      --glass:rgba(255,255,255,.76);
      --spring:cubic-bezier(.2,.78,.18,1);
      --mass:cubic-bezier(.16,1,.3,1)
    }
    .home-product-matrix,.home-product-matrix *{box-sizing:border-box}
    .home-product-matrix{
      margin:0;
      position:relative;
      isolation:isolate;
      overflow-x:hidden;
      background:
        radial-gradient(circle at 12% -8%,rgba(255,255,255,.98) 0 15%,transparent 42%),
        radial-gradient(circle at 88% 4%,rgba(255,255,255,.9) 0 12%,transparent 37%),
        linear-gradient(145deg,#f6f8f7 0%,#e8eeea 46%,#dde6e0 100%)
    }
    .home-product-matrix::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      opacity:.18;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
      mix-blend-mode:multiply
    }
    .home-product-matrix button{font:inherit}
    .hpm-shell{
      width:min(1640px,calc(100vw - 30px));
      margin:0 auto;
      padding:18px 0 32px
    }
    .hpm-topline{
      min-height:68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:0 18px
    }
    .hpm-identity{display:flex;align-items:center;gap:13px}
    .hpm-seal{
      width:40px;
      height:40px;
      display:grid;
      place-items:center;
      color:var(--green);
      border-radius:50%;
      background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(229,236,232,.8));
      box-shadow:inset 0 0 0 1px rgba(23,99,64,.2),0 7px 18px rgba(48,68,57,.08);
      font-family:"Songti SC","STSong",serif;
      font-size:11px
    }
    .hpm-identity strong{
      display:block;
      font-family:"Songti SC","STSong",serif;
      font-size:18px;
      font-weight:600;
      letter-spacing:.045em
    }
    .hpm-identity small{
      display:block;
      margin-top:3px;
      color:#89958e;
      font-size:8px;
      letter-spacing:.18em
    }
    .hpm-collection-status{text-align:right}
    .hpm-collection-status span{
      display:block;
      color:#89958e;
      font-size:8px;
      font-weight:700;
      letter-spacing:.18em
    }
    .hpm-collection-status strong{
      display:block;
      margin-top:5px;
      color:#315d46;
      font-size:12px;
      font-weight:650;
      letter-spacing:.08em
    }
    .hpm-brand-matrix{
      display:grid;
      grid-template-columns:minmax(238px,.82fr) minmax(0,3.18fr);
      min-height:92px;
      margin:2px 0 14px;
      overflow:hidden;
      border:1px solid rgba(27,67,46,.09);
      border-radius:20px;
      background:rgba(255,255,255,.66);
      box-shadow:0 14px 34px rgba(49,69,58,.07)
    }
    .hpm-brand-matrix__intro{
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:16px 24px;
      border-right:1px solid rgba(27,67,46,.09)
    }
    .hpm-brand-matrix__intro small{
      color:#7b8981;
      font-size:8px;
      font-weight:700
    }
    .hpm-brand-matrix__intro strong{
      margin-top:5px;
      font-family:"Songti SC","STSong",serif;
      font-size:19px;
      font-weight:600
    }
    .hpm-brand-matrix__intro span{
      margin-top:5px;
      color:#718078;
      font-size:9px
    }
    .hpm-brand-matrix__items{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .hpm-brand-card{
      position:relative;
      display:grid;
      grid-template-columns:54px minmax(0,1fr) 16px;
      align-items:center;
      gap:12px;
      min-width:0;
      padding:13px 16px;
      color:inherit;
      text-decoration:none;
      border-right:1px solid rgba(27,67,46,.075);
      transform:translateY(0);
      transition:transform .18s ease-out,opacity .18s ease-out
    }
    .hpm-brand-card:last-child{border-right:0}
    .hpm-brand-card::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:0;
      height:2px;
      background:var(--green);
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .18s ease-out
    }
    .hpm-brand-card:hover,.hpm-brand-card:focus-visible{transform:translateY(-3px)}
    .hpm-brand-card:hover::after,.hpm-brand-card:focus-visible::after{transform:scaleX(1)}
    .hpm-brand-card:active{transform:translateY(-1px);opacity:.82}
    .hpm-brand-card:focus-visible{outline:2px solid rgba(23,99,64,.55);outline-offset:-3px}
    .hpm-brand-card__logo{
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      overflow:hidden;
      border:1px solid rgba(27,67,46,.08);
      border-radius:13px;
      background:rgba(255,255,255,.82)
    }
    .hpm-brand-card__logo img{
      display:block;
      max-width:43px;
      max-height:43px;
      object-fit:contain
    }
    .hpm-brand-card[data-brand="yuanqididai"] .hpm-brand-card__logo img{
      width:43px;
      max-width:none;
      filter:brightness(0) saturate(100%) invert(27%) sepia(18%) saturate(1154%) hue-rotate(95deg) brightness(90%) contrast(88%)
    }
    .hpm-brand-card__copy{min-width:0}
    .hpm-brand-card__copy strong{
      display:block;
      overflow:hidden;
      font-size:13px;
      font-weight:650;
      text-overflow:ellipsis;
      white-space:nowrap
    }
    .hpm-brand-card__copy small{
      display:block;
      margin-top:5px;
      color:#819087;
      font-size:8px
    }
    .hpm-brand-card__arrow{
      color:#4d765f;
      font-size:14px;
      opacity:.58;
      transition:transform .18s ease-out,opacity .18s ease-out
    }
    .hpm-brand-card:hover .hpm-brand-card__arrow,.hpm-brand-card:focus-visible .hpm-brand-card__arrow{
      transform:translate(2px,-2px);
      opacity:1
    }
    .hpm-showroom-bezel{
      padding:7px;
      border-radius:30px;
      background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(205,216,209,.76));
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.98),
        0 1px 0 rgba(25,67,44,.07),
        0 38px 110px rgba(45,65,54,.14)
    }
    .hpm-theatre{
      position:relative;
      height:var(--theatre-height,760px);
      min-height:var(--theatre-height,760px);
      overflow:hidden;
      isolation:isolate;
      border-radius:24px;
      background:#f8faf9;
      box-shadow:
        inset 0 0 0 1px rgba(27,67,46,.07),
        inset 0 1px 0 #fff,
        inset 0 -30px 70px rgba(192,206,198,.13);
      transition:box-shadow .42s var(--mass)
    }
    .hpm-theatre::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-6;
      background:
        radial-gradient(circle at 72% 42%,rgba(255,255,255,.99) 0 20%,rgba(249,251,250,.85) 42%,transparent 68%),
        linear-gradient(112deg,rgba(255,255,255,1) 0 18%,rgba(244,248,245,.96) 43%,rgba(233,240,235,.82) 100%)
    }
    .hpm-theatre::after{
      content:"";
      position:absolute;
      left:50%;
      top:0;
      bottom:0;
      width:1px;
      z-index:2;
      background:linear-gradient(180deg,transparent 4%,rgba(25,80,50,.06) 22%,rgba(25,80,50,.04) 78%,transparent 96%)
    }
    .hpm-arc{
      position:absolute;
      left:-6%;
      right:-6%;
      top:16%;
      height:79%;
      z-index:-4;
      border-radius:50%;
      border:1px solid rgba(27,83,54,.085);
      transform:rotate(-2.2deg);
      background:
        radial-gradient(ellipse at 52% 44%,rgba(255,255,255,.97) 0 41%,rgba(244,248,246,.63) 61%,transparent 74%);
      box-shadow:
        inset 0 0 150px rgba(255,255,255,.9),
        0 55px 100px rgba(89,113,99,.06)
    }
    .hpm-arc::after{
      content:"";
      position:absolute;
      left:10%;
      right:8%;
      bottom:10%;
      height:13%;
      border-radius:50%;
      background:radial-gradient(ellipse,rgba(89,119,101,.14),rgba(185,199,191,.055) 46%,transparent 72%);
      filter:blur(12px);
      opacity:.58
    }
    .hpm-matrix-intro{
      position:absolute;
      left:50%;
      top:38px;
      z-index:8;
      width:min(720px,70%);
      text-align:center;
      transform:translateX(-50%)
    }
    .hpm-eyebrow{
      display:flex;
      align-items:center;
      gap:10px;
      justify-content:center;
      margin:0 0 12px;
      color:var(--green);
      font-size:9px;
      font-weight:700;
      letter-spacing:.19em
    }
    .hpm-eyebrow::before,.hpm-eyebrow::after{content:"";width:26px;height:1px;background:currentColor}
    .hpm-matrix-intro h2{
      margin:0;
      font-family:"Songti SC","STSong",serif;
      font-size:clamp(34px,2.7vw,46px);
      line-height:1.08;
      font-weight:500;
      letter-spacing:-.045em
    }
    .hpm-matrix-intro h2 em{
      display:inline;
      margin-left:8px;
      color:var(--green);
      font-style:normal
    }
    .hpm-copy-desc{
      max-width:620px;
      margin:12px auto 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.8
    }
    .hpm-copy-state{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:14px;
      padding:7px 12px;
      color:#6b7971;
      font-size:9px;
      line-height:1.65;
      letter-spacing:.04em
    }
    .hpm-copy-state::before{
      content:"";
      position:static;
      width:5px;
      height:5px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 5px rgba(23,99,64,.07)
    }
    .hpm-copy-state strong{
      display:inline;
      margin:0;
      color:#315d46;
      font-size:12px;
      font-weight:650;
      letter-spacing:.02em
    }
    .hpm-collection-stage{
      position:absolute;
      left:2.7%;
      right:2.7%;
      top:178px;
      bottom:24px;
      z-index:3;
      display:grid;
      align-items:center
    }
    .hpm-product-grid{
      display:flex;
      flex-wrap:wrap;
      width:100%;
      height:100%;
      align-content:center;
      align-items:stretch;
      justify-content:center;
      gap:var(--row-gap,20px) var(--column-gap,18px);
      padding:20px 12px 26px
    }
    .hpm-product-card{
      position:relative;
      min-width:0;
      flex:0 1 var(--card-basis,calc((100% - 126px)/8));
      height:var(--card-height,242px);
      margin:0;
      display:grid;
      grid-template-rows:minmax(0,1fr) 38px;
      align-items:end;
      justify-items:center;
      opacity:1;
      transform:translate3d(0,0,0)
    }
    .hpm-product-card::before{
      content:attr(data-product-index);
      position:absolute;
      top:7px;
      right:8px;
      z-index:5;
      color:rgba(42,76,58,.4);
      font-size:8px;
      font-weight:700;
      letter-spacing:.16em;
      transition:color .45s var(--spring),transform .45s var(--spring)
    }
    .hpm-product-card::after{
      content:"";
      position:absolute;
      left:4%;
      top:5%;
      width:23%;
      height:76%;
      z-index:4;
      pointer-events:none;
      opacity:0;
      background:linear-gradient(104deg,transparent,rgba(255,255,255,.62),transparent);
      transform:translate3d(-160%,0,0) skewX(-13deg);
      transition:transform .9s var(--mass),opacity .35s var(--spring)
    }
    .hpm-product-visual{
      position:relative;
      width:100%;
      height:100%;
      min-height:0;
      display:grid;
      place-items:end center;
      isolation:isolate;
      transform:translate3d(0,var(--optical-lift,0px),0) scale(var(--optical-scale,1));
      transform-origin:50% 86%;
      transition:transform .58s var(--mass),filter .58s var(--mass)
    }
    .hpm-product-card[data-aspect="tall"]{--optical-scale:.9;--optical-hover-scale:.925;--optical-lift:7px;--optical-hover-lift:-1px}
    .hpm-product-card[data-aspect="wide"]{--optical-scale:1.08;--optical-hover-scale:1.105;--optical-lift:-8px;--optical-hover-lift:-17px}
    .hpm-product-card[data-aspect="balanced"]{--optical-scale:1;--optical-hover-scale:1.025;--optical-lift:0px;--optical-hover-lift:-9px}
    .hpm-product-visual::before{
      content:"";
      position:absolute;
      left:8%;
      right:8%;
      bottom:1.5%;
      height:7.5%;
      z-index:-1;
      border-radius:50%;
      opacity:.45;
      background:radial-gradient(ellipse,rgba(44,70,55,.23),rgba(84,109,94,.08) 48%,transparent 72%);
      filter:blur(7px);
      transform:scaleX(.82);
      transition:opacity .5s var(--spring),transform .5s var(--spring)
    }
    .hpm-product-card img{
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center bottom;
      filter:drop-shadow(0 24px 20px rgba(30,49,39,.17));
      user-select:none;
      transition:filter .58s var(--mass)
    }
    .hpm-product-label{
      position:relative;
      z-index:6;
      align-self:end;
      min-width:122px;
      max-width:94%;
      margin:8px 0 0;
      padding:7px 14px 6px;
      border-radius:10px;
      color:#607067;
      background:rgba(255,255,255,.57);
      box-shadow:
        inset 0 0 0 1px rgba(35,74,53,.075),
        inset 0 1px 0 rgba(255,255,255,.96),
        0 9px 28px rgba(45,67,55,.055);
      font-size:10px;
      line-height:1.35;
      text-align:center;
      letter-spacing:.035em;
      opacity:.84;
      transform:translateY(2px);
      transition:opacity .48s var(--spring),transform .48s var(--spring),color .48s var(--spring),box-shadow .48s var(--spring)
    }
    .hpm-product-card:hover .hpm-product-visual,.hpm-product-card:focus-within .hpm-product-visual{
      transform:translate3d(0,var(--optical-hover-lift,-9px),0) scale(var(--optical-hover-scale,1.022));
      filter:saturate(1.035) contrast(1.015)
    }
    .hpm-product-card:hover .hpm-product-visual::before,.hpm-product-card:focus-within .hpm-product-visual::before{
      opacity:.66;
      transform:scaleX(1)
    }
    .hpm-product-card:hover img,.hpm-product-card:focus-within img{
      filter:drop-shadow(0 34px 26px rgba(25,62,42,.22))
    }
    .hpm-product-card:hover::before,.hpm-product-card:focus-within::before{
      color:var(--green);
      transform:translateY(-2px)
    }
    .hpm-product-card:hover::after,.hpm-product-card:focus-within::after{
      opacity:.72;
      transform:translate3d(520%,0,0) skewX(-13deg)
    }
    .hpm-product-card:hover .hpm-product-label,.hpm-product-card:focus-within .hpm-product-label{
      color:var(--green);
      opacity:1;
      transform:translateY(-1px);
      box-shadow:
        inset 0 0 0 1px rgba(23,99,64,.15),
        inset 0 1px 0 rgba(255,255,255,1),
        0 14px 34px rgba(36,67,50,.09)
    }
    .hpm-product-card button{
      position:absolute;
      inset:0;
      z-index:8;
      border:0;
      background:transparent;
      cursor:default
    }
    .hpm-product-card button:active + *{transform:scale(.985)}
    .hpm-product-card button:focus-visible{
      outline:2px solid rgba(23,99,64,.42);
      outline-offset:4px;
      border-radius:14px
    }
    .hpm-product-card img{max-height:calc(var(--card-height,242px) - 38px)}
    .hpm-product-label{min-width:90px;margin-top:5px;padding:5px 8px;font-size:9px}
    .hpm-meta{
      position:absolute;
      right:2.4%;
      top:3.2%;
      z-index:8;
      color:#89948e;
      font-size:8px;
      line-height:1.6;
      letter-spacing:.14em;
      text-align:right
    }
    .hpm-meta strong{display:block;color:#315f47;font-size:10px;font-weight:700}
    .hpm-category-rail{
      display:grid;
      grid-template-columns:repeat(9,minmax(0,1fr));
      gap:1px;
      margin-top:8px;
      padding:6px;
      border-radius:21px;
      background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(220,229,223,.78));
      box-shadow:
        inset 0 0 0 1px rgba(30,67,48,.085),
        inset 0 1px 0 rgba(255,255,255,.98),
        0 20px 52px rgba(48,67,57,.075)
    }
    .hpm-category-rail button{
      position:relative;
      min-width:0;
      min-height:66px;
      padding:12px 12px 10px;
      border:0;
      border-radius:15px;
      color:#68766e;
      background:transparent;
      text-align:left;
      cursor:pointer;
      overflow:hidden;
      transition:color .44s var(--spring),background .44s var(--spring),transform .44s var(--spring),box-shadow .44s var(--spring)
    }
    .hpm-category-rail button::before{
      content:"";
      position:absolute;
      left:-30%;
      top:-80%;
      width:60%;
      height:260%;
      pointer-events:none;
      opacity:0;
      background:linear-gradient(105deg,transparent,rgba(255,255,255,.82),transparent);
      transform:translateX(-160%) rotate(12deg);
      transition:transform .78s var(--mass),opacity .32s var(--spring)
    }
    .hpm-category-rail button::after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      bottom:6px;
      height:2px;
      border-radius:2px;
      background:linear-gradient(90deg,var(--green),#82aa94);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .5s var(--mass)
    }
    .hpm-category-rail small{
      display:block;
      color:#95a099;
      font-size:7px;
      font-weight:700;
      letter-spacing:.13em
    }
    .hpm-category-rail strong{
      display:block;
      margin-top:7px;
      overflow:hidden;
      font-size:12px;
      font-weight:550;
      text-overflow:ellipsis;
      white-space:nowrap
    }
    .hpm-category-count{
      position:absolute;
      right:11px;
      top:10px;
      color:rgba(38,78,56,.38);
      font-size:8px;
      font-variant-numeric:tabular-nums;
      letter-spacing:.08em
    }
    .hpm-category-rail button:hover,.hpm-category-rail button:focus-visible{
      z-index:2;
      color:var(--green);
      background:rgba(255,255,255,.84);
      transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(38,67,51,.085);
      outline:0
    }
    .hpm-category-rail button:hover::before,.hpm-category-rail button:focus-visible::before{
      opacity:.66;
      transform:translateX(360%) rotate(12deg)
    }
    .hpm-category-rail button:active{transform:translateY(0) scale(.98)}
    .hpm-category-rail button[aria-pressed="true"]{
      color:var(--green);
      background:rgba(255,255,255,.96);
      box-shadow:inset 0 0 0 1px rgba(23,99,64,.1),0 10px 24px rgba(35,67,50,.07)
    }
    .hpm-category-rail button[aria-pressed="true"]::after{transform:scaleX(1)}
    .hpm-category-rail button[aria-pressed="true"] .hpm-category-count{color:var(--green)}
    @media(max-width:1080px){
      .hpm-shell{width:calc(100vw - 14px);padding-top:7px}
      .hpm-topline{min-height:54px;padding:0 8px}
      .hpm-identity strong{font-size:15px}
      .hpm-collection-status{display:none}
      .hpm-brand-matrix{grid-template-columns:200px minmax(0,1fr);margin-bottom:9px}
      .hpm-brand-matrix__intro{padding:13px 16px}
      .hpm-brand-matrix__items{overflow-x:auto;scrollbar-width:none}
      .hpm-brand-matrix__items::-webkit-scrollbar{display:none}
      .hpm-brand-card{min-width:168px;padding:10px 12px;grid-template-columns:44px minmax(0,1fr) 12px;gap:9px}
      .hpm-brand-card__logo{width:44px;height:44px;border-radius:11px}
      .hpm-brand-card__logo img{max-width:35px;max-height:35px}
      .hpm-brand-card[data-brand="yuanqididai"] .hpm-brand-card__logo img{width:35px}
      .hpm-theatre{height:var(--theatre-height,760px);min-height:var(--theatre-height,760px)}
      .hpm-theatre::after{display:none}
      .hpm-matrix-intro{top:29px;width:82%}
      .hpm-matrix-intro h2{font-size:37px}
      .hpm-copy-desc{margin-top:12px}
      .hpm-copy-state{margin-top:12px}
      .hpm-collection-stage{left:2.6%;right:2.6%;top:174px;bottom:18px}
      .hpm-arc{left:-10%;right:-10%;top:21%;height:72%}
      .hpm-meta{top:29px}
      .hpm-product-grid{--column-gap:12px;--row-gap:14px;padding:14px 10px 20px}
      .hpm-category-rail{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        scrollbar-width:none
      }
      .hpm-category-rail::-webkit-scrollbar{display:none}
      .hpm-category-rail button{flex:0 0 142px;scroll-snap-align:start}
    }
    @media(max-width:520px){
      .hpm-showroom-bezel{padding:4px;border-radius:22px}
      .hpm-identity{margin:0 auto}
      .hpm-identity .hpm-seal{width:34px;height:34px}
      .hpm-identity strong{font-size:13px}
      .hpm-identity small{font-size:7px}
      .hpm-brand-matrix{display:block;border-radius:16px}
      .hpm-brand-matrix__intro{border-right:0;border-bottom:1px solid rgba(27,67,46,.09);text-align:center}
      .hpm-brand-matrix__items{display:flex}
      .hpm-brand-card{flex:0 0 164px;min-width:164px}
      .hpm-theatre{height:auto;min-height:auto;border-radius:18px}
      .hpm-matrix-intro{position:relative;left:auto;top:auto;width:auto;padding:28px 18px 0;transform:none}
      .hpm-matrix-intro h2{font-size:31px}
      .hpm-copy-desc{font-size:11px}
      .hpm-copy-state{font-size:8px}
      .hpm-meta{display:none}
      .hpm-collection-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;min-height:0;padding:18px 10px 28px}
      .hpm-product-grid{height:auto;--column-gap:10px;--row-gap:16px;padding:8px 0 12px}
      .hpm-product-card{flex-basis:calc(50% - 5px);height:206px}
      .hpm-product-card img{max-height:168px}
      .hpm-product-label{min-width:90px;max-width:98%;padding:5px 7px;font-size:8px}
      .hpm-arc{left:-75%;right:-75%;top:17%;height:72%}
      .hpm-category-rail button{flex-basis:126px;min-height:60px;padding:10px}
      .hpm-category-rail strong{font-size:10px}
    }
    @media(prefers-reduced-motion:reduce){
      .home-product-matrix *,.home-product-matrix *::before,.home-product-matrix *::after{
        animation-duration:.01ms!important;
        animation-delay:0ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
      }
      .hpm-product-card::after,.hpm-category-rail button::before{display:none}
    }
.hpm-product-card img{opacity:1}
