@charset "UTF-8";
/**
 * Lybow — elementor.css
 * Elementor compatibility layer and editor safeguards.
 *
 * Loaded on the front-end, inside the Elementor preview iframe and in the
 * Elementor editor panel so the building experience matches the live site.
 *
 * Contents
 *  01. Design token inheritance
 *  02. Layout & container normalisation
 *  03. Typography harmonisation
 *  04. Widget & section defaults
 *  05. Full-width / canvas templates
 *  06. Editor-only safeguards
 *  07. Responsive refinements
 *
 * Nothing here is required for the theme to work — every rule is scoped to an
 * Elementor class so it is inert when Elementor is deactivated.
 */

/* =========================================================================
 * 01. Design token inheritance
 * ====================================================================== */

.elementor-widget-container,
.elementor-editor-active,
.elementor-edit-area-active {
	--lybow-bg: var(--lybow-warm-white);
}

/* Elementor global colours are extended with the brand palette so they show
 * up in the picker even before Elementor "Site Settings" are configured. */

.elementor-kit-1,
.elementor-editor-active {
	--e-global-color-lybow-blush: var(--lybow-blush);
	--e-global-color-lybow-pink: var(--lybow-pink);
	--e-global-color-lybow-plum: var(--lybow-plum);
	--e-global-color-lybow-ink: var(--lybow-ink);
}

/* =========================================================================
 * 02. Layout & container normalisation
 * ====================================================================== */

/* Elementor sections already provide their own padding; the theme must not
 * add the `.lybow-section` rhythm on top. */

.elementor-page .lybow-main,
.elementor-page .lybow-content-area {
	padding-block: 0;
}

/* A theme entry wrapper should never constrain Elementor content. */

.elementor-page .lybow-entry {
	max-width: none;
	margin-inline: 0;
}

/* Boxed content assumes the theme container width, not Elementor's default. */

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--lybow-container);
	padding-inline: var(--lybow-gutter);
}

.elementor-section.elementor-section-boxed.elementor-section-full_width > .elementor-container {
	max-width: none;
	padding-inline: 0;
}

/* New flexbox containers (Elementor 3.6+). */
.e-con--boxed > .e-con-inner {
	max-width: var(--lybow-container);
	padding-inline: var(--lybow-gutter);
}

.elementor-section-full_width > .elementor-container,
.e-con-full > .e-con-inner {
	padding-inline: 0;
}

/* Widgets that use the theme's grid classes must keep their gaps. */
.elementor-widget .lybow-grid {
	gap: var(--lybow-card-gap);
}

/* =========================================================================
 * 03. Typography harmonisation
 * ====================================================================== */

/* Headings rendered inside the Elementor canvas inherit the theme fonts
 * unless the widget explicitly overrides them. */

.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-theme-page-title .elementor-heading-title,
.elementor-widget-theme-post-title .elementor-heading-title {
	font-feature-settings: inherit;
}

.elementor-widget-text-editor {
	color: var(--lybow-ink-soft);
}

.elementor-widget-text-editor a {
	color: var(--lybow-accent);
}

/* Elementor buttons adopt the theme pill radius when set to "default". */
.elementor-button {
	border-radius: var(--lybow-radius-button);
	font-family: var(--lybow-font-body);
	font-weight: 600;
	transition: background-color var(--lybow-dur) var(--lybow-ease), border-color var(--lybow-dur) var(--lybow-ease),
		transform var(--lybow-dur) var(--lybow-ease), box-shadow var(--lybow-dur) var(--lybow-ease);
}

.elementor-button:hover {
	transform: translateY(-1px);
}

/* =========================================================================
 * 04. Widget & section defaults
 * ====================================================================== */

.elementor-widget-container {
	/* Prevents stray margins from collapsing into neighbouring widgets. */
	position: relative;
}

/* Image widget inherits the theme radius. */
.elementor-widget-image img {
	border-radius: var(--lybow-radius-lg);
}

/* Icon boxes and similar use the brand accent by default. */
.elementor-view-stacked .elementor-icon {
	background-color: var(--lybow-accent);
}

.elementor-view-framed .elementor-icon,
.elementor-view-default .elementor-icon {
	color: var(--lybow-accent);
	border-color: var(--lybow-accent);
}

/* Dividers, spacers and section backgrounds are never forced by the theme. */
.elementor-widget-divider .elementor-divider-separator {
	border-color: var(--lybow-line);
}

/* WooCommerce widgets dragged in by users keep the theme card layout. */
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-wc-products ul.products {
	margin: 0;
}

/* Forms built with Elementor Pro use the theme's field styling. */
.elementor-field-group .elementor-field-textual,
.elementor-field-group .elementor-field {
	border-radius: var(--lybow-radius-sm);
	border-color: var(--lybow-line);
}

.elementor-field-group .elementor-field:focus {
	border-color: var(--lybow-accent);
	box-shadow: 0 0 0 3px rgba(141, 82, 116, 0.12);
}

/* =========================================================================
 * 05. Full-width / canvas templates
 * ====================================================================== */

/* The Elementor Canvas template should not get the theme header/footer. */
.lybow-elementor-canvas .lybow-header,
.lybow-elementor-canvas .lybow-footer {
	display: none;
}

/* Full-width template removes the entry max-width but keeps the container. */
.lybow-elementor-full-width .lybow-entry--wide {
	max-width: none;
}

/* Transparent header over an Elementor hero. */
.lybow-header-is-transparent.lybow-header--transparent {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
	z-index: var(--lybow-z-header);
}

/* =========================================================================
 * 06. Editor-only safeguards
 * ====================================================================== */

/* Inside the editor panel we must not apply front-end layout widths. */
.elementor-editor-active .lybow-container,
.elementor-editor-active .lybow-entry {
	max-width: none;
}

/* The theme's sticky/invisible header must never cover the editor toolbar. */
.elementor-editor-active .lybow-header--sticky {
	position: relative;
}

.elementor-editor-active .lybow-to-top,
.elementor-editor-active .lybow-scrim {
	display: none !important;
}

/* Keep the theme's mobile drawer closed while editing. */
.elementor-editor-active .lybow-drawer {
	display: none;
}

/* Elementor adds its own section handles; make sure our overflow rules do not
 * clip them. */
.elementor-edit-area .lybow-product-card,
.elementor-edit-area .lybow-collection,
.elementor-edit-area .lybow-campaign {
	overflow: visible;
}

/* Placeholder text used by the companion widgets while unconfigured. */
.lybow-elementor-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: var(--lybow-space-md);
	border: 1px dashed var(--lybow-line);
	border-radius: var(--lybow-radius);
	background: var(--lybow-blush);
	color: var(--lybow-text-muted);
	font-size: var(--lybow-fs-small);
	text-align: center;
}

/* =========================================================================
 * 07. Responsive refinements
 * ====================================================================== */

@media (max-width: 1024px) {
	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con--boxed > .e-con-inner {
		padding-inline: var(--lybow-gutter);
	}
}

@media (max-width: 767px) {
	.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
		padding-inline: 0;
	}
}