/* 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;
	--bjc-studio-media-vertical-align:center;
	--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;
	--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-copy { position:relative; z-index:2; width:min(var(--bjc-studio-text-width),100%); justify-self:var(--bjc-studio-text-align-box); align-self:var(--bjc-studio-text-align-box); 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:center; }
.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner { grid-template-columns:minmax(0,var(--bjc-studio-media-width)) minmax(0,1fr); }
.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner { grid-template-columns:minmax(0,1fr) minmax(0,var(--bjc-studio-media-width)); }
.bjc-studio-arrangement-media-left .bjc-studio-media { grid-column:1; grid-row:1; width:100%; }
.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-text-left .bjc-studio-media { grid-column:2; grid-row:1; width:100%; }
/* In side-by-side layouts the media is slightly inset inside its allocated area so alignment is visible and useful. */
.bjc-studio-arrangement-media-left .bjc-studio-media,
.bjc-studio-arrangement-text-left .bjc-studio-media { width:92%; justify-self:var(--bjc-studio-media-align); align-self:var(--bjc-studio-media-vertical-align); }
.bjc-studio-section.bjc-studio-arrangement-media-above .bjc-studio-inner,
.bjc-studio-section.bjc-studio-arrangement-text-above .bjc-studio-inner { display:flex; flex-direction:column; align-items:stretch; }
.bjc-studio-arrangement-media-above .bjc-studio-media { order:1; width:min(var(--bjc-studio-media-width),100%); align-self:var(--bjc-studio-media-align); }
.bjc-studio-arrangement-media-above .bjc-studio-copy { order:2; width:min(var(--bjc-studio-text-width),100%); align-self:var(--bjc-studio-text-align-box); }
.bjc-studio-arrangement-text-above .bjc-studio-copy { order:1; width:min(var(--bjc-studio-text-width),100%); align-self:var(--bjc-studio-text-align-box); }
.bjc-studio-arrangement-text-above .bjc-studio-media { order:2; width:min(var(--bjc-studio-media-width),100%); align-self:var(--bjc-studio-media-align); }
.bjc-studio-no-media .bjc-studio-inner { display:block; }
.bjc-studio-no-media .bjc-studio-copy { width:min(var(--bjc-studio-text-width),100%); margin-inline:auto; }

/* Optional identity content above every standard style and frame. */
.bjc-studio-top-content {
	position:relative;
	z-index:12;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
	line-height:1.2;
}
.bjc-studio-top-content-image {
	display:inline-block;
	width:90px;
	max-width:100%;
	height:auto;
	margin:0 0 .35rem;
	object-fit:contain;
}
.bjc-studio-top-content-text {
	margin:0;
	padding:0;
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.045em;
	line-height:1.3;
}

/* Links */
.bjc-studio-actions { margin-top:1.25rem; }
.bjc-studio-action { display:inline-block; font-weight:700; line-height:1.2; text-decoration:none; transition:transform .15s ease,opacity .15s ease; }
.bjc-studio-action:hover { transform:translateY(-1px); opacity:.92; }
.bjc-studio-action-text { color:var(--bjc-studio-action-color); padding:.2em 0; }
.bjc-studio-button { padding:.72em 1.25em; border:2px solid var(--bjc-studio-action-color); }
.bjc-studio-button-filled { background:var(--bjc-studio-action-color); color:var(--bjc-studio-action-text); }
.bjc-studio-button-outline { background:transparent; color:var(--bjc-studio-action-color); }
.bjc-studio-button-soft { background:color-mix(in srgb,var(--bjc-studio-action-color) 13%,transparent); color:var(--bjc-studio-action-color); border-color:transparent; }
.bjc-studio-button-pill { background:var(--bjc-studio-action-color); color:var(--bjc-studio-action-text); border-radius:999px; }

/* Shared media contract. Only BJC-owned direct media is sized.
 * The outer .bjc-studio-media element is also the embed stage for external
 * video and shortcode media, matching the proven v0.12.2 structure. */
