@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary-glow: rgba(var(--primary-rgb),.15);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 16px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
  --shadow-hover: 0 20px 60px rgba(var(--primary-rgb),.18),0 8px 24px rgba(0,0,0,.08);
  --t: .22s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── NAV ── */
.mp-nav{
  background:var(--accent);
  padding:0 24px;height:62px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 24px rgba(0,0,0,.3);
}
/* --header-ink and not --primary-ink. Both are "white" in the light palette, so
   the two read the same there, but --primary-ink is the ink that goes ON a
   --primary fill and in the dark palette that fill is a light brown, making the
   ink dark — which put the wordmark in near-black on the dark navbar. Anything
   sitting on the header itself takes --header-ink, which is light in both. */
.mp-brand{
  display:flex;align-items:center;gap:10px;
  color:var(--header-ink);font-size:1.2rem;font-weight:800;letter-spacing:-.4px;
}
/* The real mark, in place of the paw glyph that stood in for it. width/height
   are on the tag as well so the bar does not reflow while the PNG loads; the
   file ships at 132px so it stays sharp on a 3x screen. */
.mp-brand-mark{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.mp-brand-icon{
  width:36px;height:36px;background:var(--primary);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.4);
}
.mp-brand-tag{
  font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--primary-strong);background:rgba(var(--primary-rgb),.12);
  padding:2px 7px;border-radius:4px;
}
.mp-nav-links{display:flex;align-items:center;gap:4px}
.mp-nav-links a{
  color:rgba(255,255,255,.7);padding:7px 14px;border-radius:8px;
  font-size:.88rem;font-weight:500;transition:var(--t);
  display:flex;align-items:center;gap:6px;
}
.mp-nav-links a i{font-size:.85rem;width:16px;text-align:center}
.mp-nav-links a:hover{color:var(--header-ink);background:rgba(255,255,255,.08)}
.mp-nav-links .btn-post{
  background:var(--primary);color:var(--primary-ink);font-weight:700;
  padding:8px 18px;border-radius:10px;margin-left:6px;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.35);transition:var(--t);
}
.mp-nav-links .btn-post:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(var(--primary-rgb),.45)}

/* ── SEARCH LINK (navbar) ──
   The navbar's search *box* is gone: universal search is a home-page feature now,
   with a full-width box and room for its suggestion list, and the marketplace's
   own keyword field moved into the marketplace filter bar. What is left up here
   is a link to /search/, so the other pages still have one click to it. It takes
   the plain .mp-nav-links <a> styling; the rule below only lifts the magnifier so
   it reads as a search affordance rather than one more word in the row. */
.mp-nav-search-link > i{opacity:.85}

/* ── DROPDOWN ── */
.mp-dropdown{position:relative}
.mp-dropdown-toggle{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;color:rgba(255,255,255,.7);
  padding:7px 14px;border-radius:8px;
  font-size:.88rem;font-weight:500;cursor:pointer;
  font-family:'Inter',sans-serif;transition:var(--t);
}
.mp-dropdown-toggle i{font-size:.85rem;width:16px;text-align:center}
.mp-dropdown-toggle .mp-dd-arrow{font-size:.6rem;margin-left:2px;transition:transform var(--t)}
.mp-dropdown-toggle:hover,.mp-dropdown-toggle.active{color:var(--header-ink);background:rgba(255,255,255,.08)}
.mp-dropdown-toggle.active .mp-dd-arrow{transform:rotate(180deg)}
.mp-dropdown-menu{
  display:none;position:absolute;top:100%;left:0;min-width:200px;
  background:var(--accent);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:6px;margin-top:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:300;
}
.mp-dropdown-menu.open{display:block}
.mp-dropdown-menu a{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:8px;
  color:rgba(255,255,255,.7);font-size:.85rem;font-weight:500;
  white-space:nowrap;
}
.mp-dropdown-menu a i{font-size:.82rem;width:16px;text-align:center}
.mp-dropdown-menu a:hover{color:var(--header-ink);background:rgba(255,255,255,.08)}
.mp-dd-divider{height:1px;background:rgba(255,255,255,.08);margin:4px 8px}
.mp-dropdown-menu .logout-link{color:var(--bad-strong) !important}
.mp-dropdown-menu .logout-link:hover{background:rgba(var(--bad-rgb),.12);color:var(--bad-strong) !important}
.msg-link-dd{position:relative}
.msg-link-dd .msg-badge{top:6px;right:8px}
/* Under 640px the navbar links are hidden outright, not folded down. The phone's
   menu is the bottom bar's Menu button opening .sidebar-drawer (further down this
   file), which carries every one of these links. There used to be a .mp-hamburger
   here that unfolded this same list in place, which put two menu buttons on one
   screen; it and its bar-to-cross animation are gone.
   The two dropdown overrides stay: under 640px the only .mp-dropdown left on the
   page is the drawer's language menu, and it has to open inline inside a panel
   that scrolls rather than float out of it. */
@media(max-width:640px){
  .mp-nav-links{display:none}
  .mp-dropdown-menu{position:static;box-shadow:none;margin-top:0;border:none;padding-left:8px}
  .mp-dropdown-toggle{width:100%;justify-content:flex-start}
}
/* ── THE PHONE'S NOTIFICATION BELL (navbar right, under 640px) ──
   Not a copy of .notif-btn: that one sits among the desktop nav links and inherits
   their colour, this one sits on the bare bar next to the brand. 44px square is the
   2.5.5 target size, and the badge is positioned against this button rather than
   against a .mobile-nav-mini-item, which is what it used to hang off. */
.mp-nav-notif{
  display:none;position:relative;margin-left:auto;
  width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  font-size:1.15rem;color:var(--header-ink);border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
.mp-nav-notif:active{background:rgba(255,255,255,.12)}
html.theme-light .mp-nav-notif{color:var(--ink)}
html.theme-light .mp-nav-notif:active{background:rgba(var(--primary-rgb),.10)}
.mp-nav-notif-badge{
  position:absolute;top:5px;right:5px;
  background:var(--bad);color:var(--primary-ink);
  font-size:.55rem;font-weight:800;
  min-width:15px;height:15px;border-radius:8px;padding:0 4px;
  display:none;align-items:center;justify-content:center;line-height:1;
}
.mp-nav-notif-badge.show{display:flex}
/* Separate query, and it has to come AFTER the block above rather than join the
   .mp-nav-links one: both rules are a single class, so the later one in the file
   wins, and with the order reversed the `display:none` default silently beat this.
   margin-left:auto is what puts the bell at the far right — .mp-nav-links is
   display:none at this width, so this is the last item in the flex row and the auto
   margin eats the space the links used to fill. */
@media(max-width:640px){
  .mp-nav-notif{display:flex}
}

/* ── HERO ── */
/* Same two corrections the .mph-hero comment further down spells out, applied to
   this band because it had the identical shape: --accent is the LIGHT brown under a
   dark palette, so the first half of the sweep was pale while `h1` below took
   --primary-ink (near-black) — near-black on pale brown, and then near-black on
   --header. And the --g-800 tail is a mid-brown ramp step, not a dark tone, so the
   band got warmer as it travelled instead of darker. --primary-soft → --header →
   --surface-2 is dark the whole way, which is what lets --header-ink read on it. */
.mp-hero{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--header) 50%,var(--surface-2) 100%);
  padding:56px 24px 72px;text-align:center;position:relative;overflow:hidden;
}
.mp-hero::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:40px;
  background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%);
}
.mp-hero-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(var(--primary-rgb),.15);border:1px solid rgba(var(--primary-rgb),.3);
  color:var(--primary-strong);font-size:.75rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:18px;
}
.mp-hero h1{
  /* The band above is dark chrome in the dark theme and `html.theme-light .mp-hero
     h1` repaints this --ink for the light one, so what is left for this rule to
     cover is text-on-dark — the --header-* family, not --primary-ink. --primary-ink
     is the label colour for a --primary FILL and in a dark palette that is #2b1d10,
     which is how the biggest heading on the page came to be near-black on
     near-black. */
  color:var(--header-ink);font-size:clamp(1.8rem,5vw,3rem);font-weight:900;
  letter-spacing:-.5px;line-height:1.15;margin-bottom:10px;
}
.mp-hero h1 em{color:var(--primary-strong);font-style:normal}
/* 55% white over the dark band is 2.6:1 for a 1rem line. --header-dim is the muted
   tier of the ink above, measured against dark chrome in both themes. */
.mp-hero p{color:var(--header-dim);font-size:1rem;margin-bottom:32px}
.mp-search-wrap{max-width:580px;margin:0 auto;position:relative}
.mp-search-bar{
  display:flex;background:var(--surface);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.3);
}
.mp-search-bar input{
  flex:1;border:none;outline:none;padding:15px 20px;
  font-size:.95rem;font-family:'Inter',sans-serif;color:var(--text);
}
.mp-search-bar button{
  background:var(--primary);color:var(--primary-ink);border:none;
  padding:0 26px;font-size:.9rem;font-weight:700;
  font-family:'Inter',sans-serif;transition:var(--t);white-space:nowrap;
}
.mp-search-bar button:hover{background:var(--primary-dark)}
.mp-search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);
  z-index:50;display:none;overflow:hidden;
}
.mp-search-results a{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 18px;font-size:.88rem;border-bottom:1px solid var(--border);
  transition:var(--t);
}
.mp-search-results a:last-child{border-bottom:none}
.mp-search-results a:hover{background:var(--primary-light)}
.mp-hero-stats{
  display:flex;justify-content:center;gap:32px;margin-top:28px;flex-wrap:wrap;
}
.mp-hero-stat{color:rgba(255,255,255,.6);font-size:.82rem;text-align:center}
.mp-hero-stat strong{display:block;color:var(--primary-ink);font-size:1.3rem;font-weight:800}

/* ── CATEGORY PILLS ── */
.mp-cats{
  display:flex;gap:6px;overflow-x:auto;padding:16px 24px;
  background:var(--surface);border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.mp-cats::-webkit-scrollbar{display:none}
.mp-cat-pill{
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 14px;border-radius:14px;min-width:68px;
  border:1.5px solid var(--border);background:var(--surface);
  font-size:.7rem;font-weight:600;color:var(--text2);
  white-space:nowrap;transition:var(--t);flex-shrink:0;text-align:center;
}
.mp-cat-pill:hover{border-color:var(--primary);color:var(--primary-dark);background:var(--primary-light)}
.mp-cat-pill.active{border-color:var(--primary);background:var(--primary);color:var(--primary-ink);box-shadow:0 2px 10px rgba(var(--primary-rgb),.3)}
.mp-cat-icon{font-size:1.5rem;line-height:1}

/* ── LAYOUT ── */
.mp-layout{display:flex;gap:24px;max-width:1280px;margin:0 auto;padding:28px 24px}
@media(max-width:900px){.mp-layout{flex-direction:column;padding:16px}}

/* ── SIDEBAR ── */
.mp-sidebar{
  width:268px;flex-shrink:0;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;height:fit-content;position:sticky;top:78px;
}
@media(max-width:900px){.mp-sidebar{width:100%;position:static}}
.mp-sidebar-title{font-size:1rem;font-weight:800;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.mp-sidebar-title a{font-size:.78rem;font-weight:500;color:var(--primary-strong)}
.mp-section-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:18px 0 10px}
.mp-section-label:first-of-type{margin-top:0}

.mp-nearme-btn{
  width:100%;padding:10px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:var(--primary-ink);font-size:.88rem;font-weight:700;font-family:'Inter',sans-serif;
  cursor:pointer;transition:var(--t);display:flex;align-items:center;justify-content:center;gap:6px;
}
.mp-nearme-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(var(--primary-rgb),.4)}
.mp-nearme-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}
.mp-loc-status{margin-top:6px;min-height:18px}
.mp-loc-detected{font-size:.75rem;color:var(--primary-strong);font-weight:600}
.mp-radius-notice{
  background:var(--primary-light);border:1px solid rgba(var(--primary-rgb),.3);
  border-radius:10px;padding:10px 14px;font-size:.82rem;color:var(--primary-dark);
  margin-bottom:16px;font-weight:500;
}

.mp-loc-input{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  border:1.5px solid var(--border);border-radius:10px;transition:var(--t);
}
.mp-loc-input:focus-within{border-color:var(--primary)}
/* Three fields that named a border and a font but never an ink. A text control
   does not inherit `color` — the UA hands it `fieldtext`, which is near-black
   whatever the page is doing — so the address the seller types, an extra
   attribute row and a blog comment were all near-black on the dark surface. They
   pass now because the ink is stated: --ink is 13.8:1 on --surface dark. The
   placeholder keeps the dimmer role so an empty field still reads as empty. */
