/* =========================================================
   BUTTONS
   =========================================================
   Shared baseline for the CTA-style buttons shipped in the
   header and hero (.shop-btn, .ph-flyout-cta, .ph-btn-outline).
   Each keeps its own color treatment and padding in
   header.css / hero.css  those differences are intentional (a
   bold sharp-edged hero CTA vs. small soft-rounded flyout
   buttons)  but the properties that should never drift between
   them (family, weight, case, cursor) are centralized here
   instead of repeated 3 times.
   ========================================================= */

.shop-btn,
.ph-flyout-cta,
.ph-btn-outline {
  font-family: var(--fm-font-sans);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

/* =========================================================
   .btn SYSTEM  for every new button (see BRAND-IDENTITY.md §4).
   .btn sets the shared shape; add one modifier for color.

   Same bordered/transparent-until-hover language as the hero's .shop-btn
   and Featured Collections' .tab-btn (and page-collection.css's own
   .btn-line, which already copied it independently)  never filled solid
   by default, always a thin border, and a color block that sweeps in
   from the left on hover (the ::before pseudo-element below) rather than
   the background just snapping to a different flat color. Sharp corners
   (no border-radius), matching those same buttons  a previous flat,
   solid-filled, rounded version of this system is what made every page
   using it (Contact, About, FAQs, Reviews, etc.  see BRAND-IDENTITY.md
   §4 for the full list) look inconsistent with the rest of the site. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  padding: 15px 34px;
  border-radius: var(--fm-radius-md);
  border: 1px solid transparent;
  background: none;
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-13);
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
  transition: color var(--fm-duration-base) var(--fm-ease), border-color var(--fm-duration-base) var(--fm-ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fm-duration-base) var(--fm-ease);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }

.btn--gold {
  color: var(--fm-cream);
  border-color: rgba(var(--fm-rgb-gold-light), 0.7);
}
.btn--gold::before { background: #000000; }
.btn--gold:hover { color: #ffffff; border-color: #000000; }

.btn--dark {
  color: var(--fm-ink);
  border-color: var(--fm-black);
}
.btn--dark::before { background: var(--fm-black); }
.btn--dark:hover { color: var(--fm-cream); }

.btn--outline {
  color: var(--fm-ink);
  border-color: var(--fm-outline-warm);
}
.btn--outline::before { background: var(--fm-surface-warm-hi); }
.btn--outline:hover { border-color: var(--fm-gold); }

/* ---- Site-wide radius baseline -------------------------------------
   Components that never declared their own radius get one here, so every
   button, field, tag and chip shares the same --fm-radius-* scale. */
.btn-line, .btn-solid, .btn-ghost-icon, .hero-wrap .shop-btn,
.ph-simple-nav-pill, .sort-select, .size-pill, .swatch,
.jewel-swatch, .jewel-size-chip, .jewel-buy-btn, .jewel-options-btn,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"],
select, textarea,
.woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit { border-radius: var(--fm-radius-md); }

.jewel-tag, .chip, .p-bnpl-badge { border-radius: var(--fm-radius-sm); }