/* ==========================================================================
   Canvas Compatibility: Plugin CSS Overrides
   ========================================================================== */

/* ── Mobile Heading Scale Restore ─────────────────────────────────────── */

/*
 * Global styles emit unconditional `hN { font-size: var(--cnvs-font-size-hN,
 *
 * preset) }` rules AFTER style.css, which overrides style.css's own `@media
 * (max-width: 767.98px)` heading downscale (h1 1.75rem / h2 1.5rem / h3 1.25rem
 * / h4 1rem): mobile headings rendered at their desktop size.
 */
@media (max-width: 767.98px) {
	body h1 { font-size: var(--cnvs-font-size-h1-mobile, 1.75rem); }
	body h2 { font-size: var(--cnvs-font-size-h2-mobile, 1.5rem); }
	body h3 { font-size: var(--cnvs-font-size-h3-mobile, 1.25rem); }
	body h4 { font-size: var(--cnvs-font-size-h4-mobile, 1rem); }
}

/* ── Button Shadow ────────────────────────────────────────────────────── */

/*
 * style.css defines .button-shadow-dark and .button-shadow-contrast but not
 * .button-shadow-light. Add the missing light variant here.
 */
.button-shadow-light {
	--cnvs-btn-shadow-color: rgba(255, 255, 255, 0.6);
}

/* ── Button SVG Icon Support ──────────────────────────────────────────── */

/*
 * style.css targets <i> for button icon margin and effects. Icons may also
 * render as inline SVGs (e.g. SVG icon mode / editor re-renders). Mirror
 * every .button i rule to .button svg so both render identically.
 */

.button svg {
	display: inline-block;
	position: relative;
	margin-right: calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.button.text-end svg {
	margin: 0 0 0 calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
}

/* Icon effect extra offset. Mirrors .button-icon-effect i */
.button-icon-effect svg {
	--cnvs-btn-icon-margin-offset: .25rem;
}

/* Flip-X: horizontal slide animation. Mirrors .button-icon-effect.button-icon-flip-x i */
.button-icon-effect.button-icon-flip-x svg {
	animation: buttonIconSlideBack 0.3s ease;
}
.button-icon-effect.button-icon-flip-x:hover svg {
	animation: buttonIconSlideFront 0.5s forwards;
}

/* Flip-Y: vertical slide animation. Mirrors .button-icon-effect.button-icon-flip-y i */
.button-icon-effect.button-icon-flip-y svg {
	animation: buttonIconSlideUp 0.3s ease;
}
.button-icon-effect.button-icon-flip-y:hover svg {
	animation: buttonIconSlideDown 0.5s forwards;
}

/* ── Custom Social Links ──────────────────────────────────────────────── */

/* Hover color from repeater brand color custom property */
.canvas-social-custom:hover {
	background-color: var(--cnvs-social-color) !important;
	color: #fff !important;
}

/* ── Toggle / Accordion: exotic variant styles ── */

/*
 * Defines ~46 rules for a set of "exotic" .toggle-* / .accordion-* variant
 * classes (Card, Left Accent Bar, Pill, Numbered/Step, Minimal, Outline
 * toggles; Card, Left Accent, Timeline/Step accordions).
 */

/* Card / Shadow Toggles */
.toggle-card {
	border-radius: 0.5rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	overflow: hidden;
	margin-bottom: 1rem !important;
	transition: box-shadow .3s ease;
}
.toggle-card .toggle-header {
	padding: 1rem 1.25rem;
}
.toggle-card.toggle-active {
	box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.toggle-card .toggle-content {
	padding: 0 1.25rem 1rem;
}

/* Left Accent Bar Toggles */
.toggle-accent {
	border-left: 4px solid var(--bs-gray-300);
	padding-left: 0;
	margin-bottom: 0.5rem !important;
	transition: border-color .3s ease;
}
.toggle-accent .toggle-header {
	padding: 0.75rem 1rem;
}
.toggle-accent .toggle-content {
	padding: 0.5rem 1rem 0.75rem;
}
.toggle-accent.toggle-active {
	border-left-color: var(--cnvs-themecolor);
}
.toggle-accent-danger.toggle-active {
	border-left-color: var(--bs-danger);
}
.toggle-accent-success.toggle-active {
	border-left-color: var(--bs-success);
}

/* Pill / Rounded Toggles */
.toggle-pill .toggle-header {
	border-radius: 50px;
	padding: 0.75rem 1.5rem;
}
.toggle-pill .toggle-content {
	padding: 0.75rem 1.5rem;
}
.toggle-pill-primary .toggle-header {
	background-color: rgba(var(--bs-primary-rgb), 0.1);
	--cnvs-toggle-title-color: var(--bs-primary);
}
.toggle-pill-danger .toggle-header {
	background-color: rgba(var(--bs-danger-rgb), 0.1);
	--cnvs-toggle-title-color: var(--bs-danger);
}
.toggle-pill-success .toggle-header {
	background-color: rgba(var(--bs-success-rgb), 0.1);
	--cnvs-toggle-title-color: var(--bs-success);
}

/* Numbered / Step Toggles */
.toggle-numbered {
	margin-bottom: 0.5rem !important;
}
.toggle-numbered .toggle-header {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--bs-gray-200);
}
.toggle-numbered .toggle-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--bs-gray-200);
	color: var(--bs-gray-700);
	font-weight: 600;
	font-size: 0.8rem;
	margin-right: 0.75rem;
	flex-shrink: 0;
	transition: all .3s ease;
}
.toggle-numbered.toggle-active .toggle-step {
	background: var(--cnvs-themecolor);
	color: var(--bs-white);
}
.toggle-numbered .toggle-content {
	padding: 0.75rem 0 0.75rem 2.75rem;
}