.mp-loc-input input{border:none;outline:none;flex:1;font-size:.85rem;font-family:'Inter',sans-serif;background:transparent;color:var(--ink)}
.mp-loc-input input::placeholder,.mp-attr-row input::placeholder,.mp-comment-form textarea::placeholder{color:var(--ink-3)}
/* "📍 Detect My Location". marketplace/_location_picker.html owns how this button
   looks — a full-width filled --primary bar with --primary-ink on it — and what is
   left here is the icon-only version that came before it. The colour statement stays,
   because it is the correct ink role for a bare glyph and it costs nothing under the
   partial's own `color`; the two properties that belonged to a lone 📍 are gone.
   opacity:.6 was the whole problem: the partial overrides colour and background but
   never opacity, so the filled button faded label AND fill together, and white
   --primary-ink at .6 over a washed --primary measured 1.73:1 — the last opacity
   failure on the site, and the one that survived making the busy state fill darker
   instead of fade, because it was never the busy state doing it. scale(1.15) on a
   100%-wide bar also pushed it out of the form column. Hover now lives in the
   partial, next to the fill it changes. */
.mp-loc-btn{background:none;border:none;color:var(--ink);font-size:.95rem;padding:0;line-height:1;transition:var(--t)}

.mp-slider-wrap{margin-top:4px}
.mp-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.82rem;color:var(--text2)}
.mp-slider-header strong{color:var(--primary-strong);font-weight:700;font-size:.9rem}
input[type=range].mp-range{
  width:100%;-webkit-appearance:none;height:5px;border-radius:3px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--primary) 0%,var(--primary-strong) 10%,var(--border) 10%);
}
input[type=range].mp-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--primary);border:2.5px solid var(--surface);
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.4);cursor:pointer;transition:var(--t);
}
input[type=range].mp-range::-webkit-slider-thumb:hover{transform:scale(1.2)}
.mp-range-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-top:4px}

.mp-price-row{display:flex;gap:8px;margin-top:6px}
.mp-price-row input{
  flex:1;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;
  font-size:.82rem;font-family:'Inter',sans-serif;outline:none;transition:var(--t);
}
.mp-price-row input:focus{border-color:var(--primary)}

.mp-check{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.85rem;color:var(--text2);cursor:pointer}
.mp-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}

.mp-apply{
  width:100%;margin-top:18px;padding:11px;
  background:var(--accent);color:var(--primary-ink);border:none;border-radius:10px;
  font-size:.9rem;font-weight:700;font-family:'Inter',sans-serif;transition:var(--t);
}
.mp-apply:hover{background:var(--header);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.2)}

/* ── CONTENT AREA ── */
.mp-content{flex:1;min-width:0}
.mp-content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.mp-content-header h2{font-size:1.1rem;font-weight:800}
.mp-content-header .sub{font-size:.8rem;color:var(--muted);margin-top:2px}
.mp-sort{
  padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:.82rem;font-family:'Inter',sans-serif;outline:none;
  background:var(--surface);color:var(--text);cursor:pointer;
}

/* ── CARDS ── */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
@media(max-width:640px){.mp-grid{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:400px){.mp-grid{grid-template-columns:1fr}}

.mp-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:var(--t);animation:fadeUp .35s ease both;
}
.mp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.2)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.mp-card:nth-child(1){animation-delay:.04s}.mp-card:nth-child(2){animation-delay:.08s}
.mp-card:nth-child(3){animation-delay:.12s}.mp-card:nth-child(4){animation-delay:.16s}
.mp-card:nth-child(5){animation-delay:.20s}.mp-card:nth-child(6){animation-delay:.24s}

.mp-card-img{position:relative;height:190px;overflow:hidden;background:var(--surface2)}
.mp-card-img img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.mp-card:hover .mp-card-img img{transform:scale(1.07)}
.mp-no-img{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-size:2.4rem;gap:6px}
.mp-no-img span{font-size:.75rem;font-weight:500}
.mp-card-badges{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap}
.mp-badge{padding:3px 9px;border-radius:50px;font-size:.68rem;font-weight:700;letter-spacing:.3px}
.mp-badge.bulk{background:rgba(var(--primary-rgb),.9);color:var(--primary-ink)}
/* .single and .sold are the two badges whose ground is a fixed literal rather
   than a palette token, so --primary-ink — which inverts with the theme — could
   never read on both. Indigo #6366f1 and grey #6b7280 are mid-tones: near-black
   ink measured 3.25 and 2.88 in dark, white ink 3.79 and 3.61 in light, i.e. it
   failed whichever way round it landed. Darkening both grounds and fixing the ink
   to --header-ink (light in either palette) puts them past 7:1 in both themes.
   .bulk and .legal keep --primary-ink because their grounds ARE tokens
   (--primary, --ok) and invert in step with it. */
.mp-badge.single{background:rgba(67,56,202,.92);color:var(--header-ink)}
/* .legal drops the .9 alpha: --ok at .9 over a pale card composites to
   rgb(42,138,78), where --primary-ink (white in light) is 4.34 — under 4.5 by a
   hair, and the alpha bought nothing since the badge sits on a flat card, not a
   photo. Opaque --ok-strong carries white past 7:1 in both themes. */
.mp-badge.legal{background:var(--ok-strong);color:var(--primary-ink)}
.mp-badge.sold{background:rgba(55,65,81,.92);color:var(--header-ink)}
.mp-card-save{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  background:rgba(255,255,255,.92);border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  transition:var(--t);backdrop-filter:blur(6px);
}
.mp-card-save:hover{transform:scale(1.15);background:var(--surface)}
.mp-card-save.saved{color:var(--bad-strong)}

/* ── CARD BODY ── */
.mp-card-body{padding:14px}
.mp-card-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--primary-strong);margin-bottom:5px}
.mp-card-title{font-size:.95rem;font-weight:700;line-height:1.3;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-card-desc{font-size:.78rem;color:var(--text2);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.mp-chip{background:var(--surface2);border-radius:5px;padding:2px 7px;font-size:.68rem;color:var(--text2);font-weight:500}
.mp-chip b{color:var(--text)}
.mp-card-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}
.mp-price{font-size:1.1rem;font-weight:800;color:var(--accent-ink)}
.mp-price small{font-size:.68rem;font-weight:500;color:var(--muted);display:block}
.mp-card-loc{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:3px}
.mp-view-btn{
  padding:7px 14px;background:var(--primary);color:var(--primary-ink);border-radius:8px;
  font-size:.78rem;font-weight:700;transition:var(--t);white-space:nowrap;
}
.mp-view-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}

/* ── PAGINATION ── */
.mp-pagination{display:flex;gap:8px;justify-content:center;margin-top:32px;align-items:center}
.mp-pagination a,.mp-pagination span{padding:8px 16px;border-radius:9px;font-size:.85rem;font-weight:600;transition:var(--t)}
.mp-pagination a{background:var(--surface);color:var(--text);border:1.5px solid var(--border)}
.mp-pagination a:hover{border-color:var(--primary);color:var(--primary-strong)}
.mp-pagination span{background:var(--primary);color:var(--primary-ink);border:1.5px solid var(--primary)}

/* ── EMPTY ── */
.mp-empty{text-align:center;padding:60px 20px;color:var(--muted);grid-column:1/-1}
.mp-empty .icon{font-size:3rem;margin-bottom:12px}
.mp-empty h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:6px}
.mp-empty a{color:var(--primary-strong)}

/* ── DETAIL ── */
.mp-detail-wrap{max-width:1100px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
@media(max-width:900px){.mp-detail-wrap{grid-template-columns:1fr;padding:16px}}

.mp-gallery{border-radius:var(--radius);overflow:hidden;background:var(--surface2);box-shadow:var(--shadow)}
.mp-gallery-main{height:360px;overflow:hidden;cursor:zoom-in}
.mp-gallery-main img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.mp-gallery-main:hover img{transform:scale(1.04)}
.mp-gallery-thumbs{display:flex;gap:8px;padding:10px 12px;background:var(--surface);border-top:1px solid var(--border)}
.mp-gallery-thumbs img{width:68px;height:52px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;opacity:.65;transition:var(--t)}
.mp-gallery-thumbs img.active,.mp-gallery-thumbs img:hover{border-color:var(--primary);opacity:1}

.mp-detail-card{background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-top:20px}
.mp-breadcrumb{font-size:.75rem;color:var(--muted);margin-bottom:12px}
.mp-breadcrumb a{color:var(--primary-strong)}
.mp-detail-card h1{font-size:1.5rem;font-weight:900;line-height:1.25;margin-bottom:10px}
.mp-detail-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
/* --primary-soft and not --accent for the first stop. The box used to sweep
   accent → header, and in the dark palette the accent is a LIGHT brown, so the
   sweep ran light-to-black: no single ink was readable across it (dark ink died
   on the header end, light ink on the accent end). --primary-soft is the dark
   tint of the same hue, so the box keeps its brand colour, stays dark end to
   end, and everything in it can take --header-ink. The light theme replaces
   this gradient outright further down. */
.mp-price-box{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--header) 100%);
  border:1px solid rgba(var(--primary-rgb),.35);
  border-radius:12px;padding:18px 20px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.mp-price-box .amount{font-size:2rem;font-weight:900;color:var(--header-ink)}
.mp-price-box .per-unit{font-size:.8rem;color:var(--ink-3);margin-top:2px}
.mp-price-box .loc-info{text-align:right;font-size:.8rem;color:var(--ink-3);line-height:1.6}
.mp-detail-desc{font-size:.92rem;line-height:1.75;color:var(--text2);margin-bottom:20px}
.mp-specs-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:12px}
.mp-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.mp-specs-grid{grid-template-columns:1fr}}
.mp-spec-item{background:var(--surface2);border-radius:10px;padding:12px 14px;border-left:3px solid var(--primary)}
.mp-spec-item .key{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:3px}
.mp-spec-item .val{font-size:.9rem;font-weight:700;color:var(--text)}

/* ── SELLER CARD ── */
.mp-seller-card{background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:14px}
.mp-seller-card h3{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px}
.mp-seller-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mp-avatar{width:46px;height:46px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:var(--primary-dark);flex-shrink:0}
.mp-seller-name{font-weight:700;font-size:.92rem}
.mp-seller-since{font-size:.75rem;color:var(--muted)}
.mp-contact-btn{
  width:100%;padding:12px;background:var(--accent);color:var(--primary-ink);border:none;border-radius:10px;
  font-size:.9rem;font-weight:700;font-family:'Inter',sans-serif;transition:var(--t);
  display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
}
.mp-contact-btn:hover{background:var(--header);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.2)}

.mp-meta-card{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.mp-meta-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.mp-meta-row:last-child{border-bottom:none}
.mp-meta-row .lbl{color:var(--muted)}
.mp-meta-row .val{font-weight:600}
.mp-owner-actions{display:flex;gap:8px;margin-top:12px}
.mp-owner-actions a,.mp-owner-actions button{
  flex:1;padding:10px;border-radius:9px;font-size:.82rem;font-weight:700;
  text-align:center;font-family:'Inter',sans-serif;transition:var(--t);border:none;cursor:pointer;
}
.mp-owner-actions a{background:var(--primary-light);color:var(--primary-dark)}
/* --g-200 is a step on the theme-independent accent ramp, so this hover painted
   #f8e2cd under --primary-strong text in the dark theme too — 2.00:1. --surface-2
   is the raised-surface token, and --primary-strong reads on it in both themes. */
.mp-owner-actions a:hover{background:var(--surface-2)}
/* --bad-strong, not --bad, on the --bad-soft wash: --bad measured 3.82 on it at
   13px (rgb(252,222,222) painted). --bad-strong is 5.12 light / 9.14 dark. */
.mp-owner-actions button{background:var(--bad-soft);color:var(--bad-strong)}
.mp-owner-actions button:hover{background:var(--bad-soft-2)}

/* ── FORMS ── */
.mp-form-wrap{max-width:680px;margin:32px auto;padding:0 16px}
.mp-form-card{background:var(--surface);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)}
.mp-form-card h2{font-size:1.4rem;font-weight:900;margin-bottom:6px}
.mp-form-card .sub{font-size:.85rem;color:var(--muted);margin-bottom:24px}
.mp-field{margin-bottom:16px}
.mp-field label{display:block;font-size:.8rem;font-weight:700;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.mp-field input,.mp-field select,.mp-field textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;
  font-size:.9rem;font-family:'Inter',sans-serif;color:var(--text);
  background:var(--surface);outline:none;transition:var(--t);
}
.mp-field input:focus,.mp-field select:focus,.mp-field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1)}
.mp-field textarea{min-height:90px;resize:vertical}
.mp-type-row{display:flex;gap:10px}
.mp-type-opt{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;transition:var(--t);text-align:center}
.mp-type-opt:has(input:checked){border-color:var(--primary);background:var(--primary-light)}
.mp-type-opt input{display:none}
.mp-type-opt .label{font-weight:700;font-size:.9rem}
.mp-type-opt .hint{font-size:.72rem;color:var(--muted);margin-top:2px}
.mp-bulk-fields{display:none;background:var(--surface2);border-radius:10px;padding:14px;margin-top:8px}
.mp-bulk-fields.show{display:block}
.mp-img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.mp-img-slot{border:1.5px dashed var(--border);border-radius:10px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--muted);cursor:pointer;transition:var(--t);overflow:hidden;position:relative}
.mp-img-slot:hover{border-color:var(--primary);color:var(--primary-strong)}
.mp-img-slot input{position:absolute;inset:0;opacity:0;cursor:pointer;display:none}
.mp-city-opt{padding:9px 14px;font-size:.85rem;cursor:pointer;border-bottom:1px solid var(--border);transition:var(--t)}
.mp-city-opt:last-child{border-bottom:none}
.mp-city-opt:hover{background:var(--primary-light);color:var(--primary-dark)}
.mp-attr-row{display:flex;gap:8px;margin-bottom:6px}
.mp-attr-row input{flex:1;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem;font-family:'Inter',sans-serif;outline:none;transition:var(--t);background:var(--surface);color:var(--ink)}
.mp-attr-row input:focus{border-color:var(--primary)}
.mp-add-attr{background:none;border:1.5px dashed var(--border);color:var(--text2);padding:7px 14px;border-radius:8px;font-size:.8rem;font-weight:600;transition:var(--t)}
.mp-add-attr:hover{border-color:var(--primary);color:var(--primary-strong)}
.mp-terms{display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--surface2);border-radius:10px;margin-top:16px;font-size:.82rem;color:var(--text2)}
.mp-terms input{margin-top:2px;accent-color:var(--primary)}
.mp-submit{width:100%;margin-top:20px;padding:13px;background:var(--accent);color:var(--primary-ink);border:none;border-radius:12px;font-size:.95rem;font-weight:800;font-family:'Inter',sans-serif;transition:var(--t)}
.mp-submit:hover{background:var(--header);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.mp-error-box{background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad-strong);padding:11px 14px;border-radius:10px;font-size:.85rem;margin-bottom:16px}

