/* ============================================================
   SHOP COMPONENTS — shared by both tracks
   Load after tokens.css + pop.css.
   ============================================================ */

/* ---------- page head ---------- */
.shop-head{padding:56px 0 34px}
.shop-head h1{font-size:clamp(38px,5.4vw,72px);line-height:.98}
.shop-head h1 em{color:var(--jade)}
.shop-head p{font-size:19px;color:var(--soft);max-width:34em;margin-top:18px}

/* ---------- filter bar ---------- */
.filters{position:sticky;top:74px;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.filters .wrap{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px;
  flex-wrap:wrap}
.search{flex:1;min-width:190px;position:relative}
.search input{width:100%;border:1px solid var(--rule);background:transparent;
  font-family:var(--text);font-size:16px;padding:10px 12px 10px 34px;outline:none}
.search input:focus{border-color:var(--jade)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.42}
.fgroup{display:flex;gap:6px;flex-wrap:wrap}
.fchip{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--rule);background:transparent;cursor:pointer;
  color:var(--muted);transition:all .18s;white-space:nowrap}
.fchip:hover{border-color:var(--ink);color:var(--ink)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip .c{opacity:.62;margin-left:6px}
select.sort{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);background:transparent;padding:8px 10px;cursor:pointer;
  color:var(--muted);outline:none}
.count{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}

/* ---------- grid ---------- */
.tabsec{padding:52px 0 8px;scroll-margin-top:150px}
.tabsec > .th{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--rule);padding-bottom:13px;margin-bottom:30px;flex-wrap:wrap}
.tabsec .th h2{font-size:clamp(25px,3vw,36px)}
.tabsec .th .n{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;color:var(--jade);
  font-weight:500}
.tabsec .th p{font-size:16.5px;color:var(--muted);max-width:44em;margin:7px 0 0}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.pcard{border:1px solid var(--rule);display:flex;flex-direction:column;background:var(--paper);
  transition:border-color .25s,transform .28s cubic-bezier(.22,1,.28,1),box-shadow .28s}
.pcard:hover{border-color:var(--ink);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.055)}
.pcard .thumb{aspect-ratio:5/4;cursor:pointer}   /* matches the 5:4 top-crop — no side loss */
.pcard .badge{position:absolute;top:9px;left:9px;z-index:3;font-family:var(--sans);font-size:8px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 8px;background:var(--paper);
  color:var(--ink);border:1px solid var(--rule)}
