/* ============================================================================
   ONEEXISTS — Components
   Buttons, forms, badges, chips, accordions, tooltips, meta lines.
   Global — used everywhere from newsletter to WooCommerce checkout.
   ============================================================================ */

/* ---------- BUTTONS ---------- */
.oe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 0 2rem;
  height: 3rem;
  font-family: var(--oe-font-body);
  font-size: var(--oe-fs-btn);
  font-weight: var(--oe-fw-medium);
  line-height: 1;
  letter-spacing: var(--oe-ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--oe-radius-none);
  border: 1px solid transparent;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: background-color var(--oe-duration-fast) var(--oe-ease),
              color var(--oe-duration-fast) var(--oe-ease),
              border-color var(--oe-duration-fast) var(--oe-ease);
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}
.oe-btn:disabled, .oe-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.oe-btn--sm   { height: 2.25rem; padding: 0 1.25rem; font-size: 0.75rem; }
.oe-btn--lg   { height: 3.5rem;  padding: 0 2.75rem; font-size: 0.9375rem; }
.oe-btn--full { width: 100%; }

.oe-btn--primary {
  background: rgb(var(--oe-black));
  color: rgb(var(--oe-white));
  border-color: rgb(var(--oe-black));
}
.oe-btn--primary:hover { background: rgb(var(--oe-graphite)); border-color: rgb(var(--oe-graphite)); }

.oe-btn--secondary {
  background: transparent;
  color: rgb(var(--oe-black));
  border-color: rgb(var(--oe-black));
}
.oe-btn--secondary:hover { background: rgb(var(--oe-black)); color: rgb(var(--oe-white)); }

.oe-btn--ghost {
  background: transparent;
  color: rgb(var(--oe-white));
  border-color: rgb(var(--oe-white));
}
.oe-btn--ghost:hover { background: rgb(var(--oe-white)); color: rgb(var(--oe-black)); }

.oe-btn--tertiary {
  padding: 0 0 2px;
  height: auto;
  color: currentColor;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  gap: 0.4em;
  letter-spacing: var(--oe-ls-wide);
}
.oe-btn--tertiary::after { content: "↗"; font-size: 0.9em; }

.oe-btn--icon-only {
  width: 3rem;
  padding: 0;
}
.oe-btn--icon-only.oe-btn--sm { width: 2.25rem; }

/* ---------- FORM FIELDS ---------- */
.oe-field { margin-bottom: var(--oe-gap); }
.oe-label {
  display: block;
  font-size: var(--oe-fs-caption);
  font-weight: var(--oe-fw-medium);
  letter-spacing: var(--oe-ls-extra-wide);
  text-transform: uppercase;
  color: rgb(var(--oe-text-muted));
  margin-bottom: 0.5rem;
}
.oe-label--required::after { content: " *"; color: rgb(var(--oe-sale)); }

.oe-input, .oe-select, .oe-textarea {
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  font-family: var(--oe-font-body);
  font-size: var(--oe-fs-body);
  font-weight: var(--oe-fw-regular);
  line-height: 1.4;
  color: rgb(var(--oe-text));
  background: rgb(var(--oe-white));
  border: var(--oe-border-thin);
  border-radius: var(--oe-radius-sm);
  transition: border-color var(--oe-duration-fast) var(--oe-ease);
  -webkit-appearance: none;
  appearance: none;
}
.oe-input:focus, .oe-select:focus, .oe-textarea:focus {
  outline: none;
  border-color: rgb(var(--oe-black));
}
.oe-input::placeholder, .oe-textarea::placeholder {
  color: rgb(var(--oe-text-subtle));
}
.oe-textarea {
  height: auto;
  min-height: 8rem;
  padding: 0.75rem 1rem;
  resize: vertical;
}
.oe-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%230e0e0e' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 6px;
}
.oe-hint {
  font-size: var(--oe-fs-caption);
  color: rgb(var(--oe-text-muted));
  margin-top: 0.375rem;
}
.oe-error {
  font-size: var(--oe-fs-caption);
  color: rgb(var(--oe-sale));
  margin-top: 0.375rem;
}

.oe-checkbox, .oe-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--oe-fs-small);
}
.oe-checkbox input[type="checkbox"], .oe-radio input[type="radio"] {
  width: 1rem; height: 1rem;
  margin: 0;
  accent-color: rgb(var(--oe-black));
}

