html, body {
  max-width: 100%;
  overflow-x: hidden;   /* 🚫 no horizontal scroll for the whole page */
}

/* ---------- GLOBAL THEME ---------- */
:root {
  --plum: #ee71a0;
  --mauve: #e88fb5;
  --gold: #FFFDD0;
  --bg-pattern: url("images/polkdot5.png");
  --radius-card: 1rem;
  --radius-button: 999px;
  --transition-fast: 0.2s ease;
  --header-height: 70px;
  --page-max-width: 1400px;
  --card-bg: rgba(255,255,255,0.8);
  --dark-overlay: rgba(0,0,0,0.7);
  --modal-overlay: rgba(0,0,0,0.6);
}

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

body {
  background-image: var(--bg-pattern);
  background-size: 300px 300px;
  background-repeat: repeat;
  color: #d89cbb;
  font-family: "Atma", system-ui, sans-serif;
  padding-top: var(--header-height);
}

.wrapper {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: block;
}

/* ---------- HEADER / NAV (SHARED) ---------- */
.site-header {
  background-color: #ee71a0;
  color: #e88fb5);
  height: var(--header-height);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  padding: 0 1rem;
  font-family: "Emilys Candy", cursive;

}

.header-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  width: 100%;
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.brand-logo {
  height: 48px;
  width: auto;
  border-radius: 4px;
  background-color: var(--gold);
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.nav-links {
  margin: 0 auto;
}
.nav-links a {
  color: var(--gold);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-button);
  border: 2px solid transparent;
  transition: var(--transition-fast);
}

.nav-links a:hover {
  background-color: var(--mauve);
  border-color: var(--gold);
  color: #fff;
}

.contact-area a {
  color: var(--gold);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-button);
  transition: var(--transition-fast);
  border: 2px solid transparent;
}

.contact-area a:hover {
  background-color: var(--mauve);
  border-color: var(--gold);
  color: #fff;
}

.email-icon {
  width: 20px;
  height: 20px;
  background-color: var(--gold);
  color: var(--plum);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Atma", system-ui, sans-serif;
}

/* ---------- HOMEPAGE HERO GRID ---------- */
.hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.hero-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  border: 3px solid var(--gold);
  padding: 1.5rem;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.section-title {
  font-family: "Emily's Candy", cursive;
  color: var(--plum);
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  background-color: var(--gold);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-button);
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border: 2px solid var(--plum);
}

/* ---------- MEET THE AUTHOR (WRAP TEXT AROUND iPAD) ---------- */
.author-layout-wrap {
  display: flow-root; /* contain the float */
}

.author-ipad {
  float: left;
  background-color: #111;
  border-radius: 20px;
  padding: 0.75rem;
  position: relative;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  border: 3px solid #000;
  width: 220px;
  max-width: 40%;
  margin: 0 1rem 1rem 0;
}

.author-ipad::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
  transform: translateX(-50%);
}

.author-screen {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000;
}

.author-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-bio {
  font-size: 1rem;
  line-height: 1.5;
  color: #ee71a0;
  font-family: "Atma", system-ui, sans-serif;
}

.author-bio strong {
  color: var(--gold);
  font-weight: 600;
}

/* ---------- TRAILER CARD ---------- */
/* ============  Book Trailer Section  ============ */

.book-trailer-section {
  flex: 1 1 33%;
  max-width: 600px;
  /* min-width: 480px;  <-- remove this line */
  min-width: 0;              /* allow it to shrink so grid doesn't overflow */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.book-trailer-section .section-title {
  font-family: 'Emily Candy', "Emily's Candy", cursive;
  font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem);
  color: #4a2138;
  margin-bottom: .75rem;
}

/* the champagne-gold rounded border wrapper around the video */
.trailer-frame {
  width: 100%;
  background: radial-gradient(circle at 30% 20%, #2b2b2b 0%, #000 70%);
  border: 3px solid #d4af9d;          /* champagne-gold border to match your palette */
  border-radius: 16px;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.6),
    0 0 10px rgba(212,175,157,0.4);    /* faint glow the way your screenshot feels */
  padding: 0;
  overflow: hidden;
  /* make it BIGGER than before */
  max-width: 560px;                    /* wider player */
  aspect-ratio: 16 / 9;                /* keeps it short and wide */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The <video> itself sits edge-to-edge inside the frame */
.trailer-video {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* same feel as your screenshot player fill */
  background-color: #2b2b2b;
  border-radius: 12px;
  outline: none;
  border: none;
}

/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
  .book-trailer-section {
    max-width: 100%;
    min-width: 0;
  }

  .trailer-frame {
    max-width: 100%;
    border-width: 2px;
    border-radius: 14px;
  }

  .trailer-video {
    border-radius: 10px;
  }
}

.trailer-frame {
  width: 100%;
  height: 250px;
  max-height: 250px;
}

/* === Medium 4:5 Featured Carousel (plum + gold) === */
.featured-carousel-v2 {
  position: relative;
  width: 100%;
  max-width: 360px;          /* medium size */
  aspect-ratio: 4 / 5;       /* always 4:5 */
  margin: 0.75rem auto 1.5rem;

  background-color: var(--plum);        /* #4a2138 */
  border: 4px solid var(--gold);        /* #d4af9d */
  border-radius: 26px;
  overflow: hidden;                     /* no scrollbars, hides overflow */
}

