/*
 * Decoration anchor only. Borders, width, spacing and content layout belong
 * to the builder. Border width below is used only to center the accents.
 */
.biomy-element.biomy-element--frame {
	--biomy-frame-border-width: 1px;
	--biomy-frame-accent-color: #070707;
	--biomy-frame-accent-width: 28px;
	--biomy-frame-accent-height: 8px;
	--biomy-frame-accent-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 28 8%27%3E%3Crect width=%2728%27 height=%278%27 rx=%274%27/%3E%3C/svg%3E");
	--biomy-frame-top-left: none;
	--biomy-frame-top-right: none;
	--biomy-frame-bottom-left: none;
	--biomy-frame-bottom-right: none;
	--biomy-side-title-gap: 24px;
	--biomy-side-title-top: 40px;
	--biomy-side-title-size: 24px;
	--biomy-side-title-mobile-gap: 24px;
	position: relative;
}

/*
 * Only selected sides reserve a pseudo-element. Each one paints up to two
 * capsules using a single SVG rect per corner, embedded as a CSS mask.
 * Source shape: https://biomy.pl/wp-content/uploads/2026/09/dzynks.svg
 * No gradient seams, extra markup, image requests or scripts.
 */
.biomy-element.biomy-element--frame:is(.biomy-accent--top-left, .biomy-accent--bottom-left)::before,
.biomy-element.biomy-element--frame:is(.biomy-accent--top-right, .biomy-accent--bottom-right)::after {
	content: "";
	display: block;
	/* BeTheme .clearfix hides both pseudo-elements; reveal only opted-in accents. */
	visibility: visible;
	position: absolute;
	top: calc((var(--biomy-frame-accent-height) + var(--biomy-frame-border-width)) / -2);
	bottom: calc((var(--biomy-frame-accent-height) + var(--biomy-frame-border-width)) / -2);
	width: var(--biomy-frame-accent-width);
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
	z-index: 1;
	background-color: var(--biomy-frame-accent-color);
	-webkit-mask:
		var(--biomy-frame-top) center top / var(--biomy-frame-accent-width) var(--biomy-frame-accent-height) no-repeat,
		var(--biomy-frame-bottom) center bottom / var(--biomy-frame-accent-width) var(--biomy-frame-accent-height) no-repeat;
	mask:
		var(--biomy-frame-top) center top / var(--biomy-frame-accent-width) var(--biomy-frame-accent-height) no-repeat,
		var(--biomy-frame-bottom) center bottom / var(--biomy-frame-accent-width) var(--biomy-frame-accent-height) no-repeat;
	mask-mode: alpha, alpha;
}

.biomy-element.biomy-element--frame:is(.biomy-accent--top-left, .biomy-accent--bottom-left)::before {
	--biomy-frame-top: var(--biomy-frame-top-left);
	--biomy-frame-bottom: var(--biomy-frame-bottom-left);
	left: calc(var(--biomy-frame-border-width) / -2);
	right: auto;
	transform: translateX(-50%);
}

.biomy-element.biomy-element--frame:is(.biomy-accent--top-right, .biomy-accent--bottom-right)::after {
	--biomy-frame-top: var(--biomy-frame-top-right);
	--biomy-frame-bottom: var(--biomy-frame-bottom-right);
	right: calc(var(--biomy-frame-border-width) / -2);
	left: auto;
	transform: translateX(50%);
}

.biomy-element.biomy-element--frame.biomy-accent--top-left {
	--biomy-frame-top-left: var(--biomy-frame-accent-shape);
}

.biomy-element.biomy-element--frame.biomy-accent--top-right {
	--biomy-frame-top-right: var(--biomy-frame-accent-shape);
}

.biomy-element.biomy-element--frame.biomy-accent--bottom-left {
	--biomy-frame-bottom-left: var(--biomy-frame-accent-shape);
}

.biomy-element.biomy-element--frame.biomy-accent--bottom-right {
	--biomy-frame-bottom-right: var(--biomy-frame-accent-shape);
}

