/* BJC Smart Studio — canonical consolidated frontend stylesheet. */
.bjc-studio-section {
	--bjc-studio-gap:32px;
	--bjc-studio-accent:#6750a4;
	--bjc-studio-media-width:48%;
	--bjc-studio-media-align:center; /* legacy design default */
	--bjc-studio-media-vertical-align:center; /* legacy design default */
	--bjc-studio-media-x:0px;
	--bjc-studio-media-y:0px;
	--bjc-studio-media-shadow-x:0px;
	--bjc-studio-media-shadow-y:12px;
	--bjc-studio-media-shadow-blur:18px;
	--bjc-studio-media-shadow-color:rgba(0,0,0,.28);
	--bjc-studio-text-width:100%;
	--bjc-studio-text-align-box:start; /* legacy horizontal design default */
	--bjc-studio-text-horizontal-align:var(--bjc-studio-text-align-box);
	--bjc-studio-text-vertical-align:center; /* legacy design default */
	--bjc-studio-text-x:0px;
	--bjc-studio-text-y:0px;
	--bjc-studio-text-align:left;
	--bjc-studio-action-color:var(--bjc-studio-accent);
	--bjc-studio-action-text:#fff;
	--bjc-studio-line-color:var(--bjc-studio-accent);
	--bjc-studio-line-width:3px;
	--bjc-studio-line-inset:8%;
	--bjc-studio-line-offset:10px;
	--bjc-studio-line-radius:8px;
	box-sizing:border-box;
	position:relative;
	width:100%;
	min-width:0;
	color:var(--e-global-color-text,#333);
	background:transparent;
}
.bjc-studio-section *, .bjc-studio-section *::before, .bjc-studio-section *::after { box-sizing:border-box; }
.bjc-studio-inner { position:relative; width:100%; margin:0 auto; min-width:0; gap:var(--bjc-studio-gap); }
.bjc-studio-copy, .bjc-studio-media { min-width:0; }
.bjc-studio-media { translate:var(--bjc-studio-media-x) var(--bjc-studio-media-y); }
.bjc-studio-copy { position:relative; z-index:2; width:min(var(--bjc-studio-text-width),100%); justify-self:var(--bjc-studio-text-horizontal-align); align-self:var(--bjc-studio-text-vertical-align); translate:var(--bjc-studio-text-x) var(--bjc-studio-text-y); text-align:var(--bjc-studio-text-align); }
.bjc-studio-eyebrow { margin:0 0 .55rem; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bjc-studio-accent); }
.bjc-studio-heading { margin:0 0 .65rem; font-size:clamp(2rem,4vw,4.5rem); line-height:1.02; }
.bjc-studio-subheading { margin:0 0 .9rem; font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.35; opacity:.82; }
.bjc-studio-body { line-height:1.68; }
.bjc-studio-body > :first-child { margin-top:0; }
.bjc-studio-body > :last-child { margin-bottom:0; }

/* Canonical layout contract. Style Formatting controls placement. */
.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner,
.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner {
	display:grid;
	align-items:start;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

/*
 * v0.16.02 — Side-by-side media footprint isolation.
 *
 * Text remains the only content that determines the natural section height.
 * Media is a free visual layer: changing its width or X/Y position does not
 * participate in layout sizing and therefore cannot move the section bottom.
 */
.bjc-studio-arrangement-media-left .bjc-studio-copy {
	grid-column:2;
	grid-row:1;
}
.bjc-studio-arrangement-text-left .bjc-studio-copy {
	grid-column:1;
	grid-row:1;
}
.bjc-studio-arrangement-media-left .bjc-studio-media,
.bjc-studio-arrangement-text-left .bjc-studio-media {
	position:absolute;
	z-index:1;
	top:0;
	margin:0;
	width:var(--bjc-studio-media-width);
	max-width:none;
}
.bjc-studio-arrangement-media-left .bjc-studio-media {
	left:0;
}
.bjc-studio-arrangement-text-left .bjc-studio-media {
	right:0;
}

/* 0.16.77 — Style vertical arrangements. The original stylesheet only
 * defined stacking order inside the mobile breakpoint, leaving desktop
 * vertical selections without a layout and Media 1 at its intrinsic size.
 * Scope the vertical stage to Styles; Frame and horizontal layouts are intact.
 * Existing X/Y translations, media sizing and text formatting remain live. */
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-inner,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--bjc-studio-gap);
}
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-media,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-media {
    position:relative;
    inset:auto;
    flex:0 0 auto;
    width:calc(var(--bjc-studio-media-width) * 1.2);
    max-width:100%;
    margin-inline:auto;
    align-self:center;
}
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-copy,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-copy {
    flex:0 0 auto;
    width:min(var(--bjc-studio-text-width),100%);
    max-width:800px;
    margin-inline:auto;
    align-self:center;
}
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-media,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-copy { order:1; }
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-copy,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-media { order:2; }

