/* ============================================================
   harris-books — storefront layer
   Search, facets, quick view, previews, reader shelf, lists,
   book-club kits, storefront routing, comfort controls.
   Additive only. Uses the existing tokens from styles.css.
   ============================================================ */

:root{
  --s-pane:rgba(20,15,11,.97);
  --s-edge:rgba(201,146,46,.34);
  --s-soft:rgba(247,242,230,.06);
  --s-shadow:0 26px 60px -28px rgba(0,0,0,.9);
}

/* ── reading comfort ─────────────────────────────────────── */
html.s-text-l body{font-size:clamp(1.18rem,1.08rem + .4vw,1.34rem)}
html.s-text-xl body{font-size:clamp(1.3rem,1.16rem + .55vw,1.5rem)}
html.s-calm body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(16,12,9,.78);
}
html.s-calm .hero-img img{filter:saturate(.4) contrast(.95) brightness(.62)}
html.s-still *{animation:none!important;transition:none!important}
html.s-still video{display:block}

/* ── shared furniture ────────────────────────────────────── */
.s-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:none;border:1px solid var(--line2);color:var(--paper2);
  border-radius:var(--r);padding:.5rem .85rem;font-size:.92rem;min-height:2.5rem;
  cursor:pointer;font-family:var(--serif);text-decoration:none;white-space:nowrap;
}
.s-btn:hover{border-color:var(--amber);color:var(--amber2)}
.s-btn[aria-pressed="true"],.s-btn.is-on{
  border-color:var(--amber);color:#191309;background:var(--amber2);font-weight:600}
.s-btn-primary{background:var(--amber);border-color:var(--amber);color:#191309;font-weight:600}
.s-btn-primary:hover{background:var(--amber2);color:#191309}
.s-btn-sm{padding:.34rem .62rem;font-size:.84rem;min-height:2.1rem}
.s-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.s-muted{color:var(--paper3)}
.s-h{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .35rem}
.s-lede{color:var(--paper2);margin:0 0 1.2rem}
.s-sec{padding-block:clamp(2rem,6vw,3.25rem);border-top:1px solid var(--line)}
.s-cover{border:1px solid var(--line2);background:var(--ink3);box-shadow:var(--s-shadow)}

/* ── top-bar controls ────────────────────────────────────── */
.s-tools{display:flex;gap:.4rem;align-items:center;order:3}
.s-iconbtn{
  display:inline-flex;align-items:center;gap:.4rem;background:none;
  border:1px solid var(--line2);color:var(--paper2);border-radius:var(--r);
  padding:.42rem .7rem;font-size:.9rem;min-height:2.4rem;cursor:pointer;
  font-family:var(--serif);white-space:nowrap;
}
.s-iconbtn:hover{border-color:var(--amber);color:var(--amber2)}
.s-iconbtn svg{width:1em;height:1em;flex:none}
.s-kbd{
  display:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;
  border:1px solid var(--line2);border-radius:2px;padding:.05rem .3rem;color:var(--paper3)}
@media (min-width:900px){.s-kbd{display:inline-block}}

/* ── announcement strip ──────────────────────────────────── */
.s-ann{
  background:linear-gradient(90deg,rgba(201,146,46,.16),rgba(201,146,46,.05));
  border-bottom:1px solid var(--line);font-size:.94rem}
.s-ann-in{display:flex;gap:.8rem;align-items:center;padding-block:.5rem;flex-wrap:wrap}
.s-ann b{font-family:var(--display)}
.s-ann a{color:var(--amber2)}
.s-ann-x{margin-left:auto;background:none;border:0;color:var(--paper3);cursor:pointer;
  font-size:1.2rem;line-height:1;padding:.2rem .4rem}
.s-ann-x:hover{color:var(--amber2)}

/* ── dialogs (search / quick view / settings / gift) ─────── */
.s-dlg{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(10,7,5,.72);backdrop-filter:blur(5px)}
.s-dlg.is-open{display:block}
.s-dlg-panel{
  position:absolute;left:50%;transform:translateX(-50%);
  top:max(2.5vh,.6rem);width:min(46rem,96vw);max-height:94vh;overflow:auto;
  background:var(--s-pane);border:1px solid var(--s-edge);border-radius:6px;
  box-shadow:var(--s-shadow);overscroll-behavior:contain}
.s-dlg-head{
  position:sticky;top:0;background:var(--s-pane);border-bottom:1px solid var(--line);
  display:flex;gap:.6rem;align-items:center;padding:.75rem .9rem;z-index:2}
.s-dlg-title{font-family:var(--display);font-size:1.05rem;margin:0;flex:1 1 auto}
.s-dlg-x{background:none;border:1px solid var(--line2);color:var(--paper2);border-radius:var(--r);
  width:2.2rem;height:2.2rem;font-size:1.1rem;line-height:1;cursor:pointer;flex:none}
.s-dlg-x:hover{border-color:var(--amber);color:var(--amber2)}
.s-dlg-body{padding:.9rem}

/* ── search ──────────────────────────────────────────────── */
.s-find{display:flex;gap:.5rem;align-items:center;width:100%}
.s-find input{
  flex:1 1 auto;background:var(--ink2);border:1px solid var(--line2);color:var(--paper);
  border-radius:var(--r);padding:.62rem .75rem;font-family:var(--serif);
  font-size:1.05rem;min-height:2.7rem}
.s-find input:focus{outline:2px solid var(--amber2);outline-offset:1px}
.s-res{list-style:none;margin:0;padding:0}
.s-res-grp{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--paper3);
  padding:.9rem .25rem .3rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.s-hit{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .4rem;border-radius:var(--r);
  text-decoration:none;color:inherit}
.s-hit img{width:2.6rem;flex:none;border:1px solid var(--line2)}
.s-hit b{display:block;font-family:var(--display);font-size:1rem;line-height:1.2}
.s-hit span{display:block;font-size:.88rem;color:var(--paper2);line-height:1.35}
.s-hit em{font-style:normal;background:rgba(201,146,46,.24);color:var(--paper);border-radius:2px}
.s-hit:hover,.s-hit.is-cur{background:var(--s-soft);outline:1px solid var(--s-edge)}
.s-hit-meta{font-size:.8rem;color:var(--paper3)}
.s-empty{padding:1.2rem .3rem;color:var(--paper2)}
.s-recent{display:flex;flex-wrap:wrap;gap:.4rem;padding:.4rem .25rem 0}

/* ── chips / tag pills ───────────────────────────────────── */
.s-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0;padding:0;list-style:none}
.s-tag{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;line-height:1;
  border:1px solid var(--line2);border-radius:999px;padding:.34rem .66rem;color:var(--paper2);
  text-decoration:none;background:rgba(247,242,230,.03)}
a.s-tag:hover{border-color:var(--amber);color:var(--amber2)}
.s-tag-key{color:var(--paper3);font-variant:small-caps;letter-spacing:.03em}
.s-tag-ku{border-color:var(--amber);color:var(--amber2)}

/* ── book-page additions ─────────────────────────────────── */
.s-bkbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.s-status{display:flex;gap:0;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.s-status button{background:none;border:0;border-right:1px solid var(--line2);color:var(--paper2);
  padding:.45rem .7rem;font-size:.86rem;cursor:pointer;font-family:var(--serif);min-height:2.4rem}
.s-status button:last-child{border-right:0}
.s-status button[aria-pressed="true"]{background:var(--amber2);color:#191309;font-weight:600}
.s-panel{
  border:1px solid var(--line);border-left:3px solid var(--amber-dim);
  background:rgba(247,242,230,.028);border-radius:var(--r);padding:.9rem 1rem;margin:1.1rem 0}
.s-panel h3{font-family:var(--display);font-size:1.02rem;margin:0 0 .45rem}
.s-panel p:last-child{margin-bottom:0}
.s-notes summary{cursor:pointer;color:var(--paper2);font-size:.95rem}
.s-notes summary::marker{color:var(--amber)}
.s-notes ul{margin:.6rem 0 0;padding-left:1.15rem;color:var(--paper2);font-size:.95rem}
.s-notes ul li{margin-bottom:.2rem}
.s-notes small{display:block;margin-top:.5rem;color:var(--paper3);font-size:.82rem}

.s-prev{margin:0}
.s-prev-frame{border:1px solid var(--line2);background:var(--ink2);border-radius:var(--r);
  overflow:hidden;min-height:8rem}
.s-prev-frame iframe{display:block;width:100%;height:560px;border:0;background:#fff}
@media (max-width:520px){.s-prev-frame iframe{height:480px}}
.s-prev-ph{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;padding:1rem}
.s-prev-ph img{width:4.4rem;border:1px solid var(--line2)}

.s-prog{display:block;width:100%;height:.5rem;background:var(--ink3);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;margin:.5rem 0 .35rem}
.s-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2))}

.s-series-prog{margin:1.1rem 0 0}
.s-series-prog ol{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}
.s-series-prog li{display:flex;gap:.5rem;align-items:baseline;font-size:.95rem}
.s-series-prog .s-dot{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid var(--line2);
  display:inline-grid;place-items:center;font-size:.7rem;color:var(--paper3)}
.s-series-prog .is-done .s-dot{background:var(--amber2);color:#191309;border-color:var(--amber)}

/* ── grids ───────────────────────────────────────────────── */
.s-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));
  list-style:none;margin:0;padding:0}
