/* 20260817115700 - v2 */
.gui,
.gui-block-linklist li a {
  color: #666666;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #848484;
}

.gui a {
  color: #0a8de9;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #0a8de9;
  box-shadow: 0 0 2px #0a8de9;
}

.gui-select.gui-focus .gui-handle {
  border-color: #0a8de9;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #8d8d8d;
}

.gui-block-title {
  color: #333333;
  background-color: #ffffff;
}

.gui-content-title {
  color: #333333;
}

.gui-form .gui-field .gui-description span {
  color: #666666;
}

.gui-block-inner {
  background-color: #f4f4f4;
}

.gui-block-option {
  border-color: #ededed;
  background-color: #f9f9f9;
}

.gui-block-option-block {
  border-color: #ededed;
}

.gui-block-title strong {
  color: #333333;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #cbcbcb;
}

.gui ul.gui-products li {
  border-color: #dcdcdc;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #dcdcdc;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #dcdcdc;
}

.gui-block-content .gui-table {
  border-color: #ededed;
}

.gui-table thead tr th {
  border-color: #cbcbcb;
  background-color: #f9f9f9;
}

.gui-table tbody tr td {
  border-color: #ededed;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #8d8d8d;
  background-color: #ffffff;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #8d8d8d;
}

.gui-number .gui-handle a {
  background-color: #ffffff;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #76c61b;
}

/* custom */
/* --------- Fonts & icons --------- */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}

.icon_fill.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24;
  color: var(--color-corporate1-std);
}

/* --------- Variables --------- */
:root {
  /* Fonts */
  --font-default: "Source sans", sans-serif;
  --font-weight-default: 400;
  --font-weight-medium: 500;
  --font-size-default: 15px;
  --font-size-default-uppercase: 14px;
  --font-title: "Montserrat", sans-serif;
  --font-weight-title: 800;
  
  /* Colors */
	--color-white-std: #ffffff;
  --color-black-std: #363636;
  
  --color-lightgrey-std: #F4F4F4;
  
  --color-grey-std: #9799aa;
  
  --color-lightgreen-std: #eff7eb;
  
  --color-corporate1-std: #227533; /* Darkgreen */
  
  --color-corporate2-std: #97c21d; /* Lightgreen */
  
  --color-corporate3-std: #14b3e6; /* Lightblue*/

  --color-cta2-std: #3DB70F; /* XXX */
  
  --color-cta1-std: #40B3D5; /* XXX */
  
  --border-radius-xs: 5px;
  --border-radius-sm: 10px;
  --border-radius-md: 15px;
  --border-radius-lg: 50px;
  --border-radius-round: 100px;
  
  --box-shadow-subtle: 1px 1px 4px 1px rgba(0,0,0,0.08);
  --box-shadow-std: 1px 1px 3px 1px rgba(0,0,0,0.15);
  --box-shadow-above: 0px -2px 7px 1px rgba(0,0,0,0.15);
  
}

/* Bootstrap overwrite */
.btn {
	border-radius: 50px;
  padding: 15px 20px;
  line-height: 1;
}

.btn-primary {
	background-color: var(--color-corporate1-std);
  border-color: var(--color-corporate1-std);
  color: var(--color-white-std);
}
      
.btn-outline-primary {
  border-color: var(--color-corporate1-std);
  color: var(--color-corporate1-std);
}

/* Global */
.color_grey_std {
  color: var(--color-grey-std);
}

.color_white_std {
  color: var(--color-white-std);
}

.color_corporate1_std {
  color: var(--color-corporate1-std);
}

.bg_image_std {
	background-position: center center;
}

.bg_white_std {
	background-color: var(--color-white-std);
}

.bg_lightgreen_std {
	background-color: var(--color-lightgreen-std);
}

.bg_corporate1_std {
	background-color: var(--color-corporate1-std);
  color: var(--color-white-std);
}

.border_radius_sm {
	border-radius: var(--border-radius-sm);
}

.icon_md {
  height: 30px;
}

.icon_lg {
  height: 45px;
}

.icon_w_lg_square {
  width: 45px;
  aspect-ratio: 1/1;
}

.z_index_1 {
	z-index: 1;
}

/* Default */
body {
  color: var(--color-black-std);
  font-family: "Open Sans",serif;
  font-size: 15px;
  font-weight: 350;
  line-height: 1.7;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: "Open Sans",serif;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 20px;
  font-weight: 700;
}

h2, .h2 {
	font-size: 30px;
}

h2.color_corporate1_std span {
  color: var(--color-corporate2-std);
}

h1.color_white_std span,
h2.color_white_std span,
h3.color_white_std span,
h4.color_white_std span {
  color: var(--color-corporate2-std);
}

a {
	color: inherit;
}

/* Header */
.fixed_header_fix,
#gui-wrapper {
	margin-top: 74px;
}

