/* product.v1.css — V2 详情页样式（提取自 product.preview.html 内联 <style>）
   2026-05-19: Design 交付的 assets/css/product.v1.css 是旧 V1 版，缺 V2 class；
   本文件改用 preview 内联 V2 CSS 全套（.bundle-block / .var-table / .buy-block 等）。 */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500&family=Noto+Sans:wght@300;400;500;600;700&display=swap");
:root{
  --ink-900:#0B0A08;--ink-800:#171512;--ink-700:#24211C;--ink-600:#3A362F;
  --ink-500:#6B655B;--ink-400:#9A9389;--ink-300:#C5BFB4;--ink-200:#E6E1D8;
  --ink-100:#F3EFE6;--ink-50:#FAF7F0;--paper:#FFFFFF;
  --rose-gold:#B76E5D;--rg-700:#A86B55;--rg-300:#E4C2B5;--rg-100:#F5E4DB;
  --success:#3F6B4E;--warning:#B5853A;--danger:#A84234;
  --font-serif:"Cormorant Garamond",Georgia,serif;
  --font-sans:"Noto Sans",-apple-system,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink-100);color:var(--ink-900);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* preview chrome */
.banner{background:var(--ink-900);color:#fff;padding:10px 20px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.banner b{color:var(--rg-300)}
.banner .tabs{display:inline-flex;gap:6px}
.banner .tabs button{padding:5px 12px;border:1px solid var(--ink-700);background:transparent;color:#fff;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.banner .tabs button.on{background:var(--rose-gold);border-color:var(--rose-gold)}
.banner .tabs button:hover:not(.on){border-color:var(--rg-300)}

/* layout */
.page-section{padding:24px 0}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(max-width:767px){.container{padding:0 16px}}
.crumb{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500);margin-bottom:18px}
.crumb a{color:var(--ink-500)}.crumb a:hover{color:var(--rose-gold)}
.crumb .sep{margin:0 10px;color:var(--rose-gold)}.crumb .now{color:var(--ink-900)}

/* 2026-05-20: .product-grid 尺寸 + 响应式与首页 .page-layout 完全对齐（侧栏一致）*/
.product-grid{display:grid;grid-template-columns:200px 1fr;gap:40px;background:transparent;padding:0;border:0;position:relative}
@media (max-width:1279px){.product-grid{grid-template-columns:180px minmax(0,1fr);gap:28px}}
@media (max-width:1099px){.product-grid{grid-template-columns:160px minmax(0,1fr);gap:24px}}
@media (max-width:991px){.product-grid{grid-template-columns:160px minmax(0,1fr);gap:24px}}
@media (max-width:767px){.product-grid{grid-template-columns:1fr;gap:20px}}

/* 左侧分类侧栏（.left-sidebar h2 / .cat-item / .cat-link / .cat-chevron 等）
   不在此定义 —— 复用 index.v1.css 的首页侧栏规则，保证与首页完全一致 */

/* product main */
.product-main{min-width:0;background:var(--paper);padding:28px;border:1px solid var(--ink-200)}
.product-details{display:grid;grid-template-columns:5fr 7fr;gap:40px}
@media (max-width:820px){.product-details{grid-template-columns:1fr}}

/* gallery */
.prod-gallery{max-width:480px}
#windowDiv{width:100%;max-width:480px;aspect-ratio:1/1;background:linear-gradient(135deg,#2a1f1c,#B76E5D,#d8a78f);border:1px solid var(--ink-200);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#windowDiv .ph{font-family:var(--font-serif);font-style:italic;font-size:34px;color:rgba(250,247,240,.95);letter-spacing:.02em}
/* 外层 <a id="img"> 撑满方框；图片 object-fit:contain 填入 —— 防溢出 */
#windowDiv #img{display:block;width:100%;height:100%;min-width:0}
#windowDiv img{width:100%;height:100%;object-fit:contain;display:block}
.similar-product{margin-top:12px}
.similar-product .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.similar-product .thumb{aspect-ratio:1/1;border:1px solid var(--ink-200);position:relative;overflow:hidden}
.similar-product .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.similar-product .thumb.is-active{border:1px solid var(--ink-900)}
.similar-product .thumb:hover{border-color:var(--rose-gold)}
.similar-product .thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-size:9px;font-weight:600;letter-spacing:.2em;mix-blend-mode:difference}

