/* =========================================================================
   Connie de la Rosa — "My Life's Journey"
   Premium cinematic design system
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Tokens
   ------------------------------------------------------------------------- */
:root{
  --c-primary-dark:#1F332A;
  --c-deep-brown:#2E4A3B;
  --c-golden-brown:#8A6D2E;
  --c-primary-gold:#A8823C;
  --c-light-gold:#C7A25C;
  --c-warm-cream:#FAF6EC;
  --c-soft-beige:#EFE7D6;
  --c-white:#FFFFFF;
  --c-text-dark:#22291F;

  --grad-gold: linear-gradient(135deg, var(--c-deep-brown) 0%, var(--c-golden-brown) 50%, var(--c-primary-gold) 100%);
  --grad-gold-soft: linear-gradient(135deg, var(--c-primary-gold) 0%, var(--c-light-gold) 100%);
  --grad-dark-veil: linear-gradient(180deg, rgba(14,20,15,.15) 0%, rgba(14,20,15,.55) 55%, rgba(14,20,15,.92) 100%);

  --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', 'Libre Baskerville', Georgia, serif;
  --font-script: 'Tangerine', cursive;

  --container-w: 1280px;
  --container-w-narrow: 860px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .4s;
  --dur-m: .7s;
  --dur-l: 1.1s;

  --shadow-soft: 0 20px 60px rgba(14,20,15,.2);
  --shadow-gold: 0 10px 40px rgba(168,130,60,.25);
}

/* -------------------------------------------------------------------------
   1. Reset & base
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body.cdr-site{
  margin:0;
  background:var(--c-warm-cream);
  color:var(--c-text-dark);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
li{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4,h5{
  font-family:var(--font-heading);
  font-weight:600;
  color:var(--c-primary-dark);
  line-height:1.15;
  margin:0 0 .5em;
}
.cdr-site h1{ font-size:clamp(2.6rem,5vw,4.6rem); font-weight:600; }
.cdr-site h2{ font-size:clamp(2rem,3.4vw,3rem); }
.cdr-site h3{ font-size:clamp(1.4rem,2vw,1.9rem); }
p{ margin:0 0 1.2em; }

.cdr-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-golden-brown);
}
.cdr-eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--c-primary-gold);
  display:inline-block;
}
/* Historically a lighter variant for use on dark sections — every section
   is now light, so this is kept only for markup back-compat and matches
   the base style. */
.cdr-eyebrow--light{ color:var(--c-golden-brown); }
.cdr-eyebrow--light::before{ background:var(--c-primary-gold); }

.cdr-italic{ font-family:var(--font-display); font-style:italic; color:var(--c-golden-brown); }

/* -------------------------------------------------------------------------
   2. Layout helpers
   ------------------------------------------------------------------------- */
.cdr-container{ max-width:var(--container-w); margin:0 auto; padding:0 32px; }
.cdr-container--narrow{ max-width:var(--container-w-narrow); }
.cdr-section{ position:relative; padding:64px 0; }
.cdr-section--tight{ padding:44px 0; }
/* Thin full-width fade — the only "divider" between sections. Sits on
   whichever section follows, so adjacent same-color sections don't get an
   arbitrary double line, and it reads as a seam rather than an ornament. */
.cdr-section::before{
  content:"";
  position:absolute; top:0; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(168,130,60,.4) 50%, transparent 100%);
  pointer-events:none;
}
@media (max-width:1024px){
  .cdr-section{ padding:48px 0; }
}
@media (max-width:640px){
  .cdr-container{ padding:0 22px; }
  .cdr-section{ padding:36px 0; }
}

.cdr-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:900px){
  .cdr-grid-2{ grid-template-columns:1fr; gap:40px; }
}
/* Flips visual column order (cover/text) for alternating book sections on
   the multi-book About page, without needing mirrored markup per book. */
.cdr-grid-2--reverse{ direction:rtl; }
.cdr-grid-2--reverse > *{ direction:ltr; }
@media (max-width:900px){
  .cdr-grid-2--reverse{ direction:ltr; }
}

/* Pill nav linking to each book's section on the multi-book About page. */
.cdr-book-jump{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; }
.cdr-book-jump a{
  font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-golden-brown); border:1px solid rgba(168,130,60,.4); border-radius:999px;
  padding:10px 22px; transition:all var(--dur-s) var(--ease);
}
.cdr-book-jump a:hover{ background:var(--grad-gold-soft); color:var(--c-primary-dark); border-color:transparent; }
.cdr-hero-grid{ grid-template-columns:1.15fr .85fr; gap:56px; }
/* The front+back spread lays two covers side by side in a flex row. Fixed
   px widths on each image (the previous attempt) needed more combined
   horizontal room than this column has, and overflow-x:hidden on
   .cdr-book-frame silently clipped whichever one didn't fit — the front
   cover, on the right. Fix: size both images relative to the column
   (never wider than it can hold) and let flex actually shrink them
   (min-width:0 — flex items refuse to shrink below their content's
   intrinsic size otherwise, which was the real bug). */
.cdr-hero-grid .cdr-book-frame{ width:100%; }
.cdr-hero-grid .cdr-book-spread{ width:100%; max-width:400px; margin:0 auto; padding:22px 6px; }
.cdr-hero-grid .cdr-book-spread::before{ display:none; }
.cdr-hero-grid .cdr-book-spread-cover{ flex:1 1 0; min-width:0; }
.cdr-hero-grid .cdr-book-spread-cover img{
  width:100%; height:auto; max-width:100%; max-height:400px; object-fit:contain;
}
.cdr-hero-grid .cdr-book-spread-back{ transform:rotate(5deg) translateX(-6%); }
.cdr-hero-grid .cdr-book-spread-front{ transform:rotate(-5deg) translateX(6%); }
.cdr-hero-grid .cdr-book-spread:hover .cdr-book-spread-back{ transform:rotate(7deg) translateX(-8%) translateY(-6px); }
.cdr-hero-grid .cdr-book-spread:hover .cdr-book-spread-front{ transform:rotate(-7deg) translateX(8%) translateY(-6px); }
@media (max-width:900px){
  .cdr-hero-grid{ grid-template-columns:1fr; text-align:center; }
  .cdr-hero-grid .cdr-hero-content{ max-width:100%; margin:0 auto; }
  .cdr-hero-grid .cdr-btn-row{ justify-content:center; }
  .cdr-hero-grid .cdr-book-frame{ order:-1; }
  .cdr-hero-grid .cdr-book-spread{ max-width:280px; padding:18px 4px; }
  .cdr-hero-grid .cdr-book-spread-cover img{ max-height:280px; }
}

