/* Speaker demo styles */

:root {
	--cnvs-themecolor: #FD5D3D;
	--cnvs-themecolor-rgb: 253, 93, 61;
	--cnvs-primary-font: 'paralucent-text', sans-serif;
	--cnvs-body-font: 'paralucent', sans-serif;
	--bs-bg-opacity: 1;
}

#header {
	--cnvs-primary-menu-font-size:	0.875rem;
	--cnvs-primary-menu-submenu-font-size:	0.875rem;
	--cnvs-primary-menu-submenu-font-weight:	500;
	--cnvs-primary-menu-submenu-hover-font-weight: 600;
	--cnvs-primary-menu-submenu-tt:	none;
}

#header {
	--cnvs-primary-menu-hover-color: #111;
}

.is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 0;
}

.is-expanded-menu .menu-container > .menu-item {
	margin-left: 2.25rem;
	margin-right: 2.25rem;
}

.is-expanded-menu .menu-container>.menu-item:not(.sub-menu)>.menu-link::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: 110%;
	margin-left: -55%;
	height: 2px;
	background-color: var(--cnvs-themecolor);
	transform-origin: center center;
	transform: scaleX(0);
	transition: transform .3s cubic-bezier(.645, .045, .355, 1);
}

.is-expanded-menu .menu-container > .menu-item:hover > .menu-link::after,
.is-expanded-menu .menu-container>.menu-item.current>.menu-link::after {
	transform: scaleX(1);
}

.is-expanded-menu .sub-menu-container {
	box-shadow: 0px 20px 50px 10px rgba(0, 0, 0, .05);
	border-radius: .25rem;
}

.h-bg-tranparent:hover {
	background: transparent !important;
}

#logo a {
	letter-spacing: -1px;
}

.button[class*=bg-opacity-]:hover {
	--bs-bg-opacity: 1;
	color: #FFF !important;
}

.header-misc-icon a:hover {
	color: var(--cnvs-themecolor);
}

