/* =========================================================
   The Journey by TTSOF — shared stylesheet
   Palette, type and decorative treatment follow the
   supplied brand mockup (Website_layout.png).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,500;1,600&family=Lato:wght@300;400;600;700&family=Dancing+Script:wght@400;500;600&display=swap');

:root{
  /* neutrals */
  --paper:        #fbf9f6;
  --paper-warm:   #f9f5ef;
  --cream:        #f7f1e8;
  --cream-deep:   #f1e7d8;
  --white:        #ffffff;

  /* blush / rose */
  --blush:        #fbeef0;
  --blush-deep:   #f6dee3;
  --rose:         #b5596f;   /* primary button — sampled from the mockup */
  --rose-dark:    #9d4258;
  --rose-soft:    #d99aa9;

  /* deep teal — headings, brand, secondary button */
  --teal:         #16454e;
  --teal-dark:    #0f333a;

  /* warm accents */
  --terracotta:   #9c5336;
  --gold:         #bf9263;
  --gold-soft:    #dcc0a0;

  --ink:          #33434a;
  --ink-soft:     #667a82;
  --rule:         rgba(22,69,78,.13);
  --rule-gold:    rgba(191,146,99,.45);

  /* legacy aliases so older markup keeps working */
  --maroon:       #b5596f;
  --maroon-dark:  #9d4258;
  --forest:       #16454e;
  --forest-dark:  #0f333a;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', -apple-system, Helvetica, Arial, sans-serif;
  --font-script:  'Dancing Script', 'Playfair Display', cursive;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --shadow-card:  0 14px 34px -18px rgba(40,26,20,.30);
  --shadow-photo: 0 26px 60px -28px rgba(40,26,20,.45);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 .5em;
  color: var(--teal);
  letter-spacing: .1px;
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }
:focus-visible{ outline: 2px solid var(--rose); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------
   Shared decorative pieces (from the mockup)
   --------------------------------------------------------- */

/* handwritten script lines — "Healing Gratitude Restoration" etc. */
.script{
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--gold);
  line-height: 1.35;
}
.script .heart{ color: var(--gold); display:block; margin-top:2px; }

/* rule — gold heart — rule */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin: 22px auto; max-width: 440px; color: var(--gold);
}
.ornament::before, .ornament::after{
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--rule-gold), transparent);
}
.ornament svg{ width:14px; height:14px; flex-shrink:0; }

/* gold letterspaced label between two rules — "MY JOURNEY" */
.label-rule{
  display:flex; align-items:center; gap:20px;
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color: var(--gold); font-weight:700; margin: 42px 0 30px;
}
.label-rule::before, .label-rule::after{
  content:''; flex:1; height:1px; background: var(--rule-gold);
}

/* thin gold hairline */
.rule-gold{ border:none; height:1px; background: var(--rule-gold); margin: 36px 0; }

/* corner botanicals */
.deco{ position:absolute; pointer-events:none; user-select:none; z-index:0; }
.deco svg{ display:block; }
.deco-bloom{ color: var(--rose-soft); opacity:.6; }
.deco-sprig{ color: var(--gold); opacity:.5; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-maroon{ background: var(--rose); color: var(--white); }
.btn-maroon:hover{ background: var(--rose-dark); box-shadow: 0 10px 22px -10px rgba(181,89,111,.7); }
.btn-forest{ background: var(--teal); color: var(--white); }
.btn-forest:hover{ background: var(--teal-dark); box-shadow: 0 10px 22px -10px rgba(22,69,78,.6); }
.btn-outline{ background: var(--white); border-color: var(--gold-soft); color: var(--ink); }
.btn-outline:hover{ background: var(--cream); border-color: var(--gold); color: var(--teal); }
.btn-outline-maroon{ background: var(--white); border-color: var(--gold-soft); color: var(--rose); }
.btn-outline-maroon:hover{ background: var(--blush); border-color: var(--rose); }
.btn-white{ background: var(--white); color: var(--teal); }
.btn-white:hover{ background: var(--cream-deep); }
.btn-block{ width: 100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------------------------------------------------------
   Header / nav
   --------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid rgba(22,69,78,.08);
  box-shadow: 0 2px 14px -10px rgba(40,26,20,.4);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 32px;
  max-width: var(--container); margin:0 auto;
  gap: 20px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{ width:48px; height:36px; color: var(--gold); flex-shrink:0; }
.brand-text{ line-height:1.02; }
.brand-text .name{
  font-family: var(--font-display); font-size:1.5rem; font-weight:500;
  color: var(--teal); letter-spacing:.2px;
}
.brand-text .sub{
  display:block; font-size:.56rem; letter-spacing:.34em;
  color: var(--gold); font-weight:700; padding-left:3px; margin-top:1px;
}

.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-size: .92rem; font-weight:400; color: var(--ink);
  position: relative; padding: 4px 0;
}
.main-nav a:hover{ color: var(--rose); }
.main-nav a.active{ color: var(--rose); }
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; background: var(--rose);
}
.nav-actions{ display:flex; align-items:center; gap:20px; }
.nav-actions .btn{ padding: 13px 30px; }
.cart-link{ position:relative; display:flex; color: var(--teal); }
.cart-count{
  position:absolute; top:-8px; right:-10px;
  background: var(--rose); color:#fff;
  font-size:.65rem; font-weight:700;
  min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding: 0 2px;
}
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle svg{ width:26px; height:26px; color: var(--teal); }