/* Anchor side-by-side media to the inner stage top, not its text-driven height.
 * Media X/Y remains independently controlled by the existing translate property.
 * Do not use top:50% / translateY(-50%): text area height would move media. */

/*
 * With media removed from layout flow, the section's bottom spacing belongs
 * only to the text/content stage. Keep a small deliberate breathing space.
 */
.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner,
.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner {
	padding-bottom:clamp(8px,1vw,12px);
}


@media (max-width: 767px) {
}

/* Decoration positioning is independent of text/media alignment. */
.bjc-studio-design-plugin-feature .bjc-studio-copy::before { margin-left:0; margin-right:auto; }
.bjc-studio-decoration-align-center.bjc-studio-design-plugin-feature .bjc-studio-copy::before { margin-left:auto; margin-right:auto; }
.bjc-studio-decoration-align-right.bjc-studio-design-plugin-feature .bjc-studio-copy::before { margin-left:auto; margin-right:0; }
.bjc-studio-decoration-align-center.bjc-studio-decoration-stripe::before { left:50%; right:auto; transform:translateX(-50%); }
.bjc-studio-decoration-align-right.bjc-studio-decoration-stripe::before { left:auto; right:0; }
.bjc-studio-decoration-align-left.bjc-studio-decoration-orbit::before { left:-90px; right:auto; }
.bjc-studio-decoration-align-left.bjc-studio-decoration-orbit::after { left:-20px; right:auto; }
.bjc-studio-decoration-align-center.bjc-studio-decoration-orbit::before { left:50%; right:auto; transform:translateX(-50%); }
.bjc-studio-decoration-align-center.bjc-studio-decoration-orbit::after { left:50%; right:auto; transform:translateX(-50%); }

/* Style Backgrounds — background-only treatments that do not consume pseudo-elements,
 * so they can coexist cleanly with Style Decorations and vertical lines. */
.bjc-studio-section {
    --bjc-studio-bg-accent:#6750a4;
    --bjc-studio-bg-secondary:#ffffff;
    --bjc-studio-bg-scale:48px;
    --bjc-studio-bg-strength:14%;
}
.bjc-studio-background-soft-circles {
    background-image:
        radial-gradient(circle var(--bjc-studio-bg-scale) at 16% 28%, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%),
        radial-gradient(circle var(--bjc-studio-bg-scale) at 38% 76%, color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%),
        radial-gradient(circle var(--bjc-studio-bg-scale) at 74% 24%, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%),
        radial-gradient(circle var(--bjc-studio-bg-scale) at 88% 72%, color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%) !important;
    background-size:auto !important;
}
.bjc-studio-background-corner-glow {
    background-image:
        radial-gradient(circle at 0 0, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent), transparent 38%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent), transparent 38%) !important;
    background-size:auto !important;
}
.bjc-studio-background-angled-panels {
    background-image:linear-gradient(125deg,
        color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 24%,
        transparent 24% 68%,
        color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 68% 100%) !important;
    background-size:auto !important;
}
.bjc-studio-background-dots {
    background-image:radial-gradient(circle,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 1.6px,transparent 1.8px) !important;
    background-size:var(--bjc-studio-bg-scale) var(--bjc-studio-bg-scale) !important;
}
.bjc-studio-background-grid {
    background-image:
        linear-gradient(color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 1px,transparent 1px),
        linear-gradient(90deg,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 1px,transparent 1px) !important;
    background-size:var(--bjc-studio-bg-scale) var(--bjc-studio-bg-scale) !important;
}
.bjc-studio-background-diagonal-lines {
    background-image:repeating-linear-gradient(135deg,
        color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 2px,
        transparent 2px calc(var(--bjc-studio-bg-scale) / 2)) !important;
}
.bjc-studio-background-crosshatch {
    background-image:
        repeating-linear-gradient(45deg,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 1px,transparent 1px calc(var(--bjc-studio-bg-scale) / 2)),
        repeating-linear-gradient(-45deg,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 1px,transparent 1px calc(var(--bjc-studio-bg-scale) / 2)) !important;
}