.cdr-divider{ display:inline-flex; color:var(--c-primary-gold); width:130px; height:16px; margin:18px 0; }
.cdr-divider svg{ width:100%; height:100%; }
.cdr-divider--center{ justify-content:center; }

/* subtle paper / grain texture, used as an overlay layer */
.cdr-texture-paper{ position:relative; }
.cdr-texture-paper::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.cdr-texture-dark{ background-color:var(--c-primary-dark); }
.cdr-texture-cream{ background-color:var(--c-warm-cream); }

/* floating gold dust particles (decorative, aria-hidden) */
.cdr-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.cdr-particles span{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--c-primary-gold);
  opacity:.5;
  filter:blur(.5px);
  animation:cdr-float 9s ease-in-out infinite;
}
@keyframes cdr-float{
  0%,100%{ transform:translateY(0) translateX(0); opacity:.15; }
  50%{ transform:translateY(-40px) translateX(12px); opacity:.7; }
}

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */
.cdr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:clamp(8px,1vw,11px) clamp(16px,2.4vw,22px);
  font-family:var(--font-body);
  font-size:clamp(.68rem,.65vw,.75rem);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space:nowrap;
}
.cdr-btn--primary{
  background:var(--grad-gold-soft);
  color:var(--c-primary-dark);
  box-shadow:var(--shadow-gold);
}
.cdr-btn--primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 46px rgba(168,130,60,.4);
}
.cdr-btn--outline{
  background:transparent;
  border-color:rgba(168,130,60,.6);
  color:var(--c-golden-brown);
}
.cdr-btn--outline:hover{
  background:rgba(168,130,60,.12);
  border-color:var(--c-primary-gold);
  transform:translateY(-2px);
}
.cdr-btn--outline-dark{
  background:transparent;
  border-color:rgba(138,109,46,.5);
  color:var(--c-deep-brown);
}
.cdr-btn--outline-dark:hover{
  background:rgba(138,109,46,.08);
  border-color:var(--c-golden-brown);
  transform:translateY(-2px);
}
.cdr-btn--block{ width:100%; }
.cdr-btn-row{ display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width:480px){
  .cdr-btn-row{ flex-direction:column; }
  .cdr-btn-row .cdr-btn{ width:100%; }
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
.cdr-header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  padding:26px 0;
  background:rgba(255,253,251,.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:background var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
  border-bottom:1px solid rgba(138,109,46,.1);
}
.cdr-header.is-scrolled{
  padding:14px 0;
  background:rgba(255,253,251,.98);
  border-bottom:1px solid rgba(138,109,46,.18);
  box-shadow:0 12px 40px rgba(31,51,42,.08);
}
.cdr-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.cdr-logo{
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--c-primary-dark);
  white-space:nowrap;
}
.cdr-logo span{ color:var(--c-primary-gold); font-style:italic; font-family:var(--font-display); }
.cdr-nav{ display:flex; align-items:center; gap:40px; }
.cdr-nav a{
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-text-dark);
  position:relative;
  padding-bottom:4px;
}
.cdr-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--c-primary-gold);
  transition:width var(--dur-s) var(--ease);
}
.cdr-nav a:hover::after, .cdr-nav a.is-active::after{ width:100%; }
.cdr-header-right{ display:flex; align-items:center; gap:20px; }
.cdr-burger{
  display:none;
  width:44px; height:44px;
  border:1px solid rgba(138,109,46,.3);
  border-radius:50%;
  background:transparent;
  position:relative;
}
.cdr-burger span, .cdr-burger span::before, .cdr-burger span::after{
  content:""; position:absolute; height:1px; background:var(--c-primary-dark); transition:all var(--dur-s) var(--ease);
}
.cdr-burger span{ left:13px; right:13px; top:50%; transform:translateY(-50%); }
.cdr-burger span::before{ left:0; right:0; top:-7px; }
.cdr-burger span::after{ left:0; right:0; top:7px; }

.cdr-mobile-menu{
  position:fixed; inset:0; z-index:1200;
  background:var(--c-warm-cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility var(--dur-m);
}
.cdr-mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.cdr-mobile-menu a{
  font-family:var(--font-heading); font-size:1.7rem; color:var(--c-primary-dark); letter-spacing:.02em;
}
.cdr-mobile-menu a:hover{ color:var(--c-golden-brown); }
.cdr-mobile-close{
  position:absolute; top:28px; right:28px;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(138,109,46,.3); background:transparent; color:var(--c-primary-dark);
  font-size:1.4rem;
}

@media (max-width:960px){
  .cdr-nav{ display:none; }
  .cdr-burger{ display:block; flex-shrink:0; }
  .cdr-header-right .cdr-btn{ display:none; }
  .cdr-logo{ font-size:1.05rem; }
}
@media (max-width:400px){
  .cdr-logo{ font-size:.92rem; }
}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */
.cdr-hero{
  position:relative;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--c-warm-cream);
  color:var(--c-text-dark);
}
.cdr-hero::before{
  content:""; position:absolute; top:-16%; right:-14%; width:50%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(168,130,60,.2) 0%, transparent 68%);
  filter:blur(6px);
  z-index:0; pointer-events:none;
}
.cdr-hero::after{
  content:""; position:absolute; bottom:-22%; left:-16%; width:38%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(138,109,46,.14) 0%, transparent 68%);
  filter:blur(6px);
  z-index:0; pointer-events:none;
}
.cdr-hero-inner{ position:relative; z-index:2; padding-top:142px; padding-bottom:36px; width:100%; }
@media (max-width:900px){
  .cdr-hero-inner{ padding-top:128px; padding-bottom:32px; }
}
@media (max-width:640px){
  .cdr-hero-inner{ padding-top:112px; padding-bottom:28px; }
}
.cdr-hero-content{ max-width:640px; }
.cdr-hero-content h1{
  color:var(--c-primary-dark);
  margin:.15em 0 .2em;
  line-height:1.06;
}
.cdr-hero .cdr-divider{ margin:12px 0; }
.cdr-hero-desc{ margin-bottom:.7em; }
.cdr-hero-content h1 em{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--c-golden-brown);
  font-weight:500;
  font-size:1em;
}
.cdr-hero-byline{
  font-family:var(--font-body);
  font-size:1.05rem;
  letter-spacing:.06em;
  color:rgba(34,41,31,.7);
  margin:0 0 .6em;
}
.cdr-hero-byline span{ color:var(--c-golden-brown); font-weight:600; }
.cdr-hero-subtitle{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.4rem;
  color:var(--c-golden-brown);
  margin-bottom:.6em;
}
.cdr-hero-desc{ font-size:1.15rem; color:rgba(34,41,31,.82); max-width:560px; }
.cdr-hero .cdr-divider{ color:var(--c-primary-gold); }
.cdr-hero .cdr-book-frame{ position:relative; z-index:2; }
.cdr-scroll-indicator{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--c-golden-brown); opacity:.8;
}
.cdr-scroll-indicator span{ font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; }
.cdr-scroll-indicator i{
  width:1px; height:38px; background:linear-gradient(var(--c-golden-brown), transparent);
  position:relative; overflow:hidden;
}
.cdr-scroll-indicator i::after{
  content:""; position:absolute; top:-38px; left:0; width:100%; height:100%;
  background:var(--c-golden-brown);
  animation:cdr-scroll-line 2.2s ease-in-out infinite;
}
@media (max-width:760px){
  /* Hero content commonly runs taller than one mobile screen, so this
     absolutely-positioned hint ends up overlapping the CTA buttons
     instead of sitting below them — hide it rather than let it collide. */
  .cdr-scroll-indicator{ display:none; }
}
@keyframes cdr-scroll-line{ to{ top:100%; } }

