/* ==========================================================================
   Belec 2026 — Components: buttons, badges, chips, cards, forms, drawer, toast
   ========================================================================== */

/* Buttons ----------------------------------------------------------------- */
.bel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--bel-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--bel-r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--bel-fast) var(--bel-ease),
              background-color var(--bel-fast) var(--bel-ease),
              border-color var(--bel-fast) var(--bel-ease),
              color var(--bel-fast) var(--bel-ease);
}
.bel-btn:hover { transform: translateY(-1px); }
.bel-btn:active { transform: translateY(0); }

.bel-btn--primary { background: var(--bel-ink); color: var(--bel-paper); }
.bel-btn--primary:hover { background: var(--bel-ink-2); color: var(--bel-paper); }

.bel-btn--gold {
  background: var(--bel-gold);
  color: var(--bel-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.bel-btn--gold:hover { background: var(--bel-gold-hi); color: var(--bel-gold-ink); }

.bel-btn--ghost {
  background: transparent;
  color: var(--bel-ink);
  border-color: var(--bel-rule);
}
.bel-btn--ghost:hover { background: var(--bel-sheet); color: var(--bel-ink); }

.bel-btn--block { width: 100%; }
.bel-btn--sm { padding: 8px 12px; font-size: 13px; }
.bel-btn--lg { padding: 14px 24px; font-size: 15px; }

/* Badges ------------------------------------------------------------------ */
.bel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bel-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--bel-r-xs);
  background: var(--bel-sheet);
  color: var(--bel-ink-2);
}
.bel-badge--neuf   { background: rgba(23,107,58,.12);  color: var(--bel-new); }
.bel-badge--usage  { background: rgba(174,106,18,.14); color: var(--bel-used); }
.bel-badge--recond { background: rgba(107,106,98,.16); color: var(--bel-recond); }
.bel-badge--gold   { background: var(--bel-gold); color: var(--bel-gold-ink); }
.bel-badge--ink    { background: var(--bel-ink); color: var(--bel-paper); }
.bel-badge--outline{ background: transparent; border: 1px solid var(--bel-rule); color: var(--bel-muted); }

/* Chips (active filters etc.) -------------------------------------------- */
.bel-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bel-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--bel-rule);
  border-radius: 999px;
  background: var(--bel-card);
}
.bel-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  cursor: pointer;
}
.bel-chip__x:hover { background: var(--bel-sheet); }

/* Card -------------------------------------------------------------------- */
.bel-card {
  background: var(--bel-card);
  border: 1px solid var(--bel-rule);
  border-radius: var(--bel-r-md);
}

/* Forms ------------------------------------------------------------------- */
.bel-field { display: flex; flex-direction: column; gap: 6px; }
.bel-field > label {
  font-family: var(--bel-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bel-muted);
}
.bel-field input,
.bel-field textarea,
.bel-field select,
.bel-input {
  width: 100%;
  font-family: var(--bel-font-body);
  font-size: 14px;
  color: var(--bel-ink);
  padding: 11px 14px;
  background: var(--bel-card);
  border: 1px solid var(--bel-rule);
  border-radius: var(--bel-r-sm);
  transition: border-color var(--bel-fast) var(--bel-ease), box-shadow var(--bel-fast) var(--bel-ease);
}
.bel-field input:focus,
.bel-field textarea:focus,
.bel-field select:focus,
.bel-input:focus {
  outline: none;
  border-color: var(--bel-ink);
  box-shadow: 0 0 0 3px rgba(245,206,26,.28);
}
.bel-field textarea { resize: vertical; min-height: 100px; }

/* Off-canvas drawer (cart / mobile menu) ---------------------------------- */
.bel-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,14,12,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bel-base) var(--bel-ease), visibility var(--bel-base);
}
.bel-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.bel-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 440px;
  max-width: 92vw;
  background: var(--bel-paper);
  border-left: 1px solid var(--bel-rule);
  box-shadow: var(--bel-shadow-lg);
  z-index: 1090;
  transform: translateX(100%);
  transition: transform .25s var(--bel-ease);
  display: flex;
  flex-direction: column;
}
.bel-drawer.is-open { transform: translateX(0); }
.bel-drawer--left {
  right: auto; left: 0;
  border-left: 0; border-right: 1px solid var(--bel-rule);
  transform: translateX(-100%);
}
.bel-drawer--left.is-open { transform: translateX(0); }

