:root {
  --ink: #0b1722;
  --forest: #12392f;
  --forest-2: #0b241f;
  --cream: #f6f3eb;
  --paper: #fffdf8;
  --gold: #ffd86a;
  --coral: #ee5578;
  --teal: #178c7b;
  --muted: #5d6968;
  --line: #dfe5df;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 20%, rgba(23,140,123,.2), transparent 28rem),
    radial-gradient(circle at 94% 72%, rgba(238,85,120,.16), transparent 30rem),
    #081b18;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
a { color: inherit; }
img { max-width: 100%; }

.detail-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 4rem);
  color: white;
  background: rgba(8,27,24,.96);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.detail-brand { display: grid; color: var(--gold); font: 800 1.55rem/1 "Barlow Condensed", Impact, sans-serif; letter-spacing: .08em; text-decoration: none; }
.detail-brand small { margin-top: .25rem; color: #a8c2ba; font: 600 .62rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.catalog-link { color: #eaf5f1; font-size: .9rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .2rem; }

.page-shell { max-width: 1180px; margin: 0 auto; background: var(--cream); box-shadow: 0 0 70px rgba(0,0,0,.35); }
.breadcrumbs { margin: 0; padding: 1rem clamp(1rem, 4vw, 4rem); color: #55716a; background: #edf2ed; font-size: .84rem; }
.breadcrumbs a { color: #315e54; }

.book-hero {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1rem, 5vw, 5rem);
  color: white;
  background:
    radial-gradient(circle at 84% 14%, rgba(255,216,106,.2), transparent 17rem),
    radial-gradient(circle at 18% 90%, rgba(238,85,120,.2), transparent 20rem),
    linear-gradient(135deg, var(--forest-2), var(--forest));
}
.hero-cover-wrap { position: relative; max-width: 390px; margin: 0 auto; }
.hero-cover-wrap::before { content: ""; position: absolute; inset: 7% -8% -4% 8%; background: rgba(255,216,106,.22); border-radius: 24px; transform: rotate(3deg); }
.hero-cover { position: relative; display: block; width: 100%; border: 5px solid rgba(255,255,255,.92); border-radius: 7px; box-shadow: 0 28px 65px rgba(0,0,0,.5); }
.hero-kicker { margin: 0 0 .65rem; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.book-hero h1 { max-width: 720px; margin: 0; font: 800 clamp(3.2rem, 8vw, 6.3rem)/.9 "Barlow Condensed", Impact, sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.hero-subtitle { max-width: 720px; margin: 1.3rem 0 0; color: #f7d9e1; font-size: clamp(1.08rem, 2.4vw, 1.38rem); font-weight: 700; line-height: 1.35; }
.hero-copy { max-width: 680px; margin: 1rem 0 0; color: #d6e4df; }
.hero-features { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.hero-features li { padding: .45rem .7rem; color: #eaf5f1; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: .82rem; font-weight: 700; }
.purchase-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.amazon-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: .85rem 1.15rem; color: #16231f; background: var(--gold); border: 2px solid var(--gold); border-radius: 8px; font-weight: 800; text-decoration: none; }
.amazon-button:hover, .amazon-button:focus-visible { color: white; background: var(--coral); border-color: var(--coral); outline: none; }
.book-price { color: white; font-size: 1.15rem; font-weight: 800; }
.book-price small { display: block; color: #9fbbb3; font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.quick-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; background: white; border-bottom: 1px solid var(--line); list-style: none; }
.quick-facts li { padding: 1.25rem 1rem; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-facts strong { display: block; color: var(--forest); font: 800 1.55rem/1 "Barlow Condensed", Impact, sans-serif; }
.quick-facts span { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.content-section { padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 5rem); }
.section-kicker { margin: 0 0 .5rem; color: var(--coral); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.content-section h2 { max-width: 760px; margin: 0; color: var(--forest); font: 800 clamp(2.2rem, 5vw, 3.8rem)/.98 "Barlow Condensed", Impact, sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.section-intro { max-width: 760px; margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }

.experience-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.experience-card { padding: 1.45rem; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(11,23,34,.06); }
.experience-card span { display: grid; width: 36px; height: 36px; place-items: center; color: white; background: var(--teal); border-radius: 50%; font-weight: 800; }
.experience-card h3 { margin: .85rem 0 .4rem; color: var(--forest); font-size: 1.1rem; }
.experience-card p { margin: 0; color: var(--muted); }

.preview-section { color: white; background: #102d27; }
.preview-section h2 { color: white; }
.preview-section .section-intro { color: #bfd2cc; }
.preview-grid { display: grid; gap: 1rem; margin-top: 2.2rem; }
.preview-card { overflow: hidden; margin: 0; background: white; border-radius: 14px; box-shadow: 0 15px 34px rgba(0,0,0,.28); }
.preview-card img { display: block; width: 100%; aspect-ratio: 8.5 / 11; object-fit: contain; background: white; }
.preview-card figcaption { padding: 1rem 1.1rem 1.15rem; color: var(--ink); }
.preview-card strong { display: block; color: var(--forest); }
.preview-card span { display: block; margin-top: .25rem; color: var(--muted); font-size: .88rem; line-height: 1.4; }

.split-section { display: grid; gap: 2.5rem; align-items: start; }
.flower-list { columns: 2; gap: 2rem; margin: 1.4rem 0 0; padding-left: 1.2rem; color: #38534d; }
.flower-list li { margin: .4rem 0; break-inside: avoid; }
.detail-panel { padding: 1.5rem; background: white; border: 1px solid var(--line); border-radius: 14px; }
.detail-panel h3 { margin: 0 0 1rem; color: var(--forest); font-size: 1.15rem; }
.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list div { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); font-size: .86rem; }
.detail-list dd { margin: 0; color: var(--ink); font-weight: 700; }

.faq-list { display: grid; gap: .65rem; margin-top: 1.8rem; }
.faq-list details { padding: 1rem 1.15rem; background: white; border: 1px solid var(--line); border-radius: 10px; }
.faq-list summary { color: var(--forest); font-weight: 800; cursor: pointer; }
.faq-list p { margin: .75rem 0 0; color: var(--muted); }

.related-band { display: grid; gap: 1.5rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 5rem); color: white; background: linear-gradient(120deg, #c84369, #7b3a87); }
.related-band h2 { margin: 0; font: 800 clamp(2rem, 5vw, 3.3rem)/1 "Barlow Condensed", Impact, sans-serif; text-transform: uppercase; }
.related-band p { max-width: 650px; margin: .65rem 0 0; color: #f7e6f1; }
.related-band a { justify-self: start; color: white; font-weight: 800; text-underline-offset: .2rem; }

.final-cta { text-align: center; background: var(--paper); }
.final-cta h2, .final-cta .section-intro { margin-right: auto; margin-left: auto; }
.final-cta .amazon-button { margin-top: 1.5rem; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.35rem; }
.share-row a { color: #315e54; font-size: .86rem; font-weight: 700; text-underline-offset: .2rem; }

.edition-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.spotlight-section { display: grid; gap: 2rem; color: white; background: #102d27; }
.spotlight-section h2 { color: white; }
.spotlight-section .section-intro { color: #bfd2cc; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.topic-grid li { display: flex; min-height: 72px; align-items: center; padding: .85rem 1rem; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; font-weight: 700; }

.theme-manuals { --forest: #183c55; --forest-2: #091e30; --gold: #ffcf56; --coral: #f05d49; --teal: #287da1; }
.theme-manuals .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,207,86,.2), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(40,125,161,.26), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-manuals .spotlight-section { background: #102b3e; }
.theme-puzzles { --forest: #3c285c; --forest-2: #1c1430; --gold: #ffd460; --coral: #f05c83; --teal: #7d55b3; }
.theme-puzzles .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,212,96,.18), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(240,92,131,.24), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-puzzles .spotlight-section { background: #2b1d43; }
.theme-children { --forest: #214b66; --forest-2: #152845; --gold: #ffd863; --coral: #ff5d78; --teal: #268ca0; }
.theme-children .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,216,99,.23), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(255,93,120,.25), transparent 20rem), linear-gradient(135deg, #18264d, #215c70); }
.theme-children .spotlight-section { background: #183f55; }
.theme-lifestyle { --forest: #27523d; --forest-2: #132c23; --gold: #ffd064; --coral: #df624f; --teal: #2d8769; }
.theme-lifestyle .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,208,100,.2), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(45,135,105,.26), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-lifestyle .spotlight-section { background: #1b3b2e; }

.detail-footer { padding: 2.2rem 1rem; color: #a8c2ba; background: #071714; text-align: center; }
.detail-footer strong { display: block; color: var(--gold); font: 800 1.3rem "Barlow Condensed", Impact, sans-serif; letter-spacing: .08em; }
.detail-footer p { margin: .4rem 0 0; font-size: .8rem; }

@media (min-width: 720px) {
  .book-hero { grid-template-columns: minmax(250px, .7fr) 1.3fr; }
  .quick-facts { grid-template-columns: repeat(4, 1fr); }
  .quick-facts li { border-bottom: 0; }
  .experience-grid, .preview-grid { grid-template-columns: repeat(3, 1fr); }
  .split-section { grid-template-columns: 1.2fr .8fr; }
  .related-band { grid-template-columns: 1fr auto; }
  .related-band a { justify-self: end; }
  .spotlight-section { grid-template-columns: 1.1fr .9fr; align-items: center; }
}

@media (max-width: 520px) {
  .book-hero h1 { font-size: 3.4rem; }
  .flower-list { columns: 1; }
  .detail-list div { grid-template-columns: 1fr; gap: .15rem; }
  .topic-grid { grid-template-columns: 1fr; }
}