/**
 * KreoRD WordPress Design & Plugin Lab
 * Frontend UI components and layout system.
 *
 * Prefix: krd-
 * Version: 1.0.0
 */

/* =========================================================
   RS-BLOCK-01: Shared block states and custom properties

   Every KreoRD block receives explicit state classes from PHP and
   editor.js. The frontend PHP wrapper is the only visual surface for
   dynamic blocks; Gutenberg's ServerSideRender shell remains neutral.

   This replaces fragile attribute selectors such as:
   [style*="--krd-block-bg"]
========================================================= */

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page) {
	--krd-rsb-surface-bg: transparent;
	--krd-rsb-surface-border-width: 0px;
	--krd-rsb-surface-border-color: transparent;
	--krd-rsb-surface-radius: 0px;
	--krd-rsb-surface-shadow: none;
	--krd-rsb-surface-padding-top: 0px;
	--krd-rsb-surface-padding-right: 0px;
	--krd-rsb-surface-padding-bottom: 0px;
	--krd-rsb-surface-padding-left: 0px;
}

/* Actual surface owner: PHP wrapper on frontend, saved layout wrappers for static blocks. */
:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-surface {
	background: var(--krd-block-bg, var(--krd-rsb-surface-bg));
	border: var(--krd-block-border-width, var(--krd-rsb-surface-border-width)) solid var(--krd-block-border-color, var(--krd-rsb-surface-border-color));
	border-radius: var(--krd-block-radius, var(--krd-rsb-surface-radius));
	box-shadow: var(--krd-block-shadow, var(--krd-rsb-surface-shadow));
	padding:
		var(--krd-block-padding-top, var(--krd-rsb-surface-padding-top))
		var(--krd-block-padding-right, var(--krd-rsb-surface-padding-right))
		var(--krd-block-padding-bottom, var(--krd-rsb-surface-padding-bottom))
		var(--krd-block-padding-left, var(--krd-rsb-surface-padding-left));
}

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-color {
	color: var(--krd-block-text);
}

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-margin {
	margin-top: var(--krd-block-margin-top);
	margin-right: var(--krd-block-margin-right);
	margin-bottom: var(--krd-block-margin-bottom);
	margin-left: var(--krd-block-margin-left);
}

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-max-width {
	max-width: var(--krd-block-max-width);
	margin-right: var(--krd-block-margin-right, auto);
	margin-left: var(--krd-block-margin-left, auto);
}

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-align {
	text-align: var(--krd-block-text-align);
}

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-color :where(
	.krd-rs-title,
	.krd-rs-excerpt,
	.krd-rs-breadcrumbs,
	.krd-rs-breadcrumbs a,
	.krd-rs-hero-meta,
	.krd-rs-hero-meta__item,
	.krd-rs-hero-rating,
	.krd-rs-btn,
	.krd-rs-photo-print,
	.krd-rs-section-title,
	.krd-rs-related__title,
	.krd-rs-related-card__title,
	.krd-rs-comment-form-title,
	.krd-rs-comment__top strong,
	.krd-rs-ingredient-group__title,
	.krd-rs-step__body h3
) {
	color: var(--krd-block-text);
}

:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-align :where(
	.krd-rs-title,
	.krd-rs-excerpt,
	.krd-rs-breadcrumbs,
	.krd-rs-hero-meta,
	.krd-rs-btn,
	.krd-rs-photo-print,
	.krd-rs-section-title,
	.krd-rs-related__title,
	.krd-rs-related-card__title
) {
	text-align: var(--krd-block-text-align);
}

/* Dynamic Gutenberg preview shell carries attributes for serialization only.
   Its PHP-rendered child owns every visual surface. */
.editor-styles-wrapper .krd-rsb-dynamic-block.krd-rsb-has-surface {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* =========================================================
   RS-BLOCK-02: Manual typography overrides

   These utilities must work even when the font family is inherited
   from global KreoRD typography or from the active theme.
========================================================= */


:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-family,
:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-family :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
	font-family: var(--krd-block-font-family) !important;
}

:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-size,
:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-size :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
	font-size: var(--krd-block-font-size) !important;
}

:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-weight,
:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-weight :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
	font-weight: var(--krd-block-font-weight) !important;
}

:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-line-height,
:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-line-height :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
	line-height: var(--krd-block-line-height) !important;
}

:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-typography-theme,
:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-typography-theme :where(.krd-rs-title, .krd-rs-excerpt, .krd-rs-breadcrumbs, .krd-rs-hero-meta, .krd-rs-btn, .krd-rs-section-title) {
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}



/* =========================================================
   RS-BLOCK-03: Dynamic block wrappers and surface ownership

   The PHP wrapper owns a customized visual surface. Card components keep
   their native design until a surface override exists; then their default
   background, border, radius, shadow and padding are transferred to the
   wrapper as fallbacks. This keeps partial settings predictable.
========================================================= */

.krd-rsb-block .krd-rs-rating-stars .is-active,
.krd-rsb-block .krd-rs-rating-stars--small .is-active {
	color: var(--krd-rs-gold, #d9aa62);
}

/* Gutenberg-only empty rating state.
   The public recipe keeps the rating hidden until its first review exists. */
.krd-rs-hero-rating--preview {
	cursor: default;
	color: var(--krd-meta-color, #70665d);
	pointer-events: none;
}

.krd-rs-hero-rating--preview .krd-rs-rating-stars {
	color: #d8d1c7;
}

.krd-rs-hero-rating--preview > span:last-child {
	font-size: inherit;
	font-weight: 600;
}

.editor-styles-wrapper .krd-rsb-dynamic-block--rating {
	margin-bottom: 0;
}

.editor-styles-wrapper .krd-rsb-dynamic-block--rating .krd-rs-hero-rating--preview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 2px 0;
}

.krd-rsb-block--hero-classic {
	display: block;
}

.krd-rsb-block--breadcrumbs .krd-rs-breadcrumbs,
.krd-rsb-block--title .krd-rs-title,
.krd-rsb-block--excerpt .krd-rs-excerpt,
.krd-rsb-block--time-servings .krd-rs-hero-meta,
.krd-rsb-block--rating .krd-rs-hero-meta,
.krd-rsb-block--quick-nav .krd-rs-actions {
	margin-bottom: 0;
}

/* Recipe card defaults transferred to the wrapper when a visual override exists. */
:where(
	.krd-rsb-block--story,
	.krd-rsb-block--ingredients,
	.krd-rsb-block--steps,
	.krd-rsb-block--comments,
	.krd-rsb-block--glance,
	.krd-rsb-block--share
) {
	--krd-rsb-surface-bg: var(--krd-rs-surface);
	--krd-rsb-surface-border-width: 1px;
	--krd-rsb-surface-border-color: rgba(77, 58, 40, 0.08);
	--krd-rsb-surface-radius: var(--krd-rs-radius-xl);
	--krd-rsb-surface-shadow: none;
	--krd-rsb-surface-padding-top: 34px;
	--krd-rsb-surface-padding-right: 34px;
	--krd-rsb-surface-padding-bottom: 34px;
	--krd-rsb-surface-padding-left: 34px;
}

.krd-rsb-block--facts {
	--krd-rsb-surface-bg: var(--krd-rs-surface);
	--krd-rsb-surface-border-width: 1px;
	--krd-rsb-surface-border-color: rgba(77, 58, 40, 0.08);
	--krd-rsb-surface-radius: var(--krd-rs-radius-xl);
	--krd-rsb-surface-shadow: var(--krd-rs-shadow);
	--krd-rsb-surface-padding-top: 26px;
	--krd-rsb-surface-padding-right: 24px;
	--krd-rsb-surface-padding-bottom: 26px;
	--krd-rsb-surface-padding-left: 24px;
}

.krd-rsb-block--nutrition {
	--krd-rsb-surface-bg: var(--krd-rs-surface);
	--krd-rsb-surface-border-width: 1px;
	--krd-rsb-surface-border-color: rgba(31, 35, 40, 0.08);
	--krd-rsb-surface-radius: 26px;
	--krd-rsb-surface-shadow: none;
	--krd-rsb-surface-padding-top: 32px;
	--krd-rsb-surface-padding-right: 32px;
	--krd-rsb-surface-padding-bottom: 32px;
	--krd-rsb-surface-padding-left: 32px;
}

.krd-rsb-block--featured-image {
	--krd-rsb-surface-bg: var(--krd-rs-surface-soft);
	--krd-rsb-surface-border-width: 0px;
	--krd-rsb-surface-border-color: transparent;
	--krd-rsb-surface-radius: var(--krd-rs-radius-xl);
	--krd-rsb-surface-shadow: var(--krd-rs-shadow-strong);
	--krd-rsb-surface-padding-top: 0px;
	--krd-rsb-surface-padding-right: 0px;
	--krd-rsb-surface-padding-bottom: 0px;
	--krd-rsb-surface-padding-left: 0px;
	line-height: 0;
}

.krd-rsb-block--featured-image img,
.editor-styles-wrapper .krd-rsb-dynamic-block--featured-image img,
.krd-rsb-hero-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* The split-hero group is a positioning shell only. The image block owns
   its radius and shadow, so its individual styling works in Gutenberg and
   on the frontend. */
.krd-rsb-hero-media {
	position: relative;
	line-height: 0;
	overflow: visible;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.krd-rsb-hero-media > .krd-rsb-block--featured-image:not(.krd-rsb-has-surface),
.editor-styles-wrapper .krd-rsb-hero-media > .krd-rsb-dynamic-block--featured-image > .krd-rsb-block--featured-image:not(.krd-rsb-has-surface) {
	overflow: hidden;
	border-radius: var(--krd-rsb-surface-radius);
	background: var(--krd-rsb-surface-bg);
	box-shadow: var(--krd-rsb-surface-shadow);
}

.krd-rsb-block--featured-image.krd-rsb-has-surface {
	overflow: hidden;
}

.krd-rsb-block--featured-image.krd-rsb-has-surface > img {
	border-radius: 0;
}

/* Card roots surrender their own surface only after the wrapper owns one. */
.krd-rsb-block.krd-rsb-has-surface > :is(.krd-rs-card, .krd-rs-facts) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

:where(
	.krd-rsb-block--facts,
	.krd-rsb-block--story,
	.krd-rsb-block--ingredients,
	.krd-rsb-block--steps,
	.krd-rsb-block--comments,
	.krd-rsb-block--glance,
	.krd-rsb-block--nutrition,
	.krd-rsb-block--share
).krd-rsb-has-surface {
	overflow: hidden;
}

.krd-rsb-block--facts.krd-rsb-has-surface > .krd-rs-facts {
	margin: 0 !important;
}

/* The page layout preserves its established spacing when only one surface
   setting is customized. */
.krd-rs-page {
	--krd-rsb-surface-padding-top: 38px;
	--krd-rsb-surface-padding-right: 20px;
	--krd-rsb-surface-padding-bottom: 72px;
	--krd-rsb-surface-padding-left: 20px;
}

:where(.krd-layout-content, .entry-content) .is-hidden-on-frontend:not(.block-editor-block-list__block) {
	display: none !important;
}

@media (max-width: 640px) {
	.krd-rsb-block--nutrition {
		--krd-rsb-surface-radius: 24px;
		--krd-rsb-surface-padding-top: 24px;
		--krd-rsb-surface-padding-right: 24px;
		--krd-rsb-surface-padding-bottom: 24px;
		--krd-rsb-surface-padding-left: 24px;
	}
}

@media (max-width: 560px) {
	:where(
		.krd-rsb-block--story,
		.krd-rsb-block--ingredients,
		.krd-rsb-block--steps,
		.krd-rsb-block--comments,
		.krd-rsb-block--glance,
		.krd-rsb-block--share
	) {
		--krd-rsb-surface-radius: 22px;
		--krd-rsb-surface-padding-top: 24px;
		--krd-rsb-surface-padding-right: 20px;
		--krd-rsb-surface-padding-bottom: 24px;
		--krd-rsb-surface-padding-left: 20px;
	}

	.krd-rsb-block--facts {
		--krd-rsb-surface-padding-top: 22px;
		--krd-rsb-surface-padding-right: 14px;
		--krd-rsb-surface-padding-bottom: 22px;
		--krd-rsb-surface-padding-left: 14px;
	}

	.krd-rsb-block--nutrition {
		--krd-rsb-surface-radius: 24px;
		--krd-rsb-surface-padding-top: 24px;
		--krd-rsb-surface-padding-right: 24px;
		--krd-rsb-surface-padding-bottom: 24px;
		--krd-rsb-surface-padding-left: 24px;
	}

	.krd-rs-page {
		--krd-rsb-surface-padding-top: 24px;
		--krd-rsb-surface-padding-right: 14px;
		--krd-rsb-surface-padding-bottom: 52px;
		--krd-rsb-surface-padding-left: 14px;
	}
}

/* =========================================================
   RS-BLOCK-04: Split hero layout
========================================================= */


.krd-rsb-hero-layout {
	position: relative;
}

.krd-rsb-hero-content {
	min-width: 0;
}

.krd-rsb-hero-media {
	position: relative;
	line-height: 0;
}

.krd-rsb-hero-media .krd-rsb-block {
	margin: 0;
}

.krd-rsb-hero-layout--image-left .krd-rsb-hero-content {
	order: 2;
}

.krd-rsb-hero-layout--image-left .krd-rsb-hero-media {
	order: 1;
}

.krd-rsb-hero-layout--stacked {
	grid-template-columns: minmax(0, 1fr);
}

.krd-rsb-hero-layout--stacked .krd-rsb-hero-media {
	max-width: 860px;
}

.krd-rsb-hero-layout--background {
	--krd-rsb-surface-padding-top: 42px;
	--krd-rsb-surface-padding-right: 42px;
	--krd-rsb-surface-padding-bottom: 42px;
	--krd-rsb-surface-padding-left: 42px;
	--krd-rsb-surface-radius: var(--krd-rs-radius-xl, 20px);

	grid-template-columns: minmax(0, 1fr);
	min-height: 560px;
	align-items: end;
	padding:
		var(--krd-block-padding-top, var(--krd-rsb-surface-padding-top))
		var(--krd-block-padding-right, var(--krd-rsb-surface-padding-right))
		var(--krd-block-padding-bottom, var(--krd-rsb-surface-padding-bottom))
		var(--krd-block-padding-left, var(--krd-rsb-surface-padding-left));
	border-radius: var(--krd-block-radius, var(--krd-rsb-surface-radius));
	overflow: hidden;
}

.krd-rsb-hero-layout--background .krd-rsb-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}

.krd-rsb-hero-layout--background .krd-rsb-block--featured-image,
.krd-rsb-hero-layout--background .krd-rsb-block--featured-image img,
.krd-rsb-hero-layout--background .krd-rsb-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.krd-rsb-hero-layout--background .krd-rsb-hero-media > .krd-rsb-block--featured-image:not(.krd-rsb-has-surface) {
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.krd-rsb-hero-layout--background .krd-rsb-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.12));
	pointer-events: none;
}

