/* ==========================================================================
   Tahoorestan — the listing vocabulary
   --------------------------------------------------------------------------
   The chrome a *filtered listing* needs, shared by the two page families that
   have one: the blog index and its five category pages, and /shop/ with its
   thirteen.  It was written for the blog first and lived in blog.css; the shop
   needs exactly the same search field, the same category chip, the same result
   count, the same sort control and the same empty state, and a second copy of
   them would have been two things to keep in step instead of one.

   So this file is the seam, not a new layer: every rule below was MOVED here
   unchanged, and blog.css and shop.css both load it first.  Nothing blog- or
   shop-specific belongs in here — the post card, the magazine sidebar, the
   product card and the facet column each stay in their own family's file.

   No new vocabulary: the tokens are styles.css's own (--green / --gold /
   --pale / --line / --r-* / --btn-lift / --font-body), and fx.js already
   covers these selectors, so the motion layer follows for free.
   ========================================================================== */


/* The one utility this family needs and styles.css does not define: a label
   that exists for a screen reader and not for the eye.  The search field, the
   sort control and the newsletter input each carry a real <label>, because a
   placeholder disappears the moment someone starts typing. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}


.bhero__tools{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:26px;
}

/* the search field, on green.  Same shell as .track (the footer's tracking
   field) so a blog search and an order lookup are visibly the same control. */
.bsearch{
  position:relative;display:flex;align-items:center;gap:8px;
  width:min(470px,100%);height:56px;padding:0 6px 0 6px;
  background:#fff;border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(20,50,0,.18);
}
.bsearch__ic{
  flex:none;width:20px;height:20px;margin-inline-start:14px;color:var(--green-d);
}
.bsearch__in{
  flex:1;min-width:0;height:100%;border:0;background:none;padding-inline:10px;
  font-size:14.8px;font-weight:500;color:var(--ink2);
}
.bsearch__in::placeholder{color:#a3a3a3;font-weight:400}
.bsearch__in:focus{outline:0}
.bsearch:focus-within{box-shadow:0 0 0 3px rgba(241,183,9,.5),0 14px 34px rgba(20,50,0,.18)}
.bsearch__clear{
  flex:none;display:none;place-items:center;width:34px;height:34px;border-radius:50%;
  color:#9a9a9a;transition:background .18s,color .18s;
}
.bsearch__clear .ic{width:15px;height:15px;stroke-width:2.2}
.bsearch__clear:hover{background:#f2f2f2;color:var(--ink2)}
.bsearch.is-filled .bsearch__clear{display:grid}
.bsearch__go{
  flex:none;height:44px;padding:0 20px;white-space:nowrap;border-radius:var(--r-sm);
  background:var(--green-d);color:#fff;font-size:14.2px;font-weight:700;
  transition:background .2s,transform .2s;
}
.bsearch__go:hover{background:var(--green-dd);transform:translateY(var(--btn-lift))}

/* three figures under the field — the same tone as .phero__kick, not a KPI row */
.bhero__figs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 26px;margin-top:22px;
  font-size:13.2px;font-weight:600;color:rgba(255,255,255,.82);
}
.bhero__figs li{display:flex;align-items:center;gap:8px}
.bhero__figs b{font-size:17px;font-weight:800;color:#fff;font-family:var(--font-body)}
.bhero__figs .ic{width:17px;height:17px;color:var(--gold);flex:none}
.bhero__figs li+li::before{
  content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34);
  margin-inline-end:16px;
}


/* the category chip.  .tag in styles.css is absolutely positioned onto the
   homepage card, so the blog needs a free-standing one. */
.bcat{
  display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 12px;
  border-radius:999px;background:var(--pale);color:var(--green-dd);
  font-size:11.8px;font-weight:800;transition:background .18s,color .18s;
}
.bcat .ic{width:14px;height:14px}
a.bcat:hover{background:var(--green);color:#fff}
.bcat--light{background:rgba(255,255,255,.16);color:#fff}
a.bcat--light:hover{background:#fff;color:var(--green-dd)}


.bchips{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.bchip{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13.2px;font-weight:700;color:#5d5d5d;
  transition:background .18s,border-color .18s,color .18s;
}
.bchip .ic{width:15px;height:15px;color:#b0b0b0;transition:color .18s}
.bchip i{
  font-style:normal;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:#f2f2f2;color:#8f8f8f;font-size:11px;font-weight:800;
  display:grid;place-items:center;transition:background .18s,color .18s;
}
.bchip:hover{background:#fafcf7;border-color:#dde9d1;color:var(--ink2)}
.bchip:hover .ic{color:var(--green)}
.bchip.is-on{background:var(--green);border-color:var(--green);color:#fff}
.bchip.is-on .ic{color:#fff}
.bchip.is-on i{background:rgba(255,255,255,.24);color:#fff}

.bcount{font-size:12.6px;font-weight:700;color:var(--muted);white-space:nowrap}
.bcount b{color:var(--green-dd)}
.bsort{position:relative;display:flex;align-items:center}
.bsort .ic{
  position:absolute;inset-inline-start:11px;width:16px;height:16px;
  color:#9c9c9c;pointer-events:none;
}
.bsort select{
  appearance:none;height:36px;padding-inline:33px 30px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font:700 13px var(--font-body);color:#5d5d5d;cursor:pointer;
  transition:border-color .18s,color .18s;
}
.bsort select:hover{border-color:#dde9d1;color:var(--ink2)}
.bsort::after{
  content:"";position:absolute;inset-inline-end:13px;width:7px;height:7px;
  border-right:2px solid #a8a8a8;border-bottom:2px solid #a8a8a8;
  rotate:45deg;translate:0 -2px;pointer-events:none;
}


/* the empty state and the pager */
.bempty{
  margin-top:8px;padding:46px 28px;text-align:center;
  border:1px dashed #dcdcdc;border-radius:var(--r-card);background:#fcfcfc;
}
.bempty[hidden]{display:none}
.bempty .ic{width:40px;height:40px;color:#cfcfcf;margin-inline:auto}
.bempty__t{margin-top:12px;font-size:16.4px;font-weight:800;color:var(--ink2);line-height:1.7}
.bempty__x{margin-top:6px;font-size:13.6px;line-height:2;color:var(--body)}
.bempty__b{
  display:inline-flex;align-items:center;min-height:42px;padding:6px 20px;margin-top:16px;line-height:1.45;
  border-radius:var(--r-md);background:var(--green);color:#fff;
  font-size:13.6px;font-weight:700;transition:background .2s,transform .2s;
}
.bempty__b:hover{background:var(--green-d);transform:translateY(var(--btn-lift))}

.bmore{margin-top:28px;text-align:center}
.bmore[hidden]{display:none}
.bmore__b{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:6px 28px;line-height:1.45;
  border:1px solid #dde9d1;border-radius:var(--r-md);background:#fff;
  font-size:14.4px;font-weight:700;color:var(--green-dd);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.bmore__b .ic{width:17px;height:17px;transition:translate .2s}
.bmore__b:hover{background:#f7fbf3;transform:translateY(var(--btn-lift));box-shadow:0 12px 26px rgba(40,60,20,.1)}
.bmore__b:hover .ic{translate:0 3px}
.bmore__n{margin-top:10px;font-size:12.4px;font-weight:600;color:var(--muted)}


/* ══════════════════════════════════════════════════════════════════════════
   phones
   --------------------------------------------------------------------------
   Moved from blog.css with the rules above: the chip rail turning into a
   horizontal scroller is what keeps a six-chip filter from becoming six rows,
   and the shop has fourteen chips, so it needs this more than the blog does.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  .bhero__figs{gap:8px 14px;font-size:12.2px}
  .bhero__figs li+li::before{display:none}
  .bhero__figs b{font-size:15px}
  .bsearch{height:52px}
  .bsearch__go{padding:0 15px;font-size:13.2px}
  .bchips{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .bchips::-webkit-scrollbar{display:none}
  .bchip{flex:none}
}