/* ===== 精品商城（复刻 shop.web3outsight.com 配色/框架）=====
   原站 Tailwind teal/cyan 主题：主色 teal-500 #14b8a6，按钮渐变 teal→cyan */
:root{
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4;
  --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --cyan-600:#0891b2;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280;
  --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937;
  --red-500:#ef4444;
  --grad:linear-gradient(to right,#14b8a6,#0891b2);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 3px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-card:0 20px 40px rgba(0,0,0,.1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans SC',-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  background:var(--gray-50);color:var(--gray-800);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}

/* ===== 顶部导航（复刻原站 desktop-nav）===== */
.desktop-nav{background:var(--grad);color:#fff;box-shadow:var(--shadow-lg);position:sticky;top:0;z-index:50}
.nav-inner{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.nav-inner{padding:0 1.5rem}}
@media(min-width:1024px){.nav-inner{padding:0 2rem}}
.nav-bar{display:flex;align-items:center;justify-content:space-between;height:4rem}
.logo{display:flex;align-items:center;gap:.5rem}
.logo svg{width:2rem;height:2rem}
.logo span{font-size:1.25rem;font-weight:700}
.nav-btns{display:flex;align-items:center;gap:1rem}
.nav-btn{padding:.5rem 1rem;border-radius:.5rem;transition:.15s;font-weight:500;color:#fff;position:relative}
.nav-btn:hover{background:rgba(255,255,255,.2)}
.cart-badge{position:absolute;top:-.5rem;right:-.5rem;background:var(--red-500);color:#fff;
  font-size:.7rem;min-width:1.25rem;height:1.25rem;border-radius:9999px;display:flex;
  align-items:center;justify-content:center;padding:0 .25rem;font-weight:700;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ===== 主容器 / 布局（复刻 products-layout）===== */
.container{max-width:80rem;margin:0 auto;padding:1rem 1rem}
@media(min-width:640px){.container{padding:1.5rem 1.5rem}}
@media(min-width:1024px){.container{padding:2rem 2rem}}
.products-layout{display:flex;gap:1.5rem;align-items:flex-start}
.products-sidebar{width:11rem;flex-shrink:0;position:sticky;top:5rem}
.products-content{flex:1;min-width:0}

/* ===== 分类侧边栏（复刻 category-sidebar）===== */
.category-sidebar{background:#fff;border-radius:.75rem;padding:.75rem;box-shadow:var(--shadow-sm)}
.category-sidebar h3{font-size:1.1rem;font-weight:700;color:var(--gray-700);margin-bottom:.75rem;padding:0 .5rem}
.category-sidebar-list{display:flex;flex-direction:column;gap:.25rem}
.category-sidebar-item{width:100%;text-align:left;padding:.625rem .75rem;font-size:.875rem;
  font-weight:500;border-radius:.5rem;border-left:3px solid transparent;transition:.2s;color:var(--gray-600)}
.category-sidebar-item:hover:not(.active){background:rgba(20,184,166,.05)}
.category-sidebar-item.active{border-left-color:var(--teal-500);background:rgba(20,184,166,.1);color:var(--teal-500)}

/* ===== 区块标题 ===== */
.section-title{font-size:1.25rem;font-weight:700;margin:0 0 1rem;color:var(--gray-800)}

/* ===== 商品列表（列表式横行布局）===== */
#products-grid{display:flex;flex-direction:column;gap:.65rem}
.product-list-item{background:#fff;border-radius:.75rem;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:row;align-items:center;padding:.65rem .8rem;
  transition:all .2s ease;cursor:pointer;gap:.75rem}
.product-list-item:hover{box-shadow:var(--shadow-card)}
.product-image{width:80px;height:80px;min-width:80px;display:flex;align-items:center;justify-content:center;
  font-size:2.25rem;border-radius:.5rem;overflow:hidden;
  background:linear-gradient(135deg,var(--teal-50),#e6fffb)}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-info{display:flex;flex-direction:column;flex:1;min-width:0}
.product-name{font-size:1rem;font-weight:700;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-category{font-size:.78rem;color:var(--teal-500);margin-top:.15rem}
.product-action{display:flex;align-items:center;justify-content:space-between;margin-top:.35rem}
.product-price{font-size:1.05rem;font-weight:700;color:var(--teal-500)}
.stock-info{font-size:.68rem;color:var(--gray-400);margin-left:.5rem;display:none}
.add-btn{padding:.45rem 1rem;font-size:.85rem;border-radius:.5rem;background:var(--teal-500);
  color:#fff;font-weight:600;white-space:nowrap;transition:.15s;min-width:72px;text-align:center}
.add-btn:hover{opacity:.88;background:var(--teal-600)}
.add-btn.sold-out{background:var(--gray-300);cursor:not-allowed;box-shadow:none}

/* 桌面端商品行稍大 */
@media(min-width:768px){
  #products-grid{gap:.85rem}
  .product-list-item{padding:.8rem 1rem;gap:1rem}
  .product-image{width:96px;height:96px;min-width:96px;font-size:2.75rem}
  .product-name{font-size:1.05rem}
  .product-category{font-size:.82rem}
  .product-price{font-size:1.125rem}
  .add-btn{padding:.5rem 1.2rem;font-size:.9rem}
}

/* ===== 弹窗（复刻 modal，teal 主题）===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;
  justify-content:center;z-index:100;padding:1rem}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:1rem;width:40rem;max-width:100%;max-height:90vh;overflow:auto;
  display:flex;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.modal.show{opacity:1;visibility:visible}
.modal.show{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.modal .m-thumb{width:16rem;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:7rem;background:linear-gradient(135deg,var(--teal-50),#e6fffb)}
.modal .m-body{padding:1.5rem;flex:1;position:relative}
.m-close{position:absolute;right:1rem;top:1rem;font-size:1.5rem;color:var(--gray-400);width:2rem;height:2rem;border-radius:50%}
.m-close:hover{background:var(--gray-100)}
.m-name{font-size:1.25rem;font-weight:700;padding-right:2rem}
.m-cat{display:inline-block;font-size:.75rem;color:var(--teal-500);background:rgba(20,184,166,.1);padding:.15rem .6rem;border-radius:.5rem;margin:.5rem 0}
.m-desc{color:var(--gray-600);font-size:.8125rem;margin:.5rem 0;line-height:1.7}
.m-price{color:var(--teal-500);font-size:1.5rem;font-weight:700;margin:.5rem 0}
.spec-block{margin:.875rem 0}
.spec-block .s-title{font-size:.8125rem;color:var(--gray-500);margin-bottom:.5rem}
.spec-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.spec-btn{border:1px solid var(--gray-300);border-radius:.5rem;padding:.5rem .875rem;font-size:.8125rem;
  transition:.2s;cursor:pointer;background:#fff;color:var(--gray-700)}
.spec-btn:hover:not(.disabled){border-color:var(--teal-500);background:rgba(20,184,166,.1)}
.spec-btn.selected{border-color:var(--teal-500);background:var(--teal-500);color:#fff}
.spec-btn.disabled{opacity:.5;cursor:not-allowed;background:var(--gray-100)}
.qty{display:flex;align-items:center;border:1px solid var(--gray-300);border-radius:.5rem;overflow:hidden;width:fit-content;margin:1rem 0}
.qty button{width:2.25rem;height:2.25rem;font-size:1.125rem;color:var(--gray-700);background:var(--gray-50)}
.qty button:hover{background:var(--gray-100)}
.qty input{width:3.25rem;height:2.25rem;text-align:center;border:none;border-left:1px solid var(--gray-300);
  border-right:1px solid var(--gray-300);outline:none}
.m-add{width:100%;background:var(--grad);color:#fff;padding:.75rem 0;border-radius:.75rem;font-weight:700;font-size:.9375rem;margin-top:.25rem}
.m-add:hover{opacity:.92}

/* ===== 首页二维码弹框 ===== */
.qrcode-card{background:#fff;border-radius:1rem;width:20rem;max-width:90%;padding:1.75rem 1.5rem 1.5rem;position:relative;text-align:center;box-shadow:var(--shadow-card)}
.qrcode-title{font-size:1.125rem;font-weight:700;color:var(--gray-800);margin-bottom:1rem}
.qrcode-img-wrap{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal-50),#e6fffb);border-radius:.75rem;padding:1rem;margin-bottom:.875rem}
.qrcode-img-wrap img{width:11rem;height:11rem;object-fit:contain;border-radius:.5rem;background:#fff}
.qrcode-desc{font-size:.8125rem;color:var(--gray-500);line-height:1.6;margin-top:.25rem}

/* ===== 提示条 ===== */
.toast{position:fixed;left:50%;bottom:2.5rem;transform:translateX(-50%) translateY(20px);
  background:rgba(31,41,55,.92);color:#fff;padding:.7rem 1.4rem;border-radius:1.5rem;font-size:.875rem;
  opacity:0;pointer-events:none;transition:.25s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 加载动画 ===== */
.loading-spinner{border:3px solid var(--gray-100);border-top-color:var(--teal-500);border-radius:50%;
  width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ===== 购物车/后台 通用（teal 主题复用）===== */
.page-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--gray-800)}
.btn-teal{background:var(--grad);color:#fff;padding:.7rem 1.5rem;border-radius:.75rem;font-weight:700;transition:.15s}
.btn-teal:hover{opacity:.92}
.btn-ghost{background:#fff;color:var(--teal-600);border:1.5px solid var(--teal-500);padding:.6rem 1.2rem;border-radius:.75rem;font-weight:600}

/* ===== 移动端适配（手机 / 小平板）===== */
@media(max-width:768px){
  /* 顶部导航更紧凑，避免按钮挤压换行 */
  .nav-bar{height:3.25rem}
  .logo span{font-size:1.05rem}
  .nav-btns{gap:.35rem}
  .nav-btn{padding:.4rem .55rem;font-size:.8rem;border-radius:.5rem}
  .cart-badge{font-size:.62rem;min-width:1.05rem;height:1.05rem;top:-.35rem;right:-.35rem}

  /* 主布局保持两栏：左侧导航 + 右侧商品（手机端只收窄侧边栏，不堆叠） */
  .products-layout{gap:.85rem;align-items:flex-start}
  .products-content{width:auto;flex:1;min-width:0}

  /* 分类侧边栏：竖向列表，定位左侧，宽度收窄 */
  .products-sidebar{width:7rem;position:sticky;top:4.5rem;margin-bottom:0}
  .category-sidebar{padding:.5rem .4rem;border-radius:.75rem}
  .category-sidebar h3{font-size:1rem;margin-bottom:.5rem;display:block;color:var(--gray-700)}
  .category-sidebar-list{flex-direction:column;gap:.15rem}
  .category-sidebar-item{width:100%;text-align:left;padding:.55rem .7rem;font-size:.85rem;
    border-left:3px solid transparent;background:transparent;border-radius:.375rem;
    color:var(--gray-700)}
  .category-sidebar-item:hover:not(.active){background:rgba(20,184,166,.05)}
  .category-sidebar-item.active{border-left-color:var(--teal-500);
    background:rgba(20,184,166,.1);color:var(--teal-500)}

  /* 商品行紧凑（手机端） */
  .product-list-item{padding:.55rem .65rem;gap:.6rem}
  .product-image{width:64px;height:64px;min-width:64px;font-size:1.85rem;border-radius:.375rem}
  .product-name{font-size:.9rem}
  .product-category{font-size:.72rem}
  .product-price{font-size:.95rem}
  .add-btn{padding:.35rem .7rem;font-size:.78rem;min-width:60px}

  /* 弹窗竖向、底部弹出（bottom-sheet 体验）、更紧凑 */
  .overlay{padding:.5rem;align-items:flex-end;justify-content:flex-start}
  .modal{flex-direction:column;width:100%;max-height:90vh;border-radius:1rem 1rem 0 0}
  .modal .m-thumb{width:100%;height:9rem;font-size:4rem}
  .modal .m-body{padding:1.1rem}
  .m-name{font-size:1.1rem}
  .m-price{font-size:1.3rem}

  /* 首页二维码弹框（居中卡片） */
  .qrcode-card{width:18rem;padding:1.4rem 1.1rem 1.1rem}
  .qrcode-img-wrap img{width:8.5rem;height:8.5rem}
  /* 二维码弹框始终保持居中（不受底部弹出 bottom-sheet 影响） */
  #qrOverlay{align-items:center;justify-content:center}
}

@media(max-width:480px){
  body{font-size:13.5px}
  .container{padding:.85rem .7rem}
  .section-title{font-size:1.1rem;margin-bottom:.75rem}
  .products-layout{gap:.6rem}
  .products-sidebar{width:5.5rem}
  .category-sidebar{padding:.4rem .25rem}
  .category-sidebar-item{padding:.5rem .4rem;font-size:.78rem}
  .product-image{width:52px;height:52px;min-width:52px;font-size:1.5rem}
  .product-name{font-size:.83rem}
  .product-category{font-size:.68rem}
  .product-price{font-size:.85rem}
  .add-btn{padding:.3rem .55rem;font-size:.72rem;min-width:50px}
  .qrcode-card{width:16rem}
  .qrcode-img-wrap img{width:7.5rem;height:7.5rem}
}