/* Each slide fills the frame */
.book-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.book-slide.active {
  opacity: 1;
}

/* 4:5 cover art – clean, no extra border/padding */
.book-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* fills frame */
  border-radius: 22px;     /* slight inner rounding */
}
.featured-order-btn {
  display: inline-block;
  background-color: var(--gold);
  color: var(--plum) !important;
  font-family: "Emilys Candy", cursive;
  font-size: 1.1rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-button);
  border: 2px solid var(--plum);
  text-align: center;
  text-decoration: none !important;
  margin: 0.75rem auto 0.25rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}

/* ---------- CARD SECTIONS (NEWS / SUBSCRIBE / SHIPPING) ---------- */
.section-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  border: 3px solid var(--gold);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.news-list {
  font-family: "Atma", system-ui, sans-serif;
  color: var(--plum);
  font-size: 1rem;
  line-height: 1.5;
}

.subscribe-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subscribe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.subscribe-row input[type="text"],
.subscribe-row input[type="email"] {
  flex: 1;
  min-width: 180px;
  border-radius: var(--radius-button);
  border: 2px solid var(--plum);

  /* SHRINK INPUT HEIGHT */
  padding: 0.4rem 0.75rem;

  /* SMALLER TEXT */
  font-family: "Atma", system-ui, sans-serif;
  font-size: 0.9rem;

  color: var(--plum);
  background-color: #fff;
  outline: none;
}

#subscribe .subscribe-row {
  justify-content: flex-start !important;  /* move items to the left */
  gap: 0.75rem;                             /* small space between them */
}

#subscribe .subscribe-row input[type="text"],
#subscribe .subscribe-row input[type="email"] {
  max-width: 500px;   /* slightly smaller so they sit tighter */
  width: auto;
  margin: 0;          /* removes centering */
}


.subscribe-row button {
  background-color: var(--gold);
  color: var(--plum);
  font-family: "Emily's Candy", cursive;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-button);
  border: 2px solid var(--plum);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}
.subscribe-row button:hover {
  background-color: var(--mauve);
  color: #fff;
}

/* ---------- BOOKSHELF PAGE ---------- */
.bookshelf-header-wrap {
  text-align: center;
  margin-bottom: 2rem;
}

.bookshelf-header-badge {
  display: inline-block;
  background-color: var(--plum);
  color: var(--gold);
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  font-family: "Emily's Candy", cursive;
  font-size: 2rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.category-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.category-btn {
  background-color:  #FFFDD0;  
  color: #e88fb5;
  border: 2px solid var(--plum);
  border-radius: var(--radius-button);
  padding: 0.5rem 1rem;
  font-family: "Emily's Candy", cursive;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
}
.category-btn.active,
.category-btn:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
}

/* grid of simple cover cards */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap: 1.5rem;
}

.book-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  border: 3px solid var(--gold);
  padding: 1rem;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
}

.book-image-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: var(--transition-fast);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.book-card:hover .book-image-wrap {
  transform: scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.book-title {
  font-family: "Emily's Candy", cursive;
  color: var(--plum);
  font-size: 1.1rem;
  line-height: 1.2;
  margin-top: 0.75rem;
}

.book-price {
  font-family: "Atma", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--plum);
  margin-top: 0.4rem;
}

/* ----- ADMIN BADGE ON CARD ----- */
.admin-only-cardbadge {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: var(--dark-overlay);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.4;
  font-family: "Atma", system-ui, sans-serif;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  z-index: 5;
}

.admin-only-cardbadge .admin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-only-cardbadge .admin-actions button {
  background-color: var(--gold);
  color: var(--plum);
  border: 2px solid var(--plum);
  border-radius: var(--radius-button);
  font-family: "Atma", system-ui, sans-serif;
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}
.admin-only-cardbadge .admin-actions button:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
}

/* ----- ADD/EDIT PANEL (ADMIN) ----- */
.add-book-panel {
  display: none;
  background-color: var(--card-bg);
  border: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: "Atma", system-ui, sans-serif;
  color: var(--plum);
}

.add-book-panel label {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  margin-top: 0.75rem;
}

.add-book-panel input,
.add-book-panel textarea,
.add-book-panel select {
  width: 100%;
  border-radius: var(--radius-card);
  border: 2px solid var(--plum);
  background-color: #fff;
  padding: 0.5rem 0.75rem;
  font-family: "Atma", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--plum);
  outline: none;
  resize: vertical;
}

.add-book-panel button {
  margin-top: 1rem;
  background-color: var(--gold);
  color: var(--plum);
  border: 2px solid var(--plum);
  border-radius: var(--radius-button);
  font-family: "Emily's Candy", cursive;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}
.add-book-panel button:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
}

/* admin-mode toggle visibility */
body.admin-mode .admin-only-cardbadge,
body.admin-mode .add-book-panel {
  display: block;
}



/* ---------- SHIPPING PAGE WRAPPER ---------- */
.shipping-wrapper {
  background-color: var(--card-bg);
  border: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  padding: 1.5rem;
  font-family: "Atma", system-ui, sans-serif;
  color: var(--plum);
  line-height: 1.5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 950px) {
  .hero-row {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }

  .author-ipad {
    float: none;
    max-width: 260px;
    width: 100%;
    margin: 0 auto 1rem auto;
  }
}


