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

.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: #444444;
}

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

.gui a {
  color: #ff9900;
}

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

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

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

.gui-block-title {
  color: #444444;
  background-color: #8d8d8d;
}

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

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

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

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

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

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

.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: #ffffff;
  background-color: #ff9900;
}

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

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

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cc7a00;
  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 */
#footer.footer-new .payments {
  max-width: 300px;
}

#footer.footer-new .payments img {
	background-color:#fff;
  height: 40px;
  width: 64px;
  margin-top: 3px;
}
#footer.footer-new .bottom-footer {
	text-align:center;
}
#footer.footer-new .full-copyright {
	max-width:100% !important;
  color: #6c6c6c;
  padding: 30px 0px;
}
#footer.footer-new .full-copyright a {
	max-width:100% !important;
  color: #333;
  text-decoration:none;
}
#footer.footer-new .copyright {
  padding-bottom:30px;
  color: #6c6c6c;
}

  
    #footer .review-wrap { display: none; }

.close-popup a {
/*    border: 1px solid white; */
    color: white !important;
    background-color: #FF9900;
} 

.tablelayout { /* tabellen die horizontaal scrollen als het scherm te klein wordt */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  position: relative;
}

.tablelayout .tableelement { /* tabel layout */
	  flex-grow: 0;
  	flex-shrink: 0;
  	flex-basis: auto;
/*    margin-right: 3px;*/
}

.tablelayout table {
    border-spacing: 0;
    border-collapse: separate;
    text-indent: initial;
    border-color: grey;
}

.tablelayout td { /* tabel layout */
    border-bottom: 1px solid var(--color-background-shade-1,#e0e0e0);
    max-width: 350px;
/*    min-width: 70px;*/
    padding: 0.3em 7px 0.3em 0px; /* top | right | bottom | left */
    text-align: inherit;
    font-weight: inherit;
    font-size: .97em;
}

.tablelayout th { /* tabel layout */
    border-bottom: 1px solid var(--color-background-shade-1,#e0e0e0);
    max-width: 350px;
/*    min-width: 70px; */
    padding: 0.3em 7px 0.3em 0px; /* top | right | bottom | left */
    text-align: inherit;
    font-weight: bold;
    font-size: .97em;
}

.imgvoorbeeld1 { /*afbeeldingen laptop*/
	width: 40%;
  height: auto;
  margin-top: 12px;
	margin-bottom: 20px;
	margin-left: 25px;
  margin-right: 0px;
  float: right;
  }

.imgvoorbeeld2 {
	width: 48%;
  height: auto;
  margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
  margin-right: 0px;
  float: none;
  }

.imgvoorbeeld3 {
	width: 48%;
  height: auto;
  margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
  margin-right: 0px;
  float: right;
  }

.imgproduct1 {
	  float: left;
    width : 140px;
    height: 140px;
   margin-top: 5px;
	margin-bottom: 20px;
	margin-left: 0px;
  margin-right: 20px; 
   
}


.flex-container-images {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px ;
/*  column-gap: 2%; */
  justify-content: space-evenly;
}

.flex-images-item {
  font-size: 15px;  
/*   width:49%; */
/*  max-width: 450px; */
 
}

figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
 /*  max-width: 500px; */
   width: 100%;
    margin: auto; 
}

figure > img {
  width: 100%;
}

figcaption {
    background-color: #222;
    color: #ccc;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
    opacity: 0.5;
}



@media(max-width:767px){
  #footer.footer-new .payments {
  	margin-bottom: 15px;
  }

  #footer.footer-new .payments img {
  	height:32px;
    width: 50px;
  }


	.imgvoorbeeld1 { /*afbeeldingen mobiel formaat 1*/
		width: 100%;
  margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
  margin-right: 0px; 
  	float: none;
  }

.imgvoorbeeld2 {
	width: 100%;
  height: auto;
  margin-top: 0px;
	margin-bottom: 30px;
	margin-left: 0px;
  margin-right: 0px;
  float: none;
  }

.imgvoorbeeld3 {
	width: 100%;
  height: auto;
  margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
  margin-right: 0px;
  float: none;
  }
  
	.imgproduct1 { 
	  float: left;
    width : 110px;
    height: 110px;
  margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 0px;
  margin-right: 20px;  
   
	}
} 

@media (max-aspect-ratio: 5/7) {
  #footer.footer-new .payments {
  	margin-bottom: 15px;
  }

  #footer.footer-new .payments img {
  	height:32px;
    width: 50px;
  }
  
  .imgvoorbeeld1 { /*afbeeldingen mobiel formaat 2*/
		width: 100%;
  margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
  margin-right: 0px; 
  	float: none;
  }