.bel-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--bel-gutter);
  border-bottom: 1px solid var(--bel-rule);
}
.bel-drawer__head h3 { font-size: 20px; font-family: var(--bel-font-display); }
.bel-drawer__close {
  background: none; border: 0; cursor: pointer;
  color: var(--bel-muted); padding: 6px;
  line-height: 0;
}
.bel-drawer__close:hover { color: var(--bel-ink); }
.bel-drawer__body { flex: 1; overflow-y: auto; padding: 18px var(--bel-gutter); }
.bel-drawer__foot { padding: 18px var(--bel-gutter); border-top: 1px solid var(--bel-rule); background: var(--bel-sheet); }
.bel-drawer__empty { color: var(--bel-muted); font-size: 14px; text-align: center; padding: 48px 0; }

/* Toast ------------------------------------------------------------------- */
.bel-toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--bel-ink);
  color: var(--bel-paper);
  font-size: 13px;
  padding: 12px 18px;
  border-radius: var(--bel-r-md);
  box-shadow: var(--bel-shadow-lg);
  z-index: 1100;
  transition: transform var(--bel-base) var(--bel-ease);
}
.bel-toast.is-open { transform: translateX(-50%) translateY(0); }

/* Tweaker panel ----------------------------------------------------------- */
#bel-tweaker-mount { position: fixed; right: 18px; bottom: 18px; z-index: 1095; }
.bel-tweaks__fab {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bel-rule);
  background: var(--bel-card);
  color: var(--bel-ink);
  box-shadow: var(--bel-shadow-md);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.bel-tweaks__panel[hidden] { display: none; }
.bel-tweaks__panel {
  position: absolute;
  right: 0; bottom: 56px;
  width: 240px;
  background: var(--bel-card);
  border: 1px solid var(--bel-rule);
  border-radius: var(--bel-r-md);
  box-shadow: var(--bel-shadow-lg);
  padding: 14px;
  display: grid;
  gap: 14px;
}
.bel-tweaks__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bel-tweaks__row > span { font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bel-muted); }
.bel-tweaks__chips, .bel-tweaks__swatches { display: flex; gap: 6px; }
.bel-tweaks__chip {
  font-family: var(--bel-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 1px solid var(--bel-rule);
  border-radius: var(--bel-r-xs);
  background: var(--bel-sheet);
  color: var(--bel-ink-2);
  cursor: pointer;
}
.bel-tweaks__chip:hover { background: var(--bel-ink); color: var(--bel-paper); }
.bel-tweaks__swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bel-card);
  box-shadow: 0 0 0 1px var(--bel-rule);
  cursor: pointer;
}
.bel-tweaks__swatch:hover { box-shadow: 0 0 0 2px var(--bel-ink); }

/* ==========================================================================
   v2 SHARED PAGE SHELL — page-head + breadcrumb.
   Single source of truth for every .belv2 page (catalog, product, account/
   checkout, contact, brands, surplus, and the belechomev2 mock previews).
   Loaded site-wide via header.tpl BEFORE the page-specific files (catalog/
   product/account), so those only carry small per-page deltas (title sizing,
   padding) which win on equal specificity. Add new shared v2 components here.
   ========================================================================== */
.belv2 .belv2-page-head { padding: 32px 0 24px; border-bottom: 1px solid var(--bel-rule); margin-bottom: 32px; }
.belv2 .belv2-page-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.belv2 .belv2-page-head__title { font-family: var(--bel-font-display); font-size: 44px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1; color: var(--bel-ink); }
.belv2 .belv2-page-head__title em { color: var(--bel-gold-lo); font-style: normal; }
.belv2 .belv2-page-head__count { font-family: var(--bel-font-mono); font-size: 12px; color: var(--bel-muted); margin-top: 8px; }
.belv2 .belv2-crumb { display: inline-flex; gap: 6px; flex-wrap: wrap; font-family: var(--bel-font-mono); font-size: 11px; color: var(--bel-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.belv2 .belv2-crumb__sep { opacity: .4; }
.belv2 .belv2-crumb a { color: inherit; }
.belv2 .belv2-crumb a:hover { color: var(--bel-ink); }
.belv2 .belv2-crumb__cur { color: var(--bel-ink); }
@media (max-width: 640px) {
  .belv2 .belv2-page-head__title { font-size: 32px; }
}
/* Hide the legacy theme breadcrumb on migrated v2 routes (they render their own
   in-content .belv2-crumb). Scoped to these body classes only, so non-migrated
   pages (cms, stores, authentication…) keep their normal breadcrumb. */
body.belv2-catalog .breadcrumb,
body.belv2-pdp .breadcrumb,
body.belv2-pdp #breadcrumb,
body.belv2-surplus .breadcrumb,
body#contact .breadcrumb { display: none; }