/* ============================================================
   UNBIAS REVIEW — Dealstore index (/dealstore)
   Store directory: search, featured stores, category filters,
   compact store rows. Mobile-first.
   Ported onto unbias-* class names; every rule scoped under
   .unbias-dsx. Built on the Unbias tokens (tokens.css).
   ============================================================ */

/* money / savings green (distinct from the red urgency tone) */
.unbias-dsx{ --save:#0F8A5B; --save-tint:#E6F5EE; }

/* content container — constrain + center like the site chrome (max 1200) */
.unbias-dsx .unbias-dsx-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

/* Neutralize a rogue host theme reset.css that paints every <button> magenta
   (#CC3366 border + hover/focus background) and forces white-space:nowrap, and
   colors every <a> magenta. Our scoped rules below re-style the elements we own. */
.unbias-dsx button{appearance:none;-webkit-appearance:none;border:0;border-radius:0;background-color:transparent;color:inherit;font:inherit;white-space:normal;cursor:pointer;}
.unbias-dsx a{color:inherit;}
/* Re-assert every filled control's own background on :hover/:focus so Hello
   theme reset.css ([type=button]:hover{background:#CC3366}, specificity 0,2,0)
   can't tie+win by load order. These are 0,3,0 so they always win. */
.unbias-dsx .unbias-dsx-search .btn:hover,.unbias-dsx .unbias-dsx-search .btn:focus{background:var(--teal);color:#fff;}
.unbias-dsx .unbias-fchip:hover,.unbias-dsx .unbias-fchip:focus{background:#fff;color:var(--ink);}
.unbias-dsx .unbias-fchip.active:hover,.unbias-dsx .unbias-fchip.active:focus{background:var(--ink-deep);color:#fff;}

/* ---------- page head ---------- */
.unbias-dsx .unbias-dsx-head{padding:30px 0 6px;}
.unbias-dsx .unbias-dsx-head .kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);}
.unbias-dsx .unbias-dsx-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;margin-top:8px;}
.unbias-dsx .unbias-dsx-head .sub{font-size:15.5px;line-height:1.6;color:var(--text-muted);margin-top:10px;max-width:62ch;}
.unbias-dsx .unbias-dsx-search{display:flex;align-items:center;gap:12px;max-width:560px;margin-top:18px;
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:4px 6px 4px 18px;
  transition:border-color .15s ease, box-shadow .15s ease;}
.unbias-dsx .unbias-dsx-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(21,155,156,.12);}
.unbias-dsx .unbias-dsx-search svg{width:19px;height:19px;color:var(--text-muted);flex:none;}
.unbias-dsx .unbias-dsx-search input{flex:1;border:none;background:none;font-family:var(--font-ui);font-size:15.5px;color:var(--ink);padding:10px 0;min-width:0;}
.unbias-dsx .unbias-dsx-search input:focus{outline:none;}
.unbias-dsx .unbias-dsx-search .btn{flex:none;}
.unbias-dsx .unbias-dsx-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13px;font-weight:600;color:var(--text-muted);}
.unbias-dsx .unbias-dsx-stats .st{display:inline-flex;align-items:center;gap:6px;}
.unbias-dsx .unbias-dsx-stats .st svg{width:15px;height:15px;color:var(--save);}

/* ---------- featured stores ---------- */
.unbias-dsx .unbias-dsx-feat{padding:26px 0 6px;}
.unbias-dsx .unbias-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.unbias-dsx .unbias-fstore{position:relative;display:flex;flex-direction:column;gap:13px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px;transition:transform .15s ease, box-shadow .15s ease;}
.unbias-dsx .unbias-fstore:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);}
.unbias-dsx .unbias-fstore .unbias-fs-ribbon{position:absolute;top:0;right:0;background:var(--save);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-bottom-left-radius:10px;border-top-right-radius:15px;}
.unbias-dsx .unbias-fstore .unbias-fs-top{display:flex;align-items:center;gap:13px;}
.unbias-dsx .unbias-fstore .unbias-fs-logo{width:54px;height:54px;border-radius:13px;border:1px solid var(--border);background:var(--surface-alt);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink);flex:none;overflow:hidden;}
.unbias-dsx .unbias-fstore .unbias-fs-logo image-slot{width:100%;height:100%;}
.unbias-dsx .unbias-fstore .unbias-fs-logo img{width:100%;height:100%;object-fit:contain;}
.unbias-dsx .unbias-fstore .unbias-fs-id{display:flex;flex-direction:column;gap:3px;min-width:0;}
.unbias-dsx .unbias-fstore .unbias-fs-id b{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink);}
.unbias-dsx .unbias-fstore .unbias-fs-rating{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:600;}
.unbias-dsx .unbias-fstore .unbias-fs-rating .stars svg{width:13px;height:13px;}
.unbias-dsx .unbias-fstore .unbias-fs-offer{display:flex;align-items:center;gap:9px;background:var(--save-tint);border-radius:10px;padding:10px 13px;}
.unbias-dsx .unbias-fstore .unbias-fs-offer .v{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--save);letter-spacing:-.01em;flex:none;}
.unbias-dsx .unbias-fstore .unbias-fs-offer span{font-size:12.5px;font-weight:700;color:var(--ink-700);line-height:1.3;}
.unbias-dsx .unbias-fstore .unbias-fs-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.unbias-dsx .unbias-fstore .unbias-fs-count{font-size:12.5px;font-weight:700;color:var(--text-muted);}
.unbias-dsx .unbias-fstore .unbias-fs-go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--teal-text);}
.unbias-dsx .unbias-fstore .unbias-fs-go svg{width:14px;height:14px;transition:transform .15s ease;}
.unbias-dsx .unbias-fstore:hover .unbias-fs-go svg{transform:translateX(3px);}

/* ---------- filter bar (sticky) ---------- */
.unbias-dsx .unbias-dsx-filterbar{position:sticky;top:var(--unbias-sticky-top);z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  padding:12px 0;margin:20px 0 4px;border-bottom:1px solid var(--border);}
.unbias-dsx .unbias-dsx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.unbias-dsx .unbias-dsx-chips::-webkit-scrollbar{display:none;}

/* filter chip (fchip is not loaded site-wide — define a scoped copy here,
   matching the store-page chip exactly) */
.unbias-dsx .unbias-fchip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;
  font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:var(--r-pill);
  border:1.5px solid var(--border);background:#fff;color:var(--ink);transition:all .14s ease;cursor:pointer;}
.unbias-dsx .unbias-fchip .cnt{font-size:11px;font-weight:800;background:var(--surface-alt);color:var(--text-muted);padding:1px 7px;border-radius:var(--r-pill);}
.unbias-dsx .unbias-fchip:hover{border-color:var(--teal);}
.unbias-dsx .unbias-fchip.active{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff;}
.unbias-dsx .unbias-fchip.active .cnt{background:rgba(255,255,255,.18);color:#fff;}

/* ---------- directory ---------- */
.unbias-dsx .unbias-dir-section{padding:18px 0 8px;}
.unbias-dsx .unbias-dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
.unbias-dsx .unbias-srow-store{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:13px;
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;}
.unbias-dsx .unbias-srow-store:hover{border-color:var(--teal);background:var(--teal-tint);}
.unbias-dsx .unbias-srow-store .logo{width:46px;height:46px;border-radius:11px;border:1px solid var(--border);background:var(--surface-alt);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);}
.unbias-dsx .unbias-srow-store .s-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.unbias-dsx .unbias-srow-store .s-body b{font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.unbias-dsx .unbias-srow-store .s-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);font-weight:600;flex-wrap:wrap;}
.unbias-dsx .unbias-srow-store .s-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-subtle);}
.unbias-dsx .unbias-srow-store .s-best{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;}
.unbias-dsx .unbias-srow-store .s-best b{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--save);letter-spacing:-.01em;}
.unbias-dsx .unbias-srow-store .s-best span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);}
.unbias-dsx .unbias-srow-store.is-hidden{display:none;}

/* empty state */
.unbias-dsx .unbias-dir-empty{display:none;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;color:var(--text-muted);}
.unbias-dsx .unbias-dir-empty.show{display:flex;}
.unbias-dsx .unbias-dir-empty svg{width:34px;height:34px;color:var(--text-subtle);}
.unbias-dsx .unbias-dir-empty b{font-family:var(--font-display);font-size:17px;color:var(--ink);}
.unbias-dsx .unbias-dir-empty p{font-size:14px;margin:0;}

/* ---------- bottom note ---------- */
.unbias-dsx .unbias-dsx-note{margin:30px 0 0;background:var(--surface-alt);border-radius:var(--r-lg);padding:22px 24px;
  display:flex;gap:14px;align-items:flex-start;}
.unbias-dsx .unbias-dsx-note svg{width:20px;height:20px;color:var(--teal-text);flex:none;margin-top:2px;}
.unbias-dsx .unbias-dsx-note h3{font-family:var(--font-display);font-weight:800;font-size:16px;margin-bottom:5px;}
.unbias-dsx .unbias-dsx-note p{font-size:13.5px;line-height:1.6;color:var(--text-muted);margin:0;}
.unbias-dsx .unbias-dsx-note a{color:var(--teal-text);font-weight:700;text-decoration:underline;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .unbias-dsx .unbias-feat-grid{grid-template-columns:1fr;gap:12px;}
  .unbias-dsx .unbias-dir-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .unbias-dsx .unbias-dsx-head{padding:20px 0 4px;}
  .unbias-dsx .unbias-dsx-search .btn{display:none;}        /* live filter — no button needed */
  .unbias-dsx .unbias-dsx-stats{gap:14px;}
  .unbias-dsx .unbias-fstore{padding:15px;}
  .unbias-dsx .unbias-dir-section{padding:14px 0 8px;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .unbias-dsx .unbias-fstore,
  .unbias-dsx .unbias-fstore .unbias-fs-go svg,
  .unbias-dsx .unbias-srow-store,
  .unbias-dsx .unbias-dsx-search,
  .unbias-dsx .unbias-fchip{transition:none;}
  .unbias-dsx .unbias-fstore:hover{transform:none;}
  .unbias-dsx .unbias-fstore:hover .unbias-fs-go svg{transform:none;}
}

/* fractional star rating */
.unbias-stars{position:relative;display:inline-block;white-space:nowrap;line-height:1;font-size:14px;letter-spacing:1px;vertical-align:middle;}
.unbias-stars .s-bg{color:#d8dde2;}
.unbias-stars .s-fg{position:absolute;left:0;top:0;overflow:hidden;width:var(--fill,0);color:#f5a623;}