.speaker-gallery img {
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

/* ── Speaker Store + Single Product (demo-scoped shop) ─────────────
 * Styles the product cards (the shop page's canvas-core/woo-products grid
 * AND the single product's related-products carousel) plus the single
 * product page itself to feel like part of the speaker demo (its rounded
 * gallery tiles, paralucent typography and themecolor accents) using ONLY
 * the demo's own tokens.
 *   .speaker-shop: the demo shop PAGE (page 1061), scoped so it never
 *                     reaches the global /shop/ archive.
 *   .speaker-single, the 4 demo products' single pages: these use the
 *                     site's global single-product FSE template, so the
 *                     scope is a `speaker-single` body class that
 *                     inc/demos.php adds only on a demo product single,
 *                     keeping the site's OTHER products on that same
 *                     template untouched. Mirrors shop-single.html's
 *                     .single-product .product layout, recoloured. */

.speaker-shop .product-image,
.speaker-single .product-image {
	border-radius: 1rem;
	overflow: hidden;
	background-color: #F7F7F7;
}

/* Object-fit + hover zoom only on the card tiles (grid + related carousel),
 * never on the single gallery's flexslider (which sizes its own slides). */
.speaker-shop .product-image img,
.speaker-single .oc-item .product-image img {
	-o-object-fit: cover;
	object-fit: cover;
	transition: transform .5s ease;
}

.speaker-shop .product:hover .product-image img,
.speaker-single .oc-item .product:hover .product-image img {
	transform: scale(1.04);
}

/* Overlay action buttons: the demo's themecolor bg-opacity treatment
 * (source uses `bg-color color` with a hover fill) instead of btn-dark.
 * Inherits the base opacity/transform fade-in from woocommerce.css. */
.speaker-shop .product-image .bg-overlay .btn,
.speaker-single .product-image .bg-overlay .btn {
	background-color: var(--cnvs-themecolor);
	color: #FFF;
	border: 0;
}

.speaker-shop .product-image .bg-overlay .btn:hover,
.speaker-single .product-image .bg-overlay .btn:hover {
	background-color: #111;
	color: #FFF;
}

.speaker-shop .product-image .bg-overlay-bg,
.speaker-single .product-image .bg-overlay-bg {
	background-color: rgba(17, 17, 17, .12);
}

.speaker-shop .product-desc {
	text-align: center;
	padding-top: .5rem;
}

/* Title: paralucent body font, matching the demo's section headings. */
.speaker-shop .product-title h3,
.speaker-single .product-title h3 {
	font-family: var(--cnvs-body-font);
	font-weight: 500;
	font-size: 1.125rem;
	text-transform: none;
	letter-spacing: 0;
}

.speaker-shop .product-title h3 a,
.speaker-single .product-title h3 a {
	color: var(--cnvs-contrast-900, #111);
}

.speaker-shop .product-title h3 a:hover,
.speaker-single .product-title h3 a:hover {
	color: var(--cnvs-themecolor);
}

/* Price: themecolor accent + primary font, like the demo's price cues.
 * Covers the shop grid, the single's main price and the related carousel. */
.speaker-shop .product-price,
.speaker-shop .product-price .woocommerce-Price-amount,
.speaker-single .product-price,
.speaker-single .product-price .woocommerce-Price-amount {
	font-family: var(--cnvs-primary-font);
	font-weight: 600;
	color: var(--cnvs-themecolor);
}

/* Single product "Add to cart": solid themecolor CTA, matching the demo's
 * cart/checkout primary buttons (#place_order / Proceed to Checkout). */
.speaker-single .single_add_to_cart_button.button {
	font-family: var(--cnvs-primary-font);
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #FFF;
}

.speaker-single .single_add_to_cart_button.button:hover {
	background-color: #111;
	border-color: #111;
	color: #FFF;
}

/* Description tabs: themecolor active tab (text + underline). The base
 * .canvas-tabs styling lives in style.css; this only recolours the active
 * state to the demo. */
.speaker-single .canvas-tabs .nav-link.active {
	color: var(--cnvs-themecolor);
	border-bottom-color: var(--cnvs-themecolor);
}

/* "Related Products" heading: paralucent, matching the demo's headings. */
.speaker-single .wp-block-canvas-core-woo-related-products > h4 {
	font-family: var(--cnvs-body-font);
	font-weight: 500;
}

/* ── Speaker Cart + Checkout (demo-scoped shopping flow) ────────────
 * Styles the canvas-core woo-cart / woo-checkout blocks to feel like part
 * of the speaker demo (rounded panels, paralucent typography and themecolor
 * CTAs / price accents) using ONLY the demo's own tokens. Scoped under
 * .speaker-cart / .speaker-checkout so it never touches the site's global
 * WooCommerce cart/checkout pages. No physical margins (spacing = padding +
 * the section's own utility classes), so speaker.margins.css is untouched. */

/* Buttons across both pages take the demo's primary font + softer radius. */
.speaker-cart .button,
.speaker-checkout .button {
	font-family: var(--cnvs-primary-font);
	border-radius: .5rem;
}

/* Primary CTAs: solid themecolor fill. Cart "Proceed to Checkout" is an
 * <a class="button"> in the totals; checkout "Place Order" is #place_order. */
.speaker-cart a.button,
.speaker-checkout #place_order {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #FFF;
}

.speaker-cart a.button:hover,
.speaker-checkout #place_order:hover {
	background-color: #111;
	border-color: #111;
	color: #FFF;
}

/* Secondary cart actions (Apply Coupon / Update Cart): light themecolor
 * tint that fills solid on hover, mirroring the demo's bg-opacity buttons. */
.speaker-cart button.button {
	background-color: rgba(var(--cnvs-themecolor-rgb), .1);
	border-color: transparent;
	color: var(--cnvs-themecolor);
}

.speaker-cart button.button:hover {
	background-color: var(--cnvs-themecolor);
	color: #FFF;
}