.s-card{display:flex;flex-direction:column;gap:.42rem;text-decoration:none;color:inherit;position:relative}
.s-card img{width:100%;border:1px solid var(--line2);background:var(--ink3);
  box-shadow:0 12px 26px -18px rgba(0,0,0,.9)}
.s-card b{font-family:var(--display);font-size:.98rem;line-height:1.16}
.s-card span{font-size:.84rem;color:var(--paper2);line-height:1.3}
.s-card .s-price{color:var(--paper3);font-size:.82rem}
.s-card:hover img{border-color:var(--amber)}
/* Quick look — always sits UNDER the cover, never on top of it */
.s-peekbtn{
  position:static;opacity:1;
  display:flex;align-items:center;justify-content:center;gap:.36em;
  width:100%;box-sizing:border-box;margin:0;padding:.46em .45em;min-height:2.25rem;
  font-family:var(--serif);font-size:.86rem;line-height:1;white-space:nowrap;
  color:var(--amber2);background:rgba(20,15,11,.55);
  border:1px solid rgba(201,146,46,.42);border-radius:var(--r);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.s-peekbtn::before{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.s-peekbtn:hover,.s-peekbtn:focus-visible{background:rgba(201,146,46,.14);border-color:var(--amber);color:var(--amber2)}
.s-peekbtn:focus-visible{outline:2px solid var(--amber2);outline-offset:2px}
/* card grids (browse, lists, book pages, "where you left off"): button at the foot of each card, lined up across the row */
.s-grid>li{display:flex;flex-direction:column;gap:.6rem}
.s-grid>li>.s-card{flex:1 1 auto}
.s-grid>li>.s-peekbtn{margin-top:auto}
/* homepage catalogue cards: button directly under the cover, in the cover column */
.rec.s-has-peek{grid-template-rows:auto 1fr;row-gap:.55rem}
.rec.s-has-peek>.rec-cover{grid-column:1;grid-row:1}
.rec.s-has-peek>.s-peekbtn{grid-column:1;grid-row:2;align-self:start}
.rec.s-has-peek>.rec-body{grid-column:2;grid-row:1 / span 2}
/* the card's own text link did the same job twice — one Quick look per card is enough */
.rec.s-has-peek .x-peek{display:none}
/* narrow phones: the cover column is slim, so the button drops the icon to keep its words on one line */
@media (max-width:519px){
  .rec.s-has-peek>.s-peekbtn{font-size:.8rem;padding:.44em .2em}
  .rec.s-has-peek>.s-peekbtn::before{display:none}
}
@media (prefers-reduced-motion:reduce){.s-peekbtn{transition:none}}

/* ── facets / browse ─────────────────────────────────────── */
.s-browse{display:grid;gap:1.6rem}
@media (min-width:900px){.s-browse{grid-template-columns:16rem 1fr;align-items:start}}
.s-facets{display:grid;gap:.9rem}
@media (max-width:899px){
  .s-facets{position:fixed;inset:0;z-index:88;background:var(--s-pane);overflow:auto;
    padding:1rem;display:none;align-content:start}
  .s-facets.is-open{display:grid}
  .s-facet-close{position:sticky;top:0}
}
@media (min-width:900px){.s-facet-open,.s-facet-close{display:none!important}}
.s-facet{border:1px solid var(--line);border-radius:var(--r);background:rgba(247,242,230,.02)}
.s-facet summary{padding:.6rem .75rem;cursor:pointer;font-family:var(--display);font-size:.98rem}
.s-facet[open] summary{border-bottom:1px solid var(--line)}
.s-facet-list{padding:.5rem .75rem .7rem;display:grid;gap:.28rem;max-height:16rem;overflow:auto}
.s-check{display:flex;gap:.5rem;align-items:center;font-size:.94rem;color:var(--paper2);cursor:pointer}
.s-check input{width:1.05rem;height:1.05rem;accent-color:var(--amber)}
.s-check .s-n{margin-left:auto;color:var(--paper3);font-size:.82rem;font-variant-numeric:tabular-nums}
.s-check.is-zero{opacity:.42}
.s-applied{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.s-applied button{border:1px solid var(--amber);background:rgba(201,146,46,.12);color:var(--amber2);
  border-radius:999px;font-size:.82rem;padding:.28rem .6rem;cursor:pointer;font-family:var(--serif)}
.s-count{color:var(--paper2);margin:0 0 .8rem;font-size:.95rem}
.s-sortrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem}
.s-sortrow select{background:var(--ink2);color:var(--paper);border:1px solid var(--line2);
  border-radius:var(--r);padding:.42rem .55rem;font-family:var(--serif);min-height:2.4rem}

/* ── lists / shelf ───────────────────────────────────────── */
.s-list{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:1.4rem}
.s-list:first-of-type{border-top:0;margin-top:0;padding-top:0}
.s-stats{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));margin:0 0 1.4rem}
.s-stat{border:1px solid var(--line);border-radius:var(--r);padding:.8rem;background:rgba(247,242,230,.02)}
.s-stat b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--amber2)}
.s-stat span{font-size:.85rem;color:var(--paper3)}
.s-goal{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 1.2rem}
.s-goal input{width:4.5rem;background:var(--ink2);color:var(--paper);border:1px solid var(--line2);
  border-radius:var(--r);padding:.4rem .5rem;font-family:var(--serif);min-height:2.4rem}
