/* ==========================================================================
   ATELIER & TOME — CINEMATIC 3D SHOWCASE & CONVERSION FUNNEL
   Novel: "HOPE you will come" by Kiran Kumar
   Full Restored & Reconstructed Stylesheet
   ========================================================================== */

:root {
  /* --- 1. Clean White & Celestial Atmosphere Palette (Light Mode) --- */
  --bg-deep: #ffffff;
  --bg-surface: #f4f8fc;
  --bg-card: rgba(255, 255, 255, 0.92);

  /* --- 2. High-Contrast Typography --- */
  --text-primary: #0f1e36;
  --text-secondary: #3b5275;
  --text-muted: #6b82a3;

  /* --- 3. Signature Book Colors --- */
  --book-blue: #1a3d75;
  --glow-heart: #208bdf;
  --frost-blue: #cde1f7;
  --gold-accent: #cfa86e;

  /* --- 4. Gradients, Borders & Glassmorphism --- */
  --gradient-title: linear-gradient(135deg, #0f1e36 0%, #1a3d75 60%, #208bdf 100%);
  --gradient-cta: linear-gradient(135deg, #208bdf 0%, #1555a6 100%);
  --gradient-gold: linear-gradient(135deg, #dfc296 0%, #b88f50 100%);
  --border-subtle: rgba(205, 225, 247, 0.7);
  --border-glow: rgba(32, 139, 223, 0.35);
  --box-glow: 0 15px 35px rgba(26, 61, 117, 0.08);
  --box-elevation: 0 20px 45px rgba(15, 30, 54, 0.1);

  /* --- 5. Typography Hierarchy Tokens --- */
  --font-serif: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* --- Global Dynamic Typography Variables --- */
  --font-family-heading: 'Cormorant Garamond', serif;
  --font-family-body: 'Inter', sans-serif;
  --font-family-folio: 'Cormorant Garamond', serif;

  --size-nav: 0.95rem;
  --size-hero-title: clamp(2.5rem, 5vw, 4.5rem);
  --size-hero-tagline: 1.1rem;
  --size-folio-body: 1rem;
  --size-synopsis-heading: 2.2rem;
  --size-synopsis-body: 1.05rem;
  --size-author-body: 1rem;
  --size-store-price: 1.75rem;

  /* --- 6. 3D Book Geometry Dimensions --- */
  --book-width: 320px;
  --book-height: 480px;
  --book-radius: 4px;
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* ==========================================================================
   AMBIENT BACKGROUND CANVAS
   ========================================================================== */
#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   NAVIGATION HEADER
   ========================================================================== */
.luxury-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.25rem 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.luxury-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.85rem 4vw;
  box-shadow: 0 4px 25px rgba(15, 30, 54, 0.05);
}

.header-left {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

.brand-logo {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.25s ease;
}

.brand-logo:hover {
  opacity: 0.85;
}

.brand-crest {
  color: var(--glow-heart);
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(32, 139, 223, 0.5));
}

.brand-custom-logo {
  display: inline-flex;
  align-items: center;
}

.brand-custom-logo img,
.brand-custom-logo svg,
.custom-brand-logo {
  max-height: 32px;
  height: auto;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.custom-brand-logo-svg {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.custom-brand-logo-svg svg {
  max-height: 32px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

/* Double the size of the logo in the nav bar for desktop version alone */
@media (min-width: 769px) {

  .brand-custom-logo img,
  .brand-custom-logo svg,
  .custom-brand-logo,
  #main-brand-logo-img,
  .custom-brand-logo-svg svg {
    max-height: 96px !important;
    max-width: 560px !important;
  }

  .luxury-header .header-left {
    align-items: center;
  }
}

.brand-tagline {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
}

.header-nav {
  display: flex;
  gap: 2.2rem;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.25s ease, transform 0.25s ease;
  position: relative;
  padding: 0.2rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--glow-heart);
  transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--book-blue);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.action-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 30px;
  padding: 0.55rem 1.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.action-btn:hover {
  border-color: var(--glow-heart);
  color: var(--glow-heart);
  box-shadow: 0 0 12px rgba(32, 139, 223, 0.2);
}

.audio-btn.active {
  border-color: var(--glow-heart);
  background: rgba(32, 139, 223, 0.08);
  color: var(--book-blue);
}

.audio-icon {
  font-size: 0.85rem;
}

.cta-btn {
  background: var(--gradient-cta);
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 14px rgba(32, 139, 223, 0.3);
}

.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(32, 139, 223, 0.45);
}

.btn-arrow {
  transition: transform 0.25s ease;
}

.action-btn:hover .btn-arrow,
.submit-sample-btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   SECTION 1: HERO SCROLL WRAPPER & PINNED STAGE
   ========================================================================== */
.hero-scroll-wrapper {
  position: relative;
  height: 550vh;
  width: 100%;
}

.hero-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
}

.stage-lighting {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(205, 225, 247, 0.45) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   3D BOOK PERSPECTIVE ARCHITECTURE
   ========================================================================== */
.book-scene-viewport {
  position: relative;
  width: var(--book-width);
  height: var(--book-height);
  perspective: 2000px;
  perspective-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.book-shadow-cast,
#book-shadow-cast {
  position: absolute;
  bottom: -40px;
  left: calc(50% - (var(--book-width) * 1.8) / 2);
  width: calc(var(--book-width) * 1.8);
  height: 48px;
  background: radial-gradient(ellipse at center, rgba(15, 30, 54, 0.28) 0%, rgba(15, 30, 54, 0.08) 50%, transparent 72%) !important;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(14px);
  will-change: transform, opacity;
}

.book-world {
  position: relative;
  width: var(--book-width);
  height: var(--book-height);
  transform-style: preserve-3d;
  will-change: transform;
}

.book-object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* --- FIX FOR CENTER AXIS LINE / SPINE PROTRUSION BUG --- */
.book-spine,
.spine-hinge,
.spine-rib {
  display: none !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  top: 0 !important;
}

/* Maintain 3D nesting throughout all parents */
.book-world,
.book-object {
  transform-style: preserve-3d !important;
}

/* --- 1. Realistic Left Spine (24px deep) --- */
.book-spine-solid {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 100%;
  transform-origin: left center;
  transform: translateZ(-12px) rotateY(-90deg);
  background: linear-gradient(to right, #0d1e38, #162f55 50%, #0d1e38);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  z-index: 15;
  pointer-events: none;
  border-radius: 2px;
  transform-style: preserve-3d;
  will-change: opacity, transform;
}

.spine-face-front,
.spine-face-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.spine-title-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #cde1f7;
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

/* --- 2. Stacked Pages Block (Gilded / Parchment Texture) --- */
.book-page-core {
  position: absolute;
  inset: 4px;
  /* Sits 4px recessed inside the cover rim */
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: opacity, transform;
}

.core-edge {
  position: absolute;
  background: repeating-linear-gradient(to bottom,
      #fcfbf7 0px,
      #f3efe3 1px,
      #e7e0cc 2px);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
}

/* Right Outer Edge */
.core-right {
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  transform-origin: right center;
  transform: rotateY(90deg) translateZ(-2px);
}

/* Top Cut Edge */
.core-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  transform-origin: top center;
  transform: rotateX(90deg) translateZ(-2px);
}

/* Bottom Cut Edge */
.core-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  transform-origin: bottom center;
  transform: rotateX(-90deg) translateZ(-2px);
}

/* --- 3D PAGE LEAVES ARCHITECTURE --- */
.page-leaf,
#leaf-cover,
.leaf-cover {
  position: absolute;
  inset: 0;
  top: 0 !important;
  bottom: 0 !important;
  width: 100%;
  height: 100%;
  transform-origin: left center !important;
  transform-style: preserve-3d;
  border-radius: 0 var(--book-radius) var(--book-radius) 0;
  will-change: transform;
}

/* --- LEAF STACKING HIERARCHY (PHYSICAL SPREAD LAYERING) --- */
#leaf-back-cover {
  z-index: 1;
}

#leaf-3 {
  z-index: 10;
}

#leaf-2 {
  z-index: 20;
}

#leaf-1 {
  z-index: 30;
}

#leaf-cover {
  z-index: 40;
}

/* Dynamic stacking hierarchy once turned onto the left stack */
#leaf-cover.turned {
  z-index: 2;
}

#leaf-1.turned {
  z-index: 4;
}

#leaf-2.turned {
  z-index: 6;
}

#leaf-3.turned {
  z-index: 8;
}

#leaf-back-cover.turned {
  z-index: 50;
}

/* Active turning leaf priority */
.page-leaf.turning-active {
  z-index: 60 !important;
}