/* Minimal / Clean Toggles */
.toggle-minimal {
	margin-bottom: 0 !important;
}
.toggle-minimal .toggle-header {
	padding: 1rem 0;
	border-bottom: 1px solid var(--bs-gray-200);
}
.toggle-minimal .toggle-icon i {
	transition: transform .3s ease;
}
.toggle-minimal.toggle-active .toggle-icon .toggle-open {
	transform: rotate(180deg);
}
.toggle-minimal .toggle-content {
	padding: 0.75rem 0 0.25rem;
}

/* Outline / Border Fill Toggles */
.toggle-outline {
	margin-bottom: 0.5rem !important;
}
.toggle-outline .toggle-header {
	border: 2px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	transition: all .3s ease;
}
.toggle-outline.toggle-active .toggle-header {
	border-color: var(--cnvs-themecolor);
	background: var(--cnvs-themecolor);
	--cnvs-toggle-title-color: var(--bs-white);
	color: var(--bs-white);
}
.toggle-outline.toggle-active .toggle-header .toggle-icon i {
	color: var(--bs-white);
}
.toggle-outline .toggle-content {
	padding: 0.75rem 1rem;
}
.toggle-outline-danger .toggle-header {
	border-color: rgba(var(--bs-danger-rgb), 0.4);
}
.toggle-outline-danger.toggle-active .toggle-header {
	border-color: var(--bs-danger);
	background: var(--bs-danger);
}
.toggle-outline-success .toggle-header {
	border-color: rgba(var(--bs-success-rgb), 0.4);
}
.toggle-outline-success.toggle-active .toggle-header {
	border-color: var(--bs-success);
	background: var(--bs-success);
}

/* Alternate Toggles: style-2 / style-3 / border-alt */
.toggle-border-alt.toggle-active,
.toggle-border-alt.toggle-active .toggle-header {
	border-color: var(--cnvs-themecolor);
	transition: all .3s ease;
}
.toggle-border-alt.toggle-active .toggle-header {
	--cnvs-toggle-title-color: var(--cnvs-contrast-0);
	background-color: var(--cnvs-themecolor);
}
.toggle-style-2.toggle-active,
.toggle-style-2.toggle-active .toggle-header {
	border-color: var(--cnvs-themecolor);
	transition: all .3s ease;
}
.toggle-style-2.toggle-active .toggle-header {
	--cnvs-toggle-title-color: var(--cnvs-contrast-0);
	background-color: var(--cnvs-themecolor);
}
.toggle-style-3 {
	--cnvs-toggle-header-bg: var(--bs-light);
}
.toggle-style-3.toggle-active,
.toggle-style-3.toggle-active .toggle-header {
	border-color: var(--cnvs-themecolor);
	transition: all .3s ease;
}
.toggle-style-3.toggle-active .toggle-header {
	--cnvs-toggle-title-color: var(--cnvs-contrast-0);
	background-color: var(--cnvs-themecolor);
}

/* Card / Separated Accordion */
.accordion-card .accordion-header {
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	margin-bottom: 0.75rem;
	border: none;
	transition: box-shadow .3s ease;
}
.accordion-card .accordion-header:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.accordion-card .accordion-content {
	padding: 0 1.25rem 1rem;
}