.krd-rsb-hero-layout--background .krd-rsb-hero-content {
	position: relative;
	z-index: 2;
	max-width: 620px;
}

.krd-rsb-hero-layout--background .krd-rsb-block--print-button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
}

@media (max-width: 1080px) {
	.krd-rsb-hero-layout--image-left .krd-rsb-hero-content,
	.krd-rsb-hero-layout--image-left .krd-rsb-hero-media {
		order: initial;
	}

	.krd-rsb-hero-layout--background {
		--krd-rsb-surface-padding-top: 28px;
		--krd-rsb-surface-padding-right: 28px;
		--krd-rsb-surface-padding-bottom: 28px;
		--krd-rsb-surface-padding-left: 28px;
		min-height: 460px;
	}
}

@media (max-width: 560px) {
	.krd-rsb-hero-layout--background {
		--krd-rsb-surface-padding-top: 20px;
		--krd-rsb-surface-padding-right: 20px;
		--krd-rsb-surface-padding-bottom: 20px;
		--krd-rsb-surface-padding-left: 20px;
		min-height: 420px;
	}
}

/* =========================================================
   RS-BLOCK-05: Editor preview shell
========================================================= */

.editor-styles-wrapper .krd-rsb-layout-editor {
	position: relative;
	border: 1px dashed rgba(77, 58, 40, 0.24);
	border-radius: 22px;
	background: #fff;
}

