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

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

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

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

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

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

.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: #009400;
  border-color: #009400;
}

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

/* custom */
/*@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro);*/

.gui.gui-cart a.gui-button-large.gui-button-action, .gui.gui-cart a.gui-button-small.gui-button-action {background-color:  #00AA5B!important;border-radius:6px;}
.gui.gui-cart a.gui-button-large.gui-button-action:hover, .gui.gui-cart a.gui-button-small.gui-button-action:hover {background:#007941!important;}

.gui.gui-checkout a.gui-button-large.gui-button-action, .gui.gui-checkout a.gui-button-small.gui-button-action {background-color:  #00AA5B!important;border-radius:6px;}
.gui.gui-checkout a.gui-button-large.gui-button-action:hover, .gui.gui-checkout a.gui-button-small.gui-button-action:hover {background:#007941!important;}

  
  @media screen and (min-width:992px) {
.products .product.special-product .info,
.tab-1 .products .product.special-product .info, .tab-2 .products .product.special-product .info {
  padding: 10px 0 !important;
     margin: 5px auto 0!important;
    width: 85%;
}
}

#sync1.owl-carousel .owl-stage {
  transition: none !important;
}

.article-content .content img {
  max-width:100% !important;
  height:auto !important;
}

.thumbs-wrap {
	position:relative;
}

.thumbs-wrap:before {
	background: rgba(255,255,255,1);
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(5,0,0,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(5,0,0,0)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(5,0,0,0) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(5,0,0,0) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(5,0,0,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(5,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#050000', GradientType=1 );
  width:70px;
  height:100%;
  left:0px;
  top:0;
  position:absolute;
  display:block;
  content:'';
  z-index:9;
}
form#gui-form-cart tr:last-child a:not(.gui-button-small) {
    color: #949494;
    border: 1px solid;
    line-height: 26px;
    color: #363636;
    background: #eee;
    padding: 3px 15px;
}
.thumbs-wrap:after {
  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
  width:70px;
  height:100%;
  right:0px;
  top:0;
  position:absolute;
  display:block;
  content:'';
  z-index:9;
}

 /* Bas Dtch. Digitals. */

button.newsletter_btn_custom {
    border: 0px;
    color: #fff;
    background-color: #00AA5B!important;
    font-weight: bold;
    padding: 0.75em 2.25em;
    border-radius: 5px;
}

.author-box { margin-top: 40px; padding: 25px; background-color: #f0f0f0; /* lichtgrijs blok */ border-radius: 12px; } .author-inner { display: flex; align-items: flex-start; gap: 20px; } .author-image img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; /* houdt verhoudingen correct en vult het vak */ } .author-info h4 { margin: 0 0 10px; font-size: 1.2em; font-weight: 600; } .author-info p { margin-bottom: 10px; color: #555; line-height: 1.5; } .author-socials a { margin-right: 10px; color: #666; font-size: 1.2em; transition: color 0.2s ease; } .author-socials a:hover { color: #000; }

@media (max-width: 767px) {
  .author-inner {
    flex-wrap: wrap;      /* maakt het stapelen mogelijk */
    justify-content: center; /* centreren van de inhoud */
  }
  .author-image {
    flex: 0 0 100%;      /* afbeelding neemt volledige breedte */
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }
  .author-info {
    flex: 0 0 100%;      /* tekstblok neemt volledige breedte */
    text-align: center;
  }
}

.article-summary {
    background-color: #f5f5f5;  
    padding: 15px 20px;         
    border-radius: 8px;         
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); 
    margin-bottom: 20px;        
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

@media (max-width: 767px) {
  /*wie heeft dit er in gezet? row flex-direction:column*/
  .row {
    display: flex;
    flex-direction: column;
  }
  .row.products.col-page-products {
    flex-direction: row;
}
  .blog-sidebar {
    order: 2; /* sidebar komt na het artikel op mobiel */
  }
  .blog-content {
    order: 1; /* artikel eerst op mobiel */
  }
}

.article-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
}

.article-description {
  display: block;
  margin-top: 30px;        /* kan aangepast worden */
}

div.custom-home-text div.content {
    width: 100%;
    text-align: center;
    padding: 0;
    background-color: #fcfcfc !important;
}

.complete-article .image-wrap img
 {
    border-radius: 3px !important;
    border-radius: 3px !important;
    max-width: 7000px !important;
    width: 98% !important;
    height: 350px !important;
    margin: 10px !important;
    display: block !important;
}

/* Bas - zakelijke klanten*/
.business-flooring {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
    color: #2b2b2b;
  line-height: 1.6;
}

.business-flooring h1 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.business-flooring h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.business-flooring p {
  margin-bottom: 1rem;
}

.business-flooring ul {
  margin: 0.5rem 0 1.5rem 1.2rem;
}

.business-flooring ul li {
  margin-bottom: 0.4rem;
}

.usp-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.usp-list li {
  padding-left: 1.6rem;
  position: relative;
}

.usp-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #1f7a63;
  font-weight: bold;
}

.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.sector-card {
  border: 1px solid #e5e5e5;
  padding: 1.5rem;
  border-radius: 6px;
  background-color: #fafafa;
}

.sector-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

.cta {
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: #1f7a63;
  color: #ffffff;
  border-radius: 6px;
}

.cta strong {
  font-size: 1.1rem;
}

/* Bas - footer */

/* Bas - productbundle */
/* ===== SLIM COMBINEREN ===== */
.slimcombine-wrapper {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0;
  background: #fff;
  max-width: 580px;
}

.slimcombine-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #048114;
}

.slimcombine-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.slimcombine-sub {
  display: block;
  font-size: 13px;
  color: #ffffff;
}

/* Rijen */
.slimcombine-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.slimcombine-row.bundle-row {
  background: #fff;
  transition: background 0.15s;
}

/* Checkbox / plus */
.slimcombine-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border 0.15s;
}

.main-row .slimcombine-check {
  background: #1D9E75;
  border: none;
  cursor: default;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
}

.bundle-row .slimcombine-check {
  border: 2px solid #e0e0e0;
  background: #fff;
}

.bundle-row .slimcombine-check.checked {
  background: #1D9E75;
  border-color: #1D9E75;
}

.bundle-row .slimcombine-check svg {
  width: 14px;
  height: 14px;
  display: none;
}

.bundle-row .slimcombine-check.checked svg {
  display: block;
}

/* Afbeelding */
.slimcombine-img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}

/* Info */
.slimcombine-info {
  flex: 1;
  min-width: 0;
}

.slimcombine-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  margin-bottom: 6px;
  line-height: 1.3;
}