/* Product titles: paralucent body font, themecolor on hover. */
.speaker-cart .cart-product-name a {
	font-family: var(--cnvs-body-font);
	font-weight: 500;
	color: var(--cnvs-contrast-900, #111);
}

.speaker-cart .cart-product-name a:hover {
	color: var(--cnvs-themecolor);
}

/* Prices, subtotals + order total: themecolor accent in the primary font. */
.speaker-cart .cart-product-price .amount,
.speaker-cart .cart-product-subtotal .amount,
.speaker-cart .canvas-cart-totals .order-total .amount,
.speaker-checkout .canvas-checkout-order .order-total .amount {
	font-family: var(--cnvs-primary-font);
	font-weight: 600;
	color: var(--cnvs-themecolor);
}

/* Cart items + totals rendered as rounded panels. */
.speaker-cart .canvas-cart-table table.cart,
.speaker-cart .canvas-cart-totals table.cart {
	border: 1px solid var(--cnvs-contrast-200, #EEE);
	border-radius: 1rem;
	overflow: hidden;
}

/* Checkout order review as a rounded light card. */
.speaker-checkout .canvas-checkout-order {
	background-color: #F7F7F7;
	border-radius: 1rem;
	padding: 1.75rem;
}

/* Checkout section headings: paralucent body font, matching the demo. */
.speaker-checkout .canvas-checkout-billing h3,
.speaker-checkout .canvas-checkout-order h4 {
	font-family: var(--cnvs-body-font);
	font-weight: 500;
}

/* Inputs: themecolor focus ring layered over the base woocommerce.css field
 * styling (border + radius live there; this only adds the focus state). */
.speaker-checkout .input-text:focus,
.speaker-checkout .form-row select:focus,
.speaker-checkout .form-row textarea:focus {
	border-color: var(--cnvs-themecolor);
	box-shadow: 0 0 0 .15rem rgba(var(--cnvs-themecolor-rgb), .15);
	outline: 0;
}

.top-search-open .top-search-parent .header-misc> #top-cart {
	opacity: 1;
	color:#FFF
}

.dotted-bg {
	--cnvs-dotted-opacity: .7;
	--cnvs-dotted-top: 0;
	--cnvs-dotted-right: 0;
	--cnvs-dotted-left: auto;
	--cnvs-dotted-size: 190px;
}

.dotted-bg.pos-left {
	--cnvs-dotted-right: auto;
	--cnvs-dotted-left: 0;
}

.dotted-bg:before {
	content: "";
	position: absolute;
	display: block;
	top: var(--cnvs-dotted-top);
	left: var(--cnvs-dotted-left);
	right: var(--cnvs-dotted-right);
	width: var(--cnvs-dotted-size);
	height: var(--cnvs-dotted-size);
	background-size: 20px 20px;
	background-position: center;
	transform: translate(30px, -30px);
	background-image: radial-gradient(rgba(var(--cnvs-themecolor-rgb), var(--cnvs-dotted-opacity)) 25%, transparent 25%);
	z-index: auto;
}

.top-account .dropdown-menu {
	border-color: #EEE;
	border-top: 2px solid var(--cnvs-themecolor);
	box-shadow: 0px 20px 50px 10px rgba(0, 0, 0, .05);
}

.top-cart-open > a,
.top-account a.show {
	color: var(--cnvs-themecolor);
}

.sub-menu-container .menu-item>.menu-link,
.sub-menu-container .menu-item:hover>.menu-link {
	background-color: transparent;
	font-family: var(--cnvs-primary-font) !important;
}

.noice-effect::before {
	content: "";
	position: absolute;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	opacity: 0.6;
	background-image: url(speaker/noise-paatern.png);
	background-repeat: repeat;
	background-size: auto;
	animation: noiceAnim 8s steps(10) infinite;
}

@keyframes noiceAnim {

	0%,
	to {
		transform: translate(0);
	}

	10% {
		transform: translate(-5%, -10%);
	}

	20% {
		transform: translate(-15%, 5%);
	}

	30% {
		transform: translate(7%, -25%);
	}

	40% {
		transform: translate(-5%, 25%);
	}

	50% {
		transform: translate(-15%, 10%);
	}

	60% {
		transform: translate(15%);
	}

	70% {
		transform: translateY(15%);
	}

	80% {
		transform: translate(3%, 35%);
	}

	90% {
		transform: translate(-10%, 10%);
	}
}

.swiper_wrapper {
	--swiper-height: 80vh;
	--swiper-thumbs-height: 70px;
	--swiper-thumbs-gap: 10px;
	--swiper-navigation-size: 24px;
	min-height: var(--swiper-height);
}

.swiper_wrapper .swiper {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
}

.swiper-slide-bg {
	position: relative;
	z-index: auto;
	top: auto;
	left: auto;
	height: auto;
	min-height: calc(var(--swiper-height) - var(--swiper-thumbs-height) - calc(var(--swiper-thumbs-gap) * 2));
}

.swiper-thumb {
	height: auto;
	padding: var(--swiper-thumbs-gap) 0;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
}

.swiper-thumb {
	width: calc(100% - calc(var(--swiper-navigation-size) + 60px));
	margin: 0 auto;
	text-align: center;
}

.swiper-thumb .swiper-slide,
.swiper-thumb .swiper-slide img {
	width: 270px;
	height: var(--swiper-thumbs-height);
	-o-object-fit: cover;
	object-fit: cover;
}

.swiper-thumb .swiper-slide {
	filter: grayscale(1);
	opacity: 0.4;
	flex-basis: 0;
	flex-grow: 1;
}

.swiper-thumb .swiper-slide-thumb-active {
	filter: grayscale(0);
	opacity: 1;
}

.circle-wave {
	---circle-wave-size: calc(30px + 1vw);
	---circle-wave-font-size: calc(.75rem + 2vw);
	---circle-wave-ripple-size: 10px;
	height: var(---circle-wave-size);
	width: var(---circle-wave-size);
	border-radius: 100%;
	margin-top: 4%;
}

.circle-wave i {
	position: relative;
	font-size: var(---circle-wave-font-size);
	background: var(--cnvs-themecolor);
	color: #FFF;
	text-align: center;
	height: var(---circle-wave-size);
	width: var(---circle-wave-size);
	line-height: var(---circle-wave-size);
	border-radius: 100%;
	z-index: 1;
}

.circle-wave:before,
.circle-wave:after {
	content: "";
	opacity: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	border: var(---circle-wave-ripple-size) solid rgba(var(--cnvs-themecolor-rgb), 0.75);
	border-radius: 100%;
	-webkit-animation-name: ripple;
	animation-name: ripple;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
	animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
	z-index: auto;
}

.circle-wave::before {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.entry .read-more i {
	font-size: 85%;
}

.entry:hover .read-more i {
	transform: translateX(4px);
}

.subscribe-widget input::-moz-placeholder {
	color: #AAA;
	font-size: 85%;
}

.subscribe-widget input::-webkit-input-placeholder {
	color: #AAA;
	font-size: 85%;
}

.modal-open {
	overflow: inherit !important;
}

.modal-backdrop.show {
	display: none;
}

#gotoTop {
	--cnvs-gotoTop-stroke-color: var(--cnvs-themecolor);
	--cnvs-gotoTop-stroke-size: 32px;
	--cnvs-gotoTop-stroke-width: 4px;
	--cnvs-scroll-progress-range: calc((var(--cnvs-body-height) - var(--cnvs-viewport-height)) / var(--cnvs-body-height));
	--cnvs-gotoTop-scroll: calc(260 - (260 * (var(--cnvs-scroll-end) / var(--cnvs-scroll-progress-range))));
	background-color: transparent !important;
}

#gotoTop::before {
	content: "\f148";
	font-family: 'bootstrap-icons';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: 2px;
	width: calc(var(--cnvs-gotoTop-stroke-size) + calc(var(--cnvs-gotoTop-stroke-width) * .5));
	height: calc(var(--cnvs-gotoTop-stroke-size) + calc(var(--cnvs-gotoTop-stroke-width) * .5));
	line-height: calc(var(--cnvs-gotoTop-stroke-size) - 1px);
	font-size: 1rem;
	color: var(--cnvs-contrast-900);
	transform: translate(-50%, -50%);
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 50%;
	z-index: -1;
}

