/* =========================
   ADMIN
========================= */
.scl-wrap { padding: 8px 2px; }
.scl-top { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.scl-field { display:flex; flex-direction:column; gap:4px; min-width:220px; }
.scl-field--sm { min-width:120px; }
.scl-field--lg { flex:1; min-width:260px; }
.scl-input { width:100%; }

.scl-actions { display:flex; gap:10px; align-items:center; margin: 10px 0 12px; flex-wrap:wrap; }

.scl-grid-wrap { overflow:auto; border:1px solid #ddd; border-radius:10px; }
.scl-grid { border-collapse:separate; border-spacing:8px; min-width:720px; width:100%; padding:8px; }
.scl-grid th, .scl-grid td { background:#f5f0e8; border-radius:10px; padding:10px 12px; white-space:nowrap; }
.scl-corner { background:transparent !important; }
.scl-cell-input { width: 100%; border:1px solid rgba(0,0,0,0.15); border-radius:8px; padding:8px 10px; background:#fff; }
.scl-rowhead { text-align:left; position:sticky; left:0; z-index:2; min-width:260px; }
.scl-rowhead__inner, .scl-col__inner { display:flex; align-items:center; gap:8px; }
.scl-x { font-size:18px; line-height:1; text-decoration:none; }



/* =========================
   FRONTEND - tabelka rozmiarów
========================= */
.sc-sizechart { margin: 18px 0; }
.sc-sizechart__title { margin: 0 0 8px; }
.sc-sizechart__note { margin-bottom: 10px; opacity: .8; font-size: 14px; }

/*
  KLUCZOWA ZMIANA:
  Usuwamy "gutter hack" (ujemne marginesy i padding), bo to dawało efekt,
  że tabela wygląda jakby była węższa niż reszta contentu.
*/
.sc-sizechart__scroll {
  --sc-gap-x: clamp(10px, 1.3020833333vw, 25px);
  --sc-gap-y: 10px;
  width: calc(100% + var(--sc-gap-x) * 2); /* było 100% + padding */
  
  overflow-x: auto;              /* scroll jak potrzeba */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  border-radius: 10px;

  margin: 0;                     /* było: ujemne */
  padding: 0;                    /* było: var(--sc-gap-x) */
  margin-left: calc(-1 * var(--sc-gap-x)); /* było ujemne */
}

/*
  Tabela nadal 100%, a odstępy między komórkami robimy border-spacing.
  To nie jest padding wrappera, tylko odstęp między cellami — i to jest OK.
*/
.sc-sizechart__table {
  border-collapse: separate;
  border-spacing: var(--sc-gap-x) var(--sc-gap-y);
  width: 100%;
  table-layout: fixed;
}

/* th */
.sc-sizechart__table th {
  background: #f5f0e8;
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  width: 1%;
}

/* td */
.sc-sizechart__table td {
  border: 1px solid var(--ecry-2);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  width: 1%;
}

/*
  Sticky corner/rowhead:
  Dajemy tło (nie transparent), żeby sticky nie wyglądało jak "ucięte"
  i żeby było równo wizualnie przy scrollu.
*/
.sc-sizechart__corner {
  background: #fff !important; /* było transparent */
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;

  width: 238px;
  min-width: 238px;
  white-space: nowrap;
}
.sc-sizechart__head {
  font-weight: normal;
}
.sc-sizechart__rowhead {
  background: #fff;            /* dopięcie sticky */
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: normal;
  width: 238px;
  min-width: 238px;
  white-space: nowrap;
}

/* sticky nagłówek */
.sc-sizechart__table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* MOBILE */
@media (max-width: 640px) {
  .sc-sizechart__table {
    min-width: 620px;
    margin-left:-10px;
  }
  .sc-sizechart__scroll {
    margin-left:0;
  }
  .sc-sizechart__table th,
  .sc-sizechart__table td {
    padding: 10px 12px;
  }

  .sc-sizechart__rowhead {
    background: #fff;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;

    width: 155px;
    min-width: 155px;
    white-space: nowrap;
  }

  .sc-sizechart__corner {
    background: #fff !important;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 4;

    width: 155px;
    min-width: 155px;
    white-space: nowrap;
  }
}