/* ===== KADO VARIANTY - FIX ROZLOŽENIA ===== */

.c755.variant {
  display: block !important;
  margin-bottom: 22px !important;
  position: relative !important;
}

.c755.variant .c756 {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.c755.variant .c757 {
  display: block !important;
  width: 100% !important;
}

/* HLAVNÝ WRAPPER */
.kado-variant-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ===== FARBY ===== */
.kado-color-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid #d1d5db !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.kado-color-btn.is-active {
  border: 3px solid #233e9e !important;
  box-shadow: 0 0 0 2px rgba(35,62,158,0.2) !important;
}

/* ===== VEĽKOSTI ===== */
.kado-size-btn {
  min-width: 46px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 2px solid #d1d5db !important;
  background: #fff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.kado-size-btn.is-active {
  background: #233e9e !important;
  color: #fff !important;
  border-color: #233e9e !important;
}

/* ===== VYPNUTIE PÔVODNÝCH SELECTOV ===== */
.c755.variant select {
  display: none !important;
}

/* ===== OPRAVA PREKRYVANIA ===== */
.c755.variant + .c755.variant {
  margin-top: 10px !important;
}

/* MOBILE */
@media (max-width: 768px) {
  .kado-variant-buttons {
    gap: 8px !important;
  }

  .kado-color-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .kado-size-btn {
    min-width: 42px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
}
<style>
/* ===== KADO FIX - FARBY MAJÚ VLASTNÝ PRIESTOR ===== */

.c755.variant {
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 22px !important;
  margin-bottom: 26px !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  clear: both !important;
}

.c755.variant .c757 {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* Farba - väčší priestor */
.c755.variant:has(.kado-color-wrap) {
  min-height: 145px !important;
  margin-bottom: 18px !important;
}

/* Veľkosť - vlastný priestor pod farbami */
.c755.variant:has(.kado-size-wrap) {
  min-height: 105px !important;
  margin-top: 12px !important;
  margin-bottom: 24px !important;
}

/* Farby */
.kado-color-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  max-width: 320px !important;
  width: 320px !important;
  height: auto !important;
  min-height: 120px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Veľkosti */
.kado-size-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  max-width: 320px !important;
  width: 320px !important;
  height: auto !important;
  min-height: 85px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

/* pôvodné šípky / selecty komplet vypnúť */
.c755.variant select,
.c755.variant select.c758,
.kado-native-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* cena nech ide až pod varianty */
.c755.c759,
.c759.unregistered {
  clear: both !important;
  margin-top: 10px !important;
}
</style>
<style>
/* ===== KADO FINAL FIX - AUTO VÝŠKA + VYPNUTIE PÔVODNEJ FAJKY ===== */

/* Variant má mať výšku podľa obsahu, nie napevno */
.c755.variant:has(.kado-color-wrap) {
  min-height: unset !important;
  height: auto !important;
  margin-bottom: 24px !important;
}

.c755.variant:has(.kado-size-wrap) {
  min-height: unset !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Farby nech zaberajú len toľko miesta, koľko reálne potrebujú */
.kado-color-wrap {
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: 330px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Veľkosti tiež bez zbytočnej výšky */
.kado-size-wrap {
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: 360px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Brutálne vypnutie pôvodného selectu a šípky */
.c755.variant select,
.c755.variant select.c758,
.c755.variant .c758,
.c755.variant select[data-selector],
.c755.variant select[data-selector="variant-selector"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  overflow: hidden !important;
}

/* ak systém kreslí šípku cez pseudo prvok */
.c755.variant .c757::after,
.c755.variant .c758::after,
.c755.variant select::after {
  display: none !important;
  content: none !important;
}

/* čierny rámik okolo selectu preč */
.c755.variant .c757 {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
</style>