/* LAFU Blocks, shop look (includes/shop-look.php). Every rule hangs on a body class lafu-sl-<option>-<choice>,
   so the store default (the theme's own catalogue look) is untouched until a choice is made.
   Colours come from the theme's shop tokens (--sh-*) with the block theme presets as the fallback, so light
   and dark designs both work. Logical properties keep right-to-left languages right. */

/* Tokens on the body, and on the Category tiles block (also in the editor, where the body has no shop look classes). */
.lafu-sl {
	--lafu-sl-ink: var(--sh-ink, var(--wp--preset--color--contrast, #14201c));
	--lafu-sl-muted: var(--sh-muted, var(--wp--preset--color--muted-contrast, #4b5d57));
	--lafu-sl-line: var(--sh-line, var(--wp--preset--color--line, #e2e6e3));
	--lafu-sl-soft: var(--sh-bg, var(--wp--preset--color--muted, #eef1ef));
	--lafu-sl-card: var(--sh-card, var(--wp--preset--color--surface, #fff));
	--lafu-sl-brand: var(--sh-brand, var(--wp--preset--color--primary, #1f6f5c));
	--lafu-sl-on-brand: var(--sh-on-brand, var(--wp--preset--color--primary-contrast, #fff));
	--lafu-sl-r: var(--lafu-sl-radius, var(--sh-radius, 14px));

	/* Sale red: a solid badge colour with white text (5.9:1), and a text colour mixed with the ink so it
	   stays readable on light and dark cards. */
	--lafu-sl-sale: #c40018;
	--lafu-sl-sale-text: color-mix(in srgb, #d0021b 62%, var(--lafu-sl-ink));
	--lafu-sl-condensed: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif-condensed, sans-serif;
	--lafu-sl-serif: var(--wp--preset--font-family--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
	--lafu-sl-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E");
	--lafu-sl-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.2 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
}

/* ---------- Shared pieces ---------- */
.lafu-sl .lafu-sl-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lafu-sl li.wc-block-product .wc-block-components-product-image,
.lafu-sl .lafu-sl-media {
	position: relative;
}

.lafu-sl li.wc-block-product .wc-block-components-product-image > a,
.lafu-sl .lafu-sl-media {
	display: block;
	position: relative;
}

.lafu-sl li.wc-block-product a:focus-visible,
.lafu-sl :is(.lafu-sl-cat__link, .lafu-sl-view__btn, .lafu-sl-more__btn, .lafu-sl-cat__inline a):focus-visible {
	outline: 2px solid var(--lafu-sl-brand);
	outline-offset: 2px;
}

/* Picture shape and fit, corners. */
.lafu-sl:not(.lafu-sl-ratio-square) li.wc-block-product .wc-block-components-product-image {
	aspect-ratio: var(--lafu-sl-ratio);
}

.lafu-sl:not(.lafu-sl-ratio-square) li.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: var(--lafu-sl-ratio) !important;
}

.lafu-sl-ratio-natural li.wc-block-product .wc-block-components-product-image {
	aspect-ratio: auto;
}

.lafu-sl-ratio-natural li.wc-block-product .wc-block-components-product-image img:not(.lafu-sl-hover-img) {
	aspect-ratio: auto !important;
	height: auto !important;
}

.lafu-sl-fit-cover li.wc-block-product .wc-block-components-product-image img,
.lafu-sl-fit-cover ul.products li.product .lafu-sl-media img {
	object-fit: cover !important;
	padding: 0 !important;
	mix-blend-mode: normal !important;
}

.lafu-sl:not(.lafu-sl-radius-theme) li.wc-block-product .wc-block-components-product-image {
	border-radius: var(--lafu-sl-r);
}

/* Rating, specs, excerpt, stock. */
.lafu-sl .lafu-sl-meta {
	margin: 0 0 8px;
}

.lafu-sl .lafu-sl-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 0.8125rem;
	color: var(--lafu-sl-muted);
}

.lafu-sl .lafu-sl-stars {
	flex: none;
	width: 80px;
	height: 16px;
	background: linear-gradient(90deg, #b26b00 var(--lafu-sl-stars), color-mix(in srgb, var(--lafu-sl-ink) 22%, transparent) 0);
	-webkit-mask: var(--lafu-sl-star) 0 0 / 16px 16px repeat-x;
	mask: var(--lafu-sl-star) 0 0 / 16px 16px repeat-x;
}

.lafu-sl .lafu-sl-specs {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	gap: 3px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--lafu-sl-muted);
}

.lafu-sl .lafu-sl-specs li {
	position: relative;
	margin: 0;
	padding-inline-start: 14px;
}

.lafu-sl .lafu-sl-specs li::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--lafu-sl-brand);
}

.lafu-sl .lafu-sl-specs--over {
	display: none;
}

.lafu-sl .lafu-sl-excerpt {
	display: none;
	margin: 0 0 8px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--lafu-sl-muted);
}

.lafu-sl .lafu-sl-stock {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 10px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--lafu-sl-muted);
}

.lafu-sl .lafu-sl-stock:not(.is-always) {
	display: none;
}

.lafu-sl .lafu-sl-stock__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1a7f37;
}

.lafu-sl .lafu-sl-stock.is-low .lafu-sl-stock__dot,
.lafu-sl .lafu-sl-stock.is-backorder .lafu-sl-stock__dot {
	background: #c2410c;
}

.lafu-sl .lafu-sl-stock.is-out .lafu-sl-stock__dot {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--lafu-sl-muted);
}

/* Specs "with the card style": the deal card and list rows show them, the other cards do not. */
.lafu-sl-specs-auto:not(.lafu-sl-card-deal) .lafu-sl-meta > .lafu-sl-specs {
	display: none;
}

.lafu-sl-stock-hide .lamoi-stock-badge {
	display: none;
}

.lafu-sl-rating-hide .wp-block-woocommerce-product-rating {
	display: none;
}

/* ---------- Price ---------- */
:is(.lafu-sl-price-large, .lafu-sl-card-deal) li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-price {
	font-family: var(--lafu-sl-condensed);
	font-stretch: 75%;
	font-size: 1.65rem !important;
	font-weight: 800 !important;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

:is(.lafu-sl-price-large, .lafu-sl-card-deal) li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-price del {
	font-size: 0.55em;
	font-weight: 500;
	color: var(--lafu-sl-muted);
}

:is(.lafu-sl-price-sale, .lafu-sl-card-deal) li.wc-block-product .wc-block-components-product-price :is(ins, .is-discounted) {
	color: var(--lafu-sl-sale-text) !important;
	text-decoration: none;
}

.lafu-sl-price-sale li.wc-block-product .wc-block-components-product-price del {
	color: var(--lafu-sl-muted);
	font-weight: 500;
}

.lafu-sl .lafu-sl-price {
	margin: 0 0 4px;
}

.lafu-sl .lafu-sl-price .wc-block-components-product-price {
	margin-bottom: 6px !important;
}

.lafu-sl .lafu-sl-save {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--lafu-sl-sale);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
}

/* ---------- Badges ---------- */
.lafu-sl-badges-on .lamoi-stock-badge {
	display: none;
}

.lafu-sl .lafu-sl-badges {
	position: absolute;
	z-index: 2;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.lafu-sl .lafu-sl-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--lafu-sl-card);
	color: var(--lafu-sl-ink);
	box-shadow: 0 0 0 1px var(--lafu-sl-line);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.lafu-sl .lafu-sl-badge--sale {
	background: var(--lafu-sl-sale);
	color: #fff;
	box-shadow: none;
}

.lafu-sl .lafu-sl-badge--new {
	background: var(--lafu-sl-brand);
	color: var(--lafu-sl-on-brand);
	box-shadow: none;
}

.lafu-sl .lafu-sl-badge--featured {
	background: var(--lafu-sl-ink);
	color: var(--lafu-sl-card);
	box-shadow: none;
}

.lafu-sl .lafu-sl-badge--low {
	background: #9a3412;
	color: #fff;
	box-shadow: none;
}

.lafu-sl .lafu-sl-badge--out {
	color: var(--lafu-sl-muted);
}

/* Shapes (also for LAFU Product Extras badges). */
.lafu-sl-shape-pill :is(.lafu-sl-badge, .lafu-pe-badge) {
	border-radius: 999px;
}

.lafu-sl-shape-sticker :is(.lafu-sl-badge, .lafu-pe-badge),
.lafu-sl-card-deal.lafu-sl-shape-default .lafu-sl-badge--sale {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 58px;
	height: 58px;
	min-height: 0;
	padding: 4px;
	text-align: center;
	border-radius: 50%;
	font-size: 0.75rem;
	line-height: 1.05;
	white-space: normal;
	overflow-wrap: anywhere;
	transform: rotate(-8deg);
}

.lafu-sl-card-deal.lafu-sl-shape-default .lafu-sl-badge--sale {
	width: 62px;
	height: 62px;
	font-size: 0.9rem;
	font-weight: 800;
}

@media (max-width: 599px) {

	.lafu-sl-card-deal.lafu-sl-shape-default .lafu-sl-badge--sale {
		width: 50px;
		height: 50px;
		font-size: 0.75rem;
	}
}

.lafu-sl-shape-ribbon .lafu-sl-badges {
	inset-block-start: 0;
	inset-inline-start: 0;
	gap: 0;
}

.lafu-sl-shape-ribbon :is(.lafu-sl-badge, .lafu-pe-badge) {
	border-radius: 0;
	padding: 6px 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.6875rem;
}

.lafu-sl-shape-ribbon .lafu-sl-badge:first-child {
	border-start-start-radius: var(--lafu-sl-r);
}

.lafu-sl-shape-ribbon .lafu-sl-badge:last-child {
	border-end-end-radius: 8px;
}

/* Positions. */
.lafu-sl-position-top-end .lafu-sl-badges {
	inset-inline-start: auto;
	inset-inline-end: 10px;
	align-items: flex-end;
}

.lafu-sl-position-bottom-start .lafu-sl-badges {
	inset-block-start: auto;
	inset-block-end: 10px;
	flex-direction: column-reverse;
}

.lafu-sl-shape-ribbon.lafu-sl-position-top-end .lafu-sl-badges {
	inset-inline-end: 0;
}

.lafu-sl-shape-ribbon.lafu-sl-position-top-end .lafu-sl-badge:first-child {
	border-start-start-radius: 0;
	border-start-end-radius: var(--lafu-sl-r);
}

.lafu-sl-shape-ribbon.lafu-sl-position-top-end .lafu-sl-badge:last-child {
	border-end-end-radius: 0;
	border-end-start-radius: 8px;
}

.lafu-sl-shape-ribbon.lafu-sl-position-bottom-start .lafu-sl-badges {
	inset-block-end: 0;
}

.lafu-sl-shape-ribbon.lafu-sl-position-bottom-start .lafu-sl-badge:first-child {
	border-start-start-radius: 0;
	border-end-start-radius: var(--lafu-sl-r);
}

.lafu-sl-shape-ribbon.lafu-sl-position-bottom-start .lafu-sl-badge:last-child {
	border-end-end-radius: 0;
	border-start-end-radius: 8px;
}

.lafu-sl-extras-badges.lafu-sl-position-top-start .lafu-pe-badges {
	inset: auto;
	inset-block-start: 10px;
	inset-inline-start: 10px;
}

.lafu-sl-extras-badges.lafu-sl-position-top-end .lafu-pe-badges {
	inset: auto;
	inset-block-start: 10px;
	inset-inline-end: 10px;
}

.lafu-sl-extras-badges.lafu-sl-position-bottom-start .lafu-pe-badges {
	inset: auto;
	inset-block-end: 10px;
	inset-inline-start: 10px;
}

/* ---------- Second image on hover (only a mouse loads it; never on touch screens) ---------- */
.lafu-sl .lafu-sl-hover-img {
	position: absolute !important;
	inset: 0;
	z-index: 1;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	pointer-events: none;
}

@media (hover: none), (pointer: coarse) {

	.lafu-sl .lafu-sl-hover-img {
		display: none !important;
	}
}

@media (hover: hover) and (pointer: fine) {

	.lafu-sl :is(li.wc-block-product, li.product):hover .lafu-sl-hover-img.is-ready {
		opacity: 1;
	}

	.lafu-sl :is(li.wc-block-product, li.product):hover :is(.wc-block-components-product-image, .lafu-sl-media):has(.lafu-sl-hover-img.is-ready) img:not(.lafu-sl-hover-img) {
		opacity: 0;
	}

	.lafu-sl-hover-slide :is(.wc-block-components-product-image, .lafu-sl-media) {
		overflow: hidden;
	}

	.lafu-sl-hover-slide .lafu-sl-hover-img {
		transform: translateX(100%);
		opacity: 1;
	}

	[dir="rtl"] .lafu-sl-hover-slide .lafu-sl-hover-img {
		transform: translateX(-100%);
	}

	.lafu-sl-hover-slide :is(li.wc-block-product, li.product):hover .lafu-sl-hover-img.is-ready {
		transform: translateX(0);
	}

	.lafu-sl-hover-slide :is(li.wc-block-product, li.product):hover :is(.wc-block-components-product-image, .lafu-sl-media):has(.lafu-sl-hover-img.is-ready) img:not(.lafu-sl-hover-img) {
		opacity: 1;
		transform: translateX(-100%) !important;
	}

	[dir="rtl"] .lafu-sl-hover-slide :is(li.wc-block-product, li.product):hover :is(.wc-block-components-product-image, .lafu-sl-media):has(.lafu-sl-hover-img.is-ready) img:not(.lafu-sl-hover-img) {
		transform: translateX(100%) !important;
	}

	.lafu-sl-hover-zoom .lafu-sl-hover-img {
		transform: scale(1.1);
	}

	.lafu-sl-hover-zoom :is(li.wc-block-product, li.product):hover .lafu-sl-hover-img.is-ready {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: no-preference) {

	.lafu-sl .lafu-sl-hover-img,
.lafu-sl:not(.lafu-sl-hover-off) :is(li.wc-block-product .wc-block-components-product-image, .lafu-sl-media) img {
		transition: opacity 0.35s ease, transform 0.45s ease;
	}
}

@media (prefers-reduced-motion: reduce) {

	.lafu-sl .lafu-sl-hover-img,
.lafu-sl :is(li.wc-block-product, li.product) img {
		transition: none !important;
	}

	.lafu-sl-hover-slide .lafu-sl-hover-img {
		transform: none;
		opacity: 0;
	}

	.lafu-sl-hover-slide :is(li.wc-block-product, li.product):hover .lafu-sl-hover-img.is-ready {
		opacity: 1;
	}

	.lafu-sl-hover-slide :is(li.wc-block-product, li.product):hover img:not(.lafu-sl-hover-img) {
		transform: none !important;
	}

	.lafu-sl-hover-zoom .lafu-sl-hover-img {
		transform: none;
	}
}

/* ---------- Add to cart button: icon, or shown on hover ---------- */
:is(.lafu-sl-button-icon, .lafu-sl-card-compact) li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
	align-items: flex-end;
}

:is(.lafu-sl-button-icon, .lafu-sl-card-compact) li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.wp-block-button__link, .wc-block-components-product-button__button) {
	position: relative;
	width: 44px !important;
	min-width: 44px;
	height: 44px;
	min-height: 44px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0;
	overflow: hidden;
}

:is(.lafu-sl-button-icon, .lafu-sl-card-compact) li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.wp-block-button__link, .wc-block-components-product-button__button)::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background: currentcolor;
	-webkit-mask: var(--lafu-sl-cart-icon) center / contain no-repeat;
	mask: var(--lafu-sl-cart-icon) center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {

	.lafu-sl-button-hover li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
		opacity: 0;
		transform: translateY(6px);
	}

	.lafu-sl-button-hover li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.lafu-sl-button-hover li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
}

/* ---------- Card: Deal (grey gradient, large condensed price, savings, round promo badge, specs on hover) ---------- */
.lafu-sl-card-deal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
	padding: 12px 12px 14px;
	border-radius: var(--lafu-sl-r);
	background: linear-gradient(180deg, color-mix(in srgb, var(--lafu-sl-ink) 3%, var(--lafu-sl-card)) 0%, color-mix(in srgb, var(--lafu-sl-ink) 10%, var(--lafu-sl-card)) 100%);
}

.lafu-sl-card-deal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-image {
	background: var(--lafu-sl-card);
}

.lafu-sl-card-deal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wp-block-post-title {
	font-weight: 600 !important;
}

@media (hover: hover) and (pointer: fine) {

	.lafu-sl-card-deal.lafu-sl-specs-auto li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .lafu-sl-meta > .lafu-sl-specs,
.lafu-sl-card-deal.lafu-sl-specs-show li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .lafu-sl-meta > .lafu-sl-specs {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.lafu-sl-card-deal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .lafu-sl-specs--over {
		display: grid;
		position: absolute;
		z-index: 3;
		inset-inline: 8px;
		inset-block-end: 8px;
		margin: 0;
		padding: 10px 12px;
		border-radius: calc(var(--lafu-sl-r) * 0.6);
		background: color-mix(in srgb, var(--lafu-sl-card) 95%, transparent);
		color: var(--lafu-sl-ink);
		box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.35);
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
	}

	.lafu-sl-card-deal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) .lafu-sl-specs--over {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.lafu-sl-card-deal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .lafu-sl-specs--over {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
}

/* ---------- Card: Compact (round cart button next to the price) ---------- */
.lafu-sl-card-compact li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: 10px;
}

.lafu-sl-card-compact li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > * {
	grid-column: 1 / -1;
}

.lafu-sl-card-compact li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wp-block-post-title {
	min-height: 2.7em;
}

.lafu-sl-card-compact li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.lafu-sl-price, .wp-block-woocommerce-product-price) {
	grid-column: 1;
	order: 1;
	align-self: center;
	margin: 0 !important;
}

.lafu-sl-card-compact li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
	grid-column: 2;
	order: 1;
	align-self: center;
	width: auto !important;
	margin: 0 !important;
}

.lafu-sl-card-compact li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.lafu-cb-qv-btn, .added_to_cart) {
	order: 2;
}

/* ---------- Card: Minimal (picture, title and price; lifts on hover) ---------- */
.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button, .lafu-cb-qv-btn),
.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.lafu-sl-meta, .lafu-sl-stock) {
	display: none !important;
}

