/**
 * Shop homepage — product category grid (商店商品首页栏目列表).
 * Loaded after Flatsome shop CSS; use !important where theme utilities conflict.
 */

body.my-obl-shop-category-page {
	--my-obl-shop-cat-radius: 4px;
	--my-obl-shop-cat-bd: rgba(17, 17, 17, 0.08);
	--my-obl-shop-cat-bd-hover: rgba(177, 47, 51, 0.32);
	--my-obl-shop-cat-image-bg: #ffffff;
	--my-obl-shop-cat-title: #181515;
	--my-obl-shop-cat-logo: #b12f33;
	--my-obl-shop-cat-aspect: 13 / 20;
	--my-obl-shop-cat-title-size: 16px;
	--my-obl-shop-cat-title-weight: 400;
	--my-obl-shop-cat-title-line: 1.7;
	--my-obl-shop-cat-badge-bg: #111111;
	--my-obl-shop-cat-badge-fg: #ffffff;
	--my-obl-shop-cat-badge-size: 12px;
	--my-obl-shop-cat-icon-size: 16px;
	--my-obl-shop-cat-text-pad-x: 14px;
	--my-obl-shop-cat-badge-inset: 10px;
}

body.my-obl-shop-category-page .products .product-category {
	margin-bottom: clamp(18px, 1.6vw + 8px, 28px) !important;
}

body.my-obl-shop-category-page .products .product-category > .col-inner {
	border: 1px solid var(--my-obl-shop-cat-bd) !important;
	border-radius: var(--my-obl-shop-cat-radius) !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: none !important;
	transition:
		border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

body.my-obl-shop-category-page .products .product-category > .col-inner > a {
	display: block !important;
	color: inherit !important;
	text-decoration: none !important;
}

body.my-obl-shop-category-page .products .product-category .box.box-push {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: auto auto !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #ffffff !important;
}

body.my-obl-shop-category-page .products .product-category .box-image {
	grid-row: 1 !important;
	grid-column: 1 !important;
	position: relative !important;
	width: 100% !important;
	padding-top: 0 !important;
	aspect-ratio: var(--my-obl-shop-cat-aspect) !important;
	background-color: var(--my-obl-shop-cat-image-bg) !important;
	overflow: hidden !important;
}

body.my-obl-shop-category-page .products .product-category .box-image::before,
body.my-obl-shop-category-page .products .product-category .box-image::after {
	display: none !important;
	content: none !important;
}

body.my-obl-shop-category-page .products .product-category .box-image img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	z-index: 1 !important;
}

body.my-obl-shop-category-page .products .product-category .box.box-push .box-text,
body.my-obl-shop-category-page .products .product-category .box.box-push .box-text.text-center,
body.my-obl-shop-category-page .products .product-category .box-text.text-center .box-text-inner {
	display: contents !important;
}

body.my-obl-shop-category-page .products .product-category .header-title,
body.my-obl-shop-category-page .products .product-category h5.header-title.uppercase {
	grid-row: 2 !important;
	grid-column: 1 !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px var(--my-obl-shop-cat-text-pad-x) 14px !important;
	margin: 0 !important;
	background: #ffffff !important;
	border-top: 1px solid rgba(17, 17, 17, 0.06) !important;
	font-family: inherit !important;
	font-size: var(--my-obl-shop-cat-title-size) !important;
	font-weight: var(--my-obl-shop-cat-title-weight) !important;
	line-height: var(--my-obl-shop-cat-title-line) !important;
	color: var(--my-obl-shop-cat-title) !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

body.my-obl-shop-category-page .products .product-category .header-title::before {
	content: "" !important;
	flex: 0 0 var(--my-obl-shop-cat-icon-size) !important;
	width: var(--my-obl-shop-cat-icon-size) !important;
	height: var(--my-obl-shop-cat-icon-size) !important;
	margin-top: 0.18em !important;
	background: var(--my-obl-shop-cat-icon-url) center / contain no-repeat !important;
}

body.my-obl-shop-category-page .products .product-category .count,
body.my-obl-shop-category-page .products .product-category p.count.is-xsmall.uppercase,
body.my-obl-shop-category-page .products .product-category .box-text.text-center .box-text-inner > .count {
	grid-row: 1 !important;
	grid-column: 1 !important;
	justify-self: end !important;
	align-self: end !important;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: var(--my-obl-shop-cat-badge-inset) !important;
	padding: 5px 8px !important;
	min-height: 26px !important;
	border-radius: var(--my-obl-shop-cat-radius) !important;
	background-color: var(--my-obl-shop-cat-badge-bg) !important;
	color: var(--my-obl-shop-cat-badge-fg) !important;
	font-family: inherit !important;
	font-size: var(--my-obl-shop-cat-badge-size) !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	white-space: nowrap !important;
	text-align: center !important;
	float: none !important;
}

body.my-obl-shop-category-page .products .product-category .count::before,
body.my-obl-shop-category-page .products .product-category .count::after {
	display: none !important;
	content: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	body.my-obl-shop-category-page .products .product-category > .col-inner:hover {
		border-color: var(--my-obl-shop-cat-bd-hover) !important;
		transform: translateY(-2px);
	}

	body.my-obl-shop-category-page .products .product-category > .col-inner:hover .count {
		background-color: var(--my-obl-shop-cat-logo) !important;
	}
}

@media screen and (min-width: 850px) {
	body.my-obl-shop-category-page {
		--my-obl-shop-cat-title-size: clamp(calc(1em - 2px), calc(0.96em + 0.16vw - 2px), calc(1em + 0px));
		--my-obl-shop-cat-title-weight: 400;
		--my-obl-shop-cat-title-line: 1.7;
	}
}

@media screen and (max-width: 849px) {
	body.my-obl-shop-category-page {
		--my-obl-shop-cat-title-size: 15px;
		--my-obl-shop-cat-title-line: 1.95;
		--my-obl-shop-cat-badge-size: 11px;
		--my-obl-shop-cat-icon-size: 15px;
		--my-obl-shop-cat-text-pad-x: 12px;
		--my-obl-shop-cat-badge-inset: 8px;
	}

	body.my-obl-shop-category-page .products .product-category .header-title {
		padding: 11px var(--my-obl-shop-cat-text-pad-x) 12px !important;
		gap: 7px !important;
	}

	body.my-obl-shop-category-page .products .product-category .count {
		padding: 4px 7px !important;
		min-height: 24px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.my-obl-shop-category-page .products .product-category > .col-inner {
		transition: border-color 0.2s ease;
	}

	body.my-obl-shop-category-page .products .product-category > .col-inner:hover {
		transform: none;
	}
}