:root{
    --ink:#130f0a;
    --ink2:#251a10;
    --muted:#71675c;
    --gold:#dcae4b;
    --gold2:#f6d878;
    --cream:#fff8ec;
    --paper:#fffdf8;
    --line:rgba(37,26,16,.12);
    --green:#0d6b4f;
    --green2:#0f8763;
    --dark:#0f0d0a;
    --dark2:#17110b;
    --shadow:0 24px 70px rgba(27,18,9,.12);
    --radius:28px;
    --wrap:1180px;

    --p4b-dark:#07130f;
    --p4b-deep:#0b1d16;
    --p4b-green:#0f7a4f;
    --p4b-green-2:#16a36d;
    --p4b-gold:#d8a84f;
    --p4b-gold-soft:#fff3d5;
    --p4b-cream:#f8f3e8;
    --p4b-muted:#667085;
    --p4b-border:rgba(15,23,42,.10);
    --p4b-shadow:0 30px 80px rgba(2,6,23,.18);
    --p4b-radius:28px;
}

*{
    box-sizing:border-box;
}


/* =========================================================
   Pay4books Critical Mobile Menu Anti-Flash Fix
   This must be at the VERY TOP of /assets/css/pay4books.css
========================================================= */

[hidden] {
    display: none !important;
}

/* Prevent mobile drawer from flashing before footer JS loads */
.mobile-panel,
.mobile-backdrop {
    display: none !important;
}

/* Only allow mobile drawer to render when JS opens it */
body.p4b-mobile-menu-open .mobile-panel.is-open {
    display: flex !important;
}

body.p4b-mobile-menu-open .mobile-backdrop:not([hidden]) {
    display: block !important;
}








html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#fff9ef 0%,#ffffff 42%,#fffaf1 100%);
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

.wrap{
    width:min(var(--wrap),calc(100% - 36px));
    margin-inline:auto;
}

.p4b-page-shell{
    min-height:100vh;
}

/* =========================================================
   Top Note
========================================================= */

.top-note{
    background:#100d09;
    color:#fff;
    font-size:13px;
}

.top-note-inner{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:10px 0;
    align-items:center;
}

.top-note-left,
.top-note-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.top-note a{
    color:#f7d77d;
    font-weight:800;
}

.top-dot{
    width:5px;
    height:5px;
    background:rgba(255,255,255,.38);
    border-radius:50%;
}

/* =========================================================
   Header
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:3000;
    background:rgba(255,250,241,.9);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .2s ease,background .2s ease;
}

.site-header.is-scrolled{
    background:rgba(255,253,248,.96);
    box-shadow:0 16px 40px rgba(20,12,3,.08);
}

.main-nav{
    position:relative;
    height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:900;
    letter-spacing:-.04em;
    min-width:max-content;
}

.brand-mark{
    width:44px;
    height:44px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--ink),#3b2813);
    display:grid;
    place-items:center;
    color:var(--gold2);
    font-weight:900;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    font-size:13px;
}

.brand-logo{
    width:46px;
    height:46px;
    object-fit:contain;
    border-radius:14px;
}

.brand-text strong{
    font-size:21px;
    line-height:1;
    display:block;
}

.brand-text small{
    display:block;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:900;
    margin-top:5px;
    max-width:230px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.desktop-links{
    display:flex;
    align-items:center;
    gap:3px;
    flex:1;
    justify-content:center;
}

.nav-item{
    position:relative;
}

.nav-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-weight:900;
    font-size:14px;
    padding:13px 12px;
    border-radius:999px;
    color:#2a2118;
    transition:.18s ease;
}

.nav-link svg{
    width:16px;
    height:16px;
}

.nav-item:hover .nav-link,
.nav-link:focus{
    background:rgba(220,174,75,.15);
    color:#2d1c07;
}

/* Standard dropdown */
.dropdown-panel{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    width:min(780px,calc(100vw - 36px));
    background:rgba(255,253,248,.98);
    border:1px solid rgba(220,174,75,.27);
    box-shadow:0 30px 90px rgba(22,13,4,.18);
    border-radius:26px;
    padding:18px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.18s ease;
    z-index:3200;
}

.dropdown-panel:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
    background:transparent;
}

.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.dropdown-intro{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    padding:4px 4px 14px;
    border-bottom:1px solid var(--line);
    margin-bottom:14px;
}

.dropdown-intro strong{
    font-size:18px;
}

.dropdown-intro p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    max-width:420px;
    line-height:1.55;
}

.dropdown-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.dropdown-card{
    position:relative;
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    align-items:start;
    padding:14px;
    border-radius:18px;
    border:1px solid transparent;
    background:#fff;
    transition:.18s ease;
}

.dropdown-card:hover{
    border-color:rgba(220,174,75,.38);
    background:#fffaf1;
    transform:translateY(-1px);
}

.drop-icon{
    width:42px;
    height:42px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:rgba(13,107,79,.1);
    color:var(--green);
    font-weight:900;
}

.dropdown-card b{
    display:block;
    font-size:14px;
    margin-bottom:4px;
}

.dropdown-card em{
    display:block;
    font-style:normal;
    font-size:12.5px;
    line-height:1.45;
    color:var(--muted);
}

.dropdown-card i{
    font-style:normal;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    color:#5f3b08;
    background:rgba(246,216,120,.48);
    border-radius:999px;
    padding:6px 8px;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    padding:13px 18px;
    font-weight:900;
    border:1px solid transparent;
    cursor:pointer;
    transition:.2s ease;
    white-space:nowrap;
}

.btn-primary{
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#211609;
    box-shadow:0 18px 38px rgba(220,174,75,.32);
}

.btn-primary:hover{
    transform:translateY(-2px);
}

.btn-dark{
    background:#15100a;
    color:#fff;
}

.btn-light{
    background:#fff;
    border-color:var(--line);
    color:var(--ink);
}

.btn-green{
    background:var(--green);
    color:#fff;
}

.btn-ghost{
    border-color:rgba(255,255,255,.22);
    color:#fff;
    background:rgba(255,255,255,.08);
}

.icon-search{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    background:#fff;
    border-radius:15px;
}

.icon-search svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

/* Mobile menu */
.menu-toggle{
    display:none;
    border:1px solid var(--line);
    background:#fff;
    border-radius:15px;
    width:48px;
    height:48px;
    padding:11px;
}

.menu-toggle span{
    display:block;
    height:2px;
    background:#1b130a;
    margin:5px 0;
    border-radius:99px;
    transition:.18s ease;
}

.menu-toggle.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2){
    opacity:0;
}

.menu-toggle.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.mobile-panel{
    display:none;
    border-top:1px solid var(--line);
    padding:16px 0 20px;
}

.mobile-search{
    display:flex;
    gap:8px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:8px;
    margin-bottom:12px;
}

.mobile-search input{
    flex:1;
    border:0;
    outline:0;
    padding:0 8px;
    min-width:0;
}

.mobile-search button{
    border:0;
    border-radius:14px;
    background:#15100a;
    color:#fff;
    font-weight:900;
    padding:10px 13px;
}

.mobile-nav-block{
    border-bottom:1px solid var(--line);
}

.mobile-parent{
    width:100%;
    border:0;
    background:transparent;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 2px;
    font-weight:900;
    color:var(--ink);
    text-align:left;
}

.mobile-parent b{
    font-size:22px;
    color:var(--gold);
}

.mobile-children{
    display:none;
    padding:0 0 12px 12px;
}

.mobile-nav-block.is-open .mobile-children{
    display:grid;
    gap:8px;
}

.mobile-nav-block.is-open .mobile-parent b{
    transform:rotate(45deg);
}

.mobile-children a,
.mobile-single{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.7);
    color:var(--muted);
    font-weight:800;
}

.mobile-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:14px;
}

/* =========================================================
   Hero
========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    padding:74px 0 34px;
}

.hero:before{
    content:"";
    position:absolute;
    inset:0 0 auto auto;
    width:58vw;
    height:58vw;
    background:radial-gradient(circle,rgba(246,216,120,.38),transparent 62%);
    transform:translate(20%,-32%);
    pointer-events:none;
}

.hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1.04fr .96fr;
    gap:48px;
    align-items:center;
}

.kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#5a3c0f;
    background:rgba(246,216,120,.28);
    border:1px solid rgba(220,174,75,.32);
    border-radius:999px;
    padding:9px 13px;
}

.kicker:before{
    content:"";
    width:8px;
    height:8px;
    background:var(--green);
    border-radius:50%;
}

.light-kicker{
    color:#ffeab1;
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.14);
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(44px,7vw,86px);
    line-height:.95;
    letter-spacing:-.055em;
    margin:20px 0;
}

.hero h1 strong{
    color:#9a6818;
}

.hero p{
    font-size:clamp(16px,2vw,20px);
    line-height:1.75;
    color:#5d5147;
    max-width:680px;
    margin:0;
}

.hero-search{
    margin:28px 0 20px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:10px;
    display:flex;
    gap:10px;
    box-shadow:var(--shadow);
}

.hero-search input{
    flex:1;
    border:0;
    outline:0;
    font-size:16px;
    padding:0 14px;
    min-width:0;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
}

.proof{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:24px;
}

.proof-card{
    background:rgba(255,255,255,.72);
    border:1px solid var(--line);
    border-radius:18px;
    padding:13px 16px;
    min-width:142px;
}

.proof-card b{
    font-size:22px;
    display:block;
}

.proof-card span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top:4px;
}

.hero-visual{
    position:relative;
    min-height:580px;
}

.reader-frame{
    position:absolute;
    inset:15px 0 auto auto;
    width:86%;
    background:#16100a;
    border:1px solid rgba(255,255,255,.1);
    border-radius:34px;
    padding:18px;
    box-shadow:0 35px 90px rgba(24,15,4,.28);
    transform:rotate(2deg);
}

.reader-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    margin-bottom:14px;
}

.dots{
    display:flex;
    gap:6px;
}

.dots i{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#f2d36d;
}

.dots i:nth-child(2){
    background:#51c19a;
}

.dots i:nth-child(3){
    background:#f26a6a;
}

.reader-screen{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#fffdf8,#fff4dd);
    min-height:430px;
    border-radius:24px;
    padding:38px;
}

.watermark{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-24deg);
    font-weight:900;
    font-size:20px;
    color:rgba(30,20,10,.075);
    white-space:nowrap;
}

.reader-screen small{
    font-weight:900;
    color:var(--green);
    letter-spacing:.12em;
    text-transform:uppercase;
}

.reader-screen h3{
    font-family:'Playfair Display',serif;
    font-size:34px;
    line-height:1.05;
    margin:12px 0 30px;
}

.reader-line{
    height:13px;
    background:rgba(37,26,16,.14);
    border-radius:999px;
    margin:16px 0;
}

.reader-line.short{
    width:62%;
}

.reader-controls{
    display:flex;
    gap:10px;
    margin-top:34px;
}

.reader-controls span{
    height:45px;
    flex:1;
    border-radius:14px;
    background:rgba(13,107,79,.12);
}

.floating-book{
    position:absolute;
    left:0;
    bottom:54px;
    width:210px;
    border-radius:22px;
    box-shadow:0 30px 70px rgba(20,10,0,.24);
    transform:rotate(-9deg);
}

.safe-card{
    position:absolute;
    right:4%;
    bottom:0;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    border-radius:24px;
    padding:18px;
    max-width:290px;
}

.safe-card b{
    display:block;
}

.safe-card span{
    display:block;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
    margin-top:6px;
}

/* =========================================================
   Sections / Cards / Books
========================================================= */

