/* ============================================================
   Mind Theory — Mind Builders stylesheet (mind-builders.css)
   Loads after home.css/ebooks.css/store.css. Every card, badge,
   button, and price element on these pages is ebooks.css's/store.css's
   existing markup — untouched, reused verbatim. Milestone 2 went
   further: the hero eyebrow and trust strip now reuse the site's real
   .mt-eyebrow and .mte-trust components directly (loaded via
   home.css/ebooks.css) rather than duplicating them — a Milestone 1
   inconsistency this file no longer has. This file only styles what
   genuinely has no sitewide equivalent, plus a handful of deliberately
   SCOPED overrides (always prefixed .mtmb-* on the ancestor, or
   .mtmb-main/.mtmb-related as the qualifying ancestor for shared
   classes) that only ever apply inside Mind Builders pages — Store and
   Ebooks pages are never affected.

   Built entirely on the existing home.css design tokens (--blue-deep,
   --purple, --shadow-md, --radius-lg, --ease-out, etc.) — no new
   colors, shadows, or radii invented. Empty/no-results states follow
   the same icon-in-a-circle-badge formula already established by
   quotes.css's .mtq-empty, for visual family resemblance across the
   site rather than a one-off design.
   ============================================================ */

/* ---- Layout & skip link ---- */

.mtmb-main{ max-width:1120px; margin:0 auto; padding:28px 20px 72px; }

.mtmb-skip-link{
  position:absolute; top:-48px; left:12px; z-index:200;
  background:var(--navy); color:#fff; font-weight:700; font-size:.85rem;
  padding:10px 18px; border-radius:0 0 10px 10px; text-decoration:none;
  transition:top .18s var(--ease-out);
}
.mtmb-skip-link:focus{ top:0; }

/* ---- Breadcrumbs ---- */

.mtmb-breadcrumbs{
  font-size:.82rem; color:var(--text-meta); margin-bottom:20px;
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
}
.mtmb-breadcrumbs a{ color:var(--text-meta); text-decoration:none; border-radius:4px; }
.mtmb-breadcrumbs a:hover{ color:var(--blue-deep); text-decoration:underline; }
.mtmb-breadcrumbs a:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.mtmb-breadcrumbs span[aria-hidden]{ color:var(--border-crisp); }
.mtmb-breadcrumbs span[aria-current]{ color:var(--text-head); font-weight:600; }

/* ---- Hero ---- */

.mtmb-hero{ margin-bottom:24px; max-width:760px; }
.mtmb-hero h1{
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem);
  line-height:1.15; letter-spacing:-.01em; color:var(--text-head); margin:0 0 12px;
}
.mtmb-hero p{ color:var(--text-body); font-size:1.02rem; line-height:1.6; margin:0; }

/* ---- Rich hub-only hero (Phase 16 — matches the approved Mind Builders
   reference design). Reuses --green as the section's accent, an existing
   brand token, not a new color introduced for this one page. ---- */
.mtmb-rich-hero{
  display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start;
  margin-bottom:32px; padding:32px; background:var(--bg-soft);
  border:1px solid var(--border-soft); border-radius:var(--radius-xl);
}
.mtmb-rich-eyebrow{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--green); background:rgba(31,156,121,.12); padding:6px 16px; border-radius:999px; margin-bottom:10px;
}
.mtmb-rich-title{
  font-family:var(--font-head); font-weight:700; font-size:clamp(2rem, 1.5rem + 2vw, 3.1rem);
  line-height:1.05; color:var(--text-head); margin:0 0 10px;
}
.mtmb-rich-title--green{ color:var(--green); }
.mtmb-rich-title--pink{ color:var(--pink); }
.mtmb-rich-title--blue{ color:var(--blue-deep); }
.mtmb-rich-subhead{ font-size:1.15rem; font-weight:700; color:var(--text-head); margin:0 0 12px; }
.mtmb-rich-intro{ color:var(--text-body); font-size:1rem; line-height:1.65; margin-bottom:22px; max-width:52ch; }
.mtmb-rich-intro p{ margin:0; }
.mtmb-rich-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.mtmb-rich-badges{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:24px; }
.mtmb-rich-badges span{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:700; color:var(--text-meta); }
.mtmb-rich-badges svg{ color:var(--green); flex-shrink:0; }

.mtmb-hero-image{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:3/2; background:#fff; max-width:640px;
}
.mtmb-hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

