/* Mobiele opmaak van vuursteen.be. De id's zijn nodig om de stijlen van het thema te overschrijven. */

/* Het thema schuift de inhoud 50 px onder de banner. Zonder banner zou ze onder de header en het logo schuiven. */
body.single-product #stringr-woocommerce-messages-top {
	margin-top: 0;
	padding-top: 15px;
	padding-bottom: 0;
}

body.single-product #stringr-woocommerce-single-top {
	margin-top: 0;
	padding-top: 15px;
}

/* Knoppen in het lettertype van de site. */
#boxed-layout-stringr button.button {
	font-family: inherit;
}

/* Zoekveld en sorteren in dezelfde stijl op alle schermen. Het thema zet hier zelf !important. */
#boxed-layout-stringr #main-container-stringr .wp-block-search__inside-wrapper {
	border: 2px solid #aaa;
	border-radius: 5px;
}

#boxed-layout-stringr #main-container-stringr .woocommerce-ordering select {
	border: 2px solid #aaa !important;
	border-radius: 5px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
	background-position: right 12px center !important;
	background-repeat: no-repeat !important;
	background-size: 10px 6px !important;
	color: #595959 !important;
	font-weight: 400 !important;
	appearance: none;
	-webkit-appearance: none;
}

/* Vermelding van MaxMind, heel klein in dezelfde kleur als de onderste band van de voettekst. */
.vuursteen-bronvermelding {
	margin: 0;
	padding: 0 64px 10px;
	background: #222;
	color: #aaa;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}

.vuursteen-bronvermelding a {
	color: inherit;
}

@media (max-width: 767px) {

	/* Logobalk op alle pagina's: 85 px hoog, menu en winkelmandje met tikdoelen van minstens 44 px. */
	#boxed-layout-stringr #logo-stringr img {
		padding-top: 7px;
		padding-bottom: 7px;
	}

	#boxed-layout-stringr #stringr-shopping-cart-count {
		pointer-events: none; /* De container ligt anders over het menupictogram. */
	}

	#boxed-layout-stringr #stringr-shopping-cart-count a {
		pointer-events: auto;
	}

	#boxed-layout-stringr #stringr-shopping-cart-count a.stringr-count-icon-nav i.shopping-cart-header-icon {
		padding: 30px 10px;
	}

	#boxed-layout-stringr #stringr-shopping-cart-count span.stringr-cart-count {
		top: 34px;
		width: 16px;
		height: 16px;
		font-size: 10px;
		line-height: 16px;
	}

	#boxed-layout-stringr .mobile-menu-icon-stringr {
		padding: 32px 0 30px 22px;
	}

	/* Lagere banner op alle pagina's die er een hebben. */
	#boxed-layout-stringr #stringr-title-container {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#boxed-layout-stringr #stringr-title-block {
		margin-bottom: 16px;
	}

	#boxed-layout-stringr #stringr-title-block h1.page-title {
		font-size: 24px;
		line-height: 30px;
	}

	/* De terug-naar-bovenknop ligt over de inhoud. Het script van het thema toont ze met een inline stijl. */
	#stringr-scroll-top {
		display: none !important;
	}

	/* Leesbare tekst, minstens 4,5:1. De accentkleur #fe7e4c blijft overal staan. */
	#boxed-layout-stringr #content-stringr,
	#boxed-layout-stringr .elementor-widget-text-editor,
	#boxed-layout-stringr .elementor-tab-content,
	#boxed-layout-stringr .woocommerce-product-details__short-description {
		color: #595959;
	}

	/* Productlijsten in twee kolommen: thuispagina, webshop, categorieën en suggesties. */
	#boxed-layout-stringr ul.products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 10px;
	}

	#boxed-layout-stringr ul.products::before,
	#boxed-layout-stringr ul.products::after {
		display: none;
	}

	#boxed-layout-stringr ul.products li.product {
		display: flex;
		flex-direction: column;
		float: none;
		width: auto;
		margin: 0;
	}

	#boxed-layout-stringr ul.products li.product .stringr-woocommerce-index-content-bg {
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 10px 8px;
	}

	#boxed-layout-stringr ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
		line-height: 20px;
	}

	#boxed-layout-stringr ul.products li.product .price {
		font-size: 15px;
	}

	#boxed-layout-stringr ul.products li.product a.button {
		display: flex;
		box-sizing: border-box;
		min-height: 44px;
		margin-top: auto;
		padding: 10px 6px;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		line-height: 16px;
	}

	/* Keuzelijsten, ook bij het afrekenen, en zoekveld en sorteren boven de productlijst. */
	#boxed-layout-stringr .select2-selection--single {
		box-sizing: border-box;
		height: 44px;
		margin-bottom: 0;
		border: 2px solid #aaa !important;
		border-radius: 5px !important;
	}

	#boxed-layout-stringr .select2-container {
		height: 44px;
	}

	#boxed-layout-stringr .select2-selection--single .select2-selection__rendered {
		height: 40px;
		color: #595959 !important;
		font-size: 16px !important;
		font-weight: 400;
		padding-top: 0;
		padding-left: 12px !important;
		padding-bottom: 0;
		line-height: 40px;
	}

	#boxed-layout-stringr .sidebar .select2-selection__clear {
		display: none;
	}

	#boxed-layout-stringr .sidebar {
		margin-bottom: 10px;
	}

	#boxed-layout-stringr #main-container-stringr form.wp-block-search {
		margin-bottom: 16px;
	}

	#boxed-layout-stringr #main-container-stringr .wp-block-search__inside-wrapper {
		box-sizing: border-box;
		height: 44px;
		padding: 2px;
	}

	#boxed-layout-stringr #main-container-stringr .wp-block-search__input {
		height: 36px;
		padding: 0 12px;
		border: 0;
	}

	#boxed-layout-stringr #main-container-stringr .wp-block-search__button {
		height: 36px;
		padding: 0 12px;
		border-radius: 3px;
	}

	/* Categorie en sorteren naast elkaar. Het aantal resultaten valt weg om plaats te sparen. */
	#boxed-layout-stringr .woocommerce-result-count {
		display: none;
	}

	body.post-type-archive-product #boxed-layout-stringr .sidebar,
	body.tax-product_cat #boxed-layout-stringr .sidebar,
	body.tax-product_tag #boxed-layout-stringr .sidebar {
		width: calc(60% - 5px);
	}

	/* Zonder resultaten is er geen sorteren: de keuzelijst krijgt de hele rij. */
	body.search-no-results #boxed-layout-stringr .sidebar {
		width: 100%;
	}

	#boxed-layout-stringr #main-container-stringr .woocommerce-ordering {
		position: absolute;
		top: -54px;
		right: 0;
		width: calc(40% - 5px);
		margin: 0;
	}

	#boxed-layout-stringr #main-container-stringr .woocommerce-ordering select {
		width: 100%;
		height: 44px;
		padding: 0 26px 0 12px;
		font-size: 16px; /* Kleiner laat iPhones inzoomen bij een tik. */
	}

	/* Meldingen in winkelmand en afrekenen nemen minder plaats in. */
	#boxed-layout-stringr #content-stringr .woocommerce-message,
	#boxed-layout-stringr #content-stringr .woocommerce-info {
		margin-bottom: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 15px;
		line-height: 22px;
	}

	/* Voettekst: leesbaar op de grijze achtergrond. */
	#boxed-layout-stringr #stringr-footer-page-builder p,
	#boxed-layout-stringr #stringr-footer-page-builder li,
	#boxed-layout-stringr #stringr-footer-page-builder .elementor-widget-text-editor {
		color: #4d4d4d;
	}

	#boxed-layout-stringr .woocommerce-form-register label {
		color: #595959;
	}

	/* Nieuwsbriefformulier blijft binnen de kolom. */
	#boxed-layout-stringr .mc4wp-form-fields,
	#boxed-layout-stringr .mc4wp-form-fields input {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Contactformulier over de volle breedte. */
	#boxed-layout-stringr .wpcf7 input[type="text"],
	#boxed-layout-stringr .wpcf7 input[type="email"],
	#boxed-layout-stringr .wpcf7 textarea {
		width: 100%;
	}

	/* Productpagina: kleinere titel. */
	body.single-product #stringr-woocommerce-single-top h1.product_title {
		padding-top: 0;
		font-size: 26px;
		line-height: 32px;
	}

	/* Productpagina: aantal en koopknop op één rij. Andere velden in het formulier krijgen een eigen rij. */
	#boxed-layout-stringr form.cart:not(.variations_form),
	#boxed-layout-stringr .woocommerce-variation-add-to-cart {
		display: grid;
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 10px;
		margin-bottom: 0;
	}

	#boxed-layout-stringr form.cart:not(.variations_form)::before,
	#boxed-layout-stringr form.cart:not(.variations_form)::after,
	#boxed-layout-stringr .woocommerce-variation-add-to-cart::before,
	#boxed-layout-stringr .woocommerce-variation-add-to-cart::after {
		display: none;
	}

	body.single-product form.cart:not(.variations_form) > *,
	body.single-product .woocommerce-variation-add-to-cart > * {
		grid-column: 1 / -1;
	}

	body.single-product form.cart .quantity {
		grid-column: 1;
		float: none;
		margin: 0;
	}

	#boxed-layout-stringr form.cart button.single_add_to_cart_button {
		grid-column: 2;
		float: none;
		width: 100%;
		padding-right: 10px;
		padding-left: 10px;
	}

	/* Webshop: de beschrijving rond het zoekveld neemt geen extra plaats in. */
	#boxed-layout-stringr #main-container-stringr .page-description,
	#boxed-layout-stringr #main-container-stringr .page-description p {
		margin: 0;
	}

	/* Telefoonnummer op één regel. */
	#boxed-layout-stringr a[href*="wa.me"] {
		white-space: nowrap;
	}

	/* Tekst bij de nieuwsbrief. */
	#boxed-layout-stringr .mailchimp-newsletter label {
		color: #595959;
	}

	/* Productpagina: minder leegte tussen de koopknop en de tabs. */
	#boxed-layout-stringr #stringr-woocommerce-single-top .summary {
		margin-bottom: 0;
	}

	/* Productpagina: geen links die van de aankoop wegleiden. */
	body.single-product #stringr-woocommerce-single-top .product_meta {
		display: none;
	}

	/* Productpagina: leesbare levertekst en reviewlink met een tikdoel van 44 px. */
	body.single-product #stringr-woocommerce-single-top .summary .stock {
		color: #5f5a00;
	}

	body.single-product #stringr-woocommerce-single-top a.woocommerce-review-link {
		display: inline-block;
		margin: -14px 0;
		padding: 14px 0;
		color: #666;
		font-size: 14px;
	}
}

/* Smalle toestellen: logo, menu en winkelmandje blijven op één rij. Ze hebben samen 369 px nodig. */
@media (max-width: 369px) {

	#boxed-layout-stringr #logo-stringr img {
		width: 190px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* Nog smaller: de knoptekst op één regel, categorie en sorteren onder elkaar. */
@media (max-width: 359px) {

	#boxed-layout-stringr form.cart button.single_add_to_cart_button {
		padding-right: 4px;
		padding-left: 4px;
		font-size: 14px;
	}

	/* Categorie en sorteren onder elkaar, zodat lange namen passen. */
	body.post-type-archive-product #boxed-layout-stringr .sidebar,
	body.tax-product_cat #boxed-layout-stringr .sidebar,
	body.tax-product_tag #boxed-layout-stringr .sidebar {
		width: 100%;
	}

	#boxed-layout-stringr #main-container-stringr .woocommerce-ordering {
		position: static;
		width: 100%;
		margin: 0 0 16px;
	}
}