/* ==========================================================================
   BOUND MEMORIES — CONSOLIDATED DESIGN SYSTEM
   Replaces the duplicated legacy stylesheet while retaining selectors used by
   the public site, builder, preview, checkout, cart, dashboard and admin pages.
   ========================================================================== */

/* ==========================================================================
   1. RESET AND TOKENS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bm-bg: #f7f4ee;
  --bm-bg-soft: #fbf9f5;
  --bm-surface: #ffffff;
  --bm-surface-warm: #fffdf9;

  --bm-navy: #13233b;
  --bm-navy-soft: #213650;
  --bm-text: #2f343b;
  --bm-text-soft: #66707c;
  --bm-text-faint: #8a9098;

  --bm-gold: #b88936;
  --bm-gold-dark: #936d28;
  --bm-gold-light: #e7d4aa;
  --bm-gold-wash: #fbf5e8;

  --bm-sage: #6e806d;
  --bm-success: #2f7d4c;
  --bm-danger: #9b3434;
  --bm-warning: #9a681b;

  --bm-border: #e8e1d6;
  --bm-border-strong: #d9cdbd;

  --bm-radius-sm: 10px;
  --bm-radius-md: 14px;
  --bm-radius-lg: 20px;
  --bm-radius-xl: 28px;

  --bm-shadow-sm: 0 5px 18px rgba(25, 34, 48, 0.06);
  --bm-shadow: 0 14px 38px rgba(25, 34, 48, 0.08);
  --bm-shadow-lg: 0 24px 70px rgba(25, 34, 48, 0.12);

  --bm-shell: 1240px;
  --bm-content: 1080px;
  --bm-transition: 180ms ease;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bm-bg);
  color: var(--bm-text);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bm-navy);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 600;
  line-height: 1.14;
}

p {
  margin-bottom: 1rem;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

code {
  padding: 2px 7px;
  border-radius: 6px;
  background: #f3eee7;
  font-size: 0.92em;
}

:focus-visible {
  outline: 3px solid rgba(184, 137, 54, 0.32);
  outline-offset: 3px;
}

/* ==========================================================================
   3. GLOBAL HEADER AND NAVIGATION
   ========================================================================== */

header,
.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(217, 205, 189, 0.72);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 5px 22px rgba(19, 35, 59, 0.04);
  backdrop-filter: blur(16px);
}

.site-header {
  padding: 0;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--bm-shell), calc(100% - 40px));
  min-height: 84px;
  margin: 0 auto;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo {
  width: auto;
  height: 54px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.8vw, 26px);
}

.desktop-nav a,
.desktop-nav .nav-button,
.nav-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--bm-navy);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 650;
  text-decoration: none;
  transition:
    color var(--bm-transition),
    background var(--bm-transition),
    transform var(--bm-transition);
}

.desktop-nav a:hover,
.desktop-nav .nav-button:hover,
.nav-button:hover {
  color: var(--bm-gold-dark);
}

.nav-create-button {
  padding: 0 20px;
  border-radius: var(--bm-radius-sm);
  background: var(--bm-gold);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(184, 137, 54, 0.22);
}

.nav-create-button:hover {
  background: var(--bm-gold-dark);
  transform: translateY(-1px);
}

.cart-nav-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.cart-count {
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bm-navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.mobile-header-actions {
  display: none;
  align-items: center;
  gap: 10px;
}

.mobile-create-button,
.mobile-drawer-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 9px;
  background: var(--bm-gold);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.hamburger span {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--bm-navy);
}

.mobile-nav,
.mobile-drawer {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: -340px;
  display: flex;
  flex-direction: column;
  width: min(330px, 88vw);
  height: 100dvh;
  padding: 28px;
  gap: 7px;
  overflow-y: auto;
  background: #fff;
  box-shadow: -16px 0 55px rgba(19, 35, 59, 0.18);
  transition: right 240ms ease;
}

.mobile-nav.active,
.mobile-drawer.active {
  right: 0;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bm-border);
  color: var(--bm-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.mobile-menu-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--bm-bg-soft);
  color: var(--bm-navy);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.mobile-nav a,
.mobile-drawer a,
.mobile-nav .nav-button,
.mobile-drawer .nav-button {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--bm-navy);
  font-weight: 650;
  text-decoration: none;
}

.mobile-drawer-create {
  justify-content: center !important;
  margin-top: auto;
  padding: 13px 18px !important;
  color: #fff !important;
}

.overlay {
  position: fixed;
  z-index: 1500;
  inset: 0;
  visibility: hidden;
  background: rgba(8, 17, 31, 0.54);
  opacity: 0;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.overlay.active {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
   4. SHARED LAYOUT AND COMPONENTS
   ========================================================================== */

.home-shell,
.content-container,
.container {
  width: min(var(--bm-shell), calc(100% - 40px));
  margin-inline: auto;
}

.content-container,
.container {
  max-width: var(--bm-content);
}

.section,
.home-section {
  padding: clamp(68px, 8vw, 112px) clamp(20px, 5vw, 72px);
}

.section-title,
.home-section-heading {
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 58px);
  text-align: center;
}

.section-title h2,
.home-section-heading h2 {
  margin-bottom: 16px;
  font-size: clamp(2.15rem, 4vw, 3.35rem);
}

.section-title p,
.home-section-heading p {
  margin: 0 auto;
  color: var(--bm-text-soft);
  font-size: 1.05rem;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--bm-gold-dark);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-eyebrow-light {
  color: var(--bm-gold-light);
}

.page-hero {
  padding: clamp(72px, 9vw, 120px) 20px;
  background: var(--bm-surface);
  text-align: center;
}

.page-hero h1 {
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
}

.page-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--bm-text-soft);
  font-size: 1.12rem;
}

.page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 70px 20px;
}

.section-card,
.dashboard-card,
.admin-section,
.checkout-card,
.preview-main,
.preview-summary,
.auth-card,
.success-card {
  border: 1px solid rgba(232, 225, 214, 0.8);
  border-radius: var(--bm-radius-lg);
  background: var(--bm-surface);
  box-shadow: var(--bm-shadow);
}

.section-card {
  margin-bottom: 34px;
  padding: clamp(26px, 5vw, 44px);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  padding: 34px 28px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: var(--bm-surface);
  box-shadow: var(--bm-shadow-sm);
  transition:
    transform var(--bm-transition),
    box-shadow var(--bm-transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow);
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  color: var(--bm-text-soft);
}

/* ==========================================================================
   5. BUTTONS AND FORMS
   ========================================================================== */

.buttons,
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.buttons {
  justify-content: center;
}

.btn,
.primary-button,
.checkout-button,
.contact-form button,
.admin-action-btn,
.delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 780;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition:
    background var(--bm-transition),
    color var(--bm-transition),
    border var(--bm-transition),
    transform var(--bm-transition),
    box-shadow var(--bm-transition);
}

.btn-primary,
.checkout-button,
.contact-form button {
  border: 2px solid var(--bm-gold);
  background: var(--bm-gold);
  color: #fff;
  box-shadow: 0 10px 24px rgba(184, 137, 54, 0.2);
}

.btn-primary:hover,
.checkout-button:hover,
.contact-form button:hover {
  border-color: var(--bm-gold-dark);
  background: var(--bm-gold-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  border: 2px solid var(--bm-gold);
  background: transparent;
  color: var(--bm-gold-dark);
}

.btn-secondary:hover {
  background: var(--bm-gold-wash);
  transform: translateY(-1px);
}

.primary-button,
.admin-action-btn {
  border: 0;
  background: var(--bm-navy);
  color: #fff;
}

.primary-button:hover,
.admin-action-btn:hover {
  background: var(--bm-navy-soft);
}

.delete-button {
  border: 0;
  background: var(--bm-danger);
  color: #fff;
}

.delete-button:hover {
  background: #7c2828;
}

button:disabled,
.btn:disabled,
.checkout-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.form-group {
  margin: 0 0 28px;
}

.form-group label,
label {
  display: block;
  margin-bottom: 8px;
  color: var(--bm-navy);
  font-weight: 700;
}

input,
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--bm-border-strong);
  border-radius: 11px;
  background: #fff;
  color: var(--bm-text);
  font-size: 1rem;
  transition:
    border var(--bm-transition),
    box-shadow var(--bm-transition);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bm-gold);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(184, 137, 54, 0.14);
}