.page-leaf,
.leaf-face,
.leaf-front,
.leaf-back {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

/* Keep 3D book core and spine visible from all angles without culling */
.book-spine-solid,
.book-page-core,
.core-edge,
.core-right,
.core-top,
.core-bottom {
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform-style: preserve-3d !important;
}

.leaf-face {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
}

.leaf-front {
  transform: rotateY(0deg) translateZ(0.5px);
  background: #fbfbfa;
  box-shadow: inset 12px 0 24px rgba(0, 0, 0, 0.04);
}

.leaf-back {
  transform: rotateY(180deg) translateZ(0.5px) !important;
  background: #fbfbfa;
  border-radius: var(--book-radius) 0 0 var(--book-radius);
  box-shadow: inset -12px 0 24px rgba(0, 0, 0, 0.04);
}

/* Dynamic Page Shading Layers */
.leaf-shadow-front,
.leaf-shadow-back {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 15 !important;
  opacity: 0;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: opacity;
}

.leaf-shadow-front {
  background: linear-gradient(to right, rgba(15, 30, 54, 0.45) 0%, rgba(15, 30, 54, 0.15) 30%, transparent 70%);
}

.leaf-shadow-back {
  transform: rotateY(180deg);
  background: linear-gradient(to left, rgba(15, 30, 54, 0.45) 0%, rgba(15, 30, 54, 0.15) 30%, transparent 70%);
}

/* Guard against unwanted pseudo-elements casting angular shadows */
.leaf-cover::before,
.leaf-cover::after,
.leaf-back::before,
.leaf-back::after,
.book-world::before,
.book-world::after {
  display: none !important;
  content: none !important;
}

/* Hardcover Front Leaf */
.cover-front-face {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  border-radius: 0 var(--book-radius) var(--book-radius) 0;
  background: #1a3d75;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 20px 40px rgba(15, 30, 54, 0.25);
}

.cover-artwork-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-hardcover-finish {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}

.cover-spine-edge-shadow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Inside Front Cover (Verso of Front Leaf) */
.inside-front-cover {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: #f4f8fc;
  border-radius: var(--book-radius) 0 0 var(--book-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem;
}

.marbled-endpaper {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 35%, rgba(32, 139, 223, 0.15), transparent 70%),
    radial-gradient(ellipse at 75% 75%, rgba(26, 61, 117, 0.12), transparent 65%);
  pointer-events: none;
}

.bookplate-ex-libris {
  display: none !important;
  position: relative;
  z-index: 2;
  border: 1px solid var(--border-subtle);
  padding: 1.8rem 1.4rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 15px rgba(26, 61, 117, 0.05);
  border-radius: 4px;
}

.bookplate-border {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.bp-crest {
  color: var(--glow-heart);
  font-size: 1.2rem;
}

.bp-title {
  font-family: var(--font-serif);
  letter-spacing: 0.22em;
  font-size: 0.85rem;
  color: var(--book-blue);
  font-weight: 700;
}

.bp-line {
  width: 40px;
  height: 1px;
  background: var(--border-subtle);
  margin: 0.2rem 0;
}

.bp-provenance {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.bp-num {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Back Cover Flap */
.leaf-back-cover .leaf-back,
.leaf-back-cover .book-back-cover {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: #0d1a2d;
  border: 1px solid #1a3d75;
  border-radius: var(--book-radius) 0 0 var(--book-radius);
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

.back-cover-artwork-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.back-spine-shadow {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 18px !important;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 2;
}

.cover-texture.leather-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #152744 0%, #0a1424 100%);
  pointer-events: none;
}

.foil-border {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(205, 225, 247, 0.28);
  pointer-events: none;
}

.back-insignia {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--frost-blue);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.insignia-symbol {
  font-size: 2rem;
  color: var(--glow-heart);
  filter: drop-shadow(0 0 10px rgba(32, 139, 223, 0.7));
}

.insignia-text {
  font-size: 0.65rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   INTERIOR PAGE EDITORIAL CONTENT & TYPOGRAPHY
   ========================================================================== */
.parchment-texture {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(245, 246, 242, 0.95) 100%);
  pointer-events: none;
}

.page-content-wrapper {
  position: relative;
  z-index: 2;
  padding: 1.6rem 1.6rem 3.6rem !important;
  /* +40px bottom padding so text never touches bottom edge */
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #1a273b;
  box-sizing: border-box !important;
}

.spread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: #7b94b5;
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.header-rule {
  color: var(--glow-heart);
  font-size: 0.7rem;
}

.page-title,
.book-chapter-title,
.ornate-chapter-head {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.body-text {
  font-family: var(--font-body);
  font-size: 0.65rem !important;
  /* Scaled to 70% of baseline (0.92rem * 0.70 ≈ 0.644rem) */
  line-height: 1.5 !important;
  /* Line height 1.5 for comfortable margins */
  color: #2b3e5a;
  margin-bottom: 0.35rem !important;
}

.body-text-narrow {
  font-family: var(--font-body);
  font-size: 0.62rem !important;
  line-height: 1.5 !important;
  color: #3b5275;
  text-align: center;
}

.page-gutter-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  pointer-events: none;
  z-index: 10;
}

.right-gutter {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.07), transparent);
}

.left-gutter {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.07), transparent);
}

/* Leaf 1 Content Elements */
.ornate-chapter-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  color: var(--book-blue);
}

.head-fleuron {
  font-size: 1.1rem;
  color: var(--glow-heart);
}

.dropcap-paragraph {
  display: block;
  margin-bottom: 0.8rem;
}

.illuminated-dropcap {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0.8;
  float: left;
  margin-right: 0.45rem;
  margin-top: 0.15rem;
  color: var(--book-blue);
  font-weight: 700;
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.printer-mark {
  margin-top: auto;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.dedication-block {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

.latin-quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--book-blue);
  font-weight: 600;
}

.latin-trans {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.flourish-divider {
  width: 80px;
  margin: 1.2rem auto;
  color: var(--glow-heart);
}

.flourish-svg {
  width: 100%;
  height: 18px;
}

/* Leaf 2 Content Elements */
.astronomy-chart,
.botanical-diagram {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

.engraving-svg {
  width: 100%;
  max-height: 110px;
  color: var(--book-blue);
}

.illuminated-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.table-heading {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--book-blue);
  text-align: center;
  margin-bottom: 1rem;
}

.ephemeris-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.e-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  border-bottom: 1px dotted rgba(26, 61, 117, 0.2);
  padding-bottom: 0.25rem;
}

.e-star {
  font-family: var(--font-serif);
  color: var(--book-blue);
}

.e-val {
  color: var(--text-secondary);
}

.archival-script-sm {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* Leaf 3 Content Elements */
.quote-box {
  margin-top: auto;
  padding: 0.8rem;
  background: rgba(205, 225, 247, 0.25);
  border-left: 2px solid var(--glow-heart);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--book-blue);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.quote-box .quote-mark {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--glow-heart);
  line-height: 0.8;
}

.engraving-full {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vintage-frame {
  border: 1px solid var(--border-subtle);
  padding: 0.4rem;
  width: 100%;
}

.frame-inner {
  border: 1px dashed var(--border-subtle);
  padding: 1.2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.frame-decor {
  color: var(--glow-heart);
  font-size: 1.2rem;
}

.frame-inner h4 {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--book-blue);
}

.archival-script {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.spec-grid {
  display: flex;
  gap: 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.spec-grid span {
  font-weight: 600;
  color: var(--book-blue);
}

/* Colophon & Wax Seal (Base Right Spread) */
.illuminated-colophon {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0;
}

.colophon-crest {
  font-size: 1.8rem;
  color: var(--book-blue);
  margin-bottom: 0.4rem;
}

.colophon-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--book-blue);
  margin-bottom: 0.6rem;
}

.colophon-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
}

.wax-seal-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wax-seal {
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 35% 35%, #b32a2a, #781212);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(120, 18, 18, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.25);
  position: relative;
}

.seal-monogram {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: #f7d598;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.seal-caption {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.seal-serial {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--book-blue);
  font-weight: 600;
}

.seal-date {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ==========================================================================
   STORY OVERLAYS (STAGES 1 TO 3)
   ========================================================================== */
.story-overlays-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.story-overlay {
  position: absolute;
  pointer-events: none;
}

/* Stage 1: Left Showcase Narrative */
#story-overlay-1 {
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: 480px;
  z-index: 25;
}

.overlay-badge {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--glow-heart);
  font-weight: 600;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
}

.hero-title .title-sub {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 5.5vw, 4.8rem);
  line-height: 0.95;
  color: var(--book-blue);
  letter-spacing: 0.06em;
  filter: drop-shadow(0 2px 8px rgba(26, 61, 117, 0.1));
}

.hero-title .title-main {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  letter-spacing: 0.2em;
  color: var(--text-primary);
  margin-bottom: 1.3rem;
  font-weight: 600;
}

.hero-description {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.8rem;
}

.hero-meta {
  display: flex;
  gap: 1.2rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  align-items: center;
}

.meta-divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
}

.meta-label {
  display: block;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--book-blue);
}

.meta-val {
  color: var(--text-primary);
  font-weight: 500;
}

/* Mouse Scroll Prompt */
.scroll-prompt-indicator {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.2rem;
  color: var(--glow-heart);
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

.prompt-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid var(--glow-heart);
  border-radius: 12px;
  display: inline-flex;
  justify-content: center;
  padding-top: 5px;
}

.prompt-wheel {
  width: 3.5px;
  height: 7px;
  background: var(--glow-heart);
  border-radius: 2px;
  animation: mouseWheelScrub 1.8s infinite ease-in-out;
}