/* --- Updated Meet the Author Layout --- */
.author-layout-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.author-ipad {
  width: 260px;
  margin-bottom: 1.2rem;
}

.author-bio.below {
  max-width: 650px;
  font-family: 'Atma', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #4a2138;
  line-height: 1.5;
}


/* --- Adjusted Author iPad Frame (restored original full fit) --- */
.author-ipad {
  width: 320px; /* restores full iPad size */
  margin-bottom: 1.5rem;
  position: relative;
}

.author-screen {
  border: 2px solid #4a2138;
  border-radius: 20px;
  overflow: hidden;
  background-color: #000;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.author-screen img {
  width: 100%;
  height: auto;           /* maintain natural aspect ratio */
  display: block;
  object-fit: contain;    /* fits inside without cropping */
  object-position: center center;
}


/* --- v11 Author section exact-fit image rules --- */
.author-layout-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* iPad frame behaves like a rounded tablet shell around full image, no crop */
.author-ipad {
  background-color: #000;
  border: 2px solid #4a2138;
  border-radius: 30px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
  padding: 0.75rem;
  width: auto;
  max-width: 320px;           /* keeps tablet from getting too huge on desktop */
  display: inline-block;
}

/* "screen" just wraps the actual image and inherits rounded corners */
.author-screen {
  border-radius: 20px;
  overflow: hidden;           /* soft rounded screen look */
  background-color: #000;
  max-width: 100%;
  max-height: 100%;
}

/* Author image fills naturally, no crop, no stretch */
.author-screen img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;        /* NEVER crop */
  object-position: center center;
}

/* Bio text below the tablet */
.author-bio.below {
  margin-top: 1rem;
  max-width: 650px;
  font-family: 'Atma', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a2138;
}


/* --- v12 Author tablet style (black tablet with silver edge) --- */
.author-layout-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.author-ipad {
  /* tablet shell */
  background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #000 60%);
  border: 3px solid #d4d4d4; /* silver edge */
  border-radius: 28px;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.7),
    0 0 4px rgba(255,255,255,0.2) inset,
    0 0 20px rgba(0,0,0,0.8) inset;
  padding: 0.75rem;
  max-width: 340px;
  width: auto;
  display: inline-block;
}

.author-screen {
  border-radius: 18px;
  overflow: hidden;
  background-color: #000;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.8) inset;
}

.author-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center center;
}

.author-bio.below {
  margin-top: 1rem;
  max-width: 650px;
  font-family: 'Atma', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a2138;
}


/* --- v13 trailer player --- */
.trailer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trailer-player-frame {
  background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #000 60%);
  border: 3px solid #d4af9d;
  border-radius: 16px;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.7),
    0 0 4px rgba(255,255,255,0.15) inset;
  padding: .5rem;
  width: 100%;
  max-width: 420px;   /* wider */
}

.trailer-screen {
  background:#000;
  border-radius:10px;
  overflow:hidden;
  border:2px solid #000;
  box-shadow:0 4px 10px rgba(0,0,0,0.8) inset;
  aspect-ratio:16/9;          /* short + wide */
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-family:'Atma', system-ui, sans-serif;
  font-size:.9rem;
  line-height:1.4;
  padding:1rem;
}

.trailer-note {
  margin-top:.5rem;
  font-size:.8rem;
  color: #ee71a0;
  font-family:'Atma', system-ui, sans-serif;
  text-align:center;
}


/* --- v14 iPad device with champagne-gold bezel and animated gloss --- */

.author-layout-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Outer thin iPad frame */
.ipad-device {
  background: #000;                 /* solid black frame */
  border-radius: 26px;              /* rounded corners like modern iPad */
  padding: 0.35rem;                 /* thin border */
  box-shadow: 0 10px 22px rgba(0,0,0,0.7);
  border: 1px solid #333;           /* subtle outer edge */
  max-width: 380px;
  width: 100%;
  position: relative;
}

/* Inner even bezel */
.ipad-bezel {
  background: #111;                 /* dark bezel */
  border-radius: 22px;
  padding: 0.4rem;                  /* equal bezel all around */
  border: 1px solid #222;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
  position: relative;
}

.ipad-bezel {
  padding: 0.35rem 0.35rem 1.2rem; /* more balanced bottom bezel */
  border-width: 1px;               /* thinner champagne border */
}


/* Champagne-gold bezel inside */
.ipad-bezel {
  background: #FFF5E5;
  border-radius: 24px;
  padding: 0.75rem 0.75rem 2.75rem; /* bottom room for home button */
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.9) inset,
    0 0 10px rgba(0,0,0,0.6);
  position: relative;
}

/* black glass screen */
.ipad-screen {
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #000;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.9) inset,
    0 0 24px rgba(0,0,0,0.8);
  max-width: 100%;
  max-height: 100%;
}

.ipad-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* do not crop */
  object-position: center center;
}

/* glossy reflection overlay */
.ipad-gloss {
  content: "";
  position: absolute;
  left: -20%;
  top: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(-20deg);
  pointer-events: none;
  animation: glossSweep 4s ease-in-out 1;
  opacity: 0.8;
}