/* Left Accent Accordion */
.accordion-accent .accordion-header {
	border-left: 4px solid var(--bs-gray-300);
	padding: 0.85rem 1rem;
	transition: border-color .3s ease;
}
.accordion-accent .accordion-header.accordion-active,
.accordion-accent .accordion-active .accordion-header {
	border-left-color: var(--cnvs-themecolor);
}
.accordion-accent .accordion-content {
	padding: 0.5rem 1rem 0.75rem 1.25rem;
}

/* Timeline / Step Accordion */
.accordion-timeline {
	position: relative;
	padding-left: 3rem;
}
.accordion-timeline::before {
	content: "";
	position: absolute;
	left: 0.95rem;
	top: 1.25rem;
	bottom: 1.25rem;
	width: 2px;
	background: var(--bs-gray-300);
}
.accordion-timeline .accordion-header {
	position: relative;
	padding: 0.75rem 0;
	border: none;
}
.accordion-timeline .accordion-step {
	position: absolute;
	left: -3rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--bs-gray-200);
	color: var(--bs-gray-700);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.75rem;
	z-index: 1;
	transition: all .3s ease;
}
.accordion-timeline .accordion-active .accordion-step {
	background: var(--cnvs-themecolor);
	color: var(--bs-white);
}
.accordion-timeline .accordion-content {
	padding: 0.25rem 0 1rem;
}

/* ── Display Conditions: Hide on Device ────────────────────────────────────
   The canvas-hide-{mobile,tablet,desktop} rules are generated by Canvas Core
   from the theme.json settings.viewport breakpoints. */

/* ----------------------------------------------------------------
	Canvas Slider: static layer (persistent overlay across all slides).
-----------------------------------------------------------------*/
.slider-element .slider-static-layer {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}
.slider-element .slider-static-layer > * { pointer-events: auto; }

/* ----------------------------------------------------------------
	FSE post-content top margin. style.css gives .entry-content a top margin
	(--cnvs-post-content-margin: 2rem) designed for blog-entry cards, where the
	content follows an entry title/meta block.
-----------------------------------------------------------------*/
.content-wrap > .entry-content,
.content-wrap .entry-content.wp-block-post-content:first-child {
	--cnvs-post-content-margin: 0;
}

/* A design that sets `.entry-content { margin-top: … }` outright rather than
   through the token is not reached by the rule above, and its stylesheet loads
   after this one. */
.content-wrap > .entry-content.wp-block-post-content {
	margin-top: 0;
}

/* …and it must not become the containing block either. */
.content-wrap > .entry-content.wp-block-post-content {
	position: static;
}

/* ----------------------------------------------------------------
	Page-title rules that style.css only expresses through an id.
-----------------------------------------------------------------*/
@media (min-width: 992px) {
	.sticky-footer .page-title {
		z-index: 2;
	}
}

@media (max-width: 767.98px) {
	.page-title #portfolio-navigation {
		position: relative;
		top: 0;
		left: 0;
		margin: 1rem auto 0;
	}
}

/*-----------------------------------------------------------------
	Event cards: stacked variant keeps its image gap
-----------------------------------------------------------------*/
.grid-inner.row.g-0 > .col-12 > .entry-image {
	margin-bottom: var(--cnvs-post-image-mb);
	height: auto;
}

.grid-inner.row.g-0 > .col-12 > .entry-image > img {
	height: auto;
}

/*-----------------------------------------------------------------
	`.collapse.dont-collapse-sm`
-----------------------------------------------------------------*/
@media (min-width: 768px) {
	.collapse.dont-collapse-sm {
		display: block;
		height: auto !important;
		visibility: visible;
	}
}

/* ---------------------------------------------------------------------------
   Event list card: let the TEXT column govern the card height again.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {

	.entry.event .entry-image.h-100 {
		position: relative;
		display: block;
	}

	.entry.event .entry-image.h-100 > img.h-100 {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Portfolio grid: equal, fixed-height cards.
--------------------------------------------------------------------------- */

.portfolio.align-items-stretch .portfolio-item {
	height: 500px;
}

.portfolio.align-items-stretch .grid-inner,
.portfolio.align-items-stretch .portfolio-image > a,
.portfolio.align-items-stretch .portfolio-image img,
.portfolio.align-items-stretch .portfolio-image .fslider,
.portfolio.align-items-stretch .portfolio-image .flexslider,
.portfolio.align-items-stretch .portfolio-image .flex-viewport,
.portfolio.align-items-stretch .portfolio-image .slider-wrap,
.portfolio.align-items-stretch .portfolio-image .slide,
.portfolio.align-items-stretch .portfolio-image .slide a {
	height: 100% !important;
}