#gotoTop circle {
	stroke: var(--cnvs-gotoTop-stroke-color);
	stroke-width: var(--cnvs-gotoTop-stroke-width);
	transform: rotate(-90deg);
	transform-origin: center;
	stroke-dashoffset: var(--cnvs-gotoTop-scroll);
	stroke-dasharray: 255 255;
	z-index: 1;
}

.btn-close {
	font-size: .75rem;
}

.widget_nav_menu li a,
.widget_links li a,
.widget_meta li a,
.widget_archive li a,
.widget_recent_entries li a,
.widget_categories li a,
.widget_pages li a,
.widget_rss li a,
.widget_recent_comments li a {
	font-family: var(--cnvs-primary-font);
}


@-webkit-keyframes ripple {
	from {
		opacity: 1;
		transform: scale3d(0.75, 0.75, 1);
	}

	to {
		opacity: 0;
		transform: scale3d(1.5, 1.5, 1);
	}
}

@keyframes ripple {
	from {
		opacity: 1;
		transform: scale3d(0.75, 0.75, 1);
	}

	to {
		opacity: 0;
		transform: scale3d(1.5, 1.5, 1);
	}
}



@media (min-width: 768px) {
	.swiper_wrapper {
		--swiper-height: 100vh;
	}

	.swiper-slide-info {
		margin-top: var(--swiper-thumbs-height);
	}
}