@keyframes glossSweep {
  0% {
    transform: translate(-20%, -20%) rotate(-20deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  60% {
    transform: translate(20%, 20%) rotate(-20deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(40%, 40%) rotate(-20deg);
    opacity: 0;
  }
}

/* Home button */
.ipad-home-button {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fafafa 0%, #cfc3b8 60%);
  border: 2px solid rgba(0,0,0,0.4);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 0 4px rgba(255,255,255,0.6) inset;
}

/* Tiny sleep/power button on edge */
.ipad-power-button {
  position: absolute;
  right: 0.5rem;
  top: 0.6rem;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #ead3c4 0%, #9c7b6c 100%);
  box-shadow:
    0 0 4px rgba(0,0,0,0.8),
    0 0 2px rgba(255,255,255,0.4) inset;
}

/* Bio below */
.author-bio.below {
  margin-top: 1rem;
  max-width: 650px;
  font-family: 'Atma', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a2138;
}

/* --- v14 trailer player final polish --- */
.trailer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trailer-player-frame {
  background: #000;
  border-radius: 12px;
  border: 2px solid #d4af9d;
  box-shadow: 0 12px 24px rgba(0,0,0,0.7);
  padding: 0.5rem;
  max-width: 420px;
  width: 100%;
}

.trailer-screen {
  background: #000;
  color: #fff;
  font-family: 'Atma', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  border-radius: 8px;
  border: 2px solid #000;
  box-shadow:
    0 0 20px rgba(0,0,0,0.8) inset,
    0 2px 6px rgba(0,0,0,0.9);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

.trailer-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-family: 'Atma', system-ui, sans-serif;
  color: #4a2138;
  text-align: center;
}
/* ---- Shipping page policy layout ---- */
.policy-block {
  font-family: "Atma", system-ui, sans-serif;
  color: var(--plum);
  font-size: 1rem;
  line-height: 1.5;
  background-color: #fff;
  border-radius: var(--radius-card);
  border: 3px solid var(--gold);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  padding: 1rem 1rem 2rem;
  margin-top: 1rem;
}

.policy-subhead {
  font-family: "Emily's Candy", cursive;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--plum);
  margin: 1rem 0 0.5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.policy-block p {
  margin-bottom: 0.9rem;
}

.policy-email {
  color: var(--plum);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
}

.policy-email:hover {
  color: var(--mauve);
  border-bottom-color: var(--mauve);
}

/* "Back to Home" button */
.back-home-row {
  text-align: center;
  margin-top: 1.5rem;
}

.back-home-btn {
  display: inline-block;
  background-color: var(--gold);
  color: var(--plum);
  font-family: "Emily's Candy", cursive;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-button);
  border: 2px solid var(--plum);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}
.back-home-btn:hover {
  background-color: var(--mauve);
  border-color: var(--gold);
  color: #fff;
}
/* --- News & Events Section --- */

#news-events {
  background-color: rgba(255,255,255,0.6);
  border: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  padding: 2rem 1rem 3rem;
  max-width: 1200px;
  margin: 2rem auto;
  text-align: center;
  color: var(--plum);
}

#news-events .section-title {
  font-size: 2rem;
  color: var(--plum);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  margin-bottom: 1rem;
  background-color: var(--gold);
  border: 2px solid var(--plum);
  display: inline-block;
  border-radius: var(--radius-button);
  padding: 0.4rem 1rem;
}

.news-intro {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 850px;
  margin: 0 auto 2rem;
  color: #ee71a0;  /* <-- ADD THIS */
}


.news-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  margin-bottom: 2rem;
}
/* === Featured book card: pink background + cream text === */
.news-book-card {
  background-color: #e88fb5;          /* pink background */
  border: 2px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
  color: #FFFDD0;                     /* cream base text */
  padding: 1rem;
  width: 100%;
  max-width: 280px;
  text-align: center;
}

/* make sure title + description inside are also cream */
.news-book-card .book-title,
.news-book-card .book-description {
  color: #FFFDD0;
}

.book-cover-frame {
  border: 2px solid var(--gold);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.8);
  margin-bottom: 1rem;
}

.book-cover-frame img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.book-title {
  font-size: 1.3rem;
  color: var(--gold);
  margin: 0.4rem 0;
}

.book-description {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 0.75rem;
}

.release-badge {
  display: inline-block;
  background-color: var(--gold);
  color: var(--plum);
  font-size: 0.8rem;
  border-radius: var(--radius-button);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--plum);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.newsletter-footer {
  margin-top: 2rem;
}

.news-btn {
  display: inline-block;
  background-color: var(--gold);
  color: var(--plum);
  font-family: "Emily's Candy", cursive;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-button);
  border: 2px solid var(--plum);
  text-decoration: none;
  transition: 0.3s ease;
}

.news-btn:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}
/* --- Bookshelf Grid: 4 cards across on desktop, responsive down --- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.5rem;
}

/* The individual card shell */
.book-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  border: 3px solid var(--gold);
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  position: relative;
  cursor: pointer;
  text-align: center;
  overflow: hidden; /* so hover overlay can't spill out */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Frame around the image */
.book-image-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  transition: var(--transition-fast);
}

/* Book cover itself */
.book-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.book-card:hover .book-image-wrap {
  transform: scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Title + price under each cover */
.book-title {
  font-family: "Emily's Candy", cursive;
  color: var(--plum);
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 0.75rem;
}
.book-price {
  font-family: "Atma", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--plum);
  margin-top: 0.4rem;
}

