/* Booksoasis public marketplace — shared across books/search/book-detail/
   author-detail/publisher-detail/series-detail. Same token set as
   index.html/dashboard.html so the public site and the app feel like one
   product. --p softened 2026-09-26 (was a more saturated #64748b) — blue is
   the brand accent, not the dominant color: it's reserved for primary
   actions (buttons, active states) and real links, not decorative fills.
   Price/rating/etc. moved to neutral ink or, for star ratings, a
   conventional gold — see the rules below for where blue was removed. */
:root{--p:#64748b;--ph:#475569;--pl:#f1f5f9;--plb:#e2e8f0;--dk:#0b2540;--bg:#f7fafc;--bd:#e5e7eb;--gray:#64748b;--gold:#e8a33d}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:var(--dk);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;transition:color .15s ease}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--p);outline-offset:2px}
/* Form fields: a visible slate ring on keyboard/typing focus instead of no outline. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #475569;outline-offset:2px}

nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--bd);gap:12px}
/* Logo scales with the viewport instead of a fixed height, so it stays
   proportional to the nav row on everything from a small phone to a wide
   desktop instead of looking oversized/undersized at either end. */
/* 0.75x of the original clamp(20px,5vw,28px) — the logo read too large. */
nav img{height:clamp(15px,3.75vw,21px);width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:20px;font-size:.86rem;font-weight:600}
.nav-links a{text-decoration:none;color:var(--gray)}
.nav-links a:hover{color:var(--dk)}
/* Phones: five items (Browse, favorites, cart, search, account) don't fit
   a 390px row. "Browse" drops out — the genre bar directly underneath is
   the same entry point — and the gap tightens; icons keep 44px targets. */
.nav-links a{white-space:nowrap}
@media(max-width:560px){
  .nav-links{gap:6px}
  .nav-links a[href^="/books"]{display:none}
}

.nav-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-5px;border-radius:50%;color:var(--gray);transition:.15s}
.nav-icon:hover{background:var(--pl);color:var(--p)}
.nav-icon svg{width:18px;height:18px}
.nav-icon svg path{fill:none;stroke:currentColor;stroke-width:1.8}

/* Cart/favorites nav icons — injected by booksoasis-cart.js on every
   reader-facing page (not hand-authored per page), so a change here or in
   that script applies everywhere at once. */
.bso-fav-nav svg path{fill:none}
.bso-cart-nav{position:relative}
.bso-cart-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--p);color:#fff;font-size:.62rem;font-weight:800;line-height:16px;text-align:center;display:flex;align-items:center;justify-content:center}

/* Genre bar — a second row under the main nav (barnesandnoble.com's own
   header/category-bar split), one plain item per curated "common and
   popular" genre (GET /api/booksoasis/catalog/categories?featured=1 — a
   small hand-picked subset, not the full taxonomy, see the seed script),
   never a single collapsed "Genres" menu. No dropdown chrome/arrow — the
   sub-genre flyout appears purely on hover (desktop) and each item is
   still a real, directly-clickable /books?category= link either way. On
   touch devices (no true hover) the row simply scrolls horizontally and a
   tap goes straight to that genre's own page. */
/* overflow-x:auto here would implicitly force overflow-y to auto too (per
   spec, setting only one axis still makes the other clip) — that silently
   clipped every hover flyout below, since it's an absolutely-positioned
   child extending past .genre-bar's own box. Horizontal scrolling is only
   actually needed once items no longer fit in one row (small screens), so
   it's scoped to that width instead of applied unconditionally — desktop
   stays overflow:visible, letting flyouts render normally. */
