/* multi-builder-v3.css — reguli v3 (18 sep 2026, George), fisier separat cu propriul cache-buster
   (layout-ul pune ?v=1781247649 fix pe multi-builder.css, cache 7 zile). Incarcat din views/<loc>/multi-builder.hbs. */
/* ===== v3 (18 sep 2026, George): featured + afinitate + checkout mobil ===== */
/* Slot "Alegerea ta": cardul featured (LP/reclama/?featured) iese PRIMUL indiferent de grup (G2 v2). */
.mb-group--featured .mb-group__title { color: var(--cj-sienna); border-bottom-color: var(--cj-sienna); }
/* Slotul "Se cumpara impreuna cu X" (toate celelalte carduri, in ordinea data-mb-order) + grupurile golite se ascund
   (.mb-group e display:contents, deci atributul hidden are nevoie de regula explicita). */
.mb-group--affinity .mb-group__title { color: var(--cj-ink); }
/* ---- Grupuri de produse (Jerky / Sticks / Space Munchies) — restaurat 2026-10-10 ----
   Lipsea din live (era in multi-builder.css.bak-mbv3). Fara display:contents, .mb-group
   devine celula in grila .mb-products → pe mobil Jerky|Sticks pe 2 col, carduri stivuite
   pe jumatate de ecran. display:contents => cardurile raman copii ai grilei; titlul pe rand intreg. */