/* --- HOVER OVERLAY CONTENT (desc, buy button) --- */
.book-hover-info {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-family: "Atma", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  text-align: left;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.book-card:hover .book-hover-info {
  opacity: 1;
}

.book-desc {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: #fff;
}

.book-hover-price {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--gold);
  font-family: "Atma", system-ui, sans-serif;
}

/* Buy Now button in hover */
.buy-now-btn {
  display: inline-block;
  background-color: var(--gold);
  color: var(--plum);
  font-family: "Emily's Candy", cursive;
  font-size: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-button);
  border: 2px solid var(--plum);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}
.buy-now-btn:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
}

/* format-row inside hover (Hardcover / Paperback / eBook links for Novels) */
.format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.format-row a {
  background-color: var(--gold);
  color: var(--plum);
  border: 2px solid var(--plum);
  border-radius: var(--radius-button);
  font-family: "Emily's Candy", cursive;
  font-size: 0.8rem;
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: var(--transition-fast);
}
.format-row a:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
}

/* --- Category buttons row at the top of Bookshelf --- */
.category-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.category-btn {
  display: inline-block;
  text-decoration: none;        /* removes underline */
  color:#e88fb5;               /* plum text */
  background-color: #FFFDD0;    /* soft beige-pink */
  border: 3px solid #e88fb5;    /* plum border */
  border-radius: 20px;          /* rounded edges */
  padding: 10px 20px;           /* spacing inside button */
  font-family: "Emilys Candy", cursive;
  font-size: 20px;
  transition: all 0.25s ease-in-out;
}

.category-btn:hover {
  background-color: #d9b6a8;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
              0 0 50px rgba(255, 235, 140, 0.6);
  transform: scale(1.07);
}
/* --- The purple/gold "Bookshelf" badge at the top --- */
.bookshelf-header-wrap {
  text-align: center;
  margin-bottom: 2rem;
}
.bookshelf-header-badge {
  display: inline-block;
  background-color: var(--plum);
  color: var(--gold);
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  font-family: "Emily's Candy", cursive;
  font-size: 2rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

body {
  background-image: var(--bg-pattern);
  background-size: 300px 300px;
  background-repeat: repeat;
  color: #ee71a0; /* changed */
  font-family: "Atma", system-ui, sans-serif;
  padding-top: var(--header-height);
}

/* Gentle fade+lift on load */
@keyframes shelfFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* apply to the whole books grid and each card */
.books-grid, .book-grid, .products-grid,
.book-card, .product-card, .book {
  animation: shelfFadeUp .6s ease-out both;
}

/* cards start slightly staggered for a luxe feel */
.book-card:nth-child(1){ animation-delay:.05s }
.book-card:nth-child(2){ animation-delay:.10s }
.book-card:nth-child(3){ animation-delay:.15s }
.book-card:nth-child(4){ animation-delay:.20s }
.book-card:nth-child(5){ animation-delay:.25s }

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}
/* === Global Font Updates === */

/* Import the fonts */
@import url('https://fonts.googleapis.com/css2?family=Atma:wght@500&family=Emilys+Candy&display=swap');

/* Body text */
body, p, li, span, .author-bio, .news-list, .policy-block, .modal-body, .book-price, .book-hover-price, .format-options, .format-row a {
  font-family: 'Atma', sans-serif;
  font-weight: 500;
}

/* Headers and Titles */
h1, h2, h3, h4, h5, h6,
.section-title,
.policy-subhead,
.bookshelf-header-badge,
.book-title,
.modal-header,
.news-btn,
.news-book-card h3,
.subscribe-row button {
  font-family: "Emilys Candy", cursive;
  font-weight: 400;
}

/* Navigation + Header */
.site-header,
.nav-links a,
.contact-area a {
  font-family: "Emilys Candy", cursive;
  font-weight: 400;
}

/* Bookshelf button */
.category-btn,
.bookshelf-header-badge,
.back-home-btn {
  font-family: "Emilys Candy", cursive;
  font-weight: 400;
}

/* Ensure consistent text colors */
body {
  color: #4a2138; /* deep plum for readability */
}

/* Adjust header link hover to fit font better */
.nav-links a:hover,
.contact-area a:hover {
  background-color: #e88fb5;
  border-color: #ee71a0;
  color: #FFFDD0; /* cream text */
}
/* === Navigation Buttons: Transparent White Hover === */
.nav-links a {
  background-color: #e88fb5; /* your new background color */
  color: #FFFDD0;             /* text stays cream */
  border: 2px solid #FFFDD0;  /* optional: cleaner cream border */
  border-radius: 25px;
  padding: 10px 24px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  font-family: "Emilys Candy", cursive;
  font-weight: 400;
}


/* Hover / focus state */
.nav-links a:hover,
.nav-links a:focus {
  background-color: rgba(255, 255, 255, 0.3); /* transparent white */
  color: #FFFDD0; /* keep cream text */
  border-color: #f5e2c8; /* lighter cream border */
 }
/* === Single Book Shelf Page === */

.single-book-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem;
}

/* the soft rounded panel in the middle */
.single-book-panel {
  max-width: 700px;
  width: 100%;
  background: rgba(255, 245, 240, 0.96);
  border-radius: 30px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 2.5rem 2rem 3rem;
  text-align: center;
  position: relative;
}