/* -------------------------------------------------------------------------
   6. Reveal / scroll animations
   ------------------------------------------------------------------------- */
/* Safe baseline: content is fully visible by default so it can never be
   stuck hidden (no-JS, blocked script, slow load, observer edge-cases).
   Only once JS confirms it has attached (html.js-ready) do we arm the
   pre-reveal hidden state; the observer then flips .is-visible on scroll,
   and a short fallback timer force-reveals anything left behind. */
.js-ready .cdr-reveal{ opacity:0; transform:translateY(34px); transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
.cdr-reveal.is-visible{ opacity:1; transform:translateY(0); }
.cdr-reveal-delay-1.is-visible{ transition-delay:.12s; }
.cdr-reveal-delay-2.is-visible{ transition-delay:.24s; }
.cdr-reveal-delay-3.is-visible{ transition-delay:.36s; }
.js-ready .cdr-fade-in{ opacity:0; transition:opacity var(--dur-l) var(--ease); }
.cdr-fade-in.is-visible{ opacity:1; }
.cdr-float-img{ animation:cdr-imgfloat 6s ease-in-out infinite; }
@keyframes cdr-imgfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* -------------------------------------------------------------------------
   7. Book mockup / frame
   ------------------------------------------------------------------------- */
.cdr-book-frame{ position:relative; display:flex; justify-content:center; max-width:100%; overflow-x:hidden; }
.cdr-book-frame::before{
  content:""; position:absolute; width:70%; height:70%; top:15%; left:15%;
  background:radial-gradient(circle, rgba(199,162,92,.55) 0%, rgba(199,162,92,0) 70%);
  filter:blur(30px); z-index:0;
}
.cdr-book-frame img{
  position:relative; z-index:1;
  max-width:360px;
  border-radius:2px;
  box-shadow:0 40px 90px rgba(14,20,15,.45), 0 4px 0 rgba(0,0,0,.15);
}

/* -------------------------------------------------------------------------
   7b. Book spread (front + back cover shown together, fanned)
   ------------------------------------------------------------------------- */
.cdr-book-spread{
  position:relative; display:flex; justify-content:center; align-items:center;
  padding:20px 30px;
}
.cdr-book-spread::before{
  content:""; position:absolute; width:70%; height:70%; top:15%; left:15%;
  background:radial-gradient(circle, rgba(199,162,92,.5) 0%, rgba(199,162,92,0) 70%);
  filter:blur(30px); z-index:0;
}
.cdr-book-spread-cover{
  position:relative; z-index:1;
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.cdr-book-spread-cover img{
  max-width:250px;
  border-radius:2px;
  box-shadow:0 30px 70px rgba(14,20,15,.4), 0 4px 0 rgba(0,0,0,.15);
}
.cdr-book-spread-back{ transform:rotate(7deg) translateX(-30px); z-index:1; }
.cdr-book-spread-front{ transform:rotate(-7deg) translateX(30px); z-index:2; }
.cdr-book-spread:hover .cdr-book-spread-back{ transform:rotate(11deg) translateX(-40px) translateY(-8px); }
.cdr-book-spread:hover .cdr-book-spread-front{ transform:rotate(-11deg) translateX(40px) translateY(-8px); }
@media (max-width:560px){
  .cdr-book-spread-cover img{ max-width:170px; }
  .cdr-book-spread-back{ transform:rotate(6deg) translateX(-18px); }
  .cdr-book-spread-front{ transform:rotate(-6deg) translateX(18px); }
}

/* -------------------------------------------------------------------------
   7c. Collection stack — a fan of every book's cover (live + coming soon),
   used in the About the Books hero so the banner reads as a growing
   library, not one static title. Works for any count via nth-child; the
   template caps it at 5 and centers the flagship title.
   ------------------------------------------------------------------------- */
.cdr-collection-stack{
  position:relative; display:flex; justify-content:center; align-items:center;
  padding:30px 10px;
}
.cdr-collection-stack::before{
  content:""; position:absolute; width:70%; height:70%; top:15%; left:15%;
  background:radial-gradient(circle, rgba(199,162,92,.5) 0%, rgba(199,162,92,0) 70%);
  filter:blur(30px); z-index:0;
}
.cdr-collection-stack-item{
  position:relative; z-index:1; flex:0 0 auto; width:170px; margin:0 -26px;
  transition:transform var(--dur-m) var(--ease);
}
.cdr-collection-stack-item img{
  width:100%; border-radius:2px;
  box-shadow:0 30px 70px rgba(14,20,15,.4), 0 4px 0 rgba(0,0,0,.15);
}
.cdr-collection-stack-item .cdr-cover-placeholder{ box-shadow:0 30px 70px rgba(14,20,15,.4), 0 4px 0 rgba(0,0,0,.15); }
.cdr-collection-stack-item:nth-child(1){ transform:rotate(-10deg) translateY(14px); z-index:2; }
.cdr-collection-stack-item:nth-child(2){ transform:rotate(-3deg) translateY(-16px); z-index:4; width:196px; }
.cdr-collection-stack-item:nth-child(3){ transform:rotate(9deg) translateY(18px); z-index:3; }
.cdr-collection-stack-item:nth-child(4){ transform:rotate(17deg) translateY(34px); z-index:2; }
.cdr-collection-stack-item:nth-child(5){ transform:rotate(-18deg) translateY(30px); z-index:1; }
.cdr-collection-stack:hover .cdr-collection-stack-item:nth-child(2){ transform:rotate(-4deg) translateY(-22px); }
@media (max-width:900px){
  .cdr-collection-stack-item{ width:130px; margin:0 -20px; }
  .cdr-collection-stack-item:nth-child(2){ width:150px; }
}
@media (max-width:560px){
  .cdr-collection-stack-item{ width:98px; margin:0 -15px; }
  .cdr-collection-stack-item:nth-child(2){ width:116px; }
}

/* -------------------------------------------------------------------------
   8. Section: Intro split
   ------------------------------------------------------------------------- */
.cdr-intro{ background:var(--c-warm-cream); }
.cdr-intro p{ color:var(--c-text-dark); }
.cdr-intro .cdr-btn-row{ margin-top:28px; }

/* -------------------------------------------------------------------------
   9. Author preview
   ------------------------------------------------------------------------- */
.cdr-author-preview{ background:var(--c-soft-beige); position:relative; }
.cdr-author-portrait-wrap{ position:relative; max-width:360px; }
@media (max-width:900px){ .cdr-author-portrait-wrap{ margin:0 auto; } }
.cdr-author-portrait{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/5;
}
.cdr-author-portrait img{ width:100%; height:100%; object-fit:cover; }
.cdr-author-portrait::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(31,51,42,.55) 0%, transparent 45%);
}
.cdr-author-photo-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--grad-gold);
  text-align:center;
}
.cdr-author-photo-placeholder-mark{
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(250,246,236,.5);
  font-family:var(--font-script); font-size:2.4rem; color:var(--c-warm-cream);
}
.cdr-author-photo-placeholder-label{
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,246,236,.85); line-height:1.6;
}
.cdr-author-monogram{
  position:absolute; bottom:-26px; left:-26px; z-index:2;
  width:92px; height:92px; border-radius:50%;
  background:var(--grad-gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-script); font-size:2.9rem; color:var(--c-primary-dark);
  box-shadow:var(--shadow-gold); border:4px solid var(--c-white);
}
@media (max-width:640px){
  .cdr-author-monogram{ width:66px; height:66px; font-size:2.1rem; bottom:-16px; left:-16px; border-width:3px; }
}
.cdr-signature{
  font-family:var(--font-script);
  font-size:2.6rem;
  color:var(--c-golden-brown);
  margin-top:12px;
}