/* ── MY ADS TABLE ── */
.mp-my-wrap{max-width:1000px;margin:32px auto;padding:0 16px}
.mp-my-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.mp-my-header h2{font-size:1.3rem;font-weight:900}
.mp-table-wrap{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.mp-table{width:100%;border-collapse:collapse}
.mp-table th{background:var(--accent);color:var(--primary-ink);padding:11px 14px;text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.mp-table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:.85rem;vertical-align:middle}
.mp-table tr:last-child td{border-bottom:none}
.mp-table tr:hover td{background:var(--surface2)}
.mp-tbl-actions{display:flex;gap:6px;align-items:center}
.mp-tbl-actions a,.mp-tbl-actions button{padding:5px 11px;border-radius:7px;font-size:.75rem;font-weight:700;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:var(--t)}
.mp-tbl-actions a{background:var(--primary-light);color:var(--primary-dark)}
.mp-tbl-actions .btn-toggle{background:var(--ok-soft);color:var(--ok-strong)}
.mp-tbl-actions .btn-del{background:var(--bad-soft);color:var(--bad-strong)}
@media(max-width:640px){
  .mp-table thead{display:none}
  .mp-table tr{display:block;border-bottom:1px solid var(--border);padding:10px 0}
  .mp-table td{display:flex;justify-content:space-between;padding:5px 14px;border:none;font-size:.82rem}
  .mp-table td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.72rem}
}

/* ── FLASH MESSAGES ──
   Django's messages, rendered in base.html. Coloured off the theme tokens rather
   than fixed greens and reds so they hold up in both palettes; the tint is the
   status colour at low alpha over the page's own surface. */
.mp-flash{max-width:1200px;margin:14px auto 0;padding:0 16px;display:flex;flex-direction:column;gap:8px}
.mp-flash-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-left:4px solid var(--muted);
  border-radius:var(--radius-sm);padding:11px 14px;font-size:.88rem;
  box-shadow:var(--shadow-sm);
}
.mp-flash-x{
  background:none;border:0;color:var(--muted);font-size:1.15rem;line-height:1;
  padding:0 2px;opacity:.7;transition:var(--t);
}
.mp-flash-x:hover{opacity:1}
.mp-flash-success{border-left-color:#2e9e5b;background:linear-gradient(0deg,rgba(46,158,91,.08),rgba(46,158,91,.08)),var(--surface)}
.mp-flash-info{border-left-color:var(--accent)}
.mp-flash-warning{border-left-color:#d98a1f;background:linear-gradient(0deg,rgba(217,138,31,.08),rgba(217,138,31,.08)),var(--surface)}
.mp-flash-error,.mp-flash-danger{border-left-color:#d3452f;background:linear-gradient(0deg,rgba(211,69,47,.08),rgba(211,69,47,.08)),var(--surface)}
@media(max-width:600px){.mp-flash{margin-top:10px;padding:0 12px}.mp-flash-item{font-size:.82rem}}

/* ── TOAST ── */
.mp-toast{
  position:fixed;bottom:calc(20px + var(--asss-cookie-bar,0px));right:20px;
  background:var(--accent);color:var(--primary-ink);
  padding:11px 18px;border-radius:10px;font-size:.85rem;font-weight:500;
  z-index:999;transform:translateY(60px);opacity:0;transition:.28s ease;pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.mp-toast.show{transform:translateY(0);opacity:1}
/* Same bottom corner as the bar, so it rides above it on phones — and above the
   cookie banner, whose z-index is a hundred times this one, so a "Saved" toast
   raised while the banner is still up would otherwise be painted over entirely. */
@media(max-width:640px){.mp-toast{bottom:calc(20px + var(--asss-bottom-bar,0px) + var(--asss-cookie-bar,0px))}}

/* ── MORE FROM SELLER ── */
.mp-more-section{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.mp-more-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:12px}
.mp-more-list{display:flex;flex-direction:column;gap:10px}
.mp-more-item{
  display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;
  border:1px solid var(--border);transition:var(--t);
  opacity:0;transform:translateX(16px);
}
.mp-more-item.visible{opacity:1;transform:translateX(0)}
.mp-more-item:hover{border-color:var(--primary);background:var(--primary-light)}
.mp-more-img{width:52px;height:44px;border-radius:8px;overflow:hidden;background:var(--surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.mp-more-img img{width:100%;height:100%;object-fit:cover}
.mp-more-name{font-size:.8rem;font-weight:600;line-height:1.3;color:var(--text)}
.mp-more-price{font-size:.82rem;font-weight:800;color:var(--primary-strong);margin-top:2px}

/* ── RELATED LISTINGS ── */
.mp-related{max-width:1100px;margin:0 auto;padding:0 24px 48px}
@media(max-width:900px){.mp-related{padding:0 16px 32px}}
.mp-related-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.mp-related-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--primary-strong);margin-bottom:4px}
.mp-related-header h2{font-size:1.2rem;font-weight:900}
.mp-related-all{font-size:.82rem;font-weight:700;color:var(--primary-strong);white-space:nowrap}
.mp-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
@media(max-width:640px){.mp-related-grid{grid-template-columns:1fr 1fr;gap:10px}}

.mp-rel-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);transition:var(--t);display:block;
  opacity:0;transform:translateY(20px);
}
.mp-rel-card.visible{opacity:1;transform:translateY(0)}
.mp-rel-card:nth-child(1){transition-delay:.05s}.mp-rel-card:nth-child(2){transition-delay:.1s}
.mp-rel-card:nth-child(3){transition-delay:.15s}.mp-rel-card:nth-child(4){transition-delay:.2s}
.mp-rel-card:nth-child(5){transition-delay:.25s}.mp-rel-card:nth-child(6){transition-delay:.3s}
.mp-rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.2)}
.mp-rel-img{position:relative;height:150px;overflow:hidden;background:var(--surface2)}
.mp-rel-img img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.mp-rel-card:hover .mp-rel-img img{transform:scale(1.07)}
.mp-rel-noimg{height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.mp-rel-body{padding:12px}
.mp-rel-cat{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--primary-strong);margin-bottom:4px}
.mp-rel-title{font-size:.82rem;font-weight:700;line-height:1.35;color:var(--text);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-rel-foot{display:flex;justify-content:space-between;align-items:center}
.mp-rel-price{font-size:.95rem;font-weight:800;color:var(--accent-ink)}
.mp-rel-loc{font-size:.68rem;color:var(--muted)}

/* ── COMMENTS ── */
.mp-comments-wrap{max-width:1100px;margin:0 auto;padding:0 24px 40px}
@media(max-width:900px){.mp-comments-wrap{padding:0 16px 28px}}
.mp-comments-header h3{font-size:1.1rem;font-weight:800;margin-bottom:18px}
.mp-comments-header span{color:var(--muted);font-weight:400}
.mp-comment-form{display:flex;gap:12px;margin-bottom:24px;align-items:flex-start}
.mp-comment-form textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-family:'Inter',sans-serif;font-size:.88rem;min-height:72px;outline:none;resize:vertical;transition:var(--t);background:var(--surface);color:var(--ink)}
.mp-comment-form textarea:focus{border-color:var(--primary)}
.mp-comment-form button{margin-top:8px;padding:9px 18px;background:var(--accent);color:var(--primary-ink);border:none;border-radius:9px;font-weight:700;font-size:.85rem;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;transition:var(--t)}
.mp-comment-form button:hover{background:var(--header)}
.mp-comment-login{padding:14px;background:var(--surface2);border-radius:10px;font-size:.85rem;margin-bottom:20px}
.mp-comment-login a{color:var(--primary-strong);font-weight:700}
.mp-comment-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:var(--primary-dark);flex-shrink:0}
.mp-comment-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);animation:fadeUp .3s ease both}
.mp-comment-item:last-child{border-bottom:none}
.mp-comment-body{flex:1}
.mp-comment-meta{font-size:.8rem;margin-bottom:4px}
.mp-comment-meta strong{font-weight:700}
.mp-comment-meta span{color:var(--muted);margin-left:8px}
.mp-comment-body p{font-size:.88rem;color:var(--text2);line-height:1.6}

/* ── SELLER PAGE ── */
.mp-seller-page{max-width:1100px;margin:0 auto;padding:28px 24px}
@media(max-width:900px){.mp-seller-page{padding:16px}}
.mp-sp-hero{background:var(--surface);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px;position:relative}
.mp-sp-avatar{width:80px;height:80px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:var(--primary-dark);flex-shrink:0;overflow:hidden;border:3px solid var(--primary)}
.mp-sp-avatar img{width:100%;height:100%;object-fit:cover}
.mp-sp-info{flex:1;min-width:200px}
.mp-sp-name{font-size:1.4rem;font-weight:900;line-height:1.2}
.mp-sp-handle{font-size:.8rem;font-weight:500;color:var(--muted);margin-left:8px}
.mp-sp-bio{font-size:.88rem;color:var(--text2);margin:6px 0 10px;line-height:1.6}
.mp-sp-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
.mp-sp-stats{display:flex;gap:20px;flex-shrink:0}
.mp-sp-stat{text-align:center}
.mp-sp-stat strong{display:block;font-size:1.4rem;font-weight:900;color:var(--accent-ink)}
.mp-sp-stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.mp-sp-edit-btn{position:absolute;top:20px;right:20px;padding:7px 14px;background:var(--surface2);border-radius:8px;font-size:.8rem;font-weight:700;color:var(--text2);transition:var(--t)}
.mp-sp-edit-btn:hover{background:var(--primary-light);color:var(--primary-dark)}
.mp-sp-rating-bar{background:var(--surface);border-radius:var(--radius);padding:14px 20px;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px}
.mp-sp-stars{display:flex;align-items:center;gap:4px;font-size:1.1rem}
.mp-star{color:var(--border);transition:var(--t)}
.mp-star.filled,.mp-star.active{color:var(--primary-strong)}
.mp-sp-body{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:900px){.mp-sp-body{grid-template-columns:1fr}}
.mp-sp-section{background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:16px}
.mp-sp-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:16px}
.mp-sp-map-card{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.mp-review-form{background:var(--surface2);border-radius:12px;padding:16px;margin-bottom:20px}
.mp-review-form-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px}
.mp-star-picker{display:flex;gap:4px;font-size:1.6rem;cursor:pointer;margin-bottom:4px}
.mp-pick-star{color:var(--border);transition:var(--t)}
.mp-pick-star.active{color:var(--primary-strong)}
.mp-review-card{padding:16px 0;border-bottom:1px solid var(--border);animation:fadeUp .3s ease both}
.mp-review-card:last-child{border-bottom:none}
.mp-review-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mp-review-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;color:var(--primary-dark);flex-shrink:0}
.mp-review-name{font-size:.88rem;font-weight:700}
.mp-review-date{font-size:.72rem;color:var(--muted)}
.mp-review-stars{margin-left:auto;font-size:.9rem}
.mp-review-text{font-size:.85rem;color:var(--text2);line-height:1.6}

/* ── MOBILE BOTTOM NAV ── */
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--border);
  padding:8px 6px;gap:4px;z-index:100;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