.imgvoorbeeld2 {
	width: 100%;
  height: auto;
  margin-top: 0px;
	margin-bottom: 30px;
	margin-left: 0px;
  margin-right: 0px;
  float: none;
  }

.imgvoorbeeld3 {
	width: 100%;
  height: auto;
  margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
  margin-right: 0px;
  float: none;
  }
  
	.imgproduct1 {
	  float: left;
    width : 110px;
    height: 110px;
  margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 0px;
  margin-right: 20px;   
    
	}
}

/* New styling productpage */
.tags .tag a:hover, 
.tags .tag.active a{
  background: #12974a;
}


/* Call to action begin */
.calltoaction {
  width: 100%;
  border-collapse: collapse;
  border-style: solid;
  border-color: #e7e7e7;
  background-color: #f8f8f8;
	border-width: 1px;
  padding: 20px;
}

.calltoaction .tekst::before {
  content: "Het is belangrijk dat u de juiste verf gebruikt. Op de site vindt u alle informatie die u helpt bij het maken van deze keuze. Wilt u liever persoonlijk advies van Jotun Specialist? Neem dan contact op via één van onderstaande mogelijkheden: ";
}

.calltoaction .mobielnr {
  display:inline; /* none is uit, inline is aan */
}

.calltoaction .mobielnr::before {
  	content: "•";
    margin-left: 7%;
    margin-right: 10px;  
}

.calltoaction .mobielnr::after {
  	content: "06 - 16 246 450 (tel / whatsapp)";
}


.calltoaction .mail::before {
  	content: "•";
    margin-left: 7%;
    margin-right: 10px;
}
.calltoaction .mail::after {
  	content: "info@jotun-specialist.nl (e-mail)";
}
.contactform::before {
		content: "•";
    margin-left: 7%;
    margin-right: 13px;
}
.calltoaction .contactform {
		display: block;
}
/* Call to action end */

/* popup */
#review-popup .popup-title{
	font-weight: bold;
  font-size: 1.5em;
  color: var(--accent);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

#review-popup .popup-subtitle{
  margin-bottom: 10px;
}

#review-popup {
	display: none;
  width: 100%;
  max-width: 600px;
}

#review-form .inputs-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -5px;
}

#review-form .inputs-wrap .input-col {
	padding: 5px;
  width: 100%;
}

#review-form .inputs-wrap .input-col.col-50 {
	width: 50%;
}

#review-form .inputs-wrap .input-col input {
	width: 100%;
}

#review-form input.error,
#review-form textarea.error {
	border-color: var(--accentRed);
}

#review-form textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 120px;
}

#review-form .btn i {
	margin-left: 5px;
}

#review-form .form-message {
  margin-top:10px;
  padding: 20px 10px;
  border-radius: 3px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #000;
}

#review-form .form-message.success {
	background: var(--accentGreen);
}

#review-form .form-message.error {
	background: var(--accentRed);
}

#review-form .standard-input{
  height: 45px;
  padding: 0px 15px;
  outline: none;
  border-radius: 3px;
  font-size: 14px;
  background: #fff;
  color: #888;
  border: 2px solid #eee;
}

#review-form .input-col.col-50{
  width: 50%;
}

#review-form .btn-wrap{
  margin-top: 15px;
}

@media(max-width: 767px){
  #review-popup{
    width: 90%;

  }

}

/* End new styling review block in footer */

#cart-page .delivery-message{
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  border-left-width: 0;
  background: #fafafa;
  font-size: 1em;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
  position: relative;
}

/* --- 1. VOLUME & PRIJS DROPDOWN (ORANJE KNOP) --- */
.option-wrap.product-variants .selection.ui.dropdown {
    position: relative !important;
    padding-right: 48px !important;
}

.option-wrap.product-variants .selection.ui.dropdown .dropdown.icon {
    position: absolute !important;
    right: -1px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: calc(100% + 2px) !important;
    width: 48px !important;
    background: #ff9900 !important;
    opacity: 1 !important;
    border-radius: 0 6px 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Witte pijl in de prijs-dropdown */
.option-wrap.product-variants .selection.ui.dropdown .dropdown.icon::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: rotate(45deg) translateY(-1px) !important;
}

/* Dikke rand bij actieve selectie van prijs-dropdown */
.option-wrap.product-variants .selection.ui.dropdown.active {
    border: 2px solid #ff9900 !important;
}

/* Verberg oranje vlak als er geen keuze-opties zijn */
.option-wrap.product-variants .selection.ui.dropdown:not(:has(.menu .item:nth-child(2))) .dropdown.icon {
    display: none !important;
}