.upload-box {
  padding: 28px;
  border: 2px dashed #d8c49a;
  border-radius: var(--bm-radius-md);
  background: var(--bm-surface-warm);
  text-align: center;
}

.upload-guidance {
  margin-top: 18px;
  color: var(--bm-text-soft);
  font-size: 0.94rem;
}

.example-format {
  margin: 18px 0;
  padding: 18px;
  border-radius: var(--bm-radius-sm);
  background: var(--bm-bg-soft);
  color: var(--bm-text);
  text-align: left;
}

.form-message {
  margin-top: 16px;
  color: #8a4b32;
  font-weight: 700;
}

/* ==========================================================================
   6. MODERN HOMEPAGE
   ========================================================================== */

.home-page {
  background:
    radial-gradient(circle at 92% 0%, rgba(229, 210, 170, 0.28), transparent 30%),
    var(--bm-bg);
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 94px) 0 72px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.96), rgba(249, 245, 237, 0.9));
}

.home-hero::after {
  position: absolute;
  z-index: 0;
  right: -160px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(231, 212, 170, 0.18);
  content: "";
}

.home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(42px, 7vw, 90px);
}

.home-hero-copy h1 {
  max-width: 680px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 5.6vw, 5.1rem);
  letter-spacing: -0.035em;
}

.home-hero-copy > p {
  max-width: 600px;
  margin-bottom: 30px;
  color: var(--bm-text-soft);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
}

.home-hero-actions {
  justify-content: flex-start;
}

.home-hero-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  color: var(--bm-text-soft);
  font-size: 0.92rem;
  font-weight: 650;
}

.home-hero-note span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eaf4ec;
  color: var(--bm-success);
}

.home-hero-media {
  position: relative;
  min-width: 0;
}

.hero-image-frame {
  position: relative;
  overflow: hidden;
  min-height: 530px;
  border: 10px solid rgba(255, 255, 255, 0.84);
  border-radius: 30px;
  background: #efe9df;
  box-shadow: var(--bm-shadow-lg);
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  min-height: 530px;
  object-fit: cover;
  object-position: center;
}

.hero-floating-card {
  position: absolute;
  display: grid;
  min-width: 190px;
  padding: 14px 17px;
  border: 1px solid rgba(232, 225, 214, 0.88);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bm-shadow);
  backdrop-filter: blur(10px);
}

.hero-floating-card span {
  color: var(--bm-text-soft);
  font-size: 0.76rem;
}

.hero-floating-card strong {
  color: var(--bm-navy);
  font-size: 0.94rem;
}

.hero-floating-card-top {
  top: 36px;
  left: -38px;
}

.hero-floating-card-bottom {
  right: -34px;
  bottom: 36px;
}

.home-trust-section {
  position: relative;
  z-index: 3;
  margin-top: -30px;
}

.home-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--bm-shadow);
}

.home-trust-item {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 28px 30px;
}

.home-trust-item + .home-trust-item {
  border-left: 1px solid var(--bm-border);
}

.home-trust-item h2 {
  margin-bottom: 5px;
  font-size: 1.25rem;
}

.home-trust-item p {
  margin: 0;
  color: var(--bm-text-soft);
  font-size: 0.92rem;
}

.line-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--bm-gold-light);
  border-radius: 50%;
  background: var(--bm-gold-wash);
  color: var(--bm-gold-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.collection-card {
  overflow: hidden;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: var(--bm-surface);
  box-shadow: var(--bm-shadow-sm);
  text-decoration: none;
  transition:
    transform var(--bm-transition),
    box-shadow var(--bm-transition);
}

.collection-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bm-shadow);
}

.collection-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.collection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

.collection-card:hover img {
  transform: scale(1.035);
}

.collection-content {
  padding: 25px;
  text-align: center;
}

.collection-content h3 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}

.collection-content p {
  color: var(--bm-text-soft);
}

.collection-content span {
  color: var(--bm-gold-dark);
  font-size: 0.91rem;
  font-weight: 800;
}

.home-how-section {
  border-block: 1px solid var(--bm-border);
  background: rgba(255, 255, 255, 0.72);
}

.home-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.home-process::before {
  position: absolute;
  top: 35px;
  right: 10%;
  left: 10%;
  z-index: 0;
  border-top: 1px dashed #d2b878;
  content: "";
}

.home-process-step {
  position: relative;
  z-index: 1;
  padding: 0 14px;
  text-align: center;
}

.home-process-number {
  position: absolute;
  top: -7px;
  left: calc(50% + 21px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bm-gold);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 850;
}

.home-process-step .line-icon {
  margin: 0 auto 20px;
  background: #fff;
}

.home-process-step h3 {
  margin-bottom: 9px;
  font-size: 1.22rem;
}

.home-process-step p {
  color: var(--bm-text-soft);
  font-size: 0.91rem;
}

.home-formats-section {
  background:
    linear-gradient(180deg, rgba(251, 249, 245, 0.5), rgba(243, 238, 229, 0.76));
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.format-card {
  overflow: hidden;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
}

.format-card img {
  width: 100%;
  aspect-ratio: 5 / 3.5;
  object-fit: cover;
}

.format-card > div {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 20px;
}

.format-card h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.format-card p {
  color: var(--bm-text-soft);
  font-size: 0.9rem;
}

.format-card strong {
  margin-top: auto;
  color: var(--bm-gold-dark);
  font-size: 0.86rem;
}

.format-footnote {
  margin: 24px 0 0;
  color: var(--bm-text-soft);
  text-align: center;
  font-size: 0.9rem;
}

.home-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  max-width: none;
  gap: 24px;
  text-align: left;
}

.home-heading-row > div {
  max-width: 700px;
}

.home-heading-row h2 {
  margin-bottom: 0;
}

.home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.home-gallery-grid a {
  overflow: hidden;
  border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-sm);
}

.home-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 350ms ease;
}

.home-gallery-grid a:hover img {
  transform: scale(1.04);
}

.home-reassurance-section {
  padding: 0 clamp(20px, 5vw, 72px) 80px;
}

.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
}

.reassurance-grid article {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 24px 20px;
}

.reassurance-grid article + article {
  border-left: 1px solid var(--bm-border);
}

.reassurance-grid .line-icon {
  width: 42px;
  height: 42px;
  font-size: 1.18rem;
}

.reassurance-grid h3 {
  margin-bottom: 5px;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 800;
}

.reassurance-grid p {
  margin: 0;
  color: var(--bm-text-soft);
  font-size: 0.8rem;
}

.home-final-cta {
  padding: 0 clamp(20px, 5vw, 72px) clamp(72px, 8vw, 105px);
}

.home-final-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 0.8fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--bm-radius-xl);
  background:
    radial-gradient(circle at 25% 20%, rgba(184, 137, 54, 0.18), transparent 32%),
    var(--bm-navy);
  box-shadow: var(--bm-shadow-lg);
}

.home-final-cta-inner > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(38px, 6vw, 70px);
}