.section{
    padding:48px 0;
}

.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:24px;
}

.section-head h2,
.panel h2,
.footer-cta h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(32px,5vw,58px);
    line-height:1;
    margin:14px 0 10px;
    letter-spacing:-.04em;
}

.section-head p,
.panel p{
    color:var(--muted);
    line-height:1.75;
    margin:0;
    max-width:650px;
}

.see{
    font-weight:900;
    color:#76500f;
    white-space:nowrap;
}

.feature-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.feature,
.panel,
.cat-card{
    background:rgba(255,255,255,.78);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:0 16px 50px rgba(30,18,5,.06);
}

.feature i{
    font-style:normal;
    font-size:28px;
}

.feature h3{
    margin:14px 0 8px;
}

.feature p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
}

.book-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.book-card{
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(20,10,0,.06);
    transition:.2s ease;
}

.book-card:hover{
    transform:translateY(-5px);
    box-shadow:0 30px 70px rgba(20,10,0,.13);
    border-color:rgba(220,174,75,.36);
}

.book-cover{
    position:relative;
    background:#f7ead1;
}

.book-cover:before{
    content:"";
    display:block;
    padding-top:138%;
}

.book-cover img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.book-badge,
.book-cover span{
    position:absolute;
    top:12px;
    left:12px;
    background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 10px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    color:#573700;
}

.book-meta,
.book-info{
    padding:15px;
}

.book-meta h3,
.book-info h3{
    font-size:16px;
    line-height:1.25;
    margin:0;
    height:2.5em;
    overflow:hidden;
}

.book-author,
.book-info p{
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:7px 0 0;
}

.book-info small{
    display:block;
    color:var(--green);
    font-size:12px;
    font-weight:900;
    margin-bottom:8px;
    text-transform:capitalize;
}

.book-row,
.book-foot,
.book-info .book-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.book-row{
    margin-top:14px;
}

.book-row strong,
.book-info .book-meta strong{
    font-size:17px;
}

.book-row span,
.book-info .book-meta del{
    text-decoration:line-through;
    color:#9a9288;
    font-size:12px;
}

.book-info .book-meta span{
    color:var(--green);
    font-size:12px;
    font-weight:900;
}

.book-foot{
    margin-top:12px;
    font-size:12px;
    color:var(--muted);
}

.book-foot em{
    font-style:normal;
}

.book-foot b{
    color:var(--green);
}

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.panel.dark{
    background:linear-gradient(135deg,#130f0a,#27190a);
    color:#fff;
}

.panel.dark p,
.panel.dark .check-list li{
    color:#e4d7c2;
}

.check-list{
    list-style:none;
    padding:0;
    margin:18px 0 0;
    display:grid;
    gap:12px;
}

.check-list li{
    position:relative;
    padding-left:30px;
    color:#554a3f;
    line-height:1.6;
}

.check-list li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:21px;
    height:21px;
    border-radius:50%;
    background:rgba(13,107,79,.14);
    display:grid;
    place-items:center;
    color:var(--green);
    font-size:12px;
    font-weight:900;
}