/* -------------------------------------------------------------------------
   10. Platforms
   ------------------------------------------------------------------------- */
.cdr-platforms{
  background:var(--c-primary-dark); color:var(--c-warm-cream);
  text-align:center; position:relative; overflow:hidden;
}
/* Note: ::before is reserved site-wide for the thin section-divider line
   (see .cdr-section::before) — this section's own decorative glow + grain
   are combined into ::after so the divider still applies here too. */
.cdr-platforms::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 55% 50% at 12% 0%, rgba(168,130,60,.2), transparent 60%),
    radial-gradient(ellipse 50% 45% at 92% 100%, rgba(168,130,60,.14), transparent 60%);
}
.cdr-platforms .cdr-container{ position:relative; z-index:1; }
.cdr-platforms-cover{
  position:absolute; bottom:-8%; width:130px; aspect-ratio:2/3; z-index:0;
  opacity:.4; pointer-events:none;
  border-radius:var(--radius-s); overflow:hidden;
  box-shadow:0 30px 60px rgba(14,20,15,.55);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image:linear-gradient(180deg, #000 55%, transparent 96%);
}
.cdr-platforms-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.cdr-platforms-cover--left{ left:-30px; transform:rotate(-9deg); }
.cdr-platforms-cover--right{ right:-30px; transform:rotate(9deg); }
@media (max-width:900px){
  .cdr-platforms-cover{ width:100px; opacity:.3; }
  .cdr-platforms-cover--left{ left:-36px; }
  .cdr-platforms-cover--right{ right:-36px; }
}
@media (max-width:640px){ .cdr-platforms-cover{ display:none; } }
.cdr-platforms .cdr-eyebrow{ justify-content:center; color:var(--c-light-gold); }
.cdr-platforms .cdr-eyebrow::before{ background:var(--c-primary-gold); }
.cdr-platforms h2{ color:var(--c-warm-cream); }
.cdr-platforms-sub{ max-width:560px; margin:0 auto 48px; font-size:1.1rem; color:rgba(250,246,236,.78); }
.cdr-platform-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:820px; margin:0 auto; }
@media (max-width:720px){ .cdr-platform-grid{ grid-template-columns:1fr; max-width:400px; } }
.cdr-platform-card{
  position:relative;
  padding:44px 32px 38px;
  border:1px solid rgba(168,130,60,.25);
  border-radius:var(--radius-l);
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), background var(--dur-m) var(--ease);
}
.cdr-platform-card:hover{
  transform:translateY(-8px);
  border-color:var(--c-primary-gold);
  background:rgba(255,255,255,.06);
  box-shadow:0 26px 60px rgba(168,130,60,.22);
}
.cdr-platform-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-gold-soft);
  font-family:var(--font-heading); font-weight:700; font-size:1.15rem; color:var(--c-primary-dark);
  transition:transform var(--dur-m) var(--ease);
}
.cdr-platform-card:hover .cdr-platform-icon{ transform:scale(1.08) rotate(-4deg); }
.cdr-platform-mark{
  font-family:var(--font-heading); font-size:1.7rem; color:var(--c-warm-cream); margin-bottom:8px; font-weight:600;
}
.cdr-platform-card p{ font-size:1.02rem; color:rgba(250,246,236,.72); margin-bottom:26px; }
.cdr-platforms .cdr-btn--outline{ color:var(--c-light-gold); border-color:rgba(199,162,92,.5); }
.cdr-platforms .cdr-btn--outline:hover{ background:rgba(199,162,92,.12); border-color:var(--c-primary-gold); color:var(--c-warm-cream); }

/* -------------------------------------------------------------------------
   11. Pricing / formats
   ------------------------------------------------------------------------- */