@keyframes mouseWheelScrub {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  60% {
    transform: translateY(9px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* Stage 2: 7-Folio Prologue Reader Card */
.folio-card,
.stage-text-overlay {
  max-width: 460px !important;
  line-height: 1.65 !important;
  font-size: 0.95rem !important;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(190, 168, 120, 0.32);
  border-radius: 16px;
  padding: 1.6rem 2rem;
  box-shadow: 0 16px 40px rgba(15, 30, 54, 0.1);
  pointer-events: auto;
  z-index: 25;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 1. REMOVED LEFT FLOATING STAGE CARD & PREVIEW OVERLAYS */
.stage-text-overlay,
.folio-preview-left,
.hero-story-card,
.prologue-sidebar-card,
#hero-story-card,
.folio-card,
#story-overlay-2 {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. REMOVED TOP FOLIO NAVIGATION & STAGE GUIDE */
.folio-guide-nav,
.chapter-step-indicator,
.stage-timeline-nav,
#stage-progress-bar,
.hud-stage-label,
#hud-stage-label,
.hud-timeline-container,
#story-overlay-3,
#page-chapter-indicator,
.page-chapter-indicator {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 5. REMOVED RATING / REVIEWS SECTION */
#ratings-section,
.book-ratings-container,
.reviews-section,
#book-reviews,
.reader-reviews,
#social-proof,
.social-proof-banner {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.chapter-pip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s ease;
  pointer-events: auto;
}

.pip-num {
  font-family: var(--font-serif);
  font-weight: 700;
}

.chapter-pip:hover {
  color: var(--glow-heart);
}

.chapter-pip.active {
  color: var(--book-blue);
  font-weight: 700;
}

.chapter-pip.active .pip-num {
  color: var(--glow-heart);
}

.pip-line {
  width: 25px;
  height: 1px;
  background: var(--border-subtle);
}

/* ==========================================================================
   SECTION 2: FINAL STAGE SPLIT LAYOUT (BOOK LEFT, FORM RIGHT)
   ========================================================================== */
/* Container holding the 3D book canvas and the excerpt form */
.book-stage-wrapper,
.stage-final-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  /* Vertically centers both columns */
  justify-content: center !important;
  gap: 3rem !important;
  min-height: 85vh !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 10;
}

/* Left Column: 3D Book Canvas */
.book-canvas-container,
#webgl-container {
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 550px !important;
  position: relative !important;
}

/* Right Column: Lead Form Card */
#story-overlay-form,
.lead-capture-overlay {
  flex: 1 1 420px !important;
  max-width: 440px !important;
  margin: 0 !important;
  /* Remove excessive top margins/padding */
  align-self: center !important;
  /* Keep aligned with the vertical midpoint of the book */
  transform: none !important;
  /* Clear any translateY that pushes it down */
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

#story-overlay-form .lead-capture-card,
#story-overlay-form #excerpt-access-card,
#story-overlay-form .locked-in-shadows-box {
  width: 100%;
  opacity: 1;
  pointer-events: auto;
}



.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--box-elevation);
  border-radius: 18px;
  padding: 2.4rem 2.2rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
}

.lead-capture-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: 0.08em;
  color: var(--book-blue);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.lead-capture-description {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

#lead-capture-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.lead-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.lead-field label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--book-blue);
  font-weight: 600;
}

.custom-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: all 0.3s ease;
}

.custom-input:focus {
  border-color: var(--glow-heart);
  box-shadow: 0 0 12px rgba(32, 139, 223, 0.28);
}

.custom-input::placeholder {
  color: #9cb2cc;
}

.submit-sample-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  background: var(--gradient-cta);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  padding: 1rem 1.4rem;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  margin-top: 0.4rem;
  box-shadow: 0 6px 22px rgba(32, 139, 223, 0.35);
  transition: all 0.3s ease;
}

.submit-sample-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(32, 139, 223, 0.48);
}

.lead-trust-badge {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ==========================================================================
   HERO HUD CONTROLLER (SCRUB TRACKER)
   ========================================================================== */
.hero-hud-controls {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  z-index: 30;
  width: 90%;
  max-width: 620px;
  pointer-events: auto;
}

.hud-timeline-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.hud-stage-label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
}

.hud-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(205, 225, 247, 0.8);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.hud-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--gradient-cta);
  border-radius: 3px;
  transition: width 0.05s linear;
}

.hud-checkpoint {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--glow-heart);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background 0.2s ease;
}

.hud-checkpoint:hover {
  transform: translate(-50%, -50%) scale(1.6);
  background: var(--glow-heart);
}

.hud-quick-actions {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.hud-jump-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hud-jump-btn:hover {
  color: var(--glow-heart);
  transform: scale(1.05);
}

.hud-page-count {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--book-blue);
  font-weight: 700;
}

/* ==========================================================================
   SECTION 3: QUICK SOCIAL PROOF
   ========================================================================== */
.social-proof-banner {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 5rem 4vw;
  position: relative;
  z-index: 10;
}

.proof-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.proof-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 2.2rem 2rem;
  box-shadow: var(--box-glow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.proof-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(26, 61, 117, 0.12);
  border-color: var(--border-glow);
}

.stars-glow-wrapper {
  color: var(--glow-heart);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 10px rgba(32, 139, 223, 0.4);
}

.proof-stat-headline {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.proof-stat-number {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--book-blue);
  line-height: 1;
}

.proof-stat-denom {
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: 500;
}

.proof-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  margin-left: 0.4rem;
}

.proof-subtext {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-top: 0.6rem;
  line-height: 1.5;
}

.quote-mark {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--glow-heart);
  line-height: 0.8;
  margin-bottom: 0.3rem;
}

.editorial-quote {
  font-family: var(--font-body);
  font-size: 1.18rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: 0.8rem;
}

.quote-source {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--book-blue);
  font-weight: 700;
  text-transform: uppercase;
}

.metric-circle-badge {
  margin-bottom: 0.5rem;
}

.proof-metric-number {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--book-blue);
  line-height: 1;
}

.proof-metric-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
}

.proof-badge-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-top: 0.5rem;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.badge-symbol {
  color: var(--glow-heart);
}

.badge-divider {
  color: var(--border-subtle);
}

/* ==========================================================================
   SECTION 4: INSIDE THE STORY (SYNOPSIS & THEMES)
   ========================================================================== */
.book-themes-section {
  background: var(--bg-deep);
  padding: 7rem 4vw;
  position: relative;
  z-index: 10;
}

.themes-container {
  max-width: 1100px;
  margin: 0 auto;
}

.synopsis-kicker,
.author-kicker,
.reviews-kicker,
.order-kicker-badge {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--glow-heart);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.synopsis-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  line-height: 1.25;
  color: var(--book-blue);
  margin-bottom: 1.8rem;
  max-width: 900px;
  font-weight: 700;
}

.synopsis-narrative p {
  font-family: var(--font-body);
  font-size: 1.28rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 880px;
}

.story-spec-pills {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 2.4rem 0 4.2rem;
}

.story-spec-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 0.55rem 1.2rem;
  border-radius: 25px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.spec-pill-icon {
  color: var(--glow-heart);
}

.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.theme-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 2.4rem 2rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-card:hover {
  transform: translateY(-6px);
  border-color: var(--glow-heart);
  box-shadow: 0 16px 35px rgba(32, 139, 223, 0.12);
}

.theme-card-icon {
  font-size: 1.6rem;
  color: var(--glow-heart);
  margin-bottom: 1rem;
}

.theme-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--book-blue);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.theme-card-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ==========================================================================
   SECTION 5: ABOUT THE AUTHOR (KIRAN KUMAR)
   ========================================================================== */
.about-author-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 7rem 4vw;
  position: relative;
  z-index: 10;
}

.author-container {
  max-width: 1100px;
  margin: 0 auto;
}

.author-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4.5rem;
  align-items: center;
}

/* Ensure the wrapper does not clip the photo */
.author-portrait-frame,
.author-image-wrapper,
.author-photo-container {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--box-elevation);
  overflow: visible !important;
  height: auto !important;
  aspect-ratio: auto !important;
  /* Removes rigid aspect ratios that force cropping */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

/* Ensure the author photo shows the full subject (hands included) */
.author-portrait-img,
.author-image,
.author-portrait img,
.author-section img {
  width: 100% !important;
  max-width: 480px;
  /* Adjust to match your design layout */
  height: auto !important;
  max-height: 85vh;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  /* Shows the entire image without cutting off hands */
  object-position: center bottom !important;
  /* Prioritizes keeping lower body/hands visible */
  display: block;
  margin: 0 auto;
  border-radius: 16px;
}

.author-stat-badge {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  right: 1.4rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  text-align: center;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 15px rgba(15, 30, 54, 0.08);
}

.stat-badge-metric {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--book-blue);
  font-weight: 700;
}

.stat-badge-subtext {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.author-photo-quote {
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.55;
  display: flex;
  gap: 0.6rem;
}

.quote-symbol {
  color: var(--glow-heart);
  font-size: 2rem;
  line-height: 0.8;
}

.author-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  color: var(--book-blue);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.author-subtitle {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--glow-heart);
  margin-bottom: 1.9rem;
}

.author-bio-p {
  font-family: var(--font-body);
  font-size: 1.24rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1.3rem;
}

.author-signature-row {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
}

.author-signature {
  font-family: var(--font-body);
  font-size: 2.5rem;
  font-style: italic;
  color: var(--book-blue);
  letter-spacing: 0.02em;
}

.author-signature-tag {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: -0.2rem;
}