.krd-rsb-layout-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid rgba(77, 58, 40, 0.10);
	border-radius: 14px;
	background: #fbf6ee;
	color: #1e2228;
	font-size: 13px;
	line-height: 1.4;
}

.krd-rsb-layout-notice strong {
	font-size: 13px;
	font-weight: 800;
}

.krd-rsb-layout-notice span {
	color: #70665d;
}

.editor-styles-wrapper .krd-rsb-dynamic-block {
	position: relative;
	margin: 0 0 18px;
}

.editor-styles-wrapper .krd-rsb-dynamic-block > .components-placeholder {
	min-height: 100px;
}

.krd-rsb-editor-label {
	display: none !important;
}

.krd-rsb-placeholder {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px dashed rgba(77, 58, 40, 0.22);
	border-radius: 16px;
	background: #fbf6ee;
	color: #1e2228;
}

.krd-rsb-placeholder strong {
	font-size: 14px;
	font-weight: 800;
}

.krd-rsb-placeholder span {
	color: #70665d;
	font-size: 13px;
	line-height: 1.5;
}

.krd-rsb-placeholder--error {
	border-color: rgba(184, 28, 28, 0.26);
	background: #fff1f1;
}

.editor-styles-wrapper .is-hidden-on-frontend {
	display: block !important;
	opacity: 0.48;
	outline: 1px dashed rgba(184, 123, 63, 0.45);
}

