/**
 * Plugin front end styles
 *
 * @package Storefront_Pro_Blocks
 * @version 1.0.0
 */

@import "grids";
@import "cards";

.f0 {
	font-size: 0;
}

div.col-full {
	max-width: 66.4989378333rem;
}

.sfpbk-item-shadow a[class*="sfbk-grid-i"],
.sfpbk-item-shadow .sfp-bk-masonry-item {
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

.sfp-blocks-product-hero {
	&.min-vh-100 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	*:not(.button) {
		color: inherit;
	}

	.col-full {
		> div {
			flex: 1;
		}

		* {
			font: inherit;
		}

		h2 {
			font-size: 1.6em;
		}
	}

	.quantity br {
		display: none;
	}

	.product-image img {
		width: 100%;
	}

	&.sfb-ph-small-image {
		.product-image {
			flex: .75;
		}
	}

	&.sfb-ph-large-image {
		.product-image {
			flex: 1.25;
		}
	}

	form.cart {
		.quantity {
			float: left;
			margin-right: 0.875em;
		}

		select, button.button, input {
			background: none !important;
			color: inherit !important;
			box-shadow: none;
			border: 3px solid;
			border-radius: 5px;
			padding: 7px 16px;
			height: auto;
		}

		select {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}

		span.sfblocks-select-wrap {
			position: relative;
			display: inline-block;

			&:after {
				display: inline-block;
				margin: 0 0 0 -29px;
				position: relative;
				top: .2em;
				font: 900 20px/20px 'Font Awesome 5 Free';
				line-height: inherit;
				vertical-align: baseline;
				content: "\f107";
			}

			select {
				padding-right: 38px !important;
				position: relative;
				z-index: 1;
				max-width: 100%;
			}
		}

		&:after {
			content: '';
			display: block;
			clear: both;
		}
	}

	.quantity + button {
		float: left;
	}

	div.product_meta {
		border: none;
		padding-top: 0;
		margin-top: 1.6em;

		&:before {
			content: '';
			display: block;
			border-top: 1px solid;
			opacity: .2;
			margin-bottom: .7em;
		}
	}

	table tbody td {
		background: none;
		vertical-align: middle;
	}
}

.sfp-blocks-products {
	div, p, li, ul, a:not(.button), h1, h2, h3, h4, h5, h6, .star-rating span::before {
		color: inherit;
	}

	ul.products {
		margin-left: 0;

		li.product {
			h3, h2,
			.price {
				color: inherit;
				font: inherit;
			}

			h2 {
				font-size: 1.6em;
			}
		}
	}
	.slides li.caxton-slide {
		justify-content: flex-start;

		.summary {
			width: 100%;
		}
	}

	form.cart {
		display: flex;
		justify-content: center;

		button {
			margin-left: 1em;
		}
	}
}

.sfp-blocks-hide_title h2,
.sfp-blocks-hide_title h3,
.sfp-blocks-hide_price .price,
.sfp-blocks-hide_button .add_to_cart_button {
	display: none !important;
}

.sfpbk-grid-desc {
	max-height: 80px;
	font-size: 13px;
	line-height: 16px;
	overflow: hidden;
}


.product-table-block-product-hero {
	&.min-vh-100 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	* {
		color: inherit;
	}

	.col-full {
		> div {
			flex: 1;
		}

		* {
			font: inherit;
		}

		h2 {
			font-size: 1.6em;
		}
	}

	.quantity br {
		display: none;
	}

	.product-image img {
		width: 100%;
	}

	&.sfb-ph-small-image {
		.product-image {
			flex: .75;
		}
	}

	&.sfb-ph-large-image {
		.product-image {
			flex: 1.25;
		}
	}

	form.cart {
		.quantity {
			float: left;
			margin-right: 0.875em;
		}

		select, button.button, input {
			background: none !important;
			color: inherit !important;
			box-shadow: none;
			border: 3px solid;
			border-radius: 5px;
			padding: 7px 16px;
			height: auto;
		}

		select {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}

		span.sfblocks-select-wrap {
			position: relative;
			display: inline-block;

			&:after {
				display: inline-block;
				margin: 0 0 0 -29px;
				position: relative;
				top: .2em;
				font: 900 20px/20px 'Font Awesome 5 Free';
				line-height: inherit;
				vertical-align: baseline;
				content: "\f107";
			}

			select {
				padding-right: 38px !important;
				position: relative;
				z-index: 1;
				max-width: 100%;
			}
		}

		&:after {
			content: '';
			display: block;
			clear: both;
		}
	}

	.quantity + button {
		float: left;
	}

	div.product_meta {
		border: none;
		padding-top: 0;

		&:before {
			content: '';
			display: block;
			border-top: 1px solid;
			opacity: .2;
			margin-bottom: .7em;
		}
	}

	table tbody td {
		background: none;
		vertical-align: middle;
	}
}

.product-table-block-products {
	* {
		color: inherit;
	}

	ul.products li.product {
		h3, h2,
		.price {
			color: inherit;
			font: inherit;
		}

		h2 {
			font-size: 1.6em;
		}
	}

	.slides li.caxton-slide {
		justify-content: flex-start;

		.summary {
			width: 100%;
		}
	}
}

.product-table-block-hide_title h2,
.product-table-block-hide_title h3,
.product-table-block-hide_price .price,
.product-table-block-hide_button .button {
	display: none !important;
}

.sfpbk-product-table-wrap {
	select.sfpbk-pt-filter {
		margin: .5em 1em .5em 0;
	}
}

.product-table-block-products-table {
	$border: 1px solid rgba(0, 0, 0, 0.25);
	border: none;
	border-bottom: $border;

	.sfpbk-no-products-label {
		display: none;

		th {
			text-align: center;
		}
	}

	td {
		a {
			color: inherit !important;
		}
	}

	img.wp-post-image {
		margin: 4px 0;
		width: 100px;
	}

	[data-terms]:first-of-type img.wp-post-image {
		margin: 8px 0 4px;
	}

	[data-terms]:last-of-type img.wp-post-image {
		margin: 4px 0 8px;
	}

	th, td {
		border: none;
		text-align: left;
		vertical-align: middle;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {
			padding-right: .25em;
		}
	}

	th:last-child {
		padding-right: .7em;
	}

	.tr {
		text-align: right;
	}

	.sfpbk-pt-head th {
		background: rgba(0, 0, 0, 0.03);
		border-bottom: $border;
	}

	th.sfpbk-pt-img {
		color: rgba(0, 0, 0, 0);
	}

	th.sfpbk-pt-desc {
		width: 50%;
	}

	.sfpbk-pt-action td {
		border-top: $border;
		text-align: center;
	}

	.sfpbk-chkbx, input[type='number'], select {
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		-khtml-appearance: none;
		appearance: none;
		display: inline-block;
		border-radius: 0;
		border: 2px solid rgba(0, 0, 0, 0.25);
		background-clip: content-box;
		font-size: 16px;
		height: 2.5em;
		margin: 0;
		padding: 0.25em;
		line-height: 2em;
		position: relative;
		background: rgba(255, 255, 255, .7);
		vertical-align: middle;
	}

	select {
		margin-right: .45em;
		padding: .25em .5em;
	}

	input[type="checkbox"] {
		position: absolute;
		opacity: 0;

		+ .sfpbk-chkbx {
			height: 1.6em;
			width: 1.6em;
			margin: .45em;
		}

		~ input {
			display: none;
		}

		~ img {
			padding-left: 16px;
		}

		&:checked {
			+ .sfpbk-chkbx {
				display: none;;
			}

			~ input {
				display: inline-block;
				width: 2.5em;
			}
		}
	}
}

.sfpbk-no-products {
	tr {
		display: none;

		&.sfpbk-pt-head,
		&.sfpbk-no-products-label {
			display: table-row;
		}
	}
}

.sfpbk-quote-dialog {
	background: rgba(0, 0, 0, 0.3);
	display: none;
	position: fixed;

	:target & {
		display: flex;
	}

	> .sfpbk-fields {
		width: 320px;
		margin: auto;
		background: #ffffff;
		padding: 1em;
		border: 1px solid;

		> br {
			display: none;
		}

	}

	input[type], button, textarea {
		display: block;
		width: 100%;
		line-height: 2em;
		color: inherit !important;
		background: #fff;
		border: 1px solid;
		padding: .5em .88em;

		&:not(:last-child) {
			margin-bottom: .7em;
		}
	}

	::-webkit-input-placeholder { /* Edge */
		color: inherit;
		opacity: .7;
	}

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: inherit;
		opacity: .7;
	}

	::placeholder {
		color: inherit;
		opacity: .7;
	}
}

