stále nič takto to je: style> /* ===== KADO VARIANTY FINAL - 10 FARIEB V RIADKU + ODKLIK ===== */ .c755.variant.kado-color-variant, .c755.variant.kado-size-variant { display: grid !important; grid-template-columns: 130px 430px !important; column-gap: 22px !important; align-items: start !important; clear: both !important; overflow: visible !important; } .c755.variant.kado-color-variant { min-height: calc(var(--kado-color-rows, 1) * 42px + 4px) !important; margin-bottom: 16px !important; } .c755.variant.kado-size-variant { min-height: calc(var(--kado-size-rows, 1) * 46px + 8px) !important; margin-bottom: 24px !important; } .c755.variant .c756 { font-weight: 700 !important; padding-top: 8px !important; } .c755.variant .c757, .c755.variant .c1519 { width: 430px !important; min-height: inherit !important; height: auto !important; overflow: visible !important; position: relative !important; border: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; } /* pôvodný select a šípka preč */ .c755.variant select, .c755.variant select.c758, .c755.variant .c758 { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none !important; position: absolute !important; left: -99999px !important; background: none !important; background-image: none !important; appearance: none !important; -webkit-appearance: none !important; } /* modrá fajka / šípka preč */ .c755.variant .c757::before, .c755.variant .c757::after, .c755.variant .c1519::before, .c755.variant .c1519::after, .c755.variant .c758::before, .c755.variant .c758::after, .c755.variant select::before, .c755.variant select::after { display: none !important; content: none !important; background: none !important; background-image: none !important; } /* FARBY */ .kado-color-wrap { display: grid !important; grid-template-columns: repeat(10, 34px) !important; gap: 8px !important; width: 412px !important; overflow: visible !important; } .kado-color-btn { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 2px solid #d7dde4 !important; background: var(--kado-bg, #ccc) !important; cursor: pointer !important; padding: 0 !important; position: relative !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 2px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.16) !important; } .kado-color-btn.is-active { border-color: #233e9e !important; box-shadow: 0 0 0 3px rgba(35,62,158,.24), inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 2px rgba(0,0,0,.18) !important; } /* VEĽKOSTI */ .kado-size-wrap { display: grid !important; grid-template-columns: repeat(5, 54px) !important; gap: 10px !important; width: 310px !important; overflow: visible !important; } .kado-size-btn { width: 54px !important; height: 38px !important; border-radius: 9px !important; border: 2px solid #d7dde4 !important; background: #fff !important; color: #111827 !important; font-weight: 700 !important; cursor: pointer !important; text-align: center !important; position: relative !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; } .kado-size-btn.is-active { background: #233e9e !important; color: #fff !important; border-color: #233e9e !important; } /* nedostupné veľkosti */ .kado-size-btn.is-disabled { opacity: .38 !important; cursor: not-allowed !important; color: #6b7280 !important; background: #f3f4f6 !important; pointer-events: none !important; } .kado-size-btn.is-disabled::after { content: "" !important; position: absolute !important; left: 7px !important; right: 7px !important; top: 50% !important; height: 2px !important; background: #dc2626 !important; transform: rotate(-18deg) !important; } /* cena až pod variantmi */ .c755.c759, .c759.unregistered { clear: both !important; margin-top: 12px !important; } /* mobil */ @media (max-width: 768px) { .c755.variant.kado-color-variant, .c755.variant.kado-size-variant { display: block !important; min-height: auto !important; height: auto !important; } .c755.variant .c756 { margin-bottom: 6px !important; padding-top: 0 !important; } .c755.variant .c757, .c755.variant .c1519 { width: 100% !important; min-height: 0 !important; } .c755.variant.kado-color-variant { min-height: calc(var(--kado-color-rows, 1) * 38px + 2px) !important; margin-bottom: 8px !important; } .c755.variant.kado-size-variant { min-height: calc(var(--kado-size-rows, 1) * 43px + 2px) !important; margin-top: 0 !important; margin-bottom: 16px !important; } .kado-color-wrap { grid-template-columns: repeat(6, 31px) !important; gap: 7px !important; width: 221px !important; } .kado-color-btn { width: 31px !important; height: 31px !important; } .kado-size-wrap { grid-template-columns: repeat(4, 52px) !important; gap: 7px !important; width: 229px !important; } .kado-size-btn { width: 52px !important; height: 36px !important; } }