.mobile-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 4px;border-radius:10px;font-size:.65rem;font-weight:600;
  color:var(--text2);transition:var(--t);text-align:center;
}
.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--primary-strong)}
.mobile-nav-icon{font-size:1.25rem;line-height:1}
.mobile-nav-item-wrap{position:relative;flex:1;display:flex;justify-content:center}
.mobile-nav-btn{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;width:100%}
.mobile-nav-badge{
  position:absolute;top:2px;right:50%;transform:translateX(8px);
  background:var(--bad);color:var(--primary-ink);font-size:.55rem;font-weight:800;
  min-width:14px;height:14px;border-radius:7px;padding:0 4px;
  display:none;align-items:center;justify-content:center;
}
.mobile-nav-badge.show{display:flex}
@media(max-width:640px){
  .mobile-nav{display:flex}
  #mp-main{margin-bottom:70px}
}

/* ── NOTIFICATION PANEL ── */
.notif-panel{
  position:fixed;top:62px;right:16px;width:360px;max-height:480px;
  background:var(--header);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  z-index:300;display:none;overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
}
.notif-panel.open{display:block}
/* On a phone the panel now drops from the navbar bell instead of rising from the
   bottom bar, and 360px fixed does not fit a 360px viewport once right:16px is
   paid — the left edge went off screen. Pinned to both margins instead. */
@media(max-width:640px){
  .notif-panel{left:12px;right:12px;width:auto;max-height:70vh}
}
.notif-panel-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.1);
}
.notif-panel-hdr h3{font-size:1rem;font-weight:700;color:var(--header-ink)}
.notif-read-all{
  background:none;border:none;color:var(--accent-ink);font-size:.8rem;font-weight:600;
  cursor:pointer;
}
.notif-read-all:hover{text-decoration:underline}
.notif-list{max-height:400px;overflow-y:auto}
.notif-item{
  display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.1);
  cursor:pointer;transition:var(--t);
}
.notif-item:hover{background:rgba(255,255,255,0.08)}
.notif-item.unread{background:rgba(var(--primary-rgb),0.15)}
.notif-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);flex-shrink:0;margin-top:6px
}
.notif-dot.read{background:transparent}
.notif-body{flex:1;min-width:0}
.notif-title{
  font-size:.85rem;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:6px;color:var(--header-ink)
}
.notif-icon{font-size:1rem}
.notif-desc{font-size:.8rem;color:rgba(255,255,255,0.6);margin-bottom:4px}
.notif-time{font-size:.7rem;color:rgba(255,255,255,0.4)}
.notif-empty{padding:32px;text-align:center;color:rgba(255,255,255,0.5)}
.notif-error{padding:32px;text-align:center;color:var(--bad-strong)}
.notif-btn,.msg-link{position:relative;padding:8px 10px;cursor:pointer}
.notif-btn{
  background:none;border:none;color:rgba(255,255,255,.7);
  font-size:.88rem;border-radius:8px;transition:var(--t);
  display:flex;align-items:center;justify-content:center;
}
.notif-btn:hover{color:var(--header-ink);background:rgba(255,255,255,.08)}
.notif-btn i{font-size:.95rem}
.notif-badge,.msg-badge{
  position:absolute;top:2px;right:2px;background:var(--bad);color:var(--primary-ink);
  font-size:.55rem;font-weight:800;min-width:16px;height:16px;border-radius:8px;
  display:none;align-items:center;justify-content:center;padding:0 4px;
  z-index:10;
}
.notif-badge.show,.msg-badge.show{display:flex}

/* ══════════════════════════════════════════════════════════════
   REDESIGNED HOME PAGE STYLES — Gaongram Tech Private Limited
   ══════════════════════════════════════════════════════════════ */

/* ── CONTAINER ── */
.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.container{padding:0 16px}}

/* ── SECTION HEADER ── */
.section-header{text-align:center;margin-bottom:40px}
.section-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--primary-light);border:1px solid rgba(var(--primary-rgb),.25);
  color:var(--primary-dark);font-size:.72rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;
  padding:5px 14px;border-radius:50px;margin-bottom:14px;
}
.section-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:-.3px;color:var(--text);margin-bottom:8px}
.section-title .text-primary{color:var(--primary-strong)}
.section-desc{font-size:.92rem;color:var(--text2);max-width:520px;margin:0 auto}
.section-cta{text-align:center;margin-top:32px}
.btn-outline{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 24px;border:2px solid var(--primary);border-radius:10px;
  color:var(--primary-strong);font-size:.88rem;font-weight:700;
  transition:var(--t);background:transparent;
}
.btn-outline:hover{background:var(--primary);color:var(--primary-ink);transform:translateY(-2px);box-shadow:0 4px 16px rgba(var(--primary-rgb),.3)}
.btn-outline-light{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 24px;border:2px solid rgba(255,255,255,.4);border-radius:10px;
  color:var(--primary-ink);font-size:.88rem;font-weight:700;
  transition:var(--t);background:transparent;
}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:var(--surface);transform:translateY(-2px)}

/* ── HERO SECTION ── */
/* Dark, the whole way across — see the .mp-hero comment above for why --accent as a
   first stop and --g-800 as a tail both worked against the ink sitting on them. */
.hero-section{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--header) 40%,var(--surface-2) 100%);
  padding:80px 24px 90px;text-align:center;position:relative;overflow:hidden;
}
.hero-section::before{
  content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.hero-section::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:40px;
  background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%);
}
.hero-overlay{display:none}
.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(var(--primary-rgb),.15);border:1px solid rgba(var(--primary-rgb),.3);
  color:var(--primary-strong);font-size:.75rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:6px 16px;border-radius:50px;margin-bottom:20px;
}
.badge-icon{font-size:1rem}
.hero-title{
  /* --header-ink, not --primary-ink: see .mp-hero h1. The light theme is covered by
     `html.theme-light .hero-section h1`, so this rule only ever paints on the dark
     band above — except on /Blog, whose template redefines .hero-section as a flat
     --primary fill, where near-white also reads (4.9:1 light, 3.3:1 dark). */
  color:var(--header-ink);font-size:clamp(1.8rem,5vw,3.2rem);font-weight:900;
  letter-spacing:-.8px;line-height:1.15;margin-bottom:16px;
}
.hero-highlight{
  color:var(--primary-strong);position:relative;
  background:linear-gradient(180deg,transparent 60%,rgba(var(--primary-rgb),.2) 60%);
  padding:0 4px;
}
/* Was a literal white at 55% alpha (1.96:1 on /Blog), then --primary-ink while the
   band was read as a --primary fill. The band is dark chrome now, so this is the
   muted tier of the ink above it; the template still dims the line with
   opacity:0.95, so no alpha is needed here on top of that. */
.hero-subtitle{
  color:var(--header-dim);font-size:1.05rem;line-height:1.7;
  max-width:600px;margin:0 auto 32px;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;background:var(--primary);color:var(--primary-ink);
  border-radius:12px;font-size:.95rem;font-weight:700;
  transition:var(--t);box-shadow:0 4px 20px rgba(var(--primary-rgb),.35);
}
.btn-hero-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(var(--primary-rgb),.45)}
.btn-hero-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;background:rgba(255,255,255,.08);color:var(--primary-ink);
  border-radius:12px;font-size:.95rem;font-weight:600;
  border:1.5px solid rgba(255,255,255,.15);transition:var(--t);
}
.btn-hero-secondary:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

/* Hero Stats */
.hero-stats{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}
.hero-stat-item{text-align:center;padding:0 28px}
.hero-stat-number{color:var(--primary-ink);font-size:1.8rem;font-weight:900;letter-spacing:-.5px}
.hero-stat-label{color:rgba(255,255,255,.5);font-size:.78rem;font-weight:500;margin-top:4px}
.hero-stat-divider{width:1px;height:40px;background:rgba(255,255,255,.12)}
@media(max-width:640px){
  .hero-section{padding:48px 16px 64px}
  .hero-stats{gap:16px}
  .hero-stat-item{padding:0 16px}
  .hero-stat-divider{display:none}
  .hero-stat-number{font-size:1.4rem}
}

/* ── CATEGORY SHOWCASE ── */
.category-showcase{padding:64px 0;background:var(--surface)}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.category-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:480px){.category-grid{grid-template-columns:1fr 1fr;gap:10px}}
.category-card{
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:24px 18px;text-align:center;transition:var(--t);display:block;
}
.category-card:hover{
  transform:translateY(-4px);border-color:var(--primary);
  box-shadow:0 8px 30px rgba(var(--primary-rgb),.12);background:var(--primary-light);
}
.category-icon{font-size:2.4rem;margin-bottom:10px;line-height:1}
.category-name{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:4px}
.category-count{font-size:.75rem;color:var(--muted)}

/* ── FEATURED / RECENT LISTINGS GRID ── */
.featured-section,.recent-section{padding:64px 0;background:var(--bg)}
.recent-section{background:var(--surface)}
.listings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.listings-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.listings-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:480px){.listings-grid{grid-template-columns:1fr;gap:12px}}

.listing-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:var(--t);animation:fadeUp .35s ease both;
}
.listing-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.2)}
.listing-card-link{display:block;color:inherit}
.listing-card-image{position:relative;height:200px;overflow:hidden;background:var(--surface2)}
.listing-card-image img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.listing-card:hover .listing-card-image img{transform:scale(1.07)}
.listing-card-placeholder{
  height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.listing-badge-featured{
  position:absolute;top:10px;left:10px;
  background:linear-gradient(135deg,var(--primary-bright),var(--primary));color:var(--primary-ink);
  padding:4px 10px;border-radius:50px;font-size:.68rem;font-weight:700;
}
.listing-badge-new{
  position:absolute;top:10px;left:10px;
  background:linear-gradient(135deg,var(--ok),var(--ok-strong));color:var(--primary-ink);
  padding:4px 10px;border-radius:50px;font-size:.68rem;font-weight:700;
}
.listing-badge-category{
  position:absolute;bottom:10px;left:10px;
  /* Same trap as .mph-card-dist-badge below: --header is dark chrome in both
     palettes, so a ground built from --header-rgb never flips and the ink must not
     either. --primary-ink is near-black under the dark palette, which put the
     category on every listing card at ~2.9:1. --header-ink is the ink that belongs
     on chrome-dark. */
  background:rgba(var(--header-rgb),.8);color:var(--header-ink);
  padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:600;
}
.listing-card-body{padding:14px}
.listing-card-title{
  font-size:.92rem;font-weight:700;line-height:1.35;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--text);
}
.listing-card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.listing-card-location,.listing-card-views{
  display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--muted);
}
.listing-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--border)}
.listing-card-price{font-size:1.05rem;font-weight:800;color:var(--accent-ink)}
.listing-card-date{font-size:.7rem;color:var(--muted)}

/* ── TRENDING CATEGORIES ── */
.trending-section{padding:64px 0;background:var(--surface)}
.trending-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:800px;margin:0 auto}
@media(max-width:640px){.trending-grid{grid-template-columns:1fr}}
.trending-card{
  display:flex;align-items:center;gap:14px;
  background:var(--bg);border:1.5px solid var(--border);border-radius:12px;
  padding:16px 18px;transition:var(--t);
}
.trending-card:hover{
  border-color:var(--primary);background:var(--primary-light);
  transform:translateX(4px);box-shadow:0 4px 16px rgba(var(--primary-rgb),.1);
}
.trending-card-rank{
  font-size:1.1rem;font-weight:900;color:var(--primary-strong);
  min-width:36px;text-align:center;
}
.trending-card-info{flex:1;min-width:0}
.trending-card-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
.trending-card-count{font-size:.75rem;color:var(--muted)}
.trending-card-arrow{font-size:1.1rem;color:var(--muted);transition:var(--t)}
.trending-card:hover .trending-card-arrow{color:var(--primary-strong);transform:translateX(4px)}

/* ── HOW IT WORKS ── */
.how-it-works{padding:64px 0;background:var(--bg)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:480px){.steps-grid{grid-template-columns:1fr}}
.step-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 22px;text-align:center;position:relative;transition:var(--t);
}
.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-rgb),.15)}
.step-number{
  position:absolute;top:14px;right:16px;
  font-size:2.2rem;font-weight:900;color:rgba(var(--primary-rgb),.08);
  line-height:1;
}
.step-icon-wrapper{
  width:60px;height:60px;border-radius:16px;
  background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;transition:var(--t);
}
.step-card:hover .step-icon-wrapper{background:var(--primary);color:var(--primary-ink)}
.step-title{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:8px}
.step-desc{font-size:.82rem;color:var(--text2);line-height:1.6}