.author-socials {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.author-social-link {
  color: var(--text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  transition: color 0.25s ease;
}

.author-social-link:hover {
  color: var(--glow-heart);
}

.social-icon {
  color: var(--glow-heart);
}

/* ==========================================================================
   SECTION 6: REVIEWS & RATINGS
   ========================================================================== */
.reviews-section {
  background: var(--bg-deep);
  padding: 7rem 4vw;
  position: relative;
  z-index: 10;
}

.reviews-container {
  max-width: 1100px;
  margin: 0 auto;
}

.reviews-header-block {
  text-align: center;
  margin-bottom: 3.8rem;
}

.reviews-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  color: var(--book-blue);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.reviews-subtitle {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 2.2rem;
}

.rating-summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.8rem 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.8rem;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: var(--box-glow);
}

.rating-score-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rating-large-num {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--book-blue);
  line-height: 1;
}

.rating-stars-group {
  color: var(--glow-heart);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}

.rating-count-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.2rem;
}

.rating-breakdown-pills {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.breakdown-pill {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  padding: 0.45rem 0.95rem;
  border-radius: 25px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.review-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-5px);
  border-color: var(--glow-heart);
  box-shadow: 0 16px 35px rgba(26, 61, 117, 0.08);
}

.review-stars {
  color: var(--glow-heart);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.75rem;
}

.review-card-title {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--book-blue);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.review-card-body {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1.8rem;
}

.reviewer-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.2rem;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--frost-blue);
  color: var(--book-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.reviewer-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.reviewer-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ==========================================================================
   SECTION 7: FINAL PURCHASE CTA & FOOTER
   ========================================================================== */
.purchase-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 7rem 4vw 3.5rem;
  position: relative;
  z-index: 10;
}

.catalog-anchor-compat {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 1px;
}

.purchase-container {
  max-width: 1050px;
  margin: 0 auto;
}

.order-header-group {
  text-align: center;
  margin-bottom: 3.8rem;
}

.order-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  color: var(--book-blue);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.order-subhead {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-secondary);
}

.edition-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.2rem;
  align-items: stretch;
}

.edition-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 2.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--box-glow);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.edition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(26, 61, 117, 0.12);
}

.edition-card.featured {
  border-color: var(--glow-heart);
  box-shadow: 0 16px 45px rgba(32, 139, 223, 0.16);
  transform: scale(1.02);
}

.edition-card.featured:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 20px 50px rgba(32, 139, 223, 0.22);
}

.edition-badge {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 600;
}

.badge-popular {
  color: var(--glow-heart);
  font-weight: 700;
}

.edition-preview-row {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  margin-bottom: 1.6rem;
}

.edition-cover-thumb {
  width: 60px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(15, 30, 54, 0.18);
  flex-shrink: 0;
}

.edition-format-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--book-blue);
  font-weight: 700;
}

.edition-price {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.3rem;
}

.edition-price-alt {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 400;
}

.edition-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2.2rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.feature-bullet {
  color: var(--glow-heart);
  margin-right: 0.5rem;
}

.btn-order-primary {
  width: 100%;
  background: var(--gradient-cta);
  color: #ffffff;
  border: none;
  padding: 1.05rem 1.6rem;
  border-radius: 40px;
  font-size: 0.84rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(32, 139, 223, 0.38);
  transition: all 0.3s ease;
}

.btn-order-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(32, 139, 223, 0.52);
}

.btn-order-secondary {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--book-blue);
  padding: 1rem 1.6rem;
  border-radius: 40px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-order-secondary:hover {
  border-color: var(--glow-heart);
  color: var(--glow-heart);
  box-shadow: 0 4px 15px rgba(32, 139, 223, 0.15);
}

.buyer-trust-strip {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-top: 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trust-icon {
  font-size: 0.95rem;
}

/* Ensure the footer content sits completely above the fixed sticky bar */
.archival-footer {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 4rem !important;
  padding-top: 3rem !important;
  /* 140px bottom padding creates a dedicated clearance zone for the 80px sticky bar */
  padding-bottom: 140px !important;
  border-top: 1px solid var(--border-subtle, rgba(205, 225, 247, 0.7)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.25rem !important;
  text-align: center !important;
  overflow: visible !important;
}

.footer-brand-block {
  margin-bottom: 0.25rem !important;
}

.footer-brand-title {
  display: none !important;
}

.footer-sub-brand {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.footer-quick-links {
  display: flex !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-bottom: 0.5rem !important;
}

.footer-link {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.25s ease;
}

.footer-link:hover {
  color: var(--glow-heart);
}

.footer-copyright {
  font-size: 0.75rem !important;
  color: var(--text-muted, #6b82a3) !important;
  margin: 0 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --book-width: 280px;
    --book-height: 420px;
  }

  .author-layout {
    gap: 3rem;
  }
}

@media (max-width: 900px) {

  .proof-grid,
  .themes-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .author-layout,
  .edition-grid {
    grid-template-columns: 1fr;
  }

  .edition-card.featured {
    transform: none;
  }

  .edition-card.featured:hover {
    transform: translateY(-4px);
  }

  .rating-summary-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.mobile-flip-leaf,
.mobile-only-leaf {
  display: none;
}

@media (max-width: 768px) {

  html.hero-engaged,
  html.hero-engaged body {
    overscroll-behavior-y: none;
  }

  html.hero-engaged #hero-stage {
    touch-action: none !important;
  }

  #hero-scroll-wrapper,
  #book-stage-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .book-scene-viewport {
    width: 250px !important;
    height: 380px !important;
    perspective: 1200px !important;
    perspective-origin: 50% 50% !important;
    overflow: visible !important;
  }

  #mobile-book-object {
    display: none !important;
  }

  #book-object {
    display: block !important;
  }

  #leaf-1,
  #leaf-2,
  #leaf-3 {
    display: none !important;
  }

  .mobile-flip-leaf,
  .mobile-only-leaf {
    display: block !important;
  }

  :root {
    --book-width: 250px;
    --book-height: 380px;
  }

  .luxury-header {
    height: 58px;
    padding: 0 1rem;
    background: rgba(244, 248, 252, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }

  .header-actions {
    gap: 0.4rem;
  }

  .header-action-btn,
  .action-btn {
    padding: 0.38rem 0.65rem;
    font-size: 0.72rem;
  }

  .auth-btn {
    display: inline-flex !important;
  }

  .cta-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .cta-btn .btn-arrow {
    display: none;
  }

  .support-btn .btn-text {
    display: none;
  }

  .support-btn {
    padding: 0.38rem 0.5rem;
  }

  .header-nav {
    display: none;
  }

  .brand-tagline {
    display: none;
  }

  #hero-stage,
  .hero-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 55px;
    padding-bottom: 65px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #webgl-container,
  .book-canvas-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
  }

  .book-world,
  .book-object {
    transform-style: preserve-3d !important;
  }

  .page-leaf,
  .leaf-face,
  .leaf-front,
  .leaf-back {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
  }

  /* Keep 3D book core and spine visible from all angles without culling */
  .book-spine-solid,
  .book-page-core,
  .core-edge,
  .core-right,
  .core-top,
  .core-bottom {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transform-style: preserve-3d !important;
  }

  .page-leaf {
    transform-origin: left center !important;
    /* Hinge must remain anchored at the spine */
    will-change: transform;
  }

  .leaf-back {
    transform: rotateY(180deg) translateZ(0.5px) !important;
  }

  /* Mobile Leaf Content Layout */
  .mobile-flip-leaf .page-content-wrapper,
  #leaf-back-cover .base-right-spread .page-content-wrapper {
    padding: 1.4rem 1.1rem 3.2rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
  }

  .mobile-flip-leaf .body-text,
  #leaf-back-cover .base-right-spread .body-text {
    font-size: 0.58rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.35rem !important;
    color: #1a273b !important;
  }

  .page-leaf .book-chapter-title,
  .base-right-spread .book-chapter-title,
  .ornate-chapter-head {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  /* Soften gutter shadow so text near spine is clear */
  .page-gutter-shadow.right-gutter {
    width: 12px !important;
    opacity: 0.5 !important;
  }

  .page-gutter-shadow.left-gutter {
    width: 15px !important;
  }

  /* Ensure the back cover occupies center stage when closed */
  #leaf-back-cover .leaf-back,
  .leaf-back-cover .book-back-cover {
    border-radius: var(--book-radius) 0 0 var(--book-radius) !important;
    transform: rotateY(180deg) translateZ(0.5px) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  #leaf-back-cover .leaf-back {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .story-overlays-container {
    pointer-events: none;
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
  }

  /* Overlay 1: Hero Showcase Narrative (Stage 1) */
  #story-overlay-1 {
    top: 11% !important;
    left: 5vw !important;
    right: 5vw !important;
    max-width: 100%;
    text-align: center;
  }

  #story-overlay-1.faded-out {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  #story-overlay-1 .overlay-badge {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
  }

  #story-overlay-1 .hero-title .title-sub {
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1;
  }

  #story-overlay-1 .hero-title .title-main {
    font-size: clamp(1rem, 4vw, 1.25rem);
    margin-bottom: 0.7rem;
    letter-spacing: 0.16em;
  }

  #story-overlay-1 .hero-description {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 0.7rem;
    display: -webkit-box;
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #story-overlay-1 .hero-meta {
    display: none;
  }

  #story-overlay-1 .scroll-prompt-indicator,
  .scroll-prompt-indicator {
    justify-content: center;
    margin-top: 0.8rem;
    font-size: 0.68rem;
  }

  /* Hide folio overlays on mobile so 3D pages are visible */
  #story-overlay-2,
  #story-overlay-3,
  .folio-card,
  .stage-text-overlay,
  [id^="folio-stage-"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Overlay Form: Lead Capture (Stage 10) - Dead-center on mobile */
  #story-overlay-form.lead-capture-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 60 !important;
  }

  #story-overlay-form.visible-final-form {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  #story-overlay-form .form-card,
  .lead-capture-card.form-card,
  #excerpt-access-card.form-card {
    background: #ffffff !important;
    /* Solid opaque white, no see-through text collision */
    border: 1px solid rgba(205, 225, 247, 0.9) !important;
    box-shadow: 0 20px 45px rgba(15, 30, 54, 0.18) !important;
    border-radius: 18px !important;
    padding: 1.25rem 1.4rem !important;
    pointer-events: auto !important;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .lead-capture-card .overlay-badge {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    margin-bottom: 0.25rem;
  }

  .lead-capture-title {
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    line-height: 1.2;
  }

  .lead-capture-description {
    font-size: 0.85rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
  }

  #lead-capture-form {
    gap: 0.6rem;
  }

  .lead-field {
    gap: 0.2rem;
  }

  .lead-field label {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .custom-input {
    padding: 0.55rem 0.8rem;
    font-size: 16px !important;
  }

  .lead-submit-btn {
    padding: 0.7rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
  }

  .lead-trust-badge {
    font-size: 0.58rem;
    margin-top: 0.4rem;
  }

  /* Hero HUD Controller (Scrub Tracker) */
  .hero-hud-controls,
  #hero-hud-controls,
  .stage-nav-controls,
  .folio-pagination-bottom {
    bottom: 1rem !important;
    width: 92% !important;
    gap: 0.5rem !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  .hud-stage-label {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .hud-quick-actions {
    gap: 0.8rem;
  }

  .hud-page-count {
    font-size: 0.65rem;
  }

  .hud-jump-btn {
    font-size: 0.65rem;
  }

  .buyer-trust-strip {
    gap: 1.2rem;
  }
}

/* ==========================================================================
   ATELIER & TOME — E-COMMERCE MODALS, DRAWERS & CONCIERGE STYLES
   ========================================================================== */

/* --- 1. HEADER CONTROLS ENHANCEMENTS --- */
.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 0.42rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.header-action-btn:hover {
  background: #ffffff;
  border-color: var(--glow-heart);
  color: var(--book-blue);
  box-shadow: 0 4px 14px rgba(32, 139, 223, 0.16);
  transform: translateY(-1px);
}

.cart-toggle-btn {
  position: relative;
  font-weight: 600;
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--glow-heart);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-badge.has-items {
  animation: badgePop 0.3s ease;
}

@keyframes badgePop {
  0% {
    transform: scale(0.6);
  }

  60% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.auth-btn.logged-in {
  border-color: rgba(32, 139, 223, 0.5);
  background: rgba(205, 225, 247, 0.25);
  color: var(--book-blue);
}

.track-order-nav {
  position: relative;
}

.track-order-nav::after {
  content: '♥';
  font-size: 0.6rem;
  margin-left: 0.35rem;
  color: var(--glow-heart);
}

/* --- 2. BACKDROPS & OVERLAYS --- */
.ecom-overlay,
.ecom-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 54, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

.ecom-overlay.active,
.ecom-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

body.ecom-modal-active {
  overflow: hidden;
}

/* --- 3. SLIDE-OUT DRAWERS (CART & SUPPORT) --- */
.ecom-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 94vw);
  background: #ffffff;
  box-shadow: -10px 0 40px rgba(15, 30, 54, 0.2);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.ecom-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.drawer-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--glow-heart);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.drawer-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--book-blue);
  letter-spacing: 0.04em;
  margin: 0;
}