.main-header__nav {
	font-size: inherit !important;
}

.main-header__link, .main-header__dropdown-link {
  color: var(--color-grey-std);
  font-weight: 600;
  font-size: 16px;
}

.main-header__link:hover, .main-header__dropdown-link:hover {
  text-decoration: none;
}

/* Footer */
.social-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    transition:all .3s ease;
  	background-color: var(--color-grey-std);
}

.social-icon:hover{
    background:#fff;
    color:#000;
}

/* Homepage */
.hp_hero h1 {
  color: var(--color-corporate1-std);
  font-size: 44px;
}

.hp_hero h1 span {
  color: var(--color-corporate2-std);
}

.story__img img {
  border-radius: var(--radius-lg);
}

/* Productpage */
.thumbslide__nav-item--active::after {
  border: 2px solid var(--color-corporate1-std);
  border-radius: 9px;
}

/* About */
#about h2,
#about h3,
#visie h2,
#visie h3,
#product h2,
#product h3,
#certificates h2,
#certificates h3,
#team h2,
#team h3 {
	color: var(--color-corporate1-std);
}

#about h2 span {
	color: var(--color-corporate2-std);
}

#about img {
	border-radius:var(--border-radius-sm);
}

#product table {
  border-collapse: separate !important;
  border-spacing: 0px 20px;
}

#visie table tr td,
#team table tr td{
  border-radius:var(--border-radius-sm);
  padding: 15px;
}

#visie table tr:first-child td:first-child,
#visie table tr:last-child td:last-child {
  background-color: var(--color-lightgreen-std);
}

#product td,
#certificates td {
  vertical-align: top;
  line-height: 1.3;
}

#product h3,
#team h3 {
	margin: 0px 0px 5px 0px;
}

#product ul {
  padding: 0px;
}

#product li::before {
  content: "";
  display: inline-block;
  background-image: url(https://cdn.webshopapp.com/shops/357088/files/499893905/check.svg);
  background-size: contain;
  width: 25px;
  height: 25px;
  position: relative;
  top: 5px;
  margin-right: 10px;
}

#visie table,
#team table {
  border-collapse: separate !important;
  border-spacing: 20px;
}

#team table tr td {
  background-color: var(--color-white-std);
  border-radius:var(--border-radius-sm);
  color:var(--color-corporate2-std);;
}

/* Dealers */
#store-search-form {
	gap:10px;
}

#store-search-form select,
#store-search-form input {
	height: 32px;
}

/* Partners overview */
.partners_overview_hero {
  background-image: url(https://cdn.webshopapp.com/shops/357088/files/497025807/partners.webp);
	background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.partners_overview_hero::after {
	content:'';
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,rgba(34, 117, 51, 1) 30%, rgba(34, 117, 51, 0) 100%);
  border-radius: var(--border-radius-sm);
}

/*
*  FAQ
*/
.gui-div-faq-questions .gui-content-subtitle,
.gui-div-faq-questions .gui-content-wysiwyg {
	font-size: var(--font-size-default);
  border:0!important;
}

.gui-div-faq-questions .gui-content-subtitle {
	background: var(--color-lightgreen-std);
  border-radius: 10px;
  padding: 15px;
  position: relative;
  left: 0;
  font-weight: 400;
  font-size: 18px;
  color: var(--color-black-std);
}

.gui-div-faq-questions .gui-content-subtitle .faq-chevron {
	position: absolute;
  top: 18px;
  right: 18px;
  transform: rotate(90deg);
  display: flex;
  align-content: center;
}

.gui-div-faq-questions .gui-content-subtitle.faq-active .faq-chevron {
  right: 22px;
  transform: rotate(-90deg);
}

.gui-div-faq-questions .gui-content-wysiwyg {
  padding:0;
	color: var(--color-black-std);
  padding:0;
  max-height:0;
  overflow:hidden;
  transition:all 200ms;
}  

.gui-div-faq-questions .gui-content-wysiwyg.faq-active {
  padding: 10px 3px;
  max-height:1000px;
  overflow:hidden;
  transition:all 200ms;
}  
  
.gui-div-faq-questions .gui-content-subtitle strong {
	font-weight:normal;
}

.gui-div-faq-questions .gui-content-title {
	display:none;
}

.gui-div-faq-questions .gui-div-faq-right {
	display:none ! important;
}

.gui-div-faq-questions .gui-col2-right .gui-col2-right-col1 {
	float:none;
  width:100%;
}

.gui-div-faq-questions .gui-page-title {
  color: var(--color-corporate1-std);
  font-size: 30px;
  text-align:left;
  font-weight:700;
}

.gui-div-faq-questions .gui-content-subtitle span.faq-icon {
	display: inline-block;
  background: #00bdd6;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  margin-right: 15px;
  color: #fff;
  font-weight: 700;
  line-height: 30px;
} 

.gui-div-faq-questions .gui-content-subtitle{
	cursor:pointer;
}

.textpage-title {
	color: var(--color-corporate1-std);
  font-size: 30px;
  text-align: left;
  margin-top: 28px;
  font-weight: 700;
}

/* --------- Blog --------- */
article:has(.gui-blog-article-summary) p {
  display: none !important;
}

article:has(.gui-blog-article-summary) h1 {
  height: 60px;
}
/* ==== Solbio "Nature Calls" blog overview — visual overhaul ==== */
/* Scope everything to .gui-blog so the rest of the site is untouched */

/* 1. Kill the two-column layout & remove the "Recent articles" sidebar */
.gui-blog .gui-col2-right-col2 {
  display: none;
}
.gui-blog .gui-col2-right-col1 {
  width: 100%;
  float: none;
}
.gui-blog .gui-col2-right {
  display: block;
}

/* Page title styling (centered, like the mockup) */
.gui-blog .gui-page-title {
  text-align: left;
  font-size: 2.75rem;
  color: #227533;
  font-weight: 700;
  margin-bottom: 2.5rem;
}

.gui-blog .gui-page-title::after {
	content: "De natuur is puur, overweldigend en kwetsbaar.   Hoe kunnen we onze planeet ontdekken en beschermen tegelijk?   Volg onze blog Nature Calls.";
	display: block;
  font-size: 1rem;
  font-weight: normal;
  line-height: 30px;
  max-width: 500px;
  color: black;
  margin-top: 15px;
}

/* 2. Lay the articles out as a 3-column grid.
   The articles are siblings inside .gui-col2-right-col1, alongside
   .gui-page-title and the .gui-blog-nav pagination, so we use grid
   and span the non-card elements across the full width. */
.gui-blog .gui-col2-right-col1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  align-items: start;
}