.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-image {
	margin-bottom: 10px !important;
}

.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) .wc-block-components-product-image {
	box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {

	.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
		transition: transform 0.25s ease;
	}

	.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-image {
		transition: box-shadow 0.25s ease;
	}

	.lafu-sl-card-minimal li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) {
		transform: translateY(-4px);
	}
}

/* ---------- Card: Boxed (border, actions bar on the picture) ---------- */
.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
	padding: 12px;
	border: 1px solid var(--lafu-sl-line);
	border-radius: var(--lafu-sl-r);
	background: var(--lafu-sl-card);
}

.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) {
	border-color: color-mix(in srgb, var(--lafu-sl-ink) 28%, var(--lafu-sl-line));
	box-shadow: 0 12px 30px -16px rgb(0 0 0 / 0.35);
}

.lafu-sl .lafu-sl-actions {
	position: absolute;
	z-index: 3;
	inset-block-end: 8px;
	inset-inline-start: 8px;
	display: flex;
	gap: 6px;
}

.lafu-sl .lafu-sl-actions .lafu-cb-qv-btn {
	margin: 0;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--lafu-sl-line);
	border-radius: 999px;
	background: var(--lafu-sl-card);
	color: var(--lafu-sl-ink);
	font-weight: 600;
	box-shadow: 0 4px 14px -6px rgb(0 0 0 / 0.3);
}