.slimcombine-select {
  display: block;
  width: 100%;
  max-width: 240px;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  color: #111;
  margin-bottom: 6px;
}

.slimcombine-price {
  font-size: 15px;
  font-weight: 600;
  color: #1D9E75;
}

.slimcombine-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.slimcombine-old-price {
  font-size: 13px;
  color: #aaa;
  text-decoration: line-through;
}

.slimcombine-new-price {
  font-size: 15px;
  font-weight: 600;
  color: #1D9E75;
}

.slimcombine-badge {
  font-size: 11px;
  font-weight: 600;
  background: #EAF3DE;
  color: #3B6D11;
  border-radius: 99px;
  padding: 2px 9px;
}

/* Footer */
.slimcombine-footer {
  padding: 16px 20px;
  background: #f9f9f9;
}

.slimcombine-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 4px;
}

.slimcombine-total-label {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.slimcombine-total-prices {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slimcombine-total-old {
  font-size: 13px;
  color: #aaa;
  text-decoration: line-through;
}

.slimcombine-total-new {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

.slimcombine-saving {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #1D9E75;
  margin-bottom: 14px;
}

.slimcombine-btn {
  display: block;
  width: 100%;
  background: #048114;
  color: #fff !important;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
}

.slimcombine-btn:hover {
  background: #111;
  color: #fff !important;
}

.slimcombine-btn.disabled {
  background: #048114;
  opacity: 0.85;
  cursor: not-allowed;
}

/* Mobiel */
@media (max-width: 600px) {
  .slimcombine-row {
    gap: 10px;
    padding: 12px 14px;
  }
  .slimcombine-img img {
    width: 50px;
    height: 50px;
  }
}

/* Bas */
/* ===== WINKELWAGEN BUNDLE MOBIEL ===== */
@media (max-width: 768px) {

  /* Verberg tabelheaders */
  .gui-table thead {
    display: none !important;
  }

  /* Elke rij als kaart */
  .gui-table tbody tr {
    display: block !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: #fff !important;
  }

  /* Alle cellen als blokken */
  .gui-table tbody td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 2px 0 !important;
    text-align: left !important;
  }

  /* Afbeelding bovenaan */
  .gui-table tbody td:nth-child(1) {
    margin-bottom: 10px !important;
  }

  .gui-image.gui-image-50 img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
  }

  /* Productnaam */
  td > a.gui-bold {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: block !important;
    margin-bottom: 4px !important;
    color: #111 !important;
  }

  /* Variant tekst */
  .cart_variant {
    font-size: 12px !important;
    color: #888 !important;
    margin-bottom: 8px !important;
  }

  /* Bundle items */
  .gui-bundle {
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
  }

  .gui-bundle .gui-image {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    margin-bottom: 6px !important;
  }

  .gui-bundle .gui-image img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
  }

  .gui-bundle .gui-image + span {
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    color: #555 !important;
  }

  .gui-bundle > span:first-child {
    display: none !important;
  }

  /* Aantal en prijs naast elkaar */
  .gui-table tbody td:nth-child(3),
  .gui-table tbody td:nth-child(5),
  .gui-table tbody td:nth-child(6) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 12px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
  }

  /* Verwijder knop */
  .gui-table tbody td:nth-child(4) {
    display: inline-block !important;
    width: auto !important;
    margin-top: 8px !important;
  }

  .gui-action-delete {
    font-size: 12px !important;
    color: #e24b4a !important;
  }

  /* Verberg aantal input styling */
  .gui-number {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .gui-number input {
    width: 36px !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  /* Verberg lege rij onderaan */
  .gui-table tbody tr:last-child {
    border: none !important;
    background: none !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {

  /* Label voor actieprijs */
  .gui-table tbody td:nth-child(5)::before {
    content: "Actieprijs: " !important;
    font-size: 12px !important;
    color: #888 !important;
    font-weight: 400 !important;
  }

  /* Label voor subtotaal */
  .gui-table tbody td:nth-child(6)::before {
    content: "Subtotaal: " !important;
    font-size: 12px !important;
    color: #888 !important;
    font-weight: 400 !important;
  }

  /* Prijzen op eigen regel */
  .gui-table tbody td:nth-child(5),
  .gui-table tbody td:nth-child(6) {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
  }

  /* Aantal en verwijder samen op één regel */
  .gui-table tbody td:nth-child(3),
  .gui-table tbody td:nth-child(4) {
    display: inline-block !important;
    width: auto !important;
    margin-top: 8px !important;
    vertical-align: middle !important;
  }

}



.slimcombine-disclaimer {
  font-size: 11px;
  color: #111;
  text-align: right;
  margin-top: 4px;
  margin-bottom: 12px;
}

  /* Banners op homepage in blokken gezet */
@media (min-width: 768px) {
  .custom-banners {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  .custom-banners .custom-banner {
    width: 50% !important;
    box-sizing: border-box;
  }

  .categories.row {
    flex-direction: row !important;
    flex-wrap: wrap;
    display: flex !important;
  }

  .categories.row .custom-category {
    width: 25% !important;
    box-sizing: border-box;
  }

  #contactblocks .contactblock {
    flex-basis: 50% !important;
    flex-grow: 1 !important;
    width: 50% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .custom-banners {
    flex-direction: column !important;
  }

  .custom-banners .custom-banner {
    width: 100% !important;
  }


  #contactblocks .contactblock {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}




@media (max-width: 767px) {
  .categories.row .custom-category {
    width: 50% !important;
  }
}

@media (max-width: 767px) {
  .row.categories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .row.categories .custom-category {
    width: 50%;
    box-sizing: border-box;
    padding: 0 8px;
  }
}

/* Chatwidget — You Should Ask */

/* 1. de laag gelijktrekken met het echte scherm in plaats van
      de 924px die het script erin zet */
.ysa_popup_floating_layer{
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  will-change: auto !important;
}

/* 2. knop en statusbolletje, met 8px verschil zoals origineel */
.ysa_hided_popup_div,
.ysa_hided_popup_div.visible{
  position: fixed !important;
  top: auto !important;
  bottom: 80px !important;
  right: 20px !important;
  transform: none !important;
}

.ysa_status_hided,
.ysa_status_hided.visible{
  position: fixed !important;
  top: auto !important;
  bottom: 88px !important;
  transform: none !important;
}

/* ============================================================================
   FLOORPASSION NL — PRODUCTKAART, VERSIE 2
/* ============================================================================
   1. REVIEWS ZICHTBAAR OP MOBIEL
   ============================================================================ */

@media (max-width: 991px){

  .topbar{
    display: block !important;
    background: #f5f5f5;
    padding: 6px 0;
  }

  .topbar > .container > *{ display: none !important; }

  .topbar > .container{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
  }

  .topbar .top-reviews{
    display: flex !important;
    align-items: center;
    gap: 8px;
    float: none !important;
    font-size: 12px;
    white-space: nowrap;
  }

  .topbar .top-reviews .stars i{ font-size: 11px; }

}


/* ============================================================================
   2. DE VASTE HOOGTE VAN .INFO ERAf
   ============================================================================ */

.products .product .info,
.products .product .info.align{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ============================================================================
   3. DE KAART ALS KOLOM
   ============================================================================ */

.products .product{
  display: flex;
  flex-direction: column;
}

.products .product > .product-inner{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.products .product > .product-inner > .info{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  text-align: left !important;
}


/* ============================================================================
   4. GELIJKE HOOGTES IN DE CAROUSEL OP DE HOMEPAGE
   ============================================================================ */

.productslider .owl-stage{ display: flex; }

.productslider .owl-item{
  display: flex;
  float: none;
  height: auto;
}

.productslider .owl-item > .item{
  display: flex;
  width: 100%;
}

.productslider .owl-item > .item > .product{ width: 100%; }


/* ============================================================================
   5. DE TITEL — ALTIJD TWEE REGELS RUIMTE
   ============================================================================ */

.products .product .info .title-small{
  line-height: 1.35 !important;
  min-height: 2.7em !important;
  max-height: 2.7em !important;
  overflow: hidden !important;
  margin: 0 0 2px !important;
  text-align: left !important;
}

.products .product .info .title-full{ display: none !important; }


/* ============================================================================
   6. HET SPECIFICATIEBLOK (merk + prijs per m²)
   ============================================================================ */

.products .product .info .fp-specs{
  text-align: left;
  margin: 8px 0 10px;
  padding-left: 9px;
  border-left: 2px solid #215c54;
  line-height: 1.35;
}

.products .product .info .fp-specs .merk{
  display: block;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.products .product .info .fp-specs .perm2{
  display: block;
  color: #9a9a9a;
  font-size: 11px;
  margin-top: 2px;
}

.products .product .info .fp-specs span + span::before{ content: none; }


/* ============================================================================
   7. VOORRAAD, STERREN EN PRIJS
   ============================================================================ */

.products .product .info .price-wrap{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto;
  float: none !important;
  width: 100% !important;
  text-align: left !important;
}

/* de <br> die als afstandhouder diende is niet meer nodig */
.products .product .info .price-wrap > br{ display: none !important; }

.products .product .info .price-wrap .available{
  float: none !important;
  width: auto !important;
  margin: 0 0 4px !important;
  font-size: 12px;
}

.products .product .info .price-wrap .product-stars{
  margin: 0 0 4px !important;
  line-height: 1;
}

/* --- het prijsvak zelf --- */
.products .product .info .price-wrap .price{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  float: none !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 10px;
  border-top: 1px solid #ededed;
  text-align: left !important;
}

.products .product .info .price-wrap .price .old-price{
  display: block !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #000 !important;
  text-align: left !important;
  text-decoration: line-through; !important;
  text-decoration-color: #d0021b; !important;      /* rode streep */
  text-decoration-thickness: 1.5px; !important;    /* anders valt rood nauwelijks op */
}

.products .product .info .price-wrap .price .old-price::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

.products .product .info .price-wrap,
.products .product .info .price-wrap .price{
  text-decoration: none !important;
}

/* Het label. display:inline-block is bewust: een inline-block wordt niet
   meegestreept door de line-through van de ouder, een gewone inline wél. */
.products .product .info .price-wrap .price .old-price::before{
  content: "";
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #bdbdbd;
  vertical-align: baseline;
}



.products .product .info .price-wrap .price .old-price:empty{ display: none !important; }

.products .product .info .price-wrap .price .new-price{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #000 !important;
  text-align: left !important;
}


/* ============================================================================
   8. DE KNOP
   ============================================================================ */

.products .product > .product-inner > .products-actions{
  display: block !important;
  margin: 12px 0 0 !important;
  position: relative;
  z-index: 2;
}

.products .products-actions a.btn{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  padding: 13px 12px;
  border-radius: 6px;
  background-color: #000;
  color: #fff;
  line-height: 1.33;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.products .products-actions a.btn:hover{ background-color: #215c54; }


/* ============================================================================
   9. MOBIEL
   ============================================================================ */

@media (max-width: 767px){

  .products .products-actions a.btn{
    padding: 11px 8px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .products .product .info .price-wrap .price .new-price{ font-size: 18px !important; }
  .products .product .info .price-wrap .price .old-price{ font-size: 13px !important; }

  .products .product .info .price-wrap .price .old-price::before{
    display: block;
    margin: 0 0 1px;
  }

}


/* ============================================================================
   10. OPTIONEEL — DE KAART ALS ECHTE KAART
   ============================================================================ */

.products .product{
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.products .product:hover{
  border-color: #d8d8d8;
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

.products .product > .product-inner > .info{
  width: auto !important;
  margin: 0 !important;
  padding: 0 14px 0 !important;
}

.products .product > .product-inner > .products-actions{
  width: auto !important;
  margin: 12px 0 0 !important;
  padding: 0 14px 14px !important;
}

/* ============================================================================
   FLOORPASSION NL — TABELLEN IN BLOGARTIKELEN OP MOBIEL
   ----------------------------------------------------------------------------
*/

@media (max-width: 767px){

  .article-content .content table{
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 12px;
  }

  /* eventuele breedtes uit de HTML uitschakelen */
  .article-content .content table col,
  .article-content .content table td,
  .article-content .content table th{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .article-content .content table th,
  .article-content .content table td{
    padding: 7px 5px !important;
    line-height: 1.35;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;   /* breekt "Vlekbestendigheid" af als het moet */
    hyphens: auto;
  }

  .article-content .content table th{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  /* om en om een lichte rij, anders wordt het bij smalle kolommen
     lastig om je oog op één regel te houden */
  .article-content .content table tr:nth-child(even) td{
    background: #fafafa;
  }

}

/* ============================================================================
   FLOORPASSION NL — STALENPAGINA
/* ============================================================================
   1. HERO
   ============================================================================ */

.fp-stalen-top{
  margin: 0 0 28px;
}

.fp-stalen-hero{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #1b5c54 0%, #328980 100%);
  color: #fff;
  margin-bottom: 18px;
}

.fp-stalen-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 54px 40px 50px;
}


/* ----------------------------------------------------------------------------
   HET BEELDVLAK RECHTS
---------------------------------------------------------------------------- */

.fp-stalen-hero-media{ display: none; }

@media (min-width: 992px){

  .fp-stalen-hero.met-media{
    display: flex;
    align-items: stretch;
    min-height: 380px;
  }

  .fp-stalen-hero.met-media .fp-stalen-hero-inner{
    flex: 1 1 54%;
    max-width: none;
    padding-right: 20px;
    align-self: center;
  }

  .fp-stalen-hero-media{
    display: block;
    position: relative;
    flex: 0 0 46%;
    align-self: stretch;
  }

  .fp-stalen-hero-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    object-position: right center;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 30%, #000 65%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 30%, #000 65%);
  }

}

.fp-stalen-kicker{
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fp-stalen-hero-inner h1{
  margin: 0 0 12px;
  color: #fff;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
}

.fp-stalen-hero-inner p{
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

.fp-stalen-cta{
  display: inline-block;
  padding: 14px 30px;
  border-radius: 8px;
  background: #fff;
  color: #1b5c54 !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

.fp-stalen-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ============================================================================
   2. USP-BALK
   ============================================================================ */

.fp-stalen-usps{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 30px;
  padding: 14px 18px;
  list-style: none;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fafafa;
}

.fp-stalen-usps li{
  font-size: 13px;
  color: #444;
}

.fp-stalen-usps i{
  margin-right: 6px;
  color: #45c4a2;
}


/* ============================================================================
   3. STAPPEN
   ============================================================================ */

.fp-stalen-stappen{
  margin: 0 0 30px;
}

.fp-stalen-stappen h2{
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
}

.fp-stalen-stappen ol{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fpstap;
}

.fp-stalen-stappen li{
  position: relative;
  padding: 22px 18px 20px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.fp-stap-icoon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #eef5f4;
  color: #1b5c54;
  font-size: 17px;
}

.fp-stap-nr{
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #215c54;      /* groot maar licht: structuur zonder aandacht te vragen */
}

.fp-stalen-stappen li > strong{
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  color: #1a1a1a;
}

.fp-stap-tekst strong{
  font-weight: 700;
  color: #1a1a1a;
}

.fp-stap-tekst{
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: #6b6b6b;
}


/* ============================================================================
   4. TELLERBALK
   ============================================================================ */

.fp-stalen-balk{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-radius: 10px;
  background: #1b5c54;
  color: #fff;
}

.fp-stalen-balk.vol{
  background: #b4541f;   /* maximum bereikt */
}

.fp-stalen-teller{
  font-size: 14px;
}

.fp-teller-getal{
  display: inline-block;
  min-width: 26px;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.2);
  font-weight: 700;
  text-align: center;
}

.fp-stalen-naarwinkelwagen{
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
}

.fp-stalen-naarwinkelwagen i{ margin-left: 4px; }


/* ============================================================================
   5. DE STAALKAARTEN
   ============================================================================ */
.products.fp-stalen-grid{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.fp-staal-col{
  margin-bottom: 22px;
  display: flex;
  float: none;
}

.fp-staal{
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.fp-staal:hover{
  border-color: #d8d8d8;
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

.fp-staal-img{
  display: block;
  line-height: 0;
}

.fp-staal-img img{
  width: 100%;
  height: auto;
  display: block;
}

.fp-staal-info{
  flex: 1 1 auto;         /* duwt de knop naar de onderkant, ook bij een
                             titel van één regel */
  padding: 12px 14px 10px;
}

.fp-staal-merk{
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #1a1a1a;
}

.fp-staal-titel{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  font-size: 13px;
  line-height: 1.4;
  color: #444 !important;
  text-decoration: none !important;
}


/* ============================================================================
   6. DE KNOP
   ============================================================================ */
.fp-staal-acties{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 14px 14px;
}

.fp-staal-btn{
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #1b5c54;
  color: #fff !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.fp-staal-btn:hover{ background: #328980; }

.fp-staal-btn i{ margin-right: 5px; }

.fp-staal-btn.tweede{
  flex: 0 0 auto;
  width: auto;
  padding: 11px 12px;
  background: #fff;
  border-color: #d5d5d5;
  color: #555 !important;
  font-weight: 500;
}

.fp-staal-btn.tweede:hover{
  background: #f7f7f7;
  border-color: #b5b5b5;
}

.fp-staal-btn.tweede.alleen{
  flex: 1 1 auto;
  width: 100%;
}

/* bezig: het staal wordt opgezocht en toegevoegd */
.fp-staal-btn.bezig{
  opacity: .6;
  pointer-events: none;
}

/* gelukt */
.fp-staal-btn.toegevoegd,
.fp-staal-btn.toegevoegd:hover{
  background: #eef5f4;
  border-color: #cfe2df;
  color: #1b5c54 !important;
  cursor: default;
}

/* maximum van 10 bereikt */
.fp-staal-btn.geblokkeerd,
.fp-staal-btn.geblokkeerd:hover{
  background: #ededed;
  color: #a0a0a0 !important;
  pointer-events: none;
}

/* van dit kleed blijkt geen staal te bestaan */
.fp-staal-btn.geen,
.fp-staal-btn.geen:hover{
  background: #f5f5f5;
  border-color: #e4e4e4;
  color: #a0a0a0 !important;
  pointer-events: none;
}

.fp-staal-btn.geen i{ display: none; }


/* ============================================================================
   7. MOBIEL
   ============================================================================ */

@media (max-width: 767px){

  .fp-stalen-hero-inner{ padding: 34px 22px 32px; }
  .fp-stalen-hero-inner h1{ font-size: 25px; }
  .fp-stalen-hero-inner p{ font-size: 14px; }

  .fp-stalen-usps{
    gap: 6px;
    padding: 12px 14px;
  }
  .fp-stalen-usps li{
    flex: 0 0 100%;
    font-size: 12px;
  }

  .fp-stalen-stappen h2{ font-size: 19px; }

  .fp-stalen-balk{
    padding: 11px 14px;
    font-size: 13px;
  }

  .fp-staal-col{ margin-bottom: 14px; }
  .fp-staal-info{ padding: 10px 10px 8px; }
  .fp-staal-titel{ font-size: 12px; }

  .fp-staal-acties{
    flex-direction: column;
    gap: 5px;
    margin: 0 10px 10px;
  }

  .fp-staal-btn{
    padding: 10px 6px;
    font-size: 12px;
  }

  .fp-staal-btn.tweede{
    width: 100%;
    padding: 9px 6px;
    font-size: 11px;
  }

}

/* FLOORPASSION NL — BLACK FRIDAY CATEGORIE (id 10455517)  */

.col-10455517-h h1{ display: none; }

/* ============================================================================
   1. HERO
   ============================================================================ */

.bf-top{ margin: 0 0 30px; }

.bf-hero{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 16px;
  background: #0c0c0c;
  color: #fff;
}

.bf-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 60px 44px 54px;
}


/* ----------------------------------------------------------------------------
   HET BEELDVLAK RECHTS
---------------------------------------------------------------------------- */

.bf-hero-media{ display: none; }

@media (min-width: 992px){

  .bf-hero.met-media{
    display: flex;
    align-items: stretch;
    min-height: 420px;
  }

  .bf-hero.met-media .bf-hero-inner{
    flex: 1 1 52%;
    max-width: none;
    padding-right: 20px;
    align-self: center;       /* tekst blijft verticaal gecentreerd, ook als
                                 de foto hoger is dan de tekst */
  }

  .bf-hero-media{
    display: block;
    position: relative;
    flex: 0 0 48%;            /* iets breder dan eerst, scheelt bijsnijden */
    align-self: stretch;
  }

  .bf-hero-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;


    object-position: right center;
  }

  /* het verloop dat de naad wegneemt */
  .bf-hero-media::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
                #0c0c0c 0%,
                rgba(12,12,12,.65) 26%,
                rgba(12,12,12,.15) 62%,
                rgba(12,12,12,0) 100%);
  }

}


.bf-titel{
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: 54px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Het gouden streepje onder de titel. Klein detail, maar het maakt van een
   losse kop een vormgegeven kop. */
.bf-titel::after{
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  background: #faaf3f;
  border-radius: 2px;
}

.bf-subkop{
  margin: 18px 0 8px;
  color: #faaf3f;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.bf-tekst{
  margin: 0 0 24px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.6;
}

.bf-cta{
  display: inline-block;
  padding: 15px 32px;
  border-radius: 8px;
  background: #faaf3f;
  color: #0c0c0c !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.bf-cta:hover{
  background: #cfae77;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}


/* ============================================================================
   2. AFTELKLOK
   ============================================================================ */

.bf-klok{
  display: flex;
  gap: 10px;
  margin: 0 0 26px;
}

.bf-klok[hidden]{ display: none; }

.bf-klok-vak{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.bf-klok-getal{
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  /* Cijfers even breed, anders springt de klok elke seconde heen en weer. */
  font-variant-numeric: tabular-nums;
}

.bf-klok-label{
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}


/* ============================================================================
   3. USP-BALK
   ============================================================================ */

.bf-usps{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0 0 22px;
  padding: 15px 20px;
  list-style: none;
  border-radius: 10px;
  background: #141414;
}

.bf-usps li{
  font-size: 13px;
  color: rgba(255,255,255,.85);
}

.bf-usps i{
  margin-right: 7px;
  color: #faaf3f;
}

/* ============================================================================
   5. MOBIEL
   ============================================================================ */

@media (max-width: 767px){

  .bf-hero-inner{ padding: 34px 22px 32px; }

  .bf-titel{ font-size: 34px; }
  .bf-titel::after{ width: 48px; height: 3px; margin-top: 11px; }

  .bf-subkop{ font-size: 16px; margin-top: 14px; }
  .bf-tekst{ font-size: 14px; }

  .bf-klok{ gap: 7px; }
  .bf-klok-vak{ min-width: 0; flex: 1 1 0; padding: 9px 4px; }
  .bf-klok-getal{ font-size: 19px; }
  .bf-klok-label{ font-size: 9px; letter-spacing: .06em; }

  .bf-cta{ display: block; text-align: center; padding: 14px 20px; }

  .bf-usps{
    gap: 7px;
    padding: 13px 15px;
  }
  .bf-usps li{ flex: 0 0 100%; font-size: 12px; }

  .bf-tegel{ min-height: 150px; }
  .bf-tegel-titel{ font-size: 21px; }
  .bf-tegel-inner{ padding: 18px 16px 16px; }

}

.fa-heart:before {
    content: "\f004";
  color: #d70000;
}

/* ============================================================================
   FLOORPASSION NL — CATEGORIEPAGINA IN NIEUWE STIJL
   ----------------------------------------------------------------------------
   Onderaan je stylesheet plakken.

   Alles begint met .fp-cat-. Die classnamen bestaan nergens anders in je thema,
   dus geen enkele andere pagina merkt hier iets van.

   ÉÉN KLEUR OM AAN TE DRAAIEN
   Hieronder staat --fp-cat-kleur. Verander die ene waarde en het tekstvlak, de
   accenten en de hoverkleuren gaan allemaal mee. Het warme bruin uit je
   voorbeeld is #8a7361; standaard staat het op je eigen donkergroen.
   ============================================================================ */

.fp-cat-top{
  --fp-cat-kleur: #1b5c54;        /* bruin uit je voorbeeld: #8a7361 */
  --fp-cat-kleur-licht: #328980;  /* daarbij passend lichter: #a58a74 */

  margin: 0 0 30px;
}


/* ============================================================================
   0. HET OUDE KOPBLOK VERBERGEN
   ----------------------------------------------------------------------------
   Je thema rendert zelf al een kop met titel, afbeelding en beschrijving, maar
   die zit vast in de kolom naast je filterbalk en kan dus nooit over de volle
   breedte lopen. Onze banner staat vóór die rij en heeft die beperking niet.

   Titel en beschrijving komen in de nieuwe banner terug uit collection.title en
   collection.description, dus je verliest geen tekst en geen h1.

   Dit raakt alleen categorieën waar jij de class fp-cat-nieuw op zet.
   ============================================================================ */

.fp-cat-nieuw .img-collection-top,
.fp-cat-nieuw .custom-collection-top{
  display: none !important;
}


/* ============================================================================
   1. DE BANNER
   ----------------------------------------------------------------------------
   Foto links, gekleurd vlak rechts, met een schuine naad ertussen.

   Die naad maken we met clip-path op het tekstvlak. Het vlak schuift met een
   negatieve marge een stukje over de foto heen, en de clip-path snijdt de
   linkerrand schuin af. Daardoor loopt de kleur het beeld in in plaats van er
   met een rechte lijn tegenaan te staan.

   De foto krijgt object-fit: cover. Dat is het verschil met je oude banner: die
   gebruikte de x1-modus van Lightspeed, die de foto binnen een vast formaat
   pást en de rest opvult — bij jouw afbeelding met zwart. Cover snijdt bij in
   plaats van op te vullen, dus er komt nooit meer een balk bij.
   ============================================================================ */

.fp-cat-banner{
  display: flex;
  align-items: stretch;
  min-height: 300px;
  margin: 0 0 18px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fp-cat-kleur);
  color: #fff;
}

.fp-cat-banner-foto{
  flex: 1 1 52%;
  min-width: 0;
}

.fp-cat-banner-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fp-cat-banner-tekst{
  flex: 0 0 51%;                 /* breder dan eerst: op 46% pasten de twee
                                    knoppen niet naast elkaar en stapelden ze,
                                    waardoor de hele banner hoger werd */
  margin-left: -3%;              /* het vlak schuift over de foto heen */
  padding: 36px 40px 36px 10%;   /* extra links, want daar snijdt de schuinte */
  background: var(--fp-cat-kleur);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Geen foto beschikbaar: dan geen schuinte, gewoon een net gekleurd vlak. */
.fp-cat-banner.zonder-foto .fp-cat-banner-tekst{
  flex: 1 1 100%;
  margin-left: 0;
  padding: 46px 44px;
  clip-path: none;
}

.fp-cat-banner-tekst h1{
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 700;
}

.fp-cat-banner-intro{
  max-width: 34em;               /* leesbare regellengte */
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.6;
}

.fp-cat-banner-intro p{ margin: 0 0 10px; }
.fp-cat-banner-intro p:last-child{ margin-bottom: 0; }

.fp-cat-banner-intro a{
  color: #fff !important;
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   DE KNOPPEN
   ----------------------------------------------------------------------------
   Eén primaire knop en één secundaire. Die rangorde is het hele punt: vol wit
   trekt het oog, een rand zegt "kan ook". Twee even zware knoppen naast elkaar
   laten de bezoeker kiezen in plaats van klikken.

   Het lichte omhoogschuiven bij hover is klein gehouden — 1 pixel. Genoeg om
   te voelen dat er iets klikbaars zit, te weinig om op te vallen.
---------------------------------------------------------------------------- */

.fp-cat-banner-knoppen{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}

.fp-cat-knop{
  display: inline-block;
  padding: 11px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;           /* knoptekst mag nooit afbreken */
  text-align: center;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease,
              background .15s ease, border-color .15s ease, color .15s ease;
}

/* primair: vol wit */
.fp-cat-knop.primair{
  background: #fff;
  border-color: #fff;
  color: var(--fp-cat-kleur) !important;
}

.fp-cat-knop.primair:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* secundair: alleen een rand, vult zich bij hover */
.fp-cat-knop.secundair{
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff !important;
}

.fp-cat-knop.secundair:hover{
  background: rgba(255,255,255,.14);
  border-color: #fff;
  transform: translateY(-1px);
}


/* ============================================================================
   2. USP-BALK
   ============================================================================ */

.fp-cat-usps{
  display: flex;
  flex-wrap: wrap;
  gap: 9px 28px;
  margin: 0 0 28px;
  padding: 14px 20px;
  list-style: none;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fafafa;
}

.fp-cat-usps li{
  font-size: 13px;
  color: #444;
}

.fp-cat-usps i{
  margin-right: 7px;
  color: var(--fp-cat-kleur-licht);
}


/* ============================================================================
   3. DE RIJ MET SUBCATEGORIEËN
   ----------------------------------------------------------------------------
   Eén rij die horizontaal schuift in plaats van een raster dat afbreekt. Zo
   blijft de hoogte van de pagina gelijk of je nu drie of twaalf subcategorieën
   hebt, en zie je meteen dat er meer is dan wat er past.
   ============================================================================ */

.fp-cat-strip-wrap{ margin: 0; }

.fp-cat-strip-titel{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
}

.fp-cat-strip{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.fp-cat-strip::-webkit-scrollbar{ height: 6px; }
.fp-cat-strip::-webkit-scrollbar-thumb{
  background: #dcdcdc;
  border-radius: 99px;
}

.fp-cat-tegel{
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  text-decoration: none !important;

  /* De titel staat onder de afbeelding. Wil je hem erboven, zoals in het
     voorbeeld dat je stuurde, zet dan hier flex-direction: column-reverse en
     verander de margin van .fp-cat-tegel-titel naar 0 0 8px. */
  display: flex;
  flex-direction: column;
}

.fp-cat-tegel-foto{
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f4f4;
  aspect-ratio: 4 / 3;
}

.fp-cat-tegel-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.fp-cat-tegel:hover .fp-cat-tegel-foto img{ transform: scale(1.06); }

.fp-cat-tegel-titel{
  display: block;
  margin: 9px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #1a1a1a !important;
}

.fp-cat-tegel:hover .fp-cat-tegel-titel{ color: var(--fp-cat-kleur) !important; }

/* Geen afbeelding: geen gebroken plaatje maar een rustig vlak. */
.fp-cat-tegel-foto:empty{
  background: linear-gradient(135deg, #f0f0f0 0%, #e4e4e4 100%);
}

/* Het gele labeltje met het categorie-ID. Alleen zichtbaar zolang toonids in
   categorie-header.rain op 1 staat. Bewust lelijk, zodat je het niet vergeet
   uit te zetten. */
.fp-cat-tegel-id{
  display: block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff3bf;
  color: #6b5a00 !important;
  font: 700 11px/1.4 monospace;
  text-align: center;
}


/* ============================================================================
   4. MOBIEL
   ----------------------------------------------------------------------------
   Onder elkaar en zonder schuine naad. Een schuinte over de volle breedte
   kost alleen maar hoogte en levert niets op.
   ============================================================================ */

@media (max-width: 991px){

  .fp-cat-banner{
    flex-direction: column;
    min-height: 0;
    border-radius: 12px;
  }

  .fp-cat-banner-foto{
    flex: 0 0 auto;
    height: 200px;
  }

  .fp-cat-banner-tekst{
    flex: 0 0 auto;
    margin-left: 0;
    padding: 24px 22px 26px;
    clip-path: none;
  }

  .fp-cat-banner-tekst h1{ font-size: 24px; }
  .fp-cat-banner-intro{ font-size: 14px; }

  /* Op een telefoon onder elkaar en over de volle breedte. Twee knoppen naast
     elkaar worden daar allebei te smal om comfortabel te raken. */
  .fp-cat-banner-knoppen{
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
  }
  .fp-cat-knop{
    display: block;
    padding: 12px 18px;
    font-size: 13px;
  }

  .fp-cat-usps{
    gap: 6px;
    padding: 12px 15px;
  }
  .fp-cat-usps li{ flex: 0 0 100%; font-size: 12px; }

  .fp-cat-strip-titel{ font-size: 17px; }
  .fp-cat-tegel{ width: 140px; }
  .fp-cat-tegel-titel{ font-size: 12px; }

}


/* ============================================================================
   EINDE-CATEGORIEPAGINA-CSS*/
  
.fp-kleuren{
  min-height: 30px;
  margin: 10px 0 0;
  padding: 0 10px;
}

.fp-kleuren-rij{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fp-kleur{
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #f4f4f4;
  transition: border-color .15s ease, transform .15s ease;
}

.fp-kleur img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Een kleed van 370px terugbrengen naar 26px laat vooral het patroon zien en
     nauwelijks de kleur. Iets inzoomen haalt het midden naar voren, en dat is
     waar de kleur zit. */
  transform: scale(1.6);
}

.fp-kleur:hover{
  border-color: #111;
  transform: scale(1.12);
}

/* De kleur die je nu bekijkt. Een ring op afstand in plaats van een dikke
   rand, zodat het bolletje even groot blijft als de rest. */
.fp-kleur.actief{
  border-color: #111;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111;
}

.fp-kleur.actief:hover{
  transform: none;
  cursor: default;
}

/* +3, +8 — even groot als een bolletje, maar duidelijk geen kleur. */
.fp-kleur-meer{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #555;
  font: 600 11px/1 inherit;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.fp-kleur-meer:hover{
  border-color: #111;
  color: #111;
}

/* Het gele labeltje van FP_KLEUR_DEBUG. Bewust lelijk, zodat je niet vergeet
   hem weer uit te zetten in snippets/products.rain. */
.fp-kleuren-debug{
  margin: 6px 10px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #fff3bf;
  color: #6b5a00;
  font: 700 10px/1.4 monospace;
  word-break: break-all;
}




@media (max-width: 767px){

  .fp-kleuren{
    min-height: 26px;
    margin-top: 8px;
    padding: 0 6px;
  }

  .fp-kleuren-rij{ gap: 5px; }

  .fp-kleur,
  .fp-kleur-meer{
    width: 22px;
    height: 22px;
  }

  .fp-kleur-meer{ font-size: 10px; }

  /* Op een touchscreen bestaat hover niet. Het opschalen bij aanraking voelt
     daar als een haperende knop, dus dat zetten we uit. */
  .fp-kleur:hover{ transform: none; }

}




.product.fp-kleur-preview .image-wrap .second{
  background-image: var(--fp-preview) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
}


/* ============================================================================
   EINDE-KLEUROPTIES-CSS
   ============================================================================ */


.product.fp-kleur-preview .image-wrap .second{
  background-image: var(--fp-preview) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
}




.fp-geen-hover .product.fp-heeft-kleuren .image-wrap .second{
  display: none !important;
}



.fp-geen-hover .product.fp-heeft-kleuren .image-wrap .first,
.fp-geen-hover .product.fp-heeft-kleuren .image-wrap .first img,
.fp-geen-hover .product.fp-heeft-kleuren .image-wrap > a > img,
.fp-geen-hover .product.fp-heeft-kleuren .image-wrap picture{
  opacity: 1 !important;
  visibility: visible !important;
}

.fp-geen-hover .product.fp-heeft-kleuren .image-wrap .first{
  display: block !important;
}



/* Het meetblokje. Alleen zichtbaar als TOON_METING in de snippet op 1 staat.
   Bewust lelijk, zodat je het niet vergeet uit te zetten. */
.fp-meting{
  position: relative;
  z-index: 20;
  margin: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #111;
  color: #6f6;
  font: 400 10px/1.45 monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================================
   DE REGEL MET BEOORDELINGEN OVER HET HELE MODEL
   ----------------------------------------------------------------------------
   Onderaan je stylesheet plakken, achter alles wat er al staat.
   ============================================================================ */

.fp-modelscore{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 6px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b6b6b;
}

/* De sterren. Twee rijen over elkaar: een grijze eronder en een gouden
   erboven die maar zo breed is als het cijfer. Zo klopt ook een halve ster,
   zonder dat er losse plaatjes voor nodig zijn. */
.fp-ms-sterren{
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

.fp-ms-leeg{ color: #dcdcdc; }

.fp-ms-vol{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #f5b301;
  white-space: nowrap;
}

.fp-ms-cijfer{
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
}

.fp-ms-tekst{
  color: #6b6b6b;
}

/* Heeft dit product zelf nog geen beoordelingen, dan is het extra belangrijk
   dat de zin meteen duidelijk maakt waar het cijfer over gaat. Daarom hier
   iets donkerder in plaats van weggemoffeld grijs. */
.fp-modelscore.zonder-eigen .fp-ms-tekst{
  color: #4a4a4a;
}

/* De lege sterrenrij van je thema, verborgen op producten die zelf nul
   beoordelingen hebben. Het duimpje van het Quality Program blijft staan. */
.small-reviews .stars.fp-leeg-verborgen{
  display: none !important;
}

@media (max-width: 767px){
  .fp-modelscore{
    font-size: 12px;
    gap: 3px 7px;
  }
  .fp-ms-sterren{ font-size: 14px; }
  .fp-ms-cijfer{ font-size: 13px; }
  /* op een smal scherm mag de zin onder de sterren vallen */
  .fp-ms-tekst{ flex: 1 1 100%; }
}

/* ============================================================================
   EINDE-MODELSCORE-CSS
   ============================================================================ */