/* Responzívne štýly pre grid veľkostí (PC aj mobil) */
.wt-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Posun na PC o 15px doľava */
@media (min-width: 992px) {
  .c-product-interconnection-detail-params--custom {
    margin-left: 15px;
  }
}

/* Posun na telefone o 14px doľava */
@media (max-width: 768px) {
  .c-product-interconnection-detail-params--custom {
    margin-left: 14px;
  }
}


/* Štvorce s veľkosťami */
.wt-size-tile {
  border: 1px solid #d2d2d2;
  background: #fff;       /* biele pozadie */
  color: #c00000;         /* červený text */
  padding: 10px 14px;
  min-width: 56px;
  min-height: 44px;       /* pohodlný tap target na mobile */
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: box-shadow .2s ease, transform .05s ease;
}

/* Hover (len pre zariadenia s myšou) */
@media (hover: hover) and (pointer: fine) {
  .wt-size-tile:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
}

/* Aktívny (aktuálne zobrazený) variant */
.wt-size-tile.is-active {
  outline: 2px solid #c00000;
  outline-offset: -2px;
}

/* Mobil: nech majú dlaždice väčšiu šírku a riadky sa pekne zalomia */
@media (max-width: 575px) {
  .wt-size-tile {
    flex: 1 1 calc(50% - 8px);   /* 2 stĺpce */
    min-width: 140px;            /* ak je miesto, bude širšia */
  }
}

/* Tablet a vyššie: voľnejšie rozmiestnenie */
@media (min-width: 576px) {
  .wt-size-tile {
    flex: 0 0 auto;              /* prirodzená šírka podľa textu */
  }
}

/* (Voliteľné) Desktop-only jemný posun doľava, ak ho chceš zachovať
@media (min-width: 992px) {
  .c-product-interconnection-detail-params--custom {
    padding-left: 15px;
  }
}
*/