/*
 Theme Name: KOLKMANNEN (TT4 child)
 Theme URI: https://kolkmannen.com/about-us/
 Description: Thema voor kolkmannen.com gebaseerd op thema Twenty Twenty-Four.
 Author: Suc6volleZakenvrouw
 Template: twentytwentyfour
 Version: 1.0.0
 Text Domain: twentytwentyfour-child
*/

html {
    scroll-behavior: smooth;
}

.width-thin {
  max-width: 500px;
}

.width-narrow {
  max-width: 750px;
}

.width-medium {
  max-width: 1200px;
}

.width-wide {
  max-width: 1700px;
}

.width-wrapper {
  max-width: 4096px;
}

.margin-horizontal-auto {
margin-left: auto;
margin-right: auto
}

.z-max {
	z-index: 999
}

*:focus {
  outline: none !important;
}

.inverse-color {
	filter: invert(1);	
}


/* Verbergen op mobiel (tot 768px) */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Verbergen op tablets (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Verbergen op desktop (≥ 768px) */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}


/*
#########################
	HEADER GENEUZEL
#########################
*/


/* Verwijder block-gap onder de header */
.wp-site-blocks > header.wp-block-template-part + * {
  margin-block-start: 0 !important;
}


/* Remove all underlines on all navigation links
	En voorkom text wrapping */
.wp-block-navigation a,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation a:active {
  text-decoration: none;
  font-weight: normal;
  white-space: nowrap;
}

/* Make only the active page link bold */
.wp-block-navigation .current-menu-item > a {
  font-weight: 600 !important;
}



/* Emphasize parents with a left bar */
@media (max-width: 599px) {
  .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	font-weight: 300;
    border-bottom: 1px solid var(--wp--preset--color--contrast-2, currentColor);
    margin-bottom: 0.2rem;*/
  }
}


/*
#############################################################

		WOOCOMMERCE STYLING

#############################################################
*/


/* dynamic width buy menu product pages */

@media (max-width: 767px) {
	.dynamic-width-add-to-cart {
		width: 100%;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.dynamic-width-product-gallery {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.dynamic-width-add-to-cart {
		width: 45%;
	}
	.dynamic-width-product-gallery {
		width: 55%;
		align-items: end
	}
}


/* Quantity selector */

 .wc-block-components-quantity-selector {
	color: black;
  	background-color: var(--wp--preset--color--contrast, #00000066);
}

.wc-block-components-quantity-selector__button:hover {
  	background-color: #DDDDDD !important;
}


/* Variations Dropdown Button */
.variations select,
table.variations td select,
select[name^="attribute_"] {
  background-color: var(--wp--preset--color--contrast, #0d0d0d) !important;
  color: var(--wp--preset--color--base, #f9f9f9) !important;
  border: 1px solid var(--wp--preset--color--base-2, #909090) !important;
  padding: 0.5rem 1rem 0.5rem 0.75rem !important;
  border-radius: 0.33rem !important;
  font-family: var(
    --wp--preset--font-family--outfit,
    "Outfit",
    sans-serif
  ) !important;
  font-size: var(--wp--preset--font-size--medium, 1.15rem) !important;
}

/* Variation dropdown options */
.variations select option,
table.variations td select option,
select[name^="attribute_"] option {
  background-color: var(--wp--preset--color--contrast, #0d0d0d) !important;
  color: var(--wp--preset--color--base, #f9f9f9) !important;
  font-family: var(
    --wp--preset--font-family--outfit,
    "Outfit",
    sans-serif
  ) !important;
}

/* Variation labels */
.variations label,
table.variations th label {
  color: var(--wp--preset--color--contrast, #f9f9f9) !important;
  font-family: var(
    --wp--preset--font-family--outfit,
    "Outfit",
    sans-serif
  ) !important;
}


/* dropdown menu bestemmingsland bij checkout page leesbaar maken */
.wc-block-checkout select.wc-blocks-components-select__select option {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.woocommerce .my-plugin-wrapper-class img.h-full,
.woocommerce-page .my-plugin-wrapper-class img.h-full {
  height: 100%;
}