/* ── WooCommerce Product Collection — matches Chargefy Selector exactly ──────── */
/* Targets the new woocommerce/product-collection block (WC 8+, WP 6+).         */

/* ── 1. Neutralise WordPress block-layout grid on the <ul> ──────────────────── */
/* WP injects .is-layout-flow / .columns-N grid styles; override them all.      */

body ul.wc-block-product-template,
body .wp-block-woocommerce-product-template.wc-block-product-template {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 1380px !important;
	list-style: none !important;
	/* kill any CSS-Grid that WC / WP may inject */
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

/* WP block layout adds margin:auto to every direct child — cancel it */
body ul.wc-block-product-template > li,
body ul.wc-block-product-template > .wc-block-product {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ── 2. Card ─────────────────────────────────────────────────────────────────── */

body li.wc-block-product {
	background: #1c1c1c !important;
	border: 1px solid #282828 !important;
	border-radius: 10px !important;
	width: 200px !important;
	flex: 0 0 200px !important;
	max-width: 200px !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: visible !important;
	position: relative !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease !important;
	/* WP layout resets */
	align-self: auto !important;
	justify-self: auto !important;
}

/* Labeled card: colored thick top border only — sides/bottom stay default */
body li.wc-block-product.cfy-has-label {
	border-top: 3px solid var(--lbl-color, #64c8c2) !important;
}

body li.wc-block-product:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

/* ── 3. Image area ───────────────────────────────────────────────────────────── */

body li.wc-block-product .wc-block-components-product-image,
body li.wc-block-product .wc-block-grid__product-image,
body li.wc-block-product .wp-block-woocommerce-product-image {
	width: 100% !important;
	height: 140px !important;
	min-height: 0 !important;
	background: #111 !important;
	border-radius: 9px 9px 0 0 !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: unset !important;
}

body li.wc-block-product .wc-block-components-product-image a,
body li.wc-block-product .wp-block-woocommerce-product-image a {
	display: block !important;
	width: 100% !important;
	height: 140px !important;
	line-height: 0 !important;
}

/* override the inline style="object-fit:cover" WC sets on every img */
body li.wc-block-product .wc-block-components-product-image img,
body li.wc-block-product .wc-block-grid__product-image img,
body li.wc-block-product .wp-block-woocommerce-product-image img {
	width: 100% !important;
	height: 140px !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

body li.wc-block-product .wc-block-components-product-image__inner-container {
	display: none !important;
}

/* ── 4. Title ────────────────────────────────────────────────────────────────── */

body li.wc-block-product .wp-block-post-title {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #f0f0f0 !important;
	text-align: left !important;
	margin: 0 !important;
	padding: 14px 14px 10px !important;
	flex: 1 !important;
	/* WP typography overrides */
	font-family: inherit !important;
}

body li.wc-block-product .wp-block-post-title a,
body li.wc-block-product .wp-block-post-title a:visited,
body li.wc-block-product .wp-block-post-title a:hover {
	color: #f0f0f0 !important;
	text-decoration: none !important;
}

/* ── 5. Price footer ─────────────────────────────────────────────────────────── */

body li.wc-block-product .wp-block-woocommerce-product-price {
	padding: 8px 14px 14px !important;
	margin-top: auto !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 8px !important;
}

body li.wc-block-product .wc-block-components-product-price,
body li.wc-block-product .wc-block-grid__product-price {
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
	text-align: left !important;
	/* set to 0 to hide any raw text nodes ("Fr:" etc) without hiding child spans */
	font-size: 0 !important;
	color: transparent !important;
}

/* "Från" label */
body li.wc-block-product .wc-block-components-product-price::before,
body li.wc-block-product .wc-block-grid__product-price::before {
	content: 'Från' !important;
	display: block !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	color: #888 !important;
	line-height: 1 !important;
}

/* Price amount — restore from font-size:0 parent */
body li.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount,
body li.wc-block-product .wc-block-grid__product-price .woocommerce-Price-amount,
body li.wc-block-product .wc-block-components-product-price bdi,
body li.wc-block-product .wc-block-components-product-price .woocommerce-Price-currencySymbol,
body li.wc-block-product .wc-block-components-product-price del .woocommerce-Price-amount {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #f0f0f0 !important;
	line-height: 1 !important;
}

/* Sale price del — muted smaller */
body li.wc-block-product .wc-block-components-product-price del,
body li.wc-block-product .wc-block-grid__product-price del {
	font-size: 0 !important; /* hide del text node, keep child spans */
	opacity: 0.7 !important;
}
body li.wc-block-product .wc-block-components-product-price del .woocommerce-Price-amount {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #888 !important;
}

/* Arrow — CSS right-chevron matching the selector's SVG arrow */
body li.wc-block-product .wp-block-woocommerce-product-price::after {
	content: '' !important;
	display: block !important;
	width: 9px !important;
	height: 9px !important;
	border-right: 1.5px solid #64c8c2 !important;
	border-top: 1.5px solid #64c8c2 !important;
	transform: rotate(45deg) !important;
	opacity: 0.7 !important;
	flex-shrink: 0 !important;
	margin-bottom: 5px !important;
	transition: transform 0.18s ease, opacity 0.18s ease !important;
}

body li.wc-block-product:hover .wp-block-woocommerce-product-price::after {
	transform: rotate(45deg) translate(2px, -2px) !important;
	opacity: 1 !important;
}

/* ── 6. Hide add-to-cart button ──────────────────────────────────────────────── */

body li.wc-block-product .wp-block-woocommerce-product-button,
body li.wc-block-product .wc-block-components-product-button,
body li.wc-block-product .wc-block-grid__product-add-to-cart {
	display: none !important;
}

/* ── 7. On-sale badge (if shown) ─────────────────────────────────────────────── */

body li.wc-block-product .wc-block-grid__product-onsale {
	position: absolute !important;
	top: -1px !important;
	right: 14px !important;
	left: auto !important;
	background: #e03030 !important;
	color: #fff !important;
	padding: 3px 10px 4px !important;
	border-radius: 0 0 7px 7px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	z-index: 10 !important;
	line-height: 1 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* ── 8. Responsive — mirrors selector breakpoints exactly ────────────────────── */

@media (max-width: 1100px) {
	body li.wc-block-product {
		width: calc(33.333% - 8px) !important;
		flex: 0 0 calc(33.333% - 8px) !important;
		max-width: none !important;
		min-width: 155px !important;
	}
}

@media (max-width: 640px) {
	body li.wc-block-product {
		width: calc(50% - 6px) !important;
		flex: 0 0 calc(50% - 6px) !important;
		box-sizing: border-box !important;
		padding: 8px 4px !important;
		margin: 0 auto 12px auto !important;
	}
}

@media (max-width: 380px) {
	body li.wc-block-product {
		width: 100% !important;
		flex: 0 0 100% !important;
		box-sizing: border-box !important;
		padding: 8px 2px !important;
		margin: 0 auto 10px auto !important;
	}
}

/* ── Label badge (injected by frontend.js) ───────────────────────────────────── */

body li.wc-block-product .cfy-badge {
	position: absolute !important;
	top: -1px !important;
	right: 14px !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 3px 10px 4px !important;
	border-radius: 0 0 7px 7px !important;
	/* width/style only — colour comes from JS inline style so it isn't overridden */
	border-top-width: 3px !important;
	border-top-style: solid !important;
	white-space: nowrap !important;
	z-index: 10 !important;
	line-height: 1 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
	pointer-events: none !important;
}

/* ── Slider (Smart Slider) — unchanged ───────────────────────────────────────── */

.n2-ss-slide {
	height: auto !important;
	min-height: 480px;
}

.n2-ss-slide .n2-ss-layers-container {
	transform: translateY(-35px);
}