/* ── WHOLESALE PRODUCTS ── */
.wholesale-section{padding:64px 0;background:var(--surface)}
.wholesale-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.wholesale-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.wholesale-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:480px){.wholesale-grid{grid-template-columns:1fr}}
.wholesale-card{
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:var(--t);display:block;
}
.wholesale-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-hover);
  border-color:rgba(var(--primary-rgb),.2);
}
.wholesale-card-image{position:relative;height:180px;overflow:hidden;background:var(--surface2)}
.wholesale-card-image img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.wholesale-card:hover .wholesale-card-image img{transform:scale(1.07)}
.wholesale-card-placeholder{
  height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.wholesale-discount{
  position:absolute;top:10px;right:10px;
  background:var(--bad);color:var(--primary-ink);padding:4px 10px;
  border-radius:50px;font-size:.7rem;font-weight:700;
}
.wholesale-card-body{padding:14px}
.wholesale-card-title{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3}
.wholesale-card-pricing{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wholesale-price{font-size:1.05rem;font-weight:800;color:var(--accent-ink)}
.wholesale-mrp{font-size:.78rem;color:var(--muted);text-decoration:line-through}
.wholesale-stock{font-size:.72rem;color:var(--ok-strong);font-weight:600}

/* ── BLOG POSTS ── */
.blog-section{padding:64px 0;background:var(--bg)}
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:var(--t);
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-rgb),.15)}
.blog-card-link{display:block;color:inherit}
.blog-card-image{position:relative;height:180px;overflow:hidden;background:var(--surface2)}
.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.blog-card:hover .blog-card-image img{transform:scale(1.07)}
.blog-card-placeholder{
  height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.blog-card-type{
  position:absolute;bottom:10px;left:10px;
  background:var(--primary);color:var(--primary-ink);padding:3px 10px;
  border-radius:6px;font-size:.68rem;font-weight:700;
}
.blog-card-body{padding:16px}
.blog-card-title{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{display:flex;justify-content:space-between;align-items:center}
.blog-card-author{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text2)}
.blog-card-date{font-size:.72rem;color:var(--muted)}

/* ── AFFILIATE PRODUCTS ── */
.affiliate-section{padding:64px 0;background:var(--surface)}
.affiliate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1100px){.affiliate-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.affiliate-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:480px){.affiliate-grid{grid-template-columns:1fr}}
.affiliate-card{
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:var(--t);display:block;
}
.affiliate-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-hover);
  border-color:rgba(124,58,237,.3);
}
.affiliate-card-image{height:160px;overflow:hidden;background:var(--surface2)}
.affiliate-card-image img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.affiliate-card:hover .affiliate-card-image img{transform:scale(1.07)}
.affiliate-card-placeholder{
  height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);
}
.affiliate-card-body{padding:14px}
.affiliate-card-title{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.affiliate-card-price{font-size:1rem;font-weight:800;color:var(--accent-ink);display:block;margin-bottom:6px}
.affiliate-card-link{font-size:.78rem;font-weight:700;color:var(--accent2);transition:var(--t)}
.affiliate-card:hover .affiliate-card-link{color:#6d28d9}

/* ── TOP SELLERS ── */
.sellers-section{padding:64px 0;background:var(--bg)}
.sellers-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1100px){.sellers-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.sellers-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.seller-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 16px;text-align:center;transition:var(--t);
}
.seller-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-rgb),.15)}
.seller-card-header{position:relative;margin-bottom:12px}
.seller-avatar{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:3px solid var(--primary);margin:0 auto;
}
.seller-avatar-placeholder{
  width:64px;height:64px;border-radius:50%;
  background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:900;margin:0 auto;
  border:3px solid var(--primary);
}
.seller-rank{position:absolute;top:-4px;right:calc(50% - 42px);font-size:1.3rem}
.seller-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:4px}
.seller-location{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.72rem;color:var(--muted);margin-bottom:10px}
.seller-stats{display:flex;justify-content:center}
.seller-listings-count{
  background:var(--primary-light);color:var(--primary-dark);
  padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:700;
}

/* ── CTA SECTION ── */
.cta-section{
  padding:72px 0;background:linear-gradient(135deg,var(--accent) 0%,var(--header) 100%);
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;top:-30%;left:-10%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.15) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.cta-content{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto}
.cta-title{color:var(--primary-ink);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;letter-spacing:-.5px;margin-bottom:14px}
.cta-desc{color:rgba(255,255,255,.55);font-size:1rem;line-height:1.7;margin-bottom:28px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
.site-footer{
  background:var(--accent);color:var(--primary-ink);
  padding:56px 0 0;border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;gap:24px}}
.footer-logo{color:var(--primary-ink);font-size:1.3rem;font-weight:900;margin-bottom:12px;letter-spacing:-.3px}
.footer-tagline{font-size:.85rem;line-height:1.7;margin-bottom:12px}
.footer-company{font-size:.8rem;margin-bottom:16px}
.footer-company strong{color:var(--primary-strong)}
.footer-social{display:flex;gap:10px}
.social-link{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.06);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center;
  transition:var(--t);
}
.social-link:hover{background:var(--primary);color:var(--primary-ink);transform:translateY(-2px)}
.footer-heading{color:var(--primary-ink);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px}
.footer-links ul{list-style:none;padding:0}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:.85rem;color:var(--primary-ink);transition:var(--t)}
.footer-links a:hover{color:var(--primary-strong);padding-left:4px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px 0;text-align:center;font-size:.78rem;
}
.footer-bottom strong{color:var(--primary-strong)}

/* ══════════════════════════════════════════════════════════════
   MARKETPLACE LISTING PAGE — Gaongram Tech Private Limited
   mph- prefix: marketplace home (Animals & Agriculture only)
   ══════════════════════════════════════════════════════════════ */

/* ── CONTAINER ── */
.mph-container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.mph-container{padding:0 16px}}

/* ── BUTTONS ── */
.mph-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;border-radius:10px;font-size:.88rem;font-weight:700;
  font-family:'Inter',sans-serif;cursor:pointer;transition:var(--t);
  text-decoration:none;border:none;line-height:1.4;
}
.mph-btn-amber{
  background:var(--primary);color:var(--primary-ink);
  box-shadow:0 4px 16px rgba(var(--primary-rgb),.3);
}
.mph-btn-amber:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(var(--primary-rgb),.4)}
.mph-btn-outline{
  /* --primary-strong, not --primary: the light theme re-grounds this hero to a pale
     wash, and the button's own face measured rgb(246,216,192) there, where --primary
     reads 3.77 against the 4.5 a 14px label owes. --primary-strong is the step
     either side of --primary that flips with the theme — darker in light (5.28
     worst-palette), lighter in dark — so one token serves both. The border stays
     --primary: a 2px edge is not text and 1.4.11 asks 3.0 of it. */
  background:transparent;border:2px solid var(--primary);color:var(--primary-strong);
}
.mph-btn-outline:hover{background:var(--primary);color:var(--primary-ink);transform:translateY(-2px);box-shadow:0 4px 16px rgba(var(--primary-rgb),.3)}
/* "…-light" here means "for use on dark chrome", i.e. the hero and CTA bands.
   --primary-ink was wrong in both themes at once: near-black on the dark band
   under the dark palette (1.68:1), and white on the pale re-grounded band under
   the light palette (1.21:1). Base is now the ink for dark chrome, with a light
   override below at .theme-light for the pale band. */
.mph-btn-outline-light{
  background:transparent;border:2px solid rgba(255,255,255,.4);color:var(--header-ink);
}
.mph-btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:var(--surface);transform:translateY(-2px)}
.mph-btn-ghost{
  background:transparent;border:1.5px solid var(--border);color:var(--text2);
}
.mph-btn-ghost:hover{background:var(--surface2);border-color:var(--muted);color:var(--text)}
.mph-btn-sm{padding:7px 14px;font-size:.78rem;border-radius:8px}
.mph-btn-lg{padding:14px 30px;font-size:1rem;border-radius:12px}

/* ── AMBER TEXT ── */
.mph-text-amber{color:var(--primary-strong)}

/* ══════════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════════ */
/* The unprefixed rules in this file are the DARK-theme rules — everything below
   1888 re-does the hero and CTA for `html.theme-light`. So this sweep only ever
   paints under the dark palette, and its first stop was --accent (= --primary),
   which in a dark palette is the LIGHT brown. The first 40% of the hero was
   therefore a pale band, and the title on it took --primary-ink — the ink for a
   --primary fill, near-black under the dark palette. Near-black on pale brown at
   the top of the page, measured 1.11:1. --primary-soft is the dark tint of the
   same hue, so the whole sweep is now dark and light ink reads across all of it.

   The tail stop was --g-800 (#694f36 in brown), and that is a step on the
   theme-independent accent ramp — mid-brown, not dark. The homepage headline is a
   gradient clipped to text whose own tail is --a-600 (#a87f57): 2.06:1, accent on
   accent, and --ink-2 in the line under it managed 3.98. The band wants to get
   DARKER as it travels, not warmer, so the tail is --surface-2 — the raised-surface
   tone, dark in the dark theme by construction: --ink 11.5:1, --ink-2 7.45:1, and
   the headline's tail stop 3.85:1. */
.mph-hero{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--header) 40%,var(--surface-2) 100%);
  padding:80px 24px 90px;text-align:center;position:relative;overflow:hidden;
}
.mph-hero::before{
  content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.mph-hero::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:40px;
  background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%);
}
.mph-hero-overlay{display:none}
.mph-hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.mph-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(var(--primary-rgb),.15);border:1px solid rgba(var(--primary-rgb),.3);
  /* --primary-strong for the same reason as .mph-btn-outline above: its own 15%
     fill plus the pale light hero behind it measured rgb(228,204,180), where
     --primary is 3.30 at 12px. --primary-strong is 4.63 there and is the lighter
     end of the ramp in dark, so it also reads on the dark hero. */
  color:var(--primary-strong);font-size:.75rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:6px 16px;border-radius:50px;margin-bottom:20px;
}
/* --header-ink, not --primary-ink. The hero is dark chrome in the dark palette
   and the light palette re-grounds it at 1891, so the base ink has to be the ink
   for dark chrome — light in either palette — rather than the ink for a --primary
   fill, which inverts. The h1/p light overrides win on specificity, so the light
   theme is unaffected by both of these. */
.mph-hero-title{
  color:var(--header-ink);font-size:clamp(1.8rem,5vw,3.2rem);font-weight:900;
  letter-spacing:-.8px;line-height:1.15;margin-bottom:16px;
}
.mph-hero-sub{
  color:var(--ink-3);font-size:1.05rem;line-height:1.7;
  max-width:600px;margin:0 auto 32px;
}
.mph-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.mph-hero-stats{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}
.mph-hero-stat{text-align:center;padding:0 28px;position:relative}
.mph-hero-stat:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:40px;background:rgba(255,255,255,.12);
}
/* --ink and not --primary-ink: fx.css:245 lists .mph-hero-stat in its one
   card rule, so each stat block is painted background-color:var(--surface) —
   a surface, not a --primary fill. --primary-ink on a surface is near-black on
   near-black under the dark palette, which is what put every hero number at
   1.17:1. Same bug, same fix as .card__title in tips&trick.html. */
.mph-hero-stat-num{color:var(--ink);font-size:1.8rem;font-weight:900;letter-spacing:-.5px;display:block}
.mph-hero-stat-lbl{color:var(--ink-3);font-size:.78rem;font-weight:500;margin-top:4px;display:block}
@media(max-width:640px){
  .mph-hero{padding:48px 16px 64px}
  .mph-hero-stats{gap:16px}
  .mph-hero-stat{padding:0 16px}
  .mph-hero-stat:not(:last-child)::after{display:none}
  .mph-hero-stat-num{font-size:1.4rem}
}

/* ══════════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════════ */
.mph-filter-bar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:20px 0;position:sticky;top:60px;z-index:50;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.mph-filter-form{display:flex;flex-direction:column;gap:14px}
.mph-filter-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.mph-filter-row-loc{align-items:center}
.mph-filter-group{display:flex;flex-direction:column;gap:4px;min-width:120px}
.mph-filter-label{
  font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted);
}
.mph-filter-select,.mph-filter-input{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:.85rem;font-family:'Inter',sans-serif;outline:none;
  background:var(--bg);color:var(--text);transition:var(--t);
  min-width:130px;
}
.mph-filter-select:focus,.mph-filter-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.08)}
.mph-filter-sm{min-width:90px}
.mph-filter-sm .mph-filter-input{min-width:90px;width:100px}
/* The keyword box. Wider than the selects and allowed to take the slack in the
   row, because it is the only field in there someone types a phrase into. */
.mph-filter-lg{flex:1 1 240px;min-width:200px}
.mph-filter-lg .mph-filter-input{width:100%}
.mph-filter-locate{flex:1;min-width:220px}
.mph-filter-toggle{min-width:70px;align-items:center}
.mph-filter-radius{min-width:160px}
.mph-filter-actions{flex-direction:row;align-items:flex-end;gap:8px;margin-left:auto}
.mph-filter-range{
  width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:var(--border);border-radius:3px;outline:none;cursor:pointer;
}
.mph-filter-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--primary);cursor:pointer;
  box-shadow:0 2px 6px rgba(var(--primary-rgb),.3);
}
@media(max-width:768px){
  .mph-filter-bar{position:static;top:auto}
  .mph-filter-row{flex-direction:column;gap:10px}
  .mph-filter-group{min-width:100%}
  .mph-filter-select,.mph-filter-input{min-width:100%}
  .mph-filter-sm .mph-filter-input{width:100%}
  .mph-filter-actions{margin-left:0;width:100%}
  .mph-filter-actions .mph-btn{flex:1;justify-content:center}
}

