/**
 * 德茉 DEMOWEAR 商品容量與商品列表卡片。
 *
 * 只覆寫 Blocksy type-2 商品卡片中帶 .demowear-product-card 的項目；
 * 價格、購物車連結與會員權限仍由 WooCommerce、Blocksy 與會員外掛輸出。
 */

[data-products="type-2"] .product.demowear-product-card {
	--demowear-card-accent: var(--theme-palette-color-1, #357779);
	--demowear-card-accent-soft: rgba(53, 119, 121, 0.1);
	--demowear-card-padding: 20px;
	--demowear-card-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
	--demowear-card-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--horizontal-alignment: flex-start;
	--text-horizontal-alignment: start;
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr auto;
	column-gap: 8px;
	padding-inline: var(--demowear-card-padding);
	padding-bottom: var(--demowear-card-padding);
	text-align: start;
	box-shadow: 0 12px 28px -14px rgba(34, 56, 101, 0.22), 0 2px 6px rgba(34, 56, 101, 0.05);
}

[data-products="type-2"] .product.demowear-product-card > figure {
	grid-column: 1 / -1;
	grid-row: 1;
	width: calc(100% + (var(--demowear-card-padding) * 2));
	margin-inline: calc(var(--demowear-card-padding) * -1);
	margin-bottom: 16px;
}

/* 標題：窄卡片先占滿整列，讓購物車 icon 與容量／價格同一列。 */
[data-products="type-2"] .product.demowear-product-card .woocommerce-loop-product__title.woocommerce-loop-product__title {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: start;
	margin: 0 0 4px;
	font-family: var(--theme-font-family, "Noto Sans TC", sans-serif);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.45;
	text-align: start;
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions {
	display: contents;
}

[data-products="type-2"] .product.demowear-product-card .demowear-card-meta {
	grid-column: 1;
	grid-row: 3;
	align-self: center;
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 4px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	color: var(--demowear-card-accent);
	font-family: var(--theme-font-family, "Noto Sans TC", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* 站上 justfont 會直接指定 span 字型，價格內層需明確繼承。 */
[data-products="type-2"] .product.demowear-product-card .demowear-card-meta * {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

[data-products="type-2"] .product.demowear-product-card .demowear-card-meta .price {
	position: static;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: 4px;
	padding: 0;
	min-height: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

[data-products="type-2"] .product.demowear-product-card .demowear-card-meta .price::after {
	content: none;
}

[data-products="type-2"] .product.demowear-product-card .demowear-card-meta .price del {
	opacity: 0.6;
	font-weight: 400;
}

[data-products="type-2"] .product.demowear-product-card .demowear-card-meta .price ins {
	text-decoration: none;
}

/* 購物車：保留 WooCommerce 原本的連結與無障礙名稱，只把文字改為 icon。 */
[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > :is(.button, .added_to_cart) {
	grid-column: 2;
	grid-row: 3;
	align-self: center;
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	margin-inline-end: -10px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: transparent;
	color: var(--demowear-card-accent);
	font-size: 0;
	line-height: 0;
}

/* 加入後沿用 Blocksy 做法：隱藏原按鈕，改顯示「查看購物車」連結。 */
[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > .button.added {
	display: none;
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > :is(.button, .added_to_cart)::before {
	content: "";
	display: block;
	flex: none;
	width: 28px;
	height: 28px;
	opacity: 1;
	background-color: currentColor;
	-webkit-mask: var(--demowear-card-icon-cart) center / contain no-repeat;
	mask: var(--demowear-card-icon-cart) center / contain no-repeat;
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > .button.loading {
	--theme-button-spinner-size: 22px;
	pointer-events: none;
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > .button.loading::before {
	display: none;
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > .added_to_cart::after {
	content: "";
	position: absolute;
	top: 6px;
	inset-inline-end: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--demowear-card-accent) var(--demowear-card-icon-check) center / 10px no-repeat;
	box-shadow: 0 0 0 2px var(--card-background-color, #fff);
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > :is(.button, .added_to_cart):focus-visible {
	outline: 2px solid var(--demowear-card-accent);
	outline-offset: 2px;
}

[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > :is(.button, .added_to_cart):active {
	background-color: var(--demowear-card-accent-soft);
}

@media (hover: hover) and (pointer: fine) {
	[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > :is(.button, .added_to_cart):hover {
		background-color: var(--demowear-card-accent-soft);
		color: var(--demowear-card-accent);
	}
}

/* 卡片夠寬時，標題與容量／價格同一欄，購物車 icon 在右側。 */
@container (min-width: 240px) {
	[data-products="type-2"] .product.demowear-product-card .woocommerce-loop-product__title.woocommerce-loop-product__title {
		grid-column: 1;
	}

	[data-products="type-2"] .product.demowear-product-card .ct-woo-card-actions > :is(.button, .added_to_cart) {
		grid-row: 2 / 4;
		align-self: end;
	}
}

@media (max-width: 689.98px) {
	[data-products="type-2"] .product.demowear-product-card {
		--demowear-card-padding: 14px;
	}

	[data-products="type-2"] .product.demowear-product-card > figure {
		margin-bottom: 12px;
	}

	[data-products="type-2"] .product.demowear-product-card .demowear-card-meta {
		font-size: 13px;
	}
}

/* 單一商品頁：價格下方的容量，字型沿用站上內文。 */
.demowear-product-capacity.demowear-product-capacity {
	margin-top: 0;
	font-size: 15px;
	line-height: 1.6;
}