* { margin:0; padding:0; box-sizing:border-box; }

/* ----- 产品容器 ----- */
.product-container {
  max-width:1200px;
  width:100%;
  background:white;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top: 20px;
   padding-bottom: 20px;
  margin:0px auto;
}
@media(max-width:1400px){
  .product-container { 
    max-width:1100px;
    padding: 20px 24px; 
    gap: 20px; 
    }
}

/* 左侧图像区 */
.image-area {
  flex:1.2;
  min-width:280px;
  max-width: 600px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.main-image {
  background:#fafafc;
  border-radius:24px;
  border:1px solid #eef2f6;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.02);
  min-height: 400px;
}
.main-image img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  cursor:zoom-in;
  transition:transform 0.2s ease;
}

/* 缩略图滚动组件 */
.thumbnail-scroll {
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:4px 0;
}
.scroll-btn {
  background:white;
  border:1px solid #e2e8f0;
  border-radius:40px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:22px;
  font-weight:500;
  color:#334155;
  transition:all 0.2s;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  flex-shrink:0;
  user-select:none;
}
.scroll-btn:hover { background:#f1f5f9; border-color:#94a3b8; transform:scale(1.02); color:#0f172a; }
.scroll-btn:active { transform:scale(0.96); }
.scroll-btn.disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; background:#f1f5f9; }

.thumb-viewport {
  overflow:hidden;
  border-radius:18px;
  width: calc(96px*5 + 10px*4);
}
.thumbnail-list {
  display:flex;
  transition: transform 0.35s ease;
  gap:10px;
  will-change:transform;
}

/* 新增：缩略图容器 */
.thumb-item {
  width:96px;
  height:80px;
  position:relative;
  flex-shrink:0;
  cursor:pointer;
}
.thumb-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:2px solid transparent;
  transition:all 0.2s ease;
  background:#f8f9fc;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.thumb-item:hover img { transform:scale(1.05); }
.thumb-item.active-thumb img {
  border: 2px solid white;
  box-shadow: 0 8px 0px rgba(0,0,0,0.25);
  transform: scale(1.02);
}
.play-icon {
  position:absolute; right:6px; bottom:6px; width:20px; height:20px;
  border-radius:50%; background:rgba(0,0,0,0.7); color:#fff; font-size:10px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* 右侧详情区 */
.detail-area {
  flex:1;
  min-width:260px;
  background:#ffffff;
  border-radius:24px;
  padding:8px 8px 8px 16px;
  overflow-y: scroll;
  max-height:700px;
  scroll-behavior:smooth;
  border:1px solid #f0f2f5;
  box-shadow:0 2px 8px rgba(0,0,0,0.02);
}
.detail-area::-webkit-scrollbar { width:5px; }
.detail-area::-webkit-scrollbar-track { background:#f1f1f1; border-radius:10px; }
.detail-area::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px; }
.detail-area h1 { font-size:1.8rem; font-weight:700; color:#1e293b; margin-top:0; margin-bottom:16px; letter-spacing:-0.3px; line-height:1.3; }
.price-tag { 
    font-size:2rem; 
    font-weight:800; 
    color:#2c6e9e; 
    background:#eef4ff; 
    display:inline-block; 
    border-radius:10px;
    height: 50px;
    align-items: center; 
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
.product-description { color:#334155; line-height:1.6; margin-bottom:24px; border-left:3px solid #cbd5e1; padding-left:16px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:15px 0 12px; align-items:center; }
.chip { border:1px solid #e2e8f0; background:#fff; padding:6px 14px; border-radius:999px; font-size:13px; cursor:pointer; transition:all 0.2s; }
.chip:hover { background:#f1f5f9; }
.chip.on { border-color:#2c6e9e; background:#eef4ff; color:#1e4a76; }
.qtyBox { display:flex; align-items:center; border:1px solid #d6d6d6; width:max-content; height:42px; margin:12px 0; border-radius:40px; overflow:hidden; }
.qtyBox button { width:40px; height:40px; border:none; background:#fff; cursor:pointer; font-size:18px; transition:0.1s; }
.qtyBox button:hover { background:#f8fafc; }
.qtyBox input { width:46px; height:40px; border:none; outline:none; text-align:center; font-size:14px; }
.btnRow { display:flex; gap:12px; margin:18px 0; }
.btnAdd { flex:1; border-radius:40px; height:48px; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:0.2s; }
.btnCart { background:#fff; color:#111; border:1px solid #111; }
.btnBuy { background:#1e1e1e; color:#fff; }
.btnAdd:hover { opacity:0.85; transform:translateY(-1px); }
.pdpTip { font-size:12px; color:#6f6f6f; margin:15px 0; border-top:1px solid #eee; padding-top:12px; }
.msg { font-size:13px; margin-top:8px; color:#c2410c; }
.customization {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: #000;
  display: inline-block;
  border-radius:10px;
  height: 40px;
  align-items: center; 
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}
.richText {
  overflow: hidden; 
  color: #111; 
  font-size: 14px; 
  line-height: 1.9; 
  margin-top: 8px; 
  display: none;
}
.richText p img {
    display: block;           
    margin-bottom: 8px;      
}
.richText p img:last-child {
    margin-bottom: 0;         
}
.fw800 { font-weight: 800; margin-right: 8px; }

/* ===== 购物车弹窗样式 ===== */
.cart-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
  padding: 16px;
  box-sizing: border-box;
}
.cart-modal-overlay.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0s 0s;
}
.cart-toast {
  width: 100%;
  max-width: 500px;
  background-color: #ffffff;
  border-radius: 32px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.20), 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 32px 24px 28px;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.cart-modal-overlay.active .cart-toast {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.toast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.toast-header .icon-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #1d8b4f;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(29, 139, 79, 0.2);
}
.toast-header h2 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.3px;
  color: #1e1e1e;
  margin: 0;
}
.toast-sub {
  font-size: 16px;
  color: #5b5b5b;
  margin-left: 42px;
  margin-top: -4px;
  margin-bottom: 20px;
  font-weight: 400;
  letter-spacing: 0.2px;
  border-bottom: 1px solid #f0ece6;
  padding-bottom: 16px;
}
.product-card-cart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #faf8f5;
  padding: 16px 18px;
  border-radius: 20px;
  margin-bottom: 24px;
  border: 1px solid #efebe6;
}
.product-name-cart {
  font-size: 18px;
  font-weight: 600;
  color: #1e1e1e;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-name-cart span:last-child {
  font-weight: 400;
  font-size: 15px;
  color: #6b6b6b;
  background: #ece8e1;
  padding: 0 12px;
  border-radius: 40px;
  line-height: 28px;
  letter-spacing: 0.2px;
}
.product-detail-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  font-size: 15px;
  color: #3d3d3d;
  margin-top: 2px;
}
.product-detail-cart .type {
  color: #5e5e5e;
  letter-spacing: 0.2px;
}
.product-detail-cart .qty {
  margin-left: auto;
  background: #f3f0ea;
  padding: 2px 16px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #252525;
}
.product-detail-cart .qty-number {
  font-weight: 600;
  color: #1a1a1a;
}
.action-group {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 6px;
}
.btn-cart-modal {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  background: transparent;
  color: #1e1e1e;
}
.btn-primary-modal {
  background: #1e1e1e;
  color: white;
  border-color: #1e1e1e;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
.btn-primary-modal:hover {
  background: #2f2f2f;
  border-color: #2f2f2f;
  transform: scale(0.98);
}
.btn-primary-modal:active {
  background: #111;
  transform: scale(0.96);
}
.btn-outline-modal {
  background: transparent;
  border: 1px solid #d0cbc3;
  color: #2b2b2b;
}
.btn-outline-modal:hover {
  background: #f5f2ed;
  border-color: #b8b0a6;
  transform: scale(0.98);
}
.btn-outline-modal:active {
  background: #eae5dd;
  transform: scale(0.96);
}
@media (max-width: 420px) {
  .cart-toast { padding: 24px 18px 22px; }
  .toast-header h2 { font-size: 20px; }
  .product-name-cart { font-size: 17px; flex-wrap: wrap; row-gap: 4px; }
  .product-name-cart span:last-child { font-size: 14px; padding: 0 10px; }
  .product-detail-cart { font-size: 14px; gap: 6px 12px; }
  .btn-cart-modal { font-size: 15px; padding: 13px 6px; }
}

/* 响应式 */
@media(max-width:980px){
  .product-container { padding:20px; gap:20px; }
  .detail-area h1 { font-size:1.6rem; }
  .price-tag { font-size:1.7rem; }
}
@media(max-width:780px){
  .thumb-viewport { width: calc(72px*5 + 10px*4); }
  .thumb-item { width:72px; height:64px; }
  .scroll-btn { width:32px; height:32px; font-size:18px; }
}
@media(max-width:580px){
  .thumb-viewport { width: calc(68px*5 + 10px*4); }
  .thumb-item { width:68px; height:60px; }
  .scroll-btn { width:28px; height:28px; }
}