/* ── LOCATE DISPLAY ── */
.mph-locate-display{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;background:var(--primary-light);
  border:1.5px solid rgba(var(--primary-rgb),.2);border-radius:8px;
  font-size:.85rem;
}
.mph-locate-icon{font-size:1rem}
.mph-locate-city{font-weight:700;color:var(--primary-dark)}
.mph-locate-country{color:var(--muted);font-size:.78rem}
.mph-locate-refresh{
  margin-left:auto;background:none;border:1px solid rgba(var(--primary-rgb),.3);
  color:var(--primary-dark);
  font-size:.74rem;font-weight:700;cursor:pointer;padding:3px 8px;border-radius:6px;
  transition:var(--t);white-space:nowrap;
}
.mph-locate-refresh:hover{background:rgba(var(--primary-rgb),.15)}
.mph-locate-refresh:disabled{opacity:.6;cursor:default}
/* Shown instead of the button once the browser has given a real fix: the
   distances on the page are then measured, not estimated from a city centroid,
   and that difference is worth stating. */
.mph-locate-exact{
  margin-left:auto;background:rgba(var(--primary-rgb),.15);color:var(--ok-strong);
  border:1px solid rgba(var(--primary-rgb),.3);
  font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:50px;
  letter-spacing:.4px;text-transform:uppercase;cursor:help;
}

/* ── TOGGLE SWITCH ── */
.mph-toggle-switch{
  position:relative;display:inline-block;width:48px;height:26px;
  cursor:pointer;
}
.mph-toggle-switch input{opacity:0;width:0;height:0}
.mph-toggle-slider{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--border);border-radius:26px;transition:var(--t);
}
.mph-toggle-slider::before{
  content:'';position:absolute;height:20px;width:20px;
  left:3px;bottom:3px;background:var(--surface);border-radius:50%;transition:var(--t);
}
.mph-toggle-switch input:checked + .mph-toggle-slider{background:var(--primary)}
.mph-toggle-switch input:checked + .mph-toggle-slider::before{transform:translateX(22px)}

/* ══════════════════════════════════════════════════════════════
   LISTINGS SECTION
   ══════════════════════════════════════════════════════════════ */
.mph-listings-section{padding:48px 0;background:var(--bg)}
.mph-listing-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.mph-grid-4col{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.mph-listing-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.mph-listing-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:480px){.mph-listing-grid{grid-template-columns:1fr;gap:12px}}

/* ── LISTING CARD ── */
.mph-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:var(--t);animation:fadeUp .35s ease both;
}
.mph-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.2)}
.mph-card-link{display:block;color:inherit;text-decoration:none}
.mph-card-img{position:relative;height:200px;overflow:hidden;background:var(--surface2)}
.mph-card-img img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.mph-card:hover .mph-card-img img{transform:scale(1.07)}
.mph-card-img-placeholder{
  height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.mph-card-cat-badge{
  position:absolute;bottom:10px;left:10px;
  padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:600;
  color:var(--primary-ink);
}
/* Opaque, not rgba(…, .85). These three badges float on a listing PHOTO, so the
   .85 was compositing over whatever the picture happened to be — and the worst
   case is not a dark picture, it is a bright one: --primary at .85 over white
   measures 3.81 for its own --primary-ink in the worst palette, against 4.5.
   Opaque --primary is the fill make_palette actually asserts --primary-ink on
   (5.10 worst), and the purple below is 5.70 opaque against 4.36 at .85. The
   photo showing through a label was never the point of these; the label is. */
.mph-badge-animals{background:var(--primary)}
.mph-badge-agri{background:var(--primary)}
.mph-card-dist-badge{
  /* Ground is rgba(--header-rgb,.82) — near-black in BOTH palettes, since
     --header is dark chrome either way. So the ink must be light either way;
     --primary-ink is near-black under the dark palette and put "📍 in India" at
     2.85:1 on 19 cards at once. .theme-light re-grounds this badge on --primary
     below, and that override carries its own ink. */
  position:absolute;top:10px;right:10px;
  background:rgba(var(--header-rgb),.82);color:var(--header-ink);
  padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:600;
  max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* A listing from outside the visitor's own country. Distinct colour rather than
   distinct wording alone, because "3,400 km" and "in Nepal" both land in this
   badge and only the colour is readable at a glance while scrolling. */
.mph-card-dist-foreign{background:#7c3aed}
.mph-card-type-badge{
  position:absolute;top:10px;left:10px;
  background:rgba(124,58,237,.85);color:var(--primary-ink);
  padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:600;
}
.mph-card-body{padding:14px}
.mph-card-title{
  font-size:.92rem;font-weight:700;line-height:1.35;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--text);
}
.mph-card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mph-card-loc,.mph-card-views{
  display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--muted);
}
/* Wraps, and the timestamp is pushed to the end rather than spaced evenly: the
   footer now holds up to four things (price, converted estimate, per-unit price,
   age) and space-between alone scattered them. */
.mph-card-footer{
  display:flex;justify-content:flex-start;align-items:baseline;
  flex-wrap:wrap;gap:2px 6px;
  padding-top:10px;border-top:1px solid var(--border);
}
.mph-card-price{font-size:1.05rem;font-weight:800;color:var(--accent-ink)}
/* The "≈ ₹15,700" beside a foreign price. Deliberately quieter than the price
   itself — it is an estimate at a static rate, and must never be mistaken for
   what the seller is asking. */
.mph-card-approx{
  font-size:.72rem;color:var(--muted);font-weight:600;
  white-space:nowrap;cursor:help;
}
.mph-card-unit{font-size:.72rem;color:var(--muted)}
.mph-card-time{font-size:.7rem;color:var(--muted);margin-left:auto}

/* ══════════════════════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════════════════════ */
.mph-section-hdr{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:28px;flex-wrap:wrap;gap:12px;
}
.mph-section-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--primary-light);border:1px solid rgba(var(--primary-rgb),.25);
  color:var(--primary-dark);font-size:.7rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;
  padding:4px 12px;border-radius:50px;margin-bottom:10px;
}
.mph-section-title{font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:900;letter-spacing:-.3px;color:var(--text)}
.mph-section-count{font-size:.82rem;color:var(--muted);font-weight:500;white-space:nowrap}
/* "Showing listings within about 50 km of Hazratganj, Lucknow" — the feed widens
   as the visitor scrolls, so it has to say how far out it has currently reached.
   Without this line a listing four cities away looks like a bug. */
.mph-section-scope{
  font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.45;
  max-width:62ch;
}
/* The cross-border / no-country notice: shown above the grid when the feed had
   to leave the visitor's own country (nothing listed there yet) or could not
   place them in one at all. Deliberately a callout, not a footnote — it is the
   honest answer to "why am I seeing listings from everywhere". Theme-safe: every
   colour is a token that both palettes define. */
.mph-scope-notice{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 18px;padding:13px 16px;border-radius:14px;
  background:var(--primary-soft);border:1px solid var(--line);
  color:var(--ink);
}
.mph-scope-notice-ico{font-size:1.35rem;line-height:1;flex:0 0 auto}
.mph-scope-notice-txt{font-size:.9rem;line-height:1.55}
.mph-scope-notice-link{color:var(--accent-ink);font-weight:700;white-space:nowrap;text-decoration:none}
.mph-scope-notice-link:hover{text-decoration:underline}
/* Injected mid-grid by the scroll when a batch comes from a wider ring than the
   one before it, so the jump in distance is announced where it happens rather
   than only in the header above. */
.mph-widen-note{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:6px 0;padding:9px 14px;
  background:var(--primary-light);border:1px dashed rgba(var(--primary-rgb),.35);
  border-radius:8px;font-size:.78rem;font-weight:600;color:var(--primary-dark);
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.mph-pagination{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin-top:36px;flex-wrap:wrap;
}
.mph-page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:.82rem;font-weight:600;color:var(--text2);
  background:var(--surface);transition:var(--t);text-decoration:none;
}
.mph-page-btn:hover{border-color:var(--primary);color:var(--primary-strong);background:var(--primary-light)}
.mph-page-active{
  background:var(--primary);color:var(--primary-ink);border-color:var(--primary);
  font-weight:700;
}
.mph-page-active:hover{background:var(--primary-dark);color:var(--primary-ink)}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════ */
.mph-empty{
  text-align:center;padding:64px 24px;
  background:var(--surface);border-radius:var(--radius);
  border:2px dashed var(--border);
}
.mph-empty-icon{font-size:3rem;margin-bottom:16px}
.mph-empty h3{font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:8px}
.mph-empty p{font-size:.9rem;color:var(--text2);margin-bottom:20px}

/* ══════════════════════════════════════════════════════════════
   FEATURED SECTION
   ══════════════════════════════════════════════════════════════ */
.mph-featured-section{padding:48px 0;background:var(--surface)}

/* ══════════════════════════════════════════════════════════════
   CATEGORY SHOWCASE
   ══════════════════════════════════════════════════════════════ */
.mph-cat-showcase{padding:56px 0;background:var(--bg)}
.mph-cat-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.mph-cat-grid-2{grid-template-columns:1fr;gap:16px}}
.mph-cat-hero-card{
  display:flex;gap:20px;align-items:center;
  padding:32px 28px;border-radius:var(--radius);
  border:2px solid var(--border);transition:var(--t);
  text-decoration:none;color:inherit;overflow:hidden;position:relative;
}
.mph-cat-hero-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mph-cat-animals{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.06),rgba(var(--primary-rgb),.02));
  border-color:rgba(var(--primary-rgb),.2);
}
.mph-cat-animals:hover{border-color:var(--primary);background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(var(--primary-rgb),.04))}
.mph-cat-agri{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.06),rgba(var(--primary-rgb),.02));
  border-color:rgba(var(--primary-rgb),.2);
}
.mph-cat-agri:hover{border-color:var(--ok);background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(var(--primary-rgb),.04))}
.mph-cat-hero-icon{font-size:3rem;flex-shrink:0;line-height:1}
.mph-cat-hero-content{flex:1;min-width:0}
.mph-cat-hero-content h3{font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:6px}
.mph-cat-hero-content p{font-size:.85rem;color:var(--text2);line-height:1.5;margin-bottom:10px}
.mph-cat-hero-count{
  display:inline-block;font-size:.78rem;font-weight:700;
  color:var(--primary-dark);background:var(--primary-light);
  padding:4px 12px;border-radius:50px;margin-bottom:8px;
}
.mph-cat-hero-link{
  display:block;font-size:.85rem;font-weight:700;color:var(--primary-strong);
  transition:var(--t);
}
.mph-cat-hero-card:hover .mph-cat-hero-link{transform:translateX(4px);display:inline-block}
@media(max-width:480px){
  .mph-cat-hero-card{flex-direction:column;text-align:center;padding:24px 18px}
  .mph-cat-hero-icon{font-size:2.5rem}
}

/* ══════════════════════════════════════════════════════════════
   TRENDING SUB-CATEGORIES
   ══════════════════════════════════════════════════════════════ */
.mph-trending-section{padding:56px 0;background:var(--surface)}
.mph-trending-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:800px;margin:0 auto}
@media(max-width:640px){.mph-trending-grid{grid-template-columns:1fr}}
.mph-trending-card{
  display:flex;align-items:center;gap:14px;
  background:var(--bg);border:1.5px solid var(--border);border-radius:12px;
  padding:16px 18px;transition:var(--t);text-decoration:none;color:inherit;
}
.mph-trending-card:hover{
  border-color:var(--primary);background:var(--primary-light);
  transform:translateX(4px);box-shadow:0 4px 16px rgba(var(--primary-rgb),.1);
}
.mph-trending-rank{
  font-size:1.1rem;font-weight:900;color:var(--primary-strong);
  min-width:36px;text-align:center;
}
.mph-trending-info{flex:1;min-width:0}
.mph-trending-name{font-size:.9rem;font-weight:700;color:var(--text);display:block;margin-bottom:2px}
.mph-trending-count{font-size:.75rem;color:var(--muted)}
.mph-trending-arrow{font-size:1.1rem;color:var(--muted);transition:var(--t)}
.mph-trending-card:hover .mph-trending-arrow{color:var(--primary-strong);transform:translateX(4px)}

/* ══════════════════════════════════════════════════════════════
   TOP SELLERS
   ══════════════════════════════════════════════════════════════ */
