/* Product Mini Card Styles */
.product-thumb-box { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#f7f7f7; }
.product-thumb-box img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .35s; }
.product-mini-card:hover .product-thumb-box img { transform:scale(1.04); }
.product-thumb-box.ratio-3-4 { aspect-ratio:3/4; }
.product-thumb-box.contain img { object-fit:contain; padding:6px; background:#fff; }
.product-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .product-mini-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .product-mini-grid { grid-template-columns:1fr; } }
.product-mini-card-narrow .home-product-display-area-content { padding:6px 6px; }
.product-mini-card .product-price { font-weight:600; }
.product-mini-card .product-sku { letter-spacing:.5px; }
.product-category-area .product-mini-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:16px; }
@media (max-width: 900px){ .product-category-area .product-mini-grid { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width: 560px){ .product-category-area .product-mini-grid { grid-template-columns:1fr !important; } }
/* Single item width control */
.product-category-area .product-mini-grid.single-item { grid-template-columns:repeat(3,1fr) !important; max-width:720px; }
@media (max-width: 900px){ .product-category-area .product-mini-grid.single-item { grid-template-columns:repeat(2,1fr) !important; max-width:480px; } }
@media (max-width: 560px){ .product-category-area .product-mini-grid.single-item { grid-template-columns:1fr !important; max-width:100%; } }

/* 单个首页产品卡片时避免被拉伸全宽：
   1. 让栅格仍保持最小列宽定义（使用 repeat(auto-fit, minmax ...) 原逻辑会把唯一 1fr 拉到整行）
   2. 通过设置固定最大宽度并居中，使单卡片视觉与多卡片时接近
*/
/* 优化：单卡片与三列时单卡片宽度保持一致，通过变量统一调整 */
:root { --home-product-card-single-width: 378.67px; }
.home-products-display-area-grid.product-mini-grid.single-item:not(.fixed-width-layout) {
		display:grid;
		grid-template-columns:repeat(1, minmax(var(--home-product-card-single-width), var(--home-product-card-single-width)));
		justify-content:center;
		gap:16px;
		max-width:var(--home-product-card-single-width);
		margin:0 auto;
		width:100%;
}
@media (max-width:560px){
  .home-products-display-area-grid.product-mini-grid.single-item:not(.fixed-width-layout) {
			grid-template-columns:1fr;
			max-width:100%;
	}
}

/* ========== 固定卡片宽度配置（新增） ==========
   目标：写死每张卡片宽度，不随容器剩余空间被 1fr 拉伸。
   可调变量：--product-card-fixed-width / --product-card-gap / 断点。
*/
:root {
  --product-card-fixed-width: 378.67px; /* 单张卡片的固定宽度 */
  --product-card-gap: 32px;            /* 卡片间距 */
}
/* 基础：默认 3 列（如果空间不足会自动换行），容器居中 */
.product-mini-grid.fixed-width-layout {
  display:grid !important;
  grid-auto-rows:auto;
  grid-template-columns:repeat(auto-fill, minmax(var(--product-card-fixed-width), var(--product-card-fixed-width)));
  justify-content:center; /* 让不足一行时居中 */
  gap:var(--product-card-gap) !important;
}
/* 单个 / 两个 / 正常数量（>=3） 根据 PHP 注 injection 的类名控制（如果你已经在模板里加了 single-item two-items normal-items）*/
.product-mini-grid.fixed-width-layout.single-item,
.product-mini-grid.fixed-width-layout.two-items,
.product-mini-grid.fixed-width-layout.normal-items { max-width:100%; }

/* 如果希望最多显示 3 列并保持居中，可限制容器最大宽度（230 * 3 + gap*2） */
.product-mini-grid.fixed-width-layout.limit-3-cols { max-width: calc(var(--product-card-fixed-width) * 3 + var(--product-card-gap) * 2); width:100%; margin:0 auto; }

/* 断点：在窄屏时允许自动变为 2 / 1 列 */
@media (max-width: 900px){
  .product-mini-grid.fixed-width-layout { grid-template-columns:repeat(auto-fill, minmax(var(--product-card-fixed-width), var(--product-card-fixed-width))); }
  .product-mini-grid.fixed-width-layout.limit-3-cols { max-width: calc(var(--product-card-fixed-width) * 2 + var(--product-card-gap)); }
}
@media (max-width: 560px){
  .product-mini-grid.fixed-width-layout { grid-template-columns:repeat(auto-fill, minmax(100%, 1fr)); }
  .product-mini-grid.fixed-width-layout.limit-3-cols { max-width:100%; }
}

/* 单独写死卡片元素自身（防止子内容把宽度撑开） */
.product-mini-grid.fixed-width-layout .home-product-display-area-card.product-mini-card {
  width:var(--product-card-fixed-width);
  max-width:var(--product-card-fixed-width);
  width:min(100%, var(--product-card-fixed-width));
  max-width:min(100%, var(--product-card-fixed-width));
  margin:0 auto;
}

/* 若需要兼容旧布局，可在父级同时保留原 class 并追加 fixed-width-layout，不会破坏旧栅格以外的样式。 */

/* 当产品区块复用 blog-grid 时，确保使用 auto-fit 便于居中 */
.blog-grid.home-products-display-area-grid.product-mini-grid.fixed-width-layout {
  grid-template-columns:repeat(auto-fit, minmax(var(--product-card-fixed-width), var(--product-card-fixed-width)));
  justify-content:center;
  justify-items:center;
}
@media (max-width: 900px){
  .blog-grid.home-products-display-area-grid.product-mini-grid.fixed-width-layout {
    grid-template-columns:repeat(auto-fit, minmax(var(--product-card-fixed-width), var(--product-card-fixed-width)));
  }
}
@media (max-width: 560px){
  .blog-grid.home-products-display-area-grid.product-mini-grid.fixed-width-layout {
    grid-template-columns:repeat(auto-fit, minmax(100%, 1fr));
  }
}