.elementor-5981 .elementor-element.elementor-element-a9aa386{--display:flex;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-5981 .elementor-element.elementor-element-4033217{--confirmation-message-display:block;--confirmation-message-alignment:center;--sections-spacing:15px;--confirmation-message-color:#0C3245;--titles-color:#0C3245;--titles-spacing:10px;--payment-details-space-between:50px;--payment-details-titles-color:#0C3245;--payment-details-titles-spacing:5px;--payment-details-items-color:#434343;--payment-details-border-type:solid;--payment-details-border-width:1px;}.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-thankyou-order-received{font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;}.elementor-5981 .elementor-element.elementor-element-4033217 h2{font-family:"Poppins", Sans-serif;font-size:26px;font-weight:600;}.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-order-overview.order_details li{font-family:"Poppins", Sans-serif;font-size:15px;}.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-order-overview.order_details li strong{font-family:"Poppins", Sans-serif;font-size:14px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5981 .elementor-element.elementor-element-a045709 .elementor-button{background-color:#14B8A6;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:600;box-shadow:0px 0px 22px 7px rgba(0, 0, 0, 0.12);border-radius:50px 50px 50px 50px;padding:20px 25px 20px 25px;}.elementor-5981 .elementor-element.elementor-element-a045709 .elementor-button:hover, .elementor-5981 .elementor-element.elementor-element-a045709 .elementor-button:focus{background-color:#19A596;}.elementor-5981 .elementor-element.elementor-element-a045709{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}@media(max-width:767px){.elementor-5981 .elementor-element.elementor-element-4033217{--sections-spacing:9px;--titles-spacing:10px;--payment-details-space-between:27px;}.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-thankyou-order-received{font-size:24px;line-height:1.3em;}.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-order-overview.order_details li{font-size:16px;}.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-order-overview.order_details li strong{font-size:11px;}}@media(min-width:768px){.elementor-5981 .elementor-element.elementor-element-a9aa386{--content-width:1280px;}}/* Start custom CSS for woocommerce-purchase-summary, class: .elementor-element-4033217 *//* ===== SameSubs – Order details (widget only) ===== */

/* Card & basis */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details{
  width:100%;
  border:1px solid #e7edf2;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(12,50,69,.06);
  border-collapse:separate;
  overflow:hidden;
}
.elementor-5981 .elementor-element.elementor-element-4033217 thead th{
  background:#fff;
  color:#0C3245;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:14px;
  padding:14px 18px;
  border-bottom:2px solid #f0f2f5;
  vertical-align:middle;
}
/* Kop 'Totaal' rechts */
.elementor-5981 .elementor-element.elementor-element-4033217 thead th.product-total,
.elementor-5981 .elementor-element.elementor-element-4033217 thead .woocommerce-table__product-table.product-total{
  text-align:right !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 td, .elementor-5981 .elementor-element.elementor-element-4033217 th{
  padding:14px 18px;
  border-bottom:1px solid #eef2f5;
  vertical-align:middle;
}

/* Productnaam zelfde grootte als rest */
.elementor-5981 .elementor-element.elementor-element-4033217 td.woocommerce-table__product-name,
.elementor-5981 .elementor-element.elementor-element-4033217 td.woocommerce-table__product-name a{
  font-size:14px;               /* niet groter */
  font-weight:500;
  color:#0C3245 !important;
  text-decoration:none !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 .product-quantity{ margin-left:6px; color:#607381; font-weight:500; }

/* Alle bedragen vet + rechts */
.elementor-5981 .elementor-element.elementor-element-4033217 td.product-total,
.elementor-5981 .elementor-element.elementor-element-4033217 td.product-total .amount,
.elementor-5981 .elementor-element.elementor-element-4033217 tfoot td .amount{
  color:#0C3245 !important;
  font-weight:600 !important;
  text-align:right;
  white-space:nowrap;
}

/* — Acties-blok volledig weg (label + knop) */
.elementor-5981 .elementor-element.elementor-element-4033217 tfoot th.order-actions--heading,
.elementor-5981 .elementor-element.elementor-element-4033217 tfoot th.order-actions--heading + td,
.elementor-5981 .elementor-element.elementor-element-4033217 tfoot .button{ display:none !important; }

/* — Subtotaal verbergen (robust voor varianten) */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details tfoot tr.cart-subtotal,
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:first-child,
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(3) > tr:first-child{
  display:none !important;
}

/* — Totals-blok (2e tfoot): consistent */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr th{
  color:#0C3245; font-weight:600;
}
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr td{
  color:#0C3245; font-weight:600; text-align:right;
}

/* “Bestelling totaal” mag vlot opvallen (rechts uitgelijnd bedrag blijft) */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:last-child th{
  font-size:1.05rem;
  font-weight:600;
  border-top:2px solid #e5e7eb;
}
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:last-child td{
  font-size:1.2rem;
  font-weight:600;
  color:#0C3245 !important;
  text-align:right !important;   /* bedrag rechts (niet meer midden) */
  border-top:2px solid #e5e7eb;
}

/* Betalingsmethode kleiner + waarde rechts, zonder extra lijn */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:last-of-type tr th{
  font-size:14px;
  font-weight:500;
  color:#0C3245;
  border-bottom:0 !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:last-of-type tr td{
  font-size:14px;
  font-weight:500;
  color:#0C3245;
  text-align:right;
  border-bottom:0 !important;
  padding-bottom:10px;
}

/* --- Herstel: toon laatste tfoot weer (we hadden 'm verborgen) --- */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:last-of-type{
  display: table-footer-group !important;
}

/* --- Verberg alleen de rij 'Betalingsmethode' (zit in het 2e tfoot en is de laatste rij) --- */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:last-child{
  display:none !important;
}

/* --- Maak 'Bestelling totaal' nu de laatste rij netjes afgerond --- */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:last-child th,
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:last-child td{
  /* NB: dit target de nieuwe laatste rij (Bestelling totaal) nadat de vorige regel de betaalmethode verbergt */
  border-bottom: 0 !important;
  padding-bottom: 18px !important;
}

/* --- 'Bestelling totaal' is nu op-één-na laatste rij (betaling is hidden) --- */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:nth-last-child(2) th{
  font-size:1.2rem !important;
  font-weight:600 !important;
  border-top:2px solid #e5e7eb !important;
  border-bottom:0 !important;
}

.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details > tfoot:nth-of-type(2) > tr:nth-last-child(2) td{
  font-size:1.2rem !important;
  font-weight:700 !important;
  color:#0C3245 !important;
  text-align:right !important;
  border-top:2px solid #e5e7eb !important;
  border-bottom:0 !important;
  padding-bottom:10px !important; /* zelfde bottom-padding als boven */
}

/* Poppins toepassen, alleen binnen deze widget */
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details,
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details th,
.elementor-5981 .elementor-element.elementor-element-4033217 table.woocommerce-table--order-details td{
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
}

/* Headers 'Product' & 'Totaal' in #14B8A6, iets groter & lichter */
.elementor-5981 .elementor-element.elementor-element-4033217 thead th.woocommerce-table__product-name.product-name,
.elementor-5981 .elementor-element.elementor-element-4033217 thead th.woocommerce-table__product-table.product-total{
  font-size:15.5px !important;
  font-weight:600 !important;
  color:#14B8A6 !important;
  line-height:1.3;
  letter-spacing:.01em;
}

/* 'Totaal' rechts uitlijnen behouden */
.elementor-5981 .elementor-element.elementor-element-4033217 thead th.woocommerce-table__product-table.product-total{
  text-align:right !important;
}

/* ===== SameSubs – Factureringsgegevens (match besteloverzicht) ===== */

/* Card container (werkt voor beide varianten) */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-columns--addresses .woocommerce-column--billing-address{
  border:1px solid #e7edf2;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(12,50,69,.06);
  overflow:hidden;
  font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Header */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > .woocommerce-column__title,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-columns--addresses .woocommerce-column--billing-address > .woocommerce-column__title{
  margin:0 !important;
  padding:14px 18px !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  color:#14B8A6 !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.3;
  background:#fff;
  border-bottom:2px solid #f0f2f5 !important;
}

/* Body */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > address,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-columns--addresses .woocommerce-column--billing-address > address{
  margin:0 !important;
  padding:14px 18px !important;       /* zelfde row-padding als tabel */
  font-style:normal !important;        /* geen italic */
  color:#0C3245 !important;
  line-height:1.55 !important;
  background:#fff !important;
  height:auto !important;              /* override inline height */
  border:0 !important;                 /* haal eventuele thema-borders weg */
}

/* Regels binnen address wat strakker */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > address p,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-columns--addresses .woocommerce-column--billing-address > address p{
  margin:6px 0 0 0 !important;
}

/* E-mailrij: icoon netjes naast tekst (thema plaatst 'm vaak absoluut) */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details--email{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details--email::before{
  position:static !important;
  margin:0 !important;
  transform:none !important;
  color:#14B8A6 !important;            /* icoon in accentkleur */
}

/* Links in address consistent */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details a{
  color:#0C3245 !important;
  text-decoration:none !important;
  font-weight:600 !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details a:hover{
  color:#14B8A6 !important;
}

/* Optioneel: maak 'N/B' minder aanwezig */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > address{
  --nb-color:#607381;
}
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > address{
  color:var(--nb-color) !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > address *{
  color:#0C3245 !important;           /* e-mail etc. blijft primair */
}

/* === PATCH 1: rand/kader rond de header weg === */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > .woocommerce-column__title{
  /* reset vreemde rand/styling uit het thema */
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: #fff !important;
  /* onze eigen onderrand behouden */
  border-bottom: 2px solid #f0f2f5 !important;
}
/* sommige thema's tekenen randen via pseudo-elementen */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > .woocommerce-column__title:before,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce-customer-details > .woocommerce-column__title:after{
  content: none !important;
}

/* === PATCH 2: e-mail naast het icoon uitlijnen === */
.elementor-5981 .elementor-element.elementor-element-4033217 p.woocommerce-customer-details--email{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 0 !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 p.woocommerce-customer-details--email::before{
  position: static !important;         /* niet absoluut */
  display: inline-block !important;
  margin: 0 !important;
  transform: none !important;
  color: #14B8A6 !important;           /* icoon kleur */
}
/* sommige thema's forceren block-weergave op de link */
.elementor-5981 .elementor-element.elementor-element-4033217 p.woocommerce-customer-details--email a{
  display: inline-block !important;
  line-height: 1.4 !important;
  color: #0C3245 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* === Factureringsgegevens: zelfde font/kleuren + perfect uitgelijnd === */

/* Zelfde body-typografie als order-tabel */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details,
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details address,
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details address p,
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details a{
  font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:#0C3245 !important;
}

/* Header (matcht ‘PRODUCT/TOTAAL’) */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details > .woocommerce-column__title{
  padding:14px 18px !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  color:#14B8A6 !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  border-bottom:2px solid #f0f2f5 !important;
  background:#fff !important;
}

/* Body exact gelijk aan tabel: geen vaste hoogte, juiste padding, geen extra lijnen */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details > address{
  height:auto !important;             /* override inline height */
  margin:0 !important;
  padding:14px 18px !important;       /* zelfde inner padding als tabelrijen */
  line-height:1.55 !important;
  background:#fff !important;
  border:0 !important;
}

/* Alle regels strak onder elkaar, zonder inspringen */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details > address > *{
  margin:0 0 8px 0 !important;
  padding-left:0 !important;          /* kill thema-indspringing */
  text-indent:0 !important;
  background:none !important;         /* sommige thema’s gebruiken bg-icoon */
}

/* E-mailrij: icoon + tekst horizontaal perfectly aligned met linker rand */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding-left:0 !important;          /* verwijder extra indent van thema */
}
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email::before{
  position:static !important;         /* geen absolute positie meer */
  margin:0 !important;
  transform:none !important;
  color:#14B8A6 !important;           /* accentkleur icoon */
  width:auto !important; height:auto !important;
}

/* Links consistent met tabel */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details a{
  text-decoration:none !important;
  font-weight:600 !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details a:hover{ color:#14B8A6 !important; }

/* E-mail onder N/B en links uitgelijnd */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email{
  display:block !important;          /* eigen regel, geen inline/flex meer */
  margin:8px 0 0 0 !important;       /* lichte ruimte onder N/B */
  padding-left:0 !important;         /* geen inspringing */
  text-indent:0 !important;
}

/* Icoon netjes vóór de tekst en horizontaal uitgelijnd */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email::before{
  position:static !important;        /* niet absoluut */
  display:inline-block !important;
  vertical-align:middle !important;
  margin:0 8px 0 0 !important;       /* ruimte tussen icoon en adres */
  transform:none !important;
  color:#14B8A6 !important;
}

/* Link naast het icoon, niet op een nieuwe regel */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email a{
  display:inline-block !important;
  vertical-align:middle !important;
  padding-left:0 !important;
}

/* === Factureringsgegevens: zelfde linker/rechter gutter als het Besteloverzicht === */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details{
  /* pas dit getal aan tot het visueel exact matcht met het overzicht */
  --billing-lr: 28px;
}

/* header en body dezelfde extra LR-padding geven */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details > .woocommerce-column__title,
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details > address{
  padding-left:  var(--billing-lr) !important;
  padding-right: var(--billing-lr) !important;
}

/* e-mailregel netjes meeschuiven (geen extra inspringing) */
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email{
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 section.woocommerce-customer-details p.woocommerce-customer-details--email::before{
  margin-left: 0 !important;
}

/* === ORDER OVERVIEW (bestelnummer / datum / e-mail / totaal / betalingsmethode) === */
/* 1) Dwing de UL in een grid + maak 5 gelijke kolommen */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details,
.woocommerce ul.woocommerce-order-overview.order_details{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  column-gap: 32px !important;
  row-gap: 14px !important;
  align-items: start !important;
}

/* 2) Reset alles wat het thema zet (float, flex-basis, vaste widths, clears, dividers) */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details > li,
.woocommerce ul.woocommerce-order-overview.order_details > li{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
}
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details > li:before,
.woocommerce ul.woocommerce-order-overview.order_details > li:before{
  content: none !important;           /* verticale scheidingslijn weghalen */
  display: none !important;
}

/* 3) Heel specifiek: betalingsmethode mag NIET op 100% vallen */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details 
        > li.woocommerce-order-overview__payment-method,
.woocommerce ul.woocommerce-order-overview.order_details 
        > li.woocommerce-order-overview__payment-method{
  grid-column: auto / span 1 !important;
  width: auto !important;
  clear: none !important;
  white-space: normal !important;     /* lange tekst mag afbreken i.p.v. pushen */
}

/* 4) Responsief (optioneel): val netjes terug bij small screens */
@media (max-width: 1024px){
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details,
  .woocommerce ul.woocommerce-order-overview.order_details{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 680px){
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details,
  .woocommerce ul.woocommerce-order-overview.order_details{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px){
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details,
  .woocommerce ul.woocommerce-order-overview.order_details{
    grid-template-columns: 1fr !important;
  }
}

/* === THANKYOU ORDER OVERVIEW → force 5 equal columns with flex === */

/* UL: force flex + wrap, add gap (very specific so it wins) */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
.woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;              /* horizontal & vertical gap */
  align-items: flex-start !important;
}

/* LI: hard width so exactly 5 per row; nuke theme floats/widths */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
.woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
  flex: 0 0 calc(20% - 32px) !important;  /* 5 columns */
  width: calc(20% - 32px) !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  border: 0 !important;
  margin: 0 !important;
}

/* Some themes set payment to 100%: clamp it back to 20% */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li.woocommerce-order-overview__payment-method,
.woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li.woocommerce-order-overview__payment-method{
  flex-basis: calc(20% - 32px) !important;
  width: calc(20% - 32px) !important;
}

/* Remove those vertical divider pseudo-elements if present */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li:before,
.woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li:before{
  content: none !important;
  display: none !important;
}

/* Responsive steps (same look, fewer columns) */
@media (max-width: 1024px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex-basis: calc(33.333% - 32px) !important; /* 3 cols */
    width: calc(33.333% - 32px) !important;
  }
}
@media (max-width: 700px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex-basis: calc(50% - 32px) !important;      /* 2 cols */
    width: calc(50% - 32px) !important;
  }
}
@media (max-width: 480px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex-basis: 100% !important;                  /* 1 col */
    width: 100% !important;
  }
}

/* === SameSubs – Thankyou overview als 'kaart' (rand + schaduw) === */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
.woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
  /* kaartstijl gelijk aan de andere blokken */
  border: 1px solid #e7edf2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(12,50,69,.06) !important;

  /* ruimte binnen/buiten */
  padding: 18px 20px !important;
  margin: 24px 0 32px !important;

  /* laat het netjes op één lijn blijven met de bestaande flex-styling */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* kolommen blijven even breed zoals eerder ingesteld */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
.woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
  flex: 0 0 calc(20% - 28px) !important; /* 5 gelijke kolommen */
  width: calc(20% - 28px) !important;
  margin: 0 !important;
  border: 0 !important;
}

/* responsieve stapjes (zelfde als eerder) */
@media (max-width:1024px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex-basis: calc(33.333% - 28px) !important;
    width: calc(33.333% - 28px) !important;
  }
}
@media (max-width:700px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex-basis: calc(50% - 28px) !important;
    width: calc(50% - 28px) !important;
  }
}
@media (max-width:480px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* 1) Remove Elementor's default inner padding on this widget */
.elementor-5981 .elementor-element.elementor-element-4033217 > .elementor-widget-container{
  padding: 0 !important;
}

/* 2) Make the summary list itself the same “card” as the others */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview,
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-thankyou-order-details{
  border: 1px solid #e7edf2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(12,50,69,.06);

  /* equal top/bottom padding so no big gap at the bottom */
  padding: 14px 18px !important;

  /* only a small gap to the next block */
  margin: 0 0 20px !important;

  list-style: none;
}

/* 3) Kill any extra spacing inside the items themselves */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview li{
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Some themes add a clearfix ::after that adds height – remove it */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview::after{
  content: none !important;
}

/* === Mobiel fix: thankyou-overzicht 1 kolom + normale woordafbreking === */

/* 1) Onder 700px: ELK LI 100% breed (geen 2 kolommen meer) */
@media (max-width: 700px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;            /* wat kleinere gap op mobiel */
  }
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* 2) Labels mogen NIET per letter afbreken */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce ul.order_details li strong,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.order_details li strong{
  word-break: normal !important;        /* overschrijft break-all/anywhere */
  overflow-wrap: normal !important;     /* geen willekeurige breuken */
  white-space: normal !important;       /* geen nowrap */
  hyphens: auto !important;             /* normale hyphenation waar kan */
}

/* Als het thema de LI zelf breakt, vang ook de hele LI en z’n kinderen af */
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
.elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li *{
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

/* === Fix: betalingsmethode waarde op één regel === */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details li.woocommerce-order-overview__payment-method strong {
  display: block !important;
  text-align: left !important;
  white-space: nowrap !important;    /* geen afbreken naar nieuwe regel */
  word-break: keep-all !important;   /* hou woorden heel */
  overflow-wrap: normal !important; 
  hyphens: none !important;
}

/* === Betalingsmethode netjes label + waarde === */
.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details li.woocommerce-order-overview__payment-method.method {
  display: flex !important;
  flex-direction: column !important;   /* label boven, waarde onder */
  align-items: flex-start !important;  /* alles links uitlijnen */
  white-space: normal !important;
  word-break: normal !important;
}

.elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details li.woocommerce-order-overview__payment-method.method strong {
  margin-top: 2px !important;          /* klein beetje ruimte onder label */
  display: inline-block !important;    /* waarde inline laten lopen */
  white-space: nowrap !important;      /* "Creditcard / Betaalkaart" op 1 regel */
}

/* === Order-overview kaart: subtielere top-padding === */
@media (max-width:700px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
    display:block !important;
    gap:0 !important;
    padding:10px 18px !important;   /* i.p.v. 14/18 → wat minder */
    align-items:unset !important;
  }
}

/* === Mobiel: meer ruimte tussen de regels in de order-overview === */
@media (max-width:700px){
  /* per item extra ademruimte */
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    padding: 4px 0 !important;         /* ruimte binnen elk item */
    margin: 0 0 12px 0 !important;      /* afstand tussen items (was 10px) */
    line-height: 1.45 !important;       /* iets ruimere regelhoogte */
  }
  /* laatste item geen extra ondermarge */
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li:last-child{
    margin-bottom: 0 !important;
  }
}

/* === Mobiel: waardes onder labels (Order-overview) op 15px === */
@media (max-width:700px){
  /* alle waarden staan in <strong>, totaalbedrag heeft .amount binnen strong */
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details li strong,
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details li strong .amount,
  .elementor-5981 .elementor-element.elementor-element-4033217 ul.woocommerce-order-overview.order_details li .amount{
    font-size:14px !important;
    line-height:1.45 !important;
    font-weight:500 !important; /* mag je weghalen als je huidige gewicht oké is */
  }
}

/* === Tablet: 2 rijen van 2, gecentreerd === */
@media (min-width:700px) and (max-width:1024px){
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
    display:grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 kolommen */
    column-gap: 32px !important;
    row-gap: 18px !important;
    justify-items:center !important;   /* centreren binnen kolommen */
    align-items:start !important;
  }

  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    width:100% !important;
    text-align:left !important;        /* label links, waarde eronder */
  }
}

/* === Tablet: 3 kolommen boven + 2 gecentreerd eronder (flex-spacer) === */
@media (min-width:700px) and (max-width:1024px){
  /* container als flex met wrap */
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:24px !important;                 /* horizontaal + verticaal */
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  /* elk item exact 1/3 breed */
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    flex:0 0 calc(33.333% - 24px) !important;
    width:calc(33.333% - 24px) !important;
    margin:0 !important;
    float:none !important;
    clear:none !important;
    text-align:left !important;
  }

  /* ⟶ Spacer: vult de 1e kolom van rij 2 zodat 2 items centreren op kolom 2 en 3 */
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details::after,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details::after{
    content:"" !important;
    flex:0 0 calc(33.333% - 24px) !important;
  }
}

/* === Tablet: 3 boven, 2 gecentreerd eronder === */
@media (min-width:700px) and (max-width:1024px){
  /* UL als 3-koloms grid */
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    column-gap: 24px !important;
    row-gap: 16px !important;
    align-items: start !important;
    justify-items: start !important;
  }

  /* resets */
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li,
  .woocommerce-order-received .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li{
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    text-align: left !important;
  }

  /* laatste twee items (rij 2) naar kolom 2 en 3 → visueel gecentreerd */
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li:nth-last-child(2){
    grid-column: 2 !important;
  }
  .elementor-5981 .elementor-element.elementor-element-4033217 .woocommerce .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li:last-child{
    grid-column: 3 !important;
  }
}/* End custom CSS */