/* faint hearts inside the panel */
.single-book-panel::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border-radius: 24px;
  background-image: var(--bg-pattern);
  background-size: 220px 220px;
  background-repeat: repeat;
  opacity: 0.18;
  z-index: 0;
}

/* ensure all content sits above that faint pattern */
.single-book-panel > * {
  position: relative;
  z-index: 1;
}

/* cover on the “page” */
.single-book-cover-link {
  display: inline-block;
  border-radius: 26px;
  padding: 0.75rem;
  background: #f6e7df;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.single-book-cover {
  display: block;
  max-width: 260px;
  width: 100%;
  border-radius: 18px;
}

/* single wooden shelf/plank */
.single-book-shelf {
  width: 260px;
  height: 22px;
  margin: 1.6rem auto 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #c48c63 0%,
    #d9a876 30%,
    #b3744e 70%,
    #8e583a 100%
  );
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.6);
}

/* text under the shelf */
.single-book-text {
  margin-top: 1.2rem;
  color: var(--plum);
  font-family: "Atma", system-ui, sans-serif;
}

.single-book-title {
  font-family: "Emilys Candy", cursive;
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
}

.single-book-subtitle {
  font-family: "Emilys Candy", cursive;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.single-book-desc {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto 1.4rem;
}

/* Buy button */
.single-book-buy-btn {
  display: inline-block;
  background-color: var(--gold);
  color: var(--plum);
  font-family: "Emilys Candy", cursive;
  font-size: 1.1rem;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--plum);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: 0.2s ease;
}

.single-book-buy-btn:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* mobile tweaks */
@media (max-width: 600px) {
  .single-book-panel {
    padding: 2rem 1.25rem 2.5rem;
  }
  .single-book-cover {
    max-width: 220px;
  }
  .single-book-shelf {
    width: 220px;
  }
  .single-book-title {
    font-size: 1.8rem;
  }
}
/* === FINAL GLOBAL FONT FIX — ENSURE CORRECT FONTS EVERYWHERE === */

/* HEADERS & NAVIGATION USE EMILYS CANDY */
h1, h2, h3, h4, h5, h6,
.section-title,
.policy-subhead,
.bookshelf-header-badge,
.book-title,
.modal-header,
.news-btn,
.news-book-card h3,
.subscribe-row button,
.nav-links a,
.contact-area a,
.single-book-title,
.single-book-subtitle {
  font-family: 'Emilys Candy', cursive !important;
  font-weight: 400 !important;
}

/* BODY TEXT USES ATMA MEDIUM */
body, p, li, span,
.author-bio,
.news-list,
.policy-block,
.modal-body,
.book-price,
.book-hover-price,
.single-book-desc,
.format-options,
.format-row a,
.shipping-note {
  font-family: 'Atma', sans-serif !important;
  font-weight: 500 !important;
}
.shipping-note {
  margin-top: 1.8rem;
}
/* ==== 360° SPINNING COVER ==== */
.cover-spin-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-book-cover.spin-360 {
  animation: spinFull 8s linear infinite;
  transform-style: preserve-3d;
}

@keyframes spinFull {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* If you only want spin on hover instead of all the time, comment out
   the .spin-360 rule above and use this instead:

.single-book-cover.spin-360 {
  transition: transform 0.6s linear;
}
.cover-spin-container:hover .single-book-cover.spin-360 {
  transform: rotateY(360deg);
}
*/

/* ==== PREVIEW MODAL + FLIPBOOK ==== */
.preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.preview-modal.is-open {
  display: flex;
}

.preview-modal-inner {
  background: rgba(255, 245, 240, 0.98);
  border-radius: 20px;
  padding: 1.5rem 1.25rem 1.5rem;
  max-width: 700px;
  width: calc(100% - 2rem);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Only make the preview scrollable on small screens */
@media (max-width: 700px) {
  .preview-modal-inner {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}
.preview-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--plum);
}

.preview-title {
  font-family: 'Emilys Candy', cursive;
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--plum);
}

.preview-book {
  width: 500px;
  max-width: 100%;
  height: 350px;
  margin: 0 auto;
}

.preview-book .page {
  width: 100%;
  height: 100%;
}

.preview-book .page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Preview Inside button */
.preview-btn {
  margin-top: 1.4rem;
  background-color: var(--gold);
  color: var(--plum);
  border: 2px solid var(--plum);
  border-radius: 999px;
  padding: 0.45rem 1.3rem;
  font-family: 'Emilys Candy', cursive;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}

.preview-btn:hover {
  background-color: var(--mauve);
  color: #fff;
  border-color: var(--gold);
}
/* === 3D Front/Back Flip for Seek Wisdom Cover === */

.cover-3d {
  width: 260px;
  height: 340px;
  margin: 0 auto;
  perspective: 1200px; /* depth for 3D effect */
}

.cover-3d-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: flipCover 8s ease-in-out infinite; /* front <-> back loop */
}

/* Apply shared styling to BOTH images inside the 3D wrapper */
.cover-3d-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden; /* hide reverse side so no edges show */
}

/* front cover */
.cover-front {
  transform: rotateY(0deg);
}

/* back cover */
.cover-back {
  transform: rotateY(180deg);
}