.drawer-close-btn,
.modal-close-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover,
.modal-close-btn:hover {
  background: var(--book-blue);
  color: #ffffff;
  border-color: var(--book-blue);
  transform: rotate(90deg);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.drawer-footer {
  padding: 1.4rem 1.8rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* --- 4. CART ITEMS & EMPTY STATE --- */
.cart-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  margin: auto 0;
}

.empty-icon-box {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--glow-heart);
  filter: drop-shadow(0 4px 12px rgba(32, 139, 223, 0.2));
}

.empty-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--book-blue);
  margin-bottom: 0.6rem;
}

.empty-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto 1.5rem;
}

.cart-items-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.1rem;
  padding: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cart-item-card:hover {
  border-color: rgba(32, 139, 223, 0.4);
  box-shadow: 0 4px 15px rgba(26, 61, 117, 0.05);
}

.cart-item-thumb-box {
  width: 80px;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background: #0f1e36;
  border: 1px solid var(--border-subtle);
}

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

.cart-item-details {
  display: flex;
  flex-direction: column;
}

.cart-item-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--glow-heart);
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.cart-item-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--book-blue);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.cart-item-edition {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.cart-item-price-unit {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.alt-currency {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.cart-item-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: #ffffff;
}

.qty-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.qty-btn:hover {
  background: var(--bg-surface);
  color: var(--glow-heart);
}

.qty-value {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 0.5rem;
  min-width: 22px;
  text-align: center;
}

.cart-item-remove-btn {
  background: none;
  border: none;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color 0.15s ease;
}

.cart-item-remove-btn:hover {
  color: #d4503c;
}

/* Shipping Selection Block */
.cart-shipping-selection {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shipping-header {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.shipping-option-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.shipping-option-label input[type="radio"] {
  accent-color: var(--glow-heart);
}

.shipping-text-block {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shipping-name {
  font-weight: 600;
  color: var(--text-primary);
}

.shipping-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.shipping-price-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--glow-heart);
}

/* Coupon Row */
.cart-coupon-row {
  display: flex;
  gap: 0.6rem;
}

.coupon-input {
  flex: 1;
  padding: 0.55rem 0.9rem;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.coupon-input:focus {
  outline: none;
  border-color: var(--glow-heart);
  box-shadow: 0 0 0 2px rgba(32, 139, 223, 0.15);
}

.coupon-apply-btn {
  padding: 0.55rem 1.1rem;
  background: var(--book-blue);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease;
}

.coupon-apply-btn:hover {
  background: var(--glow-heart);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.summary-value {
  font-weight: 600;
  color: var(--text-primary);
}

.total-row {
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 1.05rem;
}

.total-label {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--book-blue);
}

.total-value strong {
  font-size: 1.25rem;
  color: var(--book-blue);
}

.total-alt {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.drawer-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* --- 5. CENTER MODALS (AUTH, CHECKOUT, TRACKING) --- */
.ecom-modal {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  overflow-y: auto;
}

.ecom-modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(15, 30, 54, 0.25);
  padding: 2.4rem;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ecom-modal.open .modal-card {
  transform: scale(1) translateY(0);
}

.modal-card .modal-close-btn {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
}

/* Auth Modal Specifics */
.auth-brand-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--glow-heart);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.auth-modal-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--book-blue);
  margin-bottom: 0.4rem;
}

.auth-modal-sub {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.auth-tabs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-subtle);
}

.auth-tab-btn {
  background: none;
  border: none;
  padding: 0.6rem 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab-btn.active {
  background: #ffffff;
  color: var(--book-blue);
  box-shadow: 0 2px 8px rgba(15, 30, 54, 0.08);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-field-group label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-link {
  font-size: 0.68rem;
  color: var(--glow-heart);
  text-decoration: underline;
}

.ecom-input,
.ecom-textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ecom-input:focus,
.ecom-textarea:focus {
  outline: none;
  border-color: var(--glow-heart);
  box-shadow: 0 0 0 3px rgba(32, 139, 223, 0.15);
}

.form-aux-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.auth-demo-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.4rem 0;
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.auth-demo-divider::before,
.auth-demo-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}

.auth-demo-divider span {
  padding: 0 0.8rem;
}

.ecom-ghost-btn {
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--book-blue);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ecom-ghost-btn:hover {
  border-color: var(--glow-heart);
  background: rgba(205, 225, 247, 0.25);
}

/* User Logged-in Profile Card */
.profile-header-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 1.6rem;
}

.profile-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(32, 139, 223, 0.35);
}

.profile-display-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--book-blue);
  margin-bottom: 0.15rem;
}

.profile-display-email {
  font-size: 0.76rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.4rem;
}

.profile-tier-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--glow-heart);
  background: rgba(32, 139, 223, 0.12);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.profile-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- 6. CHECKOUT MODAL STYLES --- */
.checkout-card {
  max-width: 780px;
  padding: 2.2rem 2.6rem;
}

.checkout-steps-badge {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--glow-heart);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.checkout-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--book-blue);
  margin-bottom: 0.3rem;
}

.checkout-subtitle {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 1.6rem;
}

.checkout-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .checkout-grid-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.checkout-col-heading {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--book-blue);
  margin-bottom: 1.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.payment-tabs-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.payment-tab-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.6rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.payment-tab-btn.active {
  background: #ffffff;
  border-color: var(--glow-heart);
  color: var(--book-blue);
  box-shadow: 0 2px 8px rgba(32, 139, 223, 0.15);
}