@media (max-width: 980px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--white); flex-direction:column; align-items:flex-start;
    padding: 18px 32px 26px; gap:16px; border-bottom:1px solid var(--rule);
    display:none; box-shadow: 0 16px 24px -18px rgba(40,26,20,.5);
  }
  .main-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}
@media (max-width: 620px){
  .nav-actions .btn{ display:none; }
  .brand-text .name{ font-size:1.25rem; }
}

/* ---------------------------------------------------------
   Photo banners
   --------------------------------------------------------- */
.photo-banner{
  position:relative; overflow:hidden;
  background: var(--paper-warm);
  border-bottom: 1px solid rgba(22,69,78,.07);
}
.photo-banner .banner-media{
  position:absolute; inset:0 auto 0 0; width:52%;
  background-size: cover; background-position: center;
}
.photo-banner .banner-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(249,245,239,0) 38%, var(--paper-warm) 97%);
}
.photo-banner .banner-inner{
  position:relative; z-index:1;
  max-width: var(--container); margin:0 auto; padding: 54px 32px;
  display:grid; grid-template-columns: 47% 1fr; gap:40px; align-items:center;
  min-height: 258px;
}
.photo-banner .banner-copy h1{ font-size: clamp(1.9rem,3.6vw,2.7rem); margin-bottom:4px; }
.photo-banner .banner-copy h2{ font-size: clamp(1.05rem,1.8vw,1.35rem); font-weight:500; margin-bottom:14px; }
.photo-banner .banner-copy p{ max-width: 470px; margin:0; }
@media (max-width: 820px){
  .photo-banner .banner-media{ position:relative; width:100%; height:190px; }
  .photo-banner .banner-media::after{ background: linear-gradient(180deg, rgba(249,245,239,0) 45%, var(--paper-warm) 100%); }
  .photo-banner .banner-inner{ grid-template-columns:1fr; padding: 0 32px 42px; min-height:0; }
}

/* script ribbon — "Faith. Healing. Gratitude. A Brighter Tomorrow." */
.ribbon-banner{
  position:relative; overflow:hidden;
  height: 132px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(90deg, var(--cream-deep) 0%, #ece0cc 55%, #e4d3ba 100%);
  border-bottom: 1px solid rgba(22,69,78,.07);
}
.ribbon-floral{
  position:absolute; inset:0 auto 0 0; width: 18%;
  background: url('../images/banner-floral.jpg') center 38% / cover no-repeat;
}
.ribbon-floral::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(241,231,216,0) 24%, rgba(238,226,206,.7) 72%, #ece0cc 100%);
}
.ribbon-banner span{
  position:relative; z-index:1;
  font-family: var(--font-script); font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: #5e4630; padding-left: 12%; text-align:center;
}
@media (max-width:700px){
  .ribbon-banner{ height:104px; }
  .ribbon-floral{ width: 30%; }
  .ribbon-banner span{ padding-left: 30%; padding-right: 16px; font-size:1.05rem; }
}

