/* ==========================================================
   CLEARANCE PAGE — mad-motor.com（促销页，仿模板浅色风格）
   样式全部以 .clr- 前缀隔离，避免影响站内其他模块
   ========================================================== */
.clr-page{
  --clr-red:#D32F2F;
  --clr-teal:#1BA5A8;
  --clr-orange:#F57C00;
  --clr-ink:#212121;
  --clr-gray:#9E9E9E;
  --clr-border:#E0E0E0;
  --clr-bg:#FFFFFF;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  background:var(--clr-bg);
  color:#333333;
  line-height:1.4;
}
.clr-page *{box-sizing:border-box; margin:0; padding:0;}
.clr-page img{max-width:100%; display:block;}

/* ===== 1. 顶部 Banner（BAN-1.jpg 占位图，用户后续自行替换；文字按模板叠加） ===== */
.clr-banner{
  position:relative; width:100%; min-height:340px; overflow:hidden;
  background-image:url('//ueeshop.ly200-cdn.com/u_file/UPAZ/UPAZ594/2608/10/photo/BAN-1.jpg');
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  display:flex; align-items:center;
}
.clr-banner::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, rgba(10,12,15,.78) 0%, rgba(10,12,15,.52) 55%, rgba(10,12,15,.66) 100%);
}
.clr-banner__content{ position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:44px 16px; }
.clr-banner__title{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(32px, 5.5vw, 58px); line-height:1; letter-spacing:.02em;
  color:#FFFFFF;
}
.clr-banner__sub{
  margin-top:14px; max-width:560px; font-size:15px; line-height:1.55; color:#FFFFFF;
}
.clr-banner__badges{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.clr-banner__badge{
  background:#FFFFFF; border-radius:8px; padding:12px 20px; min-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.clr-banner__badge b{ font-family:'Rajdhani',sans-serif; font-size:30px; font-weight:700; color:var(--clr-red); line-height:1; }
.clr-banner__badge span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--clr-ink); }
@media (max-width:560px){
  .clr-banner{ min-height:250px; }
  .clr-banner__content{ padding-left:10px; padding-right:10px; }
  .clr-banner__badges{ gap:8px; }
  .clr-banner__badge{ min-width:0; flex:1; padding:9px 8px; }
  .clr-banner__badge b{ font-size:22px; }
  .clr-banner__sub{ font-size:13px; }
}

/* ===== 2. Tab 切换卡（仅 ESC / Motors） ===== */
.clr-radio{position:absolute; opacity:0; pointer-events:none;}
.clr-tabs{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:12px; padding:28px 16px 6px;
}
.clr-tab{
  display:inline-block; cursor:pointer;
  border:1px solid #CCCCCC; background:#FFFFFF;
  color:#333333; font-family:inherit; font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  padding:8px 30px; border-radius:20px;
  transition:background .2s, color .2s, border-color .2s;
  user-select:none;
}
.clr-tab:hover{border-color:#000000; color:#000000;}
#clrT-esc:checked ~ .clr-tabs label[for="clrT-esc"],
#clrT-motors:checked ~ .clr-tabs label[for="clrT-motors"]{
  background:#000000; border-color:#000000; color:#FFFFFF;
}

/* ===== 3. 分区标题 ===== */
.clr-title{
  display:none; text-align:center;
  font-family:'Rajdhani',sans-serif; font-size:24px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--clr-ink);
  padding:14px 16px 0;
}
#clrT-esc:checked ~ .clr-title--esc{display:block;}
#clrT-motors:checked ~ .clr-title--motors{display:block;}

/* ===== 4. 产品卡片网格 ===== */
.clr-grid{
  max-width:1200px; margin:0 auto; padding:18px 16px 64px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
#clrT-esc:checked ~ .clr-grid--motors{display:none;}
#clrT-motors:checked ~ .clr-grid--esc{display:none;}
@media (max-width:980px){ .clr-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .clr-grid{grid-template-columns:1fr; gap:14px; padding:14px 10px 48px;} }

.clr-card{
  background:#FFFFFF; border:1px solid var(--clr-border); border-radius:6px;
  display:flex; position:relative; overflow:hidden; cursor:pointer;
  transition:box-shadow .25s, transform .25s;
}
.clr-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.09); transform:translateY(-3px); }
.clr-card__media{ flex:0 0 40%; position:relative; aspect-ratio:1/1; background:#F7F7F7; }
.clr-card__media img{ width:100%; height:100%; object-fit:cover; }
.clr-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  background:var(--clr-orange); color:#FFFFFF; border-radius:4px;
  font-size:12px; font-weight:700; padding:3px 8px; letter-spacing:.02em;
}
.clr-card__body{ flex:1; min-width:0; padding:14px 14px 12px; display:flex; flex-direction:column; gap:7px; }
.clr-card__stock{ color:var(--clr-red); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.clr-card__title{
  font-size:14px; font-weight:600; color:var(--clr-ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.clr-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.clr-price-regular{ color:var(--clr-gray); font-size:13px; text-decoration:line-through; }
.clr-price-sale{ color:var(--clr-red); font-size:24px; font-weight:900; }
.clr-btn{
  margin-top:auto; display:block; width:100%; text-align:center;
  background:var(--clr-ink); color:#FFFFFF; border-radius:4px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:10px 0; text-decoration:none; transition:background .2s;
}
.clr-btn:hover{ background:#000000; color:#FFFFFF; }

/* ===== 占位卡片（等待用户提供产品链接） ===== */
.clr-card--ph{
  border:1px dashed #CCCCCC; background:#FAFAFA; cursor:default;
  min-height:190px; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; color:#999999;
}
.clr-card--ph b{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#AAAAAA; }
.clr-card--ph span{ font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; }
.clr-card--ph:hover{ transform:none; box-shadow:none; }


/* ==========================================================
   主题兼容覆写 — 前台正文包裹在 .main_content.editor_txt 内，
   主题规则(.editor_txt span / .editor_txt h1~h6)会覆盖本页样式，
   以下规则通过提升特异性(.editor_txt .clr-*)确保促销页样式生效
   ========================================================== */
.editor_txt .clr-title{ margin:0; padding:14px 16px 0; font-size:24px; font-weight:700; color:var(--clr-ink); }
.editor_txt .clr-banner__title{ margin:0; font-weight:700; color:#FFFFFF; font-size:clamp(32px,5.5vw,58px); }
.editor_txt .clr-banner__sub{ color:#FFFFFF; }
.editor_txt .clr-banner__badge b{ color:var(--clr-red); font-weight:700; }
.editor_txt .clr-banner__badge span{ color:var(--clr-ink); font-weight:700; }
.editor_txt .clr-card__title{ margin:0; font-size:14px; font-weight:600; color:var(--clr-ink); line-height:1.35; }
.editor_txt .clr-card__stock{ color:var(--clr-red); font-size:11px; font-weight:700; }
.editor_txt .clr-price-regular{ color:var(--clr-gray); font-size:13px; text-decoration:line-through; }
.editor_txt .clr-price-sale{ color:var(--clr-red); font-size:24px; font-weight:900; }
.editor_txt .clr-btn{ font-size:12px; font-weight:700; color:#FFFFFF; background:var(--clr-ink); }
.editor_txt .clr-btn:hover{ background:#000000; color:#FFFFFF; }
.editor_txt .clr-badge{ color:#FFFFFF; }
.editor_txt .clr-card--ph b{ font-size:13px; font-weight:700; color:#AAAAAA; }
.editor_txt .clr-card--ph span{ font-size:12px; font-weight:400; color:#999999; }
.editor_txt .clr-tab{ font-size:14px; font-weight:600; color:#333333; }