/* 鲸鹿卫浴 - 主样式 UTF-8 响应式 */
* { box-sizing: border-box; }
body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #333; background: #f8f8f8; -webkit-tap-highlight-color: transparent; }

.site-header { position: sticky; top: 0; z-index: 100; padding: 0.75rem 1rem; background: inherit; border-bottom: 1px solid rgba(0,0,0,.06); }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; }
.site-logo { max-height: 36px; width: auto; }
.site-name { font-size: 1.25rem; font-weight: 600; }

/* 轮播：固定比例 2:1 横向自适应，自动切换 */
.carousel-wrap { position: relative; width: 100%; overflow: hidden; background: #eee; }
.carousel-wrap::before { content: ''; display: block; padding-bottom: 50%; }
.carousel-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; transition: transform 0.4s ease; }
.carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-slide a { display: block; width: 100%; height: 100%; }
.carousel-dots { position: absolute; bottom: 0.5rem; left: 0; right: 0; text-align: center; }
.carousel-dots .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); margin: 0 4px; cursor: pointer; transition: background .2s; }
.carousel-dots .dot.active { background: #fff; }

/* 分类栏 - 与主题一致见 theme-*.css */
.category-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; max-width: 1200px; margin: 0 auto; }
.category-bar .cat-item { padding: 0.4rem 0.8rem; border-radius: 6px; text-decoration: none; color: inherit; font-size: 0.9rem; transition: background .2s, color .2s; }
.sort-bar { padding: 0.5rem 1rem; max-width: 1200px; margin: 0 auto; font-size: 0.85rem; }
.sort-bar a { margin-right: 0.5rem; color: #666; text-decoration: none; }
.sort-bar a.active { font-weight: 600; }

.product-list { max-width: 1200px; margin: 0 auto; padding: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.product-card { text-decoration: none; color: inherit; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.product-card:active { transform: scale(0.98); }
.product-cover { aspect-ratio: 1; background: #f0f0f0; overflow: hidden; }
.product-cover img { width: 100%; height: 100%; object-fit: cover; }
.product-cover .no-cover { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 0.85rem; }
.product-info { padding: 0.6rem; flex: 1; }
.product-name { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-subtitle { margin: 0; font-size: 0.8rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-price { margin: 0.35rem 0 0; font-size: 1rem; font-weight: 600; color: #c00; }
.product-stat { font-size: 0.75rem; color: #999; margin-right: 0.5rem; }

.load-tip { text-align: center; padding: 1rem; color: #999; font-size: 0.9rem; }

.site-footer { padding: 1.5rem 1rem; text-align: center; border-top: 1px solid rgba(0,0,0,.06); background: #fff; margin-top: 1rem; }
.footer-actions { display: flex; justify-content: center; align-items: stretch; gap: clamp(0.75rem, 3vw, 1.25rem); flex-wrap: wrap; margin-bottom: 0.75rem; }
.footer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(0.65rem, 2.5vw, 0.85rem) clamp(1.2rem, 4vw, 1.6rem);
  border-radius: clamp(8px, 2vw, 12px);
  font-size: clamp(0.875rem, 2.2vw, 1rem); font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  min-width: clamp(110px, 35vw, 140px); min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.footer-btn:hover { transform: translateY(-2px); opacity: 0.95; }
.footer-btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
@media (hover: none) {
  .footer-btn:hover { transform: none; }
  .footer-btn:active { transform: scale(0.97); }
}
.footer-btn-call { background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%); color: #fff; box-shadow: 0 4px 12px rgba(46,204,113,.35); }
.footer-btn-call:hover { box-shadow: 0 6px 18px rgba(46,204,113,.45); }
.footer-btn-map { background: linear-gradient(180deg, #3498db 0%, #2980b9 100%); color: #fff; box-shadow: 0 4px 12px rgba(52,152,219,.35); }
.footer-btn-map:hover { box-shadow: 0 6px 18px rgba(52,152,219,.45); }
.footer-addr, .footer-phone { margin: 0.25rem 0; font-size: clamp(0.8rem, 2vw, 0.9rem); color: #666; }

/* 详情页 */
.detail-page { max-width: 800px; margin: 0 auto; padding: 1rem; padding-bottom: 2rem; }
.detail-back { margin-bottom: 0.5rem; }
.detail-back a { color: #666; text-decoration: none; font-size: 0.9rem; }
.detail-title { margin: 0 0 0.25rem; font-size: 1.35rem; }
.detail-subtitle { margin: 0 0 1rem; color: #666; font-size: 0.9rem; }

.detail-media-wrap { margin-bottom: 1rem; border-radius: 8px; overflow: hidden; background: #000; position: relative; }
.detail-swipe-hint { position: absolute; left: 0; right: 0; top: 0.5rem; z-index: 2; margin: 0; text-align: center; font-size: 0.8rem; color: rgba(255,255,255,.85); pointer-events: none; transition: opacity 0.5s ease; }
.detail-swipe-hint.hidden { opacity: 0; }
.detail-media-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.detail-media-item { flex: 0 0 100%; width: 100%; scroll-snap-align: start; cursor: pointer; }
.detail-media-item img { width: 100%; display: block; vertical-align: top; pointer-events: none; }
.detail-media-video { min-height: 200px; }
.detail-media-video video, .detail-media-video .detail-video { width: 100%; max-height: 50vh; pointer-events: auto; }
.detail-media-dots { display: flex; justify-content: center; gap: 6px; padding: 0.5rem; background: rgba(0,0,0,.3); }
.detail-media-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.detail-media-dots .dot.active { background: #fff; }

.detail-video-section { margin: 1rem 0; }
.detail-video-section-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.detail-video-block { margin-bottom: 1rem; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; position: relative; width: 100%; aspect-ratio: 16/9; }
.detail-video-block:last-child { margin-bottom: 0; }
/* 无 src 时不显示视频控件，避免出现空白/错误控件 */
.detail-video-block .detail-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.detail-video-block .detail-video:not([src]) { display: none !important; }

/* 全屏遮罩：无 .playing 时绝不显示视频，避免多余控件 */
.detail-fullscreen { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; }
.detail-fullscreen.show { opacity: 1; visibility: visible; }
.detail-fullscreen-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; border: none; background: rgba(255,255,255,.2); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; z-index: 10; }
.detail-fullscreen-inner { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem 1rem; }
.detail-fullscreen-inner .detail-fullscreen-img { max-width: 100%; max-height: 85vh; width: auto; height: auto; object-fit: contain; }
.detail-fullscreen-inner .detail-fullscreen-video { max-width: 100%; max-height: 85vh; width: auto; display: none !important; visibility: hidden !important; }
.detail-fullscreen-inner .detail-fullscreen-video.playing { display: block !important; visibility: visible !important; }
.detail-fullscreen-inner .detail-fullscreen-img.hidden { display: none; }

.detail-price-bar { padding: 0.75rem 0; border-bottom: 1px solid #eee; }
.detail-price { font-size: 1.5rem; font-weight: 700; color: #c00; }

.detail-specs, .detail-desc { margin-top: 1rem; }
.detail-specs h3, .detail-desc h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 0.5rem; border: 1px solid #eee; text-align: left; }
.spec-table th { background: #f9f9f9; font-weight: 600; }
.detail-desc-text { font-size: 0.95rem; line-height: 1.6; color: #555; }

.detail-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.detail-actions .btn { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; }
.btn-call { background: #c00; color: #fff; }
.btn-share { background: #666; color: #fff; }

/* 详情页视频在手机端适配 */
@media (max-width: 768px) {
    .detail-video-section { margin: 1rem -1rem; padding: 0 1rem; }
    .detail-video-block { margin-bottom: 1rem; max-height: 70vh; aspect-ratio: 16/9; min-height: 0; }
    .detail-video-block .detail-video { max-height: 70vh; object-fit: contain; }
}

@media (max-width: 480px) {
    .product-list { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 0.75rem; }
    .product-name { font-size: 0.85rem; }
    .detail-title { font-size: 1.2rem; }
    .detail-video-block { max-height: 55vh; }
    .detail-video-block .detail-video { max-height: 55vh; }
    .detail-fullscreen-inner .detail-fullscreen-video.playing { max-height: 90vh; }
    .footer-actions { gap: 0.75rem; margin-bottom: 1rem; }
    .footer-btn { min-width: 45%; flex: 1 1 45%; max-width: 180px; min-height: 46px; padding: 0.75rem 1rem; }
}