.panel.dark .check-list li:before{
    background:rgba(246,216,120,.18);
    color:var(--gold2);
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.cat-card{
    min-height:145px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(180deg,#fff,#fff7e7);
}

.cat-card b{
    font-size:18px;
}

.cat-card span{
    color:var(--green);
    font-weight:900;
}

/* Dynamic builder additions */
.hero-main-image,
.builder-section-image{
    width:100%;
    max-height:520px;
    object-fit:cover;
    border-radius:28px;
    box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.builder-style-dark,
.builder-style-premium_dark{
    background:linear-gradient(135deg,#07130f,#0f7a4f);
    color:#fff;
}

.builder-style-dark .section-head p,
.builder-style-premium_dark .section-head p{
    color:rgba(255,255,255,.76);
}

.builder-style-gold{
    background:linear-gradient(135deg,#fff9e8,#ffffff);
}

.builder-style-green{
    background:linear-gradient(135deg,#ecfdf3,#ffffff);
}

.builder-body{
    margin-top:16px;
    color:inherit;
    line-height:1.75;
}

.newsletter-panel{
    max-width:860px;
    margin:0 auto;
    text-align:center;
    background:#fff;
    padding:clamp(28px,5vw,56px);
    border-radius:32px;
    box-shadow:0 24px 70px rgba(15,23,42,.08);
    border:1px solid rgba(15,23,42,.08);
}

.newsletter-form{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:12px;
    margin-top:22px;
}

.newsletter-form input{
    min-height:52px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.14);
    padding:0 14px;
}

.newsletter-message{
    margin-top:16px;
    background:#ecfdf3;
    color:#05603a;
    padding:12px 14px;
    border-radius:14px;
    font-weight:800;
}

/* =========================================================
   Footer
========================================================= */

.site-footer{
    margin-top:60px;
    background:
        radial-gradient(circle at top right,rgba(246,216,120,.18),transparent 32%),
        linear-gradient(180deg,#16100a,#090704);
    color:#fff;
    padding:56px 0 22px;
}

.footer-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-bottom:1px solid rgba(255,255,255,.12);
    padding-bottom:34px;
    margin-bottom:34px;
}

.footer-cta h2{
    margin-bottom:0;
    max-width:720px;
}

.footer-cta-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.footer-main{
    display:grid;
    grid-template-columns:.9fr 1.4fr;
    gap:42px;
}

.footer-logo .brand-text small{
    color:#cdbf9e;
}

.footer-brand p{
    color:#d7cbb4;
    line-height:1.75;
    max-width:460px;
}

.footer-contact{
    display:grid;
    gap:8px;
    margin-top:18px;
}

.footer-contact a,
.footer-contact span{
    color:#f4e5c5;
    font-weight:700;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.footer-links h3{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--gold2);
    margin:0 0 14px;
}

.footer-links a{
    display:block;
    color:#e9dfce;
    font-weight:700;
    margin:0 0 11px;
    font-size:14px;
}

.footer-links a:hover{
    color:#fff;
    text-decoration:underline;
}

.footer-newsletter{
    margin-top:34px;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:24px 0;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:22px;
    align-items:center;
}

.footer-newsletter h3{
    margin:0 0 6px;
}

.footer-newsletter p{
    margin:0;
    color:#d7cbb4;
}

.footer-newsletter form{
    display:grid;
    grid-template-columns:1fr 1.2fr auto;
    gap:10px;
}

.footer-newsletter input{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff;
    border-radius:999px;
    padding:14px 16px;
    outline:0;
}

.footer-newsletter input::placeholder{
    color:#cabfae;
}

.newsletter-msg{
    display:block;
    color:#f7d77d;
    margin-top:10px;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:#bfb3a2;
    font-size:13px;
    padding-top:20px;
}

.footer-bottom div{
    display:flex;
    gap:16px;
}

.footer-bottom a{
    color:#d9d0c3;
    font-weight:800;
}

.hide-md{
    display:inline-flex;
}

.hide-sm{
    display:inline-flex;
}

/* =========================================================
   Auth + Dashboard Pages
========================================================= */

.auth-page .p4b-page-shell{
    background:radial-gradient(circle at top left,rgba(217,164,65,.12),transparent 35%),#120e08;
}

.auth-shell{
    max-width:1180px;
    margin:0 auto;
    padding:64px 20px 80px;
    width:100%;
}

.auth-narrow{
    max-width:620px;
}

.auth-hero-card{
    display:grid;
    grid-template-columns:1fr 470px;
    gap:28px;
    align-items:stretch;
    background:linear-gradient(135deg,#201509,#120e08 58%,#063a2c);
    border:1px solid rgba(255,255,255,.12);
    border-radius:34px;
    padding:28px;
    box-shadow:0 28px 80px rgba(0,0,0,.35);
    overflow:hidden;
    position:relative;
}

.auth-hero-card:before{
    content:"";
    position:absolute;
    inset:-40% auto auto -18%;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(217,164,65,.16);
    filter:blur(8px);
}

.auth-split-reverse{
    grid-template-columns:500px 1fr;
}

.auth-copy{
    position:relative;
    z-index:1;
    color:#fff;
    padding:44px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.auth-copy h1{
    font-family:var(--font-display,Georgia,serif);
    font-size:clamp(2.1rem,4vw,4.8rem);
    line-height:.98;
    margin:14px 0 18px;
    letter-spacing:-.055em;
    max-width:760px;
}

.auth-copy p{
    font-size:1.04rem;
    line-height:1.75;
    color:rgba(255,255,255,.76);
    max-width:650px;
}

.eyebrow{
    display:inline-flex;
    width:max-content;
    align-items:center;
    gap:8px;
    border:1px solid rgba(217,164,65,.35);
    background:rgba(217,164,65,.12);
    color:#f1c86b;
    border-radius:999px;
    padding:8px 12px;
    font-weight:900;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.auth-points,
.auth-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.auth-points span,
.auth-stats b{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
    color:#fff;
    border-radius:999px;
    padding:10px 13px;
    font-size:.9rem;
    font-weight:800;
}

.auth-panel{
    position:relative;
    z-index:2;
    background:#fffaf0;
    border:1px solid rgba(217,164,65,.25);
    border-radius:26px;
    padding:28px;
    box-shadow:0 24px 60px rgba(0,0,0,.22);
}

.single-auth-panel{
    max-width:620px;
    margin:0 auto;
}

.auth-panel-head h2{
    font-size:1.8rem;
    letter-spacing:-.04em;
    margin:0 0 6px;
    color:#1e160b;
}

.auth-panel-head p{
    margin:0 0 20px;
    color:#6f604d;
    line-height:1.6;
}

.auth-form{
    display:grid;
    gap:15px;
}

.auth-form label{
    display:grid;
    gap:8px;
    color:#2a2115;
    font-weight:900;
    font-size:.92rem;
}

.auth-form label small{
    color:#85745f;
    font-weight:700;
}

.auth-form input,
.auth-form textarea{
    width:100%;
    border:1px solid #e2d3bb;
    background:#fff;
    border-radius:16px;
    padding:14px 15px;
    color:#1d160c;
    font:inherit;
    outline:none;
    transition:border .18s ease,box-shadow .18s ease,background .18s ease;
}

.auth-form textarea{
    resize:vertical;
    min-height:110px;
}

.auth-form input:focus,
.auth-form textarea:focus{
    border-color:#d9a441;
    box-shadow:0 0 0 4px rgba(217,164,65,.16);
    background:#fffefa;
}

.form-row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:.9rem;
}

.form-row-between a,
.auth-switch a{
    color:#0b6b4c;
    font-weight:900;
    text-decoration:none;
}

.form-row-between a:hover,
.auth-switch a:hover{
    text-decoration:underline;
}

.checkline{
    display:flex!important;
    grid-template-columns:auto 1fr!important;
    align-items:flex-start;
    gap:10px!important;
    font-weight:800!important;
    color:#4a3f31!important;
    line-height:1.45;
}

.checkline input{
    width:18px!important;
    height:18px;
    margin-top:2px;
    accent-color:#0b6b4c;
    box-shadow:none!important;
}

.btn-wide{
    width:100%;
    justify-content:center;
    padding:15px 20px!important;
    font-size:1rem;
}

.auth-switch{
    margin:18px 0 0;
    color:#6f604d;
    line-height:1.6;
    text-align:center;
}

.alert{
    border-radius:16px;
    padding:12px 14px;
    margin:0 0 16px;
    font-weight:800;
    line-height:1.45;
}

.alert-error{
    background:#fff0f0;
    border:1px solid #ffc9c9;
    color:#9a1f1f;
}

.alert-success{
    background:#edfff7;
    border:1px solid #b8f0d6;
    color:#075f42;
}

.alert-info{
    background:#eef6ff;
    border:1px solid #c9e3ff;
    color:#174d7b;
}

.dashboard-shell{
    max-width:1180px;
    margin:0 auto;
    padding:54px 20px 80px;
}

.dashboard-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:linear-gradient(135deg,#fffaf0,#f4ead8);
    border:1px solid #ead9bb;
    border-radius:30px;
    padding:30px;
    box-shadow:0 20px 50px rgba(44,29,7,.08);
}

.dashboard-hero h1{
    font-family:var(--font-display,Georgia,serif);
    font-size:clamp(2rem,4vw,4rem);
    line-height:1;
    margin:12px 0;
    color:#1e160b;
    letter-spacing:-.05em;
}

.dashboard-hero p{
    max-width:680px;
    color:#6f604d;
    font-size:1.02rem;
    line-height:1.7;
    margin:0;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:24px 0;
}

.dash-card,
.empty-state{
    background:#fff;
    border:1px solid #ebdfca;
    border-radius:24px;
    padding:24px;
    box-shadow:0 16px 40px rgba(44,29,7,.06);
}

.dash-card{
    display:grid;
    gap:10px;
}

.dash-card b{
    color:#6f604d;
    text-transform:uppercase;
    font-size:.78rem;
    letter-spacing:.11em;
}

.dash-card strong{
    font-size:2.1rem;
    color:#1e160b;
}

.dash-card p,
.empty-state p{
    color:#6f604d;
    line-height:1.65;
    margin:0;
}

.empty-state{
    text-align:center;
    padding:42px 24px;
}

.empty-state h2{
    font-size:1.7rem;
    margin:0 0 10px;
    color:#1e160b;
}

.empty-state .btn{
    margin-top:18px;
}

/* =========================================================
   Premium Auth Pages
========================================================= */

body.premium-auth-page{
    background:
        radial-gradient(circle at top left,rgba(216,168,79,.22),transparent 34%),
        radial-gradient(circle at bottom right,rgba(15,122,79,.20),transparent 36%),
        linear-gradient(135deg,#fbf7ed 0%,#f3efe6 46%,#eef8f2 100%);
    color:#101828;
}

.premium-auth-shell{
    min-height:calc(100vh - 140px);
    padding:54px 18px 64px;
    position:relative;
    overflow:hidden;
}

.premium-auth-shell::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(7,19,15,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(7,19,15,.035) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 85%);
}

.premium-auth-wrap{
    width:min(1180px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
    gap:34px;
    align-items:stretch;
    position:relative;
    z-index:2;
}

.premium-auth-left{
    position:relative;
    background:
        linear-gradient(145deg,rgba(7,19,15,.96),rgba(9,31,23,.96)),
        url('/assets/img/auth-books-bg.jpg');
    background-size:cover;
    background-position:center;
    border-radius:var(--p4b-radius);
    padding:52px;
    color:#fff;
    overflow:hidden;
    min-height:650px;
    box-shadow:var(--p4b-shadow);
    border:1px solid rgba(255,255,255,.12);
}

.premium-auth-left::after{
    content:"";
    position:absolute;
    inset:auto -80px -110px auto;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(216,168,79,.18);
    filter:blur(5px);
}

.premium-auth-glow{
    position:absolute;
    top:-130px;
    right:-120px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(22,163,109,.28);
    filter:blur(10px);
}

.premium-auth-eyebrow,
.auth-mini-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:fit-content;
    padding:8px 13px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.premium-auth-eyebrow{
    color:var(--p4b-gold-soft);
    background:rgba(216,168,79,.13);
    border:1px solid rgba(216,168,79,.32);
    position:relative;
    z-index:1;
}

.auth-mini-badge{
    color:#0f7a4f;
    background:rgba(15,122,79,.10);
    border:1px solid rgba(15,122,79,.18);
}

.premium-auth-left h1{
    position:relative;
    z-index:1;
    margin:24px 0 18px;
    font-size:clamp(38px,5vw,68px);
    line-height:.98;
    letter-spacing:-.06em;
    max-width:760px;
    color:#fff;
}

.premium-auth-lead{
    position:relative;
    z-index:1;
    color:rgba(255,255,255,.78);
    font-size:18px;
    line-height:1.75;
    max-width:660px;
    margin:0 0 34px;
}

.premium-auth-search-card{
    position:relative;
    z-index:1;
    width:min(520px,100%);
    margin-top:34px;
}

.premium-reader-preview{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    border-radius:24px;
    padding:14px;
    backdrop-filter:blur(16px);
    box-shadow:0 28px 60px rgba(0,0,0,.25);
}

.reader-preview-top{
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 12px 13px;
}

.reader-preview-top span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.48);
}

.reader-preview-body{
    position:relative;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,249,236,.96));
    color:#14201a;
    border-radius:18px;
    padding:28px;
    min-height:245px;
    overflow:hidden;
}

.reader-preview-body small{
    display:inline-block;
    color:var(--p4b-green);
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:11px;
    margin-bottom:12px;
}

.reader-preview-body h3{
    font-size:25px;
    line-height:1.16;
    letter-spacing:-.04em;
    max-width:360px;
    margin:0 0 22px;
}

.reader-preview-body p{
    height:10px;
    border-radius:99px;
    background:rgba(15,23,42,.12);
    margin:12px 0;
    width:86%;
}

.reader-preview-body p.short{
    width:58%;
}

.reader-watermark{
    position:absolute;
    right:-42px;
    bottom:42px;
    transform:rotate(-25deg);
    color:rgba(15,122,79,.14);
    font-size:22px;
    font-weight:900;
    white-space:nowrap;
    letter-spacing:-.04em;
}

.premium-auth-benefits{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:34px;
}

.premium-auth-benefits div{
    min-height:130px;
    padding:20px;
    border-radius:22px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
}

.premium-auth-benefits strong{
    display:block;
    color:#fff;
    font-size:15px;
    margin-bottom:8px;
}

.premium-auth-benefits span{
    display:block;
    color:rgba(255,255,255,.66);
    font-size:13px;
    line-height:1.55;
}

.premium-auth-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.premium-auth-card{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.72);
    border-radius:var(--p4b-radius);
    box-shadow:var(--p4b-shadow);
    padding:38px;
    backdrop-filter:blur(18px);
}

.premium-auth-card-header{
    margin-bottom:24px;
}

.premium-auth-card-header h2{
    font-size:clamp(30px,3vw,42px);
    line-height:1.05;
    letter-spacing:-.055em;
    margin:16px 0 10px;
    color:#101828;
}

.premium-auth-card-header p{
    margin:0;
    color:var(--p4b-muted);
    line-height:1.65;
    font-size:15px;
}

.premium-alert{
    padding:13px 15px;
    border-radius:16px;
    margin:0 0 16px;
    font-size:14px;
    line-height:1.5;
    border:1px solid transparent;
}

.premium-alert-error,
.premium-alert-danger{
    color:#8a1f11;
    background:#fff0ec;
    border-color:#ffd0c4;
}

.premium-alert-success{
    color:#05603a;
    background:#ecfdf3;
    border-color:#abefc6;
}

.premium-alert-info{
    color:#1849a9;
    background:#eff8ff;
    border-color:#b2ddff;
}

.premium-alert-warning{
    color:#93370d;
    background:#fffaeb;
    border-color:#fedf89;
}

.premium-auth-form{
    display:grid;
    gap:17px;
}

.premium-auth-form label{
    display:grid;
    gap:8px;
    color:#344054;
    font-size:14px;
    font-weight:750;
}

.premium-auth-form label span{
    display:inline-block;
}

.premium-auth-form input[type="email"],
.premium-auth-form input[type="password"],
.premium-auth-form input[type="text"]{
    width:100%;
    height:56px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.14);
    background:#fff;
    color:#101828;
    padding:0 17px;
    font-size:15px;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.premium-auth-form input::placeholder{
    color:#98a2b3;
}

.premium-auth-form input:focus{
    border-color:rgba(15,122,79,.72);
    box-shadow:0 0 0 5px rgba(15,122,79,.12);
    background:#fff;
}

.premium-form-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:2px;
    font-size:14px;
}

.premium-checkline{
    display:inline-flex!important;
    grid-template-columns:unset!important;
    align-items:center;
    gap:9px!important;
    margin:0;
    color:#475467!important;
    font-weight:650!important;
    cursor:pointer;
}

.premium-checkline input{
    width:17px;
    height:17px;
    accent-color:var(--p4b-green);
}

.premium-form-meta a{
    color:var(--p4b-green);
    font-weight:800;
    text-decoration:none;
}

.premium-form-meta a:hover{
    color:var(--p4b-deep);
    text-decoration:underline;
}

.premium-auth-submit{
    width:100%;
    height:58px;
    border:0;
    border-radius:18px;
    background:linear-gradient(135deg,var(--p4b-green),var(--p4b-green-2));
    color:#fff;
    font-weight:900;
    font-size:15px;
    letter-spacing:-.01em;
    cursor:pointer;
    box-shadow:0 18px 38px rgba(15,122,79,.27);
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.premium-auth-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 48px rgba(15,122,79,.34);
    filter:saturate(1.06);
}

.premium-auth-submit:active{
    transform:translateY(0);
}

.premium-auth-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:26px 0 18px;
    color:#667085;
    font-size:13px;
    font-weight:800;
}

.premium-auth-divider::before,
.premium-auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(15,23,42,.10);
}

.premium-auth-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.premium-auth-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    border-radius:16px;
    padding:12px 14px;
    text-align:center;
    text-decoration:none;
    font-weight:850;
    font-size:14px;
    color:#101828;
    background:#fff;
    border:1px solid rgba(15,23,42,.12);
    transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.premium-auth-actions a:hover{
    transform:translateY(-2px);
    border-color:rgba(15,122,79,.32);
    background:#f8fffb;
}

.premium-auth-note{
    margin:18px 0 0;
    color:#667085;
    line-height:1.65;
    font-size:13px;
}

.premium-auth-trust{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.premium-auth-trust span{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.70);
    border:1px solid rgba(255,255,255,.78);
    color:#344054;
    font-size:12px;
    font-weight:800;
    box-shadow:0 10px 25px rgba(15,23,42,.06);
}

/* =========================================================
   Public Categories Pages
========================================================= */

.p4b-cat-hero,
.p4b-single-cat-hero{
    padding:clamp(48px,8vw,96px) 0;
    background:
        radial-gradient(circle at top right,rgba(216,168,79,.22),transparent 34%),
        radial-gradient(circle at bottom left,rgba(255,255,255,.08),transparent 30%),
        linear-gradient(135deg,#07130f,#0f7a4f);
    color:#fff;
}

.p4b-cat-hero h1,
.p4b-single-cat-hero h1{
    max-width:900px;
    margin:16px 0;
    font-size:clamp(42px,7vw,82px);
    line-height:.95;
    letter-spacing:-.07em;
    color:#fff;
}

.p4b-cat-hero p,
.p4b-single-cat-hero p{
    max-width:760px;
    color:rgba(255,255,255,.82);
    font-size:18px;
    line-height:1.75;
}

.p4b-cat-search{
    margin-top:26px;
    max-width:720px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    padding:8px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    box-shadow:0 18px 46px rgba(0,0,0,.14);
}

.p4b-cat-search input{
    min-height:52px;
    border-radius:14px;
    border:0;
    padding:0 16px;
    outline:none;
    background:#fff;
    color:#101828;
}

.p4b-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
    color:rgba(255,255,255,.78);
    font-size:14px;
    font-weight:800;
}