.cdr-pricing{ background:var(--c-warm-cream); }
.cdr-book-editions + .cdr-book-editions{ margin-top:88px; padding-top:64px; border-top:1px solid rgba(138,109,46,.18); }
.cdr-book-editions-title{ text-align:center; margin-bottom:36px; }
.cdr-pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:stretch; }
@media (max-width:960px){ .cdr-pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
.cdr-price-card{
  position:relative;
  background:var(--c-white);
  border:1px solid rgba(138,109,46,.22);
  border-radius:var(--radius-l);
  padding:44px 34px;
  text-align:center;
  box-shadow:0 14px 40px rgba(31,51,42,.06);
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
  display:flex; flex-direction:column;
}
.cdr-price-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-soft); border-color:var(--c-primary-gold); }
.cdr-price-card--featured{ border-color:var(--c-primary-gold); border-width:2px; box-shadow:var(--shadow-gold); }
.cdr-price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad-gold-soft); color:var(--c-primary-dark);
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 18px; border-radius:20px; box-shadow:var(--shadow-gold);
  white-space:nowrap;
}
.cdr-price-cover{
  width:104px; margin:0 auto 22px; border-radius:var(--radius-s);
  box-shadow:0 14px 30px rgba(31,51,42,.22);
  transition:transform var(--dur-m) var(--ease);
}
.cdr-price-card:hover .cdr-price-cover{ transform:scale(1.06); }
.cdr-price-label{ font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-golden-brown); font-weight:600; margin-bottom:10px; }
.cdr-price-card h3{ margin-bottom:6px; }
.cdr-price-amount{ font-family:var(--font-heading); font-size:2.6rem; color:var(--c-primary-dark); margin:14px 0 20px; }
.cdr-price-amount sup{ font-size:1.1rem; top:-.9em; }
.cdr-price-features{ text-align:left; margin:0 0 30px; flex:1; }
.cdr-price-features li{ position:relative; padding-left:26px; margin-bottom:12px; color:var(--c-text-dark); font-size:1.02rem; }
.cdr-price-features li::before{
  content:"✦"; position:absolute; left:0; top:1px; color:var(--c-primary-gold); font-size:.85rem;
}

/* -------------------------------------------------------------------------
   11a. Books overview grid / cards
   ------------------------------------------------------------------------- */
.cdr-books-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px; align-items:stretch; justify-content:center; }
@media (max-width:960px){ .cdr-books-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
.cdr-book-card{
  position:relative;
  background:var(--c-white);
  border:1px solid rgba(138,109,46,.16);
  border-radius:var(--radius-l);
  padding:34px 30px;
  text-align:center;
  box-shadow:0 10px 30px rgba(31,51,42,.05);
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.cdr-book-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-gold-soft);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-m) var(--ease);
}
.cdr-book-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-soft); border-color:var(--c-primary-gold); }
.cdr-book-card:hover::before{ transform:scaleX(1); }
.cdr-book-card-cover{ width:180px; margin:0 auto 22px; overflow:hidden; border-radius:var(--radius-s); }
.cdr-book-card-cover img{
  border-radius:var(--radius-s); box-shadow:0 14px 30px rgba(31,51,42,.22);
  transition:transform var(--dur-m) var(--ease);
}
.cdr-book-card:hover .cdr-book-card-cover img{ transform:scale(1.05); }
.cdr-book-card:hover .cdr-cover-placeholder{ transform:scale(1.03); }
.cdr-book-card h3{ margin-bottom:10px; }
.cdr-book-card-price{ color:var(--c-golden-brown); font-weight:600; margin-bottom:20px; }
.cdr-book-card-blurb{ color:var(--c-text-dark); font-size:.98rem; flex:1; margin-bottom:24px; }
.cdr-btn--disabled{ opacity:.6; cursor:not-allowed; }
.cdr-cover-placeholder{
  position:relative;
  width:100%; aspect-ratio:2/3;
  background:var(--grad-gold);
  border-radius:var(--radius-s);
  box-shadow:0 14px 30px rgba(31,51,42,.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:var(--c-warm-cream);
  transition:transform var(--dur-m) var(--ease);
}
.cdr-cover-placeholder-initial{ font-family:var(--font-heading); font-size:3.2rem; color:var(--c-light-gold); }
.cdr-cover-placeholder .cdr-divider{ color:rgba(250,246,236,.6); }
.cdr-cover-placeholder-badge{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(14,20,15,.35); color:var(--c-warm-cream);
  padding:6px 14px; border-radius:20px;
}

/* -------------------------------------------------------------------------
   12. Cinematic quote
   ------------------------------------------------------------------------- */
.cdr-quote-section{
  position:relative;
  background:var(--c-warm-cream);
  color:var(--c-text-dark);
  text-align:center;
  overflow:hidden;
}
.cdr-quote-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(168,130,60,.16) 0%, transparent 60%);
}
.cdr-quote-mark{ font-family:var(--font-heading); font-size:6rem; color:var(--c-golden-brown); line-height:1; opacity:.6; }
.cdr-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.8rem,3.4vw,3rem);
  max-width:820px; margin:0 auto 30px;
  color:var(--c-primary-dark);
  position:relative; z-index:1;
  line-height:1.4;
}
.cdr-quote span{ color:var(--c-golden-brown); }

/* -------------------------------------------------------------------------
   13. Reviews
   ------------------------------------------------------------------------- */
.cdr-reviews-section{ background:var(--c-soft-beige); }
.cdr-stars{ display:inline-flex; gap:2px; color:var(--c-primary-gold); }
.cdr-stars .star{ opacity:.28; }
.cdr-stars .star--on{ opacity:1; }
.cdr-review-track{ display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 30px; }
.cdr-review-track::-webkit-scrollbar{ height:6px; }
.cdr-review-track::-webkit-scrollbar-thumb{ background:var(--c-primary-gold); border-radius:6px; }
.cdr-review-card{
  flex:0 0 340px; scroll-snap-align:start;
  background:var(--c-white); border:1px solid rgba(138,109,46,.18); border-radius:var(--radius-l);
  padding:34px 30px; box-shadow:0 12px 32px rgba(31,51,42,.06); position:relative;
}
.cdr-review-quote-mark{ position:absolute; top:18px; right:26px; font-family:var(--font-heading); font-size:2.6rem; color:var(--c-soft-beige); }
.cdr-review-card p{ color:var(--c-text-dark); font-style:italic; margin:16px 0 20px; }
.cdr-review-person{ display:flex; align-items:center; gap:12px; }
.cdr-review-avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--grad-gold); color:var(--c-warm-cream);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:1rem;
}
.cdr-review-name{ font-weight:600; color:var(--c-primary-dark); font-family:var(--font-body); }
.cdr-review-date{ font-size:.88rem; color:var(--c-golden-brown); }
.cdr-review-controls{ display:flex; gap:14px; justify-content:center; margin-bottom:10px; }
.cdr-review-controls button{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(138,109,46,.4); background:transparent; color:var(--c-golden-brown);
  transition:all var(--dur-s) var(--ease);
}
.cdr-review-controls button:hover{ background:var(--c-primary-gold); color:var(--c-primary-dark); border-color:var(--c-primary-gold); }

