:root {
  --btn-primary: #ef7d00;
  --btn-primary-hover: #d96f00;
  --btn-secondary: var(--ls-green, #3f9d2f);
  --btn-secondary-hover: var(--ls-green-d, #338026);
  --btn-radius: 8px;
  --btn-focus: #16253f;
  --btn-icon-gap: 0.45rem;
}

body.ls .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: var(--btn-icon-gap);
  min-height: 38px;
  padding: 0.55rem 1.15rem;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--ls-ink, #1c2733);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.ls .btn:focus-visible {
  outline: 3px solid var(--btn-focus);
  outline-offset: 3px;
}

body.ls .btn:disabled,
body.ls .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Shared icon sizing. Icons may be direct SVG children or .btn__icon wrappers. */
body.ls .btn svg,
body.ls .btn .btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

body.ls .btn .btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Optional icon placement: applies to direct SVGs and .btn__icon wrappers.
   Text stays in the middle without requiring an extra label span.
   Existing buttons without these modifiers keep their current order. */
body.ls .btn--icon-start > svg,
body.ls .btn--icon-start > .btn__icon {
  order: -1;
  margin: 0 !important;
}

body.ls .btn--icon-end > svg,
body.ls .btn--icon-end > .btn__icon {
  order: 1;
  margin: 0 !important;
}

/* Filled variants */
body.ls .btn--primary {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: #fff !important;
}

body.ls .btn--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

body.ls .btn--secondary {
  background: var(--btn-secondary);
  border-color: var(--btn-secondary);
  color: #fff !important;
}

body.ls .btn--secondary:hover {
  background: var(--btn-secondary-hover);
  border-color: var(--btn-secondary-hover);
}

/* Outlined variants (no solid fill) */
body.ls .btn--outline-primary {
  background: #fff;
  border-color: var(--btn-primary);
  color: var(--btn-primary) !important;
}

body.ls .btn--outline-primary:hover {
  background: #fff5e9;
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-hover) !important;
}

body.ls .btn--outline-secondary {
  background: #fff;
  border-color: var(--btn-secondary-hover);
  color: var(--btn-secondary-hover) !important;
}

body.ls .btn--outline-secondary:hover {
  background: #edf7e9;
  border-color: var(--btn-secondary-hover);
  color: var(--btn-secondary-hover) !important;
}

/* Low-emphasis text action */
body.ls .btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ls-ink, #1c2733) !important;
}

body.ls .btn--ghost:hover {
  background: rgba(22,37,63,.07);
}

/* Size variants */
body.ls .btn--sm {
  font-size: 0.82rem;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
}

body.ls .btn--sm svg,
body.ls .btn--sm .btn__icon {
  width: 16px;
  height: 16px;
}

body.ls .btn--lg {
  font-size: 1.05rem;
  min-height: 44px;
  padding: 0.65rem 1.45rem;
}

/* Preserve the spacing of the existing static storefront CTAs. */
body.ls .ls-katalog .btn,
body.ls .ls-booking .btn {
  margin-top: 1rem;
}

body.ls .ls-contact-actions .btn {
  margin: 0;
}

body.ls .ls-hero-cta .btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Retain the compact two-CTA hero treatment on mobile. */
  body.ls .ls-hero-cta .btn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 36px;
    padding: 0.45rem 0.72rem;
    font-size: 0.85rem;
    line-height: 1.3;
  }

  body.ls .ls-contact-actions .btn--lg {
    font-size: 0.9rem;
    padding: 0.55rem 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ls .btn {
    transition: none;
  }
}