/* ===== 商品详情页样式（goods_details） =====
   依赖 index.css 的设计变量：--primary-red / --deep-red / --shadow-sm / --shadow-md
   注：日期选择条/月历样式内联在模板 <style> 中，不在本文件 */

/* ===== 面包屑 ===== */
.breadcrumb { font-size:13px; color:#999; padding:22px 0 6px; }
.breadcrumb a { color:#999; transition:color .2s; }
.breadcrumb a:hover { color:var(--primary-red); }

/* ===== Flex 工具类（CRMEB acea-row 系列） ===== */
.acea-row { display:flex; flex-wrap:wrap; align-items:center; }
.row-middle { align-items:center; }
.row-column-around { flex-direction:column; justify-content:space-around; align-items:flex-start; }

/* ===== 双栏布局：左海报 + 右信息 ===== */
.detail-layout { display:grid; grid-template-columns:460px 1fr; gap:36px; margin-top:16px; align-items:start; }
.gallery-col { position:sticky; top:96px; }
.main-poster { width:100%; aspect-ratio:3/4; border-radius:14px; background-size:cover; background-position:center; box-shadow:var(--shadow-md); border:1px solid var(--gray-border); position:relative; overflow:hidden; }
.badge-stage { position:absolute; top:14px; left:14px; background:linear-gradient(135deg,var(--primary-red),var(--deep-red)); color:#fff; font-size:13px; padding:5px 14px; border-radius:14px; }
.thumb-list { display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; }
.thumb-item { flex:0 0 84px; height:84px; border-radius:8px; background-size:cover; background-position:center; border:1px solid var(--gray-border); cursor:pointer; opacity:.85; transition:all .2s; }
.thumb-item:hover { opacity:1; border-color:var(--primary-red); }

/* ===== 右侧信息区 ===== */
.event-title-lg { font-size:28px; font-weight:700; line-height:1.4; color:#1b1b1b; }
.rating-share { display:flex; justify-content:space-between; align-items:center; margin:14px 0 18px; }
.stars { display:flex; align-items:center; gap:3px; font-size:14px; color:#333; }
.stars i { color:#f7ba2a; font-size:14px; }
.share-btn { font-size:13px; color:#666; border:1px solid var(--gray-border); background:#fff; padding:6px 16px; border-radius:18px; transition:all .2s; }
.share-btn:hover { color:var(--primary-red); border-color:var(--primary-red); }
.detail-meta-grid { display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--gray-border); border-radius:12px; padding:16px 20px; }
.meta-row { font-size:14px; color:#555; display:flex; align-items:center; gap:8px; }
.meta-row i { color:var(--primary-red); font-size:14px; width:16px; text-align:center; }

/* ===== 购买区域 ===== */
.text-wrapper { margin-top:22px; background:#fff; border:1px solid var(--gray-border); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow-sm); }
.money-wrapper { align-items:baseline; gap:14px; padding-bottom:16px; border-bottom:1px dashed var(--gray-border); }
.money-wrapper .price { font-size:34px; font-weight:700; color:var(--primary-red); }
.money-wrapper .price span { font-size:inherit; }
.money-wrapper del { font-size:16px; color:#bbb; }
.attribute { padding:18px 0 4px; }
.attribute .size-wrapper { margin-bottom:16px; gap:14px; justify-content:flex-start; }
.label { flex:0 0 70px; font-size:14px; color:#999; }
.attribute .list { flex:1; gap:10px; }
.attribute .item { position:relative; cursor:pointer; }
.attribute .cont { border:1px solid #ddd; background:#fff; color:#333; font-size:14px; padding:8px 20px; border-radius:8px; cursor:pointer; transition:all .15s; user-select:none; }
.attribute .cont:hover { border-color:var(--primary-red); }
.attribute .cont.active { border-color:var(--primary-red); color:var(--primary-red); background:#fff5f3; font-weight:500; }
.phoneBuy { margin-top:10px; }
.phoneBuy img { width:150px; height:150px; border-radius:8px; border:1px solid var(--gray-border); }
.date-select .label { flex:0 0 auto; width:100%; }

/* ===== 详情选项卡 ===== */
.detail-tabs { margin-top:44px; background:#fff; border:1px solid var(--gray-border); border-radius:14px; box-shadow:var(--shadow-sm); padding:6px 28px 24px; }
.tabs-header { display:flex; gap:6px; border-bottom:2px solid #f5efe9; }
.tab-btn { border:none; background:transparent; padding:14px 22px; font-size:15px; color:#666; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.tab-btn:hover { color:var(--primary-red); }
.tab-btn.active { color:var(--primary-red); font-weight:600; border-bottom-color:var(--primary-red); }
.tab-content { padding-top:20px; }
.tab-pane { display:none; }
.tab-pane.active-pane { display:block; font-size:14px; line-height:1.9; color:#444; }
.tab-pane.active-pane img { max-width:100%; height:auto; }
.tab-pane.active-pane p { margin-bottom:8px; }

/* ===== 相关推荐 ===== */
.rec-section { margin-top:48px; }
.rec-section h2 { font-weight:700; color:#1b1b1b; margin-bottom:24px; }
.rec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; }
.rec-card { background:#fff; border:1px solid #f3ede9; border-radius:12px; box-shadow:var(--shadow-sm); padding:14px; transition:transform .3s,box-shadow .3s; }
.rec-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.rec-img { height:180px; border-radius:8px; background-size:cover; background-position:center; margin-bottom:12px; }
.rec-card h4 { font-size:15px; font-weight:600; color:#1b1b1b; line-height:1.4; margin:6px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; }
.rec-price { font-size:18px; font-weight:700; color:var(--primary-red); }

/* ===== 响应式 ===== */
@media (max-width:900px) {
  .detail-layout { grid-template-columns:1fr; gap:24px; }
  .gallery-col { position:static; }
  .main-poster { aspect-ratio:4/3; }
  .event-title-lg { font-size:22px; }
  .money-wrapper .price { font-size:28px; }
  .text-wrapper, .detail-tabs { padding:16px; }
  .rec-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .rec-img { height:120px; }
}