.c-button__container {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--vw) * 48);
  padding-left: calc(var(--vw) * 16);
  padding-right: calc(var(--vw) * 16);
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--vw) * 10);
  border-radius: calc(var(--vw) * 8);
  font-size: calc(var(--vw) * 16);
  line-height: calc(var(--vw) * 24);
  padding: calc(var(--vw) * 12);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: filter 0.15s;
  -webkit-user-select: none;
  user-select: none;
  min-height: calc(var(--vw) * 48);
}

.c-button:focus-visible {
  outline: 0.2rem solid var(--primary-color);
  outline-offset: 0.2rem;
}

/* ── SIZES ───────────────────────────────────────────────── */

.c-button--sm {
  font-size: calc(var(--vw) * 14);
  line-height: calc(var(--vw) * 22);
  padding: calc(var(--vw) * 5) calc(var(--vw) * 12);
}

/* ── PRIMARY ─────────────────────────────────────── */

.c-button--primary:hover {
  filter: brightness(0.93);
}
.c-button--primary:active {
  filter: brightness(0.87);
}

.c-button--primary.c-button--black {
  background-color: var(--black);
  color: var(--white);
}

.c-button--primary.c-button--gray {
  background-color: var(--gray-100);
  color: var(--black);
}

.c-button--primary.c-button--primary-color {
  background-color: var(--primary-color);
  color: var(--white);
}

.c-button--primary.c-button--secondary-color {
  background-color: var(--secondary-color);
  color: var(--black);
}

.c-button--primary.c-button--tertiary-color {
  background-color: var(--tertiary-color);
  color: var(--black);
}

/* ── PRIMARY-ICON ───────────────────────────────── */

.c-button--icon .c-button__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ── OUTLINED ────────────────────────────────────── */

.c-button--outlined {
  background-color: var(--white);
}

.c-button--outlined:hover {
  filter: brightness(0.96);
}
.c-button--outlined:active {
  filter: brightness(0.91);
}

.c-button--outlined.c-button--black {
  border: 0.15rem solid var(--black);
  color: var(--black);
}

.c-button--outlined.c-button--white {
  color: var(--black);
  border: 1px solid var(--black);
}

.c-button--outlined.c-button--gray {
  border: 0.15rem solid var(--gray-200);
  color: var(--black);
}

.c-button--outlined.c-button--primary-color {
  border: 0.15rem solid var(--primary-color);
  color: var(--primary-color);
}

.c-button--outlined.c-button--secondary-color {
  border: 0.15rem solid var(--secondary-color);
  color: var(--black);
}

.c-button--outlined.c-button--tertiary-color {
  border: 0.15rem solid var(--tertiary-color);
  color: var(--black);
}

/* ──DISABLED ────────────────────────────────────── */

.c-button--disabled,
.c-button[disabled] {
  background-color: var(--gray-50) !important;
  color: var(--gray-400) !important;
  border: none !important;
  cursor: not-allowed !important;
  filter: none !important;
  pointer-events: none;
}

.c-button__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--vw) * 20);
  margin-top: calc(var(--vw) * 80);
  margin-bottom: calc(var(--vw) * 80);
  padding-left: calc(var(--vw) * 16);
  padding-right: calc(var(--vw) * 16);
}

.c-button__grid .c-button {
  width: 100%;
}

@media (min-width: 1024px) {
  .c-button__container--bottom {
    margin-bottom: calc(var(--vw) * 80);
  }

  .c-button__grid .c-button {
    width: auto;
  }
}