/* -------------------------------------------------------------------------
   14. Final CTA
   ------------------------------------------------------------------------- */
.cdr-final-cta{
  position:relative; overflow:hidden; color:var(--c-text-dark);
  background:var(--c-soft-beige);
}
.cdr-final-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 30%, rgba(199,162,92,.35), transparent 55%);
}
.cdr-final-cta h2{ color:var(--c-primary-dark); }
.cdr-final-cta-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .cdr-final-cta-grid{ grid-template-columns:1fr; text-align:center; } .cdr-final-cta-grid .cdr-btn-row{ justify-content:center; } }

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */
.cdr-footer{
  position:relative; overflow:hidden;
  background:var(--c-soft-beige);
  color:rgba(34,41,31,.85); padding:86px 0 0;
}
.cdr-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 85% 0%, rgba(168,130,60,.18), transparent 60%),
             radial-gradient(ellipse 50% 40% at 8% 100%, rgba(168,130,60,.12), transparent 60%);
}
.cdr-footer > .cdr-container{ position:relative; z-index:1; }

.cdr-footer-flourish{ display:flex; justify-content:center; color:var(--c-primary-gold); opacity:.75; margin-bottom:52px; }
.cdr-footer-flourish .cdr-divider{ margin:0; }

.cdr-footer-top{ display:grid; grid-template-columns:1.3fr .85fr 1fr; gap:60px; padding-bottom:56px; }
@media (max-width:820px){ .cdr-footer-top{ grid-template-columns:1fr; text-align:center; gap:44px; } }

.cdr-footer-logo{ font-family:var(--font-heading); font-size:1.7rem; color:var(--c-primary-dark); margin-bottom:6px; }
.cdr-footer-logo span{ color:var(--c-primary-gold); font-style:italic; font-family:var(--font-display); }
.cdr-footer-role{
  font-size:.76rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-golden-brown); margin:0 0 18px;
}
.cdr-footer-tag{ max-width:340px; font-size:1rem; color:rgba(34,41,31,.75); line-height:1.7; }
@media (max-width:820px){ .cdr-footer-tag{ margin-left:auto; margin-right:auto; } }
.cdr-footer-cta{ margin-top:8px; }

.cdr-footer h4{
  color:var(--c-primary-dark); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 26px; font-family:var(--font-body); font-weight:700; position:relative; padding-bottom:16px;
}
.cdr-footer h4::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:1px; background:var(--c-primary-gold);
}
@media (max-width:820px){ .cdr-footer h4::after{ left:50%; transform:translateX(-50%); } }

.cdr-footer-nav li{ margin-bottom:14px; }
.cdr-footer-nav a{
  font-size:1rem; color:rgba(34,41,31,.8); transition:color var(--dur-s), padding-left var(--dur-s);
  position:relative;
}
.cdr-footer-nav a:hover{ color:var(--c-golden-brown); }
@media (min-width:821px){
  .cdr-footer-nav a::before{ content:"—"; position:absolute; left:-22px; opacity:0; color:var(--c-primary-gold); transition:opacity var(--dur-s), left var(--dur-s); }
  .cdr-footer-nav a:hover::before{ opacity:1; left:-18px; }
}

.cdr-footer-social li{ margin-bottom:16px; }
.cdr-footer-social a{
  display:flex; align-items:center; gap:14px; font-size:.96rem; color:rgba(34,41,31,.8);
}
.cdr-footer-social a:hover{ color:var(--c-golden-brown); }
.cdr-footer-social a:hover .cdr-social-icon{
  background:var(--grad-gold-soft); border-color:transparent; color:var(--c-primary-dark);
  transform:translateY(-2px);
}
.cdr-social-icon{
  flex:none; width:36px; height:36px; padding:8px; box-sizing:border-box;
  border:1px solid rgba(168,130,60,.4); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-golden-brown); transition:all var(--dur-s) var(--ease);
}
.cdr-social-icon svg{ width:100%; height:100%; }
@media (max-width:820px){ .cdr-footer-social a{ justify-content:center; } }

.cdr-footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:8px; padding:28px 0; border-top:1px solid rgba(168,130,60,.22);
  font-size:.9rem; color:rgba(34,41,31,.6);
}
.cdr-footer-bottom p{ margin:0; }
@media (max-width:600px){ .cdr-footer-bottom{ flex-direction:column; text-align:center; gap:14px; } }
.cdr-footer-top-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(34,41,31,.7); transition:color var(--dur-s), transform var(--dur-s);
  white-space:nowrap;
}
.cdr-footer-top-link:hover{ color:var(--c-golden-brown); }
.cdr-footer-top-link span{ display:inline-block; transition:transform var(--dur-s) var(--ease); }
.cdr-footer-top-link:hover span{ transform:translateY(-3px); }

/* -------------------------------------------------------------------------
   16. Page hero (inner pages)
   ------------------------------------------------------------------------- */
.cdr-page-hero{
  position:relative; padding:140px 0 60px; text-align:center; overflow:hidden;
  background:var(--c-warm-cream); color:var(--c-text-dark);
}
.cdr-page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.cdr-page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(168,130,60,.16) 0%, transparent 65%);
}
@media (max-width:640px){
  .cdr-page-hero{ padding:120px 0 48px; }
}
.cdr-page-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.cdr-page-hero h1{ color:var(--c-primary-dark); }
.cdr-page-hero .cdr-eyebrow{ justify-content:center; }
.cdr-page-hero p{ color:rgba(34,41,31,.85); font-size:1.15rem; }

/* -------------------------------------------------------------------------
   17. Theme blocks (feature cards, excerpts, forms) shared across pages
   ------------------------------------------------------------------------- */
.cdr-feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.cdr-feature-grid--narrow{ grid-template-columns:repeat(3,1fr); max-width:980px; margin:0 auto; }
@media (max-width:960px){ .cdr-feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cdr-feature-grid{ grid-template-columns:1fr; } }
.cdr-feature-card{
  background:var(--c-white); border:1px solid rgba(138,109,46,.18); border-radius:var(--radius-l);
  padding:38px 28px; text-align:center; transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.cdr-feature-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-soft); }
.cdr-feature-icon{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:var(--grad-gold-soft); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:1.5rem; color:var(--c-primary-dark);
}
.cdr-feature-card p{ color:var(--c-text-dark); font-size:1.02rem; margin-bottom:0; }

