:root{
      color-scheme:dark;
      --bg:#050505;
      --panel:#111;
      --panel2:#171717;
      --line:rgba(255,255,255,.11);
      --muted:rgba(255,255,255,.56);
      --text:#f5f5f2;
      --orange:#ff7417;
      --orange2:#ff8e3c;
    }

    *{
      box-sizing:border-box;
    }

    html,
    body{
      margin:0;
      min-height:100%;
      background:var(--bg);
      color:var(--text);
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Noto Sans TC",
        "PingFang TC",
        sans-serif;
    }

    body{
      background:
        radial-gradient(
          circle at 85% 0,
          rgba(255,116,23,.13),
          transparent 30%
        ),
        #050505;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    button{
      font:inherit;
    }

    .nav{
      height:66px;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 max(24px, calc((100vw - 1180px) / 2));
      background:rgba(5,5,5,.86);
      backdrop-filter:blur(18px);
      position:sticky;
      top:0;
      z-index:20;
    }

    .brand{
      font-weight:760;
      letter-spacing:-.03em;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:22px;
      color:rgba(255,255,255,.68);
      font-size:14px;
    }

    .wrap{
      width:min(1120px, calc(100% - 40px));
      margin:0 auto;
      padding:72px 0 100px;
    }

    .eyebrow{
      color:var(--orange);
      font-size:12px;
      font-weight:760;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:18px;
    }

    h1{
      margin:0;
      font-size:clamp(42px, 6vw, 74px);
      letter-spacing:-.065em;
      line-height:.98;
      font-weight:760;
    }

    .lead{
      margin:22px 0 44px;
      max-width:680px;
      color:var(--muted);
      font-size:17px;
      line-height:1.8;
    }

    .layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 340px;
      gap:22px;
      align-items:start;
    }

    .panel{
      border:1px solid var(--line);
      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.055),
          rgba(255,255,255,.022)
        );
      border-radius:26px;
      overflow:hidden;
    }

    .loading,
    .empty{
      padding:34px;
      color:var(--muted);
      line-height:1.8;
    }

    .empty h2{
      color:var(--text);
      margin:0 0 10px;
      font-size:25px;
    }

    .item{
      display:grid;
      grid-template-columns:210px minmax(0,1fr);
      gap:26px;
      padding:24px;
    }

    .image-wrap{
      border-radius:20px;
      overflow:hidden;
      aspect-ratio:1 / 1;
      background:#191919;
      border:1px solid rgba(255,255,255,.08);
    }

    .image-wrap img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }

    .item-content{
      min-width:0;
      display:flex;
      flex-direction:column;
    }

    .item-kicker{
      color:var(--orange);
      font-size:11px;
      font-weight:760;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:12px;
    }

    .item-name{
      margin:0;
      font-size:28px;
      line-height:1.2;
      letter-spacing:-.035em;
    }

    .meta{
      margin-top:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px 16px;
      color:var(--muted);
      font-size:13px;
    }

    .price{
      margin-top:24px;
      font-size:20px;
      font-weight:700;
    }

    .item-bottom{
      margin-top:auto;
      padding-top:26px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }

    .quantity{
      display:inline-grid;
      grid-template-columns:44px 52px 44px;
      border:1px solid var(--line);
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.035);
    }

    .quantity button,
    .quantity output{
      height:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:0;
      background:transparent;
      color:var(--text);
    }

    .quantity button{
      cursor:pointer;
      font-size:20px;
    }

    .quantity button:hover{
      background:rgba(255,255,255,.08);
    }

    .quantity output{
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
      font-weight:700;
    }

    .remove{
      appearance:none;
      border:0;
      background:transparent;
      color:rgba(255,255,255,.48);
      cursor:pointer;
      padding:10px 0;
    }

    .remove:hover{
      color:#fff;
    }

    .summary{
      padding:26px;
      position:sticky;
      top:88px;
    }

    .summary h2{
      margin:0 0 24px;
      font-size:23px;
      letter-spacing:-.03em;
    }

    .summary-row{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding:11px 0;
      color:var(--muted);
      font-size:14px;
    }

    .summary-row.total{
      margin-top:10px;
      padding-top:20px;
      border-top:1px solid var(--line);
      color:var(--text);
      font-size:20px;
      font-weight:760;
    }

    .checkout{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:54px;
      margin-top:24px;
      padding:12px 18px;
      border-radius:999px;
      background:var(--orange);
      color:#070707;
      font-weight:780;
      transition:
        transform .18s ease,
        background .18s ease;
    }

    .checkout:hover{
      transform:translateY(-1px);
      background:var(--orange2);
    }

    .continue{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:50px;
      margin-top:10px;
      border:1px solid var(--line);
      border-radius:999px;
      color:rgba(255,255,255,.72);
    }

    .notice{
      margin-top:20px;
      color:rgba(255,255,255,.38);
      font-size:12px;
      line-height:1.7;
    }

    .status{
      display:none;
      margin:0 0 18px;
      padding:14px 16px;
      border-radius:16px;
      border:1px solid var(--line);
      color:var(--muted);
    }

    .status.show{
      display:block;
    }

    @media(max-width:820px){
      .layout{
        grid-template-columns:1fr;
      }

      .summary{
        position:static;
      }
    }

    @media(max-width:620px){
      .nav{
        padding:0 18px;
      }

      .nav-links a:not(:last-child){
        display:none;
      }

      .wrap{
        width:min(100% - 24px, 1120px);
        padding-top:46px;
      }

      .item{
        grid-template-columns:1fr;
        padding:16px;
      }

      .image-wrap{
        aspect-ratio:4 / 3;
      }

      .item-name{
        font-size:24px;
      }
    }