.mtmb-rich-sidebar{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-xs);
}
.mtmb-rich-sidebar h2{ font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--text-head); margin:0 0 16px; }
.mtmb-rich-sidebar ul{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:14px; }
.mtmb-rich-sidebar li{ display:flex; align-items:flex-start; gap:10px; }
.mtmb-rich-icon{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--card-blue-bg); color:var(--blue-deep);
}
.mtmb-rich-sidebar li b{ display:block; font-size:.88rem; color:var(--text-head); }
.mtmb-rich-sidebar li span{ font-size:.78rem; color:var(--text-meta); }
.mtmb-rich-sidebar-banner{
  background:var(--green); color:#fff; font-weight:700; font-size:.85rem; text-align:center;
  padding:14px; border-radius:var(--radius-md); line-height:1.4;
}

/* ---- Category tiles ---- */
.mtmb-tiles-section{
  margin-bottom:36px; padding:28px 24px; background:rgba(31,156,121,.06);
  border-radius:var(--radius-xl);
}
.mtmb-tiles-heading{
  font-family:var(--font-head); font-weight:600; font-size:1.2rem; color:var(--text-head);
  text-align:center; margin:0 0 20px;
}
.mtmb-tiles-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; }
.mtmb-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:20px 12px; cursor:pointer; font-family:inherit;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s ease;
}
.mtmb-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.mtmb-tile.is-active{ border-color:var(--green); box-shadow:0 0 0 2px rgba(31,156,121,.25); }
.mtmb-tile-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:2px;
}
.mtmb-tile--pink .mtmb-tile-icon{ background:var(--card-pink-bg); color:var(--pink); }
.mtmb-tile--orange .mtmb-tile-icon{ background:var(--card-orange-bg); color:var(--orange-deep); }
.mtmb-tile--blue .mtmb-tile-icon{ background:var(--card-blue-bg); color:var(--blue-deep); }
.mtmb-tile--purple .mtmb-tile-icon{ background:rgba(122,100,229,.12); color:var(--purple); }
.mtmb-tile--green .mtmb-tile-icon{ background:rgba(31,156,121,.12); color:var(--green); }
.mtmb-tile-label{ font-weight:700; font-size:.88rem; color:var(--text-head); }
.mtmb-tile-sub{ font-size:.74rem; color:var(--text-meta); }

@media (max-width:900px){
  .mtmb-rich-hero{ grid-template-columns:1fr; }
  .mtmb-hero-image{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .mtmb-tile{ transition:none; }
}

/* ---- Facets (Browse by Goal / Age) ---- */

.mtmb-facets{ margin-bottom:24px; }
.mtmb-facets-title{
  font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-meta); margin-bottom:10px;
}
.mtmb-facet-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.mtmb-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.83rem; font-weight:700;
  padding:9px 16px; min-height:40px; border-radius:999px; background:#fff;
  color:var(--text-body); text-decoration:none; border:1px solid var(--border-soft);
  box-shadow:var(--shadow-xs); transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), color .16s, border-color .16s;
}
.mtmb-chip svg{ width:15px; height:15px; flex-shrink:0; opacity:.75; }
.mtmb-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:var(--card-blue-bg); color:var(--blue-deep); }
.mtmb-chip:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.mtmb-chip--goal{ background:var(--card-pink-bg); border-color:transparent; }
.mtmb-chip--goal:hover{ color:var(--pink-deep); }

/* ---- Search ---- */

.mtmb-search-row{ margin-bottom:22px; }
.mtmb-search-row .eb-search{ position:relative; }
.mtmb-search-row .eb-search input{ padding-right:38px; }
.mtmb-search-clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:none; background:var(--bg-soft);
  color:var(--text-meta); display:none; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.mtmb-search-row.has-query .mtmb-search-clear{ display:flex; }
.mtmb-search-clear:hover{ background:var(--border-soft); color:var(--text-head); }
.mtmb-search-count{ font-size:.8rem; color:var(--text-meta); margin-top:8px; }

.mtmb-no-results{
  display:none; text-align:center; padding:clamp(48px,7vw,72px) 20px; margin-bottom:16px;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-xl);
}
.mtmb-no-results.is-visible{ display:block; }
.mtmb-no-results .ic{
  width:60px; height:60px; border-radius:50%; background:#fff; box-shadow:var(--shadow-xs);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--blue-deep);
}
.mtmb-no-results svg{ width:26px; height:26px; }
.mtmb-no-results p{ margin:0 0 18px; font-size:.92rem; color:var(--text-meta); }

/* ---- Card enhancements (scoped — never touches bare .eb-card) ---- */