.home-final-cta h2 {
  margin-bottom: 14px;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.home-final-cta p {
  max-width: 590px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.home-final-cta-image {
  min-height: 360px;
}

.home-final-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer-modern {
  padding: 42px 0;
  border-top: 1px solid var(--bm-border);
  background: #fff;
}

.site-footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer-brand img {
  width: auto;
  height: 45px;
}

.site-footer-brand p {
  margin: 0;
  color: var(--bm-text-soft);
  font-size: 0.9rem;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.site-footer-links a {
  color: var(--bm-navy);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--bm-gold-dark);
}

/* Legacy hero selectors remain usable on supporting pages. */

.hero-image {
  width: 100%;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: min(760px, 72vh);
  object-fit: cover;
}

.hero-text {
  padding: 80px 20px;
  background: var(--bm-bg);
  text-align: center;
}

.hero-text h1 {
  max-width: 900px;
  margin: 0 auto 24px;
  font-size: clamp(2.7rem, 6vw, 4.5rem);
}

.hero-text p {
  max-width: 750px;
  margin: 0 auto 35px;
  color: var(--bm-text-soft);
  font-size: 1.2rem;
}

/* ==========================================================================
   7. WIZARD / BUILDER
   ========================================================================== */

.builder-body {
  background:
    linear-gradient(180deg, #f9f6f0 0%, #f5f1ea 100%);
}

.builder-page {
  padding: 52px 0 90px;
}

.builder-intro {
  max-width: 820px;
  margin: 0 auto 36px;
  padding-inline: 20px;
  text-align: center;
}

.builder-intro h1 {
  margin-bottom: 14px;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.builder-intro p {
  color: var(--bm-text-soft);
  font-size: 1.06rem;
}

.builder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  gap: 28px;
}

.builder-main {
  min-width: 0;
}

.builder-summary {
  position: sticky;
  top: 108px;
  padding: 24px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: #fff;
  box-shadow: var(--bm-shadow);
}

.builder-summary h2 {
  margin-bottom: 18px;
  font-size: 1.4rem;
}

.builder-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bm-border);
  font-size: 0.9rem;
}

.builder-summary-row span {
  color: var(--bm-text-soft);
}

.builder-summary-total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-top: 17px;
  color: var(--bm-navy);
  font-size: 1.12rem;
  font-weight: 800;
}

.builder-summary-note {
  margin: 16px 0 0;
  color: var(--bm-text-soft);
  font-size: 0.78rem;
}

.wizard-container {
  max-width: none;
  margin: 0;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bm-shadow);
}

.progress-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 42px;
  border-bottom: 1px solid var(--bm-border);
}

.progress-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 8px 5px 17px;
  border: 0;
  background: transparent;
  color: var(--bm-text-faint);
  cursor: pointer;
  font-weight: 800;
  transition: color var(--bm-transition);
}

.progress-step::before {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border: 1px solid var(--bm-border-strong);
  border-radius: 50%;
  background: var(--bm-bg-soft);
  content: attr(data-step);
  font-size: 0.82rem;
}

.progress-step::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.progress-step.active {
  color: var(--bm-navy);
}

.progress-step.active::before {
  border-color: var(--bm-gold);
  background: var(--bm-gold);
  color: #fff;
}

.progress-step.active::after {
  background: var(--bm-gold);
}

.progress-step:hover {
  color: var(--bm-gold-dark);
}

.progress-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
  animation: bmFadeIn 220ms ease;
}

@keyframes bmFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wizard-step > h3 {
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  text-align: center;
}

.wizard-step-intro {
  max-width: 650px;
  margin: 0 auto 30px;
  color: var(--bm-text-soft);
  text-align: center;
}

.book-options,
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 17px;
}

.book-options {
  margin-bottom: 30px;
}

.book-card,
.selection-card {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
  cursor: pointer;
  text-align: center;
  transition:
    transform var(--bm-transition),
    border var(--bm-transition),
    background var(--bm-transition),
    box-shadow var(--bm-transition);
}

.book-card {
  padding: 28px 20px;
}

.book-card:hover,
.selection-card:hover {
  border-color: var(--bm-gold-light);
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow);
}

.book-card.selected,
.selection-card.selected {
  border-color: var(--bm-gold);
  background: var(--bm-gold-wash);
}

.book-card.selected::after,
.selection-card.selected::after {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--bm-gold);
  color: #fff;
  content: "✓";
  font-size: 0.82rem;
  font-weight: 900;
}

.book-card h4,
.selection-card h5 {
  margin-bottom: 9px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
}

.book-card p,
.selection-card p {
  color: var(--bm-text-soft);
  font-size: 0.9rem;
}

.selection-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.selection-card h5 {
  margin-top: 18px;
  padding: 0 18px;
}

.selection-card p {
  min-height: 64px;
  padding: 0 18px 17px;
}

.selection-card.option-disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.48;
}

.selection-card.option-disabled:hover {
  border-color: var(--bm-border);
  box-shadow: var(--bm-shadow-sm);
  transform: none;
}

.option-group {
  margin-bottom: 38px;
}

.option-group > h4 {
  margin-bottom: 14px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
}

.availability-note {
  display: block;
  margin: 0 15px 15px;
  padding: 8px 10px !important;
  border-radius: 8px;
  font-size: 0.77rem !important;
  font-weight: 750;
  min-height: 0 !important;
}

.availability-note.available {
  background: #edf7ef;
  color: var(--bm-success);
}

.availability-note.unavailable {
  background: #fff0f0;
  color: var(--bm-danger);
}

.image-guidance {
  max-width: 650px;
  margin: 0 auto 26px;
  color: var(--bm-text-soft);
  text-align: center;
}

.image-example-container {
  margin-bottom: 28px;
  text-align: center;
}

.image-example-container img {
  width: min(100%, 410px);
  margin-inline: auto;
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow);
}

.wizard-accordion {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
}

.wizard-accordion summary {
  padding: 17px 18px;
  background: var(--bm-bg-soft);
  color: var(--bm-navy);
  cursor: pointer;
  list-style: none;
}

.wizard-accordion summary::-webkit-details-marker {
  display: none;
}

.wizard-accordion summary::after {
  float: right;
  content: "+";
  color: var(--bm-gold-dark);
  font-size: 1.25rem;
}

.wizard-accordion[open] summary::after {
  content: "−";
}

.wizard-accordion .form-group,
.wizard-accordion .social-import-box {
  margin: 0;
  padding: 20px;
}

.page-estimate-panel,
.book-style-eligibility-panel {
  margin: 22px 0;
  padding: 20px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: var(--bm-bg-soft);
}

.page-estimate-panel h4,
.book-style-eligibility-panel h4 {
  margin-bottom: 9px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
}

.book-style-rule-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 14px;
  gap: 8px 16px;
}

.book-style-rule-list p {
  margin: 0;
  color: var(--bm-text-soft);
  font-size: 0.85rem;
}

.price-summary {
  margin-bottom: 30px;
  padding: 30px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: var(--bm-bg-soft);
}

.price-summary h4 {
  margin-bottom: 20px;
  text-align: center;
}

.price-row,
.price-total,
.summary-row,
.checkout-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bm-border);
}

.price-row span:first-child,
.summary-row span {
  color: var(--bm-text-soft);
}

.price-total,
.checkout-total {
  border-bottom: 0;
  color: var(--bm-navy);
  font-size: 1.18rem;
  font-weight: 800;
}

.shipping-note {
  margin: 15px 0 0;
  color: var(--bm-text-soft);
  font-size: 0.85rem;
  text-align: center;
}

#bookValidation,
#validationMessage,
#coverValidation,
#optionsValidation,
.validation-text {
  margin: 18px 0;
  color: var(--bm-danger);
}

/* ==========================================================================
   8. SUPPORTING PUBLIC PAGES
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  margin-top: 42px;
}

.step {
  text-align: center;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--bm-gold);
  color: #fff;
  font-weight: 850;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.gallery-grid img {
  width: 100%;
  height: 300px;
  border-radius: var(--bm-radius-md);
  object-fit: cover;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form input,
.contact-form textarea {
  margin-bottom: 18px;
}

.app-purpose,
.app-purpose-section {
  padding: 70px 20px;
  background: var(--bm-bg-soft);
}

.purpose-card {
  max-width: 920px;
  margin: 0 auto;
  padding: 46px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: #fff;
  box-shadow: var(--bm-shadow);
  text-align: center;
}

.purpose-card p {
  max-width: 720px;
  margin: 0 auto 16px;
  color: var(--bm-text-soft);
}

.purpose-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  gap: 16px;
}

.purpose-highlights div {
  padding: 20px 17px;
  border-radius: var(--bm-radius-md);
  background: var(--bm-bg-soft);
}

.purpose-highlights strong {
  display: block;
  margin-bottom: 7px;
  color: var(--bm-navy);
}

.purpose-highlights span {
  color: var(--bm-text-soft);
  font-size: 0.9rem;
}

.purpose-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
  gap: 17px;
}

.purpose-links a {
  color: var(--bm-gold-dark);
  font-weight: 750;
  text-decoration: none;
}

/* ==========================================================================
   9. PREVIEW AND BOOK PAGES
   ========================================================================== */

.preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr);
  align-items: start;
  gap: 30px;
}

.preview-main,
.preview-summary {
  padding: clamp(24px, 4vw, 40px);
}

.preview-summary {
  position: sticky;
  top: 108px;
}

.book-cover-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  height: 680px;
  margin: 0 auto;
  border-radius: var(--bm-radius-lg);
  background: #eee;
  box-shadow: 0 18px 45px rgba(19, 35, 59, 0.17);
}

.book-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-cover-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px;
  background: linear-gradient(transparent, rgba(6, 13, 25, 0.8));
  color: #fff;
}

.book-cover-overlay h3 {
  color: #fff;
  font-size: 2rem;
}

.sample-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.sample-page,
.preview-page {
  padding: 24px;
  border-radius: var(--bm-radius-md);
  background: var(--bm-bg-soft);
  box-shadow: inset 0 0 0 1px var(--bm-border);
}

.preview-page {
  margin-bottom: 18px;
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
}

.selected-style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.selected-style-grid img {
  width: 100%;
  height: 125px;
  border-radius: 10px;
  object-fit: cover;
}

.style-item {
  text-align: center;
}

.style-item p {
  margin-top: 9px;
  color: var(--bm-text-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.approval-box,
.finish-badge {
  margin-top: 26px;
  padding: 18px;
  border-radius: var(--bm-radius-md);
  background: var(--bm-bg-soft);
}

.approval-box label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.preview-source-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--bm-gold-wash);
  color: var(--bm-gold-dark);
  font-size: 0.85rem;
  font-weight: 750;
}

.finish-badge {
  text-align: center;
}

.finish-badge span {
  display: block;
  color: var(--bm-text-soft);
  font-size: 0.85rem;
}

.finish-badge strong {
  color: var(--bm-gold-dark);
  font-size: 1.12rem;
}

.preview-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  gap: 16px;
}

.preview-navigation button {
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--bm-gold);
  color: #fff;
  cursor: pointer;
}

.preview-navigation button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.book-preview-page {
  overflow: hidden;
  margin: 0 auto 28px;
  padding: 24px;
  border-radius: var(--bm-radius-lg);
  background: #e8e1d6;
  box-shadow: var(--bm-shadow);
}

.preview-page-a4 {
  width: 620px;
  aspect-ratio: 210 / 297;
}

.preview-page-a5 {
  width: 410px;
  aspect-ratio: 148 / 210;
}

.book-page-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 720px;
  height: 100%;
  padding: 60px 70px;
  border: 1px solid #eee4d8;
  border-radius: 7px;
  background: #fffdf8;
}

.preview-page-a4 .book-page-inner {
  padding: 45px;
}

.preview-page-a5 .book-page-inner {
  padding: 48px 42px;
}

.book-page-content,
.message-page-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.message-page-content {
  min-height: 600px;
}

.memory-entry {
  margin-bottom: 30px;
  text-align: center;
}

.memory-entry:last-child {
  margin-bottom: 0;
}

.memory-message,
.memory-author {
  font-family: "Times New Roman", Times, serif;
  font-size: 14pt;
  text-align: center;
}

.memory-message {
  color: #1f1f1f;
  line-height: 1.55;
}

.memory-author {
  margin-top: 7px;
  color: #444;
  font-style: italic;
}

.preview-cover-image {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}

.book-page-header {
  margin-bottom: 34px;
  color: var(--bm-gold);
  font-family: "Times New Roman", Times, serif;
  font-size: 11pt;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.book-page-footer {
  margin-top: 38px;
  color: #aaa;
  font-family: "Times New Roman", Times, serif;
  font-size: 11pt;
  text-align: center;
}

/* ==========================================================================
   10. AUTH, DASHBOARD, PROJECT AND ADMIN
   ========================================================================== */

.auth-card {
  max-width: 540px;
  margin: 0 auto;
  padding: 46px;
  text-align: center;
}

.auth-card h1 {
  margin-bottom: 13px;
  font-size: 2.6rem;
}

.auth-card p {
  margin-bottom: 26px;
  color: var(--bm-text-soft);
}

.auth-card form {
  text-align: left;
}

.social-login {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  gap: 11px;
}

.social-btn {
  width: 100%;
  min-height: 49px;
  padding: 12px 17px;
  border: 1px solid var(--bm-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--bm-navy);
  cursor: pointer;
  font-weight: 800;
}

.social-btn:hover {
  border-color: var(--bm-gold);
  background: var(--bm-gold-wash);
}

.auth-divider {
  margin: 18px 0;
  color: var(--bm-text-faint);
  text-align: center;
  font-size: 0.87rem;
}

.dashboard-page,
.admin-page {
  padding: 62px clamp(20px, 5vw, 72px);
}

.dashboard-card,
.admin-section {
  max-width: 1160px;
  margin: 0 auto 28px;
  padding: clamp(24px, 4vw, 38px);
}

.dashboard-header,
.project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 38px;
  gap: 22px;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 40px;
  gap: 17px;
}

.stat-card {
  padding: 25px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
  text-align: center;
}

.project-card,
.admin-order-card {
  margin-bottom: 17px;
  padding: 24px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
}

.project-card-header,
.admin-order-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-order-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  margin-bottom: 20px;
}

.project-card p,
.admin-muted-block {
  color: var(--bm-text-soft);
}

.project-status,
.admin-status-pill {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bm-gold-wash);
  color: var(--bm-gold-dark);
  font-size: 0.8rem;
  font-weight: 800;
}

.project-actions,
.admin-order-action-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 10px;
}

.admin-order-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-mini-card {
  padding: 11px;
  border-radius: 10px;
  background: var(--bm-bg-soft);
}

.admin-mini-card span {
  display: block;
  margin-bottom: 3px;
  color: var(--bm-text-soft);
  font-size: 0.77rem;
}

.admin-mini-card strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.admin-accordion {
  overflow: hidden;
  margin-top: 13px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
}

.admin-accordion summary {
  padding: 15px 17px;
  background: var(--bm-bg-soft);
  color: var(--bm-navy);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.admin-accordion summary::-webkit-details-marker {
  display: none;
}

.admin-accordion summary::after {
  float: right;
  content: "+";
}

.admin-accordion[open] summary::after {
  content: "−";
}

.admin-accordion-body {
  padding: 18px;
}

.admin-order-card label {
  margin-top: 12px;
}

.admin-order-card button,
.admin-pdf-actions button {
  margin: 10px 8px 0 0;
  padding: 11px 15px;
  border: 0;
  border-radius: 9px;
  background: var(--bm-gold);
  color: #fff;
  cursor: pointer;
  font-weight: 750;
}

.admin-order-card button:disabled,
.admin-pdf-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-status-pill.ready,
.admin-check-status.ready,
.admin-ready-text {
  color: var(--bm-success);
}

.admin-status-pill.blocked,
.admin-check-status.missing,
.admin-blocker-text {
  color: var(--bm-danger);
}

.admin-status-pill.ready {
  background: #edf7ef;
}

.admin-status-pill.blocked {
  background: #fff0f0;
}

.admin-production-queue-grid,
.admin-order-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 13px;
}

.admin-queue-card {
  min-height: 110px;
  padding: 15px;
  border: 1px solid var(--bm-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
  cursor: pointer;
  text-align: left;
}

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: 32px;
}

.project-main,
.project-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-cover-image {
  width: 100%;
  max-height: 540px;
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow);
  object-fit: cover;
}

.timeline-complete,
.timeline-pending {
  padding: 12px 0;
  border-bottom: 1px solid var(--bm-border);
  font-weight: 700;
}

.timeline-complete {
  color: var(--bm-success);
}

.timeline-pending {
  color: var(--bm-text-faint);
}

.empty-state {
  padding: 40px 20px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: var(--bm-bg-soft);
  text-align: center;
}

/* Status helpers */