.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .lafu-wc-media > .lafu-wc-actions {
	inset-block-start: auto;
	inset-block-end: 8px;
	inset-inline-end: 8px;
	flex-direction: row;
}

@media (hover: hover) and (pointer: fine) {

	.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.lafu-sl-actions, .lafu-wc-actions:not(:has([aria-pressed="true"]))) {
		opacity: 0;
		transform: translateY(6px);
	}

	.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) :is(.lafu-sl-actions, .lafu-wc-actions) {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
		transition: box-shadow 0.2s ease, border-color 0.2s ease;
	}

	.lafu-sl-card-boxed li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.lafu-sl-actions, .lafu-wc-actions) {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
}

/* LAFU Wishlist & Compare also answers WooCommerce's classic loop hook inside block cards: one set of
   buttons (the one on the picture) is enough. */
.lafu-sl li.wc-block-product:has(.lafu-wc-media .lafu-wc-actions) > .lafu-wc-actions {
	display: none;
}

/* ---------- Card: Overlay (name and price over the picture; the rest on hover) ---------- */
.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto auto;
	border-radius: var(--lafu-sl-r);
	overflow: hidden;
	isolation: isolate;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > * {
	grid-column: 1;
	z-index: 2;
	margin-inline: 0 !important;
	padding-inline: 14px;
	color: #fff;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wc-block-components-product-image, .lafu-wc-media, .wp-block-woocommerce-product-image) {
	grid-row: 1 / -1;
	z-index: auto;
	margin: 0 !important;
	padding: 0;
	border-radius: 0;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li)::after {
	content: "";
	grid-row: 1 / -1;
	grid-column: 1;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.84) 0%, rgb(0 0 0 / 0.62) 38%, rgb(0 0 0 / 0) 72%);
	pointer-events: none;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-post-title, .lafu-sl-text) {
	grid-row: 2;
	margin-block: 0 4px !important;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > .lafu-sl-text > .wp-block-post-title {
	margin-block: 0 4px !important;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wp-block-post-title a,
.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-price,
.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-price :is(del, ins, span),
.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.lafu-sl-specs, .lafu-sl-rating, .lafu-sl-stock) {
	color: #fff !important;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > .lafu-sl-meta {
	grid-row: 3;
	margin: 0;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.lafu-sl-price, .wp-block-woocommerce-product-price) {
	grid-row: 4;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
	grid-row: 5;
	margin: 0 !important;
	padding-block-end: 14px;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > .lafu-cb-qv-btn {
	grid-row: 1;
	align-self: start;
	justify-self: end;
	margin: 10px;
	padding: 0.4em 0.9em;
	background: var(--lafu-sl-card);
	color: var(--lafu-sl-ink);
	text-shadow: none;
}

.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.wp-block-button__link, .wc-block-components-product-button__button) {
	background: #fff !important;
	color: #111 !important;
}

@media (hover: hover) and (pointer: fine) {

	.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.lafu-sl-meta, .wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button, .lafu-cb-qv-btn) {
		opacity: 0;
		transform: translateY(8px);
	}

	.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li):is(:hover, :focus-within) :is(.lafu-sl-meta, .wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button, .lafu-cb-qv-btn) {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.lafu-sl-card-overlay li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > * {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
}

/* ---------- Card: Editorial (large picture, serif title, centred) ---------- */
.lafu-sl-card-editorial .wc-block-product-template {
	row-gap: clamp(28px, 4vw, 48px) !important;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) {
	align-items: center;
	text-align: center !important;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > * {
	align-self: stretch;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-image {
	margin-bottom: 16px !important;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-image img {
	padding: 0 !important;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wp-block-post-title {
	font-family: var(--lafu-sl-serif) !important;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	text-align: center !important;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .wc-block-components-product-price {
	text-align: center !important;
	font-weight: 500 !important;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) .lafu-sl-specs {
	justify-items: center;
}

.lafu-sl-card-editorial li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
	align-items: center !important;
}

.lafu-sl-card-editorial.lafu-sl-button-full li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.wp-block-button__link, .wc-block-components-product-button__button) {
	width: auto !important;
	padding: 0 24px !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--lafu-sl-ink) !important;
	box-shadow: inset 0 0 0 1px var(--lafu-sl-ink);
}

.lafu-sl-card-editorial.lafu-sl-button-full li.wc-block-product:not(.lafu-sl-view-list .lafu-sl-main li, .lafu-sl-rows .lafu-sl-main li) :is(.wp-block-button__link, .wc-block-components-product-button__button):hover {
	background: var(--lafu-sl-ink) !important;
	color: var(--lafu-sl-card) !important;
}

/* ---------- List rows (List row card on listing pages, or the shopper's list view) ---------- */
:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main .wc-block-product-template.wc-block-product-template {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0 !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product {
	display: grid !important;
	grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) minmax(170px, 240px);
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(16px, 2.4vw, 32px);
	row-gap: 8px;
	align-items: start;
	padding-block: 18px;
	border-block-end: 1px solid var(--lafu-sl-line);
	text-align: start !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > * {
	grid-column: 2;
	order: 0;
	margin-inline: 0 !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > :is(.wc-block-components-product-image, .lafu-wc-media, .wp-block-woocommerce-product-image) {
	grid-column: 1;
	grid-row: 1 / -1;
	margin: 0 !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > .lamoi-stock-badge {
	grid-column: 1;
	grid-row: 1;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > :is(.lafu-sl-text, .wp-block-post-title) {
	grid-column: 2;
	grid-row: 1 / -1;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .wp-block-post-title {
	margin: 0 0 8px !important;
	font-size: 1.05rem !important;
	text-align: start !important;
	-webkit-line-clamp: 3;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .lafu-sl-excerpt {
	display: block;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .lafu-sl-stock {
	display: flex;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .lafu-sl-specs--over {
	display: none !important;
}

:is(.lafu-sl-view-list body, body.lafu-sl-rows).lafu-sl-specs-auto .lafu-sl-main li.wc-block-product .lafu-sl-meta > .lafu-sl-specs,
:is(.lafu-sl-view-list body, body.lafu-sl-rows).lafu-sl-specs-show .lafu-sl-main li.wc-block-product .lafu-sl-meta > .lafu-sl-specs {
	display: grid;
	position: static !important;
	width: auto;
	height: auto;
	margin: 0 0 8px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > :is(.lafu-sl-price, .wp-block-woocommerce-product-price) {
	grid-column: 3;
	grid-row: 1;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .wc-block-components-product-price {
	font-size: 1.35rem !important;
	text-align: start !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
	grid-column: 3;
	grid-row: 2;
	align-items: stretch;
	margin: 0 !important;
	opacity: 1 !important;
	transform: none !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product :is(.wp-block-button__link, .wc-block-components-product-button__button) {
	width: 100% !important;
	height: auto;
	min-height: 44px !important;
	margin: 0 !important;
	font-size: 0.875rem !important;
	border-radius: calc(var(--lafu-sl-r) * 0.6) !important;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product :is(.wp-block-button__link, .wc-block-components-product-button__button)::before {
	content: none;
}

:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > .lafu-cb-qv-btn {
	grid-column: 3;
	grid-row: 3;
}

@media (max-width: 599px) {

	:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: none;
		column-gap: 14px;
		row-gap: 6px;
	}

	:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > :is(.lafu-sl-text, .wp-block-post-title, .lafu-sl-price, .wp-block-woocommerce-product-price, .wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button, .lafu-cb-qv-btn) {
		grid-column: 2;
		grid-row: auto;
	}

	:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product > :is(.wc-block-components-product-image, .lafu-wc-media, .wp-block-woocommerce-product-image) {
		grid-column: 1;
		grid-row: 1 / span 4;
	}

	:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .lafu-sl-excerpt {
		display: none;
	}

	:is(.lafu-sl-view-list body.lafu-sl, body.lafu-sl.lafu-sl-rows) .lafu-sl-main li.wc-block-product .wc-block-components-product-price {
		font-size: 1.15rem !important;
	}
}

/* ---------- Listing: columns ---------- */
@media (min-width: 1000px) {

	body.lafu-sl:not(.lafu-sl-cols-default) .lafu-sl-main .wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(var(--lafu-sl-cols), minmax(0, 1fr)) !important;
	}
}

@media (min-width: 600px) and (max-width: 999px) {

	body.lafu-sl:not(.lafu-sl-cols-tablet-default) .lafu-sl-main .wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(var(--lafu-sl-cols-tablet), minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {

	body.lafu-sl:not(.lafu-sl-cols-phone-default) .lafu-sl-main .wc-block-product-template {
		display: grid !important;
		grid-template-columns: repeat(var(--lafu-sl-cols-phone), minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1000px) {

	.lafu-sl-cols-5 .lafu-sl-main li.wc-block-product .wp-block-post-title,
.lafu-sl-cols-6 .lafu-sl-main li.wc-block-product .wp-block-post-title {
		font-size: 0.875rem !important;
	}
}

/* ---------- Listing: toolbar and the grid/list switch ---------- */
.lafu-sl .lafu-sl-toolbar-end {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lafu-sl .lafu-sl-view {
	display: inline-flex;
	flex: none;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--lafu-sl-line);
	border-radius: 999px;
	background: var(--lafu-sl-card);
}

html:not(.lafu-sl-js) .lafu-sl .lafu-sl-view {
	visibility: hidden;
}

.lafu-sl .lafu-sl-view__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--lafu-sl-muted);
	cursor: pointer;
}

.lafu-sl .lafu-sl-view__btn:hover {
	color: var(--lafu-sl-ink);
}

html:not(.lafu-sl-view-list) .lafu-sl .lafu-sl-view__btn[data-lafu-sl-view="grid"],
.lafu-sl-view-list .lafu-sl .lafu-sl-view__btn[data-lafu-sl-view="list"] {
	background: var(--lafu-sl-ink);
	color: var(--lafu-sl-card);
}

.lafu-sl .lafu-sl-main > .lafu-sl-view {
	margin: 0 0 16px auto;
	display: flex;
	width: max-content;
}

.lafu-sl-toolbar-pill :is(.woocommerce-ordering select.orderby, .wp-block-woocommerce-catalog-sorting select) {
	min-height: 42px;
	padding-inline: 18px 40px;
	border: 1px solid var(--lafu-sl-ink);
	border-radius: 999px;
	font-weight: 600;
}

[dir="rtl"] .lafu-sl-toolbar-pill :is(.woocommerce-ordering select.orderby, .wp-block-woocommerce-catalog-sorting select) {
	background-position: left 14px center;
}

.lafu-sl-toolbar-pill :is(.woocommerce-result-count, .wp-block-woocommerce-product-results-count .woocommerce-result-count) {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px !important;
	border-radius: 999px;
	background: var(--lafu-sl-soft);
	color: var(--lafu-sl-ink) !important;
	font-weight: 500;
}

/* ---------- Listing: load more and infinite scroll (the page numbers stay as the no-script fallback) ---------- */
.lafu-sl .lafu-sl-main .wp-block-query-pagination[hidden] {
	display: none !important;
}

.lafu-sl .lafu-sl-more {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-top: 36px;
}

.lafu-sl .lafu-sl-more__btn {
	min-height: 46px;
	padding: 0 28px;
	border: 1px solid var(--lafu-sl-ink);
	border-radius: 999px;
	background: var(--lafu-sl-card);
	color: var(--lafu-sl-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.lafu-sl .lafu-sl-more__btn:hover {
	background: var(--lafu-sl-ink);
	color: var(--lafu-sl-card);
}

.lafu-sl .lafu-sl-more__btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.lafu-sl .lafu-sl-more__status {
	margin: 0;
	min-height: 1.4em;
	font-size: 0.875rem;
	color: var(--lafu-sl-muted);
}

/* ---------- Category pages and the Category tiles block ---------- */
.lafu-sl .lafu-sl-cat {
	margin: 6px 0 28px;
}

.lafu-sl .lafu-sl-cat__title {
	margin: 6px 0 12px;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.lafu-sl .lafu-sl-tiles-block .lafu-sl-cat__title {
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.lafu-sl .lafu-sl-cat__desc {
	max-width: 70ch;
	color: var(--lafu-sl-muted);
}

.lafu-sl .lafu-sl-cat__desc > :first-child {
	margin-top: 0;
}

.lafu-sl .lafu-sl-cat__desc > :last-child {
	margin-bottom: 0;
}

.lafu-sl .lafu-sl-cat :is(.lafu-sl-cat__tiles, .lafu-sl-cat__rows, .lafu-sl-cat__chips) {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.lafu-sl .lafu-sl-cat li {
	margin: 0;
}

.lafu-sl .lafu-sl-cat__link {
	color: var(--lafu-sl-ink);
	text-decoration: none;
}

.lafu-sl .lafu-sl-cat__count {
	color: var(--lafu-sl-muted);
	font-size: 0.8125rem;
}

.lafu-sl .lafu-sl-cat__letter {
	display: grid;
	place-items: center;
	background: var(--lafu-sl-soft);
	color: var(--lafu-sl-muted);
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
}

/* Tiles */
.lafu-sl .lafu-sl-cat__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 42vw), 1fr));
	gap: 14px;
}

.lafu-sl .lafu-sl-cat__tiles .lafu-sl-cat__link {
	display: grid;
	gap: 6px;
	padding: 10px;
	border-radius: var(--lafu-sl-r);
	background: var(--lafu-sl-card);
	box-shadow: 0 0 0 1px var(--lafu-sl-line);
	height: 100%;
	box-sizing: border-box;
}

.lafu-sl .lafu-sl-cat__tiles .lafu-sl-cat__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--lafu-sl-r) * 0.6);
	background: var(--lafu-sl-soft);
}

.lafu-sl .lafu-sl-cat__tiles .lafu-sl-cat__name {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.lafu-sl .lafu-sl-cat__tiles .lafu-sl-cat__link:hover {
	box-shadow: 0 0 0 1px var(--lafu-sl-ink);
}

/* Split */
.lafu-sl .lafu-sl-cat__split {
	display: grid;
	gap: 20px;
	align-items: center;
}

@media (min-width: 782px) {

	.lafu-sl .lafu-sl-cat__split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: 40px;
	}
}

.lafu-sl .lafu-sl-cat__inline {
	margin: 14px 0 0;
	line-height: 1.9;
}

.lafu-sl .lafu-sl-cat__inline a {
	color: var(--lafu-sl-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--lafu-sl-brand) 60%, transparent);
	text-underline-offset: 3px;
}

.lafu-sl .lafu-sl-cat__campaign {
	position: relative;
	margin-block-start: 10px;
	margin-inline-end: 10px;
}

.lafu-sl .lafu-sl-cat__campaign-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--lafu-sl-r);
}

.lafu-sl .lafu-sl-cat__sticker {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-end: -10px;
	display: grid;
	place-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--lafu-sl-sale);
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.15;
	text-align: center;
	transform: rotate(8deg);
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.45);
}

.lafu-sl .lafu-sl-cat__sticker strong {
	display: block;
	font-size: 1.45rem;
	font-family: var(--lafu-sl-condensed);
	font-stretch: 75%;
}

.lafu-sl .lafu-sl-cat--split .lafu-sl-cat__tiles {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(130px, 160px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-block-end: 6px;
}

.lafu-sl .lafu-sl-cat--split .lafu-sl-cat__tiles > li {
	scroll-snap-align: start;
}

.lafu-sl .lafu-sl-cat__often {
	margin-top: 20px;
}

.lafu-sl .lafu-sl-cat__often-title {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--lafu-sl-muted);
}

.lafu-sl .lafu-sl-cat__often .lafu-sl-cat__chips {
	margin-top: 0;
}

/* Rows */
.lafu-sl .lafu-sl-cat__rows {
	display: grid;
	column-gap: 28px;
}

@media (min-width: 782px) {

	.lafu-sl .lafu-sl-cat__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.lafu-sl .lafu-sl-cat__rows {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lafu-sl .lafu-sl-cat__rows .lafu-sl-cat__link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 8px 4px;
	border-block-end: 1px solid var(--lafu-sl-line);
}

.lafu-sl .lafu-sl-cat__rows .lafu-sl-cat__img {
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: calc(var(--lafu-sl-r) * 0.5);
	background: var(--lafu-sl-soft);
	font-size: 1.1rem;
}

.lafu-sl .lafu-sl-cat__rows .lafu-sl-cat__name {
	flex: 1;
	font-weight: 600;
}

.lafu-sl .lafu-sl-cat__chev {
	flex: none;
	color: var(--lafu-sl-muted);
}

[dir="rtl"] .lafu-sl .lafu-sl-cat__chev {
	transform: scaleX(-1);
}

.lafu-sl .lafu-sl-cat__rows .lafu-sl-cat__link:hover .lafu-sl-cat__name {
	text-decoration: underline;
}

/* Chips */
.lafu-sl .lafu-sl-cat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lafu-sl .lafu-sl-cat--chips .lafu-sl-cat__chips {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-block-end: 6px;
}

.lafu-sl .lafu-sl-cat__chips .lafu-sl-cat__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding-block: 4px;
	padding-inline: 4px 14px;
	border: 1px solid var(--lafu-sl-line);
	border-radius: 999px;
	background: var(--lafu-sl-card);
	white-space: nowrap;
}

.lafu-sl .lafu-sl-cat__chips.is-plain .lafu-sl-cat__link {
	min-height: 36px;
	padding-inline: 14px;
}

.lafu-sl .lafu-sl-cat__chips .lafu-sl-cat__img {
	flex: none;
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 50%;
	font-size: 0.9rem;
}

.lafu-sl .lafu-sl-cat__chips .lafu-sl-cat__name {
	font-weight: 600;
	font-size: 0.875rem;
}

.lafu-sl .lafu-sl-cat__chips .lafu-sl-cat__link:hover {
	border-color: var(--lafu-sl-ink);
}

/* Banner */
.lafu-sl .lafu-sl-cat__banner {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(180px, 26vw, 320px);
	border-radius: var(--lafu-sl-r);
	overflow: hidden;
	background: var(--lafu-sl-ink);
	isolation: isolate;
}

.lafu-sl .lafu-sl-cat__banner.is-plain {
	min-height: 0;
	background: var(--lafu-sl-brand);
}

.lafu-sl .lafu-sl-cat__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lafu-sl .lafu-sl-cat__banner:not(.is-plain)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.45));
}

.lafu-sl .lafu-sl-cat__banner-text {
	padding: clamp(20px, 4vw, 44px);
	color: #fff;
}

.lafu-sl .lafu-sl-cat__banner.is-plain .lafu-sl-cat__banner-text {
	color: var(--lafu-sl-on-brand);
}

.lafu-sl .lafu-sl-cat__banner .lafu-sl-cat__title,
.lafu-sl .lafu-sl-cat__banner .lafu-sl-cat__desc {
	color: inherit;
}

.lafu-sl .lafu-sl-cat__banner .lafu-sl-cat__title {
	margin-top: 0;
}

/* ---------- Classic loops ---------- */
.lafu-sl ul.products li.product {
	position: relative;
}

.lafu-sl ul.products li.product .lafu-sl-media img:not(.lafu-sl-hover-img) {
	display: block;
}

.lafu-sl ul.products li.product .lafu-sl-hover-img {
	object-fit: cover;
}