/* Catalog hero — trimmed down so the book fits on screen below it */
.catalog-hero { padding: 44px 0 32px; }
.catalog-hero h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.catalog-hero p.lead { margin: 10px auto 20px; }
.catalog-hero .btn { margin-top: 0; }

/* Flipbook */
.catalog-section { padding: 24px 0 40px; }

.book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.book-nav {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--cream-dark);
  background: var(--white);
  color: var(--green-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.book-nav:hover { background: var(--cream); border-color: var(--green); }
.book-nav:disabled { opacity: 0.3; cursor: default; }
.book-nav:disabled:hover { background: var(--white); border-color: var(--cream-dark); }

.book-stage {
  position: relative;
  height: min(72vh, 680px);
  width: auto;
  max-width: 78vw;
  aspect-ratio: 5.5 / 8.5;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,30,20,0.05), 0 24px 48px -28px rgba(20,30,20,0.35);
  overflow: hidden;
}

.book-pages { position: absolute; inset: 0; }

.leaf {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: 9% 8%;
  overflow: hidden;
}
.leaf.active { opacity: 1; pointer-events: auto; z-index: 2; }

.leaf-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
}

/* Cover: plain white, big logo, framed, closing line */
.leaf-cover {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.leaf-cover-frame { position: absolute; inset: 5%; border: 1px solid rgba(45,106,79,0.35); }
.leaf-logo { width: 52%; margin: 0 auto 16px; position: relative; z-index: 1; }
.leaf-tagline {
  position: absolute;
  left: 0; right: 0; bottom: 12%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green);
  z-index: 1;
}

/* Section divider: soft, warm gradient — not a heavy block */
.leaf-divider {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.leaf-divider h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--green-dark);
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  margin: 0;
  text-wrap: balance;
}
.leaf-sprig { margin: 14px auto 0; opacity: 0.9; width: 40%; }
.leaf-sprig svg { width: 100%; height: auto; display: block; }

/* Back cover: plain white, brand + contact details */
.leaf-back {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.leaf-brand-name {
  font-family: Georgia, serif;
  color: var(--green-dark);
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.leaf-rule { width: 28px; height: 1px; background: #cdbfa0; margin: 0 auto 10px; }
.leaf-contact {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.9;
}

/* About Us page */
.leaf-about h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--green-dark);
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  margin: 4px 0 8px;
}
.leaf-intro {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 10px;
}
.principles { flex: 1; overflow-y: auto; min-height: 0; }
.principle { padding: 7% 0; }
.principle-name { font-family: Georgia, serif; color: var(--green-dark); font-size: 0.85rem; margin-bottom: 2px; }
.principle-desc { font-size: 0.7rem; color: var(--ink-soft); line-height: 1.35; }

/* Product pair pages: two products per page, alternating image side, borderless */
.leaf-product { padding: 7% 6%; }
.leaf-kicker {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.68rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4%;
}
.leaf-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.leaf-row { display: flex; align-items: center; gap: 6%; padding: 6% 0; }
.leaf-row.reverse { flex-direction: row-reverse; }
.leaf-img-box {
  flex: 0 0 44%;
  aspect-ratio: 0.83;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaf-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.leaf-detail { flex: 1; min-width: 0; }
.leaf-row.reverse .leaf-detail { text-align: right; }
.leaf-detail h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--green-dark);
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  margin: 0 0 4px;
  text-wrap: balance;
  line-height: 1.15;
}
.leaf-sku {
  font-size: 0.62rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.leaf-dims {
  font-size: 0.62rem;
  color: #8b9587;
  font-style: italic;
  margin-bottom: 4px;
}
.leaf-desc {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Controls below book */
.book-controls {
  max-width: 460px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.book-counter {
  font-family: Georgia, serif;
  color: var(--green-dark);
  font-size: 0.85rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
#pageSlider {
  flex: 1;
  accent-color: var(--green);
}

@media (max-width: 700px) {
  .book { gap: 10px; }
  .book-nav { width: 40px; height: 40px; font-size: 1.2rem; }
  .book-stage { height: auto; width: 100%; max-width: 340px; }
  .book-controls { max-width: 340px; }
}