/* ═══════════════════════════════════════════════════════
   BookMart — Shared Stylesheet
   Fixes applied:
   1. Unified font stack: Playfair Display + DM Sans (all pages)
   2. Unified nav height: 60px mobile / 68px desktop (all pages)
   3. Extracted common styles from all 6 pages
   4. Replaced inline styles with named classes
   5. Added rel="noopener noreferrer" handled in HTML
   ═══════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── CSS VARIABLES ────────────────────────────────────── */
:root{
  /* Sky Blue Palette */
  --sky-dk:  #0C4A6E;
  --sky-mid: #075985;
  --sky-md:  #0369A1;
  --blue:    #0284C7;
  --blue-lt: #38BDF8;
  --pale:    #BAE6FD;
  --ice:     #F0F9FF;
  --grad1:   #E0F2FE;
  --amber:   #F59E0B;
  --amber-dk:#D97706;
  --amber-lt:#FEF3C7;
  --sage:    #10B981;
  --sage-lt: #D1FAE5;
  --coral:   #F43F5E;
  --coral-lt:#FFE4E6;
  --white:   #fff;
  --text:    #0F172A;
  --muted:   #475569;
  --border:  rgba(2,132,199,0.14);
  /* layout */
  --nav-h:  60px;
  --r:      14px;
  --r-lg:   22px;
  --r-pill: 100px;
  --sh:     0 4px 18px rgba(12,74,110,0.09);
  --sh-lg:  0 14px 44px rgba(12,74,110,0.14);
  --sh-b:   0 6px 22px rgba(2,132,199,0.22);
  --px:     18px;
}

/* ── RESET ────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"DM Sans",sans-serif;background:var(--white);color:var(--text);line-height:1.6;overflow-x:hidden;padding-top:var(--nav-h);}

/* ── NAV ─────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;width:100%;z-index:900;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--px);background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1.5px solid var(--border);transition:box-shadow .3s;}
.nav-logo{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:1.35rem;font-weight:700;color:var(--sky-dk);text-decoration:none;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-logo-icon{width:32px;height:32px;min-width:32px;background:linear-gradient(135deg,var(--blue),var(--blue-lt));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.nav-links{display:none;}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;flex-shrink:0;}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--sky-dk);border-radius:2px;transition:.28s;}
.mobile-nav{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:white;z-index:800;padding:16px var(--px);flex-direction:column;gap:4px;overflow-y:auto;border-top:1.5px solid var(--border);}
.mobile-nav.open{display:flex;}
.mobile-nav a{text-decoration:none;color:var(--sky-dk);font-size:1rem;font-weight:600;padding:13px 16px;border-radius:var(--r);transition:background .2s;}
.mobile-nav a:hover,.mobile-nav a.active{background:var(--ice);color:var(--blue);}
.mobile-nav .m-cta{background:linear-gradient(135deg,var(--blue),var(--sky-mid));color:white!important;text-align:center;margin-top:8px;border-radius:var(--r-pill);}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:var(--r-pill);font-family:"DM Sans",sans-serif;font-size:.9rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all .22s;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--sky-md));color:white;box-shadow:var(--sh-b);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,132,199,.35);}
.btn-outline{background:transparent;color:var(--sky-dk);border:2px solid var(--sky-md);}
.btn-outline:hover{background:var(--sky-dk);color:white;}
.btn-amber{background:linear-gradient(135deg,var(--amber),var(--amber-dk));color:white;}
.btn-amber:hover{transform:translateY(-2px);}
.btn-ghost{background:rgba(255,255,255,.14);color:white;border:1.5px solid rgba(255,255,255,.3);}
.btn-ghost:hover{background:rgba(255,255,255,.24);}
.btn-white{background:white;color:var(--sky-dk);font-weight:700;}
.btn-white:hover{background:var(--ice);}
.btn-sage{background:var(--sage);color:white;}
.btn-sage:hover{transform:translateY(-2px);}

/* ── TAGS ────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--ice);color:var(--blue);border:1.5px solid var(--pale);font-size:.66rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);margin-bottom:10px;}
.tag-light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:white;}

/* ── REVEAL ANIMATION ────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── SECTION TITLES ──────────────────────────────────── */
.sec-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:clamp(1.45rem,4.5vw,2.2rem);font-weight:700;color:var(--sky-dk);margin-top:4px;line-height:1.2;}
.sec-title-light{color:white;}

/* ── FORM ELEMENTS ───────────────────────────────────── */
label{font-size:.8rem;font-weight:700;color:var(--text);display:block;margin-bottom:4px;}
input,select,textarea{padding:11px 13px;border:2px solid var(--border);border-radius:10px;font-family:"DM Sans",sans-serif;font-size:.88rem;color:var(--sky-dk);background:var(--ice);outline:none;transition:all .2s;width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:white;box-shadow:0 0 0 3px rgba(186,230,253,.4);}
textarea{resize:vertical;min-height:84px;}
.form-group{display:flex;flex-direction:column;gap:4px;}
.form-group.full{grid-column:1/-1;}

