/* SP2s Glass — product cards, shared by the home page and WooCommerce product lists. */

.grid,
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
	margin: 0; padding: 0; list-style: none;
}
.grid[hidden] { display: none; }

/* WooCommerce 預設用 float 排列商品，改由 grid 控制 */
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
/* WooCommerce 的 layout／smallscreen CSS 會用 columns-N 設定 22%、48% 寬度，這裡一律交給 grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none; width: auto; margin: 0; padding: 0; display: flex; clear: none;
}
.woocommerce ul.products li.product .card { flex: 1; }

.card { border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; transition: transform .25s; min-width: 0; }
.card:hover { transform: translateY(-6px); }
.thumb {
	position: relative; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; display: block;
	background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35));
}
.thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.tag {
	position: absolute; z-index: 1; top: 10px; left: 10px; font-size: 12px; font-weight: 600; padding: 4px 10px;
	border-radius: 999px; background: rgba(255, 255, 255, .88); color: var(--pink);
}
.tag.new { color: var(--blue); }
.card-b { padding: 14px 6px 4px; display: flex; flex-direction: column; flex: 1; }
.card-b .brand { font-size: 12px; color: var(--text-3); font-weight: 500; }
.card-b h3 { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 3px 0 12px; flex: 1; padding: 0; }
.card-b h3 a {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.card-b h3 a:hover { color: var(--blue); }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .price,
.woocommerce ul.products li.product .card .price { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.card .price del { font-size: 12px; font-weight: 400; color: var(--text-3); margin-right: 6px; opacity: 1; }
.card .price ins { text-decoration: none; font-weight: 700; }
.card .add {
	flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: #fff;
	display: grid; place-items: center; font-size: 18px; line-height: 1; padding: 0; margin: 0;
}
.card .add.loading { opacity: .5; }
.card .add.loading::after { display: none; }
.card .add.added { background: var(--blue); }
.card .add.added::after { display: none; }
/* WooCommerce 的「查看購物車」連結：視覺隱藏但保留給螢幕閱讀器 */
.card .added_to_cart {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

@media (max-width: 900px) {
	.grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 600px) {
	.card { padding: 10px; }
	.card-b h3 { font-size: 14px; }
	.card .row { align-items: flex-end; }
	.card .price,
	.woocommerce ul.products li.product .card .price { font-size: 15px; }
	.card .price del { display: block; margin-right: 0; }
}