/* ============================================================
   BEGRACE SPECIAL — Component styles
   Requires colors_and_type.css to be loaded first.
   ============================================================ */

/* ---------- LOGO LOCKUP ---------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 14px; }
.brand-lockup .brand-mark { width: 48px; height: 48px; flex: none; }
.brand-lockup .brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup .brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: -0.03em; color: var(--ink);
}
.brand-lockup .brand-name b { color: var(--tang-600); font-weight: 800; }
.brand-lockup .brand-sub {
  font-family: var(--font-body); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.42em; color: var(--gold-700); margin-top: 5px; padding-left: 2px;
}
.brand-lockup.on-dark .brand-name { color: #fff; }
.brand-lockup.on-dark .brand-name b { color: var(--gold-400); }
.brand-lockup.on-dark .brand-sub { color: var(--gold-300); }
.brand-lockup.lg .brand-mark { width: 64px; height: 64px; }
.brand-lockup.lg .brand-name { font-size: 36px; }
.brand-lockup.lg .brand-sub { font-size: 13px; }

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1;
  transition: transform .14s cubic-bezier(.2,.7,.2,1), background .16s ease, box-shadow .18s ease, color .16s ease;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--tang-600); color: #fff; }
.btn-primary:hover { background: var(--tang-700); box-shadow: var(--shadow-red); }
.btn-secondary { background: var(--gold-500); color: var(--ink); }
.btn-secondary:hover { background: var(--gold-600); }
.btn-ghost { background: transparent; color: var(--tang-700); border-color: var(--tang-500); }
.btn-ghost:hover { background: var(--tang-50); }
/* WhatsApp — the primary ordering action across the site */
.btn-wa { background: var(--wa-dark); color: #fff; }
.btn-wa:hover { background: #0E7838; box-shadow: var(--shadow-wa); }
.btn-wa.on-color { background: #fff; color: var(--wa-dark); }
.btn-wa.on-color:hover { background: var(--wa-50); }
.btn-quiet { background: var(--sand); color: var(--ink); }
.btn-quiet:hover { background: var(--line-strong); }
.btn-lg { font-size: 16.5px; padding: 15px 30px; }
.btn-sm { font-size: 13px; padding: 9px 16px; }

/* ---------- BADGES / PILLS ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body);
  font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 5px 11px;
  border-radius: var(--radius-pill); line-height: 1;
}
.badge-red   { background: var(--red-50);   color: var(--red-700); }
.badge-gold  { background: var(--gold-50);  color: var(--gold-700); }
.badge-green { background: var(--green-50); color: var(--green-700); }
.badge-solid { background: var(--red-600); color: #fff; }
.eyebrow-label {
  font-family: var(--font-body); font-size: var(--eyebrow-size); font-weight: 700;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gold-700);
}

/* ---------- CARDS ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.card-product { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; cursor: pointer; }
.card-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bg-zoom { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.card-product:hover .bg-zoom { transform: scale(1.05); }

/* ---------- HEXAGON HELPERS ---------- */
/* pointy-top hexagon mask for framing product / ingredient imagery */
.hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex-frame {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--gold-500);
}

/* ---------- DOT-GRID ACCENT (from flyers) ---------- */
.dot-grid {
  background-image: radial-gradient(var(--gold-400) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
}

/* ---------- INPUTS ---------- */
.field {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--red-500); box-shadow: var(--focus-ring); }

/* ---------- PRICE TAG ---------- */
.price-tag {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.price-tag .ccy { font-size: .62em; font-weight: 700; color: var(--ink-2); margin-right: 3px; vertical-align: 0.08em; }

/* ---------- SEGMENTED TOGGLE — "02 The range" switcher ---------- */
.cm-seg {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.cm-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink-2);            /* live, tappable at rest — not disabled-grey */
  white-space: nowrap;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cm-seg-btn:hover { color: var(--ink); background: var(--sand); }
.cm-seg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cm-seg-btn[aria-selected="true"] {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.cm-seg-btn[aria-selected="true"]:hover {
  background: var(--ink);
  color: var(--cream);
}

@media (max-width: 430px) {            /* ~380px: full-width track, equal cells */
  .cm-seg-wrap { padding: 0 20px; }    /* side gutter so the pill doesn't bleed to the edges */
  .cm-seg { display: flex; width: 100%; }
  .cm-seg-btn { flex: 1 1 0; padding: 12px 10px; font-size: 15px; }
}