.pcard .badge.tool{background:var(--jade);color:#fff;border-color:var(--jade)}
.pcard .badge.free{background:var(--coral);color:#fff;border-color:var(--coral)}
/* the old "Read page one" hover label is gone: wrong for tools, and a third
   competing way to see inside. Hold = a glance, tap = the full quick-view. */
.peek{display:none}

.pbody{padding:15px 15px 17px;display:flex;flex-direction:column;flex:1}
.pbody .k{font-family:var(--sans);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.pbody h3{font-size:19px;line-height:1.16;margin-bottom:6px}
.pbody p{font-size:15px;color:var(--soft);margin:0 0 15px;flex:1}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pfoot .price{font-size:19px}
.addbtn{font-family:var(--sans);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 11px;border:1px solid var(--ink);background:transparent;cursor:pointer;
  transition:all .2s;white-space:nowrap}
/* The outline holds its color through the hover. Without the explicit
   border-color here the button inherits pop.css's `border-color:var(--pop-1)`
   on hover, so the black outline flicked to jade halfway through the fill. */
.addbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.addbtn.in{background:var(--jade);border-color:var(--jade);color:#fff}

.empty{padding:70px 0;text-align:center;color:var(--muted)}
.empty h3{font-size:26px;color:var(--ink);margin-bottom:8px}

/* ---------- systems get wider cards ---------- */
.sysgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.syscard{border:1px solid var(--ink);padding:26px;display:flex;flex-direction:column}
.syscard .meta{font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);margin-bottom:10px}
.syscard h3{font-size:24px;line-height:1.14;margin-bottom:9px}
.syscard p{font-size:16px;color:var(--soft);flex:1;margin-bottom:18px}

/* The binder drawer, its scrim and its email capture moved to binder.css.
   They are not shop furniture: the binder follows the visitor across all
   three pages, so the panel has to exist on all three. */

/* ---------- quick view ---------- */
.qv{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
  padding:28px}
.qv.open{display:flex}
.qv-box{background:var(--paper);border:1px solid var(--ink);max-width:980px;width:100%;
  max-height:88vh;overflow-y:auto;display:grid;grid-template-columns:1.05fr 1fr}
.qv-pages{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:22px;
  border-right:1px solid var(--rule)}
.qv-page{border:1px solid var(--rule);overflow:hidden;position:relative;background:#FAFAF9}
.qv-page img{width:100%;display:block}
.qv-page.lock img{filter:grayscale(1) blur(5px) contrast(.9);opacity:.5}
.qv-page.lock::after{content:"In the guide";position:absolute;inset:auto 0 0 0;padding:10px;
  font-family:var(--sans);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.94);text-align:center;
  border-top:1px solid var(--rule)}
.qv-page .tag{position:absolute;top:8px;left:8px;background:var(--jade);color:#fff;
  font-family:var(--sans);font-size:8px;letter-spacing:.13em;text-transform:uppercase;padding:3px 7px}
.qv-copy{padding:30px 30px 34px;display:flex;flex-direction:column}
.qv-copy h3{font-size:31px;line-height:1.1;margin:10px 0 10px}
.qv-copy .lede{font-size:17.5px;color:var(--soft)}
.qv-deal{font-size:16px;color:var(--soft);border-top:1px solid var(--rule);padding-top:16px;
  margin-top:auto}
.qv-deal em{color:var(--jade);font-style:italic}
.qv-buy{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.qv-buy .price{font-size:28px}

@media(max-width:1180px){ .pgrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){
  .sysgrid{grid-template-columns:1fr}
  .filters{top:0}
  .qv-box{grid-template-columns:1fr}
  .qv-pages{border-right:0;border-bottom:1px solid var(--rule)}
}
/* hold 3 columns through tablet — dropping to 2 at 900px pushed the
   catalogue back over 16,000px on an iPad */
@media(max-width:760px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:18px}
}
/* ---------- small screens ----------
   Deliberately STAY at two columns down to 320px. Dropping to one
   column stacked 33 cards into a ~25,000px scroll — worse than the
   live site we are replacing. Two compact columns plus a shorter
   thumb keeps the whole catalogue inside a reasonable scroll. */
@media(max-width:560px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard .thumb{aspect-ratio:5/4}
  .pbody{padding:11px 11px 13px}
  .pbody h3{font-size:15.5px;line-height:1.14}
  .pbody p{font-size:13px;margin-bottom:11px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pbody .k{font-size:7.5px;margin-bottom:5px}
  .pfoot{flex-direction:column;align-items:flex-start;gap:8px}
  .pfoot .price{font-size:17px}
  .addbtn{font-size:8px;padding:7px 9px;width:100%;text-align:center}
  .peek{display:none}
  .filters .wrap{gap:9px}
  .tabsec{padding:34px 0 6px}
  .tabsec > .th{margin-bottom:18px}
  .tabsec .th p{display:none}
  .syscard{padding:18px}
}
@media(max-width:380px){
  .pgrid{gap:9px}
  .pbody h3{font-size:14.5px}
}

/* ============================================================
   THE FREE BAND — both freebies, rendered from catalog.js
   ============================================================ */
.freebar{padding:44px 0 8px}
.freehead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:26px}
.freehead h2{font-size:clamp(25px,3vw,36px);margin-top:10px}
.freehead p{font-size:16.5px;color:var(--soft);max-width:44em;margin:9px 0 0}
.freegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.freecard{border:1px solid var(--ink);display:grid;grid-template-columns:150px 1fr;
  transition:transform .28s cubic-bezier(.22,1,.28,1),box-shadow .28s}
.freecard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.055)}
.freecard .thumb{aspect-ratio:auto;height:100%;cursor:pointer;border-right:1px solid var(--rule)}
.fbody{padding:20px 20px 22px;display:flex;flex-direction:column}
.fbody .k{font-family:var(--sans);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);margin-bottom:8px}
.fbody h3{font-size:23px;line-height:1.14;margin-bottom:7px}
.fbody p{font-size:15.5px;color:var(--soft);margin:0 0 16px;flex:1}

@media(max-width:900px){ .freegrid{grid-template-columns:1fr} }
@media(max-width:560px){
  .freecard{grid-template-columns:106px 1fr}
  .fbody{padding:14px}
  .fbody h3{font-size:18px}
  .fbody p{font-size:14px}
}

/* ============================================================
   THE JOURNEYS — a planning arc is not a guide+tool pair, and
   should never look like one.
   ============================================================ */
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.jcard{border:1.5px solid var(--ink);padding:28px 28px 24px;display:flex;flex-direction:column;
  background:var(--paper);transition:transform .3s cubic-bezier(.22,1,.28,1),box-shadow .3s}
.jcard:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,122,110,.10)}
.jhead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:18px}
.jcard .meta{font-family:var(--sans);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--jade);margin-bottom:8px}
.jcard h3{font-size:27px;line-height:1.1}
.jcard .price{font-family:var(--serif);font-size:26px;white-space:nowrap}
.jcard .price s{color:var(--muted);font-size:.62em;margin-right:.35em}

/* the arc, as a threaded row */
.jarc{list-style:none;display:flex;align-items:center;gap:0;padding:0;margin:0 0 18px;flex-wrap:wrap}
.jarc li{font-family:var(--sans);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);position:relative;padding-right:26px}
.jarc li:last-child{padding-right:0}
.jarc li::after{content:"";position:absolute;right:9px;top:50%;width:10px;height:1px;
  background:var(--jade)}
.jarc li:last-child::after{display:none}
.jarc li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--jade);margin-right:7px;vertical-align:middle}

.jdesc{font-size:16.5px;color:var(--soft);margin:0 0 18px}
.jlists{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:16px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:16px}
.jlists .jl{font-family:var(--sans);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.jlists ul{list-style:none;padding:0;margin:0;font-size:14.5px;color:var(--soft)}
.jlists li{padding:2px 0}
.jfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:auto}
.jfoot em{font-size:15.5px;color:var(--muted);max-width:26em}

@media(max-width:1080px){ .jgrid{grid-template-columns:1fr} }
@media(max-width:560px){
  .jcard{padding:20px}
  .jcard h3{font-size:22px}
  .jlists{grid-template-columns:1fr;gap:14px}
  .jfoot{flex-direction:column;align-items:stretch}
}

/* ============================================================
   THE STANDING WHOLE-BINDER BAR
   Stands from first paint and rides the whole page. Hides while
   the drawer is open, since two fixed panels at once is clutter,
   and switches from advertising to arithmetic once there is
   anything in the binder. footer{padding-bottom:112px} below is
   what keeps it from covering the last of the footer.
   ============================================================ */
.wholebar{position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--ink);
  transform:translateY(102%);transition:transform .42s cubic-bezier(.22,1,.28,1)}
.wholebar.on{transform:none}
.wb-in{max-width:var(--maxw);margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:22px}
.wb-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-copy b{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.15}
.wb-copy span{font-family:var(--sans);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.wb-act{display:flex;align-items:center;gap:16px;flex-shrink:0}
.wb-act .price{font-size:22px}
.wb-act .price s{color:var(--muted);font-size:.66em;margin-right:.35em}

@media(max-width:640px){
  .wb-in{padding:10px 16px;gap:12px}
  .wb-copy b{font-size:15.5px}
  .wb-copy span{display:none}
  .wb-act{gap:10px}
  .wb-act .price{font-size:18px}
  .wb-act .price s{display:none}
}
@media (prefers-reduced-motion:reduce){ .wholebar{transition:none} }

/* the standing bar is fixed, so keep it off the last of the footer */
footer{padding-bottom:112px}