.cdr-excerpt{
  position:relative; padding:44px 50px; background:var(--c-white); border-left:3px solid var(--c-primary-gold);
  border-radius:0 var(--radius-l) var(--radius-l) 0; box-shadow:0 10px 30px rgba(31,51,42,.06); margin-bottom:30px;
}
.cdr-excerpt p{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--c-primary-dark); margin:0; line-height:1.6; }
.cdr-excerpt cite{ display:block; margin-top:16px; font-family:var(--font-body); font-style:normal; font-size:.88rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-golden-brown); }

.cdr-msg-box{
  background:var(--c-white); border:1px solid rgba(138,109,46,.2); border-radius:var(--radius-l);
  padding:50px; box-shadow:0 14px 40px rgba(31,51,42,.06);
}

/* Forms */
.cdr-form{ display:grid; gap:20px; }
.cdr-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .cdr-form-row{ grid-template-columns:1fr; } }
.cdr-field label{ display:block; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-golden-brown); margin-bottom:8px; font-weight:600; }
.cdr-field input, .cdr-field textarea{
  width:100%; padding:15px 18px; border:1px solid rgba(138,109,46,.3); border-radius:var(--radius-s);
  background:rgba(255,255,255,.6); color:var(--c-text-dark); transition:border-color var(--dur-s), box-shadow var(--dur-s);
}
.cdr-field input:focus, .cdr-field textarea:focus{ outline:none; border-color:var(--c-primary-gold); box-shadow:0 0 0 3px rgba(168,130,60,.18); }
.cdr-field textarea{ resize:vertical; min-height:140px; }
.cdr-hp{ display:none !important; }
.cdr-form-msg{ padding:14px 18px; border-radius:var(--radius-s); font-size:.9rem; display:none; }
.cdr-form-msg.is-visible{ display:block; }
.cdr-form-msg.is-success{ background:rgba(138,109,46,.12); color:var(--c-golden-brown); border:1px solid rgba(138,109,46,.3); }
.cdr-form-msg.is-error{ background:rgba(180,60,40,.1); color:#8a2f1c; border:1px solid rgba(180,60,40,.3); }
.cdr-star-picker{ display:flex; gap:8px; }
.cdr-star-picker button{ background:none; border:none; font-size:1.6rem; color:var(--c-soft-beige); transition:color var(--dur-s); }
.cdr-star-picker button.is-active, .cdr-star-picker button:hover{ color:var(--c-primary-gold); }

/* Contact info list */
.cdr-contact-info li{ display:flex; align-items:center; gap:14px; margin-bottom:18px; font-size:.98rem; }
.cdr-contact-info .cdr-social-icon{ width:38px; height:38px; color:var(--c-golden-brown); border-color:rgba(138,109,46,.4); }

/* -------------------------------------------------------------------------
   18. WooCommerce store styling (shop archive, single product, cart)
   ------------------------------------------------------------------------- */
.woocommerce-page main#cdr-main{ display:block; padding-top:150px; background:var(--c-warm-cream); }
/* The shop archive & book-category archives get their own hero banner
   (cdr_shop_hero_banner()), which already supplies top clearance below
   the fixed header — so the generic wrapper padding would double up. */
.woocommerce-shop main#cdr-main,
.tax-product_cat main#cdr-main{ padding-top:0; }
.cdr-shop-hero{ margin-bottom:0; }
.cdr-shop-hero .cdr-eyebrow{ justify-content:center; }

.woocommerce-breadcrumb{
  max-width:var(--container-w); margin:0 auto; padding:38px 32px 0;
  font-size:.85rem; letter-spacing:.04em; color:var(--c-golden-brown);
}
.woocommerce-breadcrumb a{ color:var(--c-golden-brown); border-bottom:1px solid rgba(138,109,46,.3); }

/* Result count + sort toolbar */
.woocommerce-notices-wrapper{ max-width:var(--container-w); margin:0 auto; padding:0 32px; }
.woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce > .woocommerce-result-count,
.woocommerce > .woocommerce-ordering{
  max-width:var(--container-w); margin:0 auto; padding:0 32px;
}
.woocommerce-result-count,
.woocommerce-ordering{
  display:block; max-width:var(--container-w); margin:0 auto; padding:34px 32px 22px;
}
.woocommerce-result-count{
  padding-bottom:0; font-size:.92rem; color:var(--c-golden-brown); letter-spacing:.03em;
}
.woocommerce-ordering{ display:flex; justify-content:flex-end; padding-top:14px; }
.woocommerce-ordering select.orderby{
  appearance:none; -webkit-appearance:none;
  background:var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A6D2E' stroke-width='1.4' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid rgba(138,109,46,.3); border-radius:var(--radius-s);
  padding:12px 40px 12px 18px; font-family:var(--font-body); font-size:.85rem; letter-spacing:.03em;
  color:var(--c-text-dark); cursor:pointer;
}
.woocommerce-ordering select.orderby:focus{ outline:none; border-color:var(--c-primary-gold); box-shadow:0 0 0 3px rgba(168,130,60,.18); }

/* Shop / book-category archive grid — premium cards matching .cdr-price-card */
.woocommerce ul.products{
  max-width:var(--container-w); margin:0 auto; padding:16px 32px 110px;
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:34px; list-style:none;
}
@media (max-width:900px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .woocommerce ul.products{ grid-template-columns:1fr; } }
.woocommerce ul.products li.product{
  display:flex; flex-direction:column;
  background:var(--c-white); border:1px solid rgba(138,109,46,.2); border-radius:var(--radius-l);
  padding:34px 30px 30px; text-align:center; box-shadow:0 14px 40px rgba(31,51,42,.06);
  transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.woocommerce ul.products li.product:hover{ transform:translateY(-10px); box-shadow:var(--shadow-soft); border-color:var(--c-primary-gold); }
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display:flex; flex-direction:column; flex:1; align-items:center;
}
.woocommerce ul.products li.product img{
  width:150px; height:225px; object-fit:cover;
  border-radius:var(--radius-s); margin:0 auto 22px;
  box-shadow:0 14px 30px rgba(31,51,42,.22);
  transition:transform var(--dur-m) var(--ease);
}
.woocommerce ul.products li.product:hover img{ transform:scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-heading); font-weight:600; font-size:1.2rem; line-height:1.3;
  color:var(--c-primary-dark); margin:0 0 10px;
}
.woocommerce ul.products li.product .star-rating{ display:none; }
.woocommerce ul.products li.product .price{
  margin-top:auto; padding-top:8px;
  color:var(--c-primary-dark); font-weight:600; font-family:var(--font-heading); font-size:1.7rem;
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .price del{ opacity:.5; font-size:.7em; margin-right:.4em; }
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  margin-top:20px; padding:clamp(7px,.9vw,10px) clamp(12px,2vw,18px);
  background:transparent !important; color:var(--c-deep-brown) !important;
  border:1px solid rgba(138,109,46,.5) !important; border-radius:var(--radius-s);
  font-family:var(--font-body); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(.62rem,.55vw,.68rem);
  transition:all var(--dur-s) var(--ease);
}
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover{
  background:rgba(138,109,46,.08) !important; border-color:var(--c-golden-brown) !important; transform:translateY(-2px);
}
.woocommerce ul.products li.product a.add_to_cart_button.added,
.woocommerce ul.products li.product a.button.added{
  background:var(--grad-gold-soft) !important; color:var(--c-primary-dark) !important; border-color:transparent !important;
}
.woocommerce ul.products li.product a.added_to_cart{
  display:block; margin-top:10px; font-size:.8rem; color:var(--c-golden-brown); text-decoration:underline;
}