.editor-styles-wrapper .is-hidden-on-frontend::before {
	content: "Hidden on frontend";
	display: inline-flex;
	width: fit-content;
	margin: 0 0 8px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #b87b3f;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* Keep core group wrappers visually close to frontend layout. */
.editor-styles-wrapper .krd-rs-content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: var(--krd-rs-gap, 32px);
	align-items: start;
}

.editor-styles-wrapper .krd-rs-main {
	display: grid;
	gap: 0;
}

.editor-styles-wrapper .krd-rs-sidebar {
	display: grid;
	gap: 22px;
	position: static;
}

@media (max-width: 1080px) {
	.editor-styles-wrapper .krd-rs-content-grid {
		grid-template-columns: 1fr;
	}

	.editor-styles-wrapper .krd-rs-sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.editor-styles-wrapper .krd-rs-sidebar {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   RS-BLOCK-06: Clean Gutenberg selection state
========================================================= */

.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"]::before,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"]::after,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].is-selected::before,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].is-selected::after,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].has-child-selected::before,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].has-child-selected::after,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].is-highlighted::before,
.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].is-highlighted::after,
.editor-styles-wrapper .block-editor-block-list__block.krd-rsb-hero-content.has-child-selected::before,
.editor-styles-wrapper .block-editor-block-list__block.krd-rsb-hero-content.has-child-selected::after,
.editor-styles-wrapper .block-editor-block-list__block.krd-rsb-hero-media.has-child-selected::before,
.editor-styles-wrapper .block-editor-block-list__block.krd-rsb-hero-media.has-child-selected::after,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-content-grid.has-child-selected::before,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-content-grid.has-child-selected::after,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-main.has-child-selected::before,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-main.has-child-selected::after,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-sidebar.has-child-selected::before,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-sidebar.has-child-selected::after {
	box-shadow: none !important;
	outline: 0 !important;
}

.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].is-selected {
	outline: 1px solid rgba(56, 88, 233, 0.55) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.08) !important;
}

.editor-styles-wrapper .block-editor-block-list__block[data-type^="kreord/recipe-"].has-child-selected,
.editor-styles-wrapper .block-editor-block-list__block.krd-rsb-hero-content.has-child-selected,
.editor-styles-wrapper .block-editor-block-list__block.krd-rsb-hero-media.has-child-selected,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-content-grid.has-child-selected,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-main.has-child-selected,
.editor-styles-wrapper .block-editor-block-list__block.krd-rs-sidebar.has-child-selected {
	outline: 0 !important;
	box-shadow: none !important;
}

