@font-face{ font-family:"WCE Sans"; src:url("/static/fonts/wce-din-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:"WCE Sans"; src:url("/static/fonts/wce-din-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
  @font-face{ font-family:"WCE Serif"; src:url("/static/fonts/wce-garamond.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  :root{
    --bg:#f5f5f7; --panel:#f4f8fb; --ink:#0e2433; --muted:#3f5a68; --faint:#7790a0;
    --line:#dbe7ef; --line-2:#edf4f8;
    --green:#009de0; --green-deep:#007cb4; --green-soft:#e8f4fa;
    --navy:#003f5a; --thumb:#f1f6fa; --amber:#8a5d00;
    --font:"WCE Sans","Inter",system-ui,-apple-system,sans-serif;
    --serif:"WCE Serif","EB Garamond",Georgia,serif;
    --radius:2px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.5; font-variant-numeric:tabular-nums; }
  button,input,select{ font-family:var(--font); }

  /* header */
  .head{ position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--line); }
  .head .in{ max-width:1280px; margin:0 auto; padding:12px 26px; display:flex; align-items:center; gap:16px; }
  .brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; letter-spacing:.04em; }
  .brand .brand-logo{ height:60px; width:auto; display:block; }
  .selwrap{ display:flex; align-items:center; gap:8px; margin-left:8px; }
  .selwrap .lbl{ font-size:14px; color:var(--muted); }
  select.cat-sel{ border:1px solid var(--line); border-radius:var(--radius); padding:7px 11px; font-size:14px; font-weight:600; background:#fff; cursor:pointer; }
  .head .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
  .ghost-btn{ border:1px solid var(--green); color:var(--green); background:#fff; font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:var(--radius); cursor:pointer; }
  .ghost-btn:hover{ background:var(--green-soft); }
  .review-btn{ display:flex; align-items:center; gap:9px; border:none; background:var(--green); color:#fff; font-weight:700; font-size:13.5px; padding:9px 15px; border-radius:var(--radius); cursor:pointer; }
  .review-btn:hover{ background:var(--green-deep); }
  .review-btn .n{ background:rgba(255,255,255,.25); border-radius:3px; padding:1px 8px; font-size:12px; min-width:20px; text-align:center; }

  /* tabs */
  .tabs{ max-width:1280px; margin:0 auto; padding:0 26px; display:flex; gap:22px; border-bottom:1px solid var(--line); }
  .tab{ padding:13px 2px; font-size:14px; font-weight:600; color:var(--muted); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tab.active{ color:var(--ink); border-bottom-color:var(--ink); }

  /* layout */
  .layout{ max-width:1280px; margin:0 auto; padding:26px; display:grid; grid-template-columns:230px 1fr; gap:30px; }
  @media(max-width:860px){ .layout{ grid-template-columns:1fr; } .sidebar{ display:none; } }

  .sidebar{ align-self:start; position:sticky; top:80px; }
  .search{ position:relative; margin-bottom:22px; }
  .search input{ width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px 10px 36px; font-size:14px; background:var(--panel); }
  .search input:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px var(--green-soft); }
  .search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--faint); }
  .filt{ border-top:1px solid var(--line); padding:14px 2px; }
  .filt h4{ margin:0 0 10px; font-size:13px; font-weight:700; }
  .opt{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; color:var(--muted); cursor:pointer; }
  .opt input{ accent-color:var(--green); width:15px; height:15px; }
  .opt:hover{ color:var(--ink); }
  .catlist .opt.sel{ color:var(--green); font-weight:600; }

  .main-hd{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
  .main-hd .ct{ font-size:14px; color:var(--muted); }
  .main-hd .ct b{ color:var(--ink); }
  .route-note{ font-size:12.5px; color:var(--muted); }
  .route-note .pill{ background:var(--green-soft); color:var(--green-deep); font-weight:600; padding:2px 9px; border-radius:3px; }

  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media(max-width:1180px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:520px){ .grid{ grid-template-columns:1fr; } }

  .prod{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .15s, border-color .15s; }
  .prod:hover{ box-shadow:0 6px 22px rgba(20,30,24,.09); }
  .prod.on{ border-color:var(--green); }
  .thumb{ position:relative; aspect-ratio:1.35/1; background:var(--thumb); display:flex; align-items:center; justify-content:center; padding:18px; }
  .thumb img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
  .cart-ic{ position:absolute; top:11px; right:11px; z-index:2; width:36px; height:36px; border-radius:2px; border:1px solid var(--line); background:#fff; color:var(--green); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; }
  .cart-ic:hover{ border-color:var(--green); background:var(--green-soft); }
  .cart-ic.on{ background:var(--green); border-color:var(--green); color:#fff; }
  .cart-ic svg{ width:18px; height:18px; }
  .tag{ position:absolute; top:13px; left:13px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green-deep); background:var(--green-soft); padding:3px 8px; border-radius:3px; }

  .info{ padding:14px 15px 15px; display:flex; flex-direction:column; flex:1; }
  .nm{ font-family:var(--serif); font-weight:400; font-size:18px; line-height:1.25; min-height:42px; color:var(--navy); }
  .price{ font-weight:800; font-size:17px; margin:9px 0 2px; }
  .price s{ font-weight:600; font-size:11px; color:var(--faint); text-decoration:none; margin-left:4px; }
  .avail{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); margin-bottom:13px; }
  .avail svg{ width:15px; height:15px; color:var(--faint); }
  .actions{ display:flex; gap:8px; margin-top:auto; }
  .lnk{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--muted); font-weight:600; font-size:13px; padding:8px 13px; border-radius:2px; text-decoration:none; }
  .lnk:hover{ border-color:var(--ink); color:var(--ink); }
  .add{ flex:1; border:1px solid var(--green); background:#fff; color:var(--green); font-weight:700; font-size:13px; padding:8px; border-radius:2px; cursor:pointer; transition:.15s; }
  .add:hover{ background:var(--green-soft); }
  .qty{ flex:1; display:none; align-items:center; justify-content:space-between; border:1px solid var(--green); border-radius:2px; overflow:hidden; }
  .prod.on .qty{ display:flex; }
  .prod.on .add{ display:none; }
  .qty button{ width:36px; height:36px; border:none; background:var(--green-soft); color:var(--green-deep); font-size:17px; cursor:pointer; }
  .qty button:hover{ background:var(--green); color:#fff; }
  .qty .n{ font-weight:700; font-size:14px; }

  .empty{ padding:60px 0; text-align:center; color:var(--faint); font-size:14px; }

  /* sticky cart */
  .cartbar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(20,30,24,.07); transform:translateY(110%); transition:transform .25s; }
  .cartbar.show{ transform:none; }
  .cartbar .in{ max-width:1280px; margin:0 auto; padding:12px 26px; display:flex; align-items:center; gap:18px; }
  .cartbar .l{ font-size:12.5px; color:var(--muted); }
  .cartbar .v{ font-size:19px; font-weight:800; }
  .cartbar .go{ margin-left:auto; border:none; background:var(--green); color:#fff; font-weight:700; font-size:14.5px; padding:12px 24px; border-radius:var(--radius); cursor:pointer; }
  .cartbar .go:hover{ background:var(--green-deep); }

  .hidden{ display:none !important; }

  /* checkout */
  .checkout{ max-width:1280px; margin:0 auto; padding:30px 26px 140px; display:grid; grid-template-columns:1fr 380px; gap:30px; align-items:start; }
  @media(max-width:860px){ .checkout{ grid-template-columns:1fr; } }
  .back{ background:none; border:none; color:var(--muted); font-weight:600; font-size:14px; cursor:pointer; padding:0; margin-bottom:18px; }
  .back:hover{ color:var(--ink); }
  .panel-card{ border:1px solid var(--line); border-radius:3px; padding:22px 24px; margin-bottom:18px; }
  .panel-card h2{ font-family:var(--serif); font-weight:400; font-size:21px; color:var(--navy); margin:0 0 4px; }
  .panel-card .hint{ font-size:12.5px; color:var(--muted); margin:0 0 16px; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:560px){ .grid2{ grid-template-columns:1fr; } }
  .fld label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
  .fld label .req{ color:var(--green); }
  .fld input,.fld textarea{ width:100%; font-size:14.5px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:11px 13px; }
  .fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px var(--green-soft); }
  .fld textarea{ resize:vertical; min-height:46px; }
  .fld.mt{ margin-top:16px; }

  .ordsum{ border:1px solid var(--line); border-radius:3px; position:sticky; top:80px; overflow:hidden; }
  .ordsum .oh{ padding:16px 20px; border-bottom:1px solid var(--line); font-family:var(--serif); font-weight:400; font-size:19px; color:var(--navy); display:flex; justify-content:space-between; }
  .ordsum .oh span{ font-family:var(--font); color:var(--muted); font-weight:600; font-size:13px; }
  .ordsum .lines{ padding:6px 20px; max-height:340px; overflow:auto; }
  .line{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); }
  .line:last-child{ border-bottom:none; }
  .line img{ width:42px; height:42px; object-fit:contain; mix-blend-mode:multiply; flex:none; }
  .line .nm2{ font-weight:600; font-size:13.5px; line-height:1.25; }
  .line .sp2{ font-size:12px; color:var(--muted); }
  .line .lt{ margin-left:auto; font-weight:700; font-size:13.5px; white-space:nowrap; }
  .ordsum .tot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; }
  .ordsum .tot b{ font-size:20px; font-weight:800; }
  .ordsum .send{ display:block; width:100%; text-align:center; border:none; background:var(--green); color:#fff; font-weight:700; font-size:15px; padding:14px; cursor:pointer; text-decoration:none; }
  .ordsum .send:hover{ background:var(--green-deep); }
  .ordsum .to{ padding:12px 20px; background:var(--panel); font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); }
  .ordsum .to b{ color:var(--ink); }
  .pricenote{ color:var(--faint); font-size:11.5px; margin-top:8px; }

  /* submission success */
  .success{ max-width:560px; margin:60px auto; text-align:center; }
  .success .mark{ width:56px; height:56px; border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 16px; }
  .success h2{ font-family:var(--serif); font-weight:400; font-size:26px; color:var(--navy); margin:0 0 6px; }
  .success p{ color:var(--muted); margin:0 0 6px; }
  .success .rid{ font-weight:700; color:var(--ink); }
  .success .warn{ color:#9a6b00; font-size:13px; }
  .success .btn{ margin-top:20px; border:1px solid var(--green); background:var(--green); color:#fff; font-weight:700; font-size:14px; padding:11px 22px; border-radius:var(--radius); cursor:pointer; }
  .success .btn:hover{ background:var(--green-deep); }

  /* image lightbox */
  .lb{ position:fixed; inset:0; z-index:60; background:rgba(8,18,26,.88); display:none; align-items:center; justify-content:center; }
  .lb.open{ display:flex; }
  .lb img{ max-width:82vw; max-height:76vh; object-fit:contain; background:#fff; padding:20px; border-radius:3px; user-select:none; -webkit-user-drag:none; }
  .lb .cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#fff; font-weight:600; font-size:15px; padding:0 20px; }
  .lb .cap small{ display:block; color:#aebfca; font-weight:400; font-size:13px; margin-top:3px; }
  .lb .nav{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .lb .nav:hover{ background:rgba(255,255,255,.3); }
  .lb .prev{ left:22px; } .lb .next{ right:22px; }
  .lb .close{ position:absolute; top:18px; right:22px; width:42px; height:42px; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:20px; border-radius:50%; cursor:pointer; }
  .lb .close:hover{ background:rgba(255,255,255,.3); }
  .lb .count{ position:absolute; top:24px; left:24px; color:#aebfca; font-size:13px; font-variant-numeric:tabular-nums; }
  @media(max-width:560px){ .lb .nav{ width:42px; height:42px; font-size:22px; } .lb .prev{ left:8px; } .lb .next{ right:8px; } }

  .main-hd .std-btn{ border:1px solid var(--green); background:var(--green-soft); color:var(--green-deep); font-weight:700; font-size:13px; padding:8px 15px; border-radius:2px; cursor:pointer; }
  .main-hd .std-btn:hover{ background:var(--green); color:#fff; }

  .main-hd .std-btn.on{ background:var(--green); color:#fff; border-color:var(--green); }