.mph-sellers-section{padding:56px 0;background:var(--bg)}
.mph-sellers-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1100px){.mph-sellers-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mph-sellers-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.mph-seller-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 16px;text-align:center;transition:var(--t);
}
.mph-seller-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-rgb),.15)}
.mph-seller-avatar{
  position:relative;width:64px;height:64px;margin:0 auto 12px;
}
.mph-seller-avatar img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:3px solid var(--primary);
}
.mph-seller-initial{
  width:64px;height:64px;border-radius:50%;
  background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:900;
  border:3px solid var(--primary);
}
.mph-seller-rank{position:absolute;top:-6px;right:-6px;font-size:1.2rem}
.mph-seller-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:4px}
.mph-seller-loc{font-size:.72rem;color:var(--muted);margin-bottom:10px}
.mph-seller-count{
  display:inline-block;background:var(--primary-light);color:var(--primary-dark);
  padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:700;
}

/* ══════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════ */
.mph-cta-section{
  /* Same fix as .mph-hero and .mp-price-box: --accent (= --primary) is the LIGHT
     brown under the dark palette, so this "dark chrome" band started pale and
     the --primary-ink title on it measured 2.46:1. --primary-soft is the dark
     tint of the hue. html.theme-light re-grounds the whole section at 1903. */
  padding:72px 0;background:linear-gradient(135deg,var(--primary-soft) 0%,var(--header) 100%);
  position:relative;overflow:hidden;
}
.mph-cta-section::before{
  content:'';position:absolute;top:-30%;left:-10%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.15) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.mph-cta-content{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto}
.mph-cta-title{color:var(--header-ink);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;letter-spacing:-.5px;margin-bottom:14px}
.mph-cta-desc{color:var(--ink-3);font-size:1rem;line-height:1.7;margin-bottom:28px}
.mph-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════════════════════
   INFINITE SCROLL
   ══════════════════════════════════════════════════════════════ */
.mph-scroll-sentinel{padding:40px 0;text-align:center}
.mph-loading-spinner{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--muted);font-size:.85rem;
}
.mph-spinner-dot{
  width:10px;height:10px;background:var(--accent);border-radius:50%;
  display:inline-block;animation:mphBounce 1.4s infinite ease-in-out both;
}
.mph-spinner-dot:nth-child(1){animation-delay:-.32s}
.mph-spinner-dot:nth-child(2){animation-delay:-.16s}
@keyframes mphBounce{
  0%,80%,100%{transform:scale(0);opacity:.3}
  40%{transform:scale(1);opacity:1}
}
.mph-no-more{
  padding:32px 0;text-align:center;color:var(--muted);font-size:.9rem;
}
.mph-no-more p{margin:0}

/* ══════════════════════════════════════════════════════════════
   FARM SELECTOR DROPDOWN
   ══════════════════════════════════════════════════════════════ */
.farm-active{color:var(--ok-strong) !important;font-weight:700 !important}
.farm-active-tag{
  font-size:.6rem;font-weight:700;text-transform:uppercase;
  background:rgba(var(--ok-rgb),.2);color:var(--ok-strong);
  padding:1px 6px;border-radius:4px;margin-left:auto;
}
.mp-dropdown-menu a.farm-active:hover{color:var(--ok-strong) !important}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle-btn{
  background:none;border:none;color:rgba(255,255,255,.7);
  font-size:.88rem;border-radius:8px;transition:var(--t);
  display:flex;align-items:center;justify-content:center;
  padding:8px 10px;cursor:pointer;
}
.theme-toggle-btn:hover{color:var(--header-ink);background:rgba(255,255,255,.08)}
.theme-toggle-btn i{font-size:.95rem}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════════ */
html.theme-light {
  color-scheme: light;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.05);
  --shadow-hover: 0 20px 60px rgba(var(--primary-rgb),.15),0 8px 24px rgba(0,0,0,.08);
}

/* Navbar — white with subtle shadow */
html.theme-light .mp-nav{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
html.theme-light .mp-nav .mp-brand{color:var(--ink)}
/* :not(.btn-post) on all three. The light navbar is a pale --surface bar, so its
   links go dark — but "Post Ad" is not a link on that bar, it is a filled pill
   with --primary under it, and `html.theme-light .mp-nav-links a` (0,2,2) outranks
   the `.mp-nav-links .btn-post` (0,2,0) that sets --primary-ink, so the pill was
   getting --ink on --primary: 3.12:1 measured, on every page of the site, the
   single most repeated readability failure in the light audit. The hover and
   active rules had the same reach — they would paint --primary on --primary-dark.
   The pill states its own colours two hundred lines up; let it. */
html.theme-light .mp-nav-links a:not(.btn-post){color:var(--ink)}
html.theme-light .mp-nav-links a:not(.btn-post):hover{color:var(--primary-strong);background:rgba(var(--primary-rgb),.06)}
html.theme-light .mp-nav-links a:not(.btn-post).active{color:var(--primary-strong);background:rgba(var(--primary-rgb),.08)}
html.theme-light .mp-dropdown-toggle{color:var(--ink)}
html.theme-light .mp-dropdown-toggle:hover{color:var(--primary-strong);background:rgba(var(--primary-rgb),.06)}
html.theme-light .mp-dropdown-toggle.active{color:var(--primary-strong);background:rgba(var(--primary-rgb),.08)}
html.theme-light .mp-dropdown-toggle i{color:var(--ink)}
html.theme-light .theme-toggle-btn{color:var(--ink-2)}
html.theme-light .theme-toggle-btn:hover{color:var(--primary-strong);background:rgba(var(--primary-rgb),.08)}

/* Dropdowns — white */
html.theme-light .mp-dropdown-menu{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 8px 32px rgba(0,0,0,.1);
}
html.theme-light .mp-dropdown-menu a{color:var(--ink)}
html.theme-light .mp-dropdown-menu a:hover{color:var(--primary-strong);background:var(--primary-soft)}
html.theme-light .mp-dropdown-menu .mp-dd-divider{background:var(--surface-3)}

/* Notification panel — white */
html.theme-light .notif-panel{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 8px 32px rgba(0,0,0,.1);
}
html.theme-light .notif-panel .notif-item{color:var(--ink);border-bottom:1px solid var(--line)}
html.theme-light .notif-panel .notif-item:hover{background:var(--page)}
html.theme-light .notif-panel-hdr{border-bottom-color:var(--line)}
html.theme-light .notif-panel-hdr h3{color:var(--ink)}
html.theme-light .notif-read-all{color:var(--primary-strong)}
html.theme-light .notif-title{color:var(--ink)}
html.theme-light .notif-desc{color:var(--ink-2)}
html.theme-light .notif-time{color:var(--dim)}
html.theme-light .notif-empty{color:var(--ink-2)}
html.theme-light .notif-dot{background:var(--surface-3)}
html.theme-light .notif-dot.read{background:transparent}
html.theme-light .notif-item.unread{background:rgba(var(--primary-rgb),.08)}
html.theme-light .notif-btn{color:var(--ink-2)}
html.theme-light .notif-btn:hover{color:var(--primary-strong);background:rgba(var(--primary-rgb),.08)}

/* 🧭 SIDEBAR DRAWER (Mobile only) */
.sidebar-drawer{
  position:fixed;top:0;left:0;width:280px;height:100vh;
  background:var(--surface);z-index:400;transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:4px 0 24px rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.sidebar-drawer.open{transform:translateX(0)}
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:399;
  display:none;opacity:0;transition:opacity .3s;
}
.sidebar-overlay.show{display:block;opacity:1}
.sidebar-drawer-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.sidebar-drawer-hdr h3{font-size:1rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px}
.sidebar-drawer-hdr h3 img{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.sidebar-drawer-close{
  background:none;border:none;color:var(--text2);font-size:1.2rem;
  cursor:pointer;padding:4px 8px;border-radius:6px;
}
.sidebar-drawer-close:hover{background:rgba(var(--primary-rgb),.08);color:var(--primary-strong)}
.sidebar-drawer-links{
  flex:1;overflow-y:auto;padding:12px 0;
  display:flex;flex-direction:column;gap:2px;
}
.sidebar-drawer-link{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;color:var(--text2);font-size:.9rem;font-weight:600;
  text-decoration:none;transition:var(--t);border-left:3px solid transparent;
}
.sidebar-drawer-link:hover{
  color:var(--primary-strong);background:rgba(var(--primary-rgb),.06);
  border-left-color:var(--primary);
}
.sidebar-drawer-link i{width:20px;text-align:center;font-size:1rem}
.sidebar-drawer-link-out{color:var(--bad-strong)}
.sidebar-drawer-link-out:hover{color:var(--bad-strong);background:rgba(var(--bad-rgb),.08);border-left-color:var(--bad)}
.sidebar-drawer-divider{height:1px;background:var(--border);margin:8px 16px}/* Group headings. The drawer holds the whole navbar now — Browse, Community,
   Explore, Account, Appearance — and a flat run of a dozen links is a wall, so
   the groups the navbar shows as dropdowns are labelled here instead. */
.sidebar-drawer-label{
  padding:14px 20px 5px;font-size:.66rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}
/* The theme toggle, the palette dot theme-fx.js inserts beside it, and the
   language menu. All three are navbar controls with nowhere to go on a phone.
   They are built for the dark header — white-alpha fills, header-ink icons —
   which is invisible on the drawer's own surface in the light theme, so they are
   re-skinned here on theme tokens. */
.sidebar-drawer-tools{display:flex;align-items:flex-start;gap:10px;padding:2px 20px 10px;flex-wrap:wrap}
.sidebar-drawer-tools .theme-toggle-btn,
.sidebar-drawer-tools .fx-appear-trigger{
  flex:0 0 auto;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text2);
}
.sidebar-drawer-tools .theme-toggle-btn:hover,
.sidebar-drawer-tools .fx-appear-trigger:hover{background:rgba(var(--primary-rgb),.10);color:var(--primary-strong)}

/* Mobile bottom nav — slim version (kept minimal) */
.mobile-nav-mini{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--border);
  padding:6px 10px;gap:2px;z-index:100;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  justify-content:space-around;
}
.mobile-nav-mini-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 6px;border-radius:10px;font-size:.62rem;font-weight:600;
  color:var(--text2);transition:var(--t);text-decoration:none;
  background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;
}
.mobile-nav-mini-item:hover,.mobile-nav-mini-item.active{color:var(--primary-strong)}
.mobile-nav-mini-icon{font-size:1.15rem;line-height:1;position:relative}
.mobile-nav-mini-badge{
  position:absolute;top:-2px;right:-6px;
  background:var(--bad);color:var(--primary-ink);font-size:.55rem;font-weight:800;
  min-width:14px;height:14px;border-radius:7px;padding:0 4px;
  display:none;align-items:center;justify-content:center;
}
.mobile-nav-mini-badge.show{display:flex}
@media(max-width:640px){
  .mobile-nav-mini{display:flex}
  #mp-main{margin-bottom:60px}
  /* Anything else pinned to the bottom of the viewport (the Today's-note bulb,
     for one) has to clear this bar. Only this shell has the bar, so the height
     is published as a variable rather than hardcoded at the other end. */
  :root{--asss-bottom-bar:60px}
}

/* Hero — light gradient */
html.theme-light .mp-hero{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--g-200) 45%,var(--g-300) 100%);
}
html.theme-light .mp-hero h1{color:var(--ink)}
html.theme-light .mp-hero p{color:var(--ink-2)}
html.theme-light .mp-hero .mp-search-box{background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.theme-light .mp-hero .mp-search-box input{color:var(--ink)}
html.theme-light .mp-hero .mp-search-box input::placeholder{color:var(--dim)}

/* Price box — amber gradient */
html.theme-light .mp-price-box{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--g-200) 100%);
  border:1px solid var(--primary-bright);
}
html.theme-light .mp-price-box .mp-price-label{color:var(--primary-strong)}
html.theme-light .mp-price-box .mp-price{color:var(--ink)}
html.theme-light .mp-price-box .amount{color:var(--ink)}
html.theme-light .mp-price-box .per-unit,
html.theme-light .mp-price-box .loc-info{color:var(--ink-2)}

/* Table headers — light */
html.theme-light .mp-table th{
  background:var(--page);
  color:var(--ink-2);
  border-bottom:2px solid var(--line);
}
html.theme-light .mp-table td{color:var(--ink);border-bottom:1px solid var(--line)}
html.theme-light .mp-table tr:hover td{background:var(--primary-soft)}

/* Buttons — amber */
html.theme-light .mp-submit{background:var(--primary);color:var(--primary-ink)}
html.theme-light .mp-submit:hover{background:var(--primary-strong)}
html.theme-light .mp-apply{background:var(--primary);color:var(--primary-ink)}
html.theme-light .mp-apply:hover{background:var(--primary-strong)}
html.theme-light .mp-contact-btn{background:var(--primary);color:var(--primary-ink)}
html.theme-light .mp-contact-btn:hover{background:var(--primary-strong)}
html.theme-light .mp-comment-form button{background:var(--primary);color:var(--primary-ink)}
html.theme-light .mp-comment-form button:hover{background:var(--primary-strong)}

/* Toast — white */
html.theme-light .mp-toast{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}

/* Price text */
html.theme-light .mp-price{color:var(--primary-strong)}
html.theme-light .mp-rel-price{color:var(--primary-strong)}
html.theme-light .mp-sp-stat strong{color:var(--ink)}