.status-draft {
  background: #f2f2f2;
  color: #666;
}

.status-preview-approved {
  background: #e8f1ff;
  color: #2b6cb0;
}

.status-checkout-started {
  background: #fff4e5;
  color: #9a681b;
}

.status-paid {
  background: #e8fff0;
  color: #2f855a;
}

.status-printing {
  background: #f2e8ff;
  color: #6b46c1;
}

.status-shipped {
  background: #e6fffa;
  color: #0f766e;
}

.status-delivered {
  background: #dcfce7;
  color: #166534;
}

/* Lulu badges */

.lulu-status-row {
  margin: 10px 0 14px;
}

.lulu-badge {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 800;
  text-transform: capitalize;
}

.lulu-not_sent,
.lulu-payload_ready {
  background: #e5e7eb;
  color: #374151;
}

.lulu-submitted,
.lulu-created {
  background: #dbeafe;
  color: #1e40af;
}

.lulu-in_production {
  background: #fed7aa;
  color: #9a3412;
}

.lulu-shipped {
  background: #ddd6fe;
  color: #5b21b6;
}

.lulu-fulfilled {
  background: #bbf7d0;
  color: #166534;
}

.lulu-rejected,
.lulu-error {
  background: #fecaca;
  color: #991b1b;
}

/* ==========================================================================
   11. CHECKOUT, CART, TRACKING AND SUCCESS
   ========================================================================== */

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 30px;
}

.checkout-card {
  padding: clamp(25px, 4vw, 40px);
}

.checkout-card h2 {
  margin-bottom: 25px;
}

.guest-warning,
.account-prompt {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid #e6c98f;
  border-radius: var(--bm-radius-sm);
  background: #fff8ec;
  color: #5c4220;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  gap: 16px;
}

.quantity-control button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--bm-gold);
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 17px;
}

.checkout-button {
  width: 100%;
  margin-top: 18px;
}

.fulfilment-box {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-sm);
  background: var(--bm-surface-warm);
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  gap: 28px;
}

.cart-summary {
  position: sticky;
  top: 108px;
}

.cart-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 125px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: #fff;
  box-shadow: var(--bm-shadow-sm);
  gap: 18px;
}

.cart-item-image-wrap {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 142px;
  border-radius: 10px;
  background: var(--bm-bg-soft);
}

.cart-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-price {
  display: flex;
  flex-direction: column;
  text-align: right;
  gap: 7px;
}

.cart-item-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  margin-top: 16px;
  gap: 15px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--bm-navy);
  cursor: pointer;
  text-decoration: underline;
}

.text-button.danger {
  color: var(--bm-danger);
}

.coupon-box {
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid var(--bm-border);
}

.coupon-input-row {
  display: flex;
  margin-top: 9px;
  gap: 9px;
}

.order-status-card {
  margin-top: 22px;
  padding: 25px;
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-md);
  background: var(--bm-surface-warm);
}

#nextStepText {
  margin-top: 14px;
  padding: 16px;
  border-left: 4px solid var(--bm-gold);
  border-radius: 9px;
  background: var(--bm-gold-wash);
}

.success-card {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(34px, 6vw, 56px);
  text-align: center;
}

.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--bm-gold);
  color: #fff;
  font-size: 2.3rem;
}

.success-card h1 {
  margin-bottom: 16px;
  font-size: clamp(2.3rem, 5vw, 3.3rem);
}

.success-card > p {
  max-width: 620px;
  margin-inline: auto;
  color: var(--bm-text-soft);
}

.success-summary {
  margin: 30px 0 24px;
  text-align: left;
}

/* ==========================================================================
   12. LEGAL PAGES AND LEGACY FOOTER
   ========================================================================== */

.page-section {
  min-height: calc(100vh - 120px);
  padding: 70px 20px;
  background: var(--bm-bg-soft);
}

.page-section .container {
  max-width: 940px;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  background: #fff;
  box-shadow: var(--bm-shadow);
}

.page-section h1 {
  margin-bottom: 10px;
  font-size: clamp(2.2rem, 4vw, 3rem);
  text-align: center;
}

.page-section h2 {
  margin: 32px 0 13px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bm-border);
  color: var(--bm-gold-dark);
  font-size: 1.35rem;
}

.page-section p,
.page-section li {
  color: #4c535c;
  line-height: 1.8;
}

.page-section ul {
  margin-bottom: 18px;
  padding-left: 24px;
}

.legal-divider {
  width: 76px;
  height: 3px;
  margin: 18px auto 32px;
  border-radius: 999px;
  background: var(--bm-gold);
}

footer:not(.site-footer-modern),
.site-footer:not(.site-footer-modern) {
  padding: 45px clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--bm-border);
  background: var(--bm-navy);
  color: #fff;
  text-align: center;
}

footer:not(.site-footer-modern) a,
.site-footer:not(.site-footer-modern) a {
  color: var(--bm-gold-light);
  text-decoration: none;
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 1120px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: 45px;
  }

  .format-grid,
  .reassurance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reassurance-grid article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--bm-border);
  }

  .reassurance-grid article:nth-child(4) {
    border-top: 1px solid var(--bm-border);
  }

  .builder-shell {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}

@media (max-width: 960px) {
  .desktop-nav {
    display: none;
  }

  .mobile-header-actions {
    display: flex;
  }

  .hamburger {
    display: flex;
  }

  .home-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    text-align: center;
  }

  .home-hero-copy h1,
  .home-hero-copy > p {
    margin-inline: auto;
  }

  .home-hero-actions {
    justify-content: center;
  }

  .home-hero-note {
    justify-content: center;
  }

  .home-hero-media {
    width: min(720px, 100%);
    margin-inline: auto;
  }

  .hero-floating-card-top {
    left: 18px;
  }

  .hero-floating-card-bottom {
    right: 18px;
  }

  .collection-grid,
  .home-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-process {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .home-process::before {
    display: none;
  }

  .builder-shell {
    grid-template-columns: 1fr;
  }

  .builder-summary {
    position: static;
    order: -1;
  }

  .preview-layout,
  .checkout-layout,
  .project-grid,
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .preview-summary,
  .cart-summary {
    position: static;
  }
}