.p4b-breadcrumb a{
    color:#fff;
    text-decoration:none;
}

.p4b-breadcrumb a:hover{
    text-decoration:underline;
}

.p4b-breadcrumb span{
    color:rgba(255,255,255,.58);
}

.p4b-single-cat-grid{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
    gap:36px;
    align-items:center;
}

.p4b-single-cat-art{
    min-height:330px;
    border-radius:36px;
    background:
        radial-gradient(circle at top right,rgba(216,168,79,.20),transparent 40%),
        rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    display:grid;
    place-items:center;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.p4b-single-cat-art img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.p4b-single-cat-art div{
    text-align:center;
    padding:30px;
}

.p4b-single-cat-art strong{
    display:block;
    font-size:86px;
    margin-bottom:14px;
}

.p4b-single-cat-art span{
    font-size:24px;
    font-weight:900;
    color:#fff;
}

.p4b-single-cat-hero .kicker,
.p4b-single-cat-hero .kicker *,
.p4b-category-badge,
.p4b-category-badge *{
    color:#fff!important;
}

.p4b-category-badge{
    display:inline-flex!important;
    align-items:center;
    gap:9px;
    width:auto;
    max-width:max-content;
    padding:11px 18px;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(216,168,79,.30),rgba(216,168,79,.16));
    border:1px solid rgba(255,255,255,.24);
    color:#fff!important;
    font-size:13px;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
    box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(8px);
}

.p4b-category-badge-icon{
    display:inline-grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:rgba(15,122,79,.48);
    font-size:13px;
    line-height:1;
    color:#fff!important;
}

.p4b-category-badge-text{
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}

.p4b-featured-cats,
.p4b-subcategory-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.p4b-featured-cat,
.p4b-subcategory-card{
    display:grid;
    gap:8px;
    padding:22px;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 18px 48px rgba(15,23,42,.06);
    color:inherit;
    text-decoration:none;
    transition:.18s ease;
}

.p4b-featured-cat:hover,
.p4b-subcategory-card:hover{
    transform:translateY(-2px);
    box-shadow:0 24px 58px rgba(15,23,42,.10);
}

.p4b-featured-cat span,
.p4b-subcategory-card span{
    font-size:30px;
}

.p4b-featured-cat strong,
.p4b-subcategory-card strong{
    font-size:18px;
}

.p4b-featured-cat em,
.p4b-subcategory-card em{
    color:#667085;
    font-style:normal;
    font-size:13px;
}

.p4b-cat-directory{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.p4b-cat-card{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 48px rgba(15,23,42,.06);
}

.p4b-cat-card-head{
    display:flex;
    gap:16px;
    padding:22px;
    color:inherit;
    text-decoration:none;
    background:radial-gradient(circle at top right,rgba(15,122,79,.08),transparent 40%),#fff;
}

.p4b-cat-icon{
    flex:0 0 58px;
    width:58px;
    height:58px;
    border-radius:20px;
    display:grid;
    place-items:center;
    font-size:28px;
    background:#ecfdf3;
    border:1px solid rgba(15,122,79,.12);
    overflow:hidden;
}

.p4b-cat-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.p4b-cat-card h3{
    margin:0 0 8px;
    font-size:22px;
    letter-spacing:-.035em;
}

.p4b-cat-card p{
    margin:0 0 10px;
    color:#667085;
    line-height:1.6;
}

.p4b-cat-card small{
    font-weight:850;
    color:#0f7a4f;
}

.p4b-subcats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 22px 22px;
}

.p4b-subcats a{
    display:inline-flex;
    gap:6px;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    background:#f8faf9;
    border:1px solid rgba(15,23,42,.08);
    color:#344054;
    text-decoration:none;
    font-size:13px;
    font-weight:750;
}

.p4b-empty-category{
    padding:clamp(28px,5vw,52px);
    border-radius:30px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 18px 48px rgba(15,23,42,.06);
    text-align:center;
}

.p4b-empty-category h3{
    margin-top:0;
    font-size:28px;
}

.p4b-empty-category p{
    max-width:620px;
    margin:0 auto 22px;
    color:#667085;
    line-height:1.7;
}

.p4b-related-cats-section{
    background:#f8faf9;
}

.p4b-related-cats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.p4b-related-cats a{
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:10px 13px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    color:#344054;
    text-decoration:none;
    font-weight:800;
    transition:.18s ease;
}

.p4b-related-cats a:hover{
    background:#ecfdf3;
    color:#0f7a4f;
}

/* =========================================================
   Pay4book Header Category Mega Menu
   Full Premium + Stable Clickable Version
========================================================= */

.has-category-mega{
    position:static!important;
}

.has-category-mega::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:28px;
    background:transparent;
    z-index:3100;
    pointer-events:auto;
}

.category-mega-panel{
    position:absolute;
    left:50%;
    top:calc(100% + 2px);
    transform:translateX(-50%) translateY(8px);
    width:min(1180px,calc(100vw - 28px));
    max-height:min(76vh,720px);
    overflow-x:hidden;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:
        radial-gradient(circle at top right,rgba(216,168,79,.18),transparent 30%),
        radial-gradient(circle at bottom left,rgba(15,122,79,.08),transparent 34%),
        linear-gradient(135deg,#ffffff,#f8fbf9);
    border:1px solid rgba(15,23,42,.10);
    border-radius:30px;
    box-shadow:0 30px 90px rgba(7,19,15,.22),0 1px 0 rgba(255,255,255,.85) inset;
    padding:18px;
    z-index:3200;
    transition:opacity .16s ease,visibility .16s ease,transform .16s ease;
    scrollbar-width:thin;
    scrollbar-color:rgba(15,122,79,.35) rgba(15,23,42,.06);
}

.category-mega-panel::-webkit-scrollbar{
    width:10px;
}

.category-mega-panel::-webkit-scrollbar-track{
    background:rgba(15,23,42,.05);
    border-radius:999px;
}

.category-mega-panel::-webkit-scrollbar-thumb{
    background:rgba(15,122,79,.35);
    border-radius:999px;
}

.has-category-mega:hover .category-mega-panel,
.has-category-mega:focus-within .category-mega-panel,
.category-mega-panel:hover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.category-mega-panel::before{
    content:"";
    position:absolute;
    top:-7px;
    left:50%;
    width:18px;
    height:18px;
    transform:translateX(-50%) rotate(45deg);
    background:#fff;
    border-left:1px solid rgba(15,23,42,.08);
    border-top:1px solid rgba(15,23,42,.08);
    z-index:-1;
}

.category-mega-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,420px);
    gap:18px;
    align-items:center;
    padding:10px 10px 18px;
    border-bottom:1px solid rgba(15,23,42,.08);
}

