/* =====================================================
   category_sidebar.v1.css
   ----------------------------------------------------
   通用：任何用首页 mega menu 分类侧栏的页面共用的
   "网格容器 + mega panel 绝对定位锚点 + 响应式断点"。

   作用范围：仅命中 .product-grid 包装器（详情页、未来
   其他二级商品页等）。
   不命中：
     - 首页 .page-layout（首页 mega menu 规则在 index.v1.css）
     - 购物车 / 用户中心 / 订单等页（它们不用 .product-grid）

   不覆盖：
     - .left-sidebar / .left-sidebar h2 / .cat-item / .cat-link /
       .cat-chevron / .megamenu-panel 自身样式 / .megamenu-content /
       .megamenu-grid / .megamenu-col / .megamenu-n2 / .megamenu-n3
       —— 这些全部在 index.v1.css 定义，本文件复用而不重写

   只提供：
     - .product-grid 网格容器（位置 + 列宽 + 间距）
     - .product-grid .megamenu-panel 的 left 偏移覆盖
       （首页 .page-layout 用 240px = 200+40，详情页 .product-grid
       用 300px = 244+56，所以详情页要覆盖默认值）
     - .product-main 内容列重置（防 grid 元素溢出）
     - 1199px / 960px 两档响应式

   由 header.html 全局加载（在 index.v1.css 之后），所有 include
   header.html 的页面自动获得详情页侧栏布局能力。
   ===================================================== */

.product-grid {
  position: relative;                  /* 绝对定位 mega panel 的锚点 */
  display: grid;
  /* 2026-05-19: 列宽 244→200 / gap 56→40，全套对齐首页 .page-layout 同款断点
     —— 详情页 / 分类页 / 搜索页 侧栏宽度与首页完全一致 */
  grid-template-columns: 200px 1fr;
  gap: 40px;
}

.product-grid .megamenu-panel { left: 240px; }   /* 200 sidebar + 40 gap = 同首页 .page-layout */
.product-main { min-width: 0; }                   /* 防 grid 列溢出 */

/* 1199px 断点 —— 同 index.v1.css line 1243-1246 .page-layout 同款 */
@media (max-width: 1199px) {
  .product-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; }
  .product-grid .megamenu-panel { left: 208px; }  /* 180 + 28 */
}

/* 991px 断点 —— 同 index.v1.css line 1258-1262 .page-layout 同款 */
@media (max-width: 991px) {
  .product-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .product-grid .megamenu-panel { left: 184px; }  /* 160 + 24 */
}

/* 767px 以下 —— 单列布局，mega panel 隐藏 */
@media (max-width: 767px) {
  .product-grid { grid-template-columns: 1fr; gap: 20px; }
  .product-grid .megamenu-panel { display: none !important; }
}

/* =====================================================
   shop.html / search.html 商品卡片 — 视觉与首页/详情页对齐
   (主色玫瑰金 + Bootstrap 默认 h2/btn 重置 + sans-serif 简洁风)
   带 .product-grid 父限定 → 不污染首页/购物车/详情页
   ===================================================== */

/* 2026-05-19: shop.html / search.html Gallery HTML 已重构为首页同款
   product-image-wrapper / single-products / prod-body / price-stack 结构，
   所有样式继承 index.v1.css 同名规则。原 h2 / .productinfo 覆盖已不需要。 */

/* 标题区 — 分类名 / 搜索关键词 */
.product-grid .title.text-center {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px;
  font-family: inherit;
}

/* 商城形式 / 清单形式 toggle */
.product-grid .list-style { margin: 0 0 14px !important; padding: 0; }
.product-grid .list-style .list-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--rose-gold); border-radius: 3px;
  color: var(--rose-gold); text-decoration: none; cursor: pointer;
  background: #fff; margin-right: 8px;
}
.product-grid .list-style .item-selected {
  background: var(--rose-gold); color: #fff;
  padding: 6px 12px; border-radius: 3px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; margin-right: 8px;
}

/* 商品卡片容器 */
.product-grid .product-image-wrapper {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.product-grid .product-image-wrapper:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.product-grid .single-products { width: 100% !important; height: auto !important; }
.product-grid .productinfo { padding: 10px; }
.product-grid .productinfo > div:first-child { width: 100% !important; height: auto !important; }
.product-grid .productinfo .img-box {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; height: auto !important;
  aspect-ratio: 1 / 1; padding: 0 !important;
}
.product-grid .productinfo .img-box img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; }

/* 商品名链接 */
.product-grid .productinfo > p { font-size: 13px !important; line-height: 1.4 !important; min-height: 36px; }
.product-grid .productinfo > p a { color: #333 !important; }
.product-grid .productinfo > p a:hover { color: var(--rose-gold) !important; }

/* 加入购物篮按钮 — 全站统一黑色（与首页 .add-to-cart 一致）
   hover 不变玫瑰金，仅微透明保持黑色 */
.product-grid .features_items .btn.add-to-cart,
.product-grid .features_items a.add-to-cart {
  display: block; width: calc(100% - 10px); margin: 8px 5px 0;
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  background: var(--ink-900) !important; color: var(--paper) !important;
  border: 1px solid var(--ink-900) !important; border-radius: 3px;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: opacity .15s ease;
}
.product-grid .features_items .btn.add-to-cart:hover,
.product-grid .features_items a.add-to-cart:hover {
  background: var(--ink-900) !important; border-color: var(--ink-900) !important;
  color: var(--paper) !important; opacity: .85;
}
.product-grid .features_items .btn.add-to-cart i,
.product-grid .features_items a.add-to-cart i { color: var(--paper) !important; margin-right: 6px; }

/* 数量输入框 */
.product-grid .productinfo input[type="text"] {
  border: 1px solid #ccc !important; border-radius: 3px;
  padding: 4px 8px; font-size: 13px;
}

/* =====================================================
   shop.html / search.html 商品卡片网格
   (Bootstrap col-sm-4 在 .product-grid 网格内表现异常 → 卡片
   宽度被压缩。这里用 CSS Grid 自适应替代 Bootstrap 浮动栅格，
   每列最小 255px = 商品卡片内联 width:255px 的实际宽度。
   带 .product-grid 父限定 → 不污染首页/购物车/详情页。)
   ===================================================== */
.product-grid .features_items {
  display: grid;
  /* 2026-05-19: 改为固定 4 列与首页一致 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
}
.product-grid .features_items > .col-sm-4 {
  width: auto;
  float: none;
  padding: 0;
}
@media (max-width: 1279px) {
  .product-grid .features_items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .product-grid .features_items { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .product-grid .features_items { grid-template-columns: 1fr; }
}