.genre-bar{border-bottom:1px solid var(--bd)}
@media(max-width:900px){
  .genre-bar{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .genre-bar::-webkit-scrollbar{display:none}
}
.genre-bar-row{display:flex;gap:26px;padding:11px 0;white-space:nowrap;width:max-content;min-width:100%}
.genre-item{position:relative}
.genre-item>a{display:block;font-size:.83rem;font-weight:600;color:var(--dk);text-decoration:none;padding:2px 0}
.genre-item>a:hover{color:var(--p)}
/* Flush against the link (top:100%, zero gap) rather than floating below
   it with a gap — a gap is an invisible dead strip the pointer has to
   cross to reach the card, and partway across it the pointer is over
   neither .genre-item nor .genre-flyout, so :hover drops and the card
   vanishes before it can be clicked (reported 2026-09-26; an invisible
   bridge pseudo-element sized to guess the gap wasn't reliable either —
   this removes the gap architecture entirely instead of papering over
   it). The extra top padding below keeps the same visual breathing room,
   just inside the now-continuous hoverable box instead of outside it, so
   there's no longer any point where the pointer can fall through.  */
.genre-flyout{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 14px 32px rgba(11,37,64,.14);padding:14px 8px 8px;min-width:180px;z-index:60;white-space:nowrap}
@media(hover:hover){.genre-item:hover .genre-flyout{display:block}}
.genre-flyout a{display:block;padding:6px 12px;font-size:.82rem;color:var(--gray);text-decoration:none;border-radius:6px;font-weight:500}
.genre-flyout a:hover{background:var(--pl);color:var(--p)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:9px;font-weight:700;font-size:.86rem;text-decoration:none;border:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--p);color:#fff;box-shadow:0 2px 8px rgba(100,116,139,.18)}
.btn-primary:hover{background:var(--ph);transform:translateY(-1px);box-shadow:0 6px 16px rgba(100,116,139,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--dk);border:1.5px solid var(--bd)}
.btn-ghost:hover{border-color:var(--p);color:var(--p)}

.mp-header{padding:36px 0 24px}
.mp-header h1{font-size:1.7rem;font-weight:900;letter-spacing:-.3px;margin-bottom:6px}
.mp-header p{color:var(--gray);font-size:.92rem}

.search-bar{display:flex;gap:10px;max-width:520px;margin-top:18px}
.search-bar input{flex:1;padding:11px 14px;border:1.5px solid var(--bd);border-radius:9px;font-size:.9rem}
.search-bar input:focus{border-color:var(--p)}

.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;padding:24px 0 48px}
/* Two across on phones — one full-width cover per row makes browsing a
   long scroll of single books. */