/* =========================================================
   RS-BLOCK-07: Inspector controls
========================================================= */

.krd-rsb-inspector-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 0 -16px 14px;
	padding: 12px 12px 10px;
	border-bottom: 1px solid #dcdcde;
	background: #f6f7f7;
}

.krd-rsb-inspector-tabs__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 7px 8px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #1e2228;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.krd-rsb-inspector-tabs__button:hover {
	border-color: #dcdcde;
	background: #fff;
}

.krd-rsb-inspector-tabs__button.is-active {
	border-color: #1e2228;
	background: #fff;
	box-shadow: inset 0 -3px 0 #3858e9;
}

.krd-rsb-toggle-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.krd-rsb-toggle-grid__item {
	padding: 9px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
}

.krd-rsb-toggle-grid__item .components-base-control,
.krd-rsb-toggle-grid__item .components-toggle-control,
.krd-rsb-toggle-grid__item .components-base-control__field {
	margin-bottom: 0;
}

.krd-rsb-control-separator {
	width: 100%;
	height: 1px;
	margin: 14px 0;
	background: #dcdcde;
}

.krd-rsb-color-control {
	margin-bottom: 18px;
}

.krd-rsb-color-control__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.krd-rsb-color-control__head .krd-rsb-box-control__label {
	margin-bottom: 0;
}

.krd-rsb-color-reset-all {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 10px;
}

.krd-rsb-color-reset-all .components-button {
	min-height: 30px;
	padding: 0 10px;
	border-color: #c3c4c7;
	color: #3858e9;
	font-size: 12px;
	font-weight: 700;
}

.krd-rsb-color-reset-all .components-button:hover,
.krd-rsb-color-reset-all .components-button:focus-visible {
	border-color: #3858e9;
	color: #1d3bc9;
}

.krd-rsb-color-control__reset {
	min-height: 28px;
	padding: 0 8px;
	color: #3858e9;
	font-size: 12px;
	font-weight: 700;
}

.krd-rsb-color-control .components-color-palette {
	margin-top: 0;
}

.krd-rsb-box-control {
	margin-bottom: 18px;
}

.krd-rsb-box-control__label {
	margin-bottom: 8px;
	color: #1e2228;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.krd-rsb-box-control__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.krd-rsb-box-control__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.krd-rsb-box-control__field span {
	color: #646970;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.krd-rsb-box-control__field input {
	width: 100%;
	min-height: 34px;
	padding: 4px 7px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 13px;
}

.krd-rsb-box-control__field input:focus {
	border-color: #3858e9;
	box-shadow: 0 0 0 1px #3858e9;
	outline: 2px solid transparent;
}