/* Decorations */
.bjc-studio-decoration-corner-lines::before,
.bjc-studio-decoration-corner-lines::after { content:""; position:absolute; width:70px; height:70px; pointer-events:none; opacity:.55; }
.bjc-studio-decoration-corner-lines::before { left:12px; top:12px; border-left:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); border-top:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); }
.bjc-studio-decoration-corner-lines::after { right:12px; bottom:12px; border-right:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); border-bottom:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); }
.bjc-studio-decoration-dots::before {
    content:"";
    position:absolute;
    z-index:5;
    top:18px;
    left:20px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--bjc-studio-decoration-color, var(--bjc-studio-accent));
    box-shadow:18px 0 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 72%,transparent), 36px 0 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 46%,transparent), 9px 16px 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 58%,transparent), 27px 16px 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 34%,transparent);
    opacity:.82;
    pointer-events:none;
}
.bjc-studio-decoration-align-center.bjc-studio-decoration-dots::before { left:50%; transform:translateX(-23px); }
.bjc-studio-decoration-align-right.bjc-studio-decoration-dots::before { left:auto; right:56px; }
.bjc-studio-decoration-stripe::before { content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); opacity:.8; pointer-events:none; }
.bjc-studio-decoration-orbit::before,
.bjc-studio-decoration-orbit::after { content:""; position:absolute; border:1px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); border-radius:50%; opacity:.18; pointer-events:none; }
.bjc-studio-decoration-orbit::before { width:220px; height:220px; right:-90px; top:-110px; }
.bjc-studio-decoration-orbit::after { width:110px; height:110px; right:-20px; top:-45px; }

/* Independent configurable vertical line decoration. */
.bjc-studio-vertical-line { position:absolute; z-index:6; top:var(--bjc-studio-line-inset); bottom:var(--bjc-studio-line-inset); width:var(--bjc-studio-line-width); border-radius:var(--bjc-studio-line-radius); pointer-events:none; }
.bjc-studio-line-side-left .bjc-studio-vertical-line { left:var(--bjc-studio-line-offset); }
.bjc-studio-line-side-center .bjc-studio-vertical-line { left:50%; transform:translateX(-50%); }
.bjc-studio-line-side-right .bjc-studio-vertical-line { right:var(--bjc-studio-line-offset); }
.bjc-studio-line-solid .bjc-studio-vertical-line { background:var(--bjc-studio-line-color); }
.bjc-studio-line-double .bjc-studio-vertical-line { width:calc(var(--bjc-studio-line-width) * 3); border-left:var(--bjc-studio-line-width) solid var(--bjc-studio-line-color); border-right:var(--bjc-studio-line-width) solid var(--bjc-studio-line-color); }
.bjc-studio-line-dashed .bjc-studio-vertical-line { background:repeating-linear-gradient(to bottom,var(--bjc-studio-line-color) 0 14px,transparent 14px 24px); }
.bjc-studio-line-dotted .bjc-studio-vertical-line { background:repeating-radial-gradient(circle at 50% calc(var(--bjc-studio-line-width)/2),var(--bjc-studio-line-color) 0 calc(var(--bjc-studio-line-width)/2),transparent calc(var(--bjc-studio-line-width)/2 + 1px) calc(var(--bjc-studio-line-width)*2.4)); }
.bjc-studio-line-tapered .bjc-studio-vertical-line { background:linear-gradient(to bottom,transparent,var(--bjc-studio-line-color) 16%,var(--bjc-studio-line-color) 84%,transparent); }

