/* Product map — cp.html */
.cp-product-map {
  margin-top: 1.5rem;
  background: oklch(0.985 0.005 85);
  border: 1px solid oklch(0.9 0.01 85);
  padding: 1.5rem;
}

.cp-product-map__title-wrap {
  display: flex;
  justify-content: center;
}

.cp-product-map__title {
  padding: 0.5rem 2rem;
  border: 2px solid #222;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}

.cp-product-map__categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .cp-product-map__categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .cp-product-map__categories {
    grid-template-columns: repeat(6, 1fr);
  }
}

.cp-product-map__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cp-product-map__col-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.cp-product-map__label,
.cp-product-map__item {
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: center;
  border-radius: 2px;
  line-height: 1.25;
  white-space: pre-line;
  transition: all 0.15s ease;
  display: block;
  text-decoration: none;
  box-sizing: border-box;
}

a.cp-product-map__label:hover,
a.cp-product-map__item:hover,
a.cp-product-map__mcu-title:hover,
a.cp-product-map__mcu-subtitle:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.cp-product-map__mcu-title,
.cp-product-map__mcu-subtitle {
  display: block;
  text-decoration: none;
  box-sizing: border-box;
}

.cp-product-map__label {
  padding: 0.5rem;
  font-size: 12px;
  border: 2px solid;
}

.cp-product-map__item {
  font-size: 11px;
  border: 2px dashed;
}

/* Color variants */
.cp-product-map--red .cp-product-map__label,
.cp-product-map--red .cp-product-map__item,
.cp-product-map__item--red {
  border-color: #f87171;
  background: #fef2f2;
  color: #b91c1c;
}

.cp-product-map--amber .cp-product-map__label,
.cp-product-map--amber .cp-product-map__item,
.cp-product-map__item--amber {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #b45309;
}

.cp-product-map--emerald .cp-product-map__label,
.cp-product-map--emerald .cp-product-map__item,
.cp-product-map__item--emerald {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.cp-product-map--violet .cp-product-map__label,
.cp-product-map--violet .cp-product-map__item,
.cp-product-map__item--violet {
  border-color: #a78bfa;
  background: #f5f3ff;
  color: #6d28d9;
}

.cp-product-map--blue .cp-product-map__label,
.cp-product-map--blue .cp-product-map__item,
.cp-product-map__item--blue {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #1d4ed8;
}

.cp-product-map--pink .cp-product-map__label,
.cp-product-map--pink .cp-product-map__item,
.cp-product-map__item--pink {
  border-color: #f472b6;
  background: #fdf2f8;
  color: #be185d;
}

/* MCU detail section */
.cp-product-map__mcu {
  margin-top: 2.5rem;
}

.cp-product-map__mcu-title-wrap {
  display: flex;
  justify-content: center;
}

.cp-product-map__mcu-title {
  padding: 0.5rem 1.5rem;
  font-size: 11px;
  text-align: center;
  border: 2px dashed #10b981;
  background: #ecfdf5;
  color: #047857;
  border-radius: 2px;
  line-height: 1.25;
  white-space: pre-line;
}

.cp-product-map__mcu-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:1.5rem;
}





/* 1T */
.cp-product-map__series-grid--dual {
  grid-template-columns:repeat(2,1fr);
}


@media(min-width:768px){

  .cp-product-map__mcu-grid {
    grid-template-columns:repeat(5,1fr);
  }


  .cp-product-map__mcu-grid > div:nth-child(1){
    grid-column:span 1;
  }


  .cp-product-map__mcu-grid > div:nth-child(2){
    grid-column:span 2;
  }


  .cp-product-map__mcu-grid > div:nth-child(3){
    grid-column:span 2;
  }

}
.cp-product-map__mcu-grid > div {
  min-width:0;
}


.cp-product-map__series-grid {
  min-width:0;
}
.cp-product-map__series-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  margin-top:1rem;
}


/* 12T/6T */
.cp-product-map__series-grid--single {
  grid-template-columns:1fr;
}


/* 10/11/12/15 */
.cp-product-map__series-grid--dual {
  grid-template-columns:repeat(2,1fr);
}

.cp-product-map__item {
  overflow-wrap:break-word;
}



.cp-product-map__mcu-subtitle-wrap {
  display: flex;
  justify-content: center;
}

.cp-product-map__mcu-subtitle {
  padding: 0.5rem 1rem;
  font-size: 11px;
  text-align: center;
  border: 2px dashed #10b981;
  background: #ecfdf5;
  color: #047857;
  border-radius: 2px;
  line-height: 1.25;
  white-space: pre-line;
}
.cp-product-map__series-grid--single {
    
    grid-template-columns:1fr !important;
}
.cp-product-map__series-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

.cp-product-map__series-grid--wide {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .cp-product-map__series-grid--wide {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .cp-product-map__series-grid--wide {
    grid-template-columns: repeat(6, 1fr);
  }
}

.cp-product-map__mcu-extra {
  margin-top: 2rem;
}

.cp-product-map__mcu-extra-wrap {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================
   独立两块4列布局（完全隔离版）
   ========================================== */

/* 外层大容器：移动端单列，PC端强制左右 1:1 并排 */
.cp-mcu-dual-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;

  box-sizing: border-box !important;
  margin-top: 1.5rem !important;
}

@media (min-width: 768px) {
  .cp-mcu-dual-wrapper {
    grid-template-columns: 1fr 1fr !important; /* 电脑端严格左右对半 */
  }
}

/* 内部卡片 */
.cp-mcu-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 标题统一 */
.cp-mcu-card__title-wrap {

}

.cp-mcu-card__title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.5rem 1rem !important;
  font-size: 11px !important;
  border: 2px dashed #10b981 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-radius: 2px !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 每个卡片内部强制 2 列按钮 */
.cp-mcu-card__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* ==========================================
   移动端 (手机预览) 终极强行对齐补丁
   ========================================== */

@media (max-width: 767px) {
  /* 1. 强制重置所有 MCU 网格和父容器，不给任何缩进 */
  .cp-product-map__mcu-grid,
  .cp-product-map__mcu-grid > div,
  .cp-product-map__mcu-extra {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. 强制所有按钮网格统一为：两列等宽、等距 */
  .cp-product-map__series-grid,
  .cp-product-map__series-grid--single,
  .cp-product-map__series-grid--dual,
  .cp-product-map__series-grid--wide {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 强制 1:1 双列 */
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. 强制让每个小按钮块填满各自网格单元格 */
  .cp-product-map__item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 !important;
  }
}

/* 为这一行的两个按钮增加间距并保持垂直居中/对齐 */
.cp-product-map__mcu-extra-wrap {
  display: flex !important;
  justify-content: flex-end; /* 或者 center / flex-start，取决于你想靠右还是居中 */
  gap: 0.75rem !important;   /* 设置 12px 的按钮间距（也可以改成 0.5rem 或 1rem） */
  align-items: center;
}

/* 如果在手机端希望按钮不要太挤，可以限制宽度或自适应 */
.cp-product-map__mcu-extra-wrap .cp-product-map__item {
  width: auto;               /* 避免按钮被强行拉伸填满 */
}