.mtmb-main .eb-card, .mtmb-related .eb-card{
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.mtmb-main .eb-cover, .mtmb-related .eb-cover{ position:relative; overflow:hidden; aspect-ratio:3/4; padding:0; }
.mtmb-main .eb-cover.is-loading, .mtmb-related .eb-cover.is-loading{
  background:linear-gradient(100deg, var(--bg-soft) 30%, #fff 50%, var(--bg-soft) 70%);
  background-size:200% 100%; animation:mtmbShimmer 1.5s ease-in-out infinite;
}
.mtmb-main .eb-cover img, .mtmb-related .eb-cover img{
  position:relative; z-index:1; opacity:0;
  transition:opacity .35s var(--ease-out), transform .4s var(--ease-out);
}
.mtmb-main .eb-cover img.is-loaded, .mtmb-related .eb-cover img.is-loaded{ opacity:1; }
.mtmb-main .eb-card:hover .eb-cover img, .mtmb-related .eb-card:hover .eb-cover img{ transform:scale(1.04); }
.mtmb-main .eb-cover svg, .mtmb-related .eb-cover svg{ position:relative; z-index:1; width:100%; height:100%; max-width:none; padding:24px; }
@keyframes mtmbShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.mtmb-card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:-2px; }
.mtmb-card-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700;
  color:var(--text-meta); background:var(--bg-soft); padding:3px 9px; border-radius:6px;
}
.mtmb-card-tag svg{ width:11px; height:11px; opacity:.8; }
.mtmb-card-tag--goal{ color:var(--pink-deep); }

.mtmb-main .eb-body a:focus-visible, .mtmb-related .eb-body a:focus-visible,
.mtmb-main .eb-cover:focus-visible, .mtmb-related .eb-cover:focus-visible{
  outline:2px solid var(--blue-deep); outline-offset:2px; border-radius:6px;
}

/* ---- Empty state ---- */

.mtmb-empty{
  text-align:center; padding:64px 20px; max-width:420px; margin:0 auto;
}
.mtmb-empty .ic{
  width:84px; height:84px; border-radius:50%; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--blue-deep);
}
.mtmb-empty svg{ width:36px; height:36px; }
.mtmb-empty h2{ font-family:var(--font-head); font-size:1.25rem; color:var(--text-head); margin:0 0 8px; }
.mtmb-empty p{ color:var(--text-meta); margin:0 0 20px; line-height:1.6; }

/* ---- Product detail page ---- */

.mtmb-product-layout{ display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:44px; margin-bottom:56px; align-items:start; }
@media (max-width:820px){ .mtmb-product-layout{ grid-template-columns:1fr; gap:28px; } }

.mtmb-product-gallery{ position:sticky; top:20px; }
@media (max-width:820px){ .mtmb-product-gallery{ position:static; } }

.mtmb-product-cover{
  border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-soft);
  box-shadow:var(--shadow-sm); position:relative; aspect-ratio:3/4;
}
.mtmb-product-cover img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:0;
  transition:opacity .4s var(--ease-out);
}
.mtmb-product-cover img.is-loaded{ opacity:1; }
.mtmb-product-cover svg{ width:100%; height:100%; padding:32px; }

.mtmb-preview-strip{ display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.mtmb-preview-strip button{
  all:unset; width:64px; height:64px; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; flex-shrink:0; transition:border-color .16s var(--ease-out);
}
.mtmb-preview-strip button:hover, .mtmb-preview-strip button:focus-visible{ border-color:var(--blue-deep); }
.mtmb-preview-strip img{ width:100%; height:100%; object-fit:cover; display:block; }

.mtmb-preview-videos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-top:14px;
}
.mtmb-preview-videos video{
  width:100%; border-radius:12px; display:block; background:#000;
  box-shadow:0 4px 14px rgba(20,30,60,.12);
}

.mtmb-product-info h1{
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  line-height:1.18; letter-spacing:-.01em; color:var(--text-head); margin:0 0 8px;
}
.mtmb-product-tagline{ color:var(--text-body); font-size:1rem; line-height:1.55; margin:0 0 18px; }
.mtmb-product-info .mtmb-facet-chips{ margin-bottom:22px; }

.mtmb-buybox{
  padding:22px; border-radius:var(--radius-lg); background:var(--bg-soft);
  border:1px solid var(--border-soft); margin-bottom:28px;
}
.mtmb-buybox .mte-price .now{ font-size:1.5rem; }
.mtmb-buybox .dl{ width:100%; justify-content:center; font-size:.92rem; padding:13px 20px; }
.mtmb-buybox .dl.is-loading, .mtmb-sticky-bar .dl.is-loading{ opacity:.75; pointer-events:none; }
.mtmb-buy-trust{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.mtmb-buy-trust li{
  display:flex; align-items:flex-start; gap:8px; font-size:.8rem; color:var(--text-meta);
  list-style:none; line-height:1.5;
}
.mtmb-buy-trust svg{ width:15px; height:15px; color:var(--green); flex-shrink:0; margin-top:1px; }
.mtmb-guarantee{ font-size:.8rem; color:var(--text-meta); margin:0; }

.mtmb-add-cart-form{ margin:0; }
.mtmb-add-cart-btn{ width:100%; justify-content:center; font-size:.8rem; padding:8px; margin-top:6px; }
.mtmb-add-cart-btn-lg{ width:100%; justify-content:center; margin-top:8px; }
.mtmb-license-note{ font-size:.78rem; color:var(--text-meta); margin-top:14px; text-align:center; }
.mtmb-cta-green{ background:var(--green); }

.instant-download-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; pointer-events:auto;
  background:var(--blue-deep); color:#fff;
}
.instant-download-tag svg{ flex-shrink:0; }