.mb-group { display: contents; }
.mb-group__title {
  grid-column: 1 / -1;
  margin: 10px 0 -2px; padding: 0 0 6px;
  border-bottom: 1px solid var(--cj-line);
  font-family: var(--cj-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cj-ink-soft);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.mb-group__title small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.mb-group:first-child .mb-group__title { margin-top: 0; }
.mb-group[hidden] { display: none; }
.mb-product.is-featured { border-color: var(--cj-sienna); box-shadow: 0 0 0 1px var(--cj-sienna) inset; }
.mb-product.is-featured .mb-product__info h3 { font-weight: 700; }
.mb-badge.mb-badge--featured,
.mb-products--grouped .mb-badge.mb-badge--featured,
.mb-products--grouped .mb-product.has-qty .mb-badge--featured { background: var(--cj-sienna); border-color: var(--cj-sienna); color: #fff; font-weight: 700; }
/* Nota sub titlul grupului Space Munchies (v3 addendum: preturile pachetelor lor). */
.mb-group__note { grid-column: 1 / -1; margin: 2px 0 -4px; font-size: 12px; line-height: 1.4; color: var(--cj-ink-muted); }
/* Randul "Ai venit pentru X — clientii il iau cel mai des cu Y si Z" (sub hero; hidden fara featured+afinitate). */
.mb-featured-note {
  max-width: 1120px; margin: 0 auto; padding: 10px 20px;
  font-size: 14px; line-height: 1.45; text-align: center; color: var(--cj-ink-soft);
  background: var(--cj-cream); border-top: 1px solid var(--cj-line); border-bottom: 1px solid var(--cj-line);
}
.mb-featured-note b { color: var(--cj-ink); font-weight: 700; }
.mb-featured-note[hidden] { display: none; }
/* Bold pe elementele-cheie: treapta activa in bara de sus, transport gratuit, reducerea. */
.mb-tiers__status.is-active { font-weight: 800; color: var(--cj-ember, #B5451B); }
#mbShipping.is-free, #mbRecapShip.is-free, #mbSumShip.is-free { font-weight: 800; color: var(--cj-ember, #B5451B); letter-spacing: 0.04em; }
.mb-recap__line--disc, .mb-sum__row--disc { font-weight: 800; }
.mb-recap__line--disc span:last-child, .mb-sum__row--disc span:last-child { font-weight: 800; }
/* Banner de rezervare cu cronometru real (sessionStorage; la expirare dispare, nimic nu se sterge). */
.mb-reserve {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 12px;
  background: #fff; border: 1px dashed var(--cj-sienna); border-radius: 10px;
  font-size: 12.5px; line-height: 1.35; color: var(--cj-ink-soft);
}
.mb-reserve svg { flex: none; color: var(--cj-sienna); }
.mb-reserve b { color: var(--cj-ink); font-variant-numeric: tabular-nums; font-weight: 800; }
.mb-reserve[hidden] { display: none; }
/* Checkout pe mobil: sumarul (aside.mb-recap) INAINTEA formularului, compact — doar CSS, JS-ul
   builderului il actualizeaza in continuare dupa id. Grila devine 1 coloana sub 900px. */
@media (max-width: 900px) {
  .mb-checkout { display: flex; flex-direction: column; }
  .mb-checkout .mb-recap { order: -1; width: 100%; }
  .mb-checkout .mb-checkout__form { order: 0; width: 100%; }
  .mb-recap__sticky { position: static; padding: 14px 16px; border-radius: 14px; }
  .mb-recap h3 { font-size: 17px; margin: 0 0 10px; padding-bottom: 8px; }
  .mb-recap__items { gap: 3px; margin-bottom: 8px; max-height: none; }
  .mb-recap__item { grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; }
  .mb-recap__item img { display: none; }
  .mb-recap__item-name span { display: none; }
  .mb-recap__item-name b { font-size: 13px; font-weight: 600; }
  .mb-recap__item > span:last-child { font-weight: 600; }
  .mb-recap__empty { padding: 10px; }
  .mb-recap__line { padding: 3px 0; font-size: 13px; }
  .mb-recap__total { padding-top: 8px; margin-top: 6px; }
  .mb-recap__total b { font-size: 26px; }
}

/* v4 (18 sep 2026): tag-uri pe istoricul clientului (🔁 L-ai luat de N ori / 👀 Te-ai uitat la el) */
.mb-badge.mb-badge--personal,
.mb-products--grouped .mb-badge.mb-badge--personal,
.mb-products--grouped .mb-product.has-qty .mb-badge--personal { background: #F6E3B8; border-color: #E8C877; color: #7A5B12; font-weight: 700; }
.mb-product.is-personal { border-color: #E8C877; }

/* ---- Tag-uri de fidelitate pe trepte — George, 22 sep 2026 ----
   Cu cat clientul a cumparat mai des, cu atat tag-ul e mai plin. Iconita e SVG din
   setul casei (/js/icons.js), NU emoji: cerut de mai multe ori si ratat de fiecare data. */
.mb-badge--personal { display: inline-flex; align-items: center; gap: 5px; }
.mb-badge--personal .i,
.mb-badge--personal svg { flex: 0 0 auto; width: 13px; height: 13px; }
.mb-badge--personal .mb-badge__tx { line-height: 1; }

/* o singura comanda — discret, crem */
.mb-products--grouped .mb-badge--personal-t1,
.mb-products--grouped .mb-product.has-qty .mb-badge--personal-t1 {
  background: #FBF3E2; border-color: #E9D9B4; color: #8A6D24; font-weight: 600;
}
/* 2-4 comenzi — chihlimbar */
.mb-products--grouped .mb-badge--personal-t2,
.mb-products--grouped .mb-product.has-qty .mb-badge--personal-t2 {
  background: #F6E3B8; border-color: #E0B85C; color: #6E4F0E; font-weight: 700;
}
/* 5+ comenzi — client fidel, sienna plin */
.mb-products--grouped .mb-badge--personal-t3,
.mb-products--grouped .mb-product.has-qty .mb-badge--personal-t3 {
  background: var(--cj-sienna); border-color: var(--cj-sienna); color: #fff; font-weight: 700;
}
/* doar vazut, necumparat — neutru, fara greutate */
.mb-products--grouped .mb-badge--personal-v,
.mb-products--grouped .mb-product.has-qty .mb-badge--personal-v {
  background: #F2EFEA; border-color: var(--cj-line); color: var(--cj-ink-soft); font-weight: 600;
}

/* ---- Cardul evidentiat singur pe rand — George, 22 sep 2026 ----
   .mb-group e display:contents, deci cardurile sunt copii directi ai grilei. Un grup
   "Alegerea ta" cu un singur produs lasa jumatate de rand gol; il intindem pe tot randul.
   Marcajul .mb-product--solo e pus de /js/mb-order.js DOAR cand grupul are exact un card. */
.mb-products--grouped .mb-product--solo { grid-column: 1 / -1; }
@media (min-width: 901px) {
  /* pe desktop grila are 3 coloane — cardul-erou nu trebuie sa devina urias */
  .mb-products--grouped .mb-product--solo { grid-column: span 2; }
}

/* ---- Lizibilitate pe cardul de produs — George, 22 sep 2026 ----
   Inainte: macros 11px/opacity .65 si pretul 11px/opacity .75 — pe telefon se citeau greu.
   Gramajul si proteina sunt argumentul de cumparare, iar pretul e decizia; amandoua trebuie
   sa se vada fara efort. Pretul taiat ramane discret, ca sa iasa in fata cel activ. */
.mb-product__macros {
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
  color: var(--cj-ink-soft);
  letter-spacing: 0.01em;
}
.mb-product__unit-price {
  font-size: 15px;
  font-weight: 800;
  opacity: 1;
  color: var(--cj-sienna);
  letter-spacing: -0.01em;
  margin-top: 1px;
}
/* pretul vechi, taiat: ramane mic si neutru, nu concureaza cu cel activ */
.mb-product__unit-price s {
  color: var(--cj-ink-muted) !important;
  font-weight: 500;
  opacity: 0.55 !important;
}
@media (max-width: 600px) {
  .mb-product__macros { font-size: 12px; }
  .mb-product__unit-price { font-size: 15px; }
}

/* ---- Evantai de pungi pe cardurile de pachete — George, 22 sep 2026 ----
   Pozele sunt COMPUSE din PNG-urile reale de pe Shopify (scripts/build-preset-fans.js),
   nu generate: modelul de imagine inventa ambalajul, iar QA-ul l-a si prins ("hero:
   ambalaj inventat"). Pe cardurile de pret, unde omul se uita fix la pungi ca sa decida,
   un ambalaj gresit nu e acceptabil. */
.mb-preset__fan {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 2px auto 6px;
  /* rezerva spatiul din start (300x132) ca sa nu sara cardul cand se incarca imaginea */
  aspect-ratio: 300 / 132;
  object-fit: contain;
  pointer-events: none;
}
/* cardul e un <button>: imaginea nu trebuie sa prinda click-ul sau sa fie trasa */
.mb-preset__fan { user-select: none; -webkit-user-drag: none; }
@media (max-width: 600px) {
  .mb-preset__fan { margin: 0 auto 4px; }
}

/* Bara de progres pana la transport gratuit (George, 22 sep 2026).
   Pragul vine din window.MB_FREE_SHIP, setat de pagina din server — vezi /js/mb-checkout-ux.js.
   Foloseste doar tokenii de brand existenti; niciun font nou. */
.mb-shipbar {
  margin: 0 0 12px; padding: 9px 12px;
  background: #fff; border: 1px solid var(--cj-line); border-radius: 10px;
}
.mb-shipbar__text {
  font-size: 12.5px; line-height: 1.35; color: var(--cj-ink-soft);
  margin-bottom: 7px; font-weight: 600;
}
.mb-shipbar__track {
  position: relative; height: 7px; border-radius: 99px;
  background: var(--cj-cream); overflow: hidden;
}
.mb-shipbar__fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cj-amber, var(--cj-ember)), var(--cj-sienna));
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.mb-shipbar.is-done { border-color: var(--cj-sienna); }
.mb-shipbar.is-done .mb-shipbar__text { color: var(--cj-sienna); font-weight: 800; }
.mb-shipbar.is-done .mb-shipbar__fill { background: var(--cj-sienna); }
@media (prefers-reduced-motion: reduce) { .mb-shipbar__fill { transition: none; } }

/* CRO 2026-10-12: one-tap add on featured card (data-add-sku; no auto-qty on load) */
.mb-featured-add {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--cj-sienna);
  border-radius: 10px;
  background: var(--cj-sienna);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.mb-featured-add:hover { filter: brightness(0.95); }
.mb-product.is-featured .mb-featured-add { box-shadow: 0 1px 0 rgba(0,0,0,0.06); }