/* Put the actual title before the content in the DOM for the narrow layout. */
.biomy-element.biomy-element--frame :is(.biomy-side-title--left, .biomy-side-title--right) {
	position: static;
	box-sizing: border-box;
	width: 100%;
	flex-basis: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 var(--biomy-side-title-mobile-gap);
	float: none;
	font-size: var(--biomy-side-title-size);
	line-height: 1.2;
	writing-mode: horizontal-tb;
	transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* The class may be on the heading itself or on its builder item wrapper. */
.biomy-element.biomy-element--frame :is(.biomy-side-title--left, .biomy-side-title--right) :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Leave space outside the user's container; keep narrow layouts in flow. */
@media (min-width: 1360px) {
	.biomy-element.biomy-element--frame :is(.biomy-side-title--left, .biomy-side-title--right) {
		position: absolute;
		top: var(--biomy-side-title-top);
		bottom: auto;
		width: max-content;
		max-width: none;
		margin: 0;
		writing-mode: vertical-rl;
		white-space: nowrap;
		overflow-wrap: normal;
		z-index: 1;
	}

	.biomy-element.biomy-element--frame .biomy-side-title--left {
		left: auto;
		right: calc(100% + var(--biomy-side-title-gap));
		transform: rotate(180deg);
	}

	.biomy-element.biomy-element--frame .biomy-side-title--right {
		left: calc(100% + var(--biomy-side-title-gap));
		right: auto;
	}
}

/*
 * Confirmed on biomy.pl / BeTheme 28.5.9.1: footer overflow-x:hidden
 * computes overflow-y:auto. The bottom capsule extends ~5px and creates
 * an inner vertical scrollbar, narrowing/offsetting the footer by 15px.
 * Clip horizontally without making a scroll container; keep accents visible.
 * This ancestor exception is restricted to footer templates using our module.
 */
#mfn-footer-template:has(.biomy-element.biomy-element--frame) {
	overflow-x: clip;
	overflow-y: visible;
}
@media (max-width: 767px) {
	/*
	 * BeTheme repeats overflow-x:hidden on this mobile body class.
	 * Without this opt-in fix, the same scrollbar moves from footer to body.
	 */
	body.responsive-overflow-x-mobile:has(#mfn-footer-template .biomy-element.biomy-element--frame) {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/* Visibility modifiers affect only this wrapper's selected accents. */
@media (max-width: 767px) {
	.biomy-element.biomy-element--frame.biomy-accent--desktop-only:is(.biomy-accent--top-left, .biomy-accent--bottom-left)::before,
	.biomy-element.biomy-element--frame.biomy-accent--desktop-only:is(.biomy-accent--top-right, .biomy-accent--bottom-right)::after {
		display: none;
	}
}
@media (min-width: 768px) {
	.biomy-element.biomy-element--frame.biomy-accent--mobile-only:is(.biomy-accent--top-left, .biomy-accent--bottom-left)::before,
	.biomy-element.biomy-element--frame.biomy-accent--mobile-only:is(.biomy-accent--top-right, .biomy-accent--bottom-right)::after {
		display: none;
	}
}

/* Text marker: offset equals the builder's gap from the left border to this element. */
.biomy-accent-text--left {
 position:relative;
 --biomy-text-accent-offset:40px;
}
.biomy-accent-text--left::before {
 content:"";
 display:block;
 visibility:visible;
 position:absolute;
 left:calc(0px - var(--biomy-text-accent-offset) - var(--biomy-frame-border-width,1px) / 2);
 top:50%;
 right:auto;
 bottom:auto;
 width:var(--biomy-frame-accent-width,28px);
 height:var(--biomy-frame-accent-height,8px);
 margin:0;
 padding:0;
 border:0;
 border-radius:999px;
 background:var(--biomy-frame-accent-color,#070707);
 transform:translate(-50%,-50%);
 pointer-events:none;
 z-index:1;
}
@media (max-width:767px) {
 .biomy-accent-text--left { --biomy-text-accent-offset:20px; }
}

/* Shared mobile size for corner capsules and standalone text markers. */
@media (max-width:767px) {
 .biomy-element.biomy-element--frame,
 .biomy-accent-text--left {
  --biomy-frame-accent-width:18px;
  --biomy-frame-accent-height:5px;
 }
}