/* Spinner */
html.theme-light .mph-spinner-dot{background:var(--primary)}

/* Cards — white with subtle border */
html.theme-light .mp-card,
html.theme-light .mp-listing-card,
html.theme-light .mp-cat-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
html.theme-light .mp-card:hover,
html.theme-light .mp-listing-card:hover,
html.theme-light .mp-cat-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:var(--line);
}

/* Form inputs — all types */
html.theme-light input[type="text"],
html.theme-light input[type="email"],
html.theme-light input[type="password"],
html.theme-light input[type="number"],
html.theme-light input[type="search"],
html.theme-light input[type="tel"],
html.theme-light input[type="url"],
html.theme-light input[type="date"],
html.theme-light input[type="datetime-local"],
html.theme-light input[type="month"],
html.theme-light input[type="time"],
html.theme-light input[type="week"],
html.theme-light textarea,
html.theme-light select{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
}
html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1);
}

/* Footer */
html.theme-light .mp-footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  color:var(--ink-2);
}
html.theme-light .mp-footer a{color:var(--primary-strong)}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Redesigned Homepage (hero-section, cta, footer)
   ══════════════════════════════════════════════════════════════ */
html.theme-light .hero-section{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--g-200) 45%,var(--g-300) 100%);
}
html.theme-light .hero-section h1{color:var(--ink)}
html.theme-light .hero-section p{color:var(--ink-2)}
html.theme-light .hero-section .hero-badge{background:rgba(255,255,255,.25);color:var(--ink)}

html.theme-light .cta-section{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--g-200) 100%);
}
html.theme-light .cta-section h2{color:var(--ink)}
html.theme-light .cta-section p{color:var(--ink-2)}
html.theme-light .cta-section .cta-btn{background:var(--primary);color:var(--primary-ink)}
html.theme-light .cta-section .cta-btn:hover{background:var(--primary-strong)}

html.theme-light .site-footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  color:var(--ink-2);
}
html.theme-light .site-footer a{color:var(--primary-strong)}
html.theme-light .site-footer .footer-heading{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Marketplace Listing Page (mph-hero, mph-cta)
   ══════════════════════════════════════════════════════════════ */
/* This band and the text on it walked the SAME accent ramp in the same direction,
   so wherever the band was most saturated the type was too. It ran
   --primary-soft → --g-200 → --primary-bright 70% → --primary, i.e. it ended on
   #846444, and the two rules directly below paint the heading --ink and the line
   under it --ink-2. Over the last third of the band that is dark brown text on dark
   brown ground: the home page headline measured 2.11:1 there, which is the
   "Animal & Livestock pe bg dark hai or text bhi dark hai" this was reported as.
   A LIGHT theme's hero has to stay in the light half of the ramp, so the two dark
   stops are gone and the band now ends on --g-300 (#f4cca7): --ink 11.0:1,
   --ink-2 5.05:1, and the gradient-clipped part of the headline 3.6:1 at its head
   and 5.0:1 at its tail. Mirror of the --surface-2 tail on the dark .mph-hero. */
html.theme-light .mph-hero{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--g-200) 45%,var(--g-300) 100%);
}
html.theme-light .mph-hero h1{color:var(--ink)}
html.theme-light .mph-hero p{color:var(--ink-2)}
/* The stat block is white-on-dark by default; on the light hero it needs dark
   ink, or the numbers (var(--primary-ink) = white) and labels (hardcoded white)
   sit invisibly on the light gradient. */
html.theme-light .mph-hero-stat-num{color:var(--ink)}
html.theme-light .mph-hero-stat-lbl{color:var(--ink-2)}
html.theme-light .mph-hero-stat:not(:last-child)::after{background:var(--line)}

html.theme-light .mph-cta-section{
  background:linear-gradient(135deg,var(--primary-soft) 0%,var(--g-200) 100%);
}
html.theme-light .mph-cta-section h2{color:var(--ink)}
html.theme-light .mph-cta-section p{color:var(--ink-2)}
/* The light theme re-grounds the hero and CTA on a pale gradient, so the button
   built for dark chrome needs dark ink and a dark hairline here — a white border
   at 40% and light ink were both invisible on the pale band. */
html.theme-light .mph-btn-outline-light{
  border-color:rgba(0,0,0,.28);color:var(--ink);
}
html.theme-light .mph-btn-outline-light:hover{
  background:rgba(0,0,0,.06);border-color:var(--primary);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Badges
   ══════════════════════════════════════════════════════════════ */
/* Opaque fills, same reason as .mph-badge-animals up at 1391: these three sit on a
   listing photo, and .85 over a bright one lifted the ground to 3.81 worst-palette
   for white. */
html.theme-light .listing-badge-category{
  background:var(--primary);
  color:var(--primary-ink);
}
html.theme-light .mph-card-dist-badge{
  background:var(--primary);
  color:var(--primary-ink);
}
html.theme-light .mph-card-dist-foreign{
  background:#7c3aed;
  color:var(--primary-ink);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Marketplace Cards (mph-card)
   ══════════════════════════════════════════════════════════════ */
html.theme-light .mph-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
html.theme-light .mph-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:var(--line);
}
html.theme-light .mph-card-body h3,
html.theme-light .mph-card-body h3 a{color:var(--ink)}
html.theme-light .mph-card-body p{color:var(--ink-2)}
html.theme-light .mph-card-price{color:var(--primary-strong)}
html.theme-light .mph-card-meta{color:var(--dim)}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Listing Detail Page
   ══════════════════════════════════════════════════════════════ */
html.theme-light .mp-detail-section{
  background:var(--surface);
  border:1px solid var(--line);
}
html.theme-light .mp-detail-section h2,
html.theme-light .mp-detail-section h3{color:var(--ink)}
html.theme-light .mp-detail-section p{color:var(--ink-2)}
html.theme-light .mp-seller-card{
  background:var(--page);
  border:1px solid var(--line);
}
html.theme-light .mp-seller-card h4{color:var(--ink)}
html.theme-light .mp-comment{
  background:var(--page);
  border:1px solid var(--line);
}
html.theme-light .mp-comment strong{color:var(--ink)}
html.theme-light .mp-comment p{color:var(--ink-2)}
html.theme-light .mp-related-card{
  background:var(--surface);
  border:1px solid var(--line);
}
html.theme-light .mp-related-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Category Cards & Wholesale Cards
   ══════════════════════════════════════════════════════════════ */
html.theme-light .cat-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
html.theme-light .cat-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:var(--line);
}
html.theme-light .cat-card h3{color:var(--ink)}
html.theme-light .cat-card p{color:var(--ink-2)}

html.theme-light .wholesale-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
html.theme-light .wholesale-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
html.theme-light .wholesale-card h3{color:var(--ink)}
html.theme-light .wholesale-card p{color:var(--ink-2)}
html.theme-light .wholesale-price{color:var(--primary-strong)}

html.theme-light .affiliate-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
html.theme-light .affiliate-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
html.theme-light .affiliate-card h3{color:var(--ink)}
html.theme-light .affiliate-card p{color:var(--ink-2)}
html.theme-light .affiliate-card-price{color:var(--primary-strong)}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Filter Bar & Search
   ══════════════════════════════════════════════════════════════ */
html.theme-light .mph-filter-bar{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
html.theme-light .mph-filter-bar select,
html.theme-light .mph-filter-bar input{
  background:var(--page);
  color:var(--ink);
  border:1px solid var(--line);
}
html.theme-light .mph-filter-bar select:focus,
html.theme-light .mph-filter-bar input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Pagination
   ══════════════════════════════════════════════════════════════ */
html.theme-light .mph-pagination a,
html.theme-light .mph-pagination span{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
}
html.theme-light .mph-pagination a:hover{
  background:var(--primary-soft);
  border-color:var(--primary);
  color:var(--primary-strong);
}
html.theme-light .mph-pagination .current{
  background:var(--primary);
  color:var(--primary-ink);
  border-color:var(--primary);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Empty State
   ══════════════════════════════════════════════════════════════ */
html.theme-light .mph-empty{
  color:var(--ink-2);
}
html.theme-light .mph-empty i{color:var(--dim)}

/* ══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════════════════════ */
.lang-switcher .mp-dropdown-menu{min-width:180px;right:0;left:auto}
.lang-switcher .mp-dropdown-menu .lang-form{margin:0}
.lang-switcher .mp-dropdown-menu .lang-option{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 14px;border:none;border-radius:8px;
  background:none;color:rgba(255,255,255,.7);
  font-size:.85rem;font-weight:500;cursor:pointer;
  font-family:'Inter',sans-serif;transition:var(--t);text-align:left;
}
.lang-switcher .mp-dropdown-menu .lang-option:hover{color:var(--header-ink);background:rgba(255,255,255,.08)}
.lang-switcher .mp-dropdown-menu .lang-option.active{color:var(--header-ink);background:rgba(var(--primary-rgb),.15);font-weight:700}
.lang-switcher .mp-dropdown-menu .lang-option .lang-flag{font-size:1.2rem}
.lang-label{font-size:.82rem}

/* Language Switcher — Mobile */
@media(max-width:640px){
  .lang-switcher .mp-dropdown-menu{position:static;box-shadow:none;margin-top:0;border:none;padding-left:8px}
}

/* Language Switcher — Light Theme */
html.theme-light .lang-switcher .mp-dropdown-menu{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
html.theme-light .lang-switcher .mp-dropdown-menu .lang-option{color:var(--ink-2)}
html.theme-light .lang-switcher .mp-dropdown-menu .lang-option:hover{color:var(--ink);background:var(--page)}
html.theme-light .lang-switcher .mp-dropdown-menu .lang-option.active{color:var(--primary-strong);background:var(--primary-soft)}

/* Language Switcher — inside the mobile drawer.
   Everywhere else this control sits on the dark navbar, so its menu floats out
   on --accent with white-ish text. In the drawer it is one row of a panel that
   is light in the light theme, and a floating menu inside a 280px-wide fixed
   drawer would be clipped, so the list opens inline and takes the drawer's own
   colours. These come last in the section on purpose: the html.theme-light rules
   above are one specificity step up from a plain class chain, so each of these
   carries a leading `html` to match them and win on order. */
html .sidebar-drawer .lang-switcher{width:100%}
html .sidebar-drawer .lang-switcher .lang-toggle{
  padding:9px 10px;border-radius:8px;color:var(--text2);font-weight:600;
}
html .sidebar-drawer .lang-switcher .lang-toggle:hover,
html .sidebar-drawer .lang-switcher .lang-toggle.active{color:var(--primary-strong);background:rgba(var(--primary-rgb),.08)}
html .sidebar-drawer .lang-switcher .mp-dropdown-menu{
  position:static;left:auto;right:auto;min-width:0;
  background:transparent;border:none;box-shadow:none;
  margin:2px 0 0;padding:0 0 0 6px;
}
html .sidebar-drawer .lang-switcher .mp-dropdown-menu .lang-option{color:var(--text2)}
html .sidebar-drawer .lang-switcher .mp-dropdown-menu .lang-option:hover{color:var(--primary-strong);background:rgba(var(--primary-rgb),.08)}
html .sidebar-drawer .lang-switcher .mp-dropdown-menu .lang-option.active{color:var(--primary-strong);background:rgba(var(--primary-rgb),.14);font-weight:700}

/* ── SOURCE / LICENCE CREDITS (mandi/_attribution.html) ──────────────────────
   Global rather than in mandi.css because the partial is included by pages in
   three apps — the rates dashboard, every country and commodity page, and the
   animal hub, which loads animal-world.css and not mandi.css. Two copies of
   these rules would be two opinions about what a licence notice looks like.

   Quiet on purpose: it is a legal notice, not a feature. Small, muted, and set
   apart by a rule above it so it reads as a footnote to the table it follows. */
.mandi-attrib{
  margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  max-width:820px;
}
.mandi-attrib-hdr{
  margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.2px;
  color:var(--ink-2);text-transform:uppercase;
}
.mandi-attrib-hdr i{margin-right:6px;opacity:.7}
.mandi-attrib-list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.mandi-attrib-list li{
  font-size:12px;line-height:1.65;color:var(--ink-2);
  padding-left:12px;border-left:2px solid var(--line);
}
.mandi-attrib-list a{color:var(--primary-strong);font-weight:600;text-decoration:none}
.mandi-attrib-list a:hover{text-decoration:underline}
.mandi-attrib-text{opacity:.9}

/* Same reason as .mandi-src-chip in mandi.css: these read on --ink-2, which is
   near-black, so without this the notice is invisible on the dark surface. */
html.theme-dark .mandi-attrib{border-top-color:var(--line-2)}
html.theme-dark .mandi-attrib-hdr,
html.theme-dark .mandi-attrib-list li{color:var(--dim)}
html.theme-dark .mandi-attrib-list li{border-left-color:var(--line-2)}
html.theme-dark .mandi-attrib-list a{color:var(--accent-ink)}