/* Mohit Bakery · home page "Chocolate Noir" layer (loaded only by index.php).
 * One warm palette for the whole home page so it reads as one piece with The Mohit Ten,
 * whatever site theme is active. Inner pages keep the admin-selected theme.
 * Motion assets live in /assets/video/home-2026 (see assets/js/home-premium.js). */

body.mb-home {
  --mb-paper: #140c08;
  --mb-paper-2: #1a110b;
  --mb-surface: #1f150e;
  --mb-cream: #fff1d9;
  --mb-ink: #f3e7d6;
  --mb-ink-2: #e2d2bd;
  --mb-mute: #a8927b;
  --mb-line: rgba(243, 231, 214, 0.12);
  --mb-crust: #e8be82;
  --mb-crust-2: #d4a464;
  --mb-butter: #e8be82;
  --mb-cocoa: #140c08;
  --mb-card-dark: #1f150e;
  --mb-panel-1: #1f150e;
  --mb-panel-1-fg: #f3e7d6;
  --mb-panel-2: #180f0a;
  --mb-panel-3: #2a1c13;
  --mb-gl-1: #3a2416;
  --mb-gl-2: #e8be82;
  --mb-on-ink: #140c08;
  --mb-shadow: 8, 4, 2;
  --mbp-gold-line: rgba(232, 190, 130, 0.16);
  background: #140c08;
  color: #f3e7d6;
}

/* OLED / other themes draw hard grey borders; swap them for a faint gold hairline here */
body.mb-home :is(.mb-card, .mb-quote, .mb-panel, .mb-film__frame, .mb-add, .mb-orb, .mb-btn, .mb-index__arrow, .mb-card__badge, .mb-now__tile) {
  border-color: var(--mbp-gold-line);
}

/* Some themes restyle these components with their own colours, borders and shadows (brutal, neu, chrome, clay…).
   The home page always wears Chocolate Noir, so lock them here; !important only on what themes override. */