.payment-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.1rem;
  margin-bottom: 1.2rem;
}

.upi-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.mock-qr-svg {
  width: 110px;
  height: 110px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.qr-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cod-notice-card {
  text-align: center;
  padding: 0.5rem 0;
}

.cod-icon {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.cod-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--book-blue);
  margin-bottom: 0.3rem;
}

.cod-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkout-summary-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
}

.cs-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.checkout-item-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.co-price {
  font-weight: 600;
}

.pay-submit-btn {
  width: 100%;
}

.checkout-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* Checkout Spinner */
.checkout-processing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  z-index: 10;
}

.processing-spinner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
}

.spinner-ring {
  width: 52px;
  height: 52px;
  border: 4px solid var(--frost-blue);
  border-top-color: var(--glow-heart);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
  margin-bottom: 1.4rem;
}

@keyframes spinRing {
  to {
    transform: rotate(360deg);
  }
}

.processing-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--book-blue);
  margin-bottom: 0.5rem;
}

.processing-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Success Confirmation Screen */
.order-success-screen {
  text-align: center;
  padding: 1rem 0;
}

.success-seal-container {
  margin-bottom: 1.2rem;
}

.success-seal {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, #208bdf 0%, #1555a6 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0 0 25px rgba(32, 139, 223, 0.45);
}

.success-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--glow-heart);
  margin-bottom: 0.4rem;
}

.success-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--book-blue);
  margin-bottom: 0.4rem;
}

.success-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
}

.order-id-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.id-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.id-value {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--glow-heart);
}

.success-email-notice {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
}

.success-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}

.success-item-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--text-primary);
}

.chip-qty {
  font-weight: 700;
  color: var(--glow-heart);
}

.success-actions-row {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* --- 7. ORDER TRACKING MODAL STYLES --- */
.tracking-card {
  max-width: 660px;
}

.tracking-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--glow-heart);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  display: block;
}

.tracking-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--book-blue);
  margin-bottom: 0.4rem;
}

.tracking-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.4rem;
}

.tracking-search-box {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.track-input {
  flex: 1;
}

.track-btn {
  padding: 0.75rem 1.4rem;
}

.tracking-demo-helper {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.demo-track-link {
  background: none;
  border: none;
  color: var(--glow-heart);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.74rem;
}

.tracking-results-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.6rem;
  animation: fadeInTrack 0.3s ease;
}

@keyframes fadeInTrack {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.track-meta-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1rem;
}

.track-id-block .meta-label {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.15rem;
}

.track-id-block .meta-val {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--book-blue);
}

.status-active {
  color: var(--glow-heart) !important;
}

.track-details-grid {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.track-details-grid code {
  background: #ffffff;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  font-size: 0.74rem;
}

.track-items-summary {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.6rem;
  font-size: 0.78rem;
}

.tracking-item-row {
  display: flex;
  justify-content: space-between;
}

/* Stepper Timeline */
.stepper-container {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-left: 0.6rem;
}

.timeline-step {
  display: flex;
  gap: 1.2rem;
  position: relative;
  padding-bottom: 1.4rem;
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-step::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
}

.timeline-step:last-child::before {
  display: none;
}

.timeline-step.completed::before {
  background: var(--glow-heart);
}

.step-marker {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.timeline-step.completed .step-marker {
  background: var(--glow-heart);
  border-color: var(--glow-heart);
  color: #ffffff;
}

.timeline-step.active .step-marker {
  background: #ffffff;
  border-color: var(--glow-heart);
  color: var(--glow-heart);
  box-shadow: 0 0 0 4px rgba(32, 139, 223, 0.2);
}

.step-title {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--book-blue);
  margin-bottom: 0.15rem;
}

.timeline-step.pending .step-title {
  color: var(--text-muted);
}

.step-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* --- 8. CONCIERGE & SUPPORT DRAWER STYLES --- */
.support-subheading {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--book-blue);
  margin-bottom: 1rem;
}

.faq-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface);
  transition: border-color 0.2s ease;
}

.faq-item.open {
  border-color: rgba(32, 139, 223, 0.4);
}

.faq-accordion-header {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--book-blue);
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  font-size: 0.9rem;
  color: var(--glow-heart);
  transition: transform 0.25s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

.faq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  padding: 0 1.1rem;
}

.faq-item.open .faq-accordion-body {
  max-height: 250px;
  padding-bottom: 1rem;
}

.faq-accordion-body p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.support-form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#support-ticket-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.concierge-reply-card {
  margin-top: 1rem;
  padding: 1.1rem;
  background: rgba(205, 225, 247, 0.3);
  border: 1px solid var(--border-glow);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: fadeInTrack 0.3s ease;
}

.concierge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.concierge-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--glow-heart);
  letter-spacing: 0.1em;
}

.ticket-stamp {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--book-blue);
}

.concierge-msg {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.whatsapp-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #25d366;
  color: #ffffff;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.whatsapp-support-btn:hover {
  opacity: 0.9;
}

/* --- 9. TOAST NOTIFICATIONS --- */
.toast-container {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.ecom-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--glow-heart);
  border-radius: 10px;
  padding: 0.85rem 1.2rem;
  box-shadow: 0 12px 35px rgba(15, 30, 54, 0.14);
  font-size: 0.82rem;
  color: var(--text-primary);
  max-width: 380px;
  animation: toastSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.ecom-toast.toast-hiding {
  opacity: 0;
  transform: translateX(30px);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(32, 139, 223, 0.15);
  color: var(--glow-heart);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.toast-success {
  border-left-color: #2e7d32;
}

.toast-success .toast-icon-box {
  background: rgba(46, 125, 50, 0.15);
  color: #2e7d32;
}

.toast-warning {
  border-left-color: #ed6c02;
}

.toast-warning .toast-icon-box {
  background: rgba(237, 108, 2, 0.15);
  color: #ed6c02;
}

.toast-content {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem;
  transition: color 0.15s ease;
}

.toast-close:hover {
  color: var(--text-primary);
}

/* --- 10. REUSABLE E-COMMERCE BUTTONS --- */
.ecom-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gradient-cta);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(32, 139, 223, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ecom-primary-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(32, 139, 223, 0.45);
}

.ecom-primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ecom-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.8rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--book-blue);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ecom-secondary-btn:hover {
  border-color: var(--glow-heart);
  background: var(--bg-surface);
  transform: translateY(-1px);
}

/* ==========================================================================
   AGASTYA SHANKHLA STYLE E-COMMERCE UPGRADE
   ========================================================================== */
.purchase-section {
  background: #ffffff;
  padding: 5rem 4vw 7rem;
}

.storefront-product-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 3.5rem;
  max-width: 1180px;
  margin: 0 auto 4rem;
}

/* Gallery */
.product-gallery-block {
  display: flex;
  gap: 1rem;
  position: sticky;
  top: 100px;
}

.gallery-thumbs-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 70px;
}

.thumb-btn {
  border: 1px solid var(--border-subtle);
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.thumb-btn.active,
.thumb-btn:hover {
  opacity: 1;
  border-color: #0f1e36;
}

.thumb-btn img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.gallery-main-view {
  flex: 1;
  border: 1px solid var(--border-subtle);
  background: #fdfdfd;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main-view img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(15, 30, 54, 0.15);
}

/* Product Info */
.product-info-block {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.product-urgency-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.urgency-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 30px;
  letter-spacing: 0.04em;
}

.stock-pill {
  background: #eef5fc;
  color: #1a3d75;
}

.timer-pill {
  background: #fff4e5;
  color: #b75500;
}

.timer-pill:empty {
  display: none !important;
}

.product-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: #0f1e36;
  line-height: 1.15;
}

.product-author-tag {
  font-size: 0.9rem;
  color: #556c8a;
}

.product-rating-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.rating-stars-badge {
  background: #0f834d;
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.rating-val {
  font-weight: 700;
  color: #0f1e36;
}

.tax-shipping-note {
  font-size: 0.74rem;
  color: #8c9ba5;
  margin-left: 0.5rem;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0.4rem 0;
}

.price-original {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: #8c9ba5;
}

.price-current {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 800;
  color: #0f1e36;
}

.discount-badge {
  background: #d32f2f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Selling USPs */
.selling-usp-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.usp-card {
  background: #0f172a;
  color: #f8fafc;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.usp-card strong {
  color: #facc15;
}

.product-brief-synopsis {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #3b5275;
}

/* Clean, compact Pre-Order button */
.product-purchase-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin-top: 1rem !important;
}

/* Hide stepper box completely if left in HTML */
.qty-stepper-box {
  display: none !important;
}

/* Compact, proportional button */
.order-main-btn,
#main-buy-now-btn {
  flex: none !important;
  /* Stop stretching 100% width */
  width: auto !important;
  min-width: 200px !important;
  max-width: 280px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.75rem 2rem !important;
  /* Compact padding */
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease !important;
}

.order-main-btn:hover,
#main-buy-now-btn:hover {
  transform: translateY(-2px) !important;
  opacity: 0.9 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}

/* EMI & Fulfill */
.emi-notice-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.emi-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.emi-cost {
  font-size: 0.85rem;
  color: #0f172a;
}

