/**
 * [shopee_grid] 前台樣式
 *
 * 卡片外觀完全沿用 usa-list.css 的 .usa-product-card；
 * 本檔僅負責「可設定欄數」與標題，透過 --usa-grid-cols 自訂屬性控制，
 * 並在較窄視窗時逐級收斂欄數，避免手機擠壓。
 * 以 .shopee-grid-builder 範圍限定，不影響既有 [shopee_products] 輸出。
 */

.shopee-grid-builder .usa-list-grid {
    grid-template-columns: repeat(var(--usa-grid-cols, 4), minmax(0, 1fr));
}

/* Grid 標題 */
.shopee-grid-builder .shopee-grid-title {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* 平板：最多 3 欄 */
@media (max-width: 1024px) {
    .shopee-grid-builder .usa-list-grid {
        grid-template-columns: repeat(min(var(--usa-grid-cols, 4), 3), minmax(0, 1fr));
    }
}

/* 小平板：最多 2 欄 */
@media (max-width: 768px) {
    .shopee-grid-builder .usa-list-grid {
        grid-template-columns: repeat(min(var(--usa-grid-cols, 4), 2), minmax(0, 1fr));
    }
}

/* 手機：固定 2 欄 */
@media (max-width: 480px) {
    .shopee-grid-builder .usa-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .shopee-grid-builder .shopee-grid-title {
        font-size: 1.15rem;
    }
}