body.mb-home .mb-btn:not(.mb-btn--ghost) { --bg: #e8be82 !important; --fg: #2c190c !important; background: #e8be82 !important; color: #2c190c !important; }
body.mb-home .mb-btn--ghost { --bg: transparent !important; --fg: #f3e7d6 !important; background: transparent !important; color: #f3e7d6 !important; border-color: rgba(232, 190, 130, 0.35); }
body.mb-home :is(.mb-card, .mb-quote, .mb-panel, .mb-float, .mb-film__frame, .mb-add, .mb-orb, .mb-btn, .mb-index__arrow, .mb-card__badge, .mb-now__tile) {
  box-shadow: none !important;
  border-width: 1px;
}
body.mb-home .mb-brand__mark { background: #e8be82 !important; color: #2c190c !important; }
body.mb-home .mb-panel { --bg: #1f150e !important; --fg: #f3e7d6 !important; background: #1f150e !important; color: #f3e7d6 !important; }
body.mb-home .mb-panel:nth-child(2) { --bg: #180f0a !important; background: #180f0a !important; }
body.mb-home .mb-panel:nth-child(3) { --bg: #2a1c13 !important; background: #2a1c13 !important; }
body.mb-home .mb-panel :is(h3, p, li, .mb-panel__no) { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  body.mb-home .mb-btn--ghost:hover { border-color: #e8be82; color: #e8be82; }
}

body.mb-home em { color: #e8be82; }
body.mb-home .mb-eyebrow { color: #e8be82; }
body.mb-home .mb-lead { color: rgba(243, 231, 214, 0.72); font-size: max(15px, 1em); }

/* ---------- rating + festival strips → one quiet gold ribbon ---------- */

body.mb-home .mbw-gstrip {
  background: #1a110b;
  color: rgba(243, 231, 214, 0.72);
  border-bottom: 1px solid var(--mbp-gold-line);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 0.95rem 1rem;
}
body.mb-home .mbw-gstrip strong { color: #f3e7d6; font-weight: 600; }
body.mb-home .mbw-gstrip__stars { color: #e8be82; }
body.mb-home .mbw-gstrip.mb-feststrip { background: #140c08; }
body.mb-home .mbw-gstrip a { transition: color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  body.mb-home .mbw-gstrip a:hover { color: #e8be82; }
}

/* ---------- product cards (daily eight) ---------- */

body.mb-home .mb-card { background: #1f150e; }
body.mb-home .mb-card__media { background: #140c08; }
body.mb-home .mb-card__media.has-loop img { object-position: 62% 50%; }
body.mb-home .mb-card__diet { color: #9fd18f; font-size: 11px; }
body.mb-home .mb-card__diet i { border-color: #9fd18f; }
body.mb-home .mb-card__diet i::after { background: #9fd18f; }

.mbp-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.mbp-loop.is-playing { opacity: 1; }

/* ---------- right now tiles ---------- */

body.mb-home .mb-now__tile { background: #140c08; }
body.mb-home .mb-now__tile.has-loop > img:first-child { object-position: 62% 50%; }
body.mb-home .mb-now__tile .mbp-loop { z-index: 0; }
body.mb-home .mb-now__info { z-index: 2; }
body.mb-home .mb-now__tile::after { z-index: 1; background: linear-gradient(to top, rgba(20, 12, 8, 0.85), transparent); }

/* ---------- category cards: a compact, always visible menu ---------- */

body.mb-home .mb-categories { padding: clamp(3rem, 6vw, 5rem) var(--mb-gutter); scroll-margin-top: 90px; cursor: auto; }
body.mb-home .mb-categories .mb-index__head { gap: 2rem; margin-bottom: 2rem; align-items: end; }
body.mb-home .mb-categories .mb-h2 { max-width: 17ch; font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1.06; }
body.mb-home .mb-categories .mb-lead { flex-shrink: 0; margin: 0; font-size: 15px; line-height: 1.65; }
.mb-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.7vw, 24px); list-style: none; margin: 0; padding: 0; }
.mb-category-grid > li { min-width: 0; }
body.mb-home .mb-category-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(232, 190, 130, .19); border-radius: 16px; background: #1f150e; color: #f3e7d6; text-decoration: none; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.mb-category-card__photo { display: block; overflow: hidden; aspect-ratio: 1.48; background: #140c08; }
.mb-category-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transition: transform .35s ease; }
.mb-category-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 18px 18px 16px; }
.mb-category-card__name { font-family: var(--mb-sans); font-size: clamp(16px, 1.55vw, 23px); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.mb-category-card__browse { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: #e8be82; font-size: 12px; line-height: 1.5; }
.mb-category-card__browse > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid rgba(232, 190, 130, .25); border-radius: 50%; font-size: 18px; }
body.mb-home .mb-category-card:focus-visible { outline: 3px solid #e8be82; outline-offset: 4px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) {
  body.mb-home .mb-category-card:hover { border-color: #cda46d; transform: translateY(-3px); }
  .mb-category-card:hover .mb-category-card__photo img { transform: scale(1.035); }
  body.mb-home:has(.mb-categories:hover) .mb-cursor { visibility: hidden; }
}
@media (max-width: 900px) { .mb-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body.mb-home .mb-categories .mb-index__head { display: block; margin-bottom: 1.5rem; }
  body.mb-home .mb-categories .mb-lead { margin-top: 1rem; }
  .mb-category-card__photo { aspect-ratio: 1.15; }
  .mb-category-card__body { padding: 14px 12px 12px; gap: 12px; }
  .mb-category-card__name { font-size: 17px; }
  .mb-category-card__browse { font-size: 11px; }
  .mb-category-card__browse > span { flex-basis: 24px; height: 24px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mb-home .mb-category-card, .mb-category-card__photo img { transition: none; }
  body.mb-home .mb-category-card:hover, .mb-category-card:hover .mb-category-card__photo img { transform: none; }
}

/* Legacy category peek media (other templates may still use it). */

.mb-peek video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.45s, transform 0.8s var(--mb-ease);
}
.mb-peek video.is-on { opacity: 1; transform: none; }
body.mb-home .mb-index__thumb img { object-position: 62% 50%; }

/* ---------- manifesto: inline pills become tiny loops ---------- */

.mb-manifesto__text .pic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  display: block;
}

/* ---------- flour-dust transition at the top of the manifesto ---------- */

body.mb-home .mb-manifesto { position: relative; isolation: isolate; }
.mbp-flour {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: min(70vh, 640px);
  width: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.8s ease;
}
.mbp-flour.is-playing { opacity: 0.32; }
body.mb-home .mb-manifesto { overflow: hidden; }

/* ---------- services panels: video media ---------- */

body.mb-home .mb-panel__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- reviews: no empty void when there are no testimonials yet ---------- */

body.mb-home .mb-voices--compact { padding: clamp(3.5rem, 8vw, 6rem) 0; }
body.mb-home .mb-voices--compact .mb-voices__head { margin-bottom: 0; align-items: center; }

body.mb-home .mb-voices .mb-lead a { color: #e8be82; text-decoration-color: rgba(232, 190, 130, 0.45); }

.mbp-rating {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0 var(--mb-gutter);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.mbp-rating__score {
  font-family: var(--mb-serif);
  font-size: clamp(64px, 11vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #f3e7d6;
  font-variant-numeric: tabular-nums;
}
.mbp-rating__stars {
  display: flex;
  gap: 0.3rem;
  font-size: clamp(22px, 3vw, 34px);
  color: rgba(232, 190, 130, 0.22);
}
.mbp-rating__stars span { position: relative; display: inline-block; }
.mbp-rating__stars span::before {
  content: "\2605";
  position: absolute;
  inset: 0;
  color: #e8be82;
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
  transition: clip-path 0.6s var(--mb-ease);
}
.mbp-rating__meta { display: grid; gap: 0.6rem; }
.mbp-rating__meta small { color: rgba(243, 231, 214, 0.6); font-size: 14px; }

/* ---------- delivery: gold pills ---------- */

body.mb-home .mb-deliver .mb-btn--ghost {
  font-size: 13px;
  letter-spacing: 0.04em;
  min-height: 44px;
}

/* ---------- legibility floor on the home page ---------- */

body.mb-home .mb-card__idx,
body.mb-home .mb-index__meta,
body.mb-home .mb-panel__no { font-size: max(11px, 1em); }

@media (prefers-reduced-motion: reduce) {
  .mbp-loop,
  .mbp-flour { display: none; }
  .mbp-rating__stars span::before { transition: none; }
}

/* ---------- at a glance: quotable facts under the hero ---------- */

.mbp-glance {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--mb-gutter, 1.25rem);
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  color: #f3e7d6;
}
@media (min-width: 960px) {
  .mbp-glance { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .mbp-glance__intro { position: sticky; top: calc(var(--mb-header-h, 76px) + 2rem); }
}
.mbp-glance__title {
  font-family: var(--mb-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 1rem 0 1.25rem;
  color: #f3e7d6;
}
.mbp-glance__lead {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  color: rgba(243, 231, 214, 0.72);
}
.mbp-glance__lead strong { color: #f3e7d6; font-weight: 500; }
.mbp-glance__list { margin: 0; border-top: 1px solid var(--mbp-gold-line); }
.mbp-glance__item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--mbp-gold-line);
}
.mbp-glance__item dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8be82;
  padding-top: 0.3rem;
}
.mbp-glance__item dd {
  margin: 0;
  font-family: var(--mb-serif);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: #f3e7d6;
}
.mbp-glance__item address { font-style: normal; display: inline; }
.mbp-glance__sub { display: block; margin-top: 0.2rem; font-family: var(--mb-sans, system-ui, sans-serif); font-size: 14px; color: rgba(243, 231, 214, 0.6); }
.mbp-glance__item a {
  color: #e8be82;
  text-decoration: underline;
  text-decoration-color: rgba(232, 190, 130, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.mbp-glance__item address + a { display: block; width: max-content; margin-top: 0.35rem; font-family: var(--mb-sans, system-ui, sans-serif); font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .mbp-glance__item a:hover { color: #ffe0b0; text-decoration-color: currentColor; }
}
@media (max-width: 560px) {
  .mbp-glance__item { grid-template-columns: 1fr; padding: 1rem 0; }
  .mbp-glance__item dt { padding-top: 0; }
}