/* ==========================================================================
   GNC SG — Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
}

/* ---- Primary (red filled) — "SHOP NOW AT GUARDIAN →" ---- */

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  text-decoration: none;
}

.btn--primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Full width variant ---- */

.btn--full {
  width: 100%;
}

/* ---- Secondary (dark filled) ---- */

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-white);
  text-decoration: none;
}

/* ---- Outline (bordered, no fill) ---- */

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
}

/* ---- Text link button (red text, arrow) — "READ ARTICLE →" ---- */

.btn--link {
  padding: 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.btn--link:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* The CTA arrow, shared by every red call-to-action: "READ ARTICLE" here,
   "SHOP NOW" on the product card, "SHOP NOW AT GUARDIAN" on the PDP. Those two
   live in product-card.css and product-gallery.css, which are page libraries —
   this rule is in the global one so the three cannot drift apart.

   Sized at the asset's own 12x12 rather than in em. The mocks draw the arrow
   at 9-11px wide whether the label is 14px (the cards) or 16px (the PDP), so it
   does not scale with its label — and 12px here puts the artwork at 1:1, which
   is also the only size its 1.51px shaft lands on a whole pixel.

   The mask (rather than a background image) is what lets one token be white on
   the red SHOP NOW button and red on the READ ARTICLE link — see
   --icon-arrow-right. */
.btn--link::after,
.product-card__cta a::after,
.product-info__cta a::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  /* The design's gap is 7px, measured to the arrow's first drawn pixel — and
     0.79px of the 12px box is transparent padding before that, so the margin
     carries the remaining 6.2. */
  margin-left: 6px;
  /* Centre the arrow on the label's caps rather than dropping it to the
     baseline. The arrow's own centre sits 5.79px up from the bottom of the box,
     and the caps' centre is half a cap-height (0.714em in Noto Sans) up from
     the baseline — so the box bottom belongs at the difference. Expressed as a
     calc so it stays correct on the PDP's 16px label as well as the cards' 14. */
  vertical-align: calc(0.357em - 5.79px);
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-right) no-repeat center / contain;
  mask: var(--icon-arrow-right) no-repeat center / contain;
}

/* ---- Sizes ---- */

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-base);
}

/* ---- Disabled state ---- */

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}