.sfpbk-list-product {
	margin-bottom: 1em;
	border: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 3px;
	font-size: 14px;
	text-align: left;

	.cart {
		p {
			display: inline;
		}

		button, input {
			font-size: inherit;
			line-height: 1.25;
			padding: .88em .88em !important;
			min-height: 0 !important;
		}

		input {
			border: none;
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
			width: 4.25em;
		}

		button {
			margin-left: .5em;
			display: inline-block;
		}

		br {
			display: none;
		}
	}

	.quantity {
		float: left;
	}

	.star-rating {
		display: none;
	}

	&:after {
		display: block;
		content: '';
		clear: both;
	}

	.product_title {
		clear: none;
		font-size: 1.2em;
		line-height: 1;
	}

	img.wp-post-image {
		margin: 0;
		display: block;
		border-radius: 2px 0 0 2px;
	}

	p.price {
		margin-bottom: .8em;
	}

	.product-desc {
		line-height: 1.6;
		font-size: .9em;
		display: none;
		overflow: hidden;
		margin-bottom: 1em;

		p {
			font-size: inherit !important;
			line-height: inherit !important;
			margin: 0;
		}
	}

	form.cart {
		margin: 0;
	}
}

.sfpbk-list-product-img {
	width: 120px;
}

.sfpbk-list-product-summary {
	width: calc(100% - 120px);
	padding: .5em;

	p:last-child {
		margin: 0;
	}
}