/* Title and pagination should span the whole row, not sit in a cell */
.gui-blog .gui-page-title,
.gui-blog .gui-blog-nav {
  grid-column: 1 / -1;
}

/* 3. Card itself */
.gui-blog .gui-blog-article {
  margin: 0;
  padding: 0;
  border: none;
}

/* Reset the float some themes add */
.gui-blog .gui-blog-article,
.gui-blog .gui-blog-article.gui-last {
  float: none;
}

/* 3b. Images: full width of card, fixed ratio, rounded corners */
.gui-blog .gui-blog-article header img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 0px;
}

/* Title */
.gui-blog .gui-blog-article header h1 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.75rem;
}
.gui-blog .gui-blog-article header h1 a {
  color: inherit;
  text-decoration: none;
  color: black;
}

/* 2. Hide date, author, comments, and the description summary */
.gui-blog .gui-blog-article header ul {
  display: none;
}
.gui-blog .gui-blog-article-summary {
  display: none;
}

/* Put the image ABOVE the title.
   In the markup the order inside <header> is: h1, ul, img.
   Turn the header into a flex column and reorder so img comes first. */
.gui-blog .gui-blog-article header {
  display: flex;
  flex-direction: column;
}
.gui-blog .gui-blog-article header a:has(img),
.gui-blog .gui-blog-article header img {
  order: -1;
}

/* 4. "Continue reading article »" → styled link/button like "-Verder lezen-" */
.gui-blog .gui-blog-article-more {
  margin-top: 0.25rem;
}
.gui-blog .gui-blog-article-more a {
  /* hide the original English label text, replace with mockup label */
  font-size: 0;
  color: #2e7d32;            /* Solbio green */
  text-decoration: none;
  font-weight: 600;
}
.gui-blog .gui-blog-article-more a::after {
  content: "-Verder lezen-";
  font-size: 0.95rem;
  border-bottom: 2px solid #2e7d32;
  padding-bottom: 2px;
}
.gui-blog .gui-blog-article-more a:hover::after {
  border-bottom-color: transparent;
}

/* 6. Pagination ("← Older posts" style button) */
.gui-blog .gui-blog-nav {
  margin-top: 1.5rem;
  text-align: left;
}
.gui-blog .gui-blog-nav a {
  color: #2e7d32;
  text-decoration: none;
  font-weight: 600;
}
.gui-blog .gui-blog-nav a:hover {
  text-decoration: underline;
}

.blog-detail .gui.gui-blog .gui-col2-right-col1 {
  grid-template-columns: repeat(1, 1fr);
}

.blog-detail .gui.gui-blog h2 {
	margin-top: 15px;
}

.blog-detail .gui.gui-blog img {
  margin-top: 15px;
}

/* Responsive fallback */
@media (max-width: 900px) {
  .gui-blog .gui-col2-right-col1 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .gui-blog .gui-col2-right-col1 {
    grid-template-columns: 1fr;
  }
}