.fulfillment-details-box {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fulfill-item {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.4;
}

/* Tabs Section */
.product-tabs-section {
  max-width: 900px;
  margin: 3rem auto;
  border-top: 1px solid #e2e8f0;
  padding-top: 2rem;
}

.tabs-nav-bar {
  display: flex;
  gap: 0.8rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.6rem;
  margin-bottom: 1.4rem;
}

.product-tab-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  color: #475569;
}

.product-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.tab-inner-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: #0f172a;
}

.tab-inner-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 0.8rem;
}

.specs-bullet-list {
  list-style: none;
  font-size: 0.88rem;
  line-height: 1.8;
  color: #475569;
}

/* Reactions Section */
.reader-reactions-section {
  max-width: 1000px;
  margin: 4rem auto 0;
  text-align: center;
}

.reactions-kicker {
  font-size: 0.74rem;
  color: #eab308;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.reactions-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: #0f172a;
  margin: 0.3rem 0 2rem;
}

.social-cards-scroller {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  text-align: left;
}

.ugc-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.2rem;
}

.ugc-tag {
  font-size: 0.65rem;
  font-weight: 700;
  background: #0284c7;
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.ugc-body {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #334155;
  margin: 0.8rem 0;
  font-style: italic;
}

.ugc-author {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f172a;
}

.reactions-footer-quote {
  margin-top: 2.5rem;
  padding: 2rem;
  background: #000;
  color: #fff;
  border-radius: 8px;
}

/* Maintain fixed bar styling and elevation */
.store-sticky-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 70px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08) !important;
  padding: 0.75rem 4vw !important;
  z-index: 9999 !important;
  display: none;
}

.store-sticky-bar.active {
  display: block !important;
}

.sticky-bar-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.s-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  margin-right: 1rem;
}

.s-price {
  font-weight: 800;
  font-size: 0.95rem;
  color: #0284c7;
}

.sticky-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.s-stepper {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

.s-stepper button {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
}

.s-stepper span {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.s-buy-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .storefront-product-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery-block {
    position: static;
    flex-direction: column-reverse;
  }

  .gallery-thumbs-list {
    flex-direction: row;
    width: 100%;
  }

  .social-cards-scroller {
    grid-template-columns: 1fr;
  }

  .s-title {
    display: none;
  }
}

/* ==========================================================================
   PHONE-FRAME UGC TICKER ("LOVED BY READERS ACROSS INDIA")
   ========================================================================== */
.reader-ugc-ticker-section {
  background: #ffffff;
  padding: 5rem 0 6rem;
  overflow: hidden;
  position: relative;
}

.ugc-section-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 4vw;
}

.ugc-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0f172a;
  text-transform: uppercase;
  margin: 0;
}

/* Marquee Viewport & Track */
.ugc-marquee-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  cursor: grab;
}

.ugc-marquee-viewport:active {
  cursor: grabbing;
}

.ugc-marquee-track {
  display: flex;
  gap: 1.8rem;
  width: max-content;
  user-select: none;
  padding: 1.5rem 0;
}

/* Phone Frame Card */
.phone-ugc-card {
  width: 290px;
  min-width: 290px;
  height: 540px;
  background: #000000;
  color: #ffffff;
  border-radius: 36px;
  border: 4px solid #1e293b;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.phone-ugc-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 55px rgba(15, 23, 42, 0.32);
}

/* Phone Top Bar */
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.7rem 1.2rem 0.4rem;
  letter-spacing: 0.04em;
}

/* IG Header */
.phone-ig-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ig-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
}

.ig-user-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ig-user-meta strong {
  font-size: 0.78rem;
  color: #fff;
}

.ig-user-meta small {
  font-size: 0.65rem;
  color: #94a3b8;
}

.ig-more-dots {
  color: #94a3b8;
  font-size: 0.8rem;
}

/* Body Content */
.phone-content-body {
  flex: 1;
  padding: 1rem;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-caption-bubble {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #e2e8f0;
}

.review-user-tag {
  color: #38bdf8;
  font-weight: 700;
}

.review-engagement-bar {
  display: flex;
  gap: 1rem;
  font-size: 0.72rem;
  color: #94a3b8;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Book Photo Card */
.phone-photo-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  background: #111c2e;
  overflow: hidden;
}

.ugc-book-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-author-badge {
  position: absolute;
  bottom: 0.8rem;
  left: 0.8rem;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  color: #facc15;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

/* DM Style Card */
.dm-header .dm-back {
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer;
}

.dm-chat-view {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
}

.chat-bubble {
  max-width: 85%;
  padding: 0.65rem 0.85rem;
  border-radius: 18px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.chat-bubble.incoming {
  background: #262626;
  color: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-bubble.incoming.highlight {
  background: #1e3a8a;
  color: #ffffff;
  border-left: 3px solid #38bdf8;
}

.chat-bubble.outgoing {
  background: #0284c7;
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

/* Story Card */
.story-overlay-tag {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.story-reaction-tray {
  display: flex;
  gap: 0.8rem;
  font-size: 1.2rem;
  justify-content: center;
  margin-top: auto;
  padding-top: 0.8rem;
}

/* --- LIVE COPIES SOLD BADGE STYLES (Zero 3D interference) --- */
.sticky-copies-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sticky-copies-badge strong,
#hero-copies-count {
  font-weight: 800;
}

/* ==========================================================================
   LEAD CAPTURE & SECURE PDF MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-card {
  background: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 780px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  color: #1a273b;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #000;
}

#pdf-shield {
  user-select: none;
  -webkit-user-select: none;
}

/* Modal Form Styles */
.modal-title {
  font-family: var(--font-serif, "Playfair Display", Georgia, serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f1e36;
  margin-bottom: 0.4rem;
}

.modal-subtitle {
  font-size: 0.95rem;
  color: #5a6b82;
  margin-bottom: 1.5rem;
}

#pdf-lead-form .input-group {
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#pdf-lead-form label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f1e36;
}

#pdf-lead-form input {
  padding: 0.85rem 1rem;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  font-size: 1rem;
  color: #1a273b;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#pdf-lead-form input:focus {
  border-color: #208bdf;
  box-shadow: 0 0 0 3px rgba(32, 139, 223, 0.15);
  background: #fff;
}

#pdf-lead-form .btn-primary {
  width: 100%;
  padding: 0.95rem 1.5rem;
  background: linear-gradient(135deg, #1d4ed8, #0284c7);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 0.5rem;
}

#pdf-lead-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
}

@media print {
  body {
    display: none !important;
  }
}

/* ADD AT THE VERY BOTTOM OF style.css (after every other rule) */
@media (max-width: 768px) {

  /* The hero has no scroll distance on mobile: swipes move the book, not the page */
  #hero-scroll-wrapper,
  #book-stage-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Text overlays and the desktop leaves are replaced by the 3D pages */
  #story-overlay-2,
  #story-overlay-3,
  #leaf-1,
  #leaf-2,
  #leaf-3 {
    display: none !important;
  }

  /* Block native scroll + pull-to-refresh ONLY while the hero is at the top */
  html.hero-engaged #hero-stage {
    touch-action: none !important;
  }

  html.hero-engaged,
  html.hero-engaged body {
    overscroll-behavior-y: none;
  }

  /* Never clip the book while it slides and turns */
  .book-scene-viewport {
    width: 250px !important;
    height: 380px !important;
    perspective: 1200px !important;
    perspective-origin: 50% 50% !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   DESKTOP VIEW ONLY FIX (NO ANIMATIONS TOUCHED, MOBILE SAFE)
   ========================================================================== */
@media (min-width: 769px) {

  /* 1. Prevent Modals, Cart & Support Drawers from spilling into the desktop flow */
  .ecom-modal,
  #auth-modal,
  #checkout-modal,
  #track-order-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
  }

  .ecom-modal.open,
  #auth-modal.open,
  #checkout-modal.open,
  #track-order-modal.open {
    display: flex !important;
  }

  .ecom-overlay,
  .ecom-modal-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
  }

  .ecom-overlay.active,
  .ecom-modal-backdrop.active {
    display: block !important;
  }

  .ecom-drawer,
  #cart-drawer,
  #support-drawer {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
  }

  .ecom-drawer.open,
  #cart-drawer.open,
  #support-drawer.open {
    display: flex !important;
  }

  /* 2. Fix Storefront Product Section on Desktop */
  .purchase-section {
    position: relative !important;
    z-index: 10 !important;
    background: #ffffff !important;
    padding: 6rem 4vw !important;
  }

  .storefront-product-grid {
    display: grid !important;
    grid-template-columns: 440px 1fr !important;
    gap: 4rem !important;
    max-width: 1180px !important;
    margin: 0 auto 4rem auto !important;
    align-items: start !important;
  }

  .product-gallery-block {
    position: sticky !important;
    top: 90px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1.2rem !important;
  }

  .gallery-main-view {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .gallery-main-view img,
  #main-product-img {
    max-width: 100% !important;
    max-height: 480px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 3. Clean Spacing for Sections below the book */
  .about-author-section,
  #about-author {
    position: relative !important;
    z-index: 10 !important;
    padding: 6rem 4vw !important;
  }
}

/* Hide skip button on desktop displays */
@media (min-width: 769px) {
  #skip-to-form-btn {
    display: none !important;
  }
}

/* ==========================================================================
   GLOBAL DYNAMIC TYPOGRAPHY BINDINGS (CUSTOM PROPERTY MAPPINGS)
   ========================================================================== */
