/* =============================================================================
   Size Chart for WooCommerce — Frontend Styles
   ============================================================================= */

/* ---- CSS custom properties (defaults; overridden per-chart via inline style) */
/*
   The defaults follow the theme. A chart that has never been given a colour is drawn in the shop's
   own primary colour rather than in black, and the tints are mixed from that colour so the stripes
   belong to it. Each chart overrides these inline, from its own settings.

   The type and size settings are deliberately NOT listed here. A wide screen and a phone are given
   different sizes by design, so each rule carries its own fallback - `var(--sc-title-font-size, 18px)`
   on a phone, `var(--sc-title-font-size, clamp(52px, 5.6vw, 74px))` on a desktop. A value declared in
   `:root` would override both fallbacks at once and quietly flatten a chart that never asked for one.
*/
:root {
  --sc-accent: var(--primary-color, #3481df);
  --sc-heading-font-size: 16px;
  --sc-body-font-size: 15px;
  --sc-heading-bg: var(--primary-color, #3481df);
  --sc-heading-color: #ffffff;
  --sc-odd-row-bg: #ffffff;
  --sc-even-row-bg: color-mix(in srgb, var(--primary-color, #3481df) 6%, #ffffff);
  --sc-tab-active-bg: var(--primary-color, #3481df);
  --sc-tab-active-color: #ffffff;
  --sc-tab-border-color: var(--primary-color, #3481df);
  --sc-tab-hover-bg: color-mix(in srgb, var(--primary-color, #3481df) 10%, #ffffff);
}

/* =============================================================================
   Shared Table Styles
   ============================================================================= */

.sc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  overflow-y: hidden;
}

.sc-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  /*
   * `!important` on this and on the cell padding below, which is the one place it is right: the theme
   * styles every table it does not recognise, and its selector carries an id - so no class this
   * stylesheet can name will ever win. Its rules were written for tables that arrive with no styling of
   * their own; this one has a scroller and a designed floor of its own.
   */
  min-width: var(--sc-table-min-width, 540px) !important;
  font-size: var(--sc-body-font-size);
  table-layout: auto;
  color: #0f172a;
}

.sc-table thead tr {
  background-color: var(--sc-heading-bg);
  color: var(--sc-heading-color);
}

.sc-table th {
  font-size: var(--sc-heading-font-size);
  font-weight: 700;
  /* The heading row is the same cell as the body, a little taller, so one control moves both. */
  padding: calc(var(--sc-cell-pad-y, 12px) + 3px) var(--sc-cell-pad-x, 18px) !important;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.sc-table td {
  padding: var(--sc-cell-pad-y, 12px) var(--sc-cell-pad-x, 18px) !important;
  text-align: center;
  white-space: nowrap;
  font-size: var(--sc-body-font-size);
  font-weight: 500;
}

.sc-table .sc-row--odd td {
  background-color: var(--sc-odd-row-bg);
}

.sc-table .sc-row--even td {
  background-color: var(--sc-even-row-bg);
}

.sc-table tbody tr td:first-child {
  font-weight: 600;
}

/* =============================================================================
   Trigger Button
   ============================================================================= */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s ease, transform 0.12s ease;
  outline: none;
}

.sc-btn:hover {
  opacity: 0.86;
}

.sc-btn:active {
  transform: scale(0.97);
}

.sc-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =============================================================================
   Popup Overlay + Panel
   ============================================================================= */

.sc-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.sc-popup.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay / backdrop */
.sc-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(0.5px);
  cursor: pointer;
  animation: sc-fade-in 0.22s ease;
}

/* Desktop panel — 32px padding all sides */
.sc-popup__panel {
  position: relative;
  background: #f4f6f8;
  border-radius: var(--sc-popup-radius, 16px);
  /* border: 3px solid #485463; */
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
  padding: 15px;
  width: 94%;
  max-width: var(--sc-popup-width, 990px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sc-slide-up-desktop 0.25s ease;
  z-index: 1;
}

.sc-popup__handle {
  display: none;
}

.sc-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.sc-popup__title {
  font-size: var(--sc-title-font-size, 30px);
  font-weight: 700;
  margin: 0;
  line-height: 1.08;
  flex: 1;
  color: #0f172a;
}

.sc-popup__close {
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  color: #64748b;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.sc-popup__close:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #111827;
}

.sc-popup__close:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.sc-popup__description {
  font-size: 16px;
  color: #374151;
  margin: 0 0 16px;
  flex-shrink: 0;
  line-height: 1.5;
}

.sc-popup__body {
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* Animations */
@keyframes sc-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sc-slide-up-desktop {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sc-slide-up-sheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* =============================================================================
   Tablet (769px – 1024px)
   ============================================================================= */

@media (max-width: 1024px) and (min-width: 769px) {
  .sc-popup__panel {
    padding: 24px;
    max-width: var(--sc-popup-width, 840px);
  }
}

/* =============================================================================
   Mobile: Bottom Sheet (≤ 768px)
   ============================================================================= */

@media (max-width: 768px) {

  .sc-popup.is-open {
    align-items: flex-end;
    justify-content: stretch;
  }

  .sc-popup__panel {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 14px 20px 24px;
    max-height: 84vh;
    animation: sc-slide-up-sheet 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    border-left: 1px solid #485463;
    border-right: 1px solid #485463;
    border-bottom: none;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.22);
  }

  .sc-popup__handle {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 0 auto 16px;
    flex-shrink: 0;
  }

  .sc-popup__header {
    margin-bottom: 4px;
  }

  .sc-popup__title {
    font-size: var(--sc-title-font-size, 18px);
  }

  .sc-popup__description {
    font-size: 16px;
    margin-bottom: 18px;
  }

  /* Table inside popup: horizontal scroll on mobile */
  .sc-popup__body .sc-table-wrap {
    margin: 0;
    padding-bottom: 8px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .sc-popup__body .sc-table-wrap::-webkit-scrollbar {
    height: 4px;
  }

  .sc-popup__body .sc-table-wrap::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 2px;
  }

  .sc-popup__body .sc-table-wrap::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 2px;
  }
}

/* =============================================================================
   Inline Table Block
   ============================================================================= */

.sc-inline {
  margin: 1em 0;
}

.sc-inline__title {
  font-size: var(--sc-title-font-size, 18px);
  font-weight: 700;
  margin: 0 0 20px;
}

.sc-inline__description {
  font-size: 16px;
  color: #6b7280;
  margin: -12px 0 15px;
  line-height: 1.5;
}

.sc-chart-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sc-chart-controls__primary,
.sc-chart-controls__secondary {
  display: flex;
  align-items: center;
}

.sc-chart-controls__primary {
  min-width: 0;
  flex: 1 1 auto;
}

.sc-chart-controls__secondary {
  margin-left: auto;
  flex: 0 0 auto;
}

.sc-tab-toggle--primary,
.sc-tab-toggle--units {
  margin-bottom: 0;
}

.sc-chart-unit-switcher {
  display: flex;
  align-items: center;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .sc-chart-controls {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 12px;
  }

  .sc-tab-toggle--primary {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .sc-tab-toggle__btn {
    min-height: 30px;
    /* padding: 8px 18px; */
    font-size: 13px;
  }

  .sc-tab-toggle--units {
    padding: 3px;
  }

  .sc-tab-toggle__btn--sub {
    min-width: 74px;
    min-height: 38px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* Body scroll lock when popup open */
html.sc-scroll-locked,
html.sc-scroll-locked body {
  overflow: hidden !important;
  height: 100% !important;
}

/* ============================================================
   Pill toggle — multi-table tab switcher
   ============================================================ */

.sc-tab-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.sc-tab-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 28px;
  background: #fff;
  border: 2px solid var(--sc-tab-border-color);
  border-radius: 999px;
  font-size: 15px;
  color: #334155;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.4;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
}

.sc-tab-toggle__btn:first-child {
  margin-left: 0;
}

.sc-tab-toggle__btn:last-child {
}

.sc-tab-toggle__btn:only-child {
}

.sc-tab-toggle__btn:hover {
  background: var(--sc-tab-hover-bg);
}

.sc-tab-toggle__btn.is-active {
  background: var(--sc-tab-active-bg);
  color: var(--sc-tab-active-color);
  border-color: var(--sc-tab-active-bg);
  z-index: 1;
}

.sc-tab-toggle__btn.is-active:hover {
  background: var(--sc-tab-active-bg);
  color: var(--sc-tab-active-color);
}

.sc-tab-toggle--units {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 2px solid var(--sc-tab-border-color);
  border-radius: 999px;
  background: #fff;
  flex-wrap: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}

.sc-tab-toggle__btn--sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: 35px;
  /* padding: 10px 22px; */
  margin: 0;
  border: none;
  border-radius: 999px !important;
  background: transparent;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-sizing: border-box;
}

.sc-tab-toggle__btn--sub:hover {
  background: var(--sc-tab-hover-bg);
}

.sc-tab-toggle__btn--sub.is-active,
.sc-tab-toggle__btn--sub.is-active:hover {
  background: var(--sc-tab-active-bg);
  color: var(--sc-tab-active-color);
  border-color: transparent;
}

@media (max-width: 768px) {
  .sc-chart-controls {
    align-items: stretch;
    margin-bottom: 18px;
  }

  .sc-chart-controls__primary,
  .sc-chart-controls__secondary {
    width: 100%;
  }

  .sc-chart-controls__secondary {
    margin-left: 0;
    justify-content: flex-start;
  }

  .sc-tab-toggle--primary {
    gap: 10px;
  }

  .sc-tab-toggle__btn {
    min-height: 42px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .sc-tab-toggle--units {
    width: fit-content;
    max-width: 100%;
    padding: 2px;
    gap: 1px;
  }

  .sc-tab-toggle__btn--sub {
    min-width: 84px;
    min-height: 38px;
    padding: 7px 16px;
    font-size: 12px;
  }

  /*
   * A phone gets a table that fits it.
   *
   * The theme's own rule for a table it does not recognise - `display: block; width: max-content;
   * min-width: 100%`, at 576px and below - splits the heading row and the body rows into two anonymous
   * tables that are sized independently and can stop lining up, and holds the table open at the width
   * its content wants, so a five column chart is cut off at the edge of the screen. This table keeps its
   * own layout instead, is as wide as the space it is in, and lets a heading wrap rather than holding the
   * table open. The wrapper still scrolls if a single word cannot be squeezed any further.
   *
   * The floor is zero here on purpose: the design's phone value is "fit the screen", and a shop that
   * wants a table wider than the screen can ask for one in the settings.
   */
  .sc-table {
    display: table !important;
    width: 100% !important;
    min-width: var(--sc-table-min-width, 0) !important;
  }

  .sc-table th,
  .sc-table td {
    white-space: normal;

    /*
     * The theme sets `word-break: break-word` on every table it does not recognise, and a cell inherits
     * it. That value also lowers the width a table can shrink to, so the table reached the screen by
     * cutting headings in half - measured on the shop's own chart, the heading row read
     * "SIZ E | LENG TH | BU ST | SHOUL DER | SLEE VE". A word stays whole here, its column grows to hold
     * it, and the wrapper scrolls the last few pixels if it has to.
     */
    word-break: normal;
    overflow-wrap: normal;
  }

  /*
   * The headings are what makes a wide chart wide: "SHOULDER" alone is about 80px at 16px, and five
   * columns of them plus their padding come to 401px on the shop's own chart - more than a phone has.
   * So a narrow screen draws the table no larger than 13px. This is a ceiling rather than a replacement:
   * a shop that asks for 12px keeps 12px, and 16px is still 16px on anything wider than a phone.
   */
  .sc-table th {
    font-size: min(var(--sc-heading-font-size), 13px);
  }

  .sc-table td {
    font-size: min(var(--sc-body-font-size), 13px);
  }

  /*
   * The horizontal padding is deliberately not repeated here. It would have to carry its own
   * `!important` to beat the shorthand above, and two competing values for one setting is worse than
   * cells that are two pixels roomier on a phone.
   */
}

/* Tab panel visibility */
.sc-tab-panel {
  display: block;
}

.sc-tab-panel[hidden],
.sc-tab-panel:not(.is-active) {
  display: none;
}

/* ============================================================
   Chart switcher — a popup that holds more than one chart
   ============================================================ */

.sc-chart-switch {
  flex-shrink: 0;
  padding: 0 4px;
}

.sc-tab-toggle--charts {
  gap: 8px;
  margin-bottom: 14px;
}

.sc-tab-toggle__btn--chart {
  min-height: 42px;
  padding: 8px 20px;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Which chart is which, said inside the chart itself; drawn only when the dialog holds several. */
.sc-chart-panel__title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sc-accent);
}

/* A chart that is not the chosen one stays out of the way even before the script has run. */
.sc-chart-panel:not(.is-active) {
  display: none;
}

@media (max-width: 768px) {
  .sc-chart-switch {
    padding: 0;
  }

  .sc-tab-toggle--charts {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .sc-tab-toggle--charts::-webkit-scrollbar {
    display: none;
  }

  .sc-tab-toggle__btn--chart {
    min-height: 38px;
    padding: 7px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
}