* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #333; background: #f0f2f5; }
.compare-wrap {
    max-width: 1300px;
    margin: 10px auto 30px auto;
    padding: 0 20px;
}

.breadCrumb { margin-bottom: 15px; font-size: 12px; color: #999; }
.breadCrumb ul { list-style: none; }
.breadCrumb li { float: left; margin-right: 6px; line-height: 20px; }
.breadCrumb a { color: #666; text-decoration: none; }
.breadCrumb a:hover { color: #009688; text-decoration: underline; }
.breadCrumb .compare-crumb-current { color: #999; }
.clearfix:after { content: ""; display: block; clear: both; }

.compare-header-box { background: #fff; padding: 30px; margin-bottom: 10px; }
.compare-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; color: #333; }
.compare-seo { font-size: 14px; line-height: 1.8; color: #666; }

.compare-table-box { background: #fff; padding: 30px; margin-bottom: 10px; }
.compare-table { width: 100%; border-collapse: collapse; border: 1px solid #eaeaea; }
.compare-table th, .compare-table td { border: 1px solid #eaeaea; padding: 15px 20px; text-align: left; font-size: 14px; }
.compare-table th { background: #f9fbfb; font-weight: bold; color: #333; }
.compare-table th.model-name a { color: #009688; }
.compare-table td:first-child { background: #f9fbfb; font-weight: bold; color: #333; width: 200px; }
.compare-table td { color: #323232; }
.compare-table td.model-name { color: #009688; }
.compare-table td.model-name a { color: #00936f; text-decoration: none; }
.compare-table td.model-name a:hover { text-decoration: underline; }
.compare-table td.brand-col { color: #009688; }
.compare-table td.brand-col a { color: #009688; text-decoration: none; }
.compare-table td.brand-col a:hover { text-decoration: underline; }

.section-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 15px; }
.other-compare-box { background: #fff; padding: 30px; margin-bottom: 30px; }
.other-compare-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 10px; list-style: none; }
.other-compare-list a { color: #009688; text-decoration: none; font-size: 14px; }
.other-compare-list a:hover { text-decoration: underline; }

.recommend-box { background: #fff; padding: 30px; margin-bottom: 30px; }
.recommend-table { width: 100%; border-collapse: collapse; }
.recommend-table th { padding: 15px 10px; text-align: left; font-size: 14px; color: #555; background-color: #f4f5f7; border-bottom: none; font-weight: bold; }
.recommend-table td { padding: 15px 10px; font-size: 14px; color: #323232; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.recommend-table tr:hover td { background-color: #f0f9f8; }

/* Part Number 默认跟随正文色，鼠标移入整行才变绿 */
.recommend-table td a { color: #323232; text-decoration: none; }
.recommend-table tr:hover td a { color: #009688; }


.price-col { display: flex; align-items: center; }
.price-val { color: #009688; font-weight: bold; margin: 0 4px; }
.price-icon { margin-left: 4px; display: inline-block; vertical-align: middle; }
.price-arrow { margin-left: 35px; line-height: 1; }
.price-arrow img { vertical-align: middle; }

.action-col { display: flex; align-items: center; justify-content: flex-start; }
.ecsa-cart-btn { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ecsa-cart-btn img { cursor: pointer; vertical-align: middle; }
.shuliangNum { font-weight: bold; color: #646464; border: 0; width: 46px; height: 24px; border-radius: 12px; background: #f5f5f5; padding: 0 8px; text-align: center; outline: none; -moz-appearance: textfield; margin: 0 4px; }
.shuliangNum::-webkit-outer-spin-button, .shuliangNum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-icon { cursor: pointer; margin-left: 8px; }

/* ===== 骨架屏（接口返回前占位） ===== */
.sk { display: block; background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: skLoading 1.4s ease infinite; border-radius: 4px; }
@keyframes skLoading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-line { height: 14px; margin-bottom: 12px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-title { height: 26px; width: 40%; margin-bottom: 20px; }
.sk-w90 { width: 90%; }
.sk-w75 { width: 75%; }
.sk-w60 { width: 60%; }
.sk-table { border: 1px solid #eaeaea; }
.sk-table-row { display: flex; border-bottom: 1px solid #eaeaea; }
.sk-table-row:last-child { border-bottom: none; }
.sk-table-cell { flex: 1; padding: 15px 20px; }
.sk-table-cell:first-child { flex: 0 0 200px; background: #f9fbfb; }
.sk-table-head .sk-table-cell { background: #f9fbfb; }
.sk-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px; list-style: none; }
.compare-load-failed { font-size: 14px; color: #999; }

/* ===== Similar Models 列表（数据由 product/PartComparison/HsPricePtidProducts 填充） ===== */
/* 阶梯价悬浮层：hover 价格区展开全部档位，样式与搜索结果页一致 */
.ecsa-price-box { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; }
.ecsa-price-popup { display: none; z-index: 99; white-space: nowrap; position: absolute; left: 0; top: 100%; margin-top: 2px; background: #fff; box-shadow: 1px 1px 4px 3px rgba(0, 0, 0, .1); border: 1px solid #c8c8c8; border-radius: 6px; padding: 8px; color: #323232; }
.ecsa-price-box:hover .ecsa-price-popup { display: block; }
.ecsa-price-popup table { border-collapse: collapse; background: #fff; }

/* 弹出层是嵌在 .recommend-table 单元格里的第二层 table，外层的 td 规则会通过后代选择器串进来：
   行分隔线来自 .recommend-table td 的 border-bottom，淡绿底来自 .recommend-table tr:hover td
   （弹出层只在 hover 时显示，那条 hover 规则必然命中，白底会被盖掉）。
   这里把 tr:hover 一起写死，保证优先级压过外层行样式。 */
.recommend-table .ecsa-price-popup td,
.recommend-table tr:hover .ecsa-price-popup td { white-space: nowrap; font-size: 13px; color: #323232; line-height: 16px; padding: 0; border-bottom: 0; background: transparent; vertical-align: middle; }
.recommend-table .ecsa-price-popup td.viewPrice,
.recommend-table tr:hover .ecsa-price-popup td.viewPrice { padding-right: 30px; }
.recommend-table .ecsa-price-popup td.plusviewPrice,
.recommend-table tr:hover .ecsa-price-popup td.plusviewPrice { color: #00936f; font-weight: bold; }
.ecsa-price-popup td.plusviewPrice img { margin-left: 5px; vertical-align: middle; }

/* 加入购物车飞入动画：克隆的图标飞向顶部购物车后淡出 */
.ecsa-cart-fly { position: fixed; z-index: 100000; pointer-events: none; transition: all 0.7s cubic-bezier(0.2, 0.6, 0.35, 1); }
.ecsa-cart-fly.ecsa-cart-fly-active { opacity: 0.5; transform: scale(0.3); }

/* 列表加载中的骨架行 */
.similar-sk-row td { padding: 15px 10px; }