.option-wrap.product-variants .selection.ui.dropdown:not(:has(.menu .item:nth-child(2))) {
    padding-right: 15px !important;
    cursor: default !important;
}


/* --- 2. KLEURENTOOL (ORANJE KNOP & POTLOODJE) --- */
img[data-custom-color-select-icon], 
img[src*="kleurenwaaier.png"] {
    display: none !important;
}

.featured-color__color.featured-color__color--custom {
    background-color: #ff9900 !important;
    background-image: none !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    border-left: 1px solid rgba(0,0,0,0.1);
}

/* Pijltje tonen bij GEEN keuze */
.featured-color-trigger:not(.active) .featured-color__color.featured-color__color--custom::after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: rotate(45deg) translateY(-1px) !important;
    position: absolute;
}

/* Wit potloodje bij WEL een keuze */
.featured-color__color.featured-color__color--custom .bx-pencil {
    color: white !important;
    font-size: 20px !important;
    display: block !important;
    visibility: visible !important;
}

/* Verberg de 'zwevende' stip-bevestiging */
.option-wrap:has(.show-color), .show-color {
    display: none !important;
}

/* Witte vink voor presets op zwart vlak */
.product-option-js-preset.active::after {
    color: #fff !important;
}


/* --- 3. LAYOUT: LABELS & WITRUIMTE --- */
/* Verberg standaard titels behalve voor opmerkingen */
#productpage .product-detail .info .product-option label.label-title {
    display: none !important;
}

#productpage .product-detail .info .option-wrap.product-custom-text label.label-title {
    display: block !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
    font-size: 13px !important;
    letter-spacing: .05em !important;
}

/* Minimaliseer ruimte onderaan bij winkelwagen-sectie */
.option-wrap.product-custom-text,
.option-wrap.product-custom-radio,
.general-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.option-wrap + .option-wrap {
    margin-top: 10px !important;
}
/* Zorg dat labels bij checkboxen (opmerkingen/extra opties) wel zichtbaar zijn */
#productpage .product-detail .info .option-wrap.product-custom-checkbox label.label-title {
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
    cursor: pointer;
}

/* Zorg dat de checkbox zelf en de tekst netjes naast elkaar staan */
.option-wrap.product-custom-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 10px !important;
}


/* --- 4. LEESBAARHEID & FONTS --- */
body, p, .flex-images-item, .calltoaction, #cart-page .delivery-message {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#footer.footer-new .full-copyright, 
#footer.footer-new .full-copyright a,
#footer.footer-new .copyright {
    font-size: 14px !important;
}

.tablelayout td, .tablelayout th {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
}

.ui.selection.dropdown .text,
.ui.selection.dropdown .menu > .item {
    font-size: 14.5px !important;
}

.ui.selection.dropdown .menu > .item {
    padding: 12px 15px !important;
}

.calltoaction .mobielnr::after, 
.calltoaction .mail::after {
    font-size: 15px !important;
}

/* Maak ordernummer en bedrag zwart, vet en scanbaar */
.gui-block-inner {
    height: auto !important;          /* Laat het vakje meegroeien */
    min-height: 40px !important;      /* Iets steviger basis */
    padding: 10px 15px !important;    /* Ruimte rondom de tekst */
    display: flex !important;
    align-items: center !important;   /* Tekst verticaal in het midden */
    flex-wrap: wrap !important;       /* Voorkom uitloop op mobiel */
}

.gui-block-inner strong {
    color: #000000 !important;        /* Diepzwart contrast */
    font-weight: 800 !important;      /* Extra dikke letters */
    font-size: 15px !important;       /* Goed leesbaar formaat */
    line-height: 1.4 !important;      /* Rustige regelafstand */
}
/* De cijfers en bedragen: vetgedrukt maar op gelijke lijn */
#productpage .discounts .accent-color {
    color: #FF9900 !important;
    font-weight: 650 !important;
    font-size: 14px !important;  /* Gelijk aan de rest */
    letter-spacing: -0.01em;     
}

/* De tekst eromheen: dunner en grijs op dezelfde grootte */
#productpage .discounts li span {
    color: #000000 !important;   
    font-weight: 400 !important; 
    font-size: 13px !important;  /* Gelijk aan de rest */
}

/* Het grijze label: ook exact dezelfde tekstgrootte */
#productpage .discounts .discount-label.custom-grey-label {
    background-color: #FF9900 !important; 
    border: 1px solid #FF9900 !important; 
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13px !important;  /* Nu exact gelijk aan de zin */
    padding: 4px 10px !important; /* Iets meer ademruimte voor de grotere letters */
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 10px !important;
    text-transform: uppercase !important;
    vertical-align: middle !important; /* Zorgt dat het vakje netjes uitlijnt met de zin */
}
/*