@media (max-width:767px) {
	.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner,
	.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner { display:flex; flex-direction:column; align-items:stretch; }
	.bjc-studio-section .bjc-studio-media { width:min(var(--bjc-studio-media-width),100%); align-self:var(--bjc-studio-media-align); }
	.bjc-studio-section .bjc-studio-copy { width:min(var(--bjc-studio-text-width),100%); align-self:var(--bjc-studio-text-horizontal-align); }
	.bjc-studio-arrangement-media-left .bjc-studio-media,
	.bjc-studio-arrangement-media-above .bjc-studio-media { order:1; }
	.bjc-studio-arrangement-media-left .bjc-studio-copy,
	.bjc-studio-arrangement-media-above .bjc-studio-copy { order:2; }
	.bjc-studio-arrangement-text-left .bjc-studio-copy,
	.bjc-studio-arrangement-text-above .bjc-studio-copy { order:1; }
	.bjc-studio-arrangement-text-left .bjc-studio-media,
	.bjc-studio-arrangement-text-above .bjc-studio-media { order:2; }
	.bjc-studio-design-stacked-feature .bjc-studio-media { order:1; }
	.bjc-studio-design-stacked-feature .bjc-studio-copy { order:2; }
	.bjc-studio-design-reverse-offset.bjc-studio-arrangement-media-left .bjc-studio-copy,
	.bjc-studio-design-reverse-offset.bjc-studio-arrangement-text-left .bjc-studio-copy { margin-left:0; margin-right:0; transform:none; }
}

/* Rich body content behaves consistently across the reading-oriented and general styles. */
.bjc-studio-body a { color:var(--bjc-studio-accent); text-underline-offset:2px; }
.bjc-studio-body h2, .bjc-studio-body h3, .bjc-studio-body h4,
.bjc-studio-body h5, .bjc-studio-body h6 { margin:1.05em 0 .45em; line-height:1.18; }
.bjc-studio-body blockquote {
	margin:1em 0; padding:.25em 0 .25em 1em;
	border-left:3px solid var(--bjc-studio-accent);
}
.bjc-studio-body ul, .bjc-studio-body ol { padding-left:1.4em; }

@media (max-width:767px) {
	.bjc-studio-design-magazine-feature .bjc-studio-inner,
	.bjc-studio-design-plugin-feature .bjc-studio-inner { padding:1.15rem; }
}

/* Manually scalable, vertically centred shortcode media inside geometric shapes.
 * The outer media box remains the clipping viewport while the immediate shortcode
 * output scales from its centre without resizing nested plugin controls or artwork. */
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded)
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed {
	align-items:center;
}
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded)
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed > :first-child {
	transform:scale(calc(var(--bjc-studio-shortcode-scale, 100) / 100));
	transform-origin:center center;
}

/* 0.16.66 — isolated Style Links. */
.bjc-studio-content-design .bjc-studio-actions {
    display: block;
    width: 100%;
    line-height: normal;
    margin-top: 12px;
}
.bjc-studio-content-design .bjc-studio-action {
    display: inline-block;
    color: var(--bjc-studio-action-color);
    text-decoration: none;
    line-height: 1.2;
}
.bjc-studio-content-design .bjc-studio-button {
    padding: .72em 1.15em;
    border: 2px solid var(--bjc-studio-action-color);
}
.bjc-studio-content-design .bjc-studio-button-filled,
.bjc-studio-content-design .bjc-studio-button-pill {
    background: var(--bjc-studio-action-color);
    color: var(--bjc-studio-action-text);
}
.bjc-studio-content-design .bjc-studio-button-outline {
    background: transparent;
    color: var(--bjc-studio-action-color);
}
.bjc-studio-content-design .bjc-studio-button-soft {
    background: color-mix(in srgb, var(--bjc-studio-action-color) 18%, transparent);
    color: var(--bjc-studio-action-color);
    border-color: transparent;
}
.bjc-studio-content-design .bjc-studio-button-pill {
    border-radius: 999px;
}