.brand-logo-text,
.brand-meta strong,
.nav-link {
  font-size: var(--size-nav);
}

.hero-title,
.title-main,
.title-sub {
  font-family: var(--font-family-heading) !important;
}

.hero-title {
  font-size: var(--size-hero-title);
}

.hero-description,
.hero-tagline {
  font-family: var(--font-family-body);
  font-size: var(--size-hero-tagline);
}

/* 3D Folio Pages */
.page-leaf .body-text,
.leaf-face .body-text,
.page-content-wrapper .body-text,
.spread-header,
.printer-mark {
  font-family: var(--font-family-folio);
}

.page-leaf .body-text,
.leaf-face .body-text,
.page-content-wrapper .body-text {
  font-size: var(--size-folio-body);
}

/* Inside the Story / Synopsis */
.synopsis-block h2,
.synopsis-headline,
.synopsis-section h2,
.book-themes-section h2 {
  font-family: var(--font-family-heading);
  font-size: var(--size-synopsis-heading);
}

.synopsis-narrative p,
.synopsis-section p,
.synopsis-block p {
  font-family: var(--font-family-body);
  font-size: var(--size-synopsis-body);
}

/* About the Author */
.author-headline,
.author-section h2,
.about-author-section h2 {
  font-family: var(--font-family-heading);
}

.author-narrative p,
.author-bio p,
.about-author-section p {
  font-family: var(--font-family-body);
  font-size: var(--size-author-body);
}

/* Storefront & Pricing */
.product-pricing .current-price,
.product-price-row .price-current,
.pricing-card .price,
.s-price,
.current-price {
  font-size: var(--size-store-price);
}

/* ==========================================================================
   DESKTOP VIEWPORT FIT FOR STORE EDITIONS (#purchase-book)
   ========================================================================== */
@media (min-width: 900px) {

  /* Store section fits the desktop screen gracefully */
  .purchase-section,
  #purchase-book {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4vw 2rem !important;
    background: #ffffff;
    box-sizing: border-box;
  }

  .purchase-container {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
  }

  .storefront-product-grid {
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 3rem !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
  }

  .gallery-main-view img,
  #main-product-img {
    max-height: 380px !important;
    width: auto !important;
    object-fit: contain;
  }

  .product-tabs-section {
    max-width: 860px;
    margin: 1rem auto 0 !important;
    padding-top: 1rem !important;
  }
}

/* ===== THE STORY: centered, fits one screen (desktop only) ===== */
@media (min-width: 901px) {
  #inside-the-story.book-themes-section {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4.5rem, 10vh, 7rem) 4vw clamp(1.5rem, 5vh, 3.5rem);
  }

  #inside-the-story .themes-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #inside-the-story .synopsis-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #inside-the-story .synopsis-kicker {
    margin-bottom: 0.6rem;
  }

  #inside-the-story .synopsis-headline {
    font-size: clamp(1.5rem, 2.3vw, 2.2rem);
    line-height: 1.25;
    max-width: 1100px;
    margin: 0 auto clamp(0.8rem, 2vh, 1.4rem);
  }

  #inside-the-story .synopsis-narrative p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto clamp(0.6rem, 1.6vh, 1rem);
  }

  #inside-the-story .story-spec-pills {
    justify-content: center;
    margin: clamp(0.8rem, 2vh, 1.4rem) 0 clamp(1.2rem, 3.5vh, 2.2rem);
  }

  #inside-the-story .themes-grid {
    width: 100%;
    max-width: 1100px;
    gap: 1.5rem;
  }

  #inside-the-story .theme-card {
    padding: clamp(1rem, 2.4vh, 1.6rem) 1.4rem;
    text-align: center;
  }

  #inside-the-story .theme-card-icon {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
  }

  #inside-the-story .theme-card-title {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
  }

  #inside-the-story .theme-card-desc {
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

/* Shorter laptop screens: tighten a little more so it still fits one screen */
@media (min-width: 901px) and (max-height: 780px) {
  #inside-the-story .synopsis-narrative p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  #inside-the-story .theme-card-desc {
    font-size: 0.82rem;
  }

  #inside-the-story .story-spec-pill {
    padding: 0.4rem 1rem;
  }
}

/* ==========================================================================
   MOBILE UI POLISH  (phones only, max-width 768px)
   Paste at the VERY BOTTOM of css/style.css, after every other rule.
   Does not touch the hero/book, the HUD/stepper, or any animation.
   Desktop is unaffected: every rule is inside the media queries below.
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 1. HEADER (height stays 58px so the hero layout is unchanged) ---------- */
  .luxury-header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 0.75rem !important;
  }

  .luxury-header .header-left {
    flex: 0 0 auto !important;
  }

  .luxury-header .custom-brand-logo,
  .luxury-header #main-brand-logo-img,
  .luxury-header .brand-custom-logo img {
    max-height: 32px !important;
    max-width: 140px !important;
  }

  .luxury-header .header-actions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
  }

  .luxury-header .action-btn {
    flex-shrink: 0 !important;
    height: 34px !important;
    padding: 0 0.65rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
  }

  .luxury-header .cta-btn {
    padding: 0 0.85rem !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.05em !important;
    border-radius: 999px !important;
  }

  .luxury-header .support-btn {
    width: 34px !important;
    padding: 0 !important;
  }

  /* ---------- 2. STICKY BUY BAR (compact, no wrapping) ---------- */
  .store-sticky-bar {
    padding: 0.55rem 4vw calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sticky-bar-wrap {
    gap: 0.6rem !important;
    align-items: center !important;
  }

  .sticky-bar-wrap .sticky-meta {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }

  .sticky-bar-wrap .s-title {
    display: none !important;
  }

  .sticky-bar-wrap .sticky-copies-badge {
    font-size: 0.62rem !important;
    padding: 0.1rem 0.45rem !important;
    white-space: nowrap !important;
    align-self: flex-start;
  }

  .sticky-bar-wrap .s-price {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .sticky-bar-wrap .sticky-actions {
    flex-shrink: 0 !important;
    gap: 0.5rem !important;
  }

  .sticky-bar-wrap .s-stepper button {
    width: 28px !important;
    height: 38px !important;
  }

  .sticky-bar-wrap .s-stepper span {
    width: 22px !important;
  }

  .sticky-bar-wrap .s-buy-btn {
    white-space: nowrap !important;
    padding: 0 0.9rem !important;
    height: 40px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.03em !important;
    border-radius: 6px !important;
  }

  /* ---------- 3. PRODUCT PRICE ROW + TABS ---------- */
  .product-price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem 0.7rem !important;
  }

  .product-price-row .price-current {
    order: 1;
    font-size: 1.45rem !important;
    white-space: nowrap !important;
  }

  .product-price-row .price-original {
    order: 2;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
  }

  .product-price-row .discount-badge {
    order: 3;
    white-space: nowrap !important;
  }

  .tabs-nav-bar {
    display: flex !important;
    gap: 0.4rem !important;
  }

  .tabs-nav-bar .product-tab-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.65rem 0.3rem !important;
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .purchase-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* ---------- 4. THE STORY (centered, tighter) ---------- */
  #inside-the-story.book-themes-section {
    padding: 3.2rem 1.25rem 3rem !important;
  }

  #inside-the-story .themes-container {
    text-align: center;
  }

  #inside-the-story .synopsis-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.7rem;
  }

  #inside-the-story .synopsis-headline {
    font-size: 1.65rem;
    line-height: 1.25;
    margin: 0 auto 1.1rem;
  }

  #inside-the-story .synopsis-narrative p {
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 auto 1rem;
  }

  #inside-the-story .story-spec-pills {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.2rem 0 2rem;
  }

  #inside-the-story .story-spec-pill {
    width: 100%;
    max-width: 340px;
    justify-content: center;
    text-align: center;
    font-size: 0.72rem;
    padding: 0.5rem 1rem;
  }

  #inside-the-story .themes-grid {
    gap: 0.9rem;
  }

  #inside-the-story .theme-card {
    padding: 1.2rem 1.1rem;
    text-align: center;
  }

  #inside-the-story .theme-card:hover {
    transform: none;
  }

  #inside-the-story .theme-card-icon {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
  }

  #inside-the-story .theme-card-title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }

  #inside-the-story .theme-card-desc {
    font-size: 0.85rem;
    line-height: 1.55;
  }

  /* ---------- 5. AUTHOR ---------- */
  .about-author-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .author-socials {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem !important;
    margin-top: 1rem;
  }

  /* ---------- 6. FOOTER (also clears the sticky bar) ---------- */
  .archival-footer {
    padding: 2.5rem 1.25rem 6rem !important;
    text-align: center;
  }

  .archival-footer .footer-brand-title {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    line-height: 1.5;
  }

  .archival-footer .footer-sub-brand {
    font-size: 0.9rem;
  }

  .archival-footer .footer-quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.2rem;
    margin: 1.2rem 0;
  }

  .archival-footer .footer-link {
    font-size: 0.72rem;
  }

  .archival-footer .footer-copyright {
    font-size: 0.68rem;
    line-height: 1.6;
  }
}

/* Very narrow phones: icon-only account button, hide the quantity stepper in the buy bar */
@media (max-width: 380px) {
  .luxury-header .auth-btn-label {
    display: none !important;
  }

  .sticky-bar-wrap .s-stepper {
    display: none !important;
  }
}