/* legacy centred page hero (shop / cart / checkout pages) */
.page-hero{
  background: linear-gradient(135deg, var(--blush) 0%, var(--cream) 100%);
  padding: 54px 0;
  text-align:center;
  border-bottom: 1px solid rgba(22,69,78,.07);
}
.page-hero .kicker{ color: var(--gold); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; margin-bottom:10px; }
.page-hero h1{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-hero p{ max-width: 560px; margin: 0 auto; color: var(--ink-soft); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
  background: linear-gradient(160deg, #f1e2c6 0%, #ecd9b8 55%, #e6cfa8 100%);
  color: var(--ink); padding: 52px 0 26px; margin-top: 90px;
  border-top: 1px solid rgba(191,146,99,.35);
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 34px; }
.footer-grid h4{ font-family: var(--font-body); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px; color: var(--terracotta); }
.footer-grid p, .footer-grid a{ color: #5f5142; font-size:.92rem; }
.footer-grid a:hover{ color: var(--rose-dark); }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-bottom{ border-top:1px solid rgba(156,83,54,.2); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:.8rem; color:#7a6a56; }
.footer-bottom .script{ color: var(--terracotta); font-size:1.12rem; }
.footer-brand{ font-family: var(--font-display); font-size:1.4rem; margin-bottom:6px; color: var(--teal); }
.footer-sub{ display:block; font-size:.56rem; letter-spacing:.34em; color: var(--terracotta); font-weight:700; margin-bottom:12px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Book photography
   --------------------------------------------------------- */
.book-photo-frame{
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-photo);
  background: var(--cream);
}
.book-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* CSS fallback covers (kept for any page still using them) */
.book-cover{
  position:relative; border-radius: 6px 10px 10px 6px;
  box-shadow: 0 18px 40px -18px rgba(20,10,10,.45), inset -6px 0 12px rgba(0,0,0,.15);
  display:flex; flex-direction:column; justify-content:center;
  padding: 20px; color:#fff; overflow:hidden;
}
.book-cover .b-title{ font-family:var(--font-display); font-weight:700; }
.book-cover .b-sub{ font-size:.72rem; opacity:.85; margin-top:6px; }
.book-cover .b-author{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-top:auto; opacity:.9; }
.cover-daddys{ background: linear-gradient(160deg,#7b5a72,#4d4258 55%,#2b2431); }
.cover-gratitude{ background: linear-gradient(160deg,#f6ede0,#f2ddd3); color:#5c3b3b; }
.cover-bundle{ background: linear-gradient(150deg,#4d4258 0 48%, #f6ede0 48% 100%); }

/* ---------------------------------------------------------
   Utility
   --------------------------------------------------------- */
.section{ padding: 76px 0; }
.section-tight{ padding: 48px 0; }
.text-center{ text-align:center; }
.eyebrow{ color: var(--gold); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; }
.divider-rule{ width:56px; height:1px; background: var(--gold); margin: 18px auto; border:none; }
.subtitle-gold{
  font-family: var(--font-display); font-style:italic; font-weight:500;
  color: var(--terracotta); font-size:1.12rem; margin: 0 0 14px;
}

/* =========================================================
   Home page
   ========================================================= */
.hero{
  position:relative;
  display:grid;
  grid-template-columns: minmax(340px, 44%) 1fr;
  align-items:stretch;
  background: linear-gradient(135deg, var(--blush) 0%, var(--cream) 62%, var(--paper-warm) 100%);
  border-bottom: 1px solid rgba(22,69,78,.07);
  overflow:hidden;
}
.hero-copy{
  padding: 70px 56px 74px max(32px, calc((100vw - var(--container)) / 2 + 32px));
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
}
.hero h1{ font-size: clamp(2rem, 3.7vw, 2.95rem); line-height:1.14; margin-bottom:.45em; }
.hero h1 .line-teal{ color: var(--teal); display:block; }
.hero h1 .line-brown{ color: var(--terracotta); display:block; }
.hero .lede{ font-size:1.02rem; max-width: 372px; margin-bottom: 30px; color: var(--ink-soft); }
.hero-ctas{ display:flex; flex-direction:column; gap:11px; max-width: 292px; }
.hero-visual{ position:relative; min-height: 470px; }
.hero-visual img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 42% 48%;
}
.hero-visual::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(250,238,238,.95) 0%, rgba(250,238,238,.3) 10%, transparent 26%);
}
.hero-tag{
  position:absolute; top: 30px; right: max(30px, calc((100vw - var(--container)) / 2 + 32px));
  z-index: 3; text-align:right;
  font-family: var(--font-script); font-weight:500;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height:1.45;
  color: #9c7b52; text-shadow: 0 1px 12px rgba(255,255,255,.85);
}
.hero-tag span{ display:block; }
.hero-tag .heart{ display:block; color: var(--gold); font-size:1.1rem; margin-top:0; }
.hero-tag::before{
  content:''; position:absolute; z-index:-1;
  left:-34px; right:-30px; top:-26px; bottom:-26px;
  background: radial-gradient(ellipse at center, rgba(255,252,247,.96) 0%, rgba(255,252,247,.88) 42%, rgba(255,252,247,.45) 66%, rgba(255,252,247,0) 82%);
}
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero-copy{ padding: 52px 32px 44px; text-align:center; align-items:center; }
  .hero .lede{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ margin: 0 auto; width:100%; }
  .hero-copy{ order:0; }
  .hero-tag{ order:1; }
  .hero-visual{ order:2; min-height: 300px; }
  .hero-visual::after{ background: linear-gradient(180deg, rgba(250,238,238,.8) 0%, transparent 24%); }
  .hero-tag{
    position:static; text-align:center; padding: 0 32px 26px;
    text-shadow:none; font-size:1.2rem;
  }
  .hero-tag::before{ display:none; }
  .hero-tag span{ display:inline; }
  .hero-tag span + span::before{ content:' '; }
}

/* three-value strip */
.values-strip{ padding: 66px 0 56px; text-align:center; background: var(--paper); }
.values-strip h2{ font-size: clamp(1.55rem,2.7vw,2.05rem); }
.values-strip > .container > p{ max-width: 680px; margin: 0 auto 46px; }
.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); }
.values-grid .value-item{ padding: 0 30px; position:relative; }
.values-grid .value-item + .value-item::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background: var(--rule-gold);
}
.value-item .value-icon{ width:44px; height:44px; margin: 0 auto 14px; }
.value-item h3{
  font-family: var(--font-body); font-size:.82rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color: var(--teal); margin-bottom:10px;
}
.value-item p{ font-size:.94rem; margin:0; }
.icon-leaf{ color: #5b7a52; }
.icon-heart{ color: var(--gold); }
.icon-sun{ color: var(--gold); }
@media (max-width: 760px){
  .values-grid{ grid-template-columns: 1fr; gap:30px; }
  .values-grid .value-item + .value-item::before{ display:none; }
}

/* scripture landscape band */
.scripture-band{
  margin-top: 8px;
  padding: 92px 24px;
  background:
    linear-gradient(180deg, rgba(38,30,26,.18), rgba(38,30,26,.34)),
    url('../images/scripture-landscape.jpg') center 42% / cover no-repeat;
  color: #fff; text-align:center;
}
.scripture-band blockquote{
  font-family: var(--font-display); font-style:italic; font-weight:500;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem); max-width: 760px; margin: 0 auto 10px;
  text-shadow: 0 2px 16px rgba(40,26,20,.5);
}
.scripture-band cite{
  font-style:italic; font-family: var(--font-display); font-size:.92rem;
  opacity:.94; text-shadow: 0 2px 12px rgba(40,26,20,.5);
}

/* generic section titles */
.section-title{ text-align:center; margin-bottom: 44px; }
.section-title .kicker{ color: var(--gold); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }
.section-title h2{ font-size: clamp(1.7rem,3vw,2.4rem); margin-bottom:.2em; }
.section-title p{ font-family: var(--font-display); font-style:italic; font-size:1.1rem; color: var(--ink-soft); }

/* =========================================================
   Our Books page
   ========================================================= */
.book-feature{
  display:grid; grid-template-columns: 268px 1fr 266px; gap: 44px; align-items:start;
  padding: 40px 0 18px;
}
.book-feature .book-photo-frame{ align-self:center; }
.book-feature-body h2{ font-size: clamp(1.5rem,2.6vw,2rem); margin-bottom:0; }
.format-price{
  display:flex; gap:12px; align-items:baseline; margin: 16px 0 18px;
  font-family: var(--font-display); font-size:1.15rem; font-weight:600; color: var(--teal); flex-wrap:wrap;
}
.format-price .sep{ color: var(--gold); font-weight:400; }
.format-price .price{ color: var(--teal); }
.format-price .save{ font-family: var(--font-body); font-size:.82rem; font-weight:400; color: var(--ink-soft); }
.book-feature-body .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 6px; }

.fit-panel{
  background: linear-gradient(160deg, var(--blush) 0%, #fdf5f6 100%);
  border: 1px solid rgba(181,89,111,.14);
  border-radius: var(--radius-md);
  padding: 24px 24px 26px;
}
.fit-panel h4{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size:1.05rem; color: var(--rose); margin-bottom:16px; }
.fit-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.fit-panel li{ display:flex; gap:11px; font-size:.87rem; color: var(--ink); align-items:flex-start; line-height:1.45; }
.fit-panel li svg{ width:17px; height:17px; color: var(--gold); flex-shrink:0; margin-top:2px; }

.scripture-quote{
  font-family: var(--font-display); font-style:italic; color: #7a5a3c;
  font-size: 1.1rem; text-align:center; max-width: 620px; margin: 0 auto;
}
.scripture-quote cite{ display:block; font-style:italic; font-size:.84rem; margin-top:6px; color: var(--gold); }

/* the four journal pillars (taken from the journal artwork) */
.pillar-list{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:15px; }
.pillar-list li{ display:flex; gap:14px; align-items:center; }
.pillar-list .p-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.pillar-list .p-icon svg{ width:20px; height:20px; }
.pillar-list .p-1{ background:#b9714b; }
.pillar-list .p-2{ background:#c4707c; }
.pillar-list .p-3{ background:#c59a46; }
.pillar-list .p-4{ background:#6d7d5f; }
.pillar-list strong{
  display:block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--teal);
}
.pillar-list span{ font-size:.88rem; color: var(--ink-soft); }

@media (max-width: 1000px){
  .book-feature{ grid-template-columns: 230px 1fr; gap:32px; }
  .book-feature .fit-panel{ grid-column: 1 / -1; }
}
@media (max-width: 700px){
  .book-feature{ grid-template-columns: 1fr; }
  .book-feature .book-photo-frame{ max-width: 280px; margin: 0 auto; }
}

/* bundle banner */
.bundle-banner{
  position:relative; overflow:hidden;
  margin-top: 34px;
  background: linear-gradient(120deg, var(--blush-deep) 0%, var(--blush) 52%, #fdf4f5 100%);
  border-radius: var(--radius-lg); padding: 34px 46px;
  display:grid; grid-template-columns: 244px 1fr 200px; gap: 36px; align-items:center;
}
.bundle-banner > *:not(.deco){ position:relative; z-index:1; }
.bundle-banner .bundle-photo img{ border-radius: 8px; box-shadow: var(--shadow-card); }
.bundle-banner h3{ font-size:1.6rem; margin-bottom:0; }
.bundle-banner .save-tag{
  font-family: var(--font-script); color: #9c7b52; text-align:left;
  font-size:1.35rem; line-height:1.4;
  transform: rotate(-6deg);
}
.bundle-banner .save-tag .heart{ display:block; color: var(--gold); }
@media (max-width: 940px){
  .bundle-banner{ grid-template-columns:1fr; text-align:center; padding: 30px 26px; }
  .bundle-banner .save-tag{ text-align:center; transform:none; }
  .bundle-banner .bundle-photo{ max-width: 290px; margin: 0 auto; }
  .bundle-banner .format-price, .bundle-banner .cta-row{ justify-content:center; }
  .bundle-banner .deco{ display:none; }
}

/* ---------------------------------------------------------
   Shop / catalogue
   --------------------------------------------------------- */
.shop-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.shop-card{
  background: var(--white); border:1px solid rgba(22,69,78,.09); border-radius: var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-card);
}
.shop-card-cover{ aspect-ratio: 4/3; overflow:hidden; background: var(--cream); }
.shop-card-cover img{ width:100%; height:100%; object-fit:cover; object-position: center 34%; }
.shop-card-body{ padding: 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.shop-card-format{ font-size:.68rem; letter-spacing:.18em; color: var(--gold); font-weight:700; text-transform:uppercase; }
.shop-card-body h3{ font-size: 1.2rem; margin:0; }
.shop-card-body p{ font-size:.9rem; flex:1; }
.shop-card-price{ display:flex; gap:10px; align-items:baseline; margin: 4px 0 10px; }
.shop-card-price .was{ text-decoration: line-through; color:#a8a2a2; font-size:.85rem; }
.shop-card-price .now{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; color: var(--teal); }
.shop-card-actions{ display:flex; flex-direction:column; gap:10px; }
@media (max-width: 900px){ .shop-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Single book page
   --------------------------------------------------------- */
.book-detail{ display:grid; grid-template-columns: 360px 1fr; gap: 56px; align-items:flex-start; }
.book-detail-cover{ overflow:hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-photo); }
.book-detail-cover img{ width:100%; height:auto; display:block; }
.book-detail-sub{ font-family: var(--font-display); font-style:italic; color: var(--terracotta); font-size:1.1rem; }
.qty-row{ display:flex; align-items:center; gap:14px; margin: 10px 0 22px; }
.qty-row label{ font-weight:700; font-size:.85rem; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--rule); border-radius:4px; overflow:hidden; background:#fff; }
.qty-stepper button{ background: var(--cream); border:none; width:34px; height:34px; font-size:1.1rem; cursor:pointer; color: var(--teal); }
.qty-stepper input{ width:48px; text-align:center; border:none; border-left:1px solid var(--rule); border-right:1px solid var(--rule); height:34px; font-family: var(--font-body); }
.qty-stepper-sm span{ width:30px; text-align:center; font-weight:700; }
.qty-stepper-sm button{ width:28px; height:28px; }
.book-detail-actions{ display:flex; gap:12px; max-width: 420px; }
@media (max-width: 800px){ .book-detail{ grid-template-columns: 1fr; } .book-detail-cover{ max-width:300px; margin:0 auto; } }

/* ---------------------------------------------------------
   Cart
   --------------------------------------------------------- */
.cart-layout{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 46px; align-items:flex-start; }
.cart-line{ display:grid; grid-template-columns: 82px 1fr auto; gap: 18px; align-items:center; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.cart-line-cover{ width:82px; height:104px; border-radius:6px; overflow:hidden; box-shadow: var(--shadow-card); background: var(--cream); }
.cart-line-cover img{ width:100%; height:100%; object-fit:cover; }
.cart-line-info h4{ margin:0 0 4px; font-size:1rem; }
.cart-line-price{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-line-price strong{ color: var(--teal); font-family: var(--font-display); font-size:1.05rem; }
.cart-remove{ background:none; border:none; color: var(--rose); font-size:.78rem; cursor:pointer; text-decoration:underline; padding:0; }
.cart-summary-box{ background: var(--white); border:1px solid rgba(22,69,78,.09); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-card); position:sticky; top: 100px; }
.cart-summary-box h3{ font-size:1.15rem; }
.cart-total-row{ display:flex; justify-content:space-between; font-size:1.05rem; font-weight:700; padding:14px 0; border-top:1px solid var(--rule); margin-top: 10px; color: var(--teal); }
.cart-empty{ text-align:center; padding: 60px 20px; }
.is-hidden{ display:none !important; }
@media (max-width: 860px){ .cart-layout{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   Checkout
   --------------------------------------------------------- */
.checkout-layout{ display:grid; grid-template-columns: 1fr 380px; gap: 46px; align-items:flex-start; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full{ grid-column: 1 / -1; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.84rem; font-weight:600; color: var(--ink); }
.field label .req{ color: #d0454f; }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:.95rem; padding: 13px 15px;
  border: 1px solid rgba(22,69,78,.16); border-radius:4px; background: #f7f7f6; color: var(--ink); width:100%;
}
.field input::placeholder, .field textarea::placeholder{ color:#a9b0b3; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--rose); background:#fff; outline:none; }
.field textarea{ resize: vertical; min-height: 130px; }
.checkout-list{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:10px; }
.checkout-list li{ display:flex; justify-content:space-between; font-size:.9rem; color: var(--ink-soft); }
.checkout-total-row{ display:flex; justify-content:space-between; border-top:1px solid var(--rule); padding-top:14px; margin-top:10px; font-size:1.05rem; color: var(--teal); }
@media (max-width: 860px){ .checkout-layout{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   Thank you
   --------------------------------------------------------- */
.thank-you-box{ max-width: 560px; margin: 0 auto; text-align:center; }
.thank-you-icon{ width:64px; height:64px; color: var(--teal); margin: 0 auto 18px; }
.thank-you-tip{ font-size:.92rem; }
.safety-note{
  background: var(--blush); border:1px solid rgba(181,89,111,.18); border-radius: var(--radius-md);
  padding: 16px 20px; font-size:.88rem; color: var(--ink); text-align:left; margin: 0 0 26px;
}
.safety-note strong{ color: var(--rose-dark); }

/* ---------------------------------------------------------
   Delivery notice (shop / cart / checkout)
   --------------------------------------------------------- */
.delivery-banner{
  background: var(--blush); border:1px solid rgba(181,89,111,.16);
  border-radius: var(--radius-md); padding: 16px 24px; margin: 0 0 30px;
  text-align:center;
}
.delivery-banner .free{
  display:block; font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--teal); letter-spacing:.01em;
}
.delivery-banner .fee{
  display:block; font-size:.82rem; color: var(--ink-soft); margin-top:4px;
}

.delivery-options{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.delivery-option{
  display:flex; align-items:flex-start; gap:10px; min-width:0;
  border:1.5px solid rgba(22,69,78,.15); border-radius: 10px; padding: 14px 16px;
  background:#fff; cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.delivery-option.is-selected{ border-color: var(--rose); background: var(--blush); }
.delivery-option input[type="radio"]{
  width:16px; height:16px; min-width:16px; padding:0; margin:4px 10px 0 0;
  border: 1.5px solid rgba(22,69,78,.35); border-radius:50%; background:#fff;
  flex:0 0 auto; appearance:none; -webkit-appearance:none; position:relative; cursor:pointer;
}
.delivery-option input[type="radio"]:checked{ border-color: var(--rose); }
.delivery-option input[type="radio"]:checked::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background: var(--rose);
}
.delivery-option > span{ display:block; min-width:0; flex:1 1 auto; }
.delivery-option .delivery-amount{ display:block; font-family: var(--font-display); font-weight:700; color: var(--teal); }
.delivery-option.free .delivery-amount{ font-size:1.28rem; }
.delivery-option.fee .delivery-amount{ font-size:.98rem; }
.delivery-option .delivery-caption{ display:block; font-size:.76rem; color: var(--ink-soft); margin-top:3px; line-height:1.4; }
@media (max-width:560px){ .delivery-options{ grid-template-columns: 1fr; } }

.checkout-account-banner{
  background: var(--cream); border:1px solid rgba(22,69,78,.1); border-radius: 8px;
  padding: 11px 16px; font-size:.85rem; color: var(--ink); margin-bottom: 22px;
}
.checkout-account-banner strong{ color: var(--teal); }
.auth-link{
  background:none; border:none; padding:0; color: var(--rose); text-decoration:underline;
  font-family: var(--font-body); font-size: inherit; cursor:pointer;
}
.auth-link:hover{ color: var(--rose-dark); }

/* ---------------------------------------------------------
   Sign-up / log-in page
   --------------------------------------------------------- */
.auth-layout{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items:start; max-width: 920px; }
.auth-card{ background:#fff; border:1px solid rgba(22,69,78,.09); border-radius: var(--radius-md); padding: 30px 30px 26px; box-shadow: var(--shadow-card); }
.auth-tabs{ display:flex; gap:6px; margin-bottom: 24px; background: var(--cream); border-radius: 8px; padding: 4px; }
.auth-tab{
  flex:1; padding:10px 12px; border:none; background:transparent; border-radius:6px;
  font-family: var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.04em;
  color: var(--ink-soft); cursor:pointer; transition: background .15s ease, color .15s ease;
}
.auth-tab.active{ background:#fff; color: var(--teal); box-shadow: 0 2px 8px -4px rgba(22,69,78,.3); }
.auth-card .field{ margin-bottom: 16px; }
.auth-card .field.is-hidden{ display:none; }
.auth-fineprint{ font-size:.78rem; color: var(--ink-soft); margin: 18px 0 0; line-height:1.6; }
.auth-side{ text-align:left; }
.auth-side h4, .auth-side p{ text-align:left; }
.auth-side .side-mark{ margin-left:0; }
.auth-benefits{ list-style:none; margin:14px 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.auth-benefits li{ display:flex; gap:10px; font-size:.87rem; color: var(--ink); align-items:flex-start; }
.auth-benefits li svg{ width:17px; height:17px; color: var(--gold); flex-shrink:0; margin-top:2px; }
.auth-side .contact-tag{ text-align:left; }
@media (max-width: 860px){ .auth-layout{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */
.tj-toast{
  position: fixed; left:50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--teal); color:#fff; padding: 12px 22px; border-radius: 40px;
  font-size:.88rem; font-weight:600; opacity:0; pointer-events:none; transition: all .25s ease; z-index: 200;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.4);
}
.tj-toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   Meet the Author page
   ========================================================= */
.author-split{
  display:grid; grid-template-columns: 40% 1fr; align-items:stretch;
  background: var(--paper-warm);
  border-bottom: 1px solid rgba(22,69,78,.07);
}
.author-portrait{ position:relative; min-height: 540px; }
.author-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 54% 20%; }
.author-intro{
  padding: 58px 56px 54px;
  padding-right: max(32px, calc((100vw - var(--container)) / 2 + 32px));
  display:flex; flex-direction:column; justify-content:center;
}
.author-intro h1{ font-size: clamp(1.9rem,3.4vw,2.6rem); margin-bottom:0; }
.author-intro h3{ font-size:1.35rem; margin-top: 24px; }
.author-intro p{ max-width: 640px; }
.author-name-sig{
  font-family: var(--font-script); color: var(--terracotta);
  font-size:1.8rem; text-align:right; margin-top: 14px; max-width: 640px; line-height:1.2;
}
.author-name-sig .heart{ color: var(--gold); font-size:1.2rem; }
@media (max-width: 900px){
  .author-split{ grid-template-columns: 1fr; }
  .author-portrait{ min-height: 380px; }
  .author-intro{ padding: 44px 32px; }
  .author-name-sig{ text-align:center; }
}

.journey-grid{ display:grid; grid-template-columns: repeat(7,1fr); text-align:center; }
.journey-item{ padding: 0 8px; position:relative; }
.journey-item + .journey-item::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:1px; background: var(--rule-gold);
}
.journey-item .j-icon{
  width:58px; height:58px; border-radius:50%; background: var(--blush-deep); color: #8a5c46;
  display:flex; align-items:center; justify-content:center; margin: 0 auto 12px;
}
.journey-item .j-icon svg{ width:24px; height:24px; }
.journey-item h4{
  font-family: var(--font-body); font-size:.63rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: #8a5c46; margin:0 0 3px;
}
.journey-item p{ font-size:.74rem; color: var(--ink-soft); margin:0; }
@media (max-width: 980px){ .journey-grid{ grid-template-columns: repeat(4,1fr); row-gap:30px; } .journey-item::before{ display:none; } }
@media (max-width: 560px){ .journey-grid{ grid-template-columns: repeat(2,1fr); } }

.invite-band{
  position:relative; overflow:hidden;
  margin-top: 50px; display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items:center;
  background: var(--paper-warm); border-top: 1px solid rgba(22,69,78,.06);
  padding: 40px 56px;
}
.invite-band > *:not(.deco){ position:relative; z-index:1; }
.invite-band blockquote{
  font-family: var(--font-display); font-style:italic; margin:0; color: #6d5a4a; font-size:1.02rem; line-height:1.75;
}
.invite-band cite{ display:block; font-style:italic; font-size:.86rem; color: var(--gold); margin-top:6px; }
.invite-band .invite-cta{ text-align:center; }
.invite-band .invite-cta .btn{ width:100%; max-width: 330px; }
.invite-band .invite-cta p{ font-size:.88rem; margin: 14px 0 0; }
@media (max-width: 800px){ .invite-band{ grid-template-columns:1fr; text-align:center; padding: 34px 26px; } .invite-band .deco{ display:none; } }

/* =========================================================
   Contact page
   ========================================================= */
.contact-layout{
  position:relative;
  display:grid; grid-template-columns: 1.32fr 1fr 98px; gap: 44px; align-items:stretch;
}
.contact-form{ position:relative; z-index:1; }
.contact-form .btn{ width:100%; margin-top: 26px; }
.contact-layout > .deco{ z-index:0; }
.contact-side{
  background: linear-gradient(170deg, #f6efe6 0%, #fbf6ef 55%, #f8ece9 100%);
  border-radius: var(--radius-md); padding: 32px 30px 34px; text-align:center;
  border: 1px solid rgba(191,146,99,.18);
}
.contact-side .side-mark{ width:36px; height:32px; color: var(--gold); margin: 0 auto 14px; }
.contact-side h4{ font-family: var(--font-display); font-size:1.32rem; margin-bottom:8px; }
.contact-side p{ font-size:.92rem; }
.email-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: var(--teal); color:#fff; padding: 14px 18px; border-radius: 4px;
  font-weight:700; font-size:.78rem; letter-spacing:.02em;
  margin: 18px 0 28px; transition: background .15s ease; word-break:break-all;
}
.email-btn:hover{ background: var(--teal-dark); }
.email-btn svg{ width:19px; height:19px; flex-shrink:0; }
.contact-tag{ font-family: var(--font-script); color: #9c7b52; font-size:1.8rem; margin:0; }
.contact-tag .heart{ color: var(--gold); font-size:1.15rem; }
.contact-strip{
  border-radius: var(--radius-md); overflow:hidden; min-height: 100%;
  background: url('../images/floral-vertical.jpg') center / cover no-repeat;
}
.form-note{ font-size:.8rem; color: var(--ink-soft); margin-top: 12px; text-align:center; }
.form-note a{ color: var(--rose); text-decoration:underline; }
@media (max-width: 1080px){ .contact-layout{ grid-template-columns: 1.3fr 1fr; } .contact-strip{ display:none; } }
@media (max-width: 860px){ .contact-layout{ grid-template-columns:1fr; } .contact-layout > .deco{ display:none; } }

/* =========================================================
   Countdown page
   ========================================================= */
.countdown-page{
  min-height: calc(100vh - 74px);
  background:
    radial-gradient(circle at 15% 20%, rgba(191,146,99,.2), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(181,89,111,.25), transparent 50%),
    linear-gradient(160deg, #141f22 0%, #1d2f33 45%, #2f2430 100%);
  color: #f5ece4; padding: 90px 24px 110px; text-align:center; overflow:hidden; position:relative;
}
.countdown-page::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
                     radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.4), transparent),
                     radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.35), transparent),
                     radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.4), transparent),
                     radial-gradient(1.5px 1.5px at 55% 85%, rgba(255,255,255,.3), transparent);
  opacity:.9;
}
.countdown-inner{ position:relative; z-index:1; max-width: 820px; margin: 0 auto; }
.countdown-kicker{
  display:inline-block; font-size:.74rem; letter-spacing:.2em; font-weight:700; text-transform:uppercase;
  color: var(--gold-soft); border: 1px solid rgba(191,146,99,.5); padding: 8px 18px; border-radius: 30px; margin-bottom: 26px;
}
.countdown-page h1{ color:#fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.1; margin-bottom: 16px; }
.countdown-page h1 em{ color: var(--gold-soft); font-style: italic; }
.countdown-page > .countdown-inner > p{ color:#e2d8cf; max-width: 540px; margin: 0 auto 50px; font-size: 1.05rem; }
.countdown-tracks{
  display:grid; grid-template-columns: 1fr 1fr; gap: 50px;
  margin: 0 auto 50px; max-width: 760px; align-items:start;
}
.countdown-track{ position:relative; text-align:center; }
.countdown-track + .countdown-track::before{
  content:''; position:absolute; left:-25px; top:4px; bottom:4px; width:1px;
  background: rgba(255,255,255,.16);
}
.countdown-track-title{
  font-family: var(--font-display); font-weight:600; color:#fff;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 18px;
}
.countdown-track-title span{
  display:block; font-family: var(--font-body); font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-soft); margin-top: 8px;
}
.countdown-track .countdown-grid{ margin-bottom:0; }
.countdown-track .countdown-grid.is-hidden{ display:none; }
.countdown-track-live{
  display:none; font-family: var(--font-display); font-style:italic;
  color:#fff; font-size:1.05rem; margin: 4px 0 0;
}
.countdown-track-live.is-visible{ display:block; }
@media (max-width: 680px){
  .countdown-tracks{ grid-template-columns: 1fr; gap: 40px; }
  .countdown-track + .countdown-track::before{ content:none; }
}

.countdown-grid{ display:flex; justify-content:center; gap: 10px; flex-wrap: nowrap; margin-bottom: 48px; }
.countdown-cell{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 8px; width: 68px; flex-shrink:0; backdrop-filter: blur(6px);
}
@media (max-width: 480px){
  .countdown-cell{ width: 60px; padding: 12px 6px; }
}
.countdown-cell .num{ font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight:700; color:#fff; line-height:1; }
.countdown-cell .lbl{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-soft); margin-top: 7px; display:block; }
.countdown-book-preview{ display:flex; justify-content:center; margin-bottom: 44px; }
.countdown-book-preview img{ width: 300px; border-radius: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.countdown-book-preview .book-cover{ width: 210px; height: 300px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.countdown-book-preview .book-cover .b-title{ font-size: 3rem; }
.countdown-notify{ display:flex; gap:10px; max-width: 460px; margin: 0 auto; flex-wrap:wrap; justify-content:center; }
.countdown-notify input{ flex:1; min-width: 220px; padding: 14px 18px; border-radius: 30px; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color:#fff; }
.countdown-notify input::placeholder{ color: rgba(255,255,255,.55); }
.countdown-notify .btn{ border-radius: 30px; }
.countdown-live{ display:none; }
.countdown-live.is-visible{ display:block; }
.countdown-live h2{ color:#fff; font-size: clamp(1.8rem,3.6vw,2.4rem); }
.countdown-page + .site-footer{ margin-top: 0; }