/* 0.16.66 — isolated Style media-shape contract.
 * Shape modules own geometry. This layer gives normal Styles the same reliable
 * media viewport behaviour already proven by the separate Frame system. */
.bjc-studio-content-design {
    --bjc-studio-media-fit: cover;
    --bjc-studio-media-focus: 50% 50%;
}
/* 0.16.66 — Style shaped-media centring mirrors the proven Frame contract. */
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media {
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.bjc-studio-content-design.bjc-studio-shape-natural .bjc-studio-media {
    overflow:hidden;
}
.bjc-studio-content-design .bjc-studio-media > img,
.bjc-studio-content-design .bjc-studio-media > .bjc-studio-image,
.bjc-studio-content-design .bjc-studio-media > video,
.bjc-studio-content-design .bjc-studio-media > .bjc-studio-self-video {
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:var(--bjc-studio-media-fit,cover) !important;
    object-position:var(--bjc-studio-media-focus,50% 50%) !important;
}
.bjc-studio-content-design .bjc-studio-media > iframe,
.bjc-studio-content-design .bjc-studio-media > .wp-video,
.bjc-studio-content-design .bjc-studio-media > .wp-video-shortcode {
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
}

.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media > :not(img):not(video) {
    width:100%;
    max-width:100%;
    margin:auto;
}
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media > :not(img):not(video) iframe,
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media > :not(img):not(video) video {
    display:block;
    width:100%;
    max-width:100%;
    margin:auto;
    object-fit:var(--bjc-studio-media-fit,cover);
    object-position:var(--bjc-studio-media-focus,50% 50%);
}
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-shortcode-shell {
    display:flex;
    align-items:center;
    justify-content:center;
}
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed {
    width:100%; max-width:100%; margin:auto;
}


/* 0.16.66 — Style-only Text Only media state.
 * With no media selected, remove the unused two-column media footprint and
 * allow the existing Style text-width/alignment controls to govern the copy. */
.bjc-studio-content-design.bjc-studio-no-media .bjc-studio-inner {
    display: block;
}
.bjc-studio-content-design.bjc-studio-no-media .bjc-studio-copy {
    grid-column: auto;
    grid-row: auto;
}


/* 0.16.66 — Style-only Highlight Text media.
 * The normal Style media wrapper remains the shape owner, so existing Media
 * Size, X/Y, Shape, Background, Border, Radius, Padding and Shadow controls
 * continue to govern the highlighted-text object. */
.bjc-studio-content-design .bjc-studio-media.bjc-studio-style-text-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: var(--bjc-studio-media-focus, 50% 50%);
	background-size: var(--bjc-studio-media-fit, cover);
}
.bjc-studio-content-design .bjc-studio-style-text-stage .bjc-studio-style-highlight-text {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	line-height: normal;
	overflow-wrap: anywhere;
}
.bjc-studio-content-design .bjc-studio-style-text-stage .bjc-studio-style-highlight-text > :first-child { margin-top: 0; }
.bjc-studio-content-design .bjc-studio-style-text-stage .bjc-studio-style-highlight-text > :last-child { margin-bottom: 0; }


/* 0.16.66 — Highlight Text shadow correction.
 * The generic media drop-shadow remains untouched for established media.
 * Highlight Text uses a true box shadow on reliable box/radius shapes so the
 * shadow cannot colour the text-shape interior. */
.bjc-studio-content-design .bjc-studio-media.bjc-studio-style-text-stage {
	filter: none !important;
}
.bjc-studio-content-design.bjc-studio-shape-natural .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-square .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-rounded .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-circle .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-oval .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-arch .bjc-studio-media.bjc-studio-style-text-stage {
	box-shadow:
		var(--bjc-studio-media-shadow-x)
		var(--bjc-studio-media-shadow-y)
		var(--bjc-studio-media-shadow-blur)
		var(--bjc-studio-media-shadow-color);
}
/* The shadow switcher writes filter:none when off; use that state to suppress
 * the Highlight Text box-shadow as well. */