.sfp-pagination {
	display: flex;
	justify-content: center;
	text-align: center;
	margin: .5em 0 1em;

	.sfp-page-link {
		padding: 0 1em;
		text-decoration: none !important;
		color: inherit;
	}
}

.sfp-pagination-boxes .sfp-page-link {
	padding: 0;
	width: 2.5em;
	margin: 0 5px;
	font: inherit;
	line-height: 2.5;
}

.sfp-pagination-boxes .sfp-page-link:not( .button ) {
	border: 1px solid;
}

.sfp-pagination-boxes span.sfp-page-link.button {
	cursor: default;
}

.sfbk-category-filter a {
	text-decoration: none !important;
}

.sfbk-btn {
	border: 0;
	cursor: pointer;
	line-height: 1;
	padding: 0 .25em;
	text-decoration: none;
	display: inline-block;
	-webkit-appearance: none;

	&.br2 {
		padding-left: .4em;
		padding-right: .4em;
	}

	&.br-pill {
		padding-left: .7em;
		padding-right: .7em;
	}
}

.sfbk-category-filter {
	position: relative;

	li {
		display: inline-block;
	}

	ul.slides {
		margin: 0;
		padding: 0;

		li {
			margin-bottom: 3px;
			padding: 0 2px;
			width: auto !important;

			a {
				line-height: 1.6em;
				display: inline-block;
				background: var(--sfbk-bg);
				color: var(--sfbk-clr);
			}
		}
	}

	.flex-viewport ul.slides li {
		margin: 0;
	}

	.flex-direction-nav {
		height: 0;
		margin: 0;

		a {
			position: absolute;
			top: 0;
			display: inline-block;
			width: 1.6em;
			text-indent: -9999px;
			background: var(--sfbk-bg);
			color: var(--sfbk-clr);
			padding: 0 0.5em;
			box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);

			&:focus {
				outline: none;
			}

			&.flex-disabled {
				display: none;
			}

			&:before {
				margin-top: .52em;
				height: .5em;
				width: .5em;
				content: "";
				display: block;
				float: right;
				border-bottom: 2px solid;
				border-left: 2px solid;
				transform: rotate(45deg);
			}

			&.flex-prev {
				padding-right: 0.34em;
				left: 0;
				border-right: 2px solid;
			}

			&.flex-next {
				padding-right: 0.55em;
				right: 0;
				border-left: 2px solid;

				&:before {
					transform: rotate(225deg);
				}
			}
		}
	}

	&.sfbk-category-filter-slider {
		ul.slides {
			display: block;
		}
	}

	&.no-direction-nav {
		.flex-viewport ul {
			display: flex;
			width: auto !important;
		}

		.flex-direction-nav {
			display: none;
		}
	}
}