/* Single product layout */
.woocommerce div.product{
  max-width:var(--container-w); margin:0 auto; padding:0 32px 100px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
@media (max-width:860px){ .woocommerce div.product{ grid-template-columns:1fr; } }
.woocommerce div.product .woocommerce-product-gallery{ border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-soft); }
.woocommerce div.product .product_title{ font-family:var(--font-heading); color:var(--c-primary-dark); font-size:2.1rem; margin-bottom:10px; }
.woocommerce div.product p.price{ font-family:var(--font-heading); font-size:1.8rem; color:var(--c-golden-brown); margin-bottom:20px; }
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:20px; }
.woocommerce div.product .star-rating{ color:var(--c-primary-gold); }
.woocommerce div.product .woocommerce-product-details__short-description ul{ margin:16px 0 26px; padding-left:0; list-style:none; }
.woocommerce div.product .woocommerce-product-details__short-description ul li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--c-text-dark); }
.woocommerce div.product .woocommerce-product-details__short-description ul li::before{ content:"✦"; position:absolute; left:0; color:var(--c-primary-gold); font-size:.85rem; }
.woocommerce div.product form.cart{ display:flex; gap:14px; align-items:center; margin-bottom:30px; }
.woocommerce div.product .quantity input{
  width:70px; padding:14px; border:1px solid rgba(138,109,46,.3); border-radius:var(--radius-s); background:var(--c-white); text-align:center;
}
.woocommerce div.product .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; padding:clamp(8px,1vw,11px) clamp(16px,2.4vw,22px);
  background:var(--grad-gold-soft) !important; color:var(--c-primary-dark) !important; border:none !important;
  border-radius:var(--radius-s); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(.68rem,.65vw,.75rem);
  box-shadow:var(--shadow-gold); transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.woocommerce div.product .single_add_to_cart_button:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 16px 46px rgba(168,130,60,.4); }
.woocommerce div.product .product_meta{ font-size:.85rem; color:var(--c-golden-brown); }
.woocommerce div.product .woocommerce-tabs{ grid-column:1 / -1; margin-top:40px; border-top:1px solid rgba(138,109,46,.2); padding-top:30px; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ display:flex; gap:26px; list-style:none; padding:0; margin-bottom:24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-family:var(--font-heading); font-size:1.1rem; color:var(--c-golden-brown); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--c-primary-dark); }
.woocommerce div.product .related.products{ grid-column:1 / -1; margin-top:60px; border-top:1px solid rgba(138,109,46,.2); padding-top:50px; }
.woocommerce div.product .related.products > h2{ text-align:center; margin-bottom:36px; }
.woocommerce div.product .related.products ul.products{ padding:0; }
.woocommerce #reviews{ grid-column:1 / -1; }
.woocommerce #reviews h2{ margin-bottom:20px; }
.woocommerce #reviews .comment-form-rating select{ padding:10px; border-radius:var(--radius-s); border:1px solid rgba(138,109,46,.3); }
.woocommerce #reviews #respond input[type="submit"]{
  background:var(--grad-gold-soft); color:var(--c-primary-dark); border:none; padding:clamp(8px,1vw,11px) clamp(14px,2.2vw,20px);
  border-radius:var(--radius-s); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:clamp(.68rem,.65vw,.75rem); cursor:pointer;
}
.woocommerce #reviews textarea, .woocommerce #reviews input[type="text"], .woocommerce #reviews input[type="email"]{
  width:100%; padding:14px; border:1px solid rgba(138,109,46,.3); border-radius:var(--radius-s); background:var(--c-white);
}

/* Cart & checkout minimal styling */
.woocommerce-cart main#cdr-main, .woocommerce-checkout main#cdr-main{ padding-top:150px; padding-bottom:100px; background:var(--c-warm-cream); overflow-x:hidden; }

/* WooCommerce's block-based Cart/Checkout (wp:woocommerce/cart, wp:woocommerce/checkout)
   render with WordPress core's .alignwide class, which uses
   margin:calc(50% - 50vw) to break out to a "wide" width — a mechanism
   meant for block themes that define --wp--style--global--wide-size.
   This classic theme never sets that custom property, so the calc()
   pushed the whole component off-screen to the left on narrow viewports.
   Reset it to a normal centered, contained block. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide{
  width:auto; max-width:var(--container-w);
  margin-left:auto; margin-right:auto;
  padding:0 32px; box-sizing:border-box;
}
@media (max-width:640px){
  .wp-block-woocommerce-cart.alignwide,
  .wp-block-woocommerce-checkout.alignwide{ padding:0 22px; }
}
/* "New in store" cross-sell grid shown on an empty cart */
.wc-block-grid__products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .wc-block-grid__products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wc-block-grid__products{ grid-template-columns:1fr; } }
.wc-block-grid__product-title{ font-family:var(--font-heading); color:var(--c-primary-dark); }
.wc-block-cart__empty-cart__title{ text-align:center; }
.woocommerce table.shop_table{ max-width:var(--container-w); margin:0 auto; border-collapse:collapse; width:calc(100% - 64px); }
.woocommerce table.shop_table th{ font-family:var(--font-heading); text-align:left; padding:14px; border-bottom:2px solid var(--c-primary-gold); }
.woocommerce table.shop_table td{ padding:14px; border-bottom:1px solid rgba(138,109,46,.15); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--grad-gold-soft) !important; color:var(--c-primary-dark) !important; border:none !important; border-radius:var(--radius-s) !important;
  padding:clamp(7px,.9vw,10px) clamp(12px,2vw,18px) !important; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:clamp(.62rem,.55vw,.68rem);
}
.woocommerce-page h1.entry-title, .woocommerce-page h1.page-title{
  max-width:var(--container-w); margin:0 auto 30px; padding:0 32px; font-size:2.2rem;
}