/* Optional Style Media 2. No Frame selectors or inherited Media 1 sizing. */
.bjc-studio-content-design .bjc-studio-inner:has(> .bjc-studio-media-two) { position: relative; }
.bjc-studio-content-design .bjc-studio-media-two { position: absolute; z-index: 2; top: 0; left: 50%; width: var(--bjc-studio-media-two-width, 30%); max-width: 100%; translate: var(--bjc-studio-media-two-x, 0px) var(--bjc-studio-media-two-y, 0px); }
.bjc-studio-content-design .bjc-studio-media-two-image { display: block; width: 100%; height: auto; }

/* Optional Style Media 3; independent of Media 1 and Media 2. */
.bjc-studio-content-design .bjc-studio-inner:has(> .bjc-studio-media-three) { position: relative; }
.bjc-studio-content-design .bjc-studio-media-three { position: absolute; z-index: 3; top: 0; left: 50%; width: var(--bjc-studio-media-three-width, 30%); max-width: 100%; translate: var(--bjc-studio-media-three-x, 0px) var(--bjc-studio-media-three-y, 0px); }
.bjc-studio-content-design .bjc-studio-media-three-image { display: block; width: 100%; height: auto; }

/* Optional Style Media 4; independent of Media 1, 2 and 3. */
.bjc-studio-content-design .bjc-studio-inner:has(> .bjc-studio-media-four) { position: relative; }
.bjc-studio-content-design .bjc-studio-media-four { position: absolute; z-index: 4; top: 0; left: 50%; width: var(--bjc-studio-media-four-width, 30%); max-width: 100%; translate: var(--bjc-studio-media-four-x, 0px) var(--bjc-studio-media-four-y, 0px); }
.bjc-studio-content-design .bjc-studio-media-four-image { display: block; width: 100%; height: auto; }


/* 0.16.72: optional Style media border/radius containment; no Frame changes. */
.bjc-studio-content-design .bjc-studio-media-two { box-sizing: border-box; border: 0 solid transparent; border-radius: 0; }
.bjc-studio-content-design .bjc-studio-media-two-image { border-radius: inherit; }
.bjc-studio-content-design .bjc-studio-media-three { box-sizing: border-box; border: 0 solid transparent; border-radius: 0; }
.bjc-studio-content-design .bjc-studio-media-three-image { border-radius: inherit; }
.bjc-studio-content-design .bjc-studio-media-four { box-sizing: border-box; border: 0 solid transparent; border-radius: 0; }
.bjc-studio-content-design .bjc-studio-media-four-image { border-radius: inherit; }

/* 0.16.80 — Style media layers above the text box. Preserve independent
 * sizing/positioning and the existing Frame stacking rules. */
.bjc-studio-content-design .bjc-studio-copy { z-index: 2; }
.bjc-studio-content-design .bjc-studio-media { z-index: 3; }
.bjc-studio-content-design .bjc-studio-media-two { z-index: 4; }
.bjc-studio-content-design .bjc-studio-media-three { z-index: 5; }
.bjc-studio-content-design .bjc-studio-media-four { z-index: 6; }