.sfbk-flip-wrap {

	margin: -7px;

	.sfbk-flip {
		padding: 0;
		margin: 7px;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	}

	.caxton-slider {
		.slides li.sfbk-flip-slide {
			align-items: stretch;
			padding: 0;

			> * {
				flex: 1 1 100%;
				padding: 3em 2em;
			}

			.sfbk-flip-img {
				background: center/cover;
			}

			.sfbk-flip-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				h2 {
					margin-top: 0;
				}
			}
		}

		ol.flex-control-paging {
			position: relative;
		}

		.flex-control-nav a {
			box-shadow: none;
			height: 11px;
			width: 11px;
			border: 3px solid #777;

			&.flex-active {
				background: #777;
			}
		}
	}
}

.sfbk-sliding-tiles {
	--gap: 16px;
	--item-size: 946px;
	--slide-height: calc(100vh);

	position: relative;
	padding: var(--gap) calc(var(--gap) / 2);

	* {
		outline-color: inherit;
	}

	.sfbk-sliti-col {
		width: 50%;
		float: left;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.sfbk-sliti-col-reverse {
		position: sticky;
		right: 0;
		top: 0;
		float: right;
		max-height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column-reverse;
	}

	.sfbk-sliti-item {
		display: block;
		position: relative;
		outline: 2px solid;
		outline-color: inherit;
		outline-offset: calc(-.5 * var(--gap));
		text-decoration: none !important;

		a {
			text-decoration: none !important;
		}

		&:before {
			display: none;
		}

		&:after {
			content: '';
			display: block;
			padding-top: calc(100% - var(--gap));
			margin: calc(var(--gap) / 2);
			background: var(--sliti-tile-clr);
		}
	}

	.sfbk-sliti-item-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 32px);
		text-align: center;

		img {
			max-width: 56%;
			margin: auto;
		}
	}

	a.added_to_cart.wc-forward {
		display: none;
	}

	.sliti-add-to-cart {

		&, a.button {
			width: 3em;
			height: 3em;
			line-height: 3em;
			padding: 0;
			border-radius: 50%;
			position: absolute;
			right: 2em;
			bottom: 2em;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;
			font-size: .8em;
		}

		svg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			fill: var(--sliti-btn-clr) !important;
		}

		a.button {
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 0;
			margin: auto;
			background: none;
			box-shadow: none;
			outline: none;
			border: none;
			&.loading {
				opacity: 1;
			}

			&:before,
			&:after {
				margin: 0;
				display: block;
				position: absolute;
				bottom: .8em;
				right: .8em;
				transform: translate(50%, 50%) rotate(-30deg);
				content: "";
				transition: .5s all;
				border-radius: 50%;
				padding: .9em;
				border: .2em solid;
				color: var(--sliti-tile-clr);
				background-color: var(--sliti-btn-clr);
			}

			&:after {
				padding: 0;
				border: 1.2em solid;
				border-top-width: 0 !important;
				border-right-width: 0 !important;
			}

			&.loading:after {
				transform: translate(50%, 50%) rotate(-30deg) scale(.1);
				transition: all 5s cubic-bezier(0,0,.5,1);
			}

			&.added:after {
				margin-bottom: .1em;
				border: 0.3em solid;
				padding: 0.15em 0.4em;
				border-radius: 0;
			}
		}
	}

	.sfbk-sliti-title {
		margin: 0;
		font-size: calc(5px + 3vw);
	}

	.sfbk-sliti-price {
		ins {
			text-decoration: inherit;
		}

		del {
			display: none;
		}

	}
}