/* ── BOOK CARDS ──────────────────────────────────────── */
.books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px;}
.book-card{background:var(--ice);border-radius:var(--r-lg);padding:12px 10px;border:1.5px solid var(--border);transition:all .3s;text-decoration:none;color:inherit;display:block;}
.book-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--pale);}
.bk-spine{width:100%;height:80px;border-radius:8px;margin-bottom:9px;display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:1.1rem;font-weight:700;color:white;position:relative;overflow:hidden;}
.bk-spine::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:rgba(255,255,255,.18);}
.bk-badge{display:inline-block;font-size:.58rem;font-weight:700;padding:2px 6px;border-radius:var(--r-pill);margin-bottom:5px;text-transform:uppercase;}
.bk-badge.hot{background:var(--coral-lt);color:var(--coral);}
.bk-badge.deal{background:var(--ice);color:var(--blue);}
.bk-badge.newb{background:var(--sage-lt);color:var(--sage);}
.bk-title{font-size:.78rem;font-weight:700;margin-bottom:2px;color:var(--sky-dk);line-height:1.25;}
.bk-author{font-size:.68rem;color:var(--muted);margin-bottom:6px;}
.bk-price{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.p-now{font-size:.85rem;font-weight:700;color:var(--sky-dk);}
.p-was{font-size:.68rem;color:var(--muted);text-decoration:line-through;}
.p-save{font-size:.58rem;font-weight:700;color:var(--sage);background:var(--sage-lt);padding:1px 5px;border-radius:var(--r-pill);}

/* ── FOOTER ─────────────────────────────────────────── */
.footer{background:var(--sky-dk);color:white;padding:44px var(--px) 24px;}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:32px;}
.fg-brand{grid-column:1/-1;}
.flogo{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:1.35rem;font-weight:700;color:var(--pale);display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.flogo-ico{width:30px;height:30px;min-width:30px;background:linear-gradient(135deg,var(--blue),var(--blue-lt));border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.fg-brand p{color:rgba(255,255,255,.42);font-size:.8rem;line-height:1.65;margin-bottom:11px;}
.fc h4{font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--pale);margin-bottom:11px;}
.fc a,.fc p{display:block;color:rgba(255,255,255,.48);text-decoration:none;font-size:.8rem;margin-bottom:7px;transition:color .2s;}
.fc a:hover{color:var(--pale);}
.fsoc{display:flex;gap:8px;flex-wrap:wrap;}
.fsoc a{width:34px;height:34px;min-width:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:.88rem;text-decoration:none;transition:all .2s;}
.fsoc a:hover{border-color:var(--blue-lt);background:rgba(2,132,199,.25);}
.fbot{border-top:1px solid rgba(255,255,255,.07);padding-top:18px;display:flex;flex-direction:column;gap:8px;font-size:.72rem;color:rgba(255,255,255,.28);text-align:center;}
.fbl{display:flex;gap:14px;justify-content:center;}
.fbl a{color:rgba(255,255,255,.28);text-decoration:none;}
.fbl a:hover{color:var(--pale);}

/* ── PAGE HERO (inner pages) ─────────────────────────── */
.page-hero{padding:72px var(--px) 56px;background:linear-gradient(150deg,var(--white) 0%,var(--grad1) 60%,var(--ice) 100%);position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;top:-100px;right:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.12) 0%,transparent 65%);pointer-events:none;}
.page-hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.9rem,5vw,3.4rem);font-weight:700;line-height:1.12;color:var(--sky-dk);margin:10px 0 12px;}
.page-hero h1 em{color:var(--blue);font-style:italic;}
.page-hero p{color:var(--muted);font-size:.9rem;line-height:1.75;margin-bottom:22px;max-width:520px;}

/* ── SECTIONS ────────────────────────────────────────── */
.sec{padding:44px var(--px);}
.si{background:var(--ice);}
.sg{background:linear-gradient(135deg,var(--ice) 0%,var(--grad1) 100%);}
.sd{background:var(--sky-dk);}
.sec-h{margin-bottom:18px;}

/* ── UTILITY CLASSES (replace inline styles) ─────────── */
.text-center{text-align:center;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.mt-20{margin-top:20px;}
.mt-28{margin-top:28px;}
.mb-12{margin-bottom:12px;}
.btn-nav-cta-ml{margin-left:8px;}
.inline-flex{display:inline-flex;}

/* ── TABLET ≥600px ───────────────────────────────────── */
@media(min-width:600px){
  :root{--px:28px;}
  .books-grid{grid-template-columns:repeat(3,1fr);}
  .bk-spine{height:96px;}
}

/* ── DESKTOP ≥768px ──────────────────────────────────── */
@media(min-width:768px){
  :root{--nav-h:68px;--px:44px;}
  .nav-logo{font-size:1.55rem;}
  .nav-logo-icon{width:36px;height:36px;}
  .hamburger{display:none;}
  .nav-links{display:flex;align-items:center;gap:2px;}
  .nav-links a{text-decoration:none;color:var(--muted);font-size:.85rem;font-weight:600;padding:7px 12px;border-radius:var(--r-pill);transition:all .2s;}
  .nav-links a:hover{background:var(--ice);color:var(--blue);}
  .nav-links a.active{background:rgba(2,132,199,.12);color:var(--sky-dk);font-weight:700;border-radius:var(--r-pill);}
  .nav-cta{background:linear-gradient(135deg,var(--blue),var(--sky-md))!important;color:white!important;margin-left:6px!important;}
  .footer{padding:60px var(--px) 32px;}
  .fg{grid-template-columns:1.8fr 1fr 1fr;gap:44px;}
  .fg-brand{grid-column:auto;}
  .fbot{flex-direction:row;justify-content:space-between;text-align:left;}
  .fbl{justify-content:flex-end;}
  .books-grid{gap:16px;}
  .bk-spine{height:108px;}
  .bk-title{font-size:.84rem;}
  .p-now{font-size:.92rem;}
  .page-hero{padding:72px var(--px) 56px;}
  .sec{padding:68px var(--px);}
}

/* ── WIDE ≥1024px ────────────────────────────────────── */
@media(min-width:1024px){
  :root{--px:64px;}
  .books-grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px;}
  .bk-spine{height:116px;}
}

/* ── SHARED NAV JS HELPER ────────────────────────────── */
/* Used by shared.js navInit() */

/* ===== Sell Panel Styling ===== */
.sell-panel p {
  color: #ffffff;
}

.cf-success-hidden {
  display: none;
}