.wp-block-aumet-pricing-comparison {
  margin: 0;
}

.aumet-pricing-comparison {
  --aumet-pricing-margin-top: 48px;
  --aumet-pricing-margin-bottom: 80px;
  --aumet-pricing-margin-inline-start: 30px;
  --aumet-pricing-margin-inline-end: 30px;
  --aumet-pricing-shell-width: 9999px;
  --aumet-pricing-label-width: 280px;
  --aumet-pricing-plan-width: 166px;
  --aumet-pricing-column-gap: 30px;
  --aumet-pricing-header-min-height: 149px;
  --aumet-pricing-header-bottom-space: 13px;
  --aumet-pricing-section-title-top: 27px;
  --aumet-pricing-section-title-right: 8px;
  --aumet-pricing-section-title-bottom: 18px;
  --aumet-pricing-section-title-left: 8px;
  --aumet-pricing-row-vertical-padding: 14px;
  --aumet-pricing-label-horizontal-pad: 8px;
  --aumet-pricing-row-border: #edf0f3;
  --aumet-pricing-section-title-color: #8e8e93;
  --aumet-pricing-label-color: #1d1d1f;
  --aumet-pricing-muted: #8e8e93;
  --aumet-pricing-table-bg: #ffffff;
  --aumet-pricing-button-bg: #f5f5f7;
  --aumet-pricing-button-text: #1d1d1f;
  --aumet-pricing-featured-button-bg: #1d1d1f;
  --aumet-pricing-featured-button-text: #ffffff;
  --aumet-pricing-button-radius: 8px;
  --aumet-pricing-button-min-height: 34px;
  --aumet-pricing-table-border-width: 0px;
  margin-block: var(--aumet-pricing-margin-top) var(--aumet-pricing-margin-bottom);
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--aumet-pricing-margin-inline-start) var(--aumet-pricing-margin-inline-end);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  box-shadow: none;
  color: #1d1d1f;
  font-family: inherit;
}

.aumet-pricing-comparison__inner {
  width: 100%;
  max-width: var(--aumet-pricing-shell-width);
  margin-inline: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.aumet-pricing-comparison__header,
.aumet-pricing-comparison__row {
  display: grid;
  grid-template-columns: var(--aumet-pricing-label-width) repeat(4, var(--aumet-pricing-plan-width));
  column-gap: var(--aumet-pricing-column-gap);
}

.aumet-pricing-comparison__header {
  align-items: end;
  min-height: var(--aumet-pricing-header-min-height);
  min-width: calc(var(--aumet-pricing-label-width) + (var(--aumet-pricing-plan-width) * 4) + (var(--aumet-pricing-column-gap) * 3));
  padding: 0 0 var(--aumet-pricing-header-bottom-space);
  border-top: 0;
}

.aumet-pricing-comparison__plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  text-align: start;
}

.aumet-pricing-comparison__plan-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2667;
}

.aumet-pricing-comparison__plan-price-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 9px;
  min-height: 21px;
}

.aumet-pricing-comparison__plan-price {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: start;
}

.aumet-pricing-comparison__plan-period {
  color: var(--aumet-pricing-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.aumet-pricing-comparison__plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--aumet-pricing-button-min-height);
  padding: 8px 16px;
  border-radius: var(--aumet-pricing-button-radius);
  background: var(--aumet-pricing-button-bg);
  color: var(--aumet-pricing-button-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none !important;
}

.aumet-pricing-comparison__plan-button.is-featured {
  background: var(--aumet-pricing-featured-button-bg);
  color: var(--aumet-pricing-featured-button-text);
}

.aumet-pricing-comparison__plan-button:hover,
.aumet-pricing-comparison__plan-button:focus,
.aumet-pricing-comparison__plan-button:active {
  text-decoration: none !important;
  color: var(--aumet-pricing-button-text);
}

.aumet-pricing-comparison__plan-button.is-featured:hover,
.aumet-pricing-comparison__plan-button.is-featured:focus,
.aumet-pricing-comparison__plan-button.is-featured:active {
  color: var(--aumet-pricing-featured-button-text);
}

.aumet-pricing-comparison__table {
  border: var(--aumet-pricing-table-border-width) solid var(--aumet-pricing-row-border);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: var(--aumet-pricing-table-bg);
}

/*
 * __header-scroll is itself sticky (stays on screen while scrolling down).
 * It has overflow-x: auto with a hidden scrollbar — JS keeps its scrollLeft
 * in sync with __scroll-wrap so column headers stay above the right columns.
 * Using a separate scrollable wrapper (instead of transform) means sticky
 * is never broken by CSS transforms.
 */
.aumet-pricing-comparison__header-scroll {
  position: sticky;
  top: 0; /* mobile/tablet: no sticky navbar */
  z-index: 10;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none; /* Firefox */
  background: var(--aumet-pricing-table-bg);
}

.aumet-pricing-comparison__header-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}


.aumet-pricing-comparison__scroll-wrap {
  width: 100%;
}