.sfp-block-mini-cart {
	position: relative;
	display: inline-block;

	.sfp-block-mini-cart-link {
		text-decoration: none !important;
		svg {
			height: 1em;
			width: auto;
			vertical-align: middle;
			fill: currentColor;
		}
		.sfp-mini-cart-icon-start {
			margin-right: .5em;
			float: left;
		}
		.sfp-mini-cart-icon-end {
			margin-left: .5em;
			float: right;
		}

		.count {
			opacity: .7;
		}
	}

	.sfp-block-mini-cart-content {
		display: none;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 999;
		background: #fff;
		margin: 0;

		&.sfp-block-mini-cart-left {
			right: auto;
			left: 0;
		}

		&.sfp-block-mini-cart-center {
			right: 50%;
			transform: translateX( 50% );
		}

		li {
			display: block;
			padding: 1em;
			min-width: 250px;
		}
	}

	&:hover {
		.sfp-block-mini-cart-content {
			display: block;
		}
	}
}

@media (max-width: 768px) {
	.sfpbk-list-product {
		form.cart {
			button, .quantity .qty {
				padding: .4em .5em !important;
			}

			.quantity .qty {
				width: 3em;
			}
		}
	}
	.sfbk-flip-wrap {
		.caxton-slider {
			.slides li.sfbk-flip-slide {
				flex-wrap: wrap;

				> * {
					flex: 1 1 100%;
					padding: 2em 1.6em;
				}

				.sfbk-flip-img {
					padding: 100% 0 0;
				}
			}
		}
	}
}

@media (max-width: 376px) {
	.sfpbk-list-product {
		.product_title {
			font-size: 1.1em;
		}

		form.cart {
			button, .quantity .qty {
				font-size: 12px;
				font-weight: 400;
			}
		}
	}
	.sfbk-flip-wrap {
		.caxton-slider {
			.slides li.sfbk-flip-slide {
				> * {
					padding: 1em 4vw;
				}
			}
		}
	}
}

@media (min-width: 500px) {
	.sfpbk-list-product-summary {
		width: calc(100% - 160px);
		padding: .9em;
	}
	.sfpbk-list-product {
		.star-rating {
			display: block;
			float: right;
		}

		.product-desc {
			display: block;
		}

		.sfpbk-list-product-img {
			width: 160px;
		}

		.product_title {
			font-size: 1.4em;
		}
	}
}

@media screen and (min-width: 60em) {
	.sfpbk-list-product-summary {
		width: calc(100% - 300px);
		padding: 1em;
	}
	.sfpbk-list-product {
		p.price {
			margin-bottom: 1.6em;
		}

		.product-desc {
			font-size: 1em;
		}

		.sfpbk-list-product-img {
			width: 300px;
		}

		.product_title {
			font-size: 2em;
			line-height: 1.4;
		}

		.sfpbk-list-product-summary {
			width: calc(100% - 300px);
		}
	}
}