/* info column */
.product-information{min-width:0}
.prod-kicker{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-500)}
.prod-kicker a:hover{color:var(--rose-gold)}
.prod-name{font-family:var(--font-serif);font-weight:500;font-size:38px;line-height:1.08;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink-900);text-wrap:pretty;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
/* background:transparent 必须显式声明 —— index.v1.css 也有 .badge-bundle 且带
   background:var(--rose-gold)，不写会被其底色污染成「玫瑰金字+玫瑰金底」文字不可见 */
.badge-bundle{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-gold);background:transparent;border:1px solid var(--rose-gold);padding:4px 9px;line-height:1;align-self:center}

.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip-kv{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;background:var(--ink-100);font-size:11px}
.chip-kv .k{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-500)}
.chip-kv .v{font-weight:600;color:var(--ink-900);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* price */
.price-stack{padding:20px 0;border-top:1px solid var(--ink-200);border-bottom:1px solid var(--ink-200);display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
/* flex-direction:row 必须显式声明 —— index.v1.css 的 .price-row 是 column，
   详情页也加载 index.v1.css，不写会被其 column 漏进来导致价格行堆叠 */
.price-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-row.market .value{font-size:18px;color:var(--ink-500);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--ink-400)}
.price-row.auth .value{font-size:38px;color:var(--rose-gold);line-height:1}
.price-row .label{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500);display:inline-flex;align-items:center;gap:6px}
.price-row .auth-tag{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-gold);border:1px solid var(--rose-gold);padding:2px 6px;line-height:1}
.price-row .value{font-family:var(--font-serif);font-weight:500;font-variant-numeric:tabular-nums}
.price-row .sign{font-family:var(--font-sans);font-size:.55em;font-weight:600;letter-spacing:.1em;color:var(--ink-500);margin-right:4px;vertical-align:baseline}
.price-row.auth .sign{color:var(--rose-gold);font-size:.4em}

/* option dropdowns */
.sku-options{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.sku-options li{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:14px}
.sku-options .sku-label{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500)}
.sku-options select{appearance:none;-webkit-appearance:none;width:100%;height:42px;padding:0 38px 0 14px;background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23B76E5D' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center;border:1px solid var(--ink-900);font-family:var(--font-sans);font-size:14px;color:var(--ink-900)}
.sku-options select:focus{outline:2px solid var(--rose-gold);outline-offset:-1px}

/* qty + buy */
.buy-block{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;margin-top:24px;padding-top:20px;border-top:1px solid var(--ink-200)}
.qty-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.qty-wrap label{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500)}
.qty-input{display:inline-flex;border:1px solid var(--ink-900);height:50px;width:100%;min-width:0}
.qty-input button{width:42px;background:var(--paper);border:0;font-family:var(--font-serif);font-size:22px;font-weight:500;color:var(--ink-900);transition:background .15s ease,color .15s ease}
.qty-input button:hover{background:var(--ink-900);color:#fff}
.qty-input input{flex:1;min-width:0;border:0;border-left:1px solid var(--ink-200);border-right:1px solid var(--ink-200);text-align:center;font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums;background:var(--paper)}
.qty-input input:focus{outline:0;background:var(--ink-50)}
.qty-input .unit-pos{display:inline-flex;align-items:center;padding:0 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-500);border-left:1px solid var(--ink-200)}
.add-to-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink-900);color:#fff;height:50px;padding:0 22px;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink-900);white-space:nowrap;transition:background .15s ease,letter-spacing .2s ease}
.add-to-cart:hover{background:var(--ink-700);letter-spacing:.3em;color:#fff}
.add-to-cart.more-options{background:transparent;color:var(--ink-900)}
.add-to-cart.more-options:hover{background:var(--ink-900);color:#fff}

/* bundle table */
.bundle-block{padding:18px 0;border-top:1px solid var(--ink-200);margin-top:6px}
.bundle-details{margin-bottom:18px}
.bundle-details summary{cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-700);padding:8px 0;list-style:none}
.bundle-details summary::-webkit-details-marker{display:none}
.bundle-details summary::before{content:"▸";display:inline-block;margin-right:10px;color:var(--rose-gold);transition:transform .2s ease}
.bundle-details[open] summary::before{transform:rotate(90deg)}
.bundle-items{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;border-top:1px solid var(--ink-200)}
.bundle-items th{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-500);text-align:left;padding:10px 8px;background:var(--ink-50);border-bottom:1px solid var(--ink-200)}
.bundle-items td{padding:12px 8px;vertical-align:middle;border-bottom:1px solid var(--ink-200)}
.bundle-items .col-prod{display:flex;align-items:center;gap:10px}
.bundle-thumb{width:36px;height:36px;background:var(--ink-100);object-fit:cover}
.bundle-thumb.ph{background:linear-gradient(135deg,#2a1f1c,#B76E5D)}
.bundle-prod-text .name{display:block;font-weight:600;color:var(--ink-900);font-size:13px}
.bundle-prod-text .sn{display:block;font-size:10px;color:var(--ink-500);letter-spacing:.1em;margin-top:2px}
.badge-gift{display:inline-block;margin-top:4px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--success);border:1px solid var(--success);padding:2px 6px}
.badge-unpriced{display:inline-block;margin-top:4px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-400);border:1px solid var(--ink-300);padding:2px 6px}
.bundle-qty{width:60px;height:32px;border:1px solid var(--ink-300);background:var(--paper);text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.qty-fixed{font-family:var(--font-serif);font-size:18px;font-weight:500;color:var(--ink-700);font-variant-numeric:tabular-nums}
/* 固定组合：子产品数量锁定提示 */
.qty-lock-note{font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--ink-400);text-transform:uppercase}
.col-unit-price,.col-subtotal{font-family:var(--font-serif);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-900)}
.col-unit-price .sign,.col-subtotal .sign{font-family:var(--font-sans);font-size:.65em;color:var(--ink-500);margin-right:2px;font-weight:600;letter-spacing:.08em}
.bundle-items td.col-unit-price{font-size:15px}
.bundle-items td.col-subtotal{font-size:15px;color:var(--rose-gold)}

