/* Vloerengarant — variant-swatches + nette dropdown + voorraad/levertijd op de PDP.
 * Verrijkt WooCommerce's kale variatieformulier binnen de code-PDP (.vs-cpdp). */

.vs-cpdp .variations {
  border-collapse: collapse;
  width: 100%;
  margin: 4px 0 8px;
}
.vs-cpdp .variations tr { display: block; margin-bottom: 14px; }
.vs-cpdp .variations td,
.vs-cpdp .variations th {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}
.vs-cpdp .variations th.label,
.vs-cpdp .variations td.label,
.vs-cpdp .variations .label label {
  font-weight: 700;
  font-size: 14px;
  color: #232427;
  margin-bottom: 8px;
}
.vs-cpdp .variations .reset_variations {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: #fa6900;
}

/* De kleurkiezer zelf zit in de plugin (VariationSwatchModule, .vs-vswatches).
 * De client-side kaartenrij die hier stond (.vs-swatches / .vs-swatch-card) is
 * bij v100 verwijderd: hij stond dubbelop naast het server-side raster. */

/* Afmeting/overige assen: nette native dropdown */
.vs-cpdp .variations select.vs-varsel {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 340px;
  padding: 12px 40px 12px 14px;
  border: 1.5px solid #e2e5ea;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23324696' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: inherit;
  font-size: 15px;
  color: #232427;
  cursor: pointer;
}
.vs-cpdp .variations select.vs-varsel:focus {
  outline: none;
  border-color: #324696;
  box-shadow: 0 0 0 3px rgba(50, 70, 150, .12);
}
/* Voorraad + artikelnummer + levertijd */
.vs-var-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 10px 0 4px;
  font-size: 14px;
}
.vs-var-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.vs-var-stock.in { color: #22c55e; }
.vs-var-stock.out { color: #e3342f; }
.vs-var-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.vs-var-sku { color: #6c757d; }
.vs-var-delivery {
  color: #232427;
  display: inline-flex;
  align-items: center;
}
.vs-var-delivery::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23324696' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Eén prijs die meewijzigt: eenheid-label naast de prijs, en de dubbele
   WooCommerce-variatieprijs verbergen (onze header-prijs is leidend). */
/* Prijsblok in vloerenmarkt-hiërarchie: grote prijs + eenheid, adviesprijs klein
   eronder, korting-badge rechts. */
.vs-cpdp__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.vs-cpdp__price-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vs-cpdp__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.vs-cpdp__price-current {
  font-size: 15px;
  font-weight: 600;
  color: #232427;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.vs-cpdp__price-current .woocommerce-Price-amount {
  font-size: 34px;
  font-weight: 800;
  color: #fa6900;
  line-height: 1;
  letter-spacing: -.5px;
}
.vs-cpdp__price-unit {
  font-size: 15px;
  font-weight: 700;
  color: #232427;
}
/* Wat er per pak, rol of lat wordt afgerekend: de brug tussen de grote
   eenheidsprijs en het bedrag dat straks in de winkelwagen staat. */
.vs-cpdp__price-pack {
  font-size: 13px;
  font-weight: 600;
  color: #5c6470;
}
.vs-cpdp__price-advies {
  font-size: 13px;
  font-weight: 500;
  color: #808080;
}
.vs-cpdp__price-advies del {
  color: #808080;
  text-decoration-thickness: 1px;
}

/* De marktvergelijking: "Elders vanaf EUR 42,95 per m2". Bewust GEEN
   doorgestreepte prijs zoals bij de adviesprijs, want dit is niet de prijs van
   de fabrikant en ook niet een prijs die wij ooit vroegen. Het bedrag staat
   daarom rechtop en in de gewone tekstkleur; de peildatum eronder maakt de
   bewering controleerbaar. */
.vs-cpdp__price-markt {
  font-size: 13px;
  font-weight: 500;
  color: #5c6470;
}
.vs-cpdp__price-markt strong {
  font-weight: 700;
  color: #1e3a2f;
}
.vs-cpdp__price-markt .woocommerce-Price-amount {
  text-decoration: none;
}
.vs-cpdp__price-markt-datum {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #8b929c;
}
.vs-cpdp__korting {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fa6900;
  color: #fff;
  border-radius: 12px;
  padding: 9px 18px;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 2px 8px rgba(250, 105, 0, .28);
}
.vs-cpdp__korting-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .92;
}
.vs-cpdp__korting-val {
  font-size: 22px;
  font-weight: 800;
}
.vs-cpdp__price-old {
  font-size: .6em;
  color: #a2a3a6;
  margin-left: 8px;
}
.vs-cpdp .single_variation .woocommerce-variation-price,
.vs-cpdp .woocommerce-variation-price {
  display: none;
}