.bjc-studio-media { position:relative; max-width:100%; overflow:hidden; justify-self:var(--bjc-studio-media-align); }
.bjc-studio-media > img,
.bjc-studio-media > .bjc-studio-image,
.bjc-studio-media > video,
.bjc-studio-media > .wp-video { display:block; width:100%; max-width:100%; margin:0; }
.bjc-studio-media > img,
.bjc-studio-media > .bjc-studio-image,
.bjc-studio-media > video { height:auto; }
.bjc-studio-media.bjc-studio-embed > iframe,
.bjc-studio-media.bjc-studio-embed > video,
.bjc-studio-media.bjc-studio-embed > .wp-video { display:block; width:100%; max-width:100%; aspect-ratio:16/9; border:0; margin:0; }

/* Shortcode/live-plugin media uses the same two-layer contract that worked in
 * v0.12.2 Reading Sections: the outer .bjc-studio-media is the shape/viewport;
 * the inner shortcode stage owns the complete plugin output. Nothing below the
 * immediate stage is resized by Smart Studio. */
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed {
	display:block;
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
	overflow:visible;
}
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed > iframe,
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed > video {
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:0;
	aspect-ratio:16/9;
}

/* Media shapes. */
.bjc-studio-shape-rounded .bjc-studio-media { border-radius:18px; }
.bjc-studio-shape-square .bjc-studio-media,
.bjc-studio-shape-circle .bjc-studio-media,
.bjc-studio-shape-hexagon .bjc-studio-media,
.bjc-studio-shape-triangle .bjc-studio-media,
.bjc-studio-shape-pentagon .bjc-studio-media,
.bjc-studio-shape-question-mark .bjc-studio-media,
.bjc-studio-shape-diamond .bjc-studio-media,
.bjc-studio-shape-shield .bjc-studio-media { aspect-ratio:1; }
.bjc-studio-shape-arrow-left .bjc-studio-media,
.bjc-studio-shape-arrow-right .bjc-studio-media,
.bjc-studio-shape-oval .bjc-studio-media { aspect-ratio:1.35/1; }
.bjc-studio-shape-arch .bjc-studio-media { aspect-ratio:4/5; }
.bjc-studio-shape-circle .bjc-studio-media { border-radius:50%; }
.bjc-studio-shape-hexagon .bjc-studio-media { clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); }
.bjc-studio-shape-triangle .bjc-studio-media {
	clip-path:none;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 4 Q53 4 55 9 L96 88 Q99 95 91 96 L9 96 Q1 95 4 88 L45 9 Q47 4 50 4 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 4 Q53 4 55 9 L96 88 Q99 95 91 96 L9 96 Q1 95 4 88 L45 9 Q47 4 50 4 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.bjc-studio-shape-pentagon .bjc-studio-media {
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 3 L97 38 L82 96 L18 96 L3 38 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 3 L97 38 L82 96 L18 96 L3 38 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.bjc-studio-shape-question-mark .bjc-studio-media {
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M22 28C22 10 36 2 53 2c19 0 32 10 32 27 0 14-8 21-18 27-8 5-11 8-11 17H38c0-17 7-23 17-29 8-5 12-8 12-15 0-7-5-12-14-12-10 0-15 6-15 15H22V28zm14 58c0-7 5-12 12-12s12 5 12 12-5 12-12 12-12-5-12-12z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M22 28C22 10 36 2 53 2c19 0 32 10 32 27 0 14-8 21-18 27-8 5-11 8-11 17H38c0-17 7-23 17-29 8-5 12-8 12-15 0-7-5-12-14-12-10 0-15 6-15 15H22V28zm14 58c0-7 5-12 12-12s12 5 12 12-5 12-12 12-12-5-12-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bjc-studio-shape-arrow-right .bjc-studio-media { clip-path:polygon(2% 23%,58% 23%,58% 5%,98% 50%,58% 95%,58% 77%,2% 77%); }
.bjc-studio-shape-arrow-left .bjc-studio-media { clip-path:polygon(98% 23%,42% 23%,42% 5%,2% 50%,42% 95%,42% 77%,98% 77%); }
.bjc-studio-shape-diamond .bjc-studio-media { clip-path:polygon(50% 2%,98% 50%,50% 98%,2% 50%); }
.bjc-studio-shape-oval .bjc-studio-media { border-radius:50%; }
.bjc-studio-shape-arch .bjc-studio-media { border-radius:50% 50% 10px 10px / 34% 34% 10px 10px; }
.bjc-studio-shape-shield .bjc-studio-media { clip-path:polygon(50% 2%,94% 17%,87% 68%,50% 98%,13% 68%,6% 17%); }
.bjc-studio-shape-crooked-left .bjc-studio-media { clip-path:polygon(6% 2%,98% 5%,94% 98%,2% 92%); }
.bjc-studio-shape-crooked-right .bjc-studio-media { clip-path:polygon(2% 5%,94% 2%,98% 92%,6% 98%); }

/* Shape-aware media shadow. filter:drop-shadow follows clip-path and SVG-mask silhouettes,
 * unlike box-shadow which is clipped away by polygon/masked media. */
.bjc-studio-media-shadow-yes .bjc-studio-media {
	filter:drop-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)) !important;
}

/* Geometric media fill — copied from the proven v0.12.2 contract.
 * The SHAPE is the media/embed stage itself. Direct image/video/iframe media
 * fills that silhouette; arbitrary nested shortcode/plugin internals are not
 * globally resized. */
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media > img,
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media > .bjc-studio-image,
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media > video {
	display:block; width:100% !important; height:100% !important; max-width:none; max-height:none; object-fit:cover;
}
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media.bjc-studio-embed > iframe,
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media.bjc-studio-embed > video {
	display:block; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; aspect-ratio:auto !important; margin:0 !important; border:0;
}
/* WordPress' video shortcode inserts one .wp-video wrapper. It is BJC's direct
 * media stage, so fill it without reaching into arbitrary plugin descendants. */
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media.bjc-studio-embed > .wp-video {
	display:block; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important;
}
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media.bjc-studio-embed > .wp-video > video {
	display:block; width:100% !important; height:100% !important; object-fit:cover;
}

/* Geometric shortcode shapes — exact old-system separation of responsibilities.
 * The OUTER BJC media box owns the aspect ratio, clipping/mask and overflow.
 * The INNER shortcode stage is simply made the same size as that viewport.
 * Only a direct iframe/video may be stretched to the viewport; arbitrary nested
 * plugin markup, thumbnails, icons and captions are deliberately untouched. */
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media.bjc-studio-shortcode-shell {
	min-height:0;
	overflow:hidden;
	padding:0 !important;
}
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed {
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	margin:0 !important;
	padding:0 !important;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed > iframe,
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed > video {
	display:block;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	max-height:none !important;
	margin:0 !important;
	border:0 !important;
	aspect-ratio:auto !important;
	object-fit:cover;
}

/* Core design identities.
 * Each built-in starter design is intentionally recognisable at a glance.
 * Shared controls remain authoritative and can still customise the result.
 */

/* Split — simple, open two-column composition. */
.bjc-studio-design-split-feature .bjc-studio-inner { align-items:center; }
.bjc-studio-design-split-feature .bjc-studio-media { border-radius:12px; }
.bjc-studio-design-split-feature .bjc-studio-eyebrow { letter-spacing:.16em; }

/* Reverse / Offset — an overlapping editorial card crossing the media edge. */
.bjc-studio-design-reverse-offset .bjc-studio-inner { align-items:center; }
.bjc-studio-design-reverse-offset .bjc-studio-media { position:relative; z-index:1; align-self:var(--bjc-studio-media-vertical-align); }
.bjc-studio-design-reverse-offset .bjc-studio-copy {
	align-self:center; position:relative; z-index:2; padding:clamp(1.35rem,2.6vw,2.4rem);
	background:color-mix(in srgb,var(--e-global-color-background,#fff) 92%,transparent);
	border:1px solid color-mix(in srgb,var(--bjc-studio-accent) 40%,transparent);
	border-radius:14px; box-shadow:0 22px 55px rgba(0,0,0,.14); backdrop-filter:blur(7px);
}
.bjc-studio-design-reverse-offset.bjc-studio-arrangement-media-left .bjc-studio-copy { margin-left:calc((var(--bjc-studio-gap) + clamp(1.25rem,2.5vw,2.25rem)) * -1); transform:translateX(-15%); }
.bjc-studio-design-reverse-offset.bjc-studio-arrangement-text-left .bjc-studio-copy { margin-right:calc((var(--bjc-studio-gap) + clamp(1.25rem,2.5vw,2.25rem)) * -1); transform:translateX(15%); }
.bjc-studio-design-reverse-offset.bjc-studio-arrangement-media-above .bjc-studio-copy,
.bjc-studio-design-reverse-offset.bjc-studio-arrangement-text-above .bjc-studio-copy { margin-left:0; margin-right:0; margin-top:calc((var(--bjc-studio-gap) + clamp(.75rem,2vw,1.5rem)) * -1); }

/* Stacked — media stage above a deliberately narrow reading block. */
.bjc-studio-section.bjc-studio-design-stacked-feature { --bjc-studio-text-align-box:center; --bjc-studio-text-align:center; --bjc-studio-media-align:center;
	--bjc-studio-media-vertical-align:center; }
.bjc-studio-section.bjc-studio-design-stacked-feature .bjc-studio-inner { display:flex; flex-direction:column; align-items:stretch; gap:var(--bjc-studio-gap); }
.bjc-studio-design-stacked-feature .bjc-studio-media { order:1; width:min(var(--bjc-studio-media-width),100%); max-width:1100px; align-self:var(--bjc-studio-media-align,center); box-shadow:0 16px 42px rgba(0,0,0,.10); }
.bjc-studio-design-stacked-feature .bjc-studio-inner > .bjc-studio-media { margin-inline:auto; }
.bjc-studio-design-stacked-feature .bjc-studio-copy { order:2; width:min(var(--bjc-studio-text-width),760px); align-self:var(--bjc-studio-text-align-box); padding-top:1.15rem; border-top:2px solid color-mix(in srgb,var(--bjc-studio-accent) 45%,transparent); }

/* Clean Editorial — restrained publication treatment with serif headline and rule. */
.bjc-studio-design-editorial-reading { border-top:1px solid color-mix(in srgb,var(--bjc-studio-accent) 28%,transparent); border-bottom:1px solid color-mix(in srgb,var(--bjc-studio-accent) 18%,transparent); }
.bjc-studio-design-editorial-reading .bjc-studio-inner { align-items:start; padding-block:clamp(.9rem,2vw,1.8rem); }
.bjc-studio-design-editorial-reading .bjc-studio-copy { border-left:4px solid var(--bjc-studio-accent); padding:clamp(.3rem,1vw,.8rem) 0 clamp(.3rem,1vw,.8rem) clamp(1.1rem,2.2vw,2rem); }
.bjc-studio-design-editorial-reading .bjc-studio-heading { font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.15rem,4vw,4.2rem); line-height:1.02; font-weight:500; }
.bjc-studio-design-editorial-reading .bjc-studio-eyebrow { font-size:.7rem; }

/* Magazine Feature — boxed publication cover treatment with strong masthead line. */
.bjc-studio-design-magazine-feature {
	background:linear-gradient(135deg,color-mix(in srgb,var(--bjc-studio-accent) 7%,#fff),#fff 48%,color-mix(in srgb,var(--bjc-studio-accent) 3%,#fff));
	border:1px solid color-mix(in srgb,var(--bjc-studio-accent) 24%,#ccc); box-shadow:0 9px 26px rgba(0,0,0,.07);
}
.bjc-studio-design-magazine-feature .bjc-studio-inner { padding:clamp(1.4rem,3vw,3rem); }
.bjc-studio-design-magazine-feature .bjc-studio-copy { border-top:8px solid var(--bjc-studio-accent); border-bottom:1px solid color-mix(in srgb,var(--bjc-studio-accent) 28%,transparent); padding:clamp(1rem,2vw,1.7rem) 0 1.2rem; }
.bjc-studio-design-magazine-feature .bjc-studio-heading { font-size:clamp(2.6rem,5vw,5.6rem); line-height:.9; letter-spacing:-.035em; }
.bjc-studio-design-magazine-feature .bjc-studio-eyebrow { display:inline-block; padding:.28rem .62rem; background:var(--bjc-studio-accent); color:#fff; letter-spacing:.11em; }

/* Highlighted Story — soft feature panel with a broad angled highlighter band. */
.bjc-studio-design-highlighted-story { isolation:isolate; overflow:hidden; border-radius:18px; background:color-mix(in srgb,var(--bjc-studio-accent) 4%,transparent); }
.bjc-studio-design-highlighted-story::before { content:''; position:absolute; z-index:0; left:-6%; right:-6%; top:31%; height:39%; background:color-mix(in srgb,var(--bjc-studio-accent) 16%,transparent); transform:rotate(-2deg); pointer-events:none; }
.bjc-studio-design-highlighted-story .bjc-studio-inner { position:relative; z-index:1; padding:clamp(1.2rem,3vw,3.2rem); }
.bjc-studio-design-highlighted-story .bjc-studio-copy { background:color-mix(in srgb,#fff 76%,transparent); padding:clamp(1.25rem,3vw,3rem); border-radius:16px; box-shadow:0 12px 34px rgba(0,0,0,.065); }
.bjc-studio-design-highlighted-story .bjc-studio-eyebrow { display:inline-block; padding:.28rem .62rem; border:1px solid var(--bjc-studio-accent); border-radius:999px; }

/* Book / Product Stage — pedestal-like showcase with depth below the product. */
.bjc-studio-design-book-product-stage { background:radial-gradient(ellipse at 28% 82%,color-mix(in srgb,var(--bjc-studio-accent) 16%,transparent),transparent 38%),linear-gradient(145deg,color-mix(in srgb,var(--bjc-studio-accent) 8%,transparent),transparent 58%); border-radius:20px; }
.bjc-studio-design-book-product-stage .bjc-studio-inner { padding:clamp(1.6rem,4vw,4rem); align-items:end; max-width:min(100%,1200px); margin-inline:auto; }
.bjc-studio-design-book-product-stage .bjc-studio-media { filter:drop-shadow(0 24px 20px rgba(0,0,0,.23)); }
.bjc-studio-design-book-product-stage.bjc-studio-shape-natural .bjc-studio-media,
.bjc-studio-design-book-product-stage.bjc-studio-shape-rounded .bjc-studio-media { overflow:visible; }
.bjc-studio-design-book-product-stage:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media { overflow:hidden; }
.bjc-studio-design-book-product-stage.bjc-studio-shape-natural .bjc-studio-media::after,
.bjc-studio-design-book-product-stage.bjc-studio-shape-rounded .bjc-studio-media::after { content:''; position:absolute; left:7%; right:7%; bottom:-18px; height:23px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.34),transparent 70%); z-index:-1; }
.bjc-studio-design-book-product-stage .bjc-studio-copy { padding:clamp(1rem,2vw,1.8rem); border-left:5px solid var(--bjc-studio-accent); background:color-mix(in srgb,var(--e-global-color-background,#fff) 78%,transparent); box-shadow:0 12px 30px rgba(0,0,0,.07); }

/* Plugin Feature — technical card, visibly different from the book stage. */
.bjc-studio-design-plugin-feature .bjc-studio-inner { padding:clamp(1.5rem,3vw,2.8rem); border:1px solid color-mix(in srgb,var(--bjc-studio-accent) 34%,rgba(0,0,0,.10)); border-radius:20px; box-shadow:0 16px 44px rgba(0,0,0,.07), inset 0 0 0 5px color-mix(in srgb,var(--bjc-studio-accent) 4%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--bjc-studio-accent) 4%,#fff),#fff); }
.bjc-studio-design-plugin-feature .bjc-studio-media { border:1px solid color-mix(in srgb,var(--bjc-studio-accent) 62%,transparent); background:color-mix(in srgb,var(--bjc-studio-accent) 5%,transparent); }
.bjc-studio-design-plugin-feature.bjc-studio-shape-natural .bjc-studio-media,
.bjc-studio-design-plugin-feature.bjc-studio-shape-rounded .bjc-studio-media { padding:clamp(.7rem,1.5vw,1.1rem); border-radius:14px; }
.bjc-studio-design-plugin-feature:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media { padding:0; border:0; }
.bjc-studio-design-plugin-feature .bjc-studio-copy::before { content:''; display:block; width:78px; height:5px; margin-bottom:1rem; background:linear-gradient(90deg,var(--bjc-studio-accent) 0 58%,transparent 58% 68%,var(--bjc-studio-accent) 68% 82%,transparent 82% 90%,var(--bjc-studio-accent) 90%); border-radius:999px; }


/* Shape authority: design-specific media styling must never override the selected shape. */
.bjc-studio-section.bjc-studio-shape-circle .bjc-studio-media {
	aspect-ratio:1 !important;
	border-radius:50% !important;
	overflow:hidden !important;
}
.bjc-studio-section.bjc-studio-shape-oval .bjc-studio-media {
	aspect-ratio:1.35/1 !important;
	border-radius:50% !important;
	overflow:hidden !important;
}
.bjc-studio-section.bjc-studio-shape-arch .bjc-studio-media {
	aspect-ratio:4/5 !important;
	border-radius:50% 50% 9% 9% / 38% 38% 9% 9% !important;
	overflow:hidden !important;
}
.bjc-studio-section.bjc-studio-shape-circle .bjc-studio-media > img,
.bjc-studio-section.bjc-studio-shape-circle .bjc-studio-media > video,
.bjc-studio-section.bjc-studio-shape-oval .bjc-studio-media > img,
.bjc-studio-section.bjc-studio-shape-oval .bjc-studio-media > video,
.bjc-studio-section.bjc-studio-shape-arch .bjc-studio-media > img,
.bjc-studio-section.bjc-studio-shape-arch .bjc-studio-media > video {
	display:block !important;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	max-height:none !important;
}

/* Frames — canonical frame mode rebuilt from the finished v0.12.2 frame system.
 * A frame is media/live content first, with optional caption + CTA underneath.
 * The frame grows naturally with the content; no fixed height and no cropping.
 */
.bjc-studio-frame-design {
    --bjc-studio-frame-accent: var(--bjc-studio-accent);
    --bjc-studio-frame-background: transparent;
    --bjc-studio-frame-padding: 14px;
    --bjc-studio-frame-thickness: 2px;
    --bjc-studio-frame-radius: 10px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}
.bjc-studio-frame-design .bjc-studio-frame-layout {
    display: block !important;
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
}
.bjc-studio-frame-box,
.bjc-studio-frame-inner {
    position: relative;
    width: 100%;
    min-width: 0;
}
.bjc-studio-frame-inner {
    padding: var(--bjc-studio-frame-padding);
    background: var(--bjc-studio-frame-background);
}
.bjc-studio-frame-design .bjc-studio-media {
    display: block !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
}
/* Natural frame media keeps the original finished frame behaviour: full-width,
 * uncropped content. Geometric shapes intentionally opt into the shared shape
 * system below and can therefore be resized/aligned with Media Formatting. */
.bjc-studio-frame-design.bjc-studio-shape-natural .bjc-studio-media {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    overflow: visible !important;
}
.bjc-studio-frame-design:not(.bjc-studio-shape-natural) .bjc-studio-media {
    width: min(var(--bjc-studio-media-width, 48%), 100%) !important;
    overflow: hidden !important;
}
.bjc-studio-frame-design .bjc-studio-media > img,
.bjc-studio-frame-design .bjc-studio-media > .bjc-studio-image,
.bjc-studio-frame-design .bjc-studio-media > video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
}
.bjc-studio-frame-design:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media > img,
.bjc-studio-frame-design:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded) .bjc-studio-media > video {
    height: 100% !important;
    object-fit: cover !important;
}
.bjc-studio-frame-design .bjc-studio-media.bjc-studio-embed,
.bjc-studio-frame-design .bjc-studio-media.bjc-studio-shortcode-shell,
.bjc-studio-frame-design .bjc-studio-frame-rich-text {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
.bjc-studio-frame-design .bjc-studio-media.bjc-studio-embed > iframe,
.bjc-studio-frame-design .bjc-studio-media.bjc-studio-embed > video,
.bjc-studio-frame-design .bjc-studio-media.bjc-studio-embed > .wp-video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0;
}

/* Gallery Frame = old Clean Gallery frame. */
.bjc-studio-design-gallery-frame .bjc-studio-frame-box {
    padding: 5px;
    border: var(--bjc-studio-frame-thickness) solid var(--bjc-studio-frame-accent);
    border-radius: var(--bjc-studio-frame-radius);
}
.bjc-studio-design-gallery-frame .bjc-studio-frame-inner {
    border: 1px solid color-mix(in srgb, var(--bjc-studio-frame-accent) 48%, transparent);
    border-radius: max(0px, calc(var(--bjc-studio-frame-radius) - 5px));
}

/* Basic Frame = restrained single-frame starter. */
.bjc-studio-design-basic-frame .bjc-studio-frame-box {
    padding: 0;
    border: var(--bjc-studio-frame-thickness) solid var(--bjc-studio-frame-accent);
    border-radius: var(--bjc-studio-frame-radius);
    overflow: hidden;
}
.bjc-studio-design-basic-frame .bjc-studio-frame-inner {
    border-radius: max(0px, calc(var(--bjc-studio-frame-radius) - var(--bjc-studio-frame-thickness)));
}

.bjc-studio-frame-footer {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    margin: 0;
    padding-top: clamp(8px, 1vw, 14px);
    line-height: 1.35;
}
.bjc-studio-frame-footer-below {
    padding-inline: var(--bjc-studio-frame-padding);
    padding-bottom: 0;
}
.bjc-studio-frame-caption {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}
.bjc-studio-frame-cta {
    display: inline-block;
    margin-top: 5px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bjc-studio-frame-accent);
    text-decoration: none;
}
a.bjc-studio-frame-cta:hover,
a.bjc-studio-frame-cta:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bjc-studio-frame-cta span[aria-hidden="true"] {
    display: inline-block;
    margin-left: .18em;
    transition: transform .18s ease;
}
a.bjc-studio-frame-cta:hover span[aria-hidden="true"],
a.bjc-studio-frame-cta:focus span[aria-hidden="true"] { transform: translateX(.18em); }

.bjc-studio-frame-rich-text {
    color: inherit;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.bjc-studio-frame-rich-text > :first-child { margin-top: 0; }
.bjc-studio-frame-rich-text > :last-child { margin-bottom: 0; }
.bjc-studio-frame-rich-text a {
    color: var(--bjc-studio-frame-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .bjc-studio-frame-design { --bjc-studio-frame-padding: 10px; }
    .bjc-studio-frame-footer { padding-top: 8px; }
}

/* 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-accent); border-top:2px solid var(--bjc-studio-accent); }
.bjc-studio-decoration-corner-lines::after { right:12px; bottom:12px; border-right:2px solid var(--bjc-studio-accent); border-bottom:2px solid 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-accent);
    box-shadow:18px 0 0 color-mix(in srgb,var(--bjc-studio-accent) 72%,transparent), 36px 0 0 color-mix(in srgb,var(--bjc-studio-accent) 46%,transparent), 9px 16px 0 color-mix(in srgb,var(--bjc-studio-accent) 58%,transparent), 27px 16px 0 color-mix(in srgb,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-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-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-align-box); }
	.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;
}