/*
Theme Name: Blance
Theme URI: http://blance.jwsuperthemes.com
Author: the JWSThemes team
Author URI: https://themeforest.net/user/jwsthemes
Version: 5.4.5
WC tested up to: 11.2.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Description: Blance is a unique, clean and professional WordPress theme perfect for promoting and selling your products online. The theme offers unlimited color and font options, 20+ powerful shortcode, 05 header layout, 04 awesome sliders, custom widgets and a lot more.
Text Domain: blance
*/

/* WPBakery 8+ wraps page content in #wpb-content-root; top-level rows keep their -15px gutter (same layout as before),
   the full-width wrappers clip it so the page does not get a horizontal scrollbar. */
.main-content,
.before-footer,
.portfolio-single {
	overflow-x: clip;
}

/* WooCommerce stylesheets are disabled by the theme; keep screen reader labels from WooCommerce templates visually hidden. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Full-width header menus and product layouts 5 and 7: clip the .row gutter instead of letting it scroll the page sideways. */
#jws_header .menu_nav > .no_container,
.woocommerce div.product.layout-5,
.woocommerce div.product.layout-7 {
	overflow-x: clip;
}

/* Cart page hides the header cart icon, so the account icon moves to the right edge on phones; open its menu towards the left. */
@media (max-width: 767px) {
	.woocommerce-cart .jws-my-account .account-content {
		left: auto;
		right: 0;
	}
}

/* X (formerly Twitter) logo for every fa-twitter icon. Font Awesome 4.7 has no X glyph, so the
   icon is drawn with an SVG mask in the current text color and keeps the size of the font icon. */
.fa-twitter:before,
.fa-twitter-square:before {
	content: "";
	display: inline-block;
	width: 0.875em;
	height: 0.875em;
	vertical-align: -0.0625em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Header icons on touch screens: the account menu opens with a tap (.is-open, set in main.js),
   and each icon gets a 44 x 44px touch area without changing the header layout. */
.jws-my-account.is-open .account-content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
@media (max-width: 991px), (hover: none) {
	#jws_header .jws-my-account > .account,
	#jws_header .jws-icon-cart > a,
	#jws_header .action-search > a,
	#jws_header .button_menu {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
	/* .button_menu keeps its absolute position from the header styles. */
	#jws_header .jws-my-account > .account,
	#jws_header .jws-icon-cart > a,
	#jws_header .action-search > a {
		position: relative;
	}
	#jws_header .jws-my-account > .account::after,
	#jws_header .jws-icon-cart > a::after,
	#jws_header .action-search > a::after,
	#jws_header .button_menu::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		min-width: 44px;
		min-height: 44px;
		transform: translate(-50%, -50%);
	}
}
/* Grouped product table on phones and tablets: name and price stack on the left, quantity on the right, so the table fits the column. */
@media (max-width: 991px) {
	.woocommerce div.product form.cart .group_table,
	.woocommerce div.product form.cart .group_table tbody {
		display: block;
		width: 100%;
	}
	.woocommerce div.product form.cart .group_table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 76px;
		column-gap: 10px;
		align-items: center;
		padding: 10px 12px;
	}
	.woocommerce div.product form.cart .group_table td {
		display: block;
		width: auto !important;
		padding: 0 !important;
		border: 0;
		text-align: left;
	}
	.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
		grid-column: 1;
		grid-row: 1;
	}
	.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label,
	.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label * {
		white-space: normal;
		word-break: break-word;
	}
	.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__price {
		grid-column: 1;
		grid-row: 2;
	}
	.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__quantity {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	.woocommerce div.product form.cart .group_table .quantity,
	.woocommerce div.product form.cart .group_table .quantity input.qty {
		width: 70px;
		max-width: 100%;
	}
}

/* Tablets: rows with a full-width content column and a sidebar column (product with sidebar, portfolio single) wrap the sidebar below
   instead of pushing it past the screen. Phones already stack these rows. */
@media (min-width: 768px) and (max-width: 991px) {
	.row-same-height {
		flex-wrap: wrap;
	}
}

/* Mega menus: the width set on a menu item (1170px on the demo) is wider than small laptop screens.
   Full-width dropdowns are positioned against the viewport, so 100% is the screen width. */
#jws_header .menu-item-position-full > .sub-menu-dropdown {
	max-width: 100%;
}
#jws_header .menu-item-design-mega_menu:not(.menu-item-position-full) > .sub-menu-dropdown {
	max-width: calc(100vw - 30px);
}

/* Headers at 992 to 1199px: six menu items did not fit the menu column and the last one wrapped to a second line. */
@media (min-width: 992px) and (max-width: 1199px) {
	#jws_header .mainmenu .nav > li > a {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* Header v1: the 142px cart width holds the "Cart" label, which is hidden below 992px.
   Without this the icon group covers the logo on phones. */
@media (max-width: 991px) {
	.jws-header-v1 .jws-icon-cart {
		min-width: 0;
	}
	/* Logged in: the account name floated up into the top bar and the icon had an extra 8px gap. */
	#jws_header .jws-my-account .acount-tt {
		display: none !important;
	}
	#jws_header .jws-my-account.logged .account i {
		margin-right: 0;
	}
}