@media (max-width: 760px) {
  html {
    font-size: 15px;
  }

  header,
  .site-header {
    min-height: 72px;
  }

  .site-header-inner {
    min-height: 72px;
  }

  .logo {
    height: 44px;
  }

  .home-hero {
    padding-top: 44px;
  }

  .home-hero-copy h1 {
    font-size: clamp(2.45rem, 11vw, 3.5rem);
  }

  .hero-image-frame,
  .hero-image-frame img {
    min-height: 390px;
  }

  .hero-floating-card {
    display: none;
  }

  .home-trust-strip,
  .collection-grid,
  .home-gallery-grid,
  .format-grid {
    grid-template-columns: 1fr;
  }

  .home-trust-item + .home-trust-item {
    border-top: 1px solid var(--bm-border);
    border-left: 0;
  }

  .collection-image {
    aspect-ratio: 16 / 10;
  }

  .home-process {
    grid-template-columns: 1fr;
  }

  .home-process-step {
    display: grid;
    grid-template-columns: 62px 1fr;
    padding: 16px 0;
    text-align: left;
  }

  .home-process-step .line-icon {
    grid-row: 1 / 4;
    margin: 0;
  }

  .home-process-number {
    top: 9px;
    left: 39px;
  }

  .home-process-step h3,
  .home-process-step p {
    margin-left: 14px;
  }

  .home-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .reassurance-grid {
    grid-template-columns: 1fr;
  }

  .reassurance-grid article + article,
  .reassurance-grid article:nth-child(3),
  .reassurance-grid article:nth-child(4) {
    border-top: 1px solid var(--bm-border);
    border-left: 0;
  }

  .home-final-cta-inner {
    grid-template-columns: 1fr;
  }

  .home-final-cta-image {
    min-height: 250px;
  }

  .site-footer-grid,
  .site-footer-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer-links {
    justify-content: flex-start;
  }

  .progress-bar {
    grid-template-columns: repeat(5, 1fr);
  }

  .progress-step {
    min-height: 58px;
  }

  .progress-step::before {
    width: 32px;
    height: 32px;
    margin-right: 0;
  }

  .progress-step-label {
    display: none;
  }

  .book-style-rule-list,
  .purpose-highlights,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .buttons,
  .home-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .buttons .btn,
  .home-hero-actions .btn {
    width: 100%;
  }

  .preview-page-a4,
  .preview-page-a5 {
    width: min(100%, 430px);
  }

  .project-card-header,
  .dashboard-header,
  .project-header {
    flex-direction: column;
  }

  .admin-order-hero,
  .admin-order-meta {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns: 90px 1fr;
  }

  .cart-item-price {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 520px) {
  html {
    font-size: 14px;
  }

  .site-header-inner,
  .home-shell,
  .content-container,
  .container,
  .builder-shell {
    width: min(100% - 28px, var(--bm-shell));
  }

  .mobile-create-button {
    padding-inline: 12px;
  }

  .home-hero-copy h1 {
    font-size: 2.55rem;
  }

  .home-hero-copy > p {
    font-size: 1rem;
  }

  .hero-image-frame,
  .hero-image-frame img {
    min-height: 310px;
  }

  .home-trust-item {
    padding: 22px;
  }

  .home-section,
  .section {
    padding-inline: 14px;
  }

  .wizard-container {
    padding: 22px 16px;
    border-radius: 20px;
  }

  .progress-step {
    padding-bottom: 13px;
  }

  .selection-grid,
  .book-options {
    grid-template-columns: 1fr;
  }

  .selection-card img {
    height: 210px;
  }

  .builder-summary-row,
  .builder-summary-total,
  .price-row,
  .price-total,
  .summary-row,
  .checkout-total {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .book-preview-page {
    padding: 12px;
  }

  .preview-page-a4,
  .preview-page-a5 {
    width: 100%;
  }

  .book-page-inner,
  .preview-page-a4 .book-page-inner,
  .preview-page-a5 .book-page-inner {
    min-height: 520px;
    padding: 34px 22px;
  }

  .message-page-content {
    min-height: 430px;
  }

  .memory-message,
  .memory-author {
    font-size: 12pt;
  }


  /*
    Scale message pages as a page on mobile. JS applies proportional text and
    spacing; these rules remove the old fixed 520px inner minimum that could
    extend beyond the A4 preview frame and clip the final messages.
  */
  .bm-message-preview-page .book-page-inner,
  .bm-message-preview-page.preview-page-a4 .book-page-inner,
  .bm-message-preview-page.preview-page-a5 .book-page-inner {
    min-height: 0;
    height: 100%;
  }

  .bm-message-preview-page .message-page-content {
    min-height: 0;
    max-height: 100%;
  }

  .selected-style-grid {
    grid-template-columns: 1fr;
  }

  .book-cover-preview {
    height: 500px;
  }

  .auth-card,
  .success-card,
  .checkout-card,
  .preview-main,
  .preview-summary,
  .dashboard-card,
  .admin-section {
    padding: 25px 18px;
  }

  .cart-item {
    grid-template-columns: 1fr;
  }

  .cart-item-image-wrap {
    width: 100%;
    height: 220px;
  }

  .coupon-input-row {
    flex-direction: column;
  }
}


/* Admin dashboard usability additions */
.admin-management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0 40px}
.admin-card-cta{display:block;padding:24px;border:1px solid var(--bm-border);border-radius:14px;background:#fff;color:var(--bm-text);text-decoration:none;box-shadow:var(--bm-shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.admin-card-cta:hover{transform:translateY(-3px);border-color:var(--bm-gold);box-shadow:var(--bm-shadow)}
.admin-card-cta span,.stat-card-cta small{color:var(--bm-gold-dark);font-weight:800}
button.stat-card{font:inherit;color:inherit;text-align:inherit}
.stat-card-cta{cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.stat-card-cta:hover{transform:translateY(-2px);border-color:var(--bm-gold)}
@media(max-width:720px){.admin-management-grid{grid-template-columns:1fr}}

/* ========================================================================== 
   JULY 2026 — CONSISTENT HEADER LOGO TREATMENT
   All page templates now use the same transparent WebP artwork. These global
   rules cover the public, account, builder, checkout, dashboard and admin
   header variants so the logo always inherits the menu/header background.
   ========================================================================== */
header img[src$="logo.webp"],
header img[src$="/logo.webp"],
.site-header img[src$="logo.webp"],
.site-header img[src$="/logo.webp"],
.bm-site-header img[src$="logo.webp"],
.bm-site-header img[src$="/logo.webp"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* Release 1: growth features */
.bm-growth-section { padding-top: 0; }
.bm-growth-panel { display: grid; gap: 1.25rem; }
.bm-growth-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1rem; }
.bm-referral-card { border: 1px solid rgba(84,65,50,.16); background: #fffaf4; }
.bm-referral-code { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; margin-top:1rem; border-radius:12px; background:#f3ece3; }
.bm-referral-code strong { font-size:1.25rem; letter-spacing:.08em; }
.bm-community-review { display:grid; grid-template-columns:minmax(110px, .8fr) minmax(0,1.2fr); overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(40,30,20,.1); }
.bm-community-review img { width:100%; height:100%; min-height:260px; object-fit:cover; }
.bm-community-review-copy { padding:1.25rem; display:flex; flex-direction:column; justify-content:center; }
.bm-community-review-copy div { letter-spacing:.08em; }
.bm-community-review-copy blockquote { margin:.7rem 0; font-size:1rem; line-height:1.6; }
.bm-community-review-copy p { margin:0; font-size:.85rem; opacity:.75; }
@media (max-width:700px){ .bm-community-review{grid-template-columns:1fr}.bm-community-review img{max-height:300px}.bm-referral-code{align-items:flex-start;flex-direction:column} }


/* =========================
   BM GROWTH ACTION MODALS
========================= */
.bm-growth-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.bm-growth-action-notice{display:flex;flex-direction:column;gap:3px;padding:16px 18px;margin-bottom:22px;border:1px solid #c9b78d;border-radius:12px;background:#fffaf0}.bm-growth-action-notice strong{font-size:1.05rem}.bm-growth-modal-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(20,20,20,.62)}.bm-growth-modal{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;padding:30px;border-radius:18px;background:#fff;box-shadow:0 22px 70px rgba(0,0,0,.28)}.bm-growth-modal-wide{width:min(760px,100%)}.bm-growth-modal-close{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:#f1eee8;font-size:1.6rem;line-height:1;cursor:pointer}.bm-growth-form{display:grid;gap:17px;margin-top:18px}.bm-growth-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bm-growth-span-2{grid-column:1/-1}.bm-growth-form label,.bm-growth-form fieldset{display:grid;gap:7px}.bm-growth-form input,.bm-growth-form select,.bm-growth-form textarea{width:100%;padding:12px;border:1px solid #cfc8bd;border-radius:9px;background:#fff;font:inherit}.bm-growth-check{grid-template-columns:auto 1fr!important;align-items:start}.bm-growth-check input{width:auto;margin-top:4px}.bm-star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px}.bm-star-input input{position:absolute;opacity:0;pointer-events:none}.bm-star-input label{font-size:2rem;color:#c8c2b8;cursor:pointer}.bm-star-input input:checked~label,.bm-star-input label:hover,.bm-star-input label:hover~label{color:#a67916}.bm-growth-highlight{animation:bmGrowthHighlight 2.2s ease}@keyframes bmGrowthHighlight{0%,100%{box-shadow:none}25%,75%{box-shadow:0 0 0 5px rgba(166,121,22,.25)}}@media(max-width:640px){.bm-growth-form-grid{grid-template-columns:1fr}.bm-growth-span-2{grid-column:auto}.bm-growth-modal{padding:25px 18px}}
.bm-growth-review-history{display:grid;gap:14px;margin-top:18px}.bm-growth-review-item{padding:16px;border:1px solid #ddd5c9;border-radius:12px;background:#faf8f4}.bm-growth-review-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.bm-growth-review-item-head strong{color:#a67916;letter-spacing:2px}.bm-growth-review-item-head span{padding:4px 9px;border-radius:999px;background:#ece7df;font-size:.75rem;font-weight:700;text-transform:capitalize}.bm-growth-review-item p{margin:10px 0 6px;white-space:pre-wrap}.bm-growth-review-item small{color:#70685d}.bm-growth-action-grid .bm-account-card{display:flex;flex-direction:column;align-items:flex-start}.bm-growth-action-grid .bm-account-card .btn{margin-top:10px}.bm-referral-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.bm-referral-code strong{padding:10px 12px;border-radius:8px;background:#f3efe7;letter-spacing:.06em}

/* Dashboard discovery banner and post-purchase action cards */
.bm-growth-discovery{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;margin:0 0 22px;padding:16px 18px;border:1px solid #d8c89e;border-radius:15px;background:linear-gradient(135deg,#fffaf0,#f8f3e8);color:inherit;text-decoration:none;box-shadow:0 5px 18px rgba(74,56,25,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.bm-growth-discovery:hover{transform:translateY(-1px);border-color:#aa8240;box-shadow:0 9px 24px rgba(74,56,25,.1)}.bm-growth-discovery-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#a67916;color:#fff;font-size:1.15rem}.bm-growth-discovery-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.bm-growth-discovery-copy strong{font-size:1rem}.bm-growth-discovery-copy small{color:#665f55;line-height:1.45}.bm-growth-discovery-link{font-weight:800;color:#725415;white-space:nowrap}.bm-growth-section{scroll-margin-top:90px}.bm-growth-action-grid .bm-growth-action-card{position:relative;min-height:245px;padding:22px;border:1px solid #ded7cb;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(43,36,24,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.bm-growth-action-grid .bm-growth-action-card:hover{transform:translateY(-2px);border-color:#c7b486;box-shadow:0 10px 28px rgba(43,36,24,.1)}.bm-growth-card-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:4px;border-radius:12px;background:#f3ecdc;color:#8a6517;font-size:1.2rem;font-weight:900}.bm-growth-action-card h3{margin:6px 0 4px}.bm-growth-action-card p{color:#655f57}.bm-growth-card-actions{display:flex;flex-wrap:wrap;gap:9px;width:100%;margin-top:auto;padding-top:14px}.bm-growth-card-actions .bm-growth-cta{margin:0;min-height:44px;border-radius:10px}.bm-growth-card-actions .bm-growth-cta:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.25)}@media(max-width:680px){.bm-growth-discovery{grid-template-columns:auto minmax(0,1fr)}.bm-growth-discovery-link{grid-column:2}.bm-growth-action-grid .bm-growth-action-card{min-height:0}}

/* Admin review moderation */
.bm-admin-review-card{overflow:hidden}.bm-admin-review-card .bm-account-card-header{align-items:flex-start}.bm-review-status{padding:5px 10px;border-radius:999px;background:#ece7df;font-size:.75rem;font-weight:800;text-transform:capitalize}.bm-review-status-approved{background:#dff1e4;color:#24643a}.bm-review-status-rejected{background:#f8e1dc;color:#8a3024}.bm-review-status-pending{background:#fff0bd;color:#705315}.bm-admin-review-copy{margin:0 0 16px;padding:15px 17px;border-left:4px solid #c5aa6b;border-radius:0 10px 10px 0;background:#faf7f0;white-space:pre-wrap}.bm-admin-review-actions{display:flex;flex-wrap:wrap;gap:10px}.bm-admin-review-actions .btn{margin:0}.bm-admin-review-actions .btn:disabled{opacity:.55;cursor:wait}

/* Featured community reviews */
.bm-gallery-images:has(.bm-community-review) {
  align-items: stretch;
}

.bm-community-review {
  appearance: none;
  border: 1px solid rgba(17, 35, 62, .1);
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  color: inherit;
  font: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bm-community-review:hover,
.bm-community-review:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(40, 30, 20, .16);
  border-color: rgba(17, 35, 62, .25);
  outline: none;
}

.bm-community-review img {
  object-fit: contain;
  background: #f8f5ef;
  padding: .8rem;
}

.bm-community-review-copy span {
  margin-top: .8rem;
  font-size: .82rem;
  font-weight: 700;
  color: #11233e;
}

.bm-community-review-stars {
  color: #a87527;
  letter-spacing: .08em;
}

.bm-community-review-modal {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: center;
}

.bm-community-review-modal img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 16px;
  background: #f8f5ef;
  padding: 1rem;
}

.bm-community-review-modal blockquote {
  margin: 1rem 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65;
}

.bm-community-review-kicker {
  margin: 0 0 .45rem;
  color: #687080;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 700px) {
  .bm-community-review-modal { grid-template-columns: 1fr; }
  .bm-community-review-modal img { max-height: 360px; }
}

/* Release 1.2: post-purchase notifications, history and growth operations. */
.bm-growth-notifications{display:grid;gap:14px}.bm-growth-notification-list{display:grid;gap:10px}.bm-growth-notification{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:15px 17px;border:1px solid #ddd5c9;border-radius:14px;background:#fff}.bm-growth-notification p{margin:2px 0;color:#625b52}.bm-growth-notification small{color:#7b7368}.bm-growth-notification-dot{width:11px;height:11px;border-radius:50%;background:#8a6517}.bm-growth-notification-success .bm-growth-notification-dot{background:#2f7d4c}.bm-growth-notification-action{border-color:#d7ad66;background:#fffaf0}.bm-growth-notification-action .bm-growth-notification-dot{background:#b36a12}.bm-growth-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.bm-growth-history-card{display:grid;gap:13px}.bm-growth-history-list{display:grid;gap:9px}.bm-growth-history-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px;border:1px solid #e3ddd3;border-radius:11px;background:#faf8f4}.bm-growth-history-row img,.bm-growth-history-placeholder{width:48px;height:58px;object-fit:cover;border-radius:6px;background:#eee8dc;display:grid;place-items:center}.bm-growth-history-row div{display:grid;gap:2px}.bm-growth-history-row small,.bm-growth-history-row>span{color:#756d62;font-size:.78rem}.bm-referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;margin-top:12px}.bm-referral-stats span{display:grid;gap:1px;padding:9px;border-radius:9px;background:#f6f1e8;text-align:center}.bm-referral-stats strong{font-size:1rem}.bm-referral-stats small{font-size:.72rem;color:#6f675c}.bm-referral-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.bm-growth-review-item-rich{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px}.bm-growth-review-item-rich>img{width:92px;height:118px;border-radius:9px;object-fit:cover}.bm-growth-review-meta{font-size:.82rem;color:#756d62}.bm-admin-growth-overview{display:grid;gap:18px;margin:20px 0 28px}.bm-admin-growth-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.bm-admin-growth-stats article{display:grid;gap:3px;padding:16px;border:1px solid #ddd5c9;border-radius:13px;background:#fff}.bm-admin-growth-stats span{font-size:.78rem;color:#726a60}.bm-admin-growth-stats strong{font-size:1.45rem}.bm-admin-growth-queues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bm-admin-queue-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e6e0d6;color:inherit;text-decoration:none}.bm-admin-queue-row:last-child{border-bottom:0}.bm-admin-queue-row small{text-transform:capitalize;color:#756d62}.bm-admin-queue-empty{color:#756d62}
@media(max-width:760px){.bm-growth-notification{grid-template-columns:auto minmax(0,1fr)}.bm-growth-notification .btn{grid-column:2}.bm-growth-history-grid,.bm-admin-growth-queues{grid-template-columns:1fr}.bm-referral-share-grid{grid-template-columns:1fr}.bm-growth-review-item-rich{grid-template-columns:70px minmax(0,1fr)}.bm-growth-review-item-rich>img{width:70px;height:92px}}


/* Dashboard history UI tidy — July 2026 */
.bm-growth-history-grid {
  align-items: stretch;
  margin-top: 22px;
}

.bm-growth-history-card {
  overflow: hidden;
  padding: 0;
  gap: 0;
  border: 1px solid #ded6ca;
  background: #fff;
}

.bm-growth-history-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e8e1d7;
  background: #faf8f4;
}

.bm-growth-history-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eee5d7;
  color: #6e5422;
  font-size: 1.1rem;
  font-weight: 700;
}

.bm-growth-history-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.bm-growth-history-head p {
  margin: 2px 0 0;
  color: #756d62;
  font-size: .82rem;
}

.bm-growth-history-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: #2e2e2e;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}

.bm-growth-history-list {
  gap: 0;
}

.bm-growth-history-row {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid #eee8df;
  border-radius: 0;
  background: #fff;
}

.bm-growth-history-row:last-child {
  border-bottom: 0;
}

.bm-growth-history-cover {
  width: 58px;
  height: 72px;
}

.bm-growth-history-row img,
.bm-growth-history-placeholder {
  width: 58px;
  height: 72px;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(46, 46, 46, .11);
}

.bm-growth-history-copy {
  align-content: center;
  min-width: 0;
}

.bm-growth-history-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
}

.bm-growth-history-copy span {
  color: #4f4941;
  font-size: .82rem;
}

.bm-growth-history-copy small {
  color: #7a7166;
  font-size: .76rem;
}

.bm-growth-history-status {
  align-self: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f0ece5;
  color: #5f574d;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  text-transform: capitalize;
  white-space: nowrap;
}

.bm-growth-history-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 122px;
  padding: 24px 20px;
}

.bm-growth-history-empty > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f2ede5;
  color: #8b7651;
  font-size: 1.2rem;
}

.bm-growth-history-empty strong {
  display: block;
  margin-bottom: 3px;
}

.bm-growth-history-empty p {
  margin: 0;
  color: #756d62;
  font-size: .84rem;
}

@media (max-width: 520px) {
  .bm-growth-history-head {
    padding: 16px;
  }

  .bm-growth-history-row {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 13px 15px;
  }

  .bm-growth-history-cover,
  .bm-growth-history-row img,
  .bm-growth-history-placeholder {
    width: 50px;
    height: 63px;
  }

  .bm-growth-history-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}


/* Dashboard notifications accordion — July 2026 */
.bm-growth-notifications-accordion {
  margin-top: 22px;
  border: 1px solid #ddd5c9;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.bm-growth-notifications-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 19px;
  cursor: pointer;
  list-style: none;
  background: #faf8f4;
}

.bm-growth-notifications-summary::-webkit-details-marker { display: none; }

.bm-growth-notifications-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bm-growth-notifications-summary-copy strong {
  font-size: 1.05rem;
  color: #2f2b26;
}

.bm-growth-notifications-summary-copy small {
  color: #756d62;
  font-size: .8rem;
}

.bm-growth-notifications-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5f513d;
  font-weight: 700;
  white-space: nowrap;
}

.bm-growth-notifications-toggle::after {
  content: '⌄';
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .2s ease;
}

.bm-growth-notifications-accordion[open] .bm-growth-notifications-toggle::after {
  transform: rotate(180deg);
}

.bm-growth-notifications-accordion[open] .bm-growth-notifications-toggle {
  font-size: 0;
}

.bm-growth-notifications-accordion[open] .bm-growth-notifications-toggle::before {
  content: 'Hide updates';
  font-size: .9rem;
}

.bm-growth-notifications-accordion .bm-growth-notification-list {
  padding: 14px;
  border-top: 1px solid #e7e0d5;
}

@media (max-width: 620px) {
  .bm-growth-notifications-summary {
    align-items: flex-start;
    padding: 15px;
  }

  .bm-growth-notifications-toggle {
    font-size: .82rem;
  }
}

/* =========================
   RELEASE 2 — ADMIN REPORTS
========================= */
.bm-admin-report-width { max-width: 1440px; }
.bm-report-heading { align-items: flex-end; gap: 24px; }
.bm-report-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-report-filters { margin-bottom: 22px; padding: 22px; }
.bm-report-preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bm-report-preset { appearance: none; border: 1px solid #d8cdbb; border-radius: 999px; background: #fff; color: #2e2e2e; padding: 9px 15px; font: inherit; font-weight: 700; cursor: pointer; }
.bm-report-preset:hover, .bm-report-preset.selected { background: #2e2e2e; border-color: #2e2e2e; color: #fff; }
.bm-report-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; gap: 14px; align-items: end; }
.bm-report-filter-grid label { display: grid; gap: 7px; color: #5f584f; font-size: .9rem; font-weight: 700; }
.bm-report-filter-grid input, .bm-report-filter-grid select { width: 100%; min-height: 46px; border: 1px solid #d8cdbb; border-radius: 10px; background: #fff; color: #2e2e2e; padding: 10px 12px; font: inherit; }
.bm-report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.bm-report-metric { min-width: 0; padding: 20px; border: 1px solid #e3d9c9; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(47, 40, 31, .05); }
.bm-report-metric span { display: block; margin-bottom: 7px; color: #776e62; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.bm-report-metric strong { display: block; overflow-wrap: anywhere; color: #2e2e2e; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.1; }
.bm-report-metric small { display: block; margin-top: 8px; color: #756d63; }
.bm-report-chart-grid, .bm-report-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.bm-report-panel { min-width: 0; padding: 22px; }
.bm-report-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.bm-report-panel-heading span { display: block; margin-bottom: 4px; color: #8b7254; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bm-report-panel-heading h2 { margin: 0; font-size: 1.25rem; }
.bm-report-panel-heading small { max-width: 220px; color: #786f64; text-align: right; }
.bm-report-chart { min-height: 260px; overflow-x: auto; }
.bm-report-chart svg { display: block; width: 100%; min-width: 540px; height: auto; }
.bm-report-chart-empty { display: grid; min-height: 260px; place-items: center; color: #7b7369; text-align: center; }
.bm-chart-grid { stroke: #e8e0d4; stroke-width: 1; }
.bm-chart-axis, .bm-chart-legend, .bm-chart-product-label, .bm-chart-value { fill: #6c645b; font-family: Arial, sans-serif; font-size: 11px; }
.bm-chart-product-label { fill: #3f3932; font-size: 12px; font-weight: 700; }
.bm-chart-value { fill: #3f3932; font-weight: 700; }
.bm-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bm-chart-line-revenue { stroke: #2e2e2e; }
.bm-chart-line-profit { stroke: #9c7451; }
.bm-chart-dot-revenue { fill: #2e2e2e; }
.bm-chart-dot-profit { fill: #9c7451; }
.bm-chart-bar { fill: #9c7451; }
.bm-report-table-wrap { width: 100%; overflow-x: auto; }
.bm-report-order-table-wrap { max-height: 620px; overflow: auto; }
.bm-report-table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: .9rem; }
.bm-report-orders-table { min-width: 1040px; }
.bm-report-table th, .bm-report-table td { padding: 12px 10px; border-bottom: 1px solid #ece4d8; text-align: left; vertical-align: top; white-space: nowrap; }
.bm-report-table th { position: sticky; top: 0; z-index: 1; background: #fff; color: #756c61; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.bm-report-table td small { display: block; max-width: 220px; margin-top: 3px; overflow: hidden; color: #7d7469; text-overflow: ellipsis; }
.bm-report-table a { color: #2e2e2e; font-weight: 800; }
.bm-report-status { display: inline-flex; border-radius: 999px; background: #f1ece4; padding: 5px 9px; color: #5b534a; font-size: .76rem; font-weight: 800; }
.bm-report-empty-cell { padding: 30px !important; color: #7b7369; text-align: center !important; }
@media (max-width: 1050px) {
  .bm-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bm-report-heading { align-items: flex-start; }
  .bm-report-heading-actions { width: 100%; }
  .bm-report-heading-actions .btn { flex: 1; }
  .bm-report-chart-grid, .bm-report-detail-grid { grid-template-columns: 1fr; }
  .bm-report-filter-grid { grid-template-columns: 1fr; }
  .bm-report-filter-grid .btn { width: 100%; }
  .bm-report-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bm-report-metric { padding: 16px; }
}
@media (max-width: 460px) {
  .bm-report-metrics { grid-template-columns: 1fr; }
}