.mega-kicker{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:7px 11px;
    border-radius:999px;
    background:#ecfdf3;
    color:#0f7a4f;
    border:1px solid rgba(15,122,79,.12);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.category-mega-top strong{
    display:block;
    margin-top:8px;
    color:#07130f;
    font-size:clamp(22px,3vw,34px);
    line-height:1.05;
    letter-spacing:-.045em;
}

.category-mega-top p{
    margin:8px 0 0;
    max-width:660px;
    color:#667085;
    line-height:1.6;
    font-size:14px;
}

.mega-search{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:7px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 14px 36px rgba(15,23,42,.06);
}

.mega-search input{
    min-height:46px;
    border:0;
    outline:none;
    padding:0 12px;
    background:transparent;
    color:#101828;
    font-size:14px;
    min-width:0;
}

.mega-search input::placeholder{
    color:#98a2b3;
}

.mega-search button{
    min-height:46px;
    border:0;
    border-radius:13px;
    padding:0 16px;
    background:linear-gradient(135deg,#0f7a4f,#16a36d);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}

.mega-search button:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
    box-shadow:0 12px 28px rgba(15,122,79,.20);
}

.mega-featured-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:16px 10px 6px;
}

.mega-featured-row a{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:10px 12px;
    border-radius:16px;
    background:radial-gradient(circle at top right,rgba(216,168,79,.18),transparent 40%),#fff;
    border:1px solid rgba(15,23,42,.08);
    color:#07130f;
    text-decoration:none;
    font-size:13px;
    font-weight:850;
    overflow:hidden;
    transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.mega-featured-row a:hover{
    background:#ecfdf3;
    border-color:rgba(15,122,79,.16);
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(15,23,42,.07);
}

.mega-featured-row span{
    flex:0 0 auto;
    font-size:18px;
}

.mega-featured-row b{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.category-mega-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    padding:12px 10px;
}

.mega-cat-group{
    min-width:0;
    padding:13px;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 10px 28px rgba(15,23,42,.04);
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease;
}

.mega-cat-group:hover{
    background:radial-gradient(circle at top right,rgba(15,122,79,.07),transparent 40%),#fff;
    border-color:rgba(15,122,79,.18);
    box-shadow:0 16px 36px rgba(15,23,42,.07);
    transform:translateY(-1px);
}

.mega-cat-parent{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    color:#07130f;
    text-decoration:none;
}

.mega-cat-parent span{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#ecfdf3;
    border:1px solid rgba(15,122,79,.12);
    font-size:17px;
}

.mega-cat-parent strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#07130f;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}

.mega-cat-parent em{
    min-width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#f2f4f7;
    color:#667085;
    font-style:normal;
    font-size:11px;
    font-weight:900;
}

.mega-cat-children{
    display:grid;
    gap:5px;
    margin-top:10px;
    padding-left:44px;
}

.mega-cat-children a{
    color:#475467;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    line-height:1.35;
    transition:color .16s ease,padding-left .16s ease;
}

.mega-cat-children a:hover{
    color:#0f7a4f;
    padding-left:2px;
}

.mega-cat-children .mega-more{
    color:#0f7a4f;
    font-weight:900;
    margin-top:3px;
}

.category-mega-bottom{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
    padding:14px 10px 4px;
    border-top:1px solid rgba(15,23,42,.08);
}

.category-mega-bottom a{
    display:inline-flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:999px;
    background:#07130f;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}

.category-mega-bottom a:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
    box-shadow:0 10px 24px rgba(15,23,42,.12);
}

.category-mega-bottom a:nth-child(2){
    background:#0f7a4f;
}

.category-mega-bottom a:nth-child(3){
    background:#d8a84f;
    color:#07130f;
}

.mobile-category-children{
    max-height:70vh;
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:rgba(15,122,79,.35) rgba(15,23,42,.06);
}

.mobile-category-parent-link{
    display:flex!important;
    align-items:center;
    gap:8px;
    font-weight:900!important;
    color:#07130f!important;
    background:#ecfdf3!important;
    border-radius:12px;
    margin-top:6px;
}

.mobile-category-child-link{
    padding-left:26px!important;
    color:#475467!important;
    font-size:14px;
    background:rgba(255,255,255,.7)!important;
}

.mobile-category-child-link:hover,
.mobile-category-parent-link:hover{
    color:#0f7a4f!important;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:1180px){
    .category-mega-panel{
        width:min(1040px,calc(100vw - 24px));
    }

    .category-mega-grid,
    .mega-featured-row{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:1080px){
    .desktop-links,
    .hide-md{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .main-nav{
        height:78px;
    }

    .mobile-panel.is-open{
        display:block;
    }

    .hero-grid,
    .split,
    .footer-main,
    .footer-newsletter{
        grid-template-columns:1fr;
    }

    .hero-visual{
        min-height:520px;
    }

    .reader-frame{
        width:92%;
        right:0;
    }

    .feature-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .book-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .footer-links{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .footer-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .auth-hero-card,
    .auth-split-reverse{
        grid-template-columns:1fr;
    }

    .auth-copy{
        padding:28px 12px;
    }

    .dashboard-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .premium-auth-wrap{
        grid-template-columns:1fr;
        max-width:760px;
    }

    .premium-auth-left{
        min-height:auto;
        padding:42px;
    }

    .premium-auth-right{
        justify-content:flex-start;
    }
}

@media (max-width:980px){
    .desktop-links .has-category-mega{
        display:none;
    }

    .category-mega-panel{
        display:none;
    }

    .has-category-mega::after{
        display:none;
    }

    .p4b-single-cat-grid{
        grid-template-columns:1fr;
    }

    .p4b-subcategory-grid,
    .p4b-featured-cats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .p4b-cat-directory{
        grid-template-columns:1fr;
    }

    .p4b-single-cat-art{
        min-height:250px;
    }
}

@media (max-width:760px){
    .mega-featured-row,
    .category-mega-grid,
    .category-mega-top{
        grid-template-columns:1fr;
    }

    .category-mega-panel{
        width:calc(100vw - 20px);
        max-height:78vh;
        padding:14px;
        border-radius:22px;
    }

    .category-mega-top{
        gap:12px;
        padding:8px 8px 14px;
    }

    .mega-search{
        grid-template-columns:1fr;
    }

    .mega-search button{
        width:100%;
    }

    .mega-cat-children{
        padding-left:0;
    }

    .mega-cat-parent{
        grid-template-columns:34px minmax(0,1fr);
    }

    .mega-cat-parent em{
        display:none;
    }

    .category-mega-bottom{
        justify-content:stretch;
    }

    .category-mega-bottom a{
        width:100%;
    }
}

@media (max-width:720px){
    .wrap{
        width:min(100% - 28px,var(--wrap));
    }

    .top-note-right{
        display:none;
    }

    .top-note-inner{
        justify-content:center;
        text-align:center;
    }

    .brand-text small{
        display:none;
    }

    .brand-text strong{
        font-size:19px;
    }

    .hero{
        padding-top:44px;
    }

    .hero-search{
        display:grid;
    }

    .hero-search input{
        padding:12px 10px;
    }

    .hero-visual{
        min-height:460px;
    }

    .reader-frame{
        width:100%;
        position:relative;
        inset:auto;
        transform:none;
    }

    .reader-screen{
        min-height:340px;
        padding:26px;
    }

    .reader-screen h3{
        font-size:27px;
    }

    .floating-book{
        width:145px;
        bottom:20px;
    }

    .safe-card{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:18px;
        max-width:none;
    }

    .feature-strip,
    .book-grid,
    .category-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .section{
        padding:34px 0;
    }

    .section-head{
        display:block;
    }

    .see{
        display:inline-block;
        margin-top:12px;
    }

    .panel,
    .feature,
    .cat-card{
        padding:19px;
        border-radius:22px;
    }

    .newsletter-form,
    .p4b-cat-search{
        grid-template-columns:1fr;
    }

    .footer-newsletter form{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        display:block;
        text-align:center;
    }

    .footer-bottom div{
        justify-content:center;
        margin-top:10px;
    }

    .hide-sm{
        display:none;
    }

    .auth-shell{
        padding:32px 14px 54px;
    }

    .auth-hero-card{
        padding:14px;
        border-radius:24px;
    }

    .auth-panel{
        padding:20px;
        border-radius:22px;
    }

    .form-row-between{
        align-items:flex-start;
        flex-direction:column;
    }

    .auth-points span,
    .auth-stats b{
        width:100%;
    }

    .dashboard-shell{
        padding:32px 14px 54px;
    }

    .dashboard-hero{
        padding:22px;
        border-radius:24px;
    }

    .dash-card,
    .empty-state{
        border-radius:20px;
        padding:20px;
    }

    .premium-auth-shell{
        padding:28px 14px 46px;
    }

    .premium-auth-left,
    .premium-auth-card{
        border-radius:24px;
    }

    .premium-auth-left{
        padding:30px 22px;
    }

    .premium-auth-left h1{
        font-size:40px;
        letter-spacing:-.055em;
    }

    .premium-auth-lead{
        font-size:16px;
        line-height:1.65;
    }

    .premium-auth-benefits{
        grid-template-columns:1fr;
    }

    .premium-auth-benefits div{
        min-height:unset;
    }

    .premium-auth-card{
        padding:26px 20px;
    }

    .premium-auth-card-header h2{
        font-size:31px;
    }

    .premium-form-meta{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .premium-auth-actions{
        grid-template-columns:1fr;
    }

    .premium-reader-preview{
        padding:10px;
    }

    .reader-preview-body{
        padding:22px;
        min-height:220px;
    }

    .p4b-cat-card-head{
        flex-direction:column;
    }

    .p4b-category-badge{
        padding:10px 15px;
        font-size:12px;
        letter-spacing:.10em;
    }

    .p4b-single-cat-hero h1{
        letter-spacing:-.045em;
    }
}

@media (max-width:640px){
    .p4b-featured-cats,
    .p4b-subcategory-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:460px){
    .book-grid,
    .category-grid,
    .feature-strip{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:42px;
    }

    .proof-card{
        flex:1;
        min-width:130px;
    }

    .nav-actions .icon-search{
        display:none;
    }

    .footer-links{
        grid-template-columns:1fr;
    }

    .mobile-search{
        display:grid;
    }

    .mobile-search button{
        width:100%;
    }
}

@media (max-width:420px){
    .premium-auth-left h1{
        font-size:35px;
    }

    .premium-auth-left{
        padding:26px 18px;
    }

    .premium-auth-card{
        padding:24px 16px;
    }

    .premium-auth-form input[type="email"],
    .premium-auth-form input[type="password"],
    .premium-auth-form input[type="text"],
    .premium-auth-submit{
        height:54px;
        border-radius:15px;
    }

    .premium-auth-trust{
        justify-content:flex-start;
    }
}



/* =========================================================
   Pay4book Front Header Mobile Width Fix + Visible Menu Bars
   Add this at the bottom of /assets/css/pay4books.css
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
}

.p4b-page-shell,
.site-header,
.top-note,
.main-nav,
.mobile-panel,
.mobile-links,
.mobile-actions,
.mobile-search {
    max-width: 100%;
}

.site-header {
    width: 100%;
    left: 0;
    right: 0;
    overflow: visible;
}

.site-header .wrap {
    width: min(var(--wrap), calc(100vw - 28px));
    max-width: calc(100vw - 28px);
}

.main-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.brand {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
}

.brand-logo,
.brand-mark {
    flex: 0 0 auto;
}

.brand-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.brand-text strong,
.brand-text small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-actions {
    min-width: 0;
}

/* Make the mobile toggle always visible and clear */
.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    min-width: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #ffffff;
    border-radius: 15px;
    padding: 11px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    z-index: 3500;
}

.menu-toggle-bar,
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #07130f;
    border-radius: 999px;
    margin: 0;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

/* Open state animation */
.menu-toggle.is-open .menu-toggle-bar:nth-child(1),
.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(2),
.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(3),
.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile panel must never exceed screen width */
.mobile-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.mobile-search {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
}

.mobile-search input {
    min-width: 0;
    max-width: 100%;
}

.mobile-search button {
    white-space: nowrap;
}

/* Protect mega menu from creating horizontal scroll */
.category-mega-panel {
    max-width: calc(100vw - 28px);
    overflow-x: hidden;
}

.category-mega-grid,
.mega-featured-row,
.category-mega-top,
.mega-search {
    min-width: 0;
}

.mega-cat-group,
.mega-featured-row a,
.mega-cat-parent,
.mega-cat-children a {
    min-width: 0;
}

.mega-cat-parent strong,
.mega-featured-row b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   Mobile Header Layout
========================================================= */

@media (max-width: 1080px) {
    .desktop-links {
        display: none !important;
    }

    .menu-toggle {
        display: inline-flex !important;
    }

    .main-nav {
        height: auto;
        min-height: 74px;
        padding: 12px 0;
        gap: 10px;
    }

    .brand {
        flex: 1 1 auto;
        max-width: calc(100% - 62px);
    }

    .brand-text strong {
        font-size: 18px;
        white-space: nowrap;
    }

    .brand-text small {
        display: none;
    }

    .nav-actions {
        display: none !important;
    }

    .mobile-panel {
        display: none;
        width: 100%;
        max-width: 100%;
        padding: 14px 0 18px;
        border-top: 1px solid rgba(15, 23, 42, .10);
        animation: p4bMobileMenuDrop .18s ease both;
    }

    .mobile-panel.is-open {
        display: block;
    }

    .mobile-links {
        display: grid;
        gap: 6px;
        width: 100%;
    }

    .mobile-nav-block {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    .mobile-parent,
    .mobile-parent-link {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 4px;
        color: #07130f;
        font-weight: 900;
        text-align: left;
        border: 0;
        background: transparent;
        overflow: hidden;
    }

    .mobile-parent span,
    .mobile-parent-link span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-parent b {
        flex: 0 0 auto;
        color: #d8a84f;
        font-size: 22px;
        line-height: 1;
    }

    .mobile-children {
        display: none;
        width: 100%;
        max-width: 100%;
        padding: 0 0 12px 0;
        overflow: hidden;
    }

    .mobile-nav-block.is-open .mobile-children {
        display: grid;
        gap: 8px;
    }

    .mobile-children a {
        width: 100%;
        max-width: 100%;
        display: block;
        padding: 11px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .76);
        color: #475467;
        font-weight: 800;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .mobile-category-children {
        max-height: 68vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 2px;
    }

    .mobile-category-parent-link {
        display: flex !important;
        gap: 8px;
        align-items: center;
        background: #ecfdf3 !important;
        color: #07130f !important;
    }

    .mobile-category-parent-link span {
        flex: 0 0 auto;
    }

    .mobile-category-child-link {
        padding-left: 24px !important;
        color: #475467 !important;
        font-size: 14px;
    }

    .mobile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }

    .mobile-actions .btn {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .site-header .wrap {
        width: min(100% - 22px, var(--wrap));
        max-width: calc(100vw - 22px);
    }

    .brand {
        max-width: calc(100% - 58px);
        gap: 9px;
    }

    .brand-mark,
    .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .brand-text strong {
        font-size: 16px;
        max-width: 180px;
    }

    .menu-toggle {
        width: 46px;
        height: 46px;
        min-width: 46px;
        flex-basis: 46px;
        border-radius: 14px;
    }

    .menu-toggle-bar,
    .menu-toggle span {
        width: 23px;
    }

    .mobile-search {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mobile-search button {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .brand-text strong {
        max-width: 140px;
        font-size: 15px;
    }

    .brand-mark,
    .brand-logo {
        width: 38px;
        height: 38px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;
    }
}

@keyframes p4bMobileMenuDrop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================================================
   Search Hero Badge Visibility Fix
   Makes “Explore Pay4book” white on dark hero section
========================================================= */

.p4b-search-hero .kicker,
.p4b-search-hero .kicker *,
.p4b-search-hero span.kicker {
    color: #ffffff !important;
}

.p4b-search-hero .kicker {
    background: rgba(216, 168, 79, .28);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}

.p4b-search-hero .kicker::before {
    background: #16a36d;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .10);
}




.p4b-info-hero .kicker,
.p4b-info-hero .kicker *,
.p4b-authors-hero .kicker,
.p4b-authors-hero .kicker *,
.p4b-cart-hero .kicker,
.p4b-cart-hero .kicker *,
.p4b-product-hero .kicker,
.p4b-product-hero .kicker *,
.p4b-cat-hero .kicker,
.p4b-cat-hero .kicker *,
.p4b-single-cat-hero .kicker,
.p4b-single-cat-hero .kicker * {
    color: #ffffff !important;
}





/* =========================================================
   Pay4book Header Upgrade — Newly Created Pages
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.site-header,
.main-nav,
.mobile-panel,
.mobile-links,
.mobile-actions {
    max-width: 100%;
}

.main-nav {
    min-width: 0;
}

.desktop-links {
    min-width: 0;
}

.nav-link {
    white-space: nowrap;
}

.dropdown-card {
    min-width: 0;
}

.dropdown-card span {
    min-width: 0;
}

.dropdown-card b,
.dropdown-card em {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-actions {
    flex: 0 0 auto;
}

.brand {
    min-width: 0;
}

.brand-text {
    min-width: 0;
    overflow: hidden;
}

.brand-text strong,
.brand-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #ffffff;
    border-radius: 15px;
    padding: 11px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.menu-toggle-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #07130f;
    border-radius: 999px;
    transition: transform .18s ease, opacity .18s ease;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* Make dropdowns easier to click */
.nav-item.has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    background: transparent;
}

.dropdown-panel {
    top: calc(100% + 6px);
}

.category-mega-panel {
    top: calc(100% + 2px);
}

/* Mobile */
@media (max-width: 1180px) {
    .desktop-links {
        gap: 0;
    }

    .nav-link {
        padding-inline: 9px;
        font-size: 13px;
    }

    .nav-publish-btn {
        padding-inline: 14px;
    }
}

@media (max-width: 1080px) {
    .desktop-links,
    .nav-actions {
        display: none !important;
    }

    .menu-toggle {
        display: inline-flex !important;
    }

    .main-nav {
        min-height: 74px;
        height: auto;
        padding: 12px 0;
        gap: 10px;
    }

    .brand {
        flex: 1 1 auto;
        max-width: calc(100% - 62px);
    }

    .brand-text strong {
        max-width: 100%;
        font-size: 18px;
    }

    .brand-text small {
        display: none;
    }

    .mobile-panel {
        display: none;
        width: 100%;
        max-width: 100%;
        padding: 14px 0 18px;
        border-top: 1px solid rgba(15, 23, 42, .10);
        overflow-x: hidden;
    }

    .mobile-panel.is-open {
        display: block;
    }

    .mobile-links {
        display: grid;
        gap: 6px;
        width: 100%;
    }

    .mobile-nav-block {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    .mobile-parent,
    .mobile-parent-link {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 15px 4px;
        color: #07130f;
        font-weight: 900;
        text-align: left;
        border: 0;
        background: transparent;
    }

    .mobile-parent span,
    .mobile-parent-link span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-parent b {
        flex: 0 0 auto;
        color: #d8a84f;
        font-size: 22px;
        line-height: 1;
        transition: transform .18s ease;
    }

    .mobile-nav-block.is-open .mobile-parent b {
        transform: rotate(45deg);
    }

    .mobile-children {
        display: none;
        width: 100%;
        max-width: 100%;
        padding: 0 0 12px 0;
    }

    .mobile-nav-block.is-open .mobile-children {
        display: grid;
        gap: 8px;
    }

    .mobile-children a {
        width: 100%;
        max-width: 100%;
        display: block;
        padding: 11px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .76);
        color: #475467;
        font-weight: 800;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .mobile-category-children {
        max-height: 68vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .mobile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        margin-top: 14px;
    }

    .mobile-actions .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .site-header .wrap {
        width: min(100% - 22px, var(--wrap));
        max-width: calc(100vw - 22px);
    }

    .brand-logo,
    .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .brand-text strong {
        font-size: 16px;
        max-width: 180px;
    }

    .menu-toggle {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 14px;
    }

    .mobile-search {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mobile-search button {
        width: 100%;
    }
}





/* =========================================================
   Pay4book Premium Responsive Header Upgrade
   Mobile: logo + menu only. Search/Login/Publish inside drawer.
========================================================= */

:root {
    --p4b-header-dark: #07130f;
    --p4b-header-green: #0f7a4f;
    --p4b-header-gold: #d8a84f;
    --p4b-header-cream: #fffaf0;
    --p4b-header-muted: #667085;
    --p4b-header-line: rgba(15, 23, 42, .10);
    --p4b-header-shadow: 0 18px 60px rgba(15, 23, 42, .10);
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.p4b-mobile-menu-open {
    overflow: hidden;
    touch-action: none;
}

.p4b-page-shell,
.site-header,
.site-header *,
.top-note,
.main-nav,
.mobile-panel {
    box-sizing: border-box;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 3000;
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.site-header .wrap {
    width: min(var(--wrap, 1180px), calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    margin-inline: auto;
}

.top-note {
    background: linear-gradient(135deg, #07130f, #0f7a4f);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
}

.top-note-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.top-note-left,
.top-note-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.top-note a {
    color: #fff;
    text-decoration: none;
}

.top-note a:hover {
    color: #ffe2a0;
}

.top-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
}

.main-nav {
    width: 100%;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 310px;
    color: var(--p4b-header-dark);
    text-decoration: none;
    flex: 0 1 auto;
}

.brand-logo,
.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    color: #07130f;
    font-weight: 950;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #0f7a4f, #d8a84f) border-box;
    border: 2px solid transparent;
}

.brand-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.brand-text strong,
.brand-text small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-text strong {
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--p4b-header-dark);
}

.brand-text small {
    font-size: 11px;
    font-weight: 800;
    color: var(--p4b-header-muted);
}

.desktop-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.nav-item {
    position: relative;
}

.nav-link {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-radius: 999px;
    color: #25332c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.nav-link svg {
    width: 16px;
    height: 16px;
}

.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
    background: #ecfdf3;
    color: var(--p4b-header-green);
}

.nav-item.has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background: transparent;
}

.dropdown-panel,
.category-mega-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .16);
    z-index: 3010;
}

.nav-item:hover > .dropdown-panel,
.nav-item:focus-within > .dropdown-panel,
.nav-item:hover > .category-mega-panel,
.nav-item:focus-within > .category-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.dropdown-panel {
    width: min(560px, calc(100vw - 32px));
    padding: 18px;
}

.dropdown-intro {
    padding: 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(216, 168, 79, .24), transparent 32%),
        linear-gradient(135deg, #07130f, #0f7a4f);
    color: #fff;
    margin-bottom: 12px;
}

.dropdown-intro strong {
    display: block;
    font-size: 20px;
    letter-spacing: -.04em;
}

.dropdown-intro p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.55;
    font-size: 13px;
}

.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dropdown-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border-radius: 18px;
    color: #344054;
    text-decoration: none;
    background: #f8faf9;
    border: 1px solid rgba(15, 23, 42, .06);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.dropdown-card:hover {
    background: #ecfdf3;
    border-color: rgba(15, 122, 79, .16);
    transform: translateY(-1px);
}

.drop-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    font-size: 18px;
}

.dropdown-card b,
.dropdown-card em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-card b {
    color: #07130f;
    font-size: 14px;
}

.dropdown-card em {
    margin-top: 3px;
    color: #667085;
    font-style: normal;
    font-size: 12px;
    line-height: 1.35;
}

.category-mega-panel {
    width: min(1060px, calc(100vw - 32px));
    padding: 20px;
}

.category-mega-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(216, 168, 79, .25), transparent 32%),
        linear-gradient(135deg, #07130f, #0f7a4f);
    color: #fff;
}

.mega-kicker {
    display: inline-flex;
    color: #ffe2a0;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.category-mega-top strong {
    display: block;
    margin-top: 7px;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.055em;
}

.category-mega-top p {
    margin: 10px 0 0;
    max-width: 620px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.6;
    font-size: 14px;
}

.mega-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
}

.mega-search input,
.mega-search button {
    min-height: 46px;
    border: 0;
    border-radius: 13px;
}

.mega-search input {
    min-width: 0;
    padding: 0 13px;
    outline: none;
}

.mega-search button {
    padding: 0 15px;
    color: #07130f;
    background: #d8a84f;
    font-weight: 950;
}

.mega-featured-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.mega-featured-row a,
.mega-cat-parent {
    min-width: 0;
    color: #07130f;
    text-decoration: none;
}

.mega-featured-row a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: #fffaf0;
    border: 1px solid rgba(216, 168, 79, .22);
}

.mega-featured-row b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

.mega-cat-group {
    min-width: 0;
    padding: 12px;
    border-radius: 18px;
    background: #f8faf9;
    border: 1px solid rgba(15, 23, 42, .07);
}

.mega-cat-parent {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
}

.mega-cat-parent strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-cat-parent em {
    color: #0f7a4f;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.mega-cat-children {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.mega-cat-children a {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #667085;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.mega-cat-children a:hover {
    color: #0f7a4f;
}

.mega-cat-children .mega-more {
    color: #0f7a4f;
    font-weight: 900;
}

.category-mega-bottom {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.category-mega-bottom a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    color: #0f7a4f;
    background: #ecfdf3;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.icon-search {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #f8faf9;
    border: 1px solid rgba(15, 23, 42, .10);
}

.icon-search svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #07130f;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 92px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    background: #fff;
    color: #07130f;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    font-weight: 950;
}

