/**
 * @author  Jory Hogeveen
 * @link    https://www.keraweb.nl/
 */

:root {
	--background-grey: #f1f1f1;
	--breadcrumbs-wrapper-margin: 0;
}

.wc-block-components-drawer__screen-overlay--is-hidden.is-loading {display: none;}

.wp-block-search__inside-wrapper.has-border-color {
	border-style: solid;
}

.price-length-suffix {
	color: var(--text-color);
	margin: 0 .5em;
}

.length-select {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 1em;
}
.length-select input, .length-select select {
	height: 2.5em;
}
.length-select input.error, .length-select select.error {
	border-color: red;
}

.site-header .wc-block-mini-cart__badge {
	color: #fff;
	padding: .5em;
}

/*pre, h1, h2, h3, h4, h5, h6, .flex-caption, .genesis-nav-menu {
	font-family: var(--accent-font);
}*/

.background-grey {
	background-color: var(--background-grey);
}

.site-header {
	padding: var(--base-spacing);
	border-bottom: 5px solid var(--base);
}
.site-header .wrap {
	padding: var(--base-spacing);
}

.sidebar-primary {
	padding: calc(var(--base-spacing)* 2) var(--base-spacing);
	background-color: var(--base-2);
	font-size: .875em;
}

.site-header .site-logo img {
	max-height: 55px;
	max-width: 100%;
	width: auto;
}


.breadcrumb, .woocommerce-breadcrumb {
	padding: .5rem 0 !important;
	font-size: .75em !important;
}

/**
 * BUTTONS
 */

.fa.round {
	border-radius: 100%;
	padding: 0;
	height: 1.5em;
	width: 1.5em;
	text-align: center;
	line-height: 1.5em;
	margin-right: .5em;
}

/*button::after,
input[type="button"]::after,
input[type="reset"]::after,
input[type="submit"]::after,
.button::after,
a.button::after,
.entry-content .button::after {
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 1.6em;
    line-height: 19px;
    vertical-align: text-bottom;
    margin-left: 5px;
	content: "\f105";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
button:empty::after,
input[type="button"]:empty::after,
input[type="reset"]:empty::after,
input[type="submit"]:empty::after,
.button:empty::after,
a.button:empty::after,
.entry-content .button:empty::after {
	margin: 0 5px;
}*/

/**
 * HEADER
 */

/*.title-area {
	padding: 0;
	float: none;
}*/

.w-100 {width: 100% !important;}
.p-0 {padding: 0 !important;}
.m-0 {margin: 0 !important;}

.wp-block-woocommerce-customer-account {padding: 0 !important;}

.wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}
.wp-block-search__inside-wrapper input {
	line-height: 1em;
	height: auto;
	padding: 0 1em;
}
.wp-block-search__button.has-icon {
	line-height: 1em;
	padding: 0.5em;
	margin: 0;
	border: 0;
	background: transparent;
}

/**
 * Language Dropdown.
 */
.ker-language-dropdown {position: relative; height: 42px; z-index: 10;}

.ker-language-dropdown ul.languages {
	padding: .5rem 1rem;
	margin: 0;
	box-shadow: none;
	height: auto;
	overflow: hidden;
	width: 100%;
	background: #222;
}
.ker-language-dropdown .lang-item {display: none; list-style: none; margin: 0;}
.ker-language-dropdown .lang-item span:empty {display: none;}
.ker-language-dropdown .lang-item.current-lang {display: block;}

.ker-language-dropdown.names-only .lang-item a {
	line-height: 1em;
	padding: 6px 15px;
	height: 32px;
	white-space: nowrap;
}
.ker-language-dropdown.names-only .lang-item a:hover {
}
.ker-language-dropdown.names-only .lang-item.current-lang {
}
.ker-language-dropdown.names-only .lang-item.current-lang a::before {
	margin-right: .3em;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f0ac"
}

.ker-language-dropdown.flags-only {width: 32px;}
.ker-language-dropdown.flags-only ul {text-align: center; border-radius: 30px; box-sizing: content-box;}
.ker-language-dropdown.flags-only .lang-item {font-size: 0; vertical-align: top;}
.ker-language-dropdown.flags-only .lang-item.current-lang {display: block; height: 32px;}
.ker-language-dropdown.flags-only .lang-item.current-lang img {margin-bottom: 0; height: 100% !important; max-width: none; border-radius: 100%;}

.ker-language-dropdown select {padding: 3px 5px; font-size: 12px;}
.ker-language-dropdown label.screen-reader-text {display: none;}
.ker-language-dropdown img {
	max-height: 1em;
	width: auto !important;
	vertical-align: text-top;
}

.ker-language-dropdown:hover ul {box-shadow: 0 0 10px rgba(0,0,0,0.15);}
.ker-language-dropdown.names-only:hover ul {padding-bottom: .2em;}
.ker-language-dropdown.flags-only:hover ul {}
.ker-language-dropdown:hover .lang-item:not(.current-lang) {display: block; margin-top: 3px;}


/**
 * MENU
 */

.nav-primary {
	display: none;
	padding: 0 var(--base-spacing);
}

.nav-primary .genesis-nav-menu a {
	padding: var(--base-spacing);
}

.nav-primary .sub-menu .menu-item {
	min-width: 200px;
}


/**
 * Blocks
 */

body .wc-block-grid.has-4-columns:not(.alignwide):not(.alignfull) .wc-block-grid__product,
body .wc-block-grid.has-5-columns.alignfull .wc-block-grid__product,
body .wc-block-grid .wc-block-grid__product,
body .wc-block-grid .wc-block-grid__product {
	font-size: .875em;
}
body .wc-block-grid .wc-block-grid__product .woocommerce-loop-product__link {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
body .wc-block-grid .wc-block-grid__product .woocommerce-loop-product__title {
	flex-grow: 1;
	font-size: 1.4em;
	margin: .5em 0;
}
body .wc-block-grid .wc-block-grid__product .price {
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 .5em;
	display: inline-block;
}

.woocommerce ul.products li.product .button {
	display: block;
}

/**
 * Popup
 */
.kerapopup .wrap {
	height: 70vh;
	background: #fff;
	overflow: hidden;
	margin-top: 15vh;
	box-shadow: 0 0 15px;
	border: 5px solid var(--base);
	padding: var(--base-spacing);
}
.kerapopup .wrap .popup-content {
	overflow-y: auto;
	height: 100%;
	padding: var(--base-spacing);
}
.kerapopup .wrap > .close::after {
	content: "\d7";
}
.kerapopup .wrap > .close {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 2rem;
	color: var(--text-color);
	text-align: center;
}

/**
 * Off Canvas
 */

[data-canvas=container] {
	background-color: var(--base) !important;
}
.ocs-trigger {
	width: 100% !important;
}
.ocs-slidebar[data-off-canvas] {
	/*background-color: var(--base);*/
	background-color: var(--accent);
	box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
#ocs-mobile-menu .nav-primary {
	display: block;
	padding: 0;
}
#ocs-mobile-menu {
	padding: 1em 0;
}
#ocs-mobile-menu .widget-area {
	display: flex;
	flex-wrap: wrap;
	padding: 1em;
	gap: .5em;
}
#ocs-mobile-menu .widget-area .widget {
	display: none;
	margin: 0;
}
#ocs-mobile-menu .widget-area .widget.widget_keralib_button {
	display: block;
}
#ocs-mobile-menu .widget-area .widget.widget_keralib_button .button {
	height: 32px;
	line-height: 14px;
	font-size: 14px;
	text-transform: uppercase;
	padding: 6px 15px;
}