/* Shared by the Next.js heroes (globals.css imports this into components)
   and WordPress's Elementor shop header (loads this URL directly).
   Keep only outer dimensions/position/font-size in the individual heroes.
   White on brand orange is the owner's choice; see CLAUDE.md and axe-waivers. */
:root {
  --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hero-cta,
.hero-cta-ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 0.875em;
  border-radius: 999px;
  font-family: var(--font-poppins-alias, 'Poppins'), 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.6;
  /* WooCommerce's .woocommerce a:not(.button):not(.onsale) rule must not
     recolor hero labels or their currentColor chevrons as ordinary links. */
  color: #FFFFFF !important;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-cta {
  background-color: #FB923C;
  border: none;
}

.hero-cta-ghost {
  background-color: transparent;
  border: 2px solid #FFFFFF;
}

.hero-cta-label {
  min-width: 0;
  text-align: center;
  text-wrap: balance;
}

/* In-flow chevron preserves real padding on both sides of every label. */
.hero-cta::after,
.hero-cta-ghost::after {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  background-color: currentColor;
  -webkit-mask: var(--chevron-mask) center / contain no-repeat;
  mask: var(--chevron-mask) center / contain no-repeat;
}

.hero-cta:hover,
.hero-cta-ghost:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.hero-cta-ghost:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.hero-cta:focus-visible {
  outline: 3px solid #012775;
  outline-offset: 3px;
}

.hero-cta-ghost:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}