/* Flex-columns: stretch columns and push buttons to the bottom */
.flex-columns .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.flex-columns .wp-block-column > .wp-block-buttons:last-child {
	padding-top: 1em;
	margin-top: auto;
}

/* Button – Wundersam style variant (outline with fill-on-hover)
 *
 * The --wundersam-color custom property is set by a PHP render filter
 * (front-end) and an editor.BlockListBlock JS filter (block editor).
 * It mirrors the border-color the user picks in the block settings so
 * the same colour can drive text, border, and the hover-fill.
 */
.wp-block-button.is-style-wundersam .wp-block-button__link {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background-color: transparent !important;
	color: var(--wundersam-color, currentColor) !important;
	border-width: 4px;
	border-style: solid;
	transition: -webkit-text-fill-color 0.3s ease;
}

.wp-block-button.is-style-wundersam .wp-block-button__link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	transition: height 0.3s ease;
	background: var(--wundersam-color, currentColor);
	z-index: -1;
}

.wp-block-button.is-style-wundersam .wp-block-button__link:hover {
	-webkit-text-fill-color: var(--wundersam-hover-color, #000);
}

.wp-block-button.is-style-wundersam .wp-block-button__link:hover::after {
	height: 100%;
}

/* Header shadow – stretch full width past .wp-site-blocks padding */
header {
	margin-left: calc(-1 * var(--wp--custom--gap--horizontal));
	margin-right: calc(-1 * var(--wp--custom--gap--horizontal));
	padding-left: var(--wp--custom--gap--horizontal);
	padding-right: var(--wp--custom--gap--horizontal);
	box-shadow: 0 3px 5px -1px rgba(0,0,0,0.1), 0 2px 1px -1px rgba(0,0,0,0.05);
}

/* Paragraph – Justify style variant */
.is-style-justify {
	text-align: justify;
}

/* Image shadow style variant */
.wp-block-image.is-style-shadow {
	position: relative;
}

.wp-block-image.is-style-shadow::after {
	content: "";
	position: absolute;
	top: 15%;
	left: 5%;
	right: 5%;
	height: 90%;
	background-image: var(--shadow-url);
	background-size: 200% 80%;
	background-position: center bottom;
	background-repeat: no-repeat;
	border-radius: inherit;
	-webkit-filter: blur(25px);
	filter: blur(25px);
	transform: translateZ(0);
	z-index: -1;
}

/* Product Image – Shadow style variant */
.wp-block-woocommerce-product-image.is-style-shadow {
	position: relative;
}

.wp-block-woocommerce-product-image.is-style-shadow::after {
	content: "";
	position: absolute;
	top: 15%;
	left: 5%;
	right: 5%;
	height: 90%;
	background-image: var(--shadow-url);
	background-size: 200% 80%;
	background-position: center bottom;
	background-repeat: no-repeat;
	border-radius: inherit;
	-webkit-filter: blur(25px);
	filter: blur(25px);
	transform: translateZ(0);
	z-index: -1;
}

/* Cover – Shadow style variant */
.wp-block-cover.is-style-shadow {
	position: relative;
}

.wp-block-cover.is-style-shadow::after {
	content: "";
	position: absolute;
	top: 15%;
	left: 5%;
	right: 5%;
	height: 90%;
	background-image: var(--shadow-url);
	background-size: 200% 80%;
	background-position: center bottom;
	background-repeat: no-repeat;
	border-radius: inherit;
	-webkit-filter: blur(25px);
	filter: blur(25px);
	transform: translateZ(0);
	z-index: -1;
}

/* Cover – Full Link style variant
 *
 * Makes the entire cover block clickable by stretching a link's
 * ::after pseudo-element over the cover area. The inner container
 * is set to position: static so the ::after escapes it and sizes
 * to the cover block. isolation: isolate on the cover creates a
 * stacking context so z-index: -1 keeps the background behind
 * the (now unpositioned) content.
 */
.wp-block-cover.is-style-full-link {
	position: relative;
	isolation: isolate;
}

.wp-block-cover.is-style-full-link > .wp-block-cover__background {
	z-index: -1;
}

.wp-block-cover.is-style-full-link .wp-block-cover__inner-container {
	position: static;
}

.wp-block-cover.is-style-full-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Button – Locked style variant (lock icon prefix) */
.wp-block-button.is-style-locked .wp-block-button__link::before,
.wp-block-button.is-style-locked .wp-block-button__link .rich-text::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1.3em;
	margin-right: 0.4em;
	vertical-align: middle;
	margin-top: -0.15em;
	margin-bottom: -0.15em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Footer SVGs – inherit text colour */
footer svg {
	fill: currentColor;
}