/* variant table */
.variant-table-block{margin-top:6px}
.variant-table{width:100%;border-collapse:collapse;font-size:13px;border-top:1px solid var(--ink-900);border-bottom:1px solid var(--ink-200)}
.variant-table th{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500);text-align:center;padding:12px 10px;background:var(--ink-50);border-bottom:1px solid var(--ink-200)}
.variant-table th.r{text-align:center}.variant-table th.c{text-align:center}
/* 数量列加大 */
.variant-table th.c,.variant-table td.c{width:170px}
.variant-table td{padding:14px 10px;border-bottom:1px solid var(--ink-200);vertical-align:middle;text-align:center}
.variant-table tr:last-child td{border-bottom:0}
.variant-table tr:hover td{background:var(--ink-50)}
.variant-table td.r{text-align:center;font-family:var(--font-serif);font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}
.variant-table td.r.price-auth{color:var(--rose-gold)}
/* 未定价变体：价格列标注 no_price（哑色小字 sans，区别于价格数字）*/
.variant-table td.no-price{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink-400);text-align:center}
.variant-table td.c{text-align:center}
.variant-table td.r .sign{font-family:var(--font-sans);font-size:.55em;color:var(--ink-500);margin-right:2px;font-weight:600}
.variant-table .avail-y,.variant-table .avail-n{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:3px 8px;border:1px solid}
.variant-table .avail-y{color:var(--success);border-color:var(--success)}
.variant-table .avail-n{color:var(--danger);border-color:var(--danger)}
.variant-qty{width:64px;height:34px;border:1px solid var(--ink-300);background:var(--paper);text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.variant-qty:disabled{background:var(--ink-100);color:var(--ink-400);cursor:not-allowed}
/* 最低起订量占位符 —— 字号缩小，避免跟随输入框大字号 */
.variant-qty::placeholder,
.qty-input input::placeholder{font-size:10px;font-weight:400;letter-spacing:.02em;color:var(--ink-400)}
/* 平铺表格每行数量 +/- 步进器 */
.vqty-group{display:inline-flex;align-items:stretch;height:34px;border:1px solid var(--ink-300)}
.vqty-btn{width:30px;border:0;background:var(--paper);font-family:var(--font-serif);font-size:16px;font-weight:500;color:var(--ink-900);cursor:pointer;line-height:1;transition:background .15s ease,color .15s ease}
.vqty-btn:hover:not(:disabled){background:var(--ink-900);color:#fff}
.vqty-btn:disabled{color:var(--ink-300);cursor:not-allowed;background:var(--ink-100)}
.vqty-group .variant-qty{width:74px;height:auto;border:0;border-left:1px solid var(--ink-200);border-right:1px solid var(--ink-200)}

/* detail tab */
.category-tab{margin-top:48px;padding-top:24px;border-top:1px solid var(--ink-200)}
.nav-tabs{list-style:none;padding:0;margin:0 0 18px;display:flex;border-bottom:1px solid var(--ink-900)}
.nav-tabs li a{display:block;padding:14px 22px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500);background:transparent;border-right:1px solid var(--ink-200);position:relative}
.nav-tabs li.active a{color:var(--ink-900);background:var(--ink-50)}
.nav-tabs li.active a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rose-gold)}
.tab-content{padding:16px 4px;font-size:14px;line-height:1.75;color:var(--ink-800)}