.s-shelf-row{display:grid;grid-template-columns:4.2rem 1fr;gap:.9rem;padding:.9rem 0;
  border-bottom:1px solid var(--line);align-items:start}
.s-shelf-row img{width:100%;border:1px solid var(--line2)}
.s-shelf-row h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .2rem}
.s-note{width:100%;background:var(--ink2);color:var(--paper);border:1px solid var(--line2);
  border-radius:var(--r);padding:.5rem .6rem;font-family:var(--serif);font-size:.95rem;
  min-height:3.2rem;resize:vertical;margin-top:.4rem}

/* ── book-club kit ───────────────────────────────────────── */
.s-kit{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;background:rgba(247,242,230,.02)}
.s-kit ol{margin:.6rem 0 0;padding-left:1.3rem}
.s-kit ol li{margin-bottom:.55rem}
.s-kit-head{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:start;margin-bottom:1rem}
.s-kit-head img{width:100%;border:1px solid var(--line2)}

/* ── storefront notice ───────────────────────────────────── */
.s-store-note{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.9rem;
  color:var(--paper2);border:1px dashed var(--line2);border-radius:var(--r);
  padding:.55rem .7rem;margin:.8rem 0 0}
.s-store-note select{background:var(--ink2);color:var(--paper);border:1px solid var(--line2);
  border-radius:var(--r);padding:.32rem .45rem;font-family:var(--serif)}