/* Upper 992px Devices */
@media (min-width: 992px) {

	.text-stretch {
		position: relative;
		width: calc(100% + 200px);
		z-index: 1;
	}

	.section-1-bg {
		background: #F5F5F5 url('speaker/section-1.jpg') no-repeat left bottom / cover;
	}

	.circle-wave {
		---circle-wave-size: calc(40px + 4vw);
	}

}
/* Default all demo images to object-fit:cover (avoid stretch/distortion in fixed-aspect boxes; inert on natural-aspect icons/logos). */
.speaker img {
	object-fit: cover;
}

/* ── Blog archive + single (demo-scoped) ───────────────────────────────────
 * The design's own pages draw their sections; the blog index, the post single
 * and the term archives are rendered by the global templates, so their cards,
 * article body and widget sidebar are brought into the demo's vocabulary here
 * using only the demo's own tokens. Scoped to the body classes the theme adds
 * on a demo-owned view (`speaker-post`, `speaker-archive`) and to the demo's
 * own blog page section (`speaker-blog`), so no other site view is touched. */

.speaker-blog .entry-image img,
.speaker-archive .entry-image img,
.speaker-post .entry-image img {
	border-radius: 1rem;
}

.speaker-blog .entry-title h3 a,
.speaker-archive .entry-title h3 a,
.speaker-archive .entry-title h2 a {
	color: var(--cnvs-contrast-900, #111);
	font-family: var(--cnvs-body-font);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.speaker-blog .entry-title h3 a:hover,
.speaker-archive .entry-title h3 a:hover,
.speaker-archive .entry-title h2 a:hover {
	color: var(--cnvs-themecolor);
}

.speaker-archive .entry-meta,
.speaker-post .entry-meta {
	font-family: var(--cnvs-primary-font);
}

/* The article card carries the design's flat, borderless surface. */
.speaker-post .entry,
.speaker-archive .entry {
	box-shadow: none;
}

.speaker-post .entry-content h2,
.speaker-post .entry-content h3 {
	font-family: var(--cnvs-body-font);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.speaker-post .entry-content a {
	color: var(--cnvs-themecolor);
}

/* Core block widgets in the sidebar: the theme's classic widget CSS does not
 * reach them, so they are given the demo's own list and chip treatment. */
.speaker-post .sidebar .wp-block-latest-posts__list,
.speaker-post .sidebar .wp-block-categories,
.speaker-post .sidebar .wp-block-archives {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--cnvs-primary-font);
	font-size: 0.9375rem;
}

.speaker-post .sidebar .wp-block-latest-posts__list li,
.speaker-post .sidebar .wp-block-categories li,
.speaker-post .sidebar .wp-block-archives li {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(var(--cnvs-themecolor-rgb), 0.12);
}

.speaker-post .sidebar .wp-block-latest-posts__list li a:hover,
.speaker-post .sidebar .wp-block-categories li a:hover,
.speaker-post .sidebar .wp-block-archives li a:hover {
	color: var(--cnvs-themecolor);
}

.speaker-post .sidebar .wp-block-latest-posts__post-date {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.5;
}

/* WordPress writes a per-tag inline font-size on every cloud link. */
.speaker-post .sidebar .tag-cloud-link {
	display: inline-block;
	margin: 0 0.25rem 0.5rem 0;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgba(var(--cnvs-themecolor-rgb), 0.2);
	border-radius: 2rem;
	font-family: var(--cnvs-primary-font);
	font-size: 12px !important;
	color: var(--cnvs-contrast-700, #444);
}

.speaker-post .sidebar .tag-cloud-link:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #FFF;
}