/* =========================
   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 {
  --sc-gap-x: clamp(10px, 1.3020833333vw, 25px);
  --sc-gap-y: 10px;
  --sc-chart-margin: 18px 0;
  --sc-radius: 10px;
  --sc-title-margin: 0 0 8px;
  --sc-note-margin: 0 0 10px;
  --sc-note-font-size: 14px;
  --sc-head-bg: #f5f0e8;
  --sc-corner-bg: #fff;
  --sc-rowhead-bg: #fff;
  --sc-cell-bg: transparent;
  --sc-cell-border-color: var(--ecry-2);
  --sc-head-text-color: inherit;
  --sc-cell-text-color: inherit;
  --sc-head-font-weight: 400;
  --sc-rowhead-font-weight: 400;
  --sc-cell-padding: 10px 14px;
  --sc-cell-padding-mobile: 10px 12px;
  --sc-rowhead-width: 238px;
  --sc-rowhead-width-mobile: 155px;
  --sc-table-min-width-mobile: 620px;
  --sc-mobile-table-offset: -10px;
  margin: var(--sc-chart-margin);
}

.sc-sizechart__title { margin: var(--sc-title-margin); }
.sc-sizechart__note { margin: var(--sc-note-margin); opacity: .8; font-size: var(--sc-note-font-size); }

.sc-sizechart__scroll {
  width: calc(100% + var(--sc-gap-x) * 2);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--sc-radius);
  margin: 0;
  padding: 0;
  margin-left: calc(-1 * var(--sc-gap-x));
}

.sc-sizechart__table {
  border-collapse: separate;
  border-spacing: var(--sc-gap-x) var(--sc-gap-y);
  width: 100%;
  table-layout: auto;
}

.sc-sizechart__head,
.sc-sizechart__corner,
.sc-sizechart__rowhead {
  border-radius: var(--sc-radius);
  padding: var(--sc-cell-padding);
  white-space: nowrap;
  vertical-align: middle;
}

.sc-sizechart__head,
.sc-sizechart__corner {
  background: var(--sc-head-bg, #f5f0e8) !important;
  text-align: center;
  width: auto;
  color: var(--sc-head-text-color);
}

.sc-sizechart__table td {
  background: var(--sc-cell-bg, transparent);
  border: 1px solid var(--sc-cell-border-color);
  border-radius: var(--sc-radius);
  padding: var(--sc-cell-padding);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  width: auto;
  color: var(--sc-cell-text-color);
}

.sc-sizechart__corner {
  background: var(--sc-corner-bg, #fff) !important;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
  width: var(--sc-rowhead-width);
  min-width: var(--sc-rowhead-width);
  white-space: nowrap;
}

.sc-sizechart__head {
  font-weight: var(--sc-head-font-weight);
}

.sc-sizechart__rowhead {
  background: var(--sc-rowhead-bg, #fff) !important;
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: var(--sc-rowhead-font-weight);
  width: var(--sc-rowhead-width);
  min-width: var(--sc-rowhead-width);
  white-space: nowrap;
  color: var(--sc-head-text-color);
}

.sc-sizechart__table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

@media (max-width: 640px) {
  .sc-sizechart__table {
    min-width: var(--sc-table-min-width-mobile);
    margin-left: var(--sc-mobile-table-offset);
  }

  .sc-sizechart__scroll {
    margin-left:0;
  }

  .sc-sizechart__head,
  .sc-sizechart__corner,
  .sc-sizechart__rowhead,
  .sc-sizechart__table td {
    padding: var(--sc-cell-padding-mobile);
  }

  .sc-sizechart__rowhead {
    background: var(--sc-rowhead-bg);
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--sc-rowhead-width-mobile);
    min-width: var(--sc-rowhead-width-mobile);
    white-space: nowrap;
  }

  .sc-sizechart__corner {
    background: var(--sc-corner-bg);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 4;
    width: var(--sc-rowhead-width-mobile);
    min-width: var(--sc-rowhead-width-mobile);
    white-space: nowrap;
  }
}