/* products-app.css — Fixed Theme for AsiaHairTech Product App */
#products-app {
  --brand-red: #E60012;
  --text-main: #111111;
  --text-subtle: #666666;
  --border: #e5e5e5;
  --bg-muted: #fff;

  font-family:
    "Inter", "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", , -apple-system,
    "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--text-main);
}

#products-app .app-container {
  width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-bottom: 120px;
}
#products-app .layout { display: grid; grid-template-columns: 300px 1fr; }
#products-app .sidebar { width: 300px; }
#products-app .content { padding-left: 40px; }

/* Typography */
#products-app h1 { font-size: 16px; line-height: 32px; font-weight: 700; margin: auto 0; }
#products-app h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; }
#products-app h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
#products-app p,
#products-app li,
#products-app .body { font-size: 14px; line-height: 24px; font-weight: 400; color: var(--text-main); list-style-type: none;outline: none;}
#products-app .muted { color: var(--text-subtle);font-family: sans-serif; }

/* Header */
#products-app .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#products-app .header .search { width: 260px; }
#products-app input[type="search"],
#products-app input[type="text"] {
  width: 100%; padding: 8px 12px; border-radius: 0px; border: 1px solid var(--border);  outline: none;}

/* Breadcrumbs */
#products-app .breadcrumbs { font-size: 14px; line-height: 18px; color: var(--text-subtle); margin-bottom: 12px; }
#products-app .breadcrumbs .sep { margin: 0 8px; opacity: .6; }
#products-app .breadcrumbs a { color: var(--text-subtle); text-decoration: none; }
#products-app .breadcrumbs a:hover { color: var(--text-main);  }

/* Sidebar */
#products-app .sidebar-box { padding: 8px; background: #fff; }
#products-app .sidebar-title { font-size: 12px; letter-spacing: .08em; color: var(--text-subtle); margin: 6px 8px 8px 8px; }
#products-app .sidebar-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 0 8px 8px 8px;display:none; }
#products-app .btn-link { font-size: 12px; color: var(--text-subtle); background: none; border: 0; padding: 0; cursor: pointer; }
#products-app .btn-link:hover { color: var(--text-main); text-decoration: underline; }

#products-app .sidebar-parent {
  padding: 12px 16px;
  cursor: pointer;border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text-main);
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  /*border-radius: 8px;*/
}
#products-app .sidebar-parent:hover { background: #fafafa; color: #E60012; border-left-color: #E60012; background: #f9f9f9; }
#products-app .sidebar-parent.is-active { color: var(--brand-red); border-left-color: var(--brand-red); background:#f9f9f9; font-weight:700; }
#products-app .sidebar-child {
  padding: 10px 16px;
  border-radius: 0px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text-main);
  background: transparent;
  border: 0;
}
#products-app .sidebar-child:hover { background: #fafafa; }
#products-app .sidebar-child.is-active { color: var(--brand-red); background:#fff3f3; font-weight:700; border-left:3px solid var(--brand-red); }

/* Filter chip */
#products-app .chips {none;}
#products-app .chip { font-size: 12px; color: #fff; background: #111; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
#products-app .chip .x { background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 999px; padding: 0 6px; cursor: pointer; }
#products-app .chip .x:hover { background: rgba(255,255,255,.18); }

/* Grid & Cards */
#products-app .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#products-app .product-card {
  padding: 20px;
  transition: all .3s ease;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
#products-app .product-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,.10); }
#products-app .product-card .product-title { font-size: 14px; line-height: 22px; font-weight: 600; margin-top: 12px; }
#products-app .product-card:hover .product-title { color: var(--brand-red); }

#products-app .thumb {height: 260px; display: flex; align-items: center; justify-content: center;background: var(--bg-muted); border-radius: 0px; overflow: hidden; margin-bottom: 12px;}
#products-app .thumb img { max-height: 100%; width: 100%; object-fit: contain; }

/* Detail */
#products-app .detail { border: 0px solid var(--border); border-radius: 0px; background: #fff; padding: 24px 0; }
#products-app .detail-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
#products-app .btn { padding: 8px 14px; border-radius: 4px; border: 1px solid var(--border); background: #fff; cursor: pointer;display:none; }
#products-app .btn:hover { background: #fafafa; }
#products-app .btn-primary { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
#products-app .btn-primary:hover { filter: brightness(.96); }

#products-app .gallery { display: grid; grid-template-columns: 400px 1fr; gap: 48px; }
#products-app .gallery-hero { display: flex; align-items: center; justify-content: center; background: var(--bg-muted);border-radius: 0px; padding: 0px;border:1px solid var(--border); width: 400px;height: 400px;}
#products-app .gallery-hero img { max-height: 400px; width: 100%; object-fit: contain; }
#products-app .thumb-row { margin-top: 10px; display: flex; gap: 6px; overflow-x: auto; }
#products-app .thumb-small { width: 98px; height: 98px; border: 1px solid var(--border); border-radius: 0px; overflow: hidden; background: #fff; }
#products-app .thumb-small.active { border-color: #111; }
#products-app .thumb-small img { width: 100%; height: 100%; object-fit: contain; }