/* 0.16.81 — opt-in aspect ratios for ordinary Styles only. Existing shape
 * defaults, all clipped shapes and all Frame geometry remain unchanged. */
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-16-9 .bjc-studio-media { aspect-ratio:16 / 9 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-4-3 .bjc-studio-media { aspect-ratio:4 / 3 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-1-1 .bjc-studio-media { aspect-ratio:1 / 1 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-3-4 .bjc-studio-media { aspect-ratio:3 / 4 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-9-16 .bjc-studio-media { aspect-ratio:9 / 16 !important; }

/* 0.16.82 — opt-in Styles ratio extension. Keep Circle and all Frames unchanged.
 * Existing shape masks/borders/shadows remain owned by their original modules. */
.bjc-studio-content-design:not(.bjc-studio-shape-circle):is(.bjc-studio-ratio-16-9,.bjc-studio-ratio-4-3,.bjc-studio-ratio-1-1,.bjc-studio-ratio-3-4,.bjc-studio-ratio-9-16,.bjc-studio-ratio-custom,.bjc-studio-ratio-original) .bjc-studio-media { height:auto !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-16-9 .bjc-studio-media { aspect-ratio:16 / 9 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-4-3 .bjc-studio-media { aspect-ratio:4 / 3 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-1-1 .bjc-studio-media { aspect-ratio:1 / 1 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-3-4 .bjc-studio-media { aspect-ratio:3 / 4 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-9-16 .bjc-studio-media { aspect-ratio:9 / 16 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle):is(.bjc-studio-ratio-custom,.bjc-studio-ratio-original) .bjc-studio-media { aspect-ratio:var(--bjc-studio-selected-ratio,auto) !important; }
/* Original ratio without WordPress attachment metadata: natural images size themselves. */
.bjc-studio-content-design.bjc-studio-shape-natural.bjc-studio-ratio-original:not([style*="--bjc-studio-selected-ratio"]) .bjc-studio-media > img { height:auto !important; object-fit:contain !important; }


/* 0.16.83 — honour the existing Core media width control in horizontal
 * Styles, including externally registered Design Pack styles. This changes
 * the shared control bridge only; individual approved pack CSS is untouched. */
.bjc-studio-section.bjc-studio-content-design.bjc-studio-arrangement-media-left .bjc-studio-inner > .bjc-studio-media,
.bjc-studio-section.bjc-studio-content-design.bjc-studio-arrangement-text-left .bjc-studio-inner > .bjc-studio-media {
    width:var(--bjc-studio-media-width);
    max-width:none;
}
/* The default style has no pack-specific media positioning. Apply the
 * existing X/Y values via transform for browsers/editors where translate
 * on its shape wrapper was not taking effect. Do not move Frames or packs. */
.bjc-studio-section.bjc-studio-design-default-style > .bjc-studio-inner > .bjc-studio-media {
    translate:none;
    transform:translate(var(--bjc-studio-media-x),var(--bjc-studio-media-y));
}

/* 0.16.85 — Feature Hero optional design palette. These selectors deliberately
   exceed the approved pack specificity; no pack files are changed. Blank
   controls preserve the pack's original gradient and media-stage treatment. */
.bjc-studio-section.bjc-studio-design-core-designs-feature-hero {
    background:linear-gradient(155deg,var(--bjc-feature-hero-primary,#17293a) 0%,var(--bjc-feature-hero-primary,#243d50) 45%,var(--bjc-feature-hero-accent,#f4eee4) 45.1%,var(--bjc-feature-hero-accent,#f4eee4) 100%);
}
.bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-inner::before {
    background:var(--bjc-feature-hero-secondary,linear-gradient(135deg,rgba(120,174,190,.35),rgba(14,31,48,.2)));
}

/* 0.16.87: Optional Diagonal palette. Preserve the pack's original polygon
   geometry and untouched defaults; recolour only its actual background layers. */
.bjc-studio-section.bjc-studio-design-core-designs-diagonal {
    background-color:var(--bjc-diagonal-primary,#4b1934);
}
.bjc-studio-section.bjc-studio-design-core-designs-diagonal::before {
    background-color:var(--bjc-diagonal-secondary,#b9eee2);
}
.bjc-studio-section.bjc-studio-design-core-designs-diagonal .bjc-studio-copy {
    background-color:var(--bjc-diagonal-accent,#fff1d9);
}

/* 0.16.88: On Diagonal only, the existing Container Background control
   colours the fourth visible layer (the diagonal separator). The purple
   design background remains controlled solely by Purple Background. */
.bjc-studio-section.bjc-studio-design-core-designs-diagonal::after {
    background-color:var(--bjc-diagonal-separator,#fff1d9);
}