/* =========================================================
   K89 ABOUT UI REFINEMENT V1
   ========================================================= */


/* ---------- COMPACT 001–008 NAV ---------- */

.aboutx-index {
  gap: 7px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;

  flex-wrap: nowrap !important;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.aboutx-index::-webkit-scrollbar {
  display: none;
}

.aboutx-index a {
  min-height: 40px !important;

  padding: 8px 12px !important;

  flex: 0 0 auto;

  font-size:
    clamp(
      0.64rem,
      0.70vw,
      0.73rem
    ) !important;

  line-height: 1 !important;
  letter-spacing: 0.06em !important;

  white-space: nowrap;
}


/* ---------- GLOBAL BUYING CTA ---------- */

.aboutx-cta-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 9px;
}

.aboutx-cta-actions .btn {
  min-height: 42px;
  padding: 0 17px;
}


/* ---------- SHIPPING SECONDARY BUTTON ---------- */

.k89-about-shipping-cta {
  min-height: 42px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0 17px;

  border: 1px solid rgba(112, 255, 138, 0.28);

  background: rgba(112, 255, 138, 0.015);

  color: rgba(224, 240, 227, 0.72);

  text-decoration: none;
  white-space: nowrap;

  font-size: 0.69rem;
  font-weight: 750;
  line-height: 1;

  letter-spacing: 0.09em;
  text-transform: uppercase;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.k89-about-shipping-cta:hover,
.k89-about-shipping-cta:focus-visible {
  color: #70ff8a;

  border-color: rgba(112, 255, 138, 0.70);

  background: rgba(112, 255, 138, 0.045);

  box-shadow:
    inset
    0
    0
    18px
    rgba(112, 255, 138, 0.035);
}

.k89-about-shipping-cta:focus-visible {
  outline: 1px solid #70ff8a;
  outline-offset: 3px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 800px) {

  .aboutx-index {
    gap: 6px !important;

    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .aboutx-index a {
    min-height: 38px !important;

    padding: 7px 11px !important;

    font-size: 0.65rem !important;
  }

  .aboutx-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {

  .aboutx-cta-actions {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    width: 100%;
  }

  .aboutx-cta-actions .btn,
  .k89-about-shipping-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .k89-about-shipping-cta {
    transition: none;
  }
}