/* Facts bar icon controls */
.krd-rsb-fact-icon-controls {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.krd-rsb-fact-icon-control {
	padding: 13px;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #fff;
}

.krd-rsb-fact-icon-control__title {
	margin: 0 0 12px;
	color: #1e2228;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
}

.krd-rsb-fact-icon-control .components-base-control,
.krd-rsb-fact-icon-control .components-toggle-control {
	margin-bottom: 12px;
}

.krd-rsb-fact-icon-source .components-button {
	margin-bottom: 8px;
}

.krd-rsb-help-text {
	margin: 12px 0 0;
	color: #646970;
	font-size: 12px;
	line-height: 1.5;
}


/* =========================================================
   RS-BLOCK-08: Responsive block values

   Desktop is the base. Tablet overrides apply at 1024px and below;
   mobile overrides apply at 560px and below. Empty device values inherit
   the value configured for the next larger device.
========================================================= */

@media (max-width: 1024px) {
	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-surface {
		border-width: var(--krd-block-border-width-tablet, var(--krd-block-border-width, var(--krd-rsb-surface-border-width)));
		border-radius: var(--krd-block-radius-tablet, var(--krd-block-radius, var(--krd-rsb-surface-radius)));
		padding:
			var(--krd-block-padding-top-tablet, var(--krd-block-padding-top, var(--krd-rsb-surface-padding-top)))
			var(--krd-block-padding-right-tablet, var(--krd-block-padding-right, var(--krd-rsb-surface-padding-right)))
			var(--krd-block-padding-bottom-tablet, var(--krd-block-padding-bottom, var(--krd-rsb-surface-padding-bottom)))
			var(--krd-block-padding-left-tablet, var(--krd-block-padding-left, var(--krd-rsb-surface-padding-left)));
	}

	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-margin {
		margin-top: var(--krd-block-margin-top-tablet, var(--krd-block-margin-top));
		margin-right: var(--krd-block-margin-right-tablet, var(--krd-block-margin-right));
		margin-bottom: var(--krd-block-margin-bottom-tablet, var(--krd-block-margin-bottom));
		margin-left: var(--krd-block-margin-left-tablet, var(--krd-block-margin-left));
	}

	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-max-width {
		max-width: var(--krd-block-max-width-tablet, var(--krd-block-max-width));
		margin-right: var(--krd-block-margin-right-tablet, var(--krd-block-margin-right, auto));
		margin-left: var(--krd-block-margin-left-tablet, var(--krd-block-margin-left, auto));
	}

	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-align,
	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-align :where(
		.krd-rs-title,
		.krd-rs-excerpt,
		.krd-rs-breadcrumbs,
		.krd-rs-hero-meta,
		.krd-rs-btn,
		.krd-rs-photo-print,
		.krd-rs-section-title,
		.krd-rs-related__title,
		.krd-rs-related-card__title
	) {
		text-align: var(--krd-block-text-align-tablet, var(--krd-block-text-align));
	}

	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-size,
	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-size :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
		font-size: var(--krd-block-font-size-tablet, var(--krd-block-font-size)) !important;
	}

	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-weight,
	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-weight :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
		font-weight: var(--krd-block-font-weight-tablet, var(--krd-block-font-weight)) !important;
	}

	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-line-height,
	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-line-height :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
		line-height: var(--krd-block-line-height-tablet, var(--krd-block-line-height)) !important;
	}

	.krd-rs-fact__icon {
		width: var(--krd-fact-icon-size-tablet, var(--krd-fact-icon-size, 46px));
		height: var(--krd-fact-icon-size-tablet, var(--krd-fact-icon-size, 46px));
	}
}

@media (max-width: 560px) {
	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-surface {
		border-width: var(--krd-block-border-width-mobile, var(--krd-block-border-width-tablet, var(--krd-block-border-width, var(--krd-rsb-surface-border-width))));
		border-radius: var(--krd-block-radius-mobile, var(--krd-block-radius-tablet, var(--krd-block-radius, var(--krd-rsb-surface-radius))));
		padding:
			var(--krd-block-padding-top-mobile, var(--krd-block-padding-top-tablet, var(--krd-block-padding-top, var(--krd-rsb-surface-padding-top))))
			var(--krd-block-padding-right-mobile, var(--krd-block-padding-right-tablet, var(--krd-block-padding-right, var(--krd-rsb-surface-padding-right))))
			var(--krd-block-padding-bottom-mobile, var(--krd-block-padding-bottom-tablet, var(--krd-block-padding-bottom, var(--krd-rsb-surface-padding-bottom))))
			var(--krd-block-padding-left-mobile, var(--krd-block-padding-left-tablet, var(--krd-block-padding-left, var(--krd-rsb-surface-padding-left))));
	}

	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-margin {
		margin-top: var(--krd-block-margin-top-mobile, var(--krd-block-margin-top-tablet, var(--krd-block-margin-top)));
		margin-right: var(--krd-block-margin-right-mobile, var(--krd-block-margin-right-tablet, var(--krd-block-margin-right)));
		margin-bottom: var(--krd-block-margin-bottom-mobile, var(--krd-block-margin-bottom-tablet, var(--krd-block-margin-bottom)));
		margin-left: var(--krd-block-margin-left-mobile, var(--krd-block-margin-left-tablet, var(--krd-block-margin-left)));
	}

	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-max-width {
		max-width: var(--krd-block-max-width-mobile, var(--krd-block-max-width-tablet, var(--krd-block-max-width)));
		margin-right: var(--krd-block-margin-right-mobile, var(--krd-block-margin-right-tablet, var(--krd-block-margin-right, auto)));
		margin-left: var(--krd-block-margin-left-mobile, var(--krd-block-margin-left-tablet, var(--krd-block-margin-left, auto)));
	}

	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-align,
	:where(.krd-rsb-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).krd-rsb-has-text-align :where(
		.krd-rs-title,
		.krd-rs-excerpt,
		.krd-rs-breadcrumbs,
		.krd-rs-hero-meta,
		.krd-rs-btn,
		.krd-rs-photo-print,
		.krd-rs-section-title,
		.krd-rs-related__title,
		.krd-rs-related-card__title
	) {
		text-align: var(--krd-block-text-align-mobile, var(--krd-block-text-align-tablet, var(--krd-block-text-align)));
	}

	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-size,
	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-size :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
		font-size: var(--krd-block-font-size-mobile, var(--krd-block-font-size-tablet, var(--krd-block-font-size))) !important;
	}

	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-weight,
	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-font-weight :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
		font-weight: var(--krd-block-font-weight-mobile, var(--krd-block-font-weight-tablet, var(--krd-block-font-weight))) !important;
	}

	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-line-height,
	:where(.krd-rsb-block, .krd-rsb-dynamic-block, .krd-rsb-hero-layout, .krd-rsb-layout-editor, .krd-rs-page).has-krd-line-height :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong, em, b, i, li, dt, dd, label, button, input, textarea, select, figcaption) {
		line-height: var(--krd-block-line-height-mobile, var(--krd-block-line-height-tablet, var(--krd-block-line-height))) !important;
	}

	.krd-rs-fact__icon {
		width: var(--krd-fact-icon-size-mobile, var(--krd-fact-icon-size-tablet, var(--krd-fact-icon-size, 46px)));
		height: var(--krd-fact-icon-size-mobile, var(--krd-fact-icon-size-tablet, var(--krd-fact-icon-size, 46px)));
	}
}