#products-app .specs { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
#products-app .specs dt { font-size: 12px; line-height: 18px; color: var(--text-subtle); text-transform: uppercase; }
#products-app .specs dd { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--text-main); }

#products-app .tabs { border-bottom: 1px solid var(--border); margin-top: 24px; }
#products-app .tab-button { padding: 10px 0; margin-right: 24px; border: 0; border-bottom: 2px solid transparent; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--text-subtle); background: none; cursor: pointer; }
#products-app .tab-button:hover { color: var(--text-main); }
#products-app .tab-button.is-active { color: var(--brand-red); border-bottom-color: var(--brand-red); }
#products-app .tab-panel { margin-top: 40px; }
#products-app .prose ul { list-style: disc; padding-left: 1.2em;display:grid;grid-template-columns: repeat(3, minmax(0, 1fr)); }
#products-app .prose li { margin: 6px 0; }

/* Empty state */
#products-app .empty { padding: 60px; text-align: center; color: var(--text-subtle); border: 1px dashed var(--border); border-radius: 12px; background: #fff; }

/* Responsive */
@media (max-width: 1023px){
  #products-app .app-container{ width: 100%; padding: 0 16px; margin-bottom: 80px; }
  #products-app .layout{ grid-template-columns: 1fr; }
  #products-app .content{ padding-left: 0; }
  #products-app .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #products-app .gallery{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  #products-app .cards-grid{ grid-template-columns: 1fr; }
  #products-app .thumb{ height: 200px; }
}
/* === Patch: relocate title / breadcrumbs / search (2025-08-11) === */

/* 右侧内容顶部：左侧“产品总览”，右侧面包屑 */
#products-app .content-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
/* 放在 content-top 里时，面包屑去掉外边距 */
#products-app .content-top .breadcrumbs{
  margin: 0;
}

/* 侧边栏底部搜索框（带上分割线） */
#products-app .sidebar-search{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0px solid var(--border);
}
#products-app .sidebar-search input{
  width: 100%;
  padding: 8px 12px;
  border-radius: 0px;
  border: 1px solid var(--border);
  outline: none;
}

/*（可选兜底）若你的旧模板里仍然渲染了“分类”标题，强制隐藏：
#products-app .sidebar-title{ display:none; }
*/

/* 右侧信息栏头部（标题/系列）与底部返回按钮 */
#products-app .detail-right-header{ margin-bottom: 8px; }
#products-app .detail-bottom{
  margin-top: 60px;
  display: flex;
  justify-content: center; 
}
/* 产品介绍里的长图纵向堆叠 */
#products-app .intro-images{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#products-app .intro-images .intro-img img{
  width: 100%;
  display: block;
  border-radius: 8px;
  background: #f7f7f7;
}


#products-app .product-detail { display: grid; grid-template-columns: 520px 1fr; gap: 32px; }
#products-app .p-title { font-size: 22px; margin: 0 0 8px; }
#products-app .p-sub { color: #666; margin: 0 0 16px; }

#products-app .p-main { width: 400px; height: 400px; aspect-ratio: 1 / 1; padding: 0; border: 1px solid #eee; background: #fff; cursor: pointer; display: block; border-radius: 12px; overflow: hidden; }
#products-app .p-main img { width: 100%; height: 100%; object-fit: contain; display: block; }

#products-app .p-thumbs { display: flex; gap: 12px; margin-top: 12px; }
#products-app .p-thumb { width: 98px; height: 98px; aspect-ratio: 1 / 1; padding: 0; border: 1px solid #eee; background: #fff; cursor: pointer; border-radius: 8px; overflow: hidden; }
#products-app .p-thumb.is-active { outline: 2px solid #e3002c; border-color: #e3002c; }
#products-app .p-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

#products-app .p-specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin-top: 12px; }
#products-app .p-specs dt { color: #888; }
#products-app .p-specs dd { margin: 0; }

#products-app .p-full { grid-column: 1 / -1; margin-top: 32px; }
#products-app .p-intro { margin: 0 0 16px; }
#products-app .p-intro-images { display: grid; gap: 16px; }
#products-app .p-intro-item img { width: 100%; height: auto; display: block; }

/* === Clickability hotfix (prevent overlay blocking bottom cards) === */
#products-app .content { position: relative; z-index: 1; }
#products-app .view    { position: relative; z-index: 2; }
#products-app .cards-grid { position: relative; z-index: 3; }
#products-app .product-card { position: relative; z-index: 4; cursor: pointer; }

/* 若有任何全宽浮层（如站点公共 footer/banner）被引入到这个容器内，避免盖住内容 */
#products-app .content > .overlay,
#products-app .view > .overlay { pointer-events: none; }