/* Flip ONLY between front and back (no “side” visible) */
@keyframes flipCover {
  0%, 40% {
    transform: rotateY(0deg);      /* front showing */
  }
  50%, 90% {
    transform: rotateY(180deg);    /* back showing */
  }
  100% {
    transform: rotateY(0deg);      /* back to front */
  }
}
.preview-btn {
  margin-top: 18px;       /* space between Buy button and Preview button */
  display: block;         /* allows centering */
  margin-left: auto;
  margin-right: auto;
  padding: 10px 20px;
  background-color: #b87a6a; /* matches your theme */
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Emilys Candy', cursive;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}

.preview-btn:hover {
  transform: scale(1.05);
}
.preview-btn {
  margin-top: 18px;
  display: block;
  margin-left: auto;
  margin-right: auto;

  padding: 6px 16px;                /* smaller button size */
  font-size: 16px;                  /* smaller text */
  background-color: #b87a6a;        /* your theme color */
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Emilys Candy', cursive;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}

.preview-btn:hover {
  transform: scale(1.05);
}
.preview-book {
  width: 500px;
  height: 350px;
  margin: 0 auto;
  position: relative;
}
.preview-book .page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.preview-book .page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- Trailer iPad layout --- */

.trailer-ipad-wrapper {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 1rem;
}

/* make this iPad a medium size */
.ipad-device.trailer-ipad {
  max-width: 420px;
  width: 100%;
}

/* video should fill the screen area */
.ipad-screen video.ipad-video {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Cover + text under the iPad --- */

.trailer-info {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-family: 'Atma', system-ui, sans-serif;
  color: var(--plum);
  line-height: 1.5;
}

.trailer-info-cover {
  width: 200px;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

.trailer-info-text h3 {
  font-family: "Emilys Candy", cursive;
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
}

/* stack on small screens */
@media (max-width: 700px) {
  .trailer-info {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .trailer-info-cover {
    width: 60%;
  }
}
/* --- Medium HTML5-style video card (no border, no frame) --- */
.custom-video-card {
  max-width: 340px;
  margin: 0 auto 1.5rem;
  border-radius: 24px;
  padding: 0;                  /* no frame padding */
  background: none;            /* REMOVE background so no border effect */
  box-shadow: none;            /* no shadow border */
}

/* Clean rounded video only */
.custom-video {
  width: 100%;
  display: block;
  border-radius: 18px;         /* soft rounded corners */
  background: #000;            /* video background (black) */
  border: none;                /* ensure no border */
}
/* --- Smaller book image + clean text wrapping (like screenshot #2) --- */
.trailer-text-image,
.trailer-info-cover {
  width: 240px !important;       /* NEW smaller image size */
  max-width: 240px !important;
  height: auto;
  float: left;
  margin: 0 1rem 0.75rem 0;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* Keep columns clean after wrapped floats */
.trailer-text-block::after,
.trailer-info::after {
  content: "";
  display: block;
  clear: both;
}

/* Mobile fix */
@media (max-width: 700px) {
  .trailer-text-image,
  .trailer-info-cover {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    width: 60%;
    max-width: 300px;
  }

  .custom-video-card,
  .trailer-video-wrap {
    max-width: 90% !important;
  }
}

.custom-video-card {
  max-width: 400px;     /* SMALLER SIZE */
  margin: 20px auto;    /* centers the video */
  border-radius: 15px;
  overflow: hidden;
}

.custom-video {
  width: 100%;
  height: auto;
  display: block;
}

.trailer-heading {
  font-size: 36px;
  margin-bottom: 10px; /* adds space below the header */
}
.wrap-text-section {
  text-align: left !important;   /* overrides your site’s centering */
  max-width: 900px;
  margin: 0 auto;
}

.wrap-text-section p {
  text-align: left !important;   /* paragraphs left */
  line-height: 1.6;
}

.wrap-image {
  float: left;
  width: 50%;       /* adjust as needed */
  margin: 0 20px 20px 0;
  border-radius: 12px;
}

.wrap-image,
.trailer-text-image {
  float: left;
  margin: 40px 20px 20px 0 !important;
}
.about-box {
  max-width: 800px;      /* centers the box */
  margin: 0 auto;        /* keeps it centered */
  padding: 20px;         /* nice spacing inside */
}

.about-box p {
  text-align: left;      /* text left-aligned INSIDE box */
  line-height: 1.6;
}
.center-left {
  max-width: 800px;   /* keeps the block centered */
  margin: 0 auto;     /* centers the block */
  text-align: left;   /* text inside is left-aligned */
  line-height: 1.6;
}

.author-layout-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1px;
}

.ipad-device {
  width: 260px;
}

.center-left {
  max-width: 600px;
  line-height: 1.6;
}


/* --- Mobile Navigation Toggle (clean gold hamburger) --- */
.nav-toggle {
  display: none;            /* hidden on desktop */
  background: none;
  border: none;
  padding: 0;
  font-size: 2rem;
  color: var(--gold);
  cursor: pointer;
  line-height: 1;
  margin-left: auto;
}

/* --- Mobile Dropdown Navigation --- */

@media (max-width: 950px) {

  /* show hamburger */
  .nav-toggle {
    display: block;
    position: absolute;
    right: 1rem;
    top: 1.2rem;
  }

  /* hide contact button to save top-bar space */
  .contact-area {
    display: none;
  }

  /* hide menu by default */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--plum);
    padding: 1rem;
    gap: 0.75rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
    z-index: 9998;
  }

  /* show menu when toggled */
  .nav-links.nav-open {
    display: flex;
  }

  .nav-links a {
    width: 100%;
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 8px;
  }

  /* mobile layout for hero sections */
  .hero-row {
    grid-template-columns: 1fr !important;
  }
}

/* Center the text inside all PAY buttons on hover cards */
.book-hover-info .buy-now-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* === Modal bounce animation === */
@keyframes modalBounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-14px);
  }
  60% {
    transform: translateY(6px);
  }
}