.portfolio.align-items-stretch .portfolio-image img {
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   PORTFOLIO CARD SHAPE: `pf-ratio-<w>x<h>` on `.portfolio-image`
--------------------------------------------------------------------------- */

.portfolio-item .portfolio-image[class*="pf-ratio-"] > a,
.portfolio-item .portfolio-image[class*="pf-ratio-"] img,
.portfolio-item .portfolio-image[class*="pf-ratio-"] .fslider,
.portfolio-item .portfolio-image[class*="pf-ratio-"] .flexslider,
.portfolio-item .portfolio-image[class*="pf-ratio-"] .flex-viewport,
.portfolio-item .portfolio-image[class*="pf-ratio-"] .slider-wrap,
.portfolio-item .portfolio-image[class*="pf-ratio-"] .slide,
.portfolio-item .portfolio-image[class*="pf-ratio-"] .slide a {
	height: 100% !important;
}

.portfolio-item .portfolio-image[class*="pf-ratio-"] img {
	object-fit: cover;
}

/* Widest to tallest. These twelve are the shape census of the design's own 52
   masonry pages: one rule per token, and adding a shape means adding one line
   here and one entry to PortfolioMeta::card_aspect_choices(). */
.portfolio-item .portfolio-image.pf-ratio-8x3   { aspect-ratio: 8 / 3; }
.portfolio-item .portfolio-image.pf-ratio-21x9  { aspect-ratio: 21 / 9; }
.portfolio-item .portfolio-image.pf-ratio-16x9  { aspect-ratio: 16 / 9; }
.portfolio-item .portfolio-image.pf-ratio-3x2   { aspect-ratio: 3 / 2; }
.portfolio-item .portfolio-image.pf-ratio-4x3   { aspect-ratio: 4 / 3; }
.portfolio-item .portfolio-image.pf-ratio-5x4   { aspect-ratio: 5 / 4; }
.portfolio-item .portfolio-image.pf-ratio-1x1   { aspect-ratio: 1 / 1; }
.portfolio-item .portfolio-image.pf-ratio-17x20 { aspect-ratio: 17 / 20; }
.portfolio-item .portfolio-image.pf-ratio-4x5   { aspect-ratio: 4 / 5; }
.portfolio-item .portfolio-image.pf-ratio-3x4   { aspect-ratio: 3 / 4; }
.portfolio-item .portfolio-image.pf-ratio-2x3   { aspect-ratio: 2 / 3; }
.portfolio-item .portfolio-image.pf-ratio-9x16  { aspect-ratio: 9 / 16; }

/*-----------------------------------------------------------------
	Bootstrap card media: keep the picture on its own aspect ratio.
-----------------------------------------------------------------*/
.card-img,
.card-img-top,
.card-img-bottom {
	height: auto;
}

/*-----------------------------------------------------------------
	Icon metrics: restore the shared icon utilities after the packs.
-----------------------------------------------------------------*/
[class*="fa-"]::before,
[class*=" fa-"]::before,
[class*="bi-"]::before,
[class*=" bi-"]::before,
[class*="uil-"]::before,
[class*=" uil-"]::before {
	display: inline-flex;
	line-height: inherit;
}

[class*="fa-"],
[class*=" fa-"],
[class*="bi-"],
[class*=" bi-"],
[class*="uil-"],
[class*=" uil-"] {
	line-height: inherit;
}

.icon-lg {
	line-height: 0.75em;
}

.icon-stacked {
	line-height: 2em;
}

/* ── Sticky product description column ───────────────────────────────── */

/*
 * `.position-lg-sticky` ships `position: sticky` with no threshold, which
 * behaves exactly like `static`.
 */
@media (min-width: 992px) {
	.product-desc.position-lg-sticky {
		top: 80px;
	}
}

/* ── Assistive-only price text in the title band ──────────────────────── */

/*
 * WooCommerce writes a sale price as an aria-hidden `<del>`/`<ins>` pair plus a
 * `.screen-reader-text` sentence that carries the same information in words.
 */
.page-title .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Prices in the title band ─────────────────────────────────────────── */

/*
 * `.page-title-content span` is the subtitle rule: block, its own colour, its
 * own size, pushed away from the title.
 */
.page-title-content .woocommerce-Price-amount,
.page-title-content .woocommerce-Price-currencySymbol {
	display: inline;
	margin-top: 0;
	color: inherit;
	font-size: inherit;
}

/* ── Carousel video items ─────────────────────────────────────────────── */

/*
 * A video item has no intrinsic height until its player is opened, so the
 * carousel would collapse to nothing before the first click.
 */
.item-video {
	height: 500px;
}

/* ── Carousel arrows always visible ───────────────────────────────────── */

/*
 * The base arrow is `opacity: 0` and the carousel's own `:hover` rule reveals
 * it, so a design that treats the arrows as part of the composition rather than
 * as a hover affordance has no way to say so.
 */
.owl-carousel.owl-nav-always .owl-nav [class*="owl-"] {
	opacity: 1;
}

/* ── Flat button tint ─────────────────────────────────────────────────── */

/* The flat button: a 10% theme-colour tint that keeps its label colour on hover. */
.button-flat {
	--cnvs-btn-color-flat: var(--cnvs-themecolor);
}

.button-flat::before {
	content: '';
}

.button-flat:hover {
	background-color: inherit;
	color: var(--cnvs-btn-color-flat);
}

/**
 * Core block-library overrides.
 *
 * Both rules below undo `:where()` declarations from wp-block-library that
 * over-reach into theme markup. `:where()` carries zero specificity, so a
 * plain selector wins without `!important`.
 */

/* Core matches the `style` attribute as a substring, so a custom property whose
   NAME contains "border-width" (every Bootstrap `--bs-*-border-width` token) is
   forced to `border-style: solid` and paints the initial `medium` width. */
html [style*="border-width"]:not([style*="border-style"]) {
	border-style: none;
}

/* Library images: keep the aspect ratio and the container clamp, and set no
   width at all. */
html :where(img[class*="wp-image-"]) {
	height: auto;
	max-width: 100%;
}

/* The same fallback for a FEATURED image. */
html :where(img.wp-post-image) {
	height: auto;
}


/* The Archives block emits `<ul><li><a>`, but the tag-cloud component styles
   the links as the flex items of `.tagcloud`. */
.tagcloud > li {
	display: flex;
}

/* ---------------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	/* Show the destination immediately instead of animating it in. */
	body.page-transition #wrapper:not(.animated),
	body.page-transition #wrapper.animated {
		opacity: 1;
		animation: none;
	}

	.page-transition-wrap,
	body.page-transition .page-transition-wrap {
		display: none;
	}

	/* Give the system pointer back. The `cursor: none` rules are emitted with
	   the feature itself, and are lifted in the same place. */
	.cnvs-cursor {
		display: none;
	}
}

