/* ----------------------------------------------------------------
    Barber demo styles
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #BF9456;
	--cnvs-themecolor-rgb: 191, 148, 86;
	--cnvs-body-font: 'PT Sans', sans-serif;
	--cnvs-primary-font: 'PT Sans Caption', sans-serif;
	--cnvs-secondary-font: 'PT Serif', serif;
}

nav.custom-hero-nav { display: none; }

.button.button-large.button-color.button-appointment,
.slider-social {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 200;
}

.slider-social {
	right: auto;
	left: 20px;
	top: 25px;
}

.slider-social a { color: rgba(255, 255, 255, 0.75); }

.slider-social a:hover { color: #FFF; }

.button.button-color {
	color: #111;
	font-weight: 700;
	height: 44px;
	line-height: 44px;
	padding: 0 20px;
	font-size: 12px;
	text-shadow: none;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}

.button.button-large.button-color {
	font-weight: 700;
	height: 60px;
	line-height: 60px;
	padding: 0 32px;
	font-size: 13px;
}

.button.button-color.reverse,
.button.button-color:hover {
	background-color: #222 !important;
	color: var(--cnvs-themecolor) !important;
}

.social-icon.si-mini {
	width: 24px;
	height: 24px;
	font-size: 11px;
	line-height: 23px !important;
}

.social-icon.si-mini:hover i:first-child { margin-top: -23px; }

.fbox-plain .fbox-icon {
	width: 4rem;
	height: 4rem !important;
}

.feature-box h3 span.subtitle { color: #BBB; }

.fbox-media a span {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -9px;
	text-align: center;
	z-index: 1;
	color: #FFF;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.testi-content p {
	line-height: 1.6 !important;
	font-weight: 400;
	padding: 0 40px;
}

.dark .testi-content p { color: #FFF; }

.dark .testi-meta {
	font-size: 18px;
	color: var(--cnvs-themecolor);
	letter-spacing: 1px;
	margin-top: 30px;
}

.testi-content p::before,
.testi-content p::after {
	position: absolute;
	color: var(--cnvs-themecolor);
	font-size: 100px;
	top: 0;
	line-height: 1.4;
	left: 0;
}

.testi-content p::after {
	left: auto;
	right: 0;
}

#oc-clients .oc-item {
	border-right: 1px solid rgba(255,255,255,0.15);
	opacity: .8;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

#oc-clients .oc-item:hover { opacity: 1; }



/*	Pricing
-----------------------------------------------------------------*/
.price-wrap {
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding: 0px;
	margin: 0 0 20px;
}

.price-header {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: baseline;
	align-items: baseline;
	position: relative;
	margin: 0 0 13px;
}

.price-name {
	padding-right: 10px;
}

.price-name a {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	color: var(--cnvs-themecolor);
	font-family: var(--cnvs-primary-font);
}

