/* ----------------------------------------------------------------
	Canvas: Drone
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: var(--bs-primary);
	--cnvs-themecolor-rgb: var(--bs-primary-rgb);

	--cnvs-body-font: "hoss-round-wide", sans-serif;
	--cnvs-primary-font: "hoss-round-wide", sans-serif;
}

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

.is-expanded-menu .mega-menu-style-2 .mega-menu-title > .menu-link {
	font-size: calc(var(--cnvs-primary-menu-submenu-font-size) * 0.9);
}

#header {
	--cnvs-header-height: 60px;
	--cnvs-primary-menu-font-size: .9125rem;
	--cnvs-primary-menu-font-weight: 400;
	--cnvs-primary-menu-color: var(--cnvs-contrast-800);
	--cnvs-header-floating-top-offset: 0;
	--cnvs-top-search-font-size: 1.125rem;
	--cnvs-top-search-placeholder: var(--cnvs-contrast-500);
}

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

.is-expanded-menu #header.transparent-header.floating-header .container {
	border-radius: 23rem;
	max-width: calc(100% - 30px);
}

#logo img {
	transition: transform .5s ease;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

#logo:hover img {
	transform: rotate(90deg);
}

.is-expanded-menu #header-wrap,
.is-expanded-menu .sticky-header #header-wrap {
	position: fixed !important;
    top: 15px;
    background-color: transparent;
	border: 0;
}

.top-cart-content,
.menu-container > .menu-item > .sub-menu-container {
	border-radius: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.button-offset:is(:hover, :focus) {
	outline-width: 3px;
	outline-style: solid;
	outline-color: var(--cnvs-themecolor);
	outline-offset: 0;
	transition: all .1s;
}

.button-offset.button-offset-circle {
	outline-color: #FFF;
	outline-width: 2px;
}

.button-offset:is(:hover, :focus) {
	outline-offset: 3px;
}

.button-offset.button-light {
	outline-color: var(--bs-white);
}


/* Tab */

#demo-drone-tab {
	--bs-nav-tabs-border-width: 0px;
	--bs-nav-link-color: #111;
}

#demo-drone-tab .nav-item {
	position: relative;
}

#demo-drone-tab .nav-item .nav-link.active .tab-title {
	font-weight: 600;
}

@media (min-width: 992px) {
	#demo-drone-tab .nav-item .nav-link.active::after {
		content: '';
		position: absolute;
		width: 0; 
		height: 0;
		margin-left: -5px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid var(--cnvs-contrast-300);
		bottom: 0;
		left: 50%;
	}
}

/* ----------------------------------------------------------------
	Additive: store, cart, checkout, blog and archive scopes.
	Not part of the ported design file. Uses only this demo's own
	tokens, and every rule is scoped so it cannot reach a page that
	does not belong to the demo.
-----------------------------------------------------------------*/

/* Catalogue cards — the demo's rounded 20px tile with a themecolor price. */
.drone-shop .product-image,
.drone-archive.canvas-woocommerce .product-image,
.drone-single .related .product-image {
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--cnvs-contrast-200);
}

.drone-shop .product-title h3,
.drone-archive.canvas-woocommerce .product-title h3,
.drone-single .related .product-title h3 {
	font-family: var(--cnvs-primary-font);
	font-weight: 500;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
}

.drone-shop .product-title h3 a,
.drone-archive.canvas-woocommerce .product-title h3 a,
.drone-single .related .product-title h3 a {
	color: var(--cnvs-contrast-900);
}

.drone-shop .product-title h3 a:hover,
.drone-archive.canvas-woocommerce .product-title h3 a:hover,
.drone-single .related .product-title h3 a:hover {
	color: var(--cnvs-themecolor);
}

.drone-shop .product-price,
.drone-archive.canvas-woocommerce .product-price,
.drone-single .related .product-price {
	color: var(--cnvs-themecolor);
	font-weight: 600;
}

.drone-shop .product-image .bg-overlay .btn,
.drone-archive.canvas-woocommerce .product-image .bg-overlay .btn {
	border-radius: 23rem;
}

/* Product single. */
.drone-single .product .price,
.drone-single .product .price .woocommerce-Price-amount {
	color: var(--cnvs-themecolor);
	font-weight: 600;
}

.drone-single .single_add_to_cart_button {
	border-radius: 23rem;
}

.drone-single .single_add_to_cart_button:is(:hover, :focus) {
	outline: 3px solid var(--cnvs-themecolor);
	outline-offset: 3px;
	transition: all .1s;
}

.drone-single .wc-tabs li.active a {
	color: var(--cnvs-themecolor);
}

/* Cart and checkout — the demo's pill buttons and themecolor totals. */
.drone-cart a.button,
.drone-cart button.button,
.drone-checkout #place_order,
.drone-checkout button.button {
	border-radius: 23rem;
}

.drone-cart a.button:is(:hover, :focus),
.drone-checkout #place_order:is(:hover, :focus) {
	outline: 3px solid var(--cnvs-themecolor);
	outline-offset: 3px;
	transition: all .1s;
}

.drone-cart .canvas-cart-totals,
.drone-checkout .canvas-checkout-order {
	background-color: var(--cnvs-contrast-100);
	border-radius: 20px;
	padding: 1.75rem;
}

.drone-cart .order-total .amount,
.drone-checkout .order-total .amount {
	color: var(--cnvs-themecolor);
	font-weight: 600;
}

.drone-cart .form-control:focus,
.drone-checkout .form-control:focus,
.drone-checkout .select2-container--focus .select2-selection {
	border-color: var(--cnvs-themecolor);
	box-shadow: none;
}

/* Blog grid, single and the sidebar the global templates draw. */
.drone-blog .entry-image img,
.drone-post .entry-image img {
	border-radius: 20px;
}

.drone-blog .entry-title h2 a:hover,
.drone-post .entry-title h2 a:hover {
	color: var(--cnvs-themecolor);
}

.drone-post .entry,
.drone-archive .entry {
	box-shadow: none;
}

.drone-post .sidebar .widget {
	font-family: var(--cnvs-body-font);
}

.drone-post .sidebar .widget > h4 {
	font-family: var(--cnvs-primary-font);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.drone-post .sidebar .wp-block-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drone-post .sidebar .wp-block-categories li {
	padding: .5rem 0;
	border-bottom: 1px solid var(--cnvs-contrast-200);
}

.drone-post .sidebar a {
	color: var(--cnvs-contrast-800);
}

.drone-post .sidebar a:hover {
	color: var(--cnvs-themecolor);
}

.drone-post .sidebar .tag-cloud-link {
	font-size: .8125rem !important;
	display: inline-block;
	padding: .25rem .75rem;
	margin: 0 .25rem .25rem 0;
	border: 1px solid var(--cnvs-contrast-300);
	border-radius: 23rem;
}

.drone-post .sidebar .tag-cloud-link:hover {
	border-color: var(--cnvs-themecolor);
	color: var(--cnvs-themecolor);
}