@media(max-width:560px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}}
.book-card{color:inherit;display:flex;flex-direction:column}
/* The cover link fills the cover box; the heart, Sale flag and Quick Add sit above it (z-index:2). */
.book-cover-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}
.book-cover{position:relative;aspect-ratio:2/3;background:linear-gradient(135deg,var(--pl),var(--plb));border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--p);font-size:2rem;margin-bottom:10px;border:1px solid var(--bd);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.book-card:hover .book-cover{box-shadow:0 12px 24px rgba(11,37,64,.16);transform:translateY(-3px)}
.book-card:hover .book-cover img{transform:scale(1.04)}
.book-title{display:block;color:inherit;text-decoration:none;font-size:.9rem;font-weight:700;line-height:1.3;margin-bottom:3px;transition:color .15s ease}
.book-card:hover .book-title{color:var(--p)}
.book-author{font-size:.8rem;color:var(--gray)}
.book-stars{display:flex;align-items:center;gap:6px;margin-top:8px}
.bk-stars{position:relative;display:inline-block;line-height:0}
.bk-stars-row{display:flex;gap:2px}
.bk-stars-row svg{width:18px;height:18px;flex:none;display:block}
.bk-stars-base svg{fill:#e3e6ea}
.bk-stars-fill{position:absolute;top:0;left:0;bottom:0;overflow:hidden}
.bk-stars-fill svg{fill:#f5ad3b}
.book-stars .count{font-size:.76rem;color:var(--gray);font-weight:600;font-variant-numeric:tabular-nums}

/* Format + price on the left, a small "+" on the right — the always-there
   add control (and the only one on touch screens). Quiet by default so a
   grid of cards doesn't read as a wall of buttons. */
.book-buy-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:6px}
.book-format{font-size:.76rem;color:var(--gray);font-weight:600}
.book-price{font-size:.9rem;font-weight:800;color:var(--dk);margin-top:1px;font-variant-numeric:tabular-nums}
.book-price .was,.ed-pill .was,.cart-item .was{font-weight:500;font-size:.78em;color:var(--mt,#6b7280);margin-left:4px}
.save-chip{display:inline-block;margin-left:5px;padding:1px 5px;background:#b91c1c;color:#fff;font-size:.68rem;font-weight:800;vertical-align:1px}
.sale-flag{pointer-events:none;position:absolute;top:8px;left:0;background:#b91c1c;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;z-index:2}
.sale-ends{font-size:.8rem;font-weight:700;color:#b91c1c;margin:8px 0 0}
.book-add-btn{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--bd);background:#fff;color:var(--dk);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s ease,border-color .15s ease,color .15s ease}
.book-add-btn svg{width:16px;height:16px}
.book-add-btn:hover{background:var(--dk);border-color:var(--dk);color:#fff}
.book-add-btn.in-cart{border-color:#059669;color:#059669;background:#ecfdf5}
.book-add-btn.in-cart:hover{background:#059669;color:#fff}
.book-add-btn:disabled{opacity:.6;cursor:default}

/* Quick Add + favorite heart on the cover — revealed on hover (or keyboard
   focus) on pointer devices. On touch screens Quick Add is dropped
   entirely, since the "+" above already does the same job; the heart
   stays visible there. */
.book-fav-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;border:1px solid var(--bd);border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;opacity:0;transition:opacity .15s ease,background .15s ease,transform .15s ease}
.book-fav-btn svg{width:15px;height:15px;fill:none;stroke:var(--dk);stroke-width:2}
.book-fav-btn:hover{transform:scale(1.08)}
.book-fav-btn.active{opacity:1;background:#fff}
.book-fav-btn.active svg{fill:#e0245e;stroke:#e0245e}
.book-card:hover .book-fav-btn,.book-card:focus-within .book-fav-btn{opacity:1}
.book-quick-add{position:absolute;left:10px;right:10px;bottom:10px;opacity:0;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease;z-index:2}
.book-card:hover .book-quick-add,.book-card:focus-within .book-quick-add{opacity:1;transform:translateY(0)}
.btn-quick-add{display:block;width:100%;background:var(--dk);color:#fff;border:none;border-radius:8px;padding:9px 10px;font-weight:700;font-size:.78rem;font-family:inherit;cursor:pointer;text-align:center;box-shadow:0 4px 12px rgba(11,37,64,.22);transition:background .15s ease}
.btn-quick-add:hover{background:#163a5c}
.btn-quick-add.in-cart{background:#059669}
.btn-quick-add:disabled{opacity:.85;cursor:default}
@media(hover:none){
  .book-fav-btn{opacity:1}
  .book-quick-add{display:none}
}

/* Confirmation after adding to cart — bottom-right on desktop, a full-width
   sheet on phones. The only place "Checkout" shows outside /cart. */
.bso-toast{position:fixed;right:20px;bottom:20px;z-index:200;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 18px 40px rgba(11,37,64,.18);padding:16px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.bso-toast.show{opacity:1;transform:none;pointer-events:auto}
.bso-toast-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.3rem;line-height:1;color:var(--gray);cursor:pointer;padding:4px}
.bso-toast-row{display:flex;gap:12px;align-items:center;padding-right:18px}
.bso-toast-row img{width:40px;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--bd);flex-shrink:0}
.bso-toast-text{display:flex;flex-direction:column;min-width:0;font-size:.8rem;color:var(--dk)}
.bso-toast-text strong{font-size:.86rem;color:#059669;margin-bottom:2px}
.bso-toast-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bso-toast-text .meta{color:var(--gray);font-size:.76rem}
.bso-toast-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.bso-toast-actions .btn{padding:9px 10px;font-size:.8rem}
@media(max-width:560px){.bso-toast{left:16px;right:16px;bottom:16px;width:auto}}
@media(prefers-reduced-motion:reduce){.bso-toast,.book-quick-add,.book-cover,.book-cover img{transition:none}}

.empty-state{padding:60px 20px;text-align:center;color:var(--gray)}
.empty-state .icon{font-size:2.4rem;margin-bottom:12px}

/* Shelf — a heading + a horizontally-scrolling row of book-cards. Used by
   the homepage (New Releases/Best Sellers/genre shelves) and any other
   page that wants a "You May Also Like"-style strip (book-detail.html). */
/* padding-block only — .shelf is also combined with .wrap on the homepage's
   genre shelves, and a `padding:28px 0` shorthand zeroed .wrap's side
   padding there, pushing those shelves 24px left of the rest of the page. */
.shelf{padding-block:28px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.shelf-head h2{font-size:1.3rem;font-weight:800;letter-spacing:-.2px;font-family:Georgia,'Times New Roman',serif}
.shelf-head a{font-size:.86rem;font-weight:700;color:var(--dk);text-decoration:none;white-space:nowrap}
.shelf-head a:hover{color:var(--p);text-decoration:underline}
.shelf-row{display:flex;gap:20px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shelf-row::-webkit-scrollbar{height:6px}
.shelf-row::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}
.shelf-row .book-card{flex:0 0 148px;scroll-snap-align:start}
@media(max-width:480px){.shelf-row .book-card{flex-basis:128px}}

/* Customer reviews (book-detail.html) */
.reviews-summary{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.reviews-summary .avg{font-size:2rem;font-weight:900}
.reviews-summary .stars{color:var(--gold);font-size:1.1rem;letter-spacing:1px}
.reviews-summary .count{font-size:.84rem;color:var(--gray)}
.review-form{border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:24px}
.review-form .star-input{font-size:1.4rem;color:var(--bd);cursor:pointer;letter-spacing:2px}
.review-form .star-input span.on{color:var(--gold)}
.review-form textarea{width:100%;padding:10px 12px;border:1.5px solid var(--bd);border-radius:8px;font-size:.88rem;font-family:inherit;margin:10px 0;resize:vertical}
.review-item{border-bottom:1px solid var(--bd);padding:16px 0}
.review-item .stars{color:var(--gold);font-size:.92rem;letter-spacing:1px}
.review-item .meta{font-size:.8rem;color:var(--gray);margin:4px 0 8px}
.review-item .verified{display:inline-block;background:var(--pl);color:var(--p);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:8px}
.review-item p{font-size:.9rem;color:var(--dk);line-height:1.6}

.pagination{display:flex;justify-content:center;gap:8px;padding-bottom:48px}
.pagination button{padding:8px 14px;border:1.5px solid var(--bd);background:#fff;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer}
.pagination button.active{background:var(--p);color:#fff;border-color:var(--p)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

.category-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.category-filters button{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bd);background:#fff;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--gray)}
.category-filters button.active{background:var(--p);color:#fff;border-color:var(--p)}

/* Detail pages (book/author/publisher/series) */
.detail-hero{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:36px 0}
@media(max-width:640px){.detail-hero{grid-template-columns:1fr}.detail-cover-col{width:min(240px,100%);margin:0 auto}}
.detail-cover{aspect-ratio:2/3;background:linear-gradient(135deg,var(--pl),var(--plb));border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--p);font-size:3rem;border:1px solid var(--bd);overflow:hidden}
.detail-cover img{width:100%;height:100%;object-fit:cover}
.detail-info h1{font-size:1.7rem;font-weight:900;letter-spacing:-.3px;margin-bottom:6px}
.detail-info .subtitle{font-size:1.05rem;color:var(--gray);margin-bottom:10px}
.detail-info .byline{font-size:.92rem;margin-bottom:16px}
.detail-info .byline a{color:var(--p);font-weight:600;text-decoration:none}
.detail-info .byline a:hover{text-decoration:underline}
.detail-info .description{font-size:.92rem;color:var(--dk);line-height:1.75;margin-bottom:20px;max-width:640px}
.detail-meta-row{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--gray);margin-bottom:16px}
.detail-meta-row span strong{color:var(--dk)}

/* Format/price picker — one pill per edition (Hardcover $39.99 |
   Paperback $19.99 | Ebook $12.99), selectable, feeding a single "Buy Now"
   button below rather than a stacked buy button per edition. */
/* Book page: cover with hover actions, rating under it, folded description, buy box */
.detail-cover-col{display:flex;flex-direction:column;gap:12px}
.detail-cover{position:relative}
.detail-cover .book-fav-btn{top:10px;right:10px;width:36px;height:36px}
.detail-cover .book-fav-btn svg{width:17px;height:17px}
.detail-cover:hover .book-fav-btn,.detail-cover:focus-within .book-fav-btn{opacity:1}
.detail-cover:hover .book-quick-add,.detail-cover:focus-within .book-quick-add{opacity:1;transform:translateY(0)}
.detail-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-decoration:none;color:var(--gray);font-size:.8rem;font-weight:600}
.detail-rating .book-stars{margin-top:0}
.detail-rating:hover span.rt{color:var(--p)}
.description.folded{max-height:14em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.read-more{background:none;border:none;padding:0;margin:-4px 0 18px;font:inherit;font-size:.85rem;font-weight:700;color:var(--p);cursor:pointer}
.buy-box{border-top:1px solid var(--bd);padding-top:18px;margin-top:4px;max-width:520px}
.buy-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-bottom:8px}
.buy-unavailable{color:var(--gray);font-size:.9rem}
.search-authors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--gray);margin:0 0 10px}
.search-authors a{padding:5px 12px;border:1px solid var(--bd);border-radius:999px;color:var(--dk);text-decoration:none;font-weight:600}
.search-authors a:hover{border-color:var(--p);color:var(--p)}
.search-count{font-size:.85rem;color:var(--gray);margin:0 0 16px}
.browse-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:0 0 20px;padding:12px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.browse-bar label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.browse-bar select{font:inherit;font-size:.88rem;text-transform:none;letter-spacing:normal;font-weight:500;color:var(--dk);padding:8px 30px 8px 10px;border:1.5px solid var(--bd);border-radius:8px;background:#fff;min-width:150px}
.browse-bar select:focus{border-color:var(--p)}
.browse-count{margin-left:auto;font-size:.85rem;color:var(--gray);align-self:center}
@media(max-width:560px){.browse-bar{display:grid;grid-template-columns:1fr 1fr}.browse-bar label{min-width:0}.browse-bar label:nth-of-type(3),.browse-bar .browse-count{grid-column:1/-1}.browse-bar select{min-width:0;width:100%}.browse-count{margin-left:0}}
.edition-picker{display:inline-flex;max-width:100%;border:1.5px solid var(--bd);border-radius:12px;overflow:hidden;margin-bottom:14px;background:#fff;vertical-align:top}
.ed-pill{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:none;border-left:1.5px solid var(--bd);border-radius:0;padding:10px 28px 10px 14px;font-family:inherit;cursor:pointer;text-align:left;transition:border-color .15s ease,background .15s ease}
.ed-pill:first-child{border-left:none}
.ed-pill:hover{background:#f7fbff}
.ed-pill.active{background:var(--pl);box-shadow:inset 0 0 0 2px var(--p)}
.ed-pill:focus-visible{outline:2px solid var(--p);outline-offset:-2px}
.ed-pill .fmt{font-weight:700;font-size:.85rem;color:var(--dk)}
.ed-pill .price{font-weight:900;font-size:.95rem;color:var(--dk)}
.ed-pill .note{font-size:.72rem;color:var(--gray);font-weight:500}
.edition-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px;max-width:480px}
.edition-cta .btn{padding:12px 24px;font-size:.9rem}
.edition-cta #addCartBtn{flex:1 1 220px}
.edition-cta #addCartBtn.in-cart{background:#059669;box-shadow:none}
.coming-soon-note{font-size:.76rem;color:var(--gray);margin-top:14px;max-width:480px}

.section-title{font-size:1.15rem;font-weight:800;margin:36px 0 18px;padding:0 24px}
.about-box{background:var(--bg);border-radius:14px;padding:24px;margin:0 0 20px}
.about-box p{font-size:.9rem;color:var(--dk);line-height:1.7}

footer.mp-footer{border-top:1px solid var(--bd);padding:32px 0;text-align:center;font-size:.82rem;color:var(--gray);margin-top:40px}
footer.mp-footer .footer-links{margin-bottom:10px}
footer.mp-footer a{text-decoration:none;color:var(--gray);margin:0 8px}
footer.mp-footer a:hover{color:var(--p)}
footer.mp-footer .footer-copy{color:var(--gray)}

/* Buy modal — account creation doubles as checkout, same pattern as
   /subscribe: a reader shouldn't need a separate /register trip before
   buying a $4.99 ebook. */
.mp-modal-bg{display:none;position:fixed;inset:0;background:rgba(11,37,64,.5);z-index:1000;align-items:center;justify-content:center;padding:16px}
.mp-modal-bg.show{display:flex}
/* Never taller than the screen: the form scrolls inside, the button stays in view. */
.mp-modal{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:24px 24px 0;position:relative;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.mp-modal.wide{max-width:760px}
.mp-modal .mp-cols{display:grid;grid-template-columns:1fr;gap:0 22px}
.mp-modal.wide .mp-cols.two{grid-template-columns:1fr 1fr}
.mp-modal .mp-col-title{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);margin:2px 0 10px}
.mp-modal .mp-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mp-modal .mp-actions{position:sticky;bottom:0;background:#fff;padding:12px 0 18px;margin-top:4px;border-top:1px solid var(--bd)}
@media (max-width:720px){.mp-modal.wide .mp-cols.two{grid-template-columns:1fr}.mp-modal{padding:20px 18px 0}}
@media (max-height:560px){.mp-modal .sub{margin-bottom:10px}.mp-field{margin-bottom:8px}}
.mp-modal h3{font-size:1.1rem;font-weight:800;margin-bottom:4px}
.mp-modal .sub{font-size:.82rem;color:var(--gray);margin-bottom:18px}
.mp-field{margin-bottom:12px}
.mp-field label{display:block;font-size:.76rem;font-weight:700;margin-bottom:5px}
.mp-field input{width:100%;padding:10px 12px;border:1.5px solid var(--bd);border-radius:8px;font-size:.88rem}
.mp-field[style*="flex"] input{width:0;min-width:0}
.mp-field input:focus{border-color:var(--p)}
.mp-modal-msg{padding:9px 12px;border-radius:8px;font-size:.8rem;margin-bottom:12px;display:none;background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.mp-modal-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--gray);width:36px;height:36px;border-radius:50%}
.mp-modal-close:hover{background:#f1f5f9}
.mp-modal h3{padding-right:36px}

/* publish.booksoasis.com pages at phone width: the four nav links wrap into a
   full-width row under the logo instead of running off the screen. */
@media(max-width:640px){
  nav:has(> .nav-links .btn){flex-wrap:wrap;row-gap:12px}
  nav > .nav-links:has(.btn){width:100%;justify-content:space-between;gap:10px;font-size:.84rem}
  nav > .nav-links .btn{padding:9px 14px;font-size:.84rem}
}

/* Homepage: Best Series and Best New Authors rows, and the More Subjects icons. */
.series-card,.author-card{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px}
.series-card{width:260px}
.series-card-art{display:block;aspect-ratio:4/3;background:var(--pl);border:1px solid var(--bd);overflow:hidden;margin-bottom:6px}
.series-card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.series-card:hover .series-card-art img{transform:scale(1.03)}
.series-card-name,.author-card-name{font-weight:800;color:var(--dk);text-decoration:none;font-size:.95rem;line-height:1.3}
.series-card-name:hover,.author-card-name:hover{color:var(--p)}
.series-card-meta{font-size:.82rem;color:var(--gray)}
.author-card{width:132px;align-items:center;text-align:center} /* same width as the photo, so the first photo sits on the content line */
.author-card-photo{display:block;width:132px;height:132px;border-radius:50%;overflow:hidden;background:var(--pl);border:1px solid var(--bd);margin-bottom:8px}
.author-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.author-card-photo.is-cover img{object-position:50% 20%}
.author-card-book{font-size:.8rem;color:var(--gray);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.author-card-book:hover{color:var(--p)}
.subjects{padding-block:36px 44px}
.subjects h2{font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;font-weight:700;color:var(--dk);text-align:center;margin:0 0 24px}
.subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:20px 12px}
.subject{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--dk);font-size:.86rem;font-weight:600;text-align:center;line-height:1.3}
.subject-icon{width:84px;height:84px;border-radius:50%;background:var(--pl);display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease}
.subject-icon svg{width:36px;height:36px;fill:none;stroke:var(--dk);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.subject:hover .subject-icon{background:var(--plb);transform:translateY(-2px)}
.subject:focus-visible{outline:none}.subject:focus-visible .subject-icon{box-shadow:0 0 0 3px var(--p)}
@media(max-width:560px){.series-card{width:210px}.author-card{width:104px}.author-card-photo{width:104px;height:104px}.subject-grid{grid-template-columns:repeat(3,1fr);gap:18px 8px}.subject-icon{width:68px;height:68px}.subject-icon svg{width:30px;height:30px}}

/* Series page: image (or first book's cover as a small stack) beside the details. */
.series-hero{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center;padding-block:8px 12px}
.series-hero.no-art{grid-template-columns:minmax(0,1fr)}
.series-hero.wide-art{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
@media(max-width:760px){.series-hero.wide-art{grid-template-columns:minmax(0,1fr)}}
.series-art img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;border:1px solid var(--bd);box-shadow:0 14px 28px rgba(11,37,64,.16)}
.series-art.stack{padding:14px 14px 0 0}
.series-art.stack img{aspect-ratio:2/3;box-shadow:7px -7px 0 -1px #fff,7px -7px 0 0 var(--bd),14px -14px 0 -1px #fff,14px -14px 0 0 var(--bd),0 14px 28px rgba(11,37,64,.16)}
.series-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--p)}
.series-info h1{margin:6px 0 4px;text-wrap:balance}
.series-by{font-size:.92rem;color:var(--gray);margin-bottom:12px}
.series-by a{color:var(--dk);font-weight:600;text-decoration:none}
.series-desc{font-size:.95rem;line-height:1.7;color:var(--dk);max-width:65ch;margin:0 0 10px}
.series-start{margin-top:8px}
@media(max-width:620px){.series-hero{grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start}.series-info h1{font-size:1.35rem}}
/* /series index */
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 20px;padding-block:8px 32px}
.series-grid .series-card{width:auto}
.series-card-desc{font-size:.84rem;color:var(--gray);line-height:1.5;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:560px){.series-grid{grid-template-columns:1fr 1fr;gap:20px 12px}}

/* Plain line icons (no emoji), admin-dashboard style: thin stroke in the text colour. */
.ic-line{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
.empty-state .icon .ic-line{width:40px;height:40px;stroke-width:1.4;color:var(--p)}
.book-cover > .ic-line,.book-cover-link > .ic-line,.detail-cover > .ic-line,.cart-item .cover > .ic-line{width:38%;height:38%;stroke-width:1.2;color:var(--p)}
.ic-star{width:1em;height:1em;fill:currentColor;stroke:none;vertical-align:-.1em}
.series-num{font-size:.76rem;font-weight:700;color:var(--p);margin-bottom:4px}
/* Author page: photo, or a plain line-icon avatar when there's none */
.author-hero{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;align-items:center;padding-block:8px 12px}
.author-hero h1{margin:6px 0 8px}
.author-avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;border:1px solid var(--bd);background:var(--pl);display:flex;align-items:center;justify-content:center}
.author-avatar img{width:100%;height:100%;object-fit:cover}
.author-avatar.is-icon .ic-line{width:54px;height:54px;stroke-width:1.3;color:var(--p)}
@media(max-width:560px){.author-hero{grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start}.author-avatar{width:84px;height:84px}.author-avatar.is-icon .ic-line{width:38px;height:38px}}
.series-card-art.is-cover{padding:12px;background:linear-gradient(135deg,var(--pl),var(--plb))}.series-card-art.is-cover img{object-fit:contain;filter:drop-shadow(0 6px 10px rgba(11,37,64,.25))}

/* ── Series page, Amazon-style (2026-09-27): details + "Get the series" box,
   then the numbered list of the series' books. ── */
.sp-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-block:8px 18px}
@media(max-width:980px){.sp-top{grid-template-columns:minmax(0,1fr)}}
.sp-top .series-hero{padding-block:0}
.sp-count{font-weight:500;color:var(--gray);font-size:.7em;white-space:nowrap}
.sp-formats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.sp-formats span{font-size:.78rem;font-weight:700;border:1px solid var(--bd);border-radius:999px;padding:4px 10px;color:var(--dk)}
.sp-desc.folded{max-height:7.2em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.sp-more{background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:.88rem;color:var(--dk);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:36px}
.sp-list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--bd);padding-top:18px;margin-top:6px}
.sp-list-head h2{font-size:1.15rem;margin:0}
.sp-list-head label{display:flex;align-items:center;gap:8px;font-size:.88rem;cursor:pointer;min-height:40px}
.sp-list{list-style:none;margin:8px 0 40px;padding:0}
.sp-row{display:grid;grid-template-columns:34px 112px minmax(0,1fr) 200px;gap:18px;padding:20px 0;border-bottom:1px solid var(--bd);align-items:start}
.sp-num{font-size:1.35rem;font-weight:800;color:var(--gray);text-align:center;padding-top:2px}
.sp-cover img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--bd);box-shadow:0 6px 16px rgba(11,37,64,.12)}
.sp-cover .ph{aspect-ratio:2/3;background:var(--bg);border:1px solid var(--bd)}
.sp-title{font-size:1.02rem;font-weight:700;color:var(--dk);text-decoration:none;line-height:1.3}
.sp-title:hover{text-decoration:underline}
.sp-sub{font-size:.8rem;color:var(--gray);margin:3px 0 8px}
.sp-sub a{color:var(--dk);font-weight:600;text-decoration:none}
.sp-blurb{font-size:.9rem;line-height:1.6;color:var(--dk);margin:0}
.sp-blurb.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-fmts{font-size:.8rem;color:var(--gray);margin-top:8px}
.sp-fmts b{color:var(--dk)}
.sp-buy{display:grid;gap:8px;justify-items:stretch}
.sp-buy .lbl{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gray)}
.sp-buy .amt{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums}
.sp-buy .amt s{font-size:.85rem;color:var(--gray);font-weight:500;margin-left:6px}
.sp-buy .btn{justify-content:center}
.sp-owned{font-size:.84rem;font-weight:700;color:#15803d}
@media(max-width:760px){
  .sp-row{grid-template-columns:28px 84px minmax(0,1fr);gap:12px}
  .sp-buy{grid-column:2 / -1}
  .sp-num{font-size:1.1rem}
}
.bd-series-box{margin:8px 0 28px}
.bd-series-box .shelf-head{margin-bottom:12px}

/* Badges: BooksOasis pick (editors' choice) and Bestseller (real sales) */
.pick-flag{position:absolute;left:8px;bottom:8px;z-index:2;background:#0b2540;color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.02em;padding:4px 8px;border-radius:999px;pointer-events:none;box-shadow:0 1px 4px rgba(11,37,64,.25)}
.pick-flag.bestseller-flag{background:#e8a33d;color:#0b2540}
.book-stars-text{font-size:.76rem;color:var(--gray);min-height:18px;display:flex;align-items:center}
.tag-new{display:inline-block;font-size:.68rem;font-weight:700;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:2px 8px}
.editor-note{margin:14px 0 4px;padding:14px 16px;border-radius:10px;background:#f7fafc;border:1px solid #e2e8f0;border-left:3px solid #e8a33d}
.editor-note .en-label{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0b2540;margin-bottom:6px}
.editor-note p{margin:0;font-size:.92rem;line-height:1.6;color:#334155}

.book-also{font-weight:400;color:var(--gray);text-transform:none;letter-spacing:0}