@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap&subset=latin-ext');

/* muza.css — lighter palette and improved book visuals
   Overrides and refinements to soften the site and make book displays more realistic
*/
:root{
  /* Sampled palette (approx) from logo_www.gif */
  --brand-deep: #0b3350; /* primary deep blue/teal */
  --brand-mid:  #1b5f87; /* mid tone for nav */
  --brand-soft: #5fa3d1; /* lighter accent */
  --accent-gold:#cfa84d; /* warm gold accent */
  --accent-warm:#efe6cf;
  --page-bg:#fbfaf8;
  --muted:#4b5563;
  --card-radius:8px;
  --shadow-strong:rgba(10,22,40,0.12);
}

/* Page tone */
html,body,button,input,textarea,select,table,th,td,caption,code,kbd{font-family:'Outfit', 'Inter', 'Segoe UI', 'system-ui', sans-serif !important;}
button,input,textarea,select{font-family:'Outfit', 'Inter', 'Segoe UI', 'system-ui', sans-serif !important;}
em{font-family:inherit !important; font-style:normal !important; font-weight:inherit !important;}
h1,h2,h3,h4,h5,h6,.nav-logo-text,.section-title,.hero-badge,.book-meta-title,.cat-name,.promo-h,.trust-title,.footer-brand-name,.bs-info .title,.promo-eyebrow{font-family:'Outfit', 'Inter', 'Segoe UI', 'system-ui', sans-serif !important;}
html,body{font-family:var(--font-body) !important;}
body{background:var(--page-bg) !important; color:var(--muted) !important; font-feature-settings:'liga' 1,'kern' 1;}

/* Top bar and nav: white top bar so logo fits, golden text */
.top-bar{
  background: #ffffff !important;
  color: var(--accent-gold) !important;
  border-bottom: 1px solid rgba(11,34,56,0.04);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 12px 56px;
  flex-wrap: wrap;
}
.top-bar-brand{
  display: flex;
  align-items: center;
  gap: 14px;
}
.top-logo-img{
  width: 140px;
  height: auto;
  display: block;
  max-height: 60px;
}
.top-bar-brand-text{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: #008c83;
  letter-spacing: 0.04em;
  display: inline-block;
}
.top-bar-info{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
}
.top-bar .dot{color:var(--brand-mid) !important}
nav{background:linear-gradient(180deg,var(--brand-deep),var(--brand-mid)) !important; box-shadow:0 8px 30px var(--shadow-strong) !important}
.nav-links a{color:rgba(255,255,255,0.9) !important; font-family:var(--font-display) !important;}
.nav-links a:hover{color:var(--accent-gold) !important}
.nav-cart-btn{background:var(--accent-gold) !important; color:var(--brand-deep) !important}
.section-title, .book-meta-title, .cat-name, .promo-h, .trust-title, .footer-brand-name, .bs-info .title, .promo-eyebrow { font-family: var(--font-display) !important; }
.section-title em, .promo-h em, .hero h1 em { color: inherit !important; font-style: normal !important; font-weight: inherit !important; font-family: inherit !important; }

/* Hero: lighter content panel */
.hero{max-height:340px; overflow:hidden;}
.hero-content{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)) !important; color:var(--brand-deep) !important; padding:24px 24px 18px !important;}
.hero h1, .hero-badge, .hero-cta-row, .hero-stats { font-family: var(--font-display) !important; }
.hero-badge{color:var(--accent-gold) !important; font-weight:800 !important; letter-spacing:0.18em !important; margin-bottom:14px !important;}
.hero-desc { font-family: var(--font-body) !important; margin-bottom:16px !important; }
.hero h1{color:var(--brand-deep) !important; font-size:36px !important; margin-bottom:10px !important; line-height:1.1 !important;}
.btn-gold{background:var(--accent-gold) !important; color:var(--brand-deep) !important; padding:12px 28px !important; font-size:11px !important;}
.btn-outline{color:var(--brand-mid) !important; font-size:11px !important;}
.hero-cta-row{gap:16px !important; margin-bottom:14px !important;}
.hero-stats{margin-top:18px !important; padding-top:0 !important; gap:28px !important;}

/* Hero visual: transparent so page background shows through banner gaps */
.hero-visual{background:transparent !important; perspective:1200px; min-height:280px !important;}
.book-display{gap:12px !important; align-items:flex-end !important; justify-content:flex-end !important;}
.book-3d{width:68px !important; transform-style:preserve-3d; transition:transform .35s ease, box-shadow .35s ease; transform:perspective(1100px) rotateX(2deg) rotateY(-10deg)}
.book-3d:hover{transform:translateY(-12px) rotateX(3deg) rotateY(-4deg) scale(1.02) !important; box-shadow:0 14px 35px rgba(10,22,40,0.22) !important}
.book-face{min-height:170px !important;}
.hero-visual-caption{bottom:18px !important; right:18px !important;}
.hero-visual-caption .big{font-size:48px !important;}
.hero-visual-caption .small{font-size:10px !important;}

