:root{--orange:#ff7417;--orange2:#ef5a0d;--gold:#ffd56e;--text:#21140f;--muted:#7e7e7e;--line:#eeeeee;--pw:min(100vw,430px)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#eee;color:var(--text)}
.phone-page{position:relative;width:var(--pw);min-height:100vh;margin:0 auto;background:#fff;overflow-x:hidden}
.list-page,.detail-page{display:flex;flex-direction:column}

/* ===== 列表页 ===== */
/* 背景图自带店名标题与火马（941x1672，标题+火马占顶部22%），底色衔接图底近白区 */
.exact-list{background:#fdfcfb url('../assets/ui/new/list-background.png') center top/100% auto no-repeat}
.list-hero{height:calc(var(--pw)*.41 + 46px);position:relative}
.list-hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
/* 搜索栏：贴 hero 底部，位于火马正下方 */
.search-bar{position:absolute;left:17px;right:17px;bottom:0;height:46px;border-radius:999px;background:#fff;display:flex;align-items:center;gap:13px;padding:0 20px;color:#9b9b9b;font-size:16px;line-height:1;box-shadow:0 6px 18px rgba(150,40,0,.16)}
.search-input{min-width:0;flex:1;height:100%;border:0;outline:0;background:transparent;color:#333;font:inherit;padding:0;-webkit-appearance:none;appearance:none}
.search-input::placeholder{color:#999;font-weight:400}
.search-input::-webkit-search-cancel-button{display:none}
.magnifier{width:18px;height:18px;border:2.2px solid #8d8d8d;border-radius:50%;position:relative;display:inline-block;flex:none;opacity:.9}
.magnifier:after{content:"";position:absolute;width:8px;height:2.2px;background:#8d8d8d;right:-6px;bottom:0;transform:rotate(45deg);border-radius:2px}

.list-panel{position:relative;z-index:1;flex:1;background:transparent;padding:0 14px 10px}

/* Tab：胶囊按钮，激活=橙渐变白字+下方圆点指示，非激活=白底深棕红字 */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;height:auto;margin:18px 2px 20px}
.tab{position:relative;height:43px;border:0;border-radius:999px;background:rgba(255,255,255,.93);font-family:inherit;font-size:17px;font-weight:700;color:#9c4a23;cursor:pointer;padding:0;box-shadow:0 3px 10px rgba(180,70,15,.12)}
.tab.active{background:linear-gradient(180deg,#ff9d33,#f2570c);color:#fff;font-weight:900;box-shadow:0 5px 14px rgba(240,90,12,.38),inset 0 1px 1px rgba(255,255,255,.45)}
.tab.active:after{content:"";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#f59a60}

/* 商品卡片：上图下文竖卡，名称行右侧橙描边分类标签 */
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;position:relative;z-index:2}
.product-card{display:flex;flex-direction:column;padding:8px 8px 13px;background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(160,60,10,.10);text-decoration:none;color:inherit}
.product-img-wrap{position:relative;width:100%;padding-top:88%;border-radius:10px;overflow:hidden;background:#f7f3ee}
.product-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.product-info{min-width:0;padding:10px 4px 0}
.name-row{display:flex;align-items:center;gap:6px}
.product-info h3{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.3;font-weight:800;color:#1f1208;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-info .cat{flex:none;padding:3px 7px;border-radius:999px;background:#fffaf3;color:#f0640f;border:1px solid #f6c391;font-size:10px;font-weight:700}
.product-info p{margin:7px 0 0;color:#9a9088;font-size:12px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 底部通栏咨询按钮 */
.list-consult{position:static;flex:none;margin:8px 20px 6px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(180deg,#ffa13a,#f2570c);color:#fff;text-decoration:none;font-size:19px;font-weight:900;letter-spacing:4px;text-indent:4px;box-shadow:0 6px 14px rgba(240,90,10,.26),inset 0 1px 2px rgba(255,255,255,.55);border:1.5px solid rgba(255,214,140,.9)}

/* 空状态/加载中 */
.empty-state{grid-column:1/-1;text-align:center;padding:42px 20px;color:#a08874;background:rgba(255,255,255,.92);border-radius:14px;box-shadow:0 4px 14px rgba(140,50,10,.08)}
.empty-icon{font-size:48px;margin-bottom:12px}
.empty-state p{margin:0;color:#a08874;font-size:15px}
.site-record{flex:none;text-align:center;padding:12px 12px 18px;color:#b6907c;font-size:11px;line-height:1.5}
.list-page>.site-record{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.site-record:before{content:"";display:block;width:46px;height:2px;margin:0 auto 10px;border-radius:2px;background:linear-gradient(90deg,rgba(240,199,154,0),#f0c79a,rgba(240,199,154,0))}
.record-links{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}
.site-record a{display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%;color:#a9846f;text-decoration:none;letter-spacing:.4px;transition:color .2s}
.record-icon{width:14px;height:14px;flex:none}
.site-record a:hover,.site-record a:active{color:var(--orange2);text-decoration:none}

/* ===== 详情页 ===== */
/* 背景图火马+烟花氛围（941x1672），商品透明图直接融于背景 */
.detail-page{background:#fdfcfb url('../assets/ui/new/detail-background.png') center top/100% auto no-repeat}
/* 悬浮返回箭头（无导航条） */
.top-nav{position:absolute;top:0;left:0;right:0;z-index:10;height:54px;background:transparent}
.nav-back{position:absolute;left:20px;top:19px;width:18px;height:18px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);text-decoration:none;filter:drop-shadow(0 1px 3px rgba(120,20,0,.5))}
/* 商品图：后台接口透明底图片，原样融合显示在火马下方 */
.detail-firework-photo{padding:calc(var(--pw)*.60) 0 0;display:flex;justify-content:center}
.detail-firework-photo img{width:88%;max-height:calc(var(--pw)*.62);object-fit:contain;display:block}

/* 白区杂志式排版：红色大标题+菱形分隔线+左文右码 */
.detail-main{flex:1;background:transparent;padding:30px 24px 22px}
.detail-name{margin:0;font-size:25px;line-height:1.3;font-weight:900;color:#c0231c;letter-spacing:2px}
.detail-name:before{content:"✳";margin-right:11px;font-size:17px;font-weight:400;color:#dd584d;vertical-align:3px}
.detail-name:after{content:"✳";margin-left:11px;font-size:17px;font-weight:400;color:#dd584d;vertical-align:3px}
.detail-divider{position:relative;width:64%;height:1px;background:#dcb9a6;margin:15px 0 20px}
.detail-divider:after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;transform:rotate(45deg);background:#c0392e}
.detail-body{display:grid;grid-template-columns:1fr 124px;gap:16px;align-items:start}
.detail-text>p{margin:0;color:#4d4d4d;font-size:15.5px;line-height:2.05;white-space:pre-wrap}
.detail-text .detail-slogan{margin:16px 0 0;color:#c0231c;font-size:16.5px;font-weight:800;line-height:1.6;white-space:normal}
.detail-qr{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding-top:8px}
.qr-box.realish{width:118px;height:118px;border-radius:10px;background:#fff;border:1px solid #e3d8ce;position:relative;box-shadow:0 4px 12px rgba(120,60,20,.12);overflow:hidden}
.qr-box.realish:before{content:"";position:absolute;inset:9px;background:linear-gradient(90deg,#111 8px,transparent 8px) 0 0/17px 17px,linear-gradient(#111 8px,transparent 8px) 0 0/17px 17px,radial-gradient(circle,#111 42%,transparent 44%) 4px 4px/34px 34px,#fff;filter:contrast(1.8)}
.qr-box.realish.has-qr:before{display:none}
.qr-box.realish img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.qr-tip{margin:0;padding:7px 10px;border:1.5px solid #d8453c;border-radius:9px;color:#c0231c;font-size:12px;font-weight:700;background:#fff;white-space:nowrap}

@media(max-width:374px){
  .list-panel{padding-left:10px;padding-right:10px}
  .product-grid{gap:9px}
  .tabs{gap:9px}
  .tab{font-size:15px;height:40px}
  .product-info h3{font-size:14px}
  .detail-body{grid-template-columns:1fr 108px;gap:12px}
  .qr-box.realish{width:104px;height:104px}
  .qr-tip{font-size:11px;padding:6px 8px}
}