/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Tablesetting for divTableAtt */
.specstitel {
        font-family: "Azo-Sans", azo-sans-web, sans-serif;
        font-size: 18px;
        font-weight: 300;
        color: #7aaab5;
}
div.LichtBlauweRegels {
        font-family: "Azo-Sans", azo-sans-web, sans-serif;
        font-size: 14px;
        font-weight: 300;
        border: 0px solid #4d4e4c;
        width: 85%;
        text-align: Left;
        border-collapse: collapse;
}

.divTableAtt.LichtBlauweRegels .divTableAttCell, .divTableAtt.LichtBlauweRegels .divTableAttHead {
        border: 0px solid #FFFFFF;
        padding: 5px;
        vertical-align: middle;
        width: 50%;
}

.divTableAtt.LichtBlauweRegels .divTableAttBody .divTableCell {
        font-size: 13px;
}

.divTableAtt.LichtBlauweRegels .divTableAttRow {
        background: #FFFFFF;
        color: #4d4e4c;
        border-bottom: 1px solid;
        border-color: #f5f5f5;
}

.LichtBlauweRegels .tableAttFootStyle {
        font-size: 14px;
}

.divTableAtt .divTableAttCell, .divTableAtt .divTableAtt {}
.divTableAtt{ display: table; }
.divTableAttRow { display: table-row; }
.divTableAttHeading { display: table-header-group;}
.divTableAttCell, .divTableHead { display: table-cell;}
.divTableAttHeading { display: table-header-group;}
.divTableAttFoot { display: table-footer-group;}
.divTableAttBody { display: table-row-group;}

.attributekolom {
  float: left;
  width: 50%;
}

/* =========================
   Case study - Related products (right column)
   ========================= */

/* Container met meerdere producten (verticale lijst) */
.cs-productlijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Per product: afbeelding + titel naast elkaar */
.cs-productlijst-item {
  display: flex;
  align-items: center;     /* ✅ verticale uitlijning midden */
  gap: 12px;
}

/* De afbeelding-link wordt de vaste cirkel container */
.cs-productlijst-image-link {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;        /* ✅ knipt af naar cirkel */
  flex: 0 0 60px;          /* ✅ voorkomt samendrukken door flex */
  display: block;
}

/* IMG altijd exact vullen binnen de cirkel */
.cs-productlijst-image-link img,
.cs-productlijst-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;       /* ✅ vult cirkel mooi */
  display: block;
}

/* Titel link */
.cs-productlijst-link {
  font-family: "azo-sans-web", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #4d4e4c;
  line-height: 1.2;
  text-decoration: none !important;
  min-width: 0;            /* ✅ belangrijk binnen flex layouts */
  word-break: break-word;  /* ✅ voorkomt overflow bij lange titels */
}

/* Hover */
.cs-productlijst-link:hover,
.cs-productlijst-link:focus {
  color: #f56e28;
  text-decoration: underline;
}

/* =========================
   Mobile tweaks
   ========================= */

/* Op mobiel iets meer lucht en iets kleinere afbeelding */
@media (max-width: 767px) {

  .cs-productlijst {
    gap: 12px;
  }

  .cs-productlijst-item {
    gap: 10px;
  }

  .cs-productlijst-image-link {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }

  .cs-productlijst-link {
    font-size: 16px;
    line-height: 1.25;
  }
}

/* =========================
   Optional: mobile "stacked" layout (image above title)
   Uncomment if you want it under each other
   ========================= */

/*
@media (max-width: 480px) {

  .cs-productlijst-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-productlijst-image-link {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
  }
}
*/

/* UL met custom Font Awesome bullets */
ul.cs-icon-list {
  list-style: none;     /* standaard bullets uit */
  padding-left: 0;      /* reset */
  margin-left: 0;
}

/* Iedere li krijgt ruimte links voor het icoon */
ul.cs-icon-list li {
  position: relative;
  padding-left: 22px;   /* ruimte voor icoon */
  margin-bottom: 8px;   /* spacing tussen items */
}

/* Het "bullet" icoon */
ul.cs-icon-list li::before {
  color: #7aaab5;
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}

a.woocommerce-button.button.warranty_request {
  margin-left: 10px;
}

.woocommerce a.button + a.button {
  margin-left: 10px;
}