/**
 * Stable product button contract.
 *
 * This is intentionally separate from al-design-system vNext. Product pages
 * may keep using the established `.al-btn` markup while the experimental
 * contract remains isolated to its lab route.
 */
.al-btn {
  --al-btn-bg: #fff;
  --al-btn-bg-hover: #f3f8f5;
  --al-btn-bg-active: #e7f1eb;
  --al-btn-border: rgba(44, 107, 74, .22);
  --al-btn-border-hover: rgba(44, 107, 74, .38);
  --al-btn-color: #173f2c;
  --al-btn-color-hover: var(--al-btn-color);
  --al-btn-shadow: 0 2px 6px rgba(19, 63, 44, .08), 0 10px 24px rgba(19, 63, 44, .10);
  --al-btn-shadow-hover: 0 3px 8px rgba(19, 63, 44, .12), 0 16px 32px rgba(19, 63, 44, .16);
  --al-btn-shadow-active: 0 5px 14px rgba(19, 63, 44, .12);
  --al-btn-hover-y: -1px;
  --al-btn-active-y: 0;
  --al-btn-padding-x: 20px;
  --al-btn-gap: 8px;
  --al-btn-icon-size: 18px;
  --al-btn-min-height: 42px;
  --al-btn-radius: 999px;
  --al-btn-font-size: 14px;
  --al-btn-line-height: 1.1;
  --al-btn-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --al-btn-font-weight: 700;
  --al-font-family-body: var(--al-btn-font-family);
  --al-font-weight-semibold: var(--al-btn-font-weight);
  --al-motion-fast: .14s;
  --al-motion-normal: .18s;
  --al-ease-standard: ease;
  --al-shadow-focus-ring: 0 0 0 4px rgba(79, 155, 188, .32);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-btn-gap);
  min-block-size: var(--al-btn-min-height);
  max-inline-size: 100%;
  padding: 0 var(--al-btn-padding-x);
  border: 1px solid var(--al-btn-border);
  border-radius: var(--al-btn-radius);
  background: var(--al-btn-bg);
  color: var(--al-btn-color);
  -webkit-text-fill-color: var(--al-btn-color);
  box-shadow: var(--al-btn-shadow);
  font-family: var(--al-btn-font-family);
  font-size: var(--al-btn-font-size);
  font-weight: var(--al-btn-font-weight);
  line-height: var(--al-btn-line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .14s ease;
}

.al-btn:hover {
  color: var(--al-btn-color-hover);
  -webkit-text-fill-color: var(--al-btn-color-hover);
  text-decoration: none;
}

@media (hover: hover) {
  .al-btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):not([aria-busy="true"]):hover {
    --al-accent: var(--al-btn-bg-hover);
    --al-brand: var(--al-btn-bg-hover);
    border-color: var(--al-btn-border-hover);
    background: var(--al-btn-bg-hover);
    box-shadow: var(--al-btn-shadow-hover);
    transform: translateY(var(--al-btn-hover-y));
  }
}

.al-btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):not([aria-busy="true"]):active {
  --al-accent: var(--al-btn-bg-active);
  --al-brand: var(--al-btn-bg-active);
  background: var(--al-btn-bg-active);
  box-shadow: var(--al-btn-shadow-active);
  transform: translateY(var(--al-btn-active-y));
}

.al-btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--al-btn-shadow), 0 0 0 4px rgba(79, 155, 188, .32);
}

.al-btn:disabled,
.al-btn[aria-disabled="true"],
.al-btn.is-disabled {
  opacity: .52;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.al-btn > svg,
.al-btn .al-btn__icon {
  flex: 0 0 auto;
  inline-size: var(--al-btn-icon-size);
  block-size: var(--al-btn-icon-size);
}

.al-btn.al-btn--primary {
  --al-btn-bg: linear-gradient(135deg, #173f2c 0%, #2c6b4a 56%, #407f5c 100%);
  --al-btn-bg-hover: linear-gradient(135deg, #123624 0%, #2f7350 52%, #4a8b67 100%);
  --al-btn-bg-active: linear-gradient(135deg, #123624 0%, #285f43 100%);
  --al-btn-border: rgba(168, 220, 203, .42);
  --al-btn-border-hover: rgba(201, 231, 134, .58);
  --al-btn-color: #fff;
  --al-btn-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 2px 6px rgba(19,63,44,.16), 0 14px 30px rgba(19,63,44,.24);
  --al-btn-shadow-hover: 0 1px 0 rgba(255,255,255,.24) inset, 0 3px 8px rgba(19,63,44,.18), 0 18px 36px rgba(19,63,44,.30);
  --al-btn-shadow-active: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 18px rgba(19,63,44,.20);
  --al-accent: var(--al-btn-bg);
  --al-brand: var(--al-btn-bg);
}

.al-btn.al-btn--secondary {
  --al-btn-bg: linear-gradient(180deg, #fff 0%, #f2f8f4 100%);
  --al-btn-bg-hover: linear-gradient(180deg, #fff 0%, #eaf5ef 100%);
  --al-btn-bg-active: #e4f0e9;
  --al-btn-color: #173f2c;
}

.al-btn.al-btn--soft { --al-btn-bg: #edf6f1; --al-btn-bg-hover: #e2f0e8; --al-btn-color: #173f2c; }
.al-btn.al-btn--outline { --al-btn-bg: transparent; --al-btn-bg-hover: rgba(44,107,74,.06); --al-btn-color: #173f2c; }
.al-btn.al-btn--ghost { --al-btn-bg: transparent; --al-btn-bg-hover: rgba(44,107,74,.07); --al-btn-border: transparent; --al-btn-border-hover: transparent; --al-btn-color: #2c6b4a; --al-btn-shadow: none; --al-btn-shadow-hover: none; }
.al-btn.al-btn--danger { --al-btn-bg: #fff0f0; --al-btn-bg-hover: #f8dddd; --al-btn-border: #c94c4c; --al-btn-color: #8b2929; }
.al-btn.al-btn--success { --al-btn-bg: #e5f4eb; --al-btn-bg-hover: #d7ecdf; --al-btn-border: #3a8b5d; --al-btn-color: #1f6843; }
.al-btn.al-btn--warning { --al-btn-bg: #fff4d8; --al-btn-bg-hover: #fae9bf; --al-btn-border: #c6952e; --al-btn-color: #765a0b; }
.al-btn.al-btn--small,
.al-btn.al-btn--sm { --al-btn-min-height: 34px; --al-btn-padding-x: 12px; --al-btn-icon-size: 16px; --al-btn-font-size: 12px; }
.al-btn.al-btn--large { --al-btn-min-height: 50px; --al-btn-padding-x: 24px; --al-btn-icon-size: 20px; --al-btn-font-size: 16px; }
.al-btn.al-btn--icon { --al-btn-padding-x: 0; inline-size: var(--al-btn-min-height); min-inline-size: var(--al-btn-min-height); }

@media (max-width: 640px) { .al-btn { min-block-size: max(var(--al-btn-min-height), 44px); } }
@media (prefers-reduced-motion: reduce) { .al-btn { transition-duration: 1ms; } }