/* ============================================================
   Fordeal 统一设计系统层 theme.css（v1.0）
   说明：本文件在商城前台(index.html)与运营后台(console.html)最后加载，
   仅做视觉与交互增强，不改动任何 DOM 契约/接口；所有原规则保留，可整体删除回滚。
   分区：1 共享令牌 2 商城前台 3 商品详情 4 购物车/结算/订单 5 后台工作台
   ============================================================ */

/* ---------- 1. 共享设计令牌 ---------- */
:root{
  --brand-amber:#f5c942;
  --brand-amber-deep:#dfae22;
  --brand-ink:#202128;
  --brand-pink:#d83d6b;
  --brand-green:#1f8a6b;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(24,23,34,.05),0 2px 6px rgba(24,23,34,.04);
  --shadow-md:0 12px 32px rgba(24,23,34,.09);
  --shadow-lg:0 24px 56px rgba(24,23,34,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* 商城前台令牌精修（覆盖 styles.css） */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:#ffe79a; color:#3a2c05; }
button,a,input,select,textarea{ transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease),opacity .18s var(--ease); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid rgba(223,174,34,.55); outline-offset:2px; }
.button:active,.icon-button:active,.mini-cart:active,.category-nav button:active,.floating-button:active{ transform:scale(.97); }

/* ============================================================
   2. 商城前台（顾客端）
   ============================================================ */

/* 顶部导航 */
.site-header{ background:rgba(255,255,255,.82); border-bottom:1px solid rgba(22,22,32,.06); box-shadow:0 8px 26px rgba(22,22,32,.045); backdrop-filter:saturate(160%) blur(16px); }
.site-header nav a{ border-radius:8px; }
.site-header nav a:hover{ color:var(--ink); }
.icon-button{ transition:transform .18s var(--ease),background .18s,box-shadow .18s; }
.icon-button:hover{ background:#f6f4ee; box-shadow:var(--shadow-sm); }
.demo-label{ border-radius:999px; background:#fdf8e8; }

/* 页面标题区：统一为暖色轻面板（首页/购物袋/订单/结算等共用 intro） */
.intro{ background:linear-gradient(120deg,#fcf9f0 0%,#f7f2e6 58%,#f5f1f6 100%); border:1px solid #efe9db; border-radius:22px; padding:30px 34px; }
.intro h1{ font-size:36px; letter-spacing:-1.2px; }
.intro .eyebrow{ color:#9a8440; }

/* 工具栏 */
.search-box{ border-radius:13px; min-height:45px; border-color:#e7e3da; background:#fff; }
.search-box:focus-within{ border-color:#e2cf7e; box-shadow:0 0 0 4px rgba(223,174,34,.14); }
.category-nav button{ border:1px solid transparent; border-radius:999px; padding:10px 17px; color:#7b7b84; }
.category-nav button:hover{ background:#f0ede6; color:var(--ink); }
.category-nav button.selected{ background:var(--brand-ink); color:#fff; box-shadow:0 6px 16px rgba(28,28,36,.18); }
.sort-select{ border-radius:12px; min-height:45px; border-color:#e7e3da; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance:none; padding-right:30px; }

/* 商品卡片 */
.product-grid{ gap:22px; }
.product-card{ border-radius:var(--radius-lg); border:1px solid rgba(24,23,34,.07); box-shadow:var(--shadow-sm); padding:9px; }
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(24,23,34,.08); }
.product-photo{ border-radius:15px; background:linear-gradient(180deg,#faf9f6,#f3f1ec); }
.product-photo img{ transition:transform .45s var(--ease); }
.product-card:hover .product-photo img{ transform:scale(1.04); }
.product-photo.contain{ background:#fff; }
.card-favorite{ backdrop-filter:blur(4px); box-shadow:0 4px 12px rgba(20,20,30,.10); transition:transform .16s var(--ease),background .18s,color .18s; }
.card-favorite:hover{ transform:scale(1.1); }
.product-name{ transition:color .15s; }
a.product-name:hover{ color:#000; }
.product-meta{ color:#9a99a2; }
.shop-link{ color:#7b6aa6; }
.price-line{ font-variant-numeric:tabular-nums; }
.mini-cart{ border-radius:50%; width:34px;height:34px; background:#f2f0ea; color:#56534f; transition:background .18s,color .18s,transform .16s; }
.product-card:hover .mini-cart:not(:disabled){ background:var(--brand-ink); color:#fff; }
.mini-cart:disabled{ background:#f1f0ee; color:#b7b4ad; }

/* 折扣角标 / 缺货状态（由 app.js 渲染） */
.discount-badge{ position:absolute;top:13px;left:13px;z-index:2; background:linear-gradient(135deg,#ffd84d,#f2b52e); color:#3a2c05; font-size:11px;font-weight:800; letter-spacing:.3px; padding:5px 10px;border-radius:999px; box-shadow:0 4px 10px rgba(176,128,20,.28); }
.product-card.is-soldout .product-photo img{ filter:grayscale(.55) opacity(.62); }
.soldout-ribbon{ position:absolute;left:0;right:0;bottom:0;z-index:2; background:rgba(28,28,34,.58); color:#fff; text-align:center; font-size:11px; letter-spacing:3px; padding:8px 0; backdrop-filter:blur(2px); }

/* 首件“焦点商品”：桌面端为横向聚光灯卡片，不再 2×2 留洞 */
@media(min-width:1001px){
  .product-card.featured{ grid-column:span 2; grid-row:auto; display:flex; flex-direction:row; align-items:stretch; gap:0; padding:11px; }
  .product-card.featured .product-photo{ flex:0 0 45%; aspect-ratio:auto; height:auto; min-height:330px; border-radius:14px; }
  .product-card.featured .card-content{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:20px 24px; }
  .product-card.featured .product-name{ font-size:20px; min-height:0; -webkit-line-clamp:3; margin-bottom:12px; }
  .product-card.featured .product-meta{ font-size:11px; }
  .product-card.featured .shop-link{ font-size:12px; }
  .product-card.featured .price-line{ font-size:27px; margin-top:auto; padding-top:16px; }
  .product-card.featured .card-favorite{ top:20px;right:20px; }
  .product-card.featured .product-photo img,.product-card.featured:hover .product-photo img{ transform:none; }
  .product-card.featured:hover .product-photo img{ transform:scale(1.04); }
}
@media(max-width:1000px){
  .product-card.featured{ grid-column:auto; grid-row:auto; display:block; }
  .product-card.featured .product-photo{ aspect-ratio:4/5; min-height:0; }
  .product-card.featured .card-content{ display:block; padding:13px 9px 8px; }
  .product-card.featured .product-name{ font-size:14px; min-height:43px; }
  .product-card.featured .price-line{ font-size:19px; margin:0; padding-top:11px; }
}

/* 按钮（前台） */
#main .button{ border-radius:13px; min-height:47px; font-weight:600; }
#main .button.primary{ background:var(--brand-ink); border-color:var(--brand-ink); box-shadow:0 10px 22px rgba(24,24,32,.20); }
#main .button.primary:hover{ background:#34333d; transform:translateY(-1px); box-shadow:0 14px 28px rgba(24,24,32,.24); }
#main .button.secondary{ background:#efedf3; border-color:#efedf3; }
#main .button:hover{ border-color:#d9d6d0; }

/* 空状态 / 加载 / 提示 */
.empty-state{ border-radius:22px; box-shadow:var(--shadow-sm); padding:84px 24px; }
.empty-icon{ width:76px;height:76px; }
.empty-icon svg{ width:34px;height:34px; }
.catalog-end{ letter-spacing:.5px; }

/* 悬浮入口与页脚 */
.floating-button{ box-shadow:var(--shadow-md); transition:transform .18s var(--ease),box-shadow .18s; }
.floating-button:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.site-footer{ color:#928d96; }
#toast{ border-radius:14px; box-shadow:var(--shadow-lg); font-weight:500; }

/* 活动 / 精选店铺 / 评价（business.css 在前台的部分统一为暖金体系） */
.biz-campaign{ border-radius:18px; background:linear-gradient(120deg,#fdf5dc,#fbeec8); border:1px solid #f2e4b4; transition:transform .18s var(--ease),box-shadow .18s; }
.biz-campaign:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.biz-featured a{ border-radius:999px; background:#fff; transition:background .18s,border-color .18s; }
.biz-featured a:hover{ background:#fbf4dd; border-color:#e6d49a; }
.biz-reviews article{ border-radius:14px; box-shadow:var(--shadow-sm); }
#public-support input:focus,#public-support textarea:focus{ outline:2px solid rgba(223,174,34,.5); border-color:#e2cf7e; }

/* ============================================================
   3. 商品详情
   ============================================================ */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin:0 0 20px; }
.crumb a{ color:#777680; }
.crumb a:hover{ color:var(--ink); }
.crumb span{ color:#c3c1c8; }
.detail-grid{ gap:46px; }
@media(min-width:901px){ .detail-photo{ position:sticky; top:112px; } }
.detail-photo{ border-radius:24px; box-shadow:var(--shadow-md); }
.detail-photo .discount-badge{ top:18px;left:18px; }
.detail-info h1{ font-size:31px; }
.detail-price{ border-radius:18px; background:linear-gradient(120deg,#f6efd9,#fbf7ea); border-color:#e9ddb4; }
.detail-price strong{ font-variant-numeric:tabular-nums; }
.detail-price .save-tag{ display:inline-block; margin-left:10px; font-size:12px; font-weight:700; color:#fff; background:#e0531f; border-radius:999px; padding:3px 9px; vertical-align:middle; }
.stock-note{ font-weight:600; }
.stock-note.low{ color:#c2780f; }
.stock-note.out{ color:#b23a52; }
.detail-options select,.detail-options input{ border-radius:12px; border-color:#e0ddd6; }
.detail-options select:focus,.detail-options input:focus{ outline:2px solid rgba(223,174,34,.5); border-color:#e2cf7e; }
.detail-qty{ display:flex; align-items:stretch; gap:0; }
.detail-qty input{ text-align:center; font-weight:700; padding:0; border-left:0;border-right:0; border-radius:0; background:#fff; }
.detail-qty input:focus{ outline:none; }
.detail-qty button{ width:44px; min-height:46px; display:grid; place-items:center; }
.merchant-card{ border-radius:16px; transition:box-shadow .18s,transform .18s; }
.merchant-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.detail-panel{ border-radius:22px; box-shadow:var(--shadow-sm); }
.assurance{ border-radius:22px; background:linear-gradient(135deg,#26252e,#1c1b22); }
/* 详情页有独立的收藏/加购操作，隐藏右下悬浮入口避免重复 */
body[data-page="product"] .floating-actions{ display:none; }
@media(max-width:720px){
  .detail-info .detail-actions{ position:sticky; bottom:10px; z-index:20; margin:10px -2px 0; padding:10px; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-md); }
}

/* ============================================================
   4. 购物车 / 结算 / 订单 / 店铺
   ============================================================ */
.cart-list,.checkout-form,.order-summary,.order-card{ border-radius:20px; box-shadow:var(--shadow-sm); border-color:rgba(24,23,34,.07); }
.cart-item{ transition:background .15s; }
.cart-item:hover{ background:#fcfbf8; }
.cart-item img{ border-radius:13px; }
.quantity-control{ border-radius:10px; }
.quantity-control button:hover{ background:#f3f0e9; }
.order-summary{ border-radius:20px; }
.summary-total strong{ font-variant-numeric:tabular-nums; }
.form-field input{ border-radius:11px; }
.form-field input:focus{ outline:2px solid rgba(223,174,34,.5); border-color:#e2cf7e; }
.checkout-form .button.primary{ box-shadow:0 10px 22px rgba(24,24,32,.18); }
.demo-notice{ border-radius:12px; background:#faf3df; border:1px solid #f0e5bd; }
.order-card{ overflow:hidden; }
.order-card-header{ background:linear-gradient(120deg,#fdfbf5,#fbf8ef); }
.order-status{ border-radius:999px; padding:6px 12px; font-weight:600; }
.order-item img{ border-radius:10px; }
.success-icon{ box-shadow:0 10px 24px rgba(70,120,60,.18); }
.shop-hero{ border-radius:24px; background:linear-gradient(120deg,#efeaf4,#f6f1e4); box-shadow:var(--shadow-sm); }
.initial-loading .loading-ring{ border-top-color:var(--brand-amber-deep); }

/* ============================================================
   5. 运营后台（console）
   ============================================================ */
#console-app{ --yellow:#f5c942; }
#console-app .button{ border-radius:10px; }
#console-app .button.primary{ background:linear-gradient(135deg,#ffd855,#f2bf2e); border-color:#ecc53a; color:#352b06; box-shadow:0 6px 16px rgba(196,150,20,.22); }
#console-app .button.primary:hover{ filter:brightness(1.02); box-shadow:0 9px 20px rgba(196,150,20,.28); }
#console-app .button.dark{ background:#26282e; }
#console-app input:focus,#console-app select:focus,#console-app textarea:focus{ outline:2px solid rgba(223,174,34,.55); border-color:#e6cd6b; }

/* 登录分屏：暖色品牌故事侧，减少空旷感 */
.auth-story{ position:relative; overflow:hidden; background:radial-gradient(900px 420px at 82% -8%,#fff6d6,transparent),linear-gradient(160deg,#fffdf6,#f5efe0); }
.auth-story::after{ content:"F"; position:absolute; right:-34px; bottom:-96px; font-size:360px; line-height:1; font-style:italic; font-weight:800; color:rgba(206,166,38,.10); pointer-events:none; }
.auth-story>*{ position:relative; z-index:1; }
.auth-story h1 span{ background:linear-gradient(transparent 62%,#ffe990 62%); }
.role-feature>span{ background:#fbf1d2; }
.auth-form-area{ background:linear-gradient(180deg,#f6f7f9,#f1f2f5); }
.auth-card .button.primary{ box-shadow:0 10px 24px rgba(196,150,20,.28); }

/* 侧边导航 */
.sidebar nav a{ transition:background .16s,color .16s; }
.sidebar nav a:hover{ background:#faf8f1; }
.sidebar nav a.active{ background:linear-gradient(90deg,#fff4cc,#fdec9e); color:#6f5a12; box-shadow:inset 3px 0 0 var(--brand-amber-deep); }
.sidebar nav a .nav-count{ background:var(--brand-amber); color:#5a4a12; font-weight:700; }
.avatar{ background:#ffea98; }

/* 顶栏 */
.topbar{ background:rgba(255,255,255,.85); box-shadow:0 4px 18px rgba(24,26,33,.04); }

/* 指标卡 / 面板 / 表格 */
.stat{ border-radius:16px; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease),box-shadow .18s; }
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat.accent{ background:linear-gradient(135deg,#fff8e0,#fdf2c8); border-color:#efe2b0; }
.stat strong{ font-variant-numeric:tabular-nums; }
.panel{ border-radius:16px; box-shadow:var(--shadow-sm); border-color:rgba(24,23,34,.06); }
.chart-bar{ background:linear-gradient(180deg,#f7d766,#eebd31); border-radius:6px 6px 0 0; }
.table-wrap table tbody tr{ transition:background .14s; }
.table-wrap table tbody tr:hover td{ background:#fcfbf6; }
.badge{ border-radius:999px; padding:5px 10px; font-weight:600; }
.notice{ border-radius:12px; background:#fbf4dd; border-color:#efe3b6; }
dialog{ border-radius:18px; }
.dialog-close{ border-radius:9px; }
#console-toast{ border-radius:12px; box-shadow:var(--shadow-lg); }

/* 业务/交易/恢复等共享卡片（business/commerce/catalog）在后台的轻统一 */
#console-app .commerce-card,#console-app .biz-health article{ border-radius:14px; }
#console-app .biz-menu button.selected{ background:linear-gradient(90deg,#fff3c6,#fde99c); color:#6f5a12; }

/* ---------- 响应式微调 ---------- */
@media(max-width:1050px){ .intro{ padding:24px 22px; } .intro h1{ font-size:30px; } }
@media(max-width:720px){
  .intro{ padding:20px 18px; border-radius:18px; }
  .intro h1{ font-size:25px; }
  .product-grid{ gap:14px 11px; }
  .discount-badge{ top:10px;left:10px; font-size:10px; padding:4px 8px; }
}