/* Newsletter inline form */
.oe-newsletter {
  display: flex;
  gap: 0;
  border: var(--oe-border-strong);
  border-color: rgb(var(--oe-black));
  max-width: 32rem;
}
.oe-newsletter .oe-input {
  border: 0;
  height: 3rem;
  background: transparent;
  flex: 1;
}
.oe-newsletter .oe-btn {
  height: 3rem;
  border-radius: 0;
}

/* ---------- BADGES ---------- */
.oe-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: var(--oe-fw-medium);
  letter-spacing: var(--oe-ls-extra-wide);
  text-transform: uppercase;
  background: rgb(var(--oe-black));
  color: rgb(var(--oe-white));
  border-radius: var(--oe-radius-none);
  line-height: 1;
}
.oe-badge--inverse  { background: rgb(var(--oe-white)); color: rgb(var(--oe-black)); }
.oe-badge--outline  { background: transparent; color: rgb(var(--oe-black)); border: 1px solid currentColor; }
.oe-badge--sale     { background: rgb(var(--oe-sale)); color: rgb(var(--oe-white)); }
.oe-badge--limited  { background: rgb(var(--oe-white)); color: rgb(var(--oe-black)); border: 1px solid rgb(var(--oe-black)); font-family: var(--oe-font-mono); letter-spacing: var(--oe-ls-normal); }

/* ---------- CHIPS (variant swatches, filter chips) ---------- */
.oe-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--oe-fs-caption);
  letter-spacing: var(--oe-ls-wide);
  text-transform: uppercase;
  color: rgb(var(--oe-text));
  background: transparent;
  border: 1px solid rgb(var(--oe-border-strong));
  border-radius: var(--oe-radius-none);
  cursor: pointer;
  transition: border-color var(--oe-duration-fast) var(--oe-ease),
              background-color var(--oe-duration-fast) var(--oe-ease);
}
.oe-chip[aria-pressed="true"], .oe-chip--active {
  border-color: rgb(var(--oe-black));
  background: rgb(var(--oe-black));
  color: rgb(var(--oe-white));
}
.oe-chip:hover:not([aria-pressed="true"]) { border-color: rgb(var(--oe-black)); }

/* Color/material swatch — round */
.oe-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--oe-radius-full);
  border: 1px solid rgb(var(--oe-border-strong));
  display: inline-block;
}

/* ---------- ACCORDION ---------- */
.oe-accordion { border-top: var(--oe-border-hair); }
.oe-accordion__item { border-bottom: var(--oe-border-hair); }
.oe-accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 0;
  font-family: var(--oe-font-body);
  font-size: var(--oe-fs-h5);
  font-weight: var(--oe-fw-medium);
  letter-spacing: var(--oe-ls-wide);
  text-transform: uppercase;
  color: rgb(var(--oe-text));
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.oe-accordion__trigger::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: var(--oe-fw-regular);
  line-height: 1;
  transition: transform var(--oe-duration-fast) var(--oe-ease);
}
.oe-accordion__trigger[aria-expanded="true"]::after { content: "−"; }
.oe-accordion__panel {
  padding: 0 0 1.5rem;
  color: rgb(var(--oe-text-muted));
  font-size: var(--oe-fs-body);
  line-height: var(--oe-lh-body);
}
.oe-accordion__panel[hidden] { display: none; }

/* ---------- META LINE (product meta, article byline) ---------- */
.oe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: var(--oe-fs-caption);
  letter-spacing: var(--oe-ls-wide);
  text-transform: uppercase;
  color: rgb(var(--oe-text-muted));
}
.oe-meta__sep::before { content: "·"; margin-inline: 0.25rem; }

/* ---------- PRICE ---------- */
.oe-price {
  font-family: var(--oe-font-body);
  font-size: var(--oe-fs-price);
  font-weight: var(--oe-fw-semi);
  color: rgb(var(--oe-text));
  font-variant-numeric: tabular-nums;
}
.oe-price__from { font-size: var(--oe-fs-caption); color: rgb(var(--oe-text-muted)); letter-spacing: var(--oe-ls-wide); text-transform: uppercase; margin-right: 0.375rem; }
.oe-price__old  { text-decoration: line-through; color: rgb(var(--oe-sale)); margin-right: 0.5rem; font-weight: var(--oe-fw-regular); }

/* ---------- COMING SOON PLACEHOLDER (used on Object 02+ archive pages before stock) ---------- */
.oe-coming-soon {
  border: var(--oe-border-strong);
  padding: var(--oe-gap-xl);
  text-align: center;
  background: rgb(var(--oe-bg-alt));
}
.oe-coming-soon__eyebrow { display: inline-block; margin-bottom: 1rem; }
.oe-coming-soon__title  { margin-bottom: 1rem; }