/* Script positions the cursor in physical coordinates. */
html[dir="rtl"] .cnvs-cursor,
html[dir="rtl"] .cnvs-cursor-follower,
html[dir="rtl"] .cnvs-cursor-dot {
	right: auto;
	left: 0;
}

html[dir="rtl"] .cnvs-cursor-follower,
html[dir="rtl"] .cnvs-cursor-dot {
	transform: translate(-50%, -50%);
}

/* The side panel's scrollbar gutter sits on its start edge. */
html[dir="rtl"] {
	--cnvs-side-panel-padding: 50px 40px 50px 70px;
}

/* ---------------------------------------------------------------------------
   Audio player bar: track artwork and details on the start edge. The time
   rail and volume slider stay left-to-right; the script seeks from `pageX`.
--------------------------------------------------------------------------- */
html[dir="rtl"] .mejs-track-artwork {
	float: right;
	margin-right: 0;
	margin-left: 10px;
	text-align: right;
}

html[dir="rtl"] .mejs-track-details {
	left: auto;
	right: 50px;
	text-align: right;
}

html[dir="rtl"] .mejs__time:not(.mejs__duration-container) {
	padding-right: 176px;
	padding-left: 6px;
}

html[dir="rtl"] .device-sm .mejs__time:not(.mejs__duration-container),
html[dir="rtl"] .device-xs .mejs__time:not(.mejs__duration-container) {
	padding-right: 26px;
	padding-left: 6px;
}

html[dir="rtl"] .mejs__playpause-button {
	margin-left: 0;
	margin-right: -4px;
}