.price-dots {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

@media (max-width: 768px) {
	.price-dots {
		display: none;
	}
}

.separator-dots {
	width: 100%;
	border-bottom: 1px dashed #333;
}

.price-price {
	font-size: 20px;
	font-weight: 700;
	font-family: var(--cnvs-secondary-font);
	padding-left: 10px;
}

p.price-desc {
	font-size: 14px;
	color: #888;
}

.product .product-image a.shop-icon {
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	font-size: 22px;
	line-height: 1;
	-webkit-transition: top .3s ease;
	-o-transition: top .3s ease;
	transition: top .3s ease;
}

.product .product-image a.shop-icon i {
	padding: 15px;
	background-color: var(--cnvs-themecolor);
	color: #111;
	border-radius: 50%;
	-webkit-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}

.product .product-image a.shop-icon:hover i { background-color: #FFF; }

.product-title h3 a {
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
}

.product-desc {
	border-bottom: 2px dashed #ededed;
	border-left: 2px dashed #ededed;
	border-right: 2px dashed #ededed;
}

.product-price del {
	color: #BBB;
	font-weight: 700;
}

/* Border Form Design
---------------------------------------------------------------------------- */

.form-control.border-form-control {
	--cnvs-input-btn-padding-y : 		7px;
	--cnvs-input-btn-padding-x :		4px;
	--cnvs-input-btn-font-size :		17px;
	--cnvs-input-btn-border-color:      var(--cnvs-themecolor);
	--cnvs-input-font-family:      		var(--cnvs-primary-font);
}

.form-control.border-form-control::-moz-placeholder { font-weight: 300; color: #CCC; }
.form-control.border-form-control::-ms-input-placeholder {font-weight: 300; color: #CCC; }
.form-control.border-form-control::-webkit-input-placeholder { font-weight: 300; color: #CCC; }



/*	Primary Menu Header size
-----------------------------------------------------------------*/
@media (min-width: 992px) {

	nav.custom-hero-nav {
		display: block;
		margin-top: 60px;
	}

	nav.custom-hero-nav li { display: inline-block; }

	nav.custom-hero-nav li a {
		padding: 0 18px;
		font-size: 16px;
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 2px;
		color: #EEE;
		transition: color .3s ease;
	}

	.menu-link {
		font-size: 0.875rem;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-weight: 600;
	}

	nav.custom-hero-nav li.active a,
	nav.custom-hero-nav li:hover a { color: var(--cnvs-themecolor); }

	#header:not(.sticky-header) {
		pointer-events: none;
	}

	#header:not(.sticky-header) #header-wrap {
		z-index: -1;
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	#header.sticky-header #header-wrap {
		-webkit-transition: transform .3s ease;
		-o-transition: transform .3s ease;
		transition: transform .3s ease;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}

	.fbox-media a span {
		margin-top: -18px;
		font-size: 25px;
	}

	.price-wrap { padding: 0 25px; }
}



/* ----------------------------------------------------------------
	ADDITIVE: Canvas integration (not part of the ported stylesheet)
	1. Page-loading style (the demo page's own inline <style> block)
	2. #content chrome the block template owns
	3. Designed grooming-item single + collection pages
	4. Shop: WooCommerce product cards
	5. Store flow: basket + checkout
	6. Product single
-----------------------------------------------------------------*/

/*	1. Page loading
-----------------------------------------------------------------*/
.css3-spinner {
	height: 100vh;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: #bF9456;
}

@keyframes pulse {
	0% { opacity: 0; -webkit-transform: scale3d(.8, .8, .8); transform: scale3d(.8, .8, .8); }
	50% { opacity: 1; }
}

.infinite.animated.pulse {
	-webkit-animation-duration: 1.7s;
	animation-duration: 1.7s;
}

/*	2. Content section
-----------------------------------------------------------------*/
.barber #content { border-top: 8px solid var(--cnvs-themecolor); }

.barber.home #content > .content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

/*	3. Grooming items: single + collection pages
-----------------------------------------------------------------*/
.barber-single .entry { box-shadow: none; }

.barber-single .single-item-media .wp-block-post-featured-image { margin: 0; }

.barber-single .single-item-media img {
	width: 100%;
	height: auto;
}

.barber-item-category {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--cnvs-primary-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

a.barber-item-category:hover { color: #111; }

.barber-item-attributes {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 50px;
	margin: 0 0 30px;
	padding: 0 0 25px;
	border-bottom: 1px dashed #ededed;
	list-style: none;
}

.barber-item-attributes li {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

.barber-item-attributes .attr-label {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #999;
}

.barber-item-attributes .attr-value {
	font-family: var(--cnvs-secondary-font);
	font-size: 24px;
	font-weight: 700;
	color: #111;
}

.single-barber-item-cta { margin-top: 30px; }

.single-barber-item-footer {
	margin-top: 80px;
	padding-top: 60px;
	border-top: 1px dashed #ededed;
	text-align: center;
}

.single-barber-item-footer .related-barber-items { margin-top: 50px; }

.related-barber-items-title {
	margin-bottom: 40px;
	font-size: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.barber-archive .entry-title a:hover { color: var(--cnvs-themecolor); }


/*	4. Shop: WooCommerce product cards
	The shop band, the store page, /shop/ and the related-products carousel all
	render live products; these rules give the live card the demo's photo
	proportions and price colour.
-----------------------------------------------------------------*/

/* The demo's product photography is 15:16. Pinning the card image box to that
   ratio keeps every product at its intended scale whatever thumbnail size and
   cropping the destination store generates, both are per-site settings that
   travel with the store, not with the design (see "WHERE TO PIN IT" in
   woocommerce.css). `.barber` is the demo body class, so one rule reaches the
   home shop band, the store page, the product archives and the single's
   carousel without naming a class on an element the design leaves plain. */
.barber .product { --cnvs-product-card-ratio: 15 / 16; }

/* A plain (not reduced) price reads in the theme colour, exactly like the
   reduced <ins> price does. */
.barber .product-price > .woocommerce-Price-amount { color: var(--cnvs-themecolor); }

/* The product single is the theme's shared template, so its related-products
   carousel renders the DEFAULT card: title first, actions in a hover overlay.
   These give that card the demo's reading order and its themecolor action disc. */
.barber-single .oc-item .product-desc {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	text-align: center;
}

.barber-single .oc-item .product-desc .product-price {
	-ms-flex-order: 1;
	order: 1;
}

.barber-single .oc-item .product-desc .product-title {
	-ms-flex-order: 2;
	order: 2;
}

.barber-single .oc-item .product-image .bg-overlay-content {
	-ms-flex-align: center !important;
	align-items: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.barber-single .oc-item .product-image .bg-overlay .btn {
	width: 50px;
	height: 50px;
	font-size: 22px;
	color: #111;
	background-color: var(--cnvs-themecolor);
	border: 0;
}

.barber-single .oc-item .product-image .bg-overlay .btn:hover {
	color: #111;
	background-color: #FFF;
}

/* Store page only: each card carries its short description. */
.barber-shop-page .product-desc > p {
	display: block !important;
	margin: 0;
	padding: 4px 20px 16px;
	font-size: 14px;
	color: #888;
}


/*	5. Store flow: basket + checkout
-----------------------------------------------------------------*/
.barber-cart .button,
.barber-checkout .button {
	--cnvs-btn-color: var(--cnvs-themecolor);
	--cnvs-btn-color-dark: #222;
	font-family: var(--cnvs-primary-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: none;
	color: #111;
}

.barber-cart .button:hover,
.barber-checkout .button:hover {
	color: var(--cnvs-themecolor);
}

/* Buttons rendered inside a store FORM (coupon, update basket, add to basket)
   are painted white by the shop stylesheet: restate the demo's dark label. */
.barber-cart .woocommerce form button.button,
.barber-cart .woocommerce form input.button,
.barber-checkout .woocommerce form button.button,
.barber-checkout .woocommerce form input.button,
.barber-single .single-product button.single_add_to_cart_button.button {
	color: #111;
}

.barber-cart .woocommerce form button.button:hover,
.barber-cart .woocommerce form input.button:hover,
.barber-checkout .woocommerce form button.button:hover,
.barber-checkout .woocommerce form input.button:hover,
.barber-single .single-product button.single_add_to_cart_button.button:hover {
	color: var(--cnvs-themecolor);
	background-color: #222;
	opacity: 1;
}

.barber-cart .table.cart,
.barber-checkout .table.cart {
	border-bottom: 2px dashed #ededed;
}

.barber-cart .table.cart th,
.barber-checkout .table.cart th {
	font-family: var(--cnvs-primary-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #999;
}

.barber-cart .cart-product-name a,
.barber-checkout .cart-product-name a {
	font-family: var(--cnvs-primary-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #111;
}

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

.barber-cart .woocommerce-Price-amount,
.barber-checkout .woocommerce-Price-amount {
	font-family: var(--cnvs-secondary-font);
	font-weight: 700;
}

.barber-cart .order-total .woocommerce-Price-amount,
.barber-checkout .order-total .woocommerce-Price-amount {
	font-size: 22px;
	color: var(--cnvs-themecolor);
}

.barber-cart .cart-totals th,
.barber-checkout .cart-totals th { color: #111; }

/* A store with no shipping options yet has nothing to calculate, so the
   basket's shipping column is a lone heading: drop it until the shop owner
   adds a shipping zone, at which point the calculator brings it back. The
   totals panel keeps its place on the right either way. */
.barber-cart .canvas-cart-totals .col-lg-6:not(:has(form, table)) { display: none; }

.barber-cart .canvas-cart-totals .row {
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.barber-cart .form-control:focus,
.barber-cart .form-select:focus,
.barber-checkout .form-control:focus,
.barber-checkout .form-select:focus {
	border-color: var(--cnvs-themecolor);
	box-shadow: 0 0 0 1px rgba(var(--cnvs-themecolor-rgb), 0.25);
}

.barber-checkout .card {
	border: 2px dashed #ededed;
	border-radius: 0;
}

.barber-checkout .woocommerce-billing-fields h3,
.barber-checkout .woocommerce-shipping-fields h3,
.barber-checkout .woocommerce-additional-fields h3,
.barber-checkout #order_review_heading {
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.barber-checkout .required { color: var(--cnvs-themecolor); }


/*	6. Product single
-----------------------------------------------------------------*/
.barber-single .single-product .product-title h2 {
	font-size: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.barber-single .single-product .product-price {
	font-family: var(--cnvs-secondary-font);
	font-size: 26px;
	font-weight: 700;
	color: var(--cnvs-themecolor);
}

.barber-single .single-product .product-price del { font-size: 70%; }

.barber-single .single_add_to_cart_button {
	--cnvs-btn-color: var(--cnvs-themecolor);
	--cnvs-btn-color-dark: #222;
	font-family: var(--cnvs-primary-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: none;
	color: #111;
}

.barber-single .single_add_to_cart_button:hover { color: var(--cnvs-themecolor); }

.barber-single .canvas-tabs .nav-link {
	font-family: var(--cnvs-primary-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.barber-single .canvas-tabs .nav-link.active { color: var(--cnvs-themecolor); }

.barber-single .product-meta {
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #888;
}

.barber-single .product-meta a { color: var(--cnvs-themecolor); }

.barber-single .related-products-title,
.barber-single .wp-block-canvas-core-woo-related-products h4 {
	font-size: 22px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/*	Inner pages: header visible from the top
	The front page carries its own navigation inside the hero, so the header
	stays off screen until it sticks. Pages without that hero show it at rest.
-----------------------------------------------------------------*/
@media (min-width: 992px) {

	body:not(.home) #header:not(.sticky-header) { pointer-events: auto; }

	body:not(.home) #header:not(.sticky-header) #header-wrap {
		transform: translateY(0);
	}
}