.preview-modal-inner.modal-bounce {
  animation: modalBounce 0.7s ease-out;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preview-modal-inner.modal-bounce {
    animation: none !important;
  }
}

/* GLOBAL TEXT OVERRIDE */
body, 
p, 
li, 
span, 
.author-bio, 
.author-bio.below,
.trailer-info, 
.trailer-info-text, 
.trailer-note,
.news-intro,
.news-list,
.book-description {
  color: #ee71a0 !important;
}

/* === FEATURED BOOKS: TEXT COLOR OVERRIDE === */
#news-events .news-book-card h3,
#news-events .news-book-card p {
  color: #FFFDD0 !important;  /* cream text */
}

/* === FEATURED BOOK BADGES – FINAL OVERRIDE === */
.release-badge {
  background-color: #FFFDD0 !important; /* cream background */
  color: #e88fb5 !important;            /* pink text */
  border: 2px solid #e88fb5 !important; /* pink border */
}

/* === FORCE EMAIL BUTTON COLORS === */
.contact-area a,
.contact-area a * {
  color: #FFFDD0 !important;       /* cream text */
}

.contact-area {
  background-color: transparent !important;   /* remove pink override */
}

.contact-area a {
  background-color: transparent !important;   /* ensure no background override */
}

/* Change ONLY the Click Here to Pay button font */
.book-hover-info .buy-now-btn {
  font-family: 'Atma', sans-serif !important;
  font-weight: 500 !important;
}

.ipad-home-button,
.ipad-power-button {
  display: none;
}

.ipad-screen {
  border-radius: 14px;
  overflow: hidden;
}

.ipad-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;         /* ensures full fill */
}

.ipad-camera-bar {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  z-index: 5;
}

.ipad-dot {
  background: #333;
  border-radius: 50%;
}

.ipad-dot.small {
  width: 5px;
  height: 5px;
}

.ipad-dot.big {
  width: 8px;
  height: 8px;
}

/* === CLEAN PREVIEW MODE BEHAVIOR === */

/* Default desktop: show page 1 normally, no scrollbars */
#preview-book {
  width: 500px;
  max-width: 100%;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#preview-book .page {
  width: 100%;
  height: 100%;
}

#preview-book .page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* MOBILE � show horizontal swipe pages */
@media (max-width: 700px) {
  #preview-book {
    width: 100%;
    height: auto;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  #preview-book .page {
    position: relative;      /* ? add this */
    min-width: 85%;
    height: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  #preview-book .page img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}
/* === MOBILE HEADER FIX: Show mail + keep hamburger clickable === */
@media (max-width: 950px) {

  .header-inner {
    position: relative !important;
  }

  /* HAMBURGER � must sit ON TOP */
  .nav-toggle {
    display: block !important;
    position: absolute !important;
    right: 1rem !important;
    top: 1.2rem !important;
    z-index: 9999 !important;   /* highest */
  }

  /* EMAIL ICON � make sure it's visible and not covering hamburger */
  .contact-area {
    display: block !important;          /* override display:none */
    position: absolute !important;
    right: 3.5rem !important;           /* a bit left of the hamburger */
    top: 1.15rem !important;
    z-index: 9997 !important;           /* under the hamburger */
  }

  .contact-area a {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Layout for the subscribe row */
.fancy-subscribe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}

/* Inputs */
.fancy-subscribe-row input[type="text"],
.fancy-subscribe-row input[type="email"] {
  flex: 1 1 180px;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.25); /* soft plum border */
  font-size: 0.95rem;
  outline: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.fancy-subscribe-row input::placeholder {
  color: rgba(15, 23, 42, 0.45);
}

/* Hover/Focus effect */
.fancy-subscribe-row input:focus {
  border-color: #7c3aed; /* plum */
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
  transform: translateY(-1px);
}

/* Button */
.fancy-subscribe-row button {
  flex: 0 0 auto;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* --- FINAL FIX: mobile menu behavior --- */
@media (max-width: 950px) {
  /* hide menu by default on small screens */
  .nav-links {
    display: none !important;
  }

  /* show menu when hamburger adds .nav-open */
  .nav-links.nav-open {
    display: flex !important;
    flex-direction: column;
.fancy-subscribe-row button:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.45);
}

.fancy-subscribe-row button:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

/* Mobile-friendly stacking */
@media (max-width: 600px) {
  .fancy-subscribe-row {
    flex-direction: column;
    align-items: stretch;
  }

  .fancy-subscribe-row button {
    width: 100%;
    justify-content: center;
  }
}

p {
  text-indent: 2rem !important;
  text-align: left !important;
  display: block;
}

.single-book-subtitle {
  text-align: center !important;
}