.aumet-pricing-comparison__section-title {
  margin: 0;
  padding: var(--aumet-pricing-section-title-top) var(--aumet-pricing-section-title-right) var(--aumet-pricing-section-title-bottom) var(--aumet-pricing-section-title-left);
  color: var(--aumet-pricing-section-title-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2778;
}

.aumet-pricing-comparison__row {
  align-items: center;
  min-height: 0;
  border-bottom: 1px solid var(--aumet-pricing-row-border);
}

.aumet-pricing-comparison__section:last-child .aumet-pricing-comparison__row:last-child {
  border-bottom: 0;
}

.aumet-pricing-comparison__label {
  padding: var(--aumet-pricing-row-vertical-padding) var(--aumet-pricing-label-horizontal-pad);
  color: var(--aumet-pricing-label-color);
  font-size: 14px;
  line-height: 1.45;
}

.aumet-pricing-comparison__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--aumet-pricing-row-vertical-padding) 0;
}

.aumet-pricing-comparison__icon,
.aumet-pricing-comparison__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.aumet-pricing-comparison__dash {
  display: inline-block;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: #d2d2d7;
}

.aumet-pricing-comparison__cell-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.aumet-pricing-comparison__editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-start: 12px;
}

.aumet-pricing-comparison__editor-note {
  margin: 0 0 16px;
  color: #6e6e73;
  font-size: 12px;
  line-height: 1.5;
}

@media (min-width: 992px) {
  .aumet-pricing-comparison__header-scroll {
    top: 100px; /* sticky navbar height (84px) + breathing room */
  }
}

@media (max-width: 991px) {
  /* Only the table area scrolls — the header is outside and synced via JS */
  .aumet-pricing-comparison__scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /*
   * Force identical explicit px columns on BOTH header and rows.
   * minmax(..., 1fr) resolves differently inside each separate overflow
   * container, causing the checkmarks to misalign with column headers.
   */
  .aumet-pricing-comparison__header,
  .aumet-pricing-comparison__row {
    grid-template-columns: var(--aumet-pricing-label-width) repeat(4, var(--aumet-pricing-plan-width));
    column-gap: var(--aumet-pricing-column-gap);
  }

  /* Both containers need the same min-width so scrolling is in sync */
  .aumet-pricing-comparison__header,
  .aumet-pricing-comparison__table {
    min-width: calc(var(--aumet-pricing-label-width) + (var(--aumet-pricing-plan-width) * 4) + (var(--aumet-pricing-column-gap) * 3));
  }

  /* Feature labels stay pinned to the left on horizontal scroll */
  .aumet-pricing-comparison__label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: var(--aumet-pricing-table-bg);
    border-inline-end: 1px solid var(--aumet-pricing-row-border);
  }

  /* Section titles (Wallet, B2B Marketplace…): must have explicit width
     matching the label column so sticky works on a non-grid-cell element */
  .aumet-pricing-comparison__section-title {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    width: var(--aumet-pricing-label-width);
    background: var(--aumet-pricing-table-bg);
    border-inline-end: 1px solid var(--aumet-pricing-row-border);
  }

  /* The empty header cell must also stick so plan headers (Free Plan, Starter…)
     clip behind it when scrolling horizontally — matching the label column behaviour.
     align-self: stretch is critical because the header grid uses align-items: end
     and this cell has no content — without stretch it collapses to 0 height and
     cannot visually cover the plan columns scrolling behind it. */
  .aumet-pricing-comparison__header-empty {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    align-self: stretch;
    background: var(--aumet-pricing-table-bg);
    border-inline-end: 1px solid var(--aumet-pricing-row-border);
  }
}

@media (max-width: 767px) {
  .aumet-pricing-comparison {
    padding-inline: 16px;
    --aumet-pricing-label-width: 130px;
    --aumet-pricing-plan-width: 130px;
    --aumet-pricing-column-gap: 12px;
    --aumet-pricing-header-min-height: 130px;
  }

  .aumet-pricing-comparison__inner {
    min-width: 0;
  }

  /* Use explicit px values — the base rule has minmax(label,1fr) which would
     expand the label column to fill the viewport inside a scroll container */
  .aumet-pricing-comparison__header,
  .aumet-pricing-comparison__row {
    grid-template-columns: 130px repeat(4, 130px);
    column-gap: 12px;
  }

  .aumet-pricing-comparison__header {
    min-height: 130px;
    padding-bottom: 13px;
  }

  /* Table must be as wide as the full grid so scrolling works */
  .aumet-pricing-comparison__table {
    min-width: calc(130px * 5 + 12px * 4);
  }

  /* Truncate long feature labels — they still give enough context */
  .aumet-pricing-comparison__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    font-size: 13px;
  }

  .aumet-pricing-comparison__plan {
    gap: 10px;
    padding: 0;
  }

  .aumet-pricing-comparison__plan-name {
    font-size: 12px;
    line-height: 1.3;
  }

  .aumet-pricing-comparison__plan-price {
    font-size: 13px;
  }

  .aumet-pricing-comparison__plan-period {
    font-size: 11px;
  }

  .aumet-pricing-comparison__plan-price-line {
    gap: 4px;
    flex-wrap: wrap;
  }

  .aumet-pricing-comparison__plan-button {
    font-size: 11px;
    padding: 6px 8px;
    min-height: 30px;
    text-align: center;
    line-height: 1.3;
  }

  .aumet-pricing-comparison__section-title {
    box-sizing: border-box;
    width: 130px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
  }
}