/* =============================================================================
 * chicme 首页布局样式（2026-10-18）  —— 前缀 cm-，与 styles.css 完全隔离
 * 版面节奏对齐 www.chicme.com：居中容器、整宽 banner、六宫格分类、
 * 商品 4/5 列栅格、纯白底 + 细线分隔 + 大标题(#Title) 风格。
 * ========================================================================== */

/* 全屏铺满：对齐 chicme 真实版心 --page-width:180rem(2880px) / --page-width-margin:0
   普通屏(<=2880)即 100% 全宽，仅超宽屏(>2880)才居中，和 chicme 一模一样 */
.cm-wrap {
  width: min(2880px, 100%);
  margin: 0 auto;
  padding: 0;
}

/* ------------------------------------------------------------ 导航栏 --- */
.cm-catbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.cm-catbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cm-catbar-inner::-webkit-scrollbar { display: none; }

.cm-nav-item { position: relative; flex: 0 0 auto; }
.cm-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.cm-nav-item:hover .cm-nav-link,
.cm-nav-item.active .cm-nav-link { color: #cf2519; }
.cm-caret { transition: transform 0.18s; }
.cm-nav-item:hover .cm-caret { transform: rotate(180deg); }

/* 下拉：纯白面板 + 细线，和参考站一致的克制风格 */
.cm-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #ebebeb;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 70;
}
.cm-nav-item:hover .cm-dropdown,
.cm-nav-item:focus-within .cm-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cm-dropdown-inner { padding: 14px 0; }
.cm-dropdown-all {
  display: block;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 6px;
}
.cm-dropdown-all:hover { color: #cf2519; }
.cm-dropdown-list { list-style: none; margin: 0; padding: 0; }
.cm-dropdown-list a {
  display: block;
  padding: 8px 20px;
  font-size: 13.5px;
  color: #333;
  text-decoration: none;
}
.cm-dropdown-list a:hover { background: #f7f7f7; color: #cf2519; }

/* 移动抽屉 */
.cm-drawer-list { list-style: none; margin: 0; padding: 0; }
.cm-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 4px;
  font-size: 15px;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  list-style: none;
}
.cm-drawer-summary::-webkit-details-marker { display: none; }
.cm-drawer-sub[open] .cm-drawer-summary .cm-caret { transform: rotate(180deg); }
.cm-drawer-link.active { color: #cf2519; font-weight: 600; }
.cm-drawer-sublist { padding-left: 14px; border-left: 2px solid #f0f0f0; margin-left: 4px; }

/* ---------------------------------------------------------- 首页区块 --- */
.cm-sec { padding: 34px 0; }
.cm-sec-tight { padding: 22px 0 8px; }
.cm-sec-flush { padding: 0 0 12px; }

/* 大标题：#Shop By Category / # Sale On, Style On / # Featured */
.cm-sec-title {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111;
  text-align: center;
}
.cm-sec-title-lg { font-size: 34px; letter-spacing: -0.02em; }

/* Hero 轮播 */
.cm-hero { position: relative; margin-bottom: 8px; }
.cm-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cm-hero-track::-webkit-scrollbar { display: none; }
.cm-hero-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.cm-hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.cm-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.30));
}
.cm-hero-title { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; }
.cm-hero-sub { font-size: 16px; opacity: 0.92; }
.cm-hero-cta {
  margin-top: 6px;
  padding: 11px 28px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cm-hero-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 12px 0 4px;
}
.cm-dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: #d5d5d5; cursor: pointer;
  transition: background 0.15s, width 0.15s;
}
.cm-dot.active { background: #111; width: 20px; border-radius: 4px; }

/* 细促销条：chicme 原图 2000×70，按原始比例整条显示（不裁切、不放大变形） */
.cm-strip { padding: 0; line-height: 0; }
.cm-strip-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 横幅：有图 = chicme 成品设计图整图展示（原始比例、不裁切、不叠字）；
   无图回落 tone 渐变 + 文字浮层 */
.cm-banner {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  overflow: hidden;
}
.cm-banner-img {
  display: block;
  width: 100%;
  height: auto;
}
.cm-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 190px;
  padding: 26px 20px;
  text-align: center;
  color: #fff;
}
.cm-banner-title { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.cm-banner-sub { font-size: 14px; opacity: 0.9; }
.cm-banner-cta {
  margin-top: 4px;
  padding: 9px 24px;
  background: rgba(255, 255, 255, 0.94);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cm-three .cm-banner-inner { min-height: 240px; }
.cm-three .cm-banner-title { font-size: 22px; }

/* tone 配色：全部自建，不引用 chicme 任何素材 */
.tone-a  { background: linear-gradient(120deg, #2b2b33 0%, #55505c 55%, #8d7f92 100%); }
.tone-b  { background: linear-gradient(120deg, #1f2a44 0%, #46587f 55%, #8fa3c9 100%); }
.tone-c  { background: linear-gradient(120deg, #3a2a2a 0%, #7a5150 55%, #c39a92 100%); }
.tone-d  { background: linear-gradient(120deg, #23403a 0%, #4d7a6b 55%, #9dc4b4 100%); }
.tone-e  { background: linear-gradient(120deg, #332a44 0%, #5f5386 55%, #a79ac9 100%); }
.tone-f  { background: linear-gradient(120deg, #452a3a 0%, #8a5470 55%, #d3a3b8 100%); }
.tone-g  { background: linear-gradient(120deg, #2b3540 0%, #55697d 55%, #9fb4c6 100%); }
.tone-h  { background: linear-gradient(120deg, #1c1c1c 0%, #3d3d3d 50%, #6e6e6e 100%); }
.tone-i  { background: linear-gradient(120deg, #4a2c10 0%, #8a5a2b 55%, #cfa172 100%); }
.tone-j  { background: linear-gradient(120deg, #16324a 0%, #356189 55%, #86b3d6 100%); }
.tone-k  { background: linear-gradient(120deg, #431f38 0%, #7f3d69 55%, #c78fb4 100%); }
.tone-l  { background: linear-gradient(120deg, #521515 0%, #9c2f2f 55%, #d68f8f 100%); }
.tone-m  { background: linear-gradient(120deg, #3d2a52 0%, #6f4f96 55%, #b79fd6 100%); }
.tone-n  { background: linear-gradient(120deg, #123c3c 0%, #2b7373 55%, #85c2c2 100%); }
.tone-o  { background: linear-gradient(120deg, #0f2f47 0%, #26618f 55%, #8ab6d6 100%); }

/* 首页白底（chicme 同款）：只作用于首页，其他页面保留 --bg 灰底 */
body.is-cm-home { background: #fff; }

/* Shop By Category 六宫格（白底无框，和 chicme 一致） */
.cm-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.cm-cat {
  display: block;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
}
.cm-cat-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s;
}
.cm-cat:hover .cm-cat-img { transform: scale(1.04); }

/* 商品栅格（4 列，对齐参考站 featured 区） */
.cm-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cm-pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cm-pcard:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09); }
.cm-pcard-media { aspect-ratio: 3 / 4; background: #f4f4f4; overflow: hidden; }
.cm-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-pcard-body { padding: 11px 12px 13px; }
.cm-pcard-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cm-pcard-price { font-size: 14px; font-weight: 700; color: #cf2519; }

/* 四宫格（品类 banner 下的分类入口）
   用 flex 而不是 grid：auto-fit 在条目数少于列数时仍会生成 0 宽的隐式轨道，
   getComputedStyle 能看到 "614px 614px 0px 0px 0px 0px" 这种脏结果，
   flex + flex:1 则天然按实际条目数均分，永远不产生空格子。 */
.cm-quad {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.cm-quad-item {
  flex: 1 1 190px;
  min-width: 0; /* 关键：不加会被图片固有宽度(500)顶住，4 列退化成 2 列 */
  display: block;
  background: #fff;
  text-decoration: none;
}
.cm-quad-img {
  display: block;
  width: 100%;
  height: auto;
}
/* 名称已在图片内（chicme 做法）：不再叠加标签，只保留图片本身 */

/* 空态（商品库为空时的诚实占位，不放假数据） */
.cm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 40px 20px;
  background: #fafafa;
  border: 1px dashed #ddd;
  color: #999;
  text-align: center;
}
.cm-empty-text { margin: 0; font-size: 14.5px; font-weight: 600; color: #555; }
.cm-empty-sub { margin: 0; font-size: 12.5px; }

/* Newsletter */
.cm-newsletter { text-align: center; padding-bottom: 54px; }
.cm-news-sub { margin: 0 0 18px; font-size: 14px; color: #666; }
.cm-news-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid #111;
}
.cm-news-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border: 0;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.cm-news-form button {
  padding: 13px 26px;
  border: 0;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.cm-news-msg { margin-top: 12px; font-size: 13px; color: #111; }
.cm-news-msg.err { color: #cf2519; }

/* 分类列表页（/collections/xxx） */
.cm-collection-head { padding: 26px 0 8px; }
.cm-collection-title { margin: 0 0 6px; font-size: 28px; font-weight: 700; color: #111; }
.cm-collection-count { margin: 0; font-size: 13px; color: #777; }
/* 同样用 flex：顶级分类的子类数不固定（2 或 4），grid 会留空轨道 */
.cm-sub-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 8px;
}
.cm-sub {
  flex: 1 1 210px;
  display: block;
  padding: 20px 12px;
  background: #fafafa;
  border: 1px solid #efefef;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.cm-sub:hover { border-color: #111; transform: translateY(-2px); }

/* ------------------------------------------------------------ 响应式 --- */
/* 汉堡按钮：桌面隐藏，移动显示（对齐参考站 header--mobile-left） */
.cm-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #111;
}

/* 移动端抽屉 + 独立遮罩（不与购物车的 #scrim 抢同一节点） */
.cm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 90;
}
.cm-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(330px, 86vw);
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 26px rgba(0, 0, 0, 0.16);
  animation: cmDrawerIn 0.22s ease;
}
@keyframes cmDrawerIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.cm-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}
.cm-drawer-close {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 17px;
  color: #111;
  cursor: pointer;
}
.cm-drawer-body { flex: 1; overflow-y: auto; padding: 6px 16px 26px; }

@media (max-width: 1024px) {
  .cm-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cm-product-grid { grid-template-columns: repeat(3, 1fr); }
  .cm-quad-item { flex-basis: 150px; }
  .cm-sub { flex-basis: 170px; }
}

@media (max-width: 720px) {
  .cm-wrap { padding: 0 14px; }
  .cm-burger { display: inline-flex; }
  .cm-catbar-inner { justify-content: flex-start; }
  .cm-sec { padding: 24px 0; }
  .cm-sec-title { font-size: 21px; margin-bottom: 15px; }
  .cm-sec-title-lg { font-size: 25px; }
  .cm-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cm-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cm-two, .cm-three { grid-template-columns: 1fr; }
  .cm-banner-inner { min-height: 150px; }
  .cm-banner-title { font-size: 20px; }
  .cm-quad-item { flex: 1 1 calc(50% - 6px); }
  .cm-sub { flex: 1 1 calc(50% - 7px); }
  .cm-news-form { flex-direction: column; border: 0; gap: 8px; }
  .cm-news-form input { border: 1px solid #111; }
}