/* ---------------------------------------------------------------------------
   Go To Top: progress-ring variant
--------------------------------------------------------------------------- */
:where(#gotoTop) svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

:where(#gotoTop) circle {
	fill: none;
	stroke: var(--cnvs-gotoTop-stroke-color, var(--cnvs-themecolor));
	stroke-width: var(--cnvs-gotoTop-stroke-width, 4px);
	stroke-dasharray: 255 255;
	stroke-dashoffset: var(--cnvs-gotoTop-scroll, 0);
	/* rtl:ignore */
	transform: rotate(-90deg);
	transform-origin: center;
}

/* Bootstrap only applies the pagination radius to the end items; the circle
   and rounded styles expect it on every link. */
.pagination.pagination-circle .page-item .page-link,
.pagination.pagination-rounded .page-item .page-link {
	border-radius: var(--bs-pagination-border-radius);
}

/* The widget list styles anticipate <ul>; the Latest Comments block emits an <ol>. */
.widget ol.wp-block-latest-comments {
	margin: 0;
	padding-left: 0;
}

/* Core Search block fields match the framework's form styling. */
.widget .wp-block-search__input {
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: var(--bs-border-radius, 0.375rem);
	background-color: var(--bs-body-bg, #fff);
	color: var(--bs-body-color, #212529);
	font-size: 1rem;
	line-height: 1.5;
}
.widget .wp-block-search__button {
	margin-left: 0.5rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--bs-secondary, #6c757d);
	border-radius: var(--bs-border-radius, 0.375rem);
	background-color: var(--bs-secondary, #6c757d);
	color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	transition: background-color 0.3s ease-in-out;
}
.widget .wp-block-search__button:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
}

/* ---------------------------------------------------------------------------
   Nested comment avatars
 */
.commentlist li .children .comment-avatar {
	left: -35px;
}

.commentlist ul .comment-wrap {
	padding-left: 2rem;
}

html[dir="rtl"] .commentlist li .children .comment-avatar {
	left: auto;
	right: -35px;
}

html[dir="rtl"] .commentlist ul .comment-wrap {
	padding-left: 1.25rem;
	padding-right: 2rem;
}

/* ---------------------------------------------------------------------------
   404: body class vs design class
 */
body.error404 {
	font-size: var(--cnvs-font-size-body);
	font-weight: var(--bs-body-font-weight);
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--bs-body-color);
}

/* ---------------------------------------------------------------------------
   Long unbroken strings
 */
.page-title-content,
.breadcrumb-item,
.entry,
#comments {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Aligned figures
 */
figure.alignleft {
	float: left;
	margin: 5px 20px 13px 0;
}

figure.alignright {
	float: right;
	margin: 5px 0 13px 20px;
}

figure.alignnone,
figure.aligncenter {
	float: none;
	margin: 10px 0;
}

figure.aligncenter {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

.wp-caption,
figure.alignleft,
figure.alignright,
figure.alignnone,
figure.aligncenter {
	max-width: 100%;
}

.wp-caption img {
	height: auto;
}

/* ---------------------------------------------------------------------------
   Sticky posts
 */
.entry.sticky > .grid-inner {
	border-inline-start: 3px solid var(--cnvs-themecolor);
	padding-inline-start: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Pingbacks and trackbacks
 */
.commentlist .comment-avatar:not(:has(img)) {
	display: none;
}

/* ---------------------------------------------------------------------------
   Off-canvas menu trigger
 */
.offcanvas-btn i {
	font-size: 1rem;
}

body.offcanvas-open .offcanvas-btn i:nth-child(1),
body:not(.offcanvas-open) .offcanvas-btn i:nth-child(2) {
	display: none;
}

/* Clicking the dimmed backdrop closes the panel, so the pointer over it is the
   close cross the side panel already uses for the same gesture. */
.offcanvas-backdrop.show {
	cursor: url('images/icons/close.png') 16 16, pointer;
}

/* ---------------------------------------------------------------------------
   Cart quantity stepper on a dark band
 */
.dark .quantity {
	--cnvs-cart-quantity-bg: rgba(0,0,0,0.2);
	--cnvs-cart-quantity-color: #FFF;
	--cnvs-cart-quantity-color-hover: var(--cnvs-cart-quantity-color);
	--cnvs-cart-quantity-border-color: rgba(255,255,255,0.5);
	--cnvs-cart-quantity-bg-hover: rgba(0,0,0,0.3);
}

/* ---------------------------------------------------------------------------
   Current menu item painted with the theme colour
 */
.menu-item.bg-color.current > .menu-link {
	color: var(--cnvs-primary-menu-color);
}