/* =========================================================
   RS-BLOCK-09: Responsive editor controls
========================================================= */


.krd-rsb-responsive-toolbar {
	margin: 0 0 16px;
	padding: 10px;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #f6f7f7;
}

.krd-rsb-responsive-toolbar--compact {
	margin-top: 2px;
}

.krd-rsb-responsive-toolbar__head {
	display: grid;
	gap: 3px;
	margin-bottom: 9px;
}

.krd-rsb-responsive-toolbar__label {
	color: #1e2228;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.krd-rsb-responsive-toolbar__inheritance {
	color: #646970;
	font-size: 11px;
	line-height: 1.35;
}

.krd-rsb-device-switch {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.krd-rsb-device-switch__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 5px 6px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	color: #50575e;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.krd-rsb-device-switch__button .dashicon {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.krd-rsb-device-switch__button:hover,
.krd-rsb-device-switch__button:focus-visible {
	border-color: #3858e9;
	color: #3858e9;
	outline: 0;
}

.krd-rsb-device-switch__button.is-active {
	border-color: #3858e9;
	background: #eef2ff;
	color: #1d3bc9;
	box-shadow: inset 0 -2px 0 #3858e9;
}

.krd-rsb-device-switch__fallback-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	font-size: 10px;
	font-weight: 800;
}

.krd-rsb-responsive-field {
	position: relative;
}

.krd-rsb-responsive-field .components-base-control {
	margin-bottom: 5px;
}

.krd-rsb-responsive-reset {
	min-height: 26px;
	margin: -2px 0 12px;
	padding: 0 6px;
	color: #3858e9;
	font-size: 11px;
	font-weight: 700;
}

.krd-rsb-box-control__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.krd-rsb-box-control__head .krd-rsb-box-control__label {
	margin-bottom: 0;
}

.krd-rsb-box-control__actions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.krd-rsb-box-control__link,
.krd-rsb-box-control__reset {
	min-width: 28px;
	min-height: 28px;
	padding: 0 5px;
	color: #50575e;
	font-size: 11px;
	font-weight: 700;
}

.krd-rsb-box-control__link .dashicon {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.krd-rsb-box-control__link.is-linked {
	color: #1d3bc9;
}

.krd-rsb-box-control__reset {
	color: #3858e9;
}