/* upsell 追加销售（提取自 Design V2 product.preview.html 内联 <style>）*/
.upsell-section{margin-top:40px;clear:both}
.upsell-title{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-900);border-bottom:1px solid var(--rose-gold);padding-bottom:10px;margin:0 0 18px}
.linked-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.linked-card{border:1px solid var(--ink-200);background:var(--paper);padding:12px;text-align:center;display:flex;flex-direction:column;gap:10px}
.linked-card-img{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink-50)}
.linked-card-img .img-ph{width:100%;height:100%;background:linear-gradient(135deg,#2a1f1c,#B76E5D);display:block}
.linked-card-name{font-size:13px;color:var(--ink-800);line-height:1.4;min-height:36px}
.linked-card-price{font-size:14px}
.linked-card-price .upsell-auth{font-family:var(--font-serif);font-size:18px;font-weight:500;color:var(--rose-gold);font-variant-numeric:tabular-nums}
.linked-card-price .upsell-market{font-family:var(--font-serif);font-size:16px;font-weight:500;color:var(--ink-700);font-variant-numeric:tabular-nums}
.linked-card-price .sign{font-family:var(--font-sans);font-size:.55em;color:var(--ink-500);margin-right:3px;font-weight:600}
.linked-card-price .upsell-noprice{color:var(--ink-400);font-size:11px;font-style:italic}
@media (max-width:700px){.linked-grid{grid-template-columns:repeat(2,1fr)}}

/* show only active variant */
.variant{display:none}
.variant.on{display:block}

/* responsive */
@media (max-width:700px){
  .prod-name{font-size:28px}
  .price-row.auth .value{font-size:28px}
  .sku-options li{grid-template-columns:1fr;gap:6px}
  .buy-block{grid-template-columns:1fr}
  .add-to-cart{width:100%}

  /* 选项表格 → 移动端卡片化重排：每个变体一张卡，避免固定 170px 列横向溢出 */
  .variant-table{display:block;border:0}
  .variant-table thead{display:none}
  .variant-table tbody{display:block}
  .variant-table tr{display:block;border:1px solid var(--ink-200);margin-bottom:12px}
  .variant-table td{display:flex;justify-content:space-between;align-items:center;width:auto;text-align:right;border:0;border-bottom:1px solid var(--ink-100);padding:10px 14px}
  .variant-table tr td:last-child{border-bottom:0}
  .variant-table td.c{width:auto}
  .variant-table td::before{content:attr(data-label);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);text-align:left;margin-right:14px}
  .variant-table td.col-variant{justify-content:flex-start;font-weight:600;font-size:15px;color:var(--ink-900);background:var(--ink-50);border-bottom:1px solid var(--ink-200)}
  .variant-table td.col-variant::before{display:none}
  .variant-table tr:hover td{background:transparent}
  .variant-table tr:hover td.col-variant{background:var(--ink-50)}
  /* 数量输入框移动端 ≥16px —— 避免 iOS Safari 聚焦时自动放大 */
  .variant-qty{font-size:16px}
}
@media (max-width:480px){
  .buy-block{gap:12px}
}
/* ===== mobile (2026-05-21) — 商品详情页防溢出综合修复 ===== */
@media (max-width:767px){
  /* grid 子项 min-width:0，否则内部内容会把 1fr 轨道撑得比视口宽 → 整页(含主图)横向溢出 */
  .product-grid > *{min-width:0}
  .product-details{gap:24px}
  .product-details > *{min-width:0;max-width:100%}
  .prod-gallery{max-width:none;width:100%}
  .product-information{min-width:0}
  .product-main{padding:16px}
  #windowDiv{max-width:none}
}