.book-face{
  border-radius:10px !important;
  overflow:hidden !important;
  position:relative !important;
  box-shadow:0 10px 30px rgba(6,18,34,0.28) !important;
  transform-origin:center center;
  transform-style:preserve-3d;
  min-height:220px;
  background:none !important;
}
.book-face img{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(14px);transition:transform .35s ease}
.book-spine-text{display:none !important}

/* Add subtle paper texture and spine illusion */
.book-face::before{
  content:''; position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.03)); pointer-events:none; mix-blend-mode:overlay;
}
.book-face::after{
  content:''; position:absolute; right:-10px; top:6%; width:18px; height:88%; background:linear-gradient(90deg, rgba(0,0,0,0.14), rgba(255,255,255,0.04)); transform:skewY(-6deg); border-top-right-radius:3px; border-bottom-right-radius:3px; pointer-events:none; opacity:0.95;
}

.book-spine-text{color:rgba(255,255,255,0.9) !important; font-size:11px !important}

/* Use warmer cover palettes for realism */
.b1{transform:perspective(1100px) translateY(12px) rotateX(3deg) rotateY(-14deg)}
.b2{transform:perspective(1100px) translateY(8px) rotateX(2.5deg) rotateY(-9deg)}
.b3{transform:perspective(1100px) translateY(4px) rotateX(2deg) rotateY(-4deg)}
.b4{transform:perspective(1100px) translateY(2px) rotateX(1.7deg) rotateY(2deg)}
.b5{transform:perspective(1100px) translateY(6px) rotateX(1.7deg) rotateY(7deg)}
.b6{transform:perspective(1100px) translateY(10px) rotateX(1.7deg) rotateY(12deg)}
.b1 .book-face{background:linear-gradient(135deg,#67402b,#a36a3f) !important}
.b2 .book-face{background:linear-gradient(135deg,#2e4f6a,#5c7fa1) !important}
.b3 .book-face{background:linear-gradient(135deg,#2d503f,#6aa08a) !important}
.b4 .book-face{background:linear-gradient(135deg,#3b4a6a,#24314b) !important}
.b5 .book-face{background:linear-gradient(135deg,#6b4527,#3d2414) !important}
.b6 .book-face{background:linear-gradient(135deg,#5a2740,#8b4261) !important}

/* Sample realistic-looking covers for featured books */
.cover-s1{background:linear-gradient(180deg,#7b4b33 0%, #b07a56 100%); color:#fff}
.cover-s2{background:linear-gradient(180deg,#274e6a 0%, #4d7aa3 100%); color:#fff}
.cover-s3{background:linear-gradient(180deg,#2f4f3f 0%, #6aa68f 100%); color:#fff}
.cover-s4{background:linear-gradient(180deg,#3b2f3f 0%, #7a5470 100%); color:#fff}
.cover-s5{background:linear-gradient(180deg,#6b3f22 0%, #a76a3d 100%); color:#fff}
.cover-s6{background:linear-gradient(180deg,#5a2940 0%, #8b4568 100%); color:#fff}

.cover-s1::after, .cover-s2::after, .cover-s3::after, .cover-s4::after, .cover-s5::after, .cover-s6::after{
  content:''; position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(255,255,255,0.02)); pointer-events:none;
}

/* Book cover images */
.book-cover{box-shadow:0 8px 30px rgba(6,18,34,0.12) !important; position:relative}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block}
.book-cover-inner{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important; color:var(--brand-deep) !important; padding:20px !important}

/* Wishlist button more subtle and realistic */
.book-wish{background:rgba(255,255,255,0.95) !important; color:var(--brand-deep) !important; width:36px; height:36px; font-size:14px}
.book-wish:hover{transform:scale(1.08)}

/* Buttons and pricing contrast */
.price-now{color:var(--brand-deep) !important}
.book-btn{border:1.2px solid rgba(11,34,56,0.08) !important; background:linear-gradient(180deg, #fff, #fbfbfb) !important; color:var(--brand-deep) !important}
.book-btn:hover{background:var(--brand-mid) !important; color:#fff !important}

/* Categories: brighten imagery */
.cat-overlay{background:linear-gradient(to top, rgba(7,14,24,0.6) 0%, rgba(7,14,24,0.15) 60%) !important}
.cat-name{color:#fff !important; display:block; line-height:1.25; font-weight:600; margin-bottom:12px;}
.cat-count{display:block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; color: var(--gold-300); margin-top: 10px; line-height:1.4; position: relative; z-index: 1;}
.cat-icon{width:44px; height:44px; flex-shrink:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; position:relative; background: radial-gradient(circle at top left, rgba(255,255,255,0.45), transparent 38%), rgba(255,255,255,0.18); box-shadow: 0 10px 24px rgba(0,0,0,0.12); font-size:20px; color:#fff; border:1px solid rgba(255,255,255,0.28); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.cat-icon::before{content:''; position:absolute; inset:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.16); opacity:.55; pointer-events:none;}
.cat-card:hover .cat-icon{transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,0.16);}
.cat-card:nth-child(1) .cat-icon::after{content:'📚';}
.cat-card:nth-child(2) .cat-icon::after{content:'🧩';}
.cat-card:nth-child(3) .cat-icon::after{content:'🎲';}
.cat-card:nth-child(4) .cat-icon::after{content:'🎓';}
.cat-card:nth-child(5) .cat-icon::after{content:'🧸';}
.cat-card:nth-child(6) .cat-icon::after{content:'⭐';}
.cat-icon::after{position:relative; z-index:1; font-size:20px;}
.cat-icon::before{inset:8px;}

/* Category background variants with classy patterns */
.cat-cover-1{background: linear-gradient(135deg, var(--brand-mid), var(--brand-deep)) !important; background-image: linear-gradient(135deg, var(--brand-mid), var(--brand-deep)), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px) !important;}
.cat-cover-2{background: linear-gradient(135deg, #3d5a4f, #1a3a2a) !important; background-image: linear-gradient(135deg, #3d5a4f, #1a3a2a), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px) !important;}
.cat-cover-3{background: linear-gradient(135deg, #5c3d1e, #2a1a0e) !important; background-image: linear-gradient(135deg, #5c3d1e, #2a1a0e), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px) !important;}
.cat-cover-4{background: linear-gradient(135deg, #4a2535, #2a1020) !important; background-image: linear-gradient(135deg, #4a2535, #2a1020), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px) !important;}
.cat-cover-5{background: linear-gradient(135deg, #2a4568, #0f2240) !important; background-image: linear-gradient(135deg, #2a4568, #0f2240), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px) !important;}
.cat-cover-6{background: linear-gradient(135deg, #6b4226, #3a2010) !important; background-image: linear-gradient(135deg, #6b4226, #3a2010), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px) !important;}

/* Classy category card enhancements */
.cat-card{position: relative; overflow: hidden;}
.cat-card::before{content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); z-index: 2; pointer-events: none;}
.cat-card::after{content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.15) 0%, transparent 30%, transparent); z-index: 1; pointer-events: none;}
.cat-bg{position: relative; z-index: 2;}
.cat-bg::after{content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08)); pointer-events: none; z-index: 0;}
.cat-name{position: relative; z-index: 3;}
.cat-count{position: relative; z-index: 3;}

/* Bestsellers cards: softer border */
.bs-card{border-color:rgba(10,22,40,0.04) !important}
/* Consistent display font for headings and titles */
h1,h2,h3,h4,h5,h6, .nav-logo-text, .section-title, .hero-badge, .book-meta-title, .cat-name, .promo-h, .trust-title, .footer-brand-name, .bs-info .title { font-family: var(--font-display) !important; }

/* Newsletter: make input lighter */
.nl-input{background:rgba(255,255,255,0.9) !important; color:var(--brand-deep) !important}
.nl-submit{background:var(--accent-gold) !important; color:var(--brand-deep) !important}

/* Small responsive tweak for book sizes */
@media (max-width:1024px){ .book-3d{width:72px} .book-face{min-height:200px} }
@media (max-width:768px){ .book-3d{width:62px} .book-face{min-height:170px} }

/* End of file */

/* Logo and typography adjustments requested by user */
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo-img{width:110px;height:auto;display:block;object-fit:contain}
.nav-logo-text{font-family:var(--font-display);font-size:28px;color:var(--accent-warm);letter-spacing:0.02em}

/* Logo uses transparent image now; no box background */
.nav-logo-img{background:none;padding:0;border-radius:0;box-shadow:none;border:none}

/* Increase base font sizes for better readability */
html,body{font-size:18px}
body{line-height:1.65}
.nav-links a{font-size:14px}
.section-title{font-size:48px; color: var(--brand-deep) !important;}
.nl-title,.promo-h{font-size:42px}
.book-meta-title{font-size:24px}
.bs-info .title{font-size:21px}

@media (max-width:768px){
  .nav-logo-img{width:86px}
  .nav-logo-text{font-size:20px}
  .section-title{font-size:32px}
}

/* Ensure hero stats are readable on the lighter hero-content */
.hero-stats .stat-number{color:var(--brand-deep) !important}
.hero-stats .stat-label{color:var(--muted) !important}

/* Increase prominence of the small golden eyebrow/badge */
.hero-badge{font-size:15px !important; color:var(--accent-gold) !important; letter-spacing:0.25em; margin-bottom:28px !important}