.mtmb-section{ margin-bottom:26px; }
.mtmb-section h2{
  font-family:var(--font-head); font-weight:600; font-size:1.12rem; color:var(--text-head);
  margin:0 0 12px; display:flex; align-items:center; gap:9px;
}
.mtmb-section h2 svg{ width:19px; height:19px; color:var(--purple); flex-shrink:0; }

.mtmb-outcomes ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.mtmb-outcomes li{
  display:flex; align-items:flex-start; gap:10px; font-size:.94rem; color:var(--text-body); line-height:1.55;
}
.mtmb-outcomes li svg{ width:17px; height:17px; color:var(--green); flex-shrink:0; margin-top:2px; }

.mtmb-included ul{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-direction:column; gap:8px; }
.mtmb-included li{
  display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--text-body);
}
.mtmb-included li svg{ width:16px; height:16px; color:var(--blue-deep); flex-shrink:0; }
.mtmb-printing-notes{
  font-size:.85rem; color:var(--text-meta); margin:0; padding:10px 12px; background:var(--card-orange-bg);
  border-radius:8px; line-height:1.5;
}

.mtmb-description p{ color:var(--text-body); line-height:1.65; margin:0; }

.mtmb-bundle-contents ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.mtmb-bundle-contents li{ font-size:.9rem; }
.mtmb-bundle-contents a{
  display:flex; align-items:center; gap:8px; color:var(--text-body); text-decoration:none;
  padding:8px 10px; border-radius:8px; transition:background .15s;
}
.mtmb-bundle-contents a:hover{ background:var(--bg-soft); color:var(--blue-deep); }
.mtmb-bundle-contents a svg{ width:15px; height:15px; color:var(--purple); flex-shrink:0; }

.mtmb-related{ margin-top:32px; padding-top:32px; border-top:1px solid var(--border-soft); }
.mtmb-related h2{
  font-family:var(--font-head); font-weight:600; font-size:1.3rem; color:var(--text-head); margin:0 0 18px;
}

/* Sticky mobile buy bar — mirrors the main buy box once it's scrolled
   past, so the CTA stays reachable without hunting back up the page.
   Hidden entirely above 820px, where the buy box is already visible
   in the sidebar layout. */
.mtmb-sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:#fff; border-top:1px solid var(--border-soft); box-shadow:0 -8px 24px -12px rgba(16,24,54,.18);
  padding:12px 16px; align-items:center; gap:12px;
  transform:translateY(100%); transition:transform .24s var(--ease-out);
}
.mtmb-sticky-bar.is-visible{ transform:translateY(0); }
.mtmb-sticky-bar-price{ font-weight:800; color:var(--text-head); font-size:1.02rem; white-space:nowrap; }
.mtmb-sticky-bar .dl{ flex:1; padding:11px 16px; font-size:.85rem; }
@media (max-width:820px){ .mtmb-sticky-bar{ display:flex; } }

/* ---- Responsive ---- */

@media (max-width:600px){
  .mtmb-main{ padding:20px 16px 88px; }
  .mtmb-hero{ margin-bottom:20px; }
  .mtmb-buybox{ padding:18px; }
  .mtmb-preview-strip button{ width:52px; height:52px; }
  .mtmb-preview-videos{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .mtmb-facet-chips{ gap:7px; }
  .mtmb-chip{ font-size:.8rem; padding:8px 13px; }
}

/* Respect reduced-motion preferences — shimmer, hover-lift, zoom, and
   fades all become instant rather than animated. */
@media (prefers-reduced-motion: reduce){
  .mtmb-main .eb-cover.is-loading, .mtmb-related .eb-cover.is-loading{ animation:none; }
  .mtmb-chip, .mtmb-main .eb-card, .mtmb-related .eb-card,
  .mtmb-main .eb-cover img, .mtmb-related .eb-cover img,
  .mtmb-product-cover img, .mtmb-sticky-bar, .mtmb-skip-link,
  .mtmb-preview-strip button, .mtmb-bundle-contents a{ transition:none; }
}