/* ── toast ───────────────────────────────────────────────── */
.s-toast{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:95;
  background:var(--s-pane);border:1px solid var(--s-edge);border-radius:999px;
  padding:.55rem 1.1rem;font-size:.94rem;box-shadow:var(--s-shadow);max-width:92vw}

/* ── print: the book-club one-sheet ──────────────────────── */
@media print{
  .topbar,.foot,.news,.s-dlg,.s-ann,.s-tools,.s-noprint,.trailer,.bk-actions{display:none!important}
  body{background:#fff!important;color:#000!important;font-size:11.5pt}
  body::after,body::before{display:none!important}
  a{color:#000!important;text-decoration:none}
  .s-kit,.s-panel{border:1px solid #999;break-inside:avoid}
  .s-h,h1,h2,h3{color:#000!important}
  .s-printurl::after{content:" (" attr(data-url) ")";font-size:9pt;color:#444}
}

/* ── pull quotes and the author's own words ────────────────────── */
.pull{
  margin:1.5rem 0;padding:.2rem 0 .2rem 1.25rem;
  border-left:2px solid var(--amber,#C9922E);
  font-family:var(--display,Georgia,serif);
  font-size:1.06rem;line-height:1.62;
}
.author-words{
  margin:1.7rem 0 2rem;padding:1.25rem 1.35rem;
  border-left:3px solid var(--amber,#C9922E);
  background:rgba(201,146,46,.055);
  border-radius:0 6px 6px 0;
  font-size:1.09rem;line-height:1.68;
}
.author-words p{margin:0 0 .95rem}
.author-words p:last-child{
  margin-bottom:0;font-style:italic;color:var(--amber,#C9922E);
}
@media (min-width:46rem){.author-words{font-size:1.14rem;padding:1.5rem 1.7rem}}