.menu-toggle-bars {
    width: 24px;
    display: grid;
    gap: 5px;
}

.menu-toggle-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 999px;
    background: #07130f;
    transition: transform .18s ease, opacity .18s ease;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

.mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3990;
    background: rgba(7, 19, 15, .52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mobile-panel {
    display: none;
}

.mobile-panel-head,
.mobile-quick-grid,
.mobile-contact-strip {
    display: none;
}

/* Tablet compression before drawer takes over */
@media (max-width: 1240px) {
    .site-header .wrap {
        width: min(100% - 28px, var(--wrap, 1180px));
        max-width: calc(100vw - 28px);
    }

    .brand {
        max-width: 250px;
    }

    .nav-link {
        padding-inline: 8px;
        font-size: 13px;
    }

    .nav-actions .btn {
        padding-inline: 13px;
    }
}

/* Mobile drawer */
@media (max-width: 1080px) {
    .top-note {
        display: none;
    }

    .site-header {
        top: 0;
    }

    .main-nav {
        min-height: 68px;
        height: auto;
        padding: 10px 0;
        gap: 10px;
    }

    .desktop-links,
    .desktop-only-actions,
    .nav-actions {
        display: none !important;
    }

    .brand {
        max-width: calc(100vw - 144px);
        flex: 1 1 auto;
    }

    .brand-logo,
    .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .brand-text strong {
        max-width: 180px;
        font-size: 17px;
    }

    .brand-text small {
        display: none;
    }

    .menu-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    .mobile-panel {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 4000;
        display: flex;
        flex-direction: column;
        width: min(430px, 92vw);
        max-width: 92vw;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
        background:
            radial-gradient(circle at top right, rgba(216, 168, 79, .18), transparent 24%),
            #ffffff;
        box-shadow: -28px 0 80px rgba(15, 23, 42, .22);
        transform: translateX(110%);
        transition: transform .22s ease;
        border-left: 1px solid rgba(15, 23, 42, .08);
        overscroll-behavior: contain;
    }

    .mobile-panel.is-open {
        transform: translateX(0);
    }

    .mobile-panel-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: center;
        padding: 4px 0 14px;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    .mobile-panel-head strong,
    .mobile-panel-head span {
        display: block;
    }

    .mobile-panel-head strong {
        color: #07130f;
        font-size: 20px;
        letter-spacing: -.04em;
    }

    .mobile-panel-head span {
        margin-top: 2px;
        color: #667085;
        font-weight: 750;
        font-size: 13px;
    }

    .mobile-close {
        width: 42px;
        height: 42px;
        display: inline-grid;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: #f2f4f7;
        color: #07130f;
        font-size: 28px;
        line-height: 1;
    }

    .mobile-search {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin: 16px 0;
        padding: 7px;
        border-radius: 18px;
        background: #f8faf9;
        border: 1px solid rgba(15, 23, 42, .08);
    }

    .mobile-search input,
    .mobile-search button {
        min-height: 46px;
        border: 0;
        border-radius: 13px;
    }

    .mobile-search input {
        min-width: 0;
        background: #fff;
        padding: 0 13px;
        outline: none;
    }

    .mobile-search button {
        padding: 0 14px;
        color: #07130f;
        background: #d8a84f;
        font-weight: 950;
    }

    .mobile-quick-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .mobile-quick-card {
        min-width: 0;
        min-height: 116px;
        display: grid;
        align-content: start;
        gap: 5px;
        padding: 13px;
        border-radius: 20px;
        text-decoration: none;
        color: #07130f;
        background: #fffaf0;
        border: 1px solid rgba(216, 168, 79, .28);
    }

    .mobile-quick-card span {
        font-size: 20px;
    }

    .mobile-quick-card b,
    .mobile-quick-card em {
        display: block;
        min-width: 0;
    }

    .mobile-quick-card b {
        font-size: 14px;
        font-weight: 950;
        line-height: 1.2;
    }

    .mobile-quick-card em {
        color: #667085;
        font-style: normal;
        font-size: 12px;
        line-height: 1.35;
    }

    .mobile-links {
        display: grid;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        padding-bottom: 14px;
    }

    .mobile-nav-block {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 18px;
        background: #ffffff;
    }

    .mobile-parent,
    .mobile-parent-link {
        width: 100%;
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 14px;
        color: #07130f;
        font-weight: 950;
        text-align: left;
        border: 0;
        background: transparent;
        text-decoration: none;
    }

    .mobile-parent span,
    .mobile-parent-link span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-parent b {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        color: #07130f;
        background: #ecfdf3;
        font-size: 20px;
        line-height: 1;
        transition: transform .18s ease, background .18s ease;
    }

    .mobile-nav-block.is-open .mobile-parent b {
        transform: rotate(45deg);
        background: #d8a84f;
    }

    .mobile-children {
        width: 100%;
        max-width: 100%;
        display: grid;
        gap: 7px;
        padding: 0 10px 12px;
    }

    .mobile-children[hidden] {
        display: none !important;
    }

    .mobile-children a {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 11px 12px;
        border-radius: 13px;
        background: #f8faf9;
        color: #475467;
        font-weight: 850;
        line-height: 1.35;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .mobile-children a:hover {
        background: #ecfdf3;
        color: #0f7a4f;
    }

    .mobile-category-children {
        max-height: none;
        overflow: visible;
    }

    .mobile-category-parent-link {
        background: #ecfdf3 !important;
        color: #07130f !important;
    }

    .mobile-category-child-link {
        padding-left: 22px !important;
        font-size: 13px;
    }

    .mobile-contact-strip {
        display: grid;
        gap: 8px;
        margin-top: auto;
        padding: 14px;
        border-radius: 18px;
        background:
            radial-gradient(circle at top right, rgba(216, 168, 79, .16), transparent 30%),
            #07130f;
    }

    .mobile-contact-strip a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 850;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .site-header .wrap {
        width: min(100% - 22px, var(--wrap, 1180px));
        max-width: calc(100vw - 22px);
    }

    .brand {
        max-width: calc(100vw - 124px);
        gap: 9px;
    }

    .brand-logo,
    .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .brand-text strong {
        max-width: 150px;
        font-size: 16px;
    }

    .menu-toggle {
        min-width: 82px;
        height: 44px;
        padding-inline: 10px;
    }

    .menu-toggle-text {
        font-size: 13px;
    }

    .mobile-panel {
        width: min(420px, 94vw);
        max-width: 94vw;
        padding: 14px;
    }

    .mobile-search {
        grid-template-columns: 1fr;
    }

    .mobile-search button {
        width: 100%;
    }

    .mobile-quick-grid {
        grid-template-columns: 1fr;
    }

    .mobile-quick-card {
        min-height: auto;
    }
}

@media (max-width: 360px) {
    .brand-text strong {
        max-width: 124px;
        font-size: 15px;
    }

    .menu-toggle {
        min-width: 76px;
    }

    .menu-toggle-bars {
        width: 21px;
    }

    .menu-toggle-bar {
        width: 21px;
    }
}



/* =========================================================
   Category Mega Menu Visibility Fix
   Fixes "Browse Pay4book", heading, paragraph and search placeholder
========================================================= */

/* Dark green intro card inside Categories dropdown */
.category-mega-panel .category-mega-top,
.site-header .category-mega-panel .category-mega-top {
    color: #ffffff !important;
}

/* Small badge/kicker: Browse Pay4book */
.category-mega-panel .category-mega-top .mega-kicker,
.category-mega-panel .category-mega-top .kicker,
.site-header .category-mega-panel .mega-kicker,
.site-header .category-mega-panel .kicker {
    color: #07130f !important;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .70) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    text-shadow: none !important;
}

/* The main heading: Explore all book categories */
.category-mega-panel .category-mega-top strong,
.category-mega-panel .category-mega-top h1,
.category-mega-panel .category-mega-top h2,
.category-mega-panel .category-mega-top h3,
.site-header .category-mega-panel .category-mega-top strong,
.site-header .category-mega-panel .category-mega-top h1,
.site-header .category-mega-panel .category-mega-top h2,
.site-header .category-mega-panel .category-mega-top h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

/* The description text under the heading */
.category-mega-panel .category-mega-top p,
.site-header .category-mega-panel .category-mega-top p {
    color: rgba(255, 255, 255, .88) !important;
}

/* Search box background and typed text */
.category-mega-panel .mega-search,
.site-header .category-mega-panel .mega-search {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
}

.category-mega-panel .mega-search input,
.site-header .category-mega-panel .mega-search input {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    caret-color: #ffffff !important;
}

/* Placeholder text must be targeted directly */
.category-mega-panel .mega-search input::placeholder,
.site-header .category-mega-panel .mega-search input::placeholder {
    color: rgba(255, 255, 255, .92) !important;
    opacity: 1 !important;
}

/* Browser fallback prefixes for placeholder visibility */
.category-mega-panel .mega-search input::-webkit-input-placeholder,
.site-header .category-mega-panel .mega-search input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .92) !important;
    opacity: 1 !important;
}

.category-mega-panel .mega-search input::-moz-placeholder,
.site-header .category-mega-panel .mega-search input::-moz-placeholder {
    color: rgba(255, 255, 255, .92) !important;
    opacity: 1 !important;
}

.category-mega-panel .mega-search input:-ms-input-placeholder,
.site-header .category-mega-panel .mega-search input:-ms-input-placeholder {
    color: rgba(255, 255, 255, .92) !important;
    opacity: 1 !important;
}

/* Search button should stay black text on gold */
.category-mega-panel .mega-search button,
.site-header .category-mega-panel .mega-search button {
    color: #07130f !important;
    background: #d8a84f !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    font-weight: 950 !important;
}

/* Category cards below the green intro card */
.category-mega-panel .mega-cat-parent strong,
.site-header .category-mega-panel .mega-cat-parent strong,
.category-mega-panel .mega-featured-row b,
.site-header .category-mega-panel .mega-featured-row b {
    color: #07130f !important;
}

.category-mega-panel .mega-cat-children a,
.site-header .category-mega-panel .mega-cat-children a {
    color: #475467 !important;
}

.category-mega-panel .mega-cat-children a:hover,
.site-header .category-mega-panel .mega-cat-children a:hover {
    color: #0f7a4f !important;
}

/* Mobile category drawer text safety */
.mobile-panel,
.mobile-panel a,
.mobile-panel button {
    color: #07130f;
}

.mobile-panel .mobile-search input {
    color: #07130f !important;
}

.mobile-panel .mobile-search input::placeholder {
    color: #667085 !important;
    opacity: 1 !important;
}




/* =========================================================
   Pay4book Header Category Menu Button + Brand Toggle Fix
========================================================= */

/* Logo-only mode should not leave awkward spacing */
.brand:not(:has(.brand-text)) {
    gap: 0;
}

/* If browser does not support :has(), this still keeps logo clean */
.brand .brand-text:empty {
    display: none !important;
}

/* Category mega bottom buttons */
.category-mega-panel .category-mega-bottom,
.site-header .category-mega-panel .category-mega-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Default bottom links */
.category-mega-panel .category-mega-bottom a,
.site-header .category-mega-panel .category-mega-bottom a {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* First button: View all categories */
.category-mega-panel .category-mega-bottom a:nth-child(1),
.site-header .category-mega-panel .category-mega-bottom a:nth-child(1) {
    background: #ecfdf3 !important;
    color: #0f7a4f !important;
    border: 1px solid rgba(15, 122, 79, .12) !important;
}

/* Second button: Browse all books — fixes invisible text */
.category-mega-panel .category-mega-bottom a:nth-child(2),
.site-header .category-mega-panel .category-mega-bottom a:nth-child(2) {
    background: #0f7a4f !important;
    color: #ffffff !important;
    border: 1px solid #0f7a4f !important;
    min-width: 150px !important;
}

/* Third button: Publish in a category */
.category-mega-panel .category-mega-bottom a:nth-child(3),
.site-header .category-mega-panel .category-mega-bottom a:nth-child(3) {
    background: #d8a84f !important;
    color: #07130f !important;
    border: 1px solid rgba(216, 168, 79, .75) !important;
}

/* Hover states */
.category-mega-panel .category-mega-bottom a:hover,
.site-header .category-mega-panel .category-mega-bottom a:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

/* Category mega top visibility */
.category-mega-panel .category-mega-top,
.site-header .category-mega-panel .category-mega-top {
    color: #ffffff !important;
}

.category-mega-panel .category-mega-top .mega-kicker,
.site-header .category-mega-panel .category-mega-top .mega-kicker {
    color: #07130f !important;
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.70) !important;
}

.category-mega-panel .category-mega-top strong,
.site-header .category-mega-panel .category-mega-top strong {
    color: #ffffff !important;
}

.category-mega-panel .category-mega-top p,
.site-header .category-mega-panel .category-mega-top p {
    color: rgba(255,255,255,.88) !important;
}

/* Search input inside category mega */
.category-mega-panel .mega-search input,
.site-header .category-mega-panel .mega-search input {
    color: #ffffff !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    caret-color: #ffffff !important;
}

.category-mega-panel .mega-search input::placeholder,
.site-header .category-mega-panel .mega-search input::placeholder {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
}

.category-mega-panel .mega-search button,
.site-header .category-mega-panel .mega-search button {
    color: #07130f !important;
    background: #d8a84f !important;
    font-weight: 950 !important;
}

/* Ensure category card titles remain readable */
.category-mega-panel .mega-cat-parent strong,
.site-header .category-mega-panel .mega-cat-parent strong,
.category-mega-panel .mega-featured-row b,
.site-header .category-mega-panel .mega-featured-row b {
    color: #07130f !important;
}

.category-mega-panel .mega-cat-children a,
.site-header .category-mega-panel .mega-cat-children a {
    color: #475467 !important;
}

.category-mega-panel .mega-cat-children a:hover,
.site-header .category-mega-panel .mega-cat-children a:hover {
    color: #0f7a4f !important;
}

/* Mobile brand spacing when tagline/name hidden */
@media (max-width: 1080px) {
    .brand {
        max-width: calc(100vw - 120px);
    }

    .brand .brand-text {
        min-width: 0;
    }

    .brand .brand-text strong,
    .brand .brand-text small {
        max-width: 180px;
    }
}

@media (max-width: 520px) {
    .brand .brand-text strong {
        max-width: 150px;
    }

    .brand .brand-text small {
        display: none !important;
    }

    .category-mega-panel .category-mega-bottom a,
    .site-header .category-mega-panel .category-mega-bottom a {
        width: 100%;
    }
}



/* =========================================================
   Pay4book Header Category Bottom Buttons — Final Fix
========================================================= */

.category-mega-panel .category-mega-bottom .mega-bottom-link,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-link {
    min-height: 42px !important;
    min-width: 132px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
}

.category-mega-panel .category-mega-bottom .mega-bottom-light,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-light {
    background: #ecfdf3 !important;
    color: #0f7a4f !important;
    border: 1px solid rgba(15, 122, 79, .12) !important;
}

.category-mega-panel .category-mega-bottom .mega-bottom-green,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-green {
    background: #0f7a4f !important;
    color: #ffffff !important;
    border: 1px solid #0f7a4f !important;
}

.category-mega-panel .category-mega-bottom .mega-bottom-green:link,
.category-mega-panel .category-mega-bottom .mega-bottom-green:visited,
.category-mega-panel .category-mega-bottom .mega-bottom-green:hover,
.category-mega-panel .category-mega-bottom .mega-bottom-green:active,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-green:link,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-green:visited,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-green:hover,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-green:active {
    color: #ffffff !important;
}

.category-mega-panel .category-mega-bottom .mega-bottom-gold,
.site-header .category-mega-panel .category-mega-bottom .mega-bottom-gold {
    background: #d8a84f !important;
    color: #07130f !important;
    border: 1px solid rgba(216, 168, 79, .75) !important;
}




/* =========================================================
   Pay4book Desktop Dropdown Stability Fix
========================================================= */

@media (min-width: 1081px) {
    .site-header .nav-item.has-dropdown {
        position: relative;
    }

    .site-header .nav-item.has-dropdown::after {
        content: "";
        position: absolute;
        left: -18px;
        right: -18px;
        top: 100%;
        height: 34px;
        background: transparent;
        pointer-events: auto;
        z-index: 3005;
    }

    .site-header .dropdown-panel,
    .site-header .category-mega-panel {
        top: calc(100% + 4px) !important;
        z-index: 3020 !important;
        pointer-events: auto !important;
    }

    .site-header .nav-item.has-dropdown:hover > .dropdown-panel,
    .site-header .nav-item.has-dropdown:focus-within > .dropdown-panel,
    .site-header .nav-item.has-dropdown.is-open > .dropdown-panel,
    .site-header .nav-item.has-dropdown:hover > .category-mega-panel,
    .site-header .nav-item.has-dropdown:focus-within > .category-mega-panel,
    .site-header .nav-item.has-dropdown.is-open > .category-mega-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, 0) !important;
    }

    .site-header .nav-item.has-dropdown.is-open > .nav-link {
        background: #ecfdf3 !important;
        color: #0f7a4f !important;
    }

    .site-header .dropdown-card,
    .site-header .category-mega-panel a {
        position: relative;
        z-index: 3022;
    }
}


/* ==========================================================
   Pay4books Header Logo Upgrade
   Makes the logo bigger, sharper, and more visible
========================================================== */

.site-header .brand {
    min-width: max-content;
    gap: 12px;
    padding: 8px 0;
}

.site-header .brand-logo {
    width: auto !important;
    height: 58px !important;
    max-height: 58px !important;
    max-width: 220px !important;
    object-fit: contain !important;
    display: block;
    flex-shrink: 0;
}

.site-header .brand-mark {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 18px;
    font-size: 16px;
}

.site-header .brand-text strong {
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.site-header .brand-text small {
    font-size: 11.5px;
    line-height: 1.25;
    max-width: 220px;
}

/* Give the header enough height to carry the larger logo */
.site-header .main-nav {
    min-height: 82px;
}

/* Prevent nav items from squeezing the logo */
.site-header .desktop-links {
    flex: 1;
    justify-content: center;
}

/* Mobile logo adjustment */
@media (max-width: 980px) {
    .site-header .brand {
        gap: 10px;
        max-width: calc(100% - 112px);
    }

    .site-header .brand-logo {
        height: 52px !important;
        max-height: 52px !important;
        max-width: 180px !important;
    }

    .site-header .brand-mark {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .site-header .brand-text strong {
        font-size: 18px;
    }

    .site-header .brand-text small {
        font-size: 10.5px;
        max-width: 160px;
    }

    .site-header .main-nav {
        min-height: 74px;
    }
}

/* Very small phones */
@media (max-width: 430px) {
    .site-header .brand-logo {
        height: 46px !important;
        max-height: 46px !important;
        max-width: 150px !important;
    }

    .site-header .brand-mark {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        font-size: 13px;
    }

    .site-header .brand-text strong {
        font-size: 16px;
    }

    .site-header .brand-text small {
        display: none;
    }

    .site-header .main-nav {
        min-height: 68px;
    }
}




/* =========================================================
   Pay4books Footer Branding Controls
========================================================= */

.p4b-site-footer .p4b-footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.p4b-site-footer .p4b-footer-logo-img {
    width: var(--p4b-footer-logo-width, 260px) !important;
    max-width: min(var(--p4b-footer-logo-width, 260px), 100%) !important;
    max-height: var(--p4b-footer-logo-max-height, 120px) !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.p4b-site-footer .p4b-footer-brand-mark {
    width: 76px !important;
    height: 76px !important;
    border-radius: 24px !important;
    font-size: 20px !important;
}

.p4b-site-footer .p4b-footer-brand-text strong {
    color: var(--p4b-footer-site-name-color, #ffffff) !important;
    font-size: var(--p4b-footer-site-name-size, 22px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
}

.p4b-site-footer .p4b-footer-brand-text small {
    color: var(--p4b-footer-tagline-color, #d8a84f) !important;
    font-size: var(--p4b-footer-tagline-size, 11px) !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    max-width: 280px;
}

/* =========================================================
   Mobile Menu Closed-State Fix
========================================================= */

.mobile-backdrop[hidden],
.mobile-panel[hidden] {
    display: none !important;
}

.mobile-panel {
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mobile-panel.is-open {
    display: flex !important;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 1080px) {
    .mobile-panel {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 4000;
        flex-direction: column;
        width: min(430px, 92vw);
        max-width: 92vw;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
        background:
            radial-gradient(circle at top right, rgba(216, 168, 79, .18), transparent 24%),
            #ffffff;
        box-shadow: -28px 0 80px rgba(15, 23, 42, .22);
        border-left: 1px solid rgba(15, 23, 42, .08);
        overscroll-behavior: contain;
        transition: transform .24s ease, opacity .18s ease, visibility .18s ease;
    }

    .mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 3990;
        background: rgba(7, 19, 15, .52);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

@media (min-width: 1081px) {
    .mobile-panel,
    .mobile-backdrop {
        display: none !important;
    }
}

/* =========================================================
   Desktop Dropdown Stability Fix
========================================================= */

@media (min-width: 1081px) {
    .site-header .nav-item.has-dropdown {
        position: relative;
    }

    .site-header .nav-item.has-dropdown::after {
        content: "";
        position: absolute;
        left: -18px;
        right: -18px;
        top: 100%;
        height: 34px;
        background: transparent;
        pointer-events: auto;
        z-index: 3005;
    }

    .site-header .dropdown-panel,
    .site-header .category-mega-panel {
        top: calc(100% + 4px) !important;
        z-index: 3020 !important;
        pointer-events: auto !important;
    }

    .site-header .nav-item.has-dropdown:hover > .dropdown-panel,
    .site-header .nav-item.has-dropdown:focus-within > .dropdown-panel,
    .site-header .nav-item.has-dropdown.is-open > .dropdown-panel,
    .site-header .nav-item.has-dropdown:hover > .category-mega-panel,
    .site-header .nav-item.has-dropdown:focus-within > .category-mega-panel,
    .site-header .nav-item.has-dropdown.is-open > .category-mega-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, 0) !important;
    }

    .site-header .nav-item.has-dropdown.is-open > .nav-link {
        background: #ecfdf3 !important;
        color: #0f7a4f !important;
    }

    .site-header .dropdown-card,
    .site-header .category-mega-panel a {
        position: relative;
        z-index: 3022;
    }
}

@media (max-width: 768px) {
    .p4b-site-footer .p4b-footer-brand-logo {
        align-items: flex-start;
        flex-direction: column;
    }

    .p4b-site-footer .p4b-footer-logo-img {
        width: min(var(--p4b-footer-logo-width, 260px), 78vw) !important;
        max-height: var(--p4b-footer-logo-max-height, 120px) !important;
    }
}





/* =========================================================
   Pay4books Mobile Menu Final Closed-State Fix
   Keeps current look but prevents mobile menu blocking hero
========================================================= */

/* When closed, mobile menu must not render or occupy space */
body:not(.p4b-mobile-menu-open) .mobile-panel,
body:not(.p4b-mobile-menu-open) .mobile-backdrop,
.mobile-panel[hidden],
.mobile-backdrop[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile drawer base state */
@media (max-width: 1080px) {
    .mobile-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 99999 !important;

        width: min(430px, 92vw) !important;
        max-width: 92vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: translateX(110%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            transform .24s ease,
            opacity .18s ease,
            visibility .18s ease !important;
    }

    .mobile-panel.is-open {
        display: flex !important;
        flex-direction: column !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99990 !important;
        background: rgba(7, 19, 15, .52) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    body.p4b-mobile-menu-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

/* Desktop should never render the mobile drawer */
@media (min-width: 1081px) {
    .mobile-panel,
    .mobile-backdrop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body {
        overflow: auto !important;
        touch-action: auto !important;
    }
}