/* ============================================================
   SHOPTER™.SHOPPING — READABILITY & NAV POLISH
   Include last on a page, just before </body>:
       <link rel="stylesheet" href="shopter-polish.css">
       <script src="shopter-polish.js"></script>

   Three jobs:
   1. Heavier, darker body text so pages read at a glance.
   2. Brand names stand out: heavy uppercase in the main text colour.
   3. One bottom nav look on every page, whichever markup the page
      carries (.shopter-bottom-nav, .shopter-bnav or resale's .bnav).

   It loads after each page's own <style> blocks, so plain rules win
   on order; !important is only used where a page already uses it
   or sets the value inline.
   ============================================================ */

/* Nav labels use Plus Jakarta Sans everywhere. Pages that only load
   Syne would otherwise fall back to it, and Syne is too wide for five
   labels side by side. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ── 1. TEXT WEIGHT & CONTRAST ── */
:root{
  --polish-ink:#2F3A32;           /* nav icons and labels */
  --polish-active:#0F7A32;        /* current tab */
  --polish-active-bg:rgba(15,122,50,0.12);
  --polish-bar-line:rgba(0,0,0,0.10);
  --polish-bar-shadow:0 -6px 24px rgba(0,0,0,0.06);
}
html[data-theme="dark"],html[data-theme="rose"],html.dark{
  --polish-ink:#C9D6CB;
  --polish-active:#39FF64;
  --polish-active-bg:rgba(57,255,100,0.14);
  --polish-bar-line:rgba(255,255,255,0.10);
  --polish-bar-shadow:0 -6px 24px rgba(0,0,0,0.45);
}
html[data-theme="rose"]{--polish-active:#FF7FA0;--polish-active-bg:rgba(255,127,160,0.14)}

/* Light theme sets these inline on <html>, so !important is needed to
   darken them. Secondary text was mid-grey; now it reads clearly. */
html[data-theme="light"]{
  --muted:#38423A !important;
  --muted2:#36404E !important;
}

/* Everything inherits from body, so lifting it from 400 to 500 lifts
   all running text without flattening anything already bold. */
body{font-weight:500}
label,input,textarea,select{font-weight:500}
/* Sentences people actually read go a step heavier again. :root body
   outranks shopter-a11y.css, which pins <p> at 500 with !important. */
:root body p,:root body li,
:root body .page-sub,:root body .section-sub,:root body .hint{font-weight:600 !important}
:root body .hero-sub{font-weight:700 !important}   /* on photos: keep it heavy */
input::placeholder,textarea::placeholder{font-weight:500;opacity:0.85}

/* The discover hero subtitle sits on a photo. shopter-a11y.css darkens
   every <p> in light mode, which turned it dark grey on dark imagery. */
/* Only the photo heroes (#hero-sub). Other pages use .hero-sub for a
   plain subtitle, where white would vanish. */
[data-theme="light"] #hero-sub{color:#fff !important}

/* ── 2. BRAND NAMES ── */
/* :root body raises specificity above shopter-a11y.css's
   [data-theme="light"] [class*="brand"] rule, which caps them at 700. */
:root body .s-brand,
:root body .bc-brand,
:root body .item-brand,
:root body .history-brand,
:root body .prov-brand,
:root body .twin-picker-brand,
:root body .preview-brand,
:root body .rb,:root body .rbd,
:root body .grid .brand{
  font-weight:800 !important;
  color:var(--text) !important;
  text-transform:uppercase;
  letter-spacing:0.06em !important;
}
.item-brand,.history-brand,.prov-brand,.twin-picker-brand,.rb{font-size:13px !important}
.s-brand,.bc-brand,.preview-brand,.rbd{font-size:14px !important}

/* ── 3. BOTTOM NAV ── */
.shopter-bottom-nav,.shopter-bnav,nav.bnav{
  background:var(--bg) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-top:1px solid var(--polish-bar-line) !important;
  box-shadow:var(--polish-bar-shadow);
  padding:6px 0 calc(8px + env(safe-area-inset-bottom,0px)) !important;
}
nav.bnav{padding-left:6px !important;padding-right:6px !important;align-items:flex-end}
.shopter-bnav-inner{
  max-width:520px !important;padding:0 6px !important;
  align-items:flex-end !important;justify-content:space-between !important;
}

/* Every tab: same width, icon over label, one colour */
.shopter-bnav-item,nav.bnav .bi,.bnav-sell,nav.bnav .bsell{
  flex:1 1 0;min-width:0;
  display:flex !important;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:3px !important;padding:4px 0 2px !important;
  background:transparent !important;border-radius:0 !important;
  color:var(--polish-ink) !important;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.shopter-bnav-item::after,nav.bnav .bi::after{display:none !important}

/* Icon sits in a pill that fills in on the current tab */
.shopter-bnav-icon{
  display:flex !important;align-items:center;justify-content:center;
  width:52px;height:30px;border-radius:15px;
  transition:background 0.15s;
}
.shopter-bnav-item svg,nav.bnav .bi svg{
  width:24px !important;height:24px !important;
  color:var(--polish-ink) !important;fill:currentColor;
}
.shopter-bnav-item>svg,nav.bnav .bi>svg{
  box-sizing:content-box;padding:3px 14px;border-radius:15px;
  transition:background 0.15s;
}

/* shopter-ui.css fades idle labels and icons to ~0.75; full strength
   reads better, and the current tab is marked by colour and the pill. */
.shopter-bottom-nav .shopter-bnav-label,.shopter-bnav .shopter-bnav-label,
.shopter-bottom-nav .shopter-bnav-icon,.shopter-bnav .shopter-bnav-icon{opacity:1 !important}

/* Labels: one size, bold, never clipped */
.shopter-bottom-nav .shopter-bnav-label,.shopter-bnav .shopter-bnav-label,
.shopter-bottom-nav .bnav-sell-label,.shopter-bnav .bnav-sell-label,
nav.bnav .bi>span,nav.bnav .bsell>span:last-child{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:0.1px !important;
  line-height:1.2 !important;color:inherit !important;
  white-space:nowrap;
}

/* Current tab */
.shopter-bnav-item.is-current,nav.bnav .bi.is-current{color:var(--polish-active) !important}
.shopter-bnav-item.is-current .shopter-bnav-icon,
.shopter-bnav-item.is-current>svg,
nav.bnav .bi.is-current>svg{background:var(--polish-active-bg)}
.shopter-bnav-item.is-current svg,nav.bnav .bi.is-current svg{color:var(--polish-active) !important}
.shopter-bnav-item.is-current .shopter-bnav-label,
nav.bnav .bi.is-current>span{font-weight:800 !important}

/* Sell: raised green button with a ring that separates it from the bar */
.bnav-sell-icon,nav.bnav .bsell-ic{
  width:50px !important;height:50px !important;border-radius:50% !important;
  margin-top:-20px !important;margin-bottom:1px;
  background:#39FF64 !important;color:#07090A !important;
  border:3px solid var(--bg);box-sizing:border-box;
  box-shadow:0 4px 14px rgba(15,122,50,0.30) !important;
  display:flex !important;align-items:center;justify-content:center;
}
.bnav-sell-icon svg,nav.bnav .bsell-ic svg{width:22px !important;height:22px !important;stroke:#07090A !important}
.bnav-sell,nav.bnav .bsell{color:var(--polish-ink) !important}
.bnav-sell.is-current,nav.bnav .bsell.is-current{color:var(--polish-active) !important}

/* Unread badge keeps its place next to the icon */
#bnav-msg-count{top:0 !important;right:6px !important;font-size:10px !important;line-height:16px !important}