/* ============================================================
   The Outfitter Review — Marketplace pages (Home1/Trip1/Services1)
   All rules scoped under .tor-mp / .tor-mp-header so nothing
   else on the site is affected.
   ============================================================ */

/* Hide the global theme header on these pages */
body.tor-mp-page #masthead { display: none !important; }
body.tor-mp-page .site-footer { /* keep global footer */ }

/* ---- Scoped palette ---- */
.tor-mp,
.tor-mp-header {
  /* Palette matched to the HOME PAGE scheme (client wants olive GREEN site-wide):
     primary buttons = olive green #5c6b3d; accent/CTA = gold #c48b39. */
  --mp-hero-bg: #20211c;       /* charcoal hero (unchanged) */
  --mp-hero-bg2: #2c2d26;
  --mp-page-bg: #f6f4ee;       /* cream page bg */
  --mp-card-bg: #ffffff;
  --mp-cta: #5c6b3d;           /* olive green — home-page primary button */
  --mp-cta-hover: #4b5731;     /* darker olive on hover */
  --mp-accent: #c48b39;        /* gold — CTA accent */
  --mp-accent-hover: #b17d2f;
  --mp-ink: #23241f;           /* headings */
  --mp-text: #3b3c36;
  --mp-muted: #7c7d73;
  --mp-star: #c48b39;          /* gold stars (matches accent) */
  --mp-border: #e7e3d8;
  --mp-badge-bg: #efe9db;
  --mp-badge-ink: #5b5340;
  --mp-radius: 12px;
  --mp-shadow: 0 2px 14px rgba(0,0,0,.06);
  --mp-shadow-h: 0 8px 28px rgba(0,0,0,.12);
}

.tor-mp * { box-sizing: border-box; }

.tor-mp {
  background: var(--mp-page-bg);
  color: var(--mp-text);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: clip;
}
.tor-mp .mp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 20px); }
.tor-mp img { max-width: 100%; display: block; }
.tor-mp a { text-decoration: none; color: inherit; }
.tor-mp h1,.tor-mp h2,.tor-mp h3,.tor-mp h4 { color: var(--mp-ink); margin: 0; font-family: 'Poppins', sans-serif; }

/* ---- Buttons ----
   NOTE: Twenty Twenty-One parent theme styles `.site button:not(:hover)...`
   with higher specificity, so we use !important (scoped to .tor-mp) to win. */
.tor-mp .mp-btn,
.tor-mp button.mp-btn,
.tor-mp a.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: inherit; font-weight: 600;
  border-radius: 8px; padding: 12px 22px; font-size: 14px; transition: background .15s, transform .05s;
  background-color: var(--mp-cta) !important; color: #fff !important;
  text-transform: none; letter-spacing: 0; box-shadow: none;
}
.tor-mp .mp-btn:hover,
.tor-mp button.mp-btn:hover,
.tor-mp a.mp-btn:hover { background-color: var(--mp-cta-hover) !important; color: #fff !important; }
.tor-mp .mp-btn:active { transform: translateY(1px); }
.tor-mp .mp-btn-ghost,
.tor-mp button.mp-btn-ghost {
  background-color: #fff !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-border);
}
.tor-mp .mp-btn-ghost:hover,
.tor-mp button.mp-btn-ghost:hover { background-color: #faf8f2 !important; color: var(--mp-ink) !important; }
.tor-mp .mp-btn-block { width: 100%; }

/* Neutralize parent-theme button background for our non-.mp-btn buttons
   (tabs, fav hearts, burger, filter close) which the theme would paint navy. */
.tor-mp .mp-tab,
.tor-mp .mp-fav,
.tor-mp .mp-burger,
.tor-mp .mp-sb-close,
.tor-mp .mp-filter-toggle {
  background-color: transparent !important;
  color: inherit;
  box-shadow: none;
}
.tor-mp .mp-tab.is-active { background-color: var(--mp-cta) !important; color: #fff !important; }
/* Heart/save: force a small fixed circle — theme button padding (15px 30px) was
   stretching it into a 60x32 white oval. */
.tor-mp .mp-fav {
  position: absolute; top: 8px; right: 8px;
  width: 34px !important; height: 34px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,.92) !important; color: #444 !important;
  border: 0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; font-size: 0 !important;
}
.tor-mp .mp-fav svg { width: 17px !important; height: 17px !important; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.tor-mp .mp-fav.is-on { color: #d4453b !important; }
.tor-mp .mp-fav.is-on svg { fill: #d4453b; }
.tor-mp .mp-filter-toggle { background-color: #fff !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-border); }
/* Burger: small icon button (theme padding 15px 30px was overflowing mobile) */
.tor-mp-header .mp-burger {
  width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important;
  min-width: 0 !important; border: 0 !important; background: transparent !important; color: #fff !important;
  display: none; align-items: center; justify-content: center; line-height: 1 !important;
}

/* ---- Inputs ---- */
.tor-mp .mp-field,
.tor-mp select.mp-field,
.tor-mp input.mp-field {
  width: 100%; border: 1px solid var(--mp-border); background: #fff; color: var(--mp-ink);
  border-radius: 8px; padding: 11px 14px; font-size: 14px; font-family: inherit; outline: none;
}
.tor-mp .mp-field:focus { border-color: var(--mp-cta); }
/* Location <select> in the hero search: clean caret, matches the text inputs */
.tor-mp select.mp-hero-loc {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c7d73' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* svg icon helper (works inside .tor-mp AND in the standalone global header) */
.tor-mp svg.mp-i,
.tor-mp-header svg.mp-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: middle; }

/* ============================================================
   MARKETPLACE HEADER
   ============================================================ */
.tor-mp-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--mp-hero-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tor-mp-header .mp-head-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 28px;
}
.tor-mp-header .mp-logo { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; max-height: 72px; text-decoration: none; }
/* Override the global custom.css logo sizing (.custom-logo-link img { max-height:184px }) */
.tor-mp-header .mp-logo img,
.tor-mp-header .mp-logo .custom-logo-link img,
.tor-mp-header a.custom-logo-link img {
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
  bottom: unset !important;
  position: static !important;
}
.tor-mp-header .mp-logo .custom-logo-link { line-height: 0; display: inline-flex; }
.tor-mp-header .mp-logo .mp-logo-txt { font-size: 18px; font-weight: 800; letter-spacing: .5px; line-height: 1.05; color: #fff; }
.tor-mp-header .mp-logo .mp-logo-txt small { display: block; font-size: 11px; font-weight: 600; color: #c8932f; letter-spacing: 3px; margin-top: 1px; }

.tor-mp-header .mp-nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.tor-mp-header .mp-nav a { color: #e9e6dd; font-size: 14px; font-weight: 500; }
.tor-mp-header .mp-nav a:hover,
.tor-mp-header .mp-nav a.is-active { color: #fff; }

/* Twenty Twenty-One adds `.site a:focus { background: rgba(255,255,255,.9) }` —
   an ugly white box on ANY focused link. Kill it inside the dark header (nav +
   right links + mobile drawer + account menu) and use a subtle focus instead. */
.tor-mp-header a:focus,
.tor-mp-header a:focus-visible,
.tor-mp-header button:focus,
.tor-mp-header .mp-nav a:focus,
.tor-mp-header .mp-mnav a:focus,
.tor-mp-header .mp-head-right a:focus,
.tor-mp-header .mp-acct-menu a:focus {
  background: transparent !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
.tor-mp-header .mp-nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* account dropdown items keep their light hover, not the white focus box */
.tor-mp-header .mp-acct-menu a:focus { background: #f2f4ec !important; color: var(--mp-cta) !important; }

.tor-mp-header .mp-head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tor-mp-header .mp-head-right a { color: #e9e6dd; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.tor-mp-header .mp-head-right a:hover { color: #fff; }
.tor-mp-header .mp-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #e9e6dd; }
.tor-mp-header .mp-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Top-nav notification bell + unread badge */
.tor-mp-header .mp-notif-btn { position: relative; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; }
/* Force the inline-path bell SVG to a fixed size (it was collapsing to width:0). */
.tor-mp-header .mp-notif-btn svg.mp-i { width: 20px !important; height: 20px !important; flex: 0 0 auto; }
.tor-mp-header .mp-notif-dot { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e23b3b; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--mp-header-bg, #20211c); }
/* Notification dropdown panel */
.tor-mp-header .mp-notif { position: relative; }
.tor-mp-header .mp-notif-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 92vw;
  background: #fff; border: 1px solid var(--mp-border); border-radius: 12px;
  box-shadow: 0 12px 38px rgba(0,0,0,.20); z-index: 1200; display: none; overflow: hidden;
}
.tor-mp-header .mp-notif.is-open .mp-notif-menu { display: block; }
.tor-mp-header .mp-notif-head { padding: 12px 16px; font-weight: 700; font-size: 14px; color: var(--mp-ink); border-bottom: 1px solid var(--mp-border); display: flex; align-items: center; justify-content: space-between; }
.tor-mp-header .mp-notif-head-count { background: #e23b3b; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.tor-mp-header .mp-notif-list { max-height: 360px; overflow-y: auto; }
.tor-mp-header .mp-notif-empty { padding: 34px 16px; text-align: center; color: #8a8f98; font-size: 14px; }
.tor-mp-header .mp-notif-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #f2efe8; text-decoration: none; }
.tor-mp-header .mp-notif-item:hover { background: #f7f5ee; }
.tor-mp-header .mp-notif-item.is-unread { background: #fff8f0; }
.tor-mp-header .mp-notif-item.is-unread:hover { background: #fef1e2; }
.tor-mp-header .mp-notif-ic { font-size: 20px; line-height: 1; flex-shrink: 0; }
.tor-mp-header .mp-notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tor-mp-header .mp-notif-title { color: var(--mp-ink) !important; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.tor-mp-header .mp-notif-time { color: #a0a4ac; font-size: 11px; }
.tor-mp-header .mp-notif-all { display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 600; color: var(--mp-cta) !important; background: #fafaf6; text-decoration: none; }
.tor-mp-header .mp-notif-all:hover { background: #f2f4ec; }
.tor-mp-header .mp-register { background: var(--mp-cta); color: #fff !important; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
.tor-mp-header .mp-register:hover { background: var(--mp-cta-hover); }

/* ---- Logged-in account dropdown (mirrors live "Outfitter User" menu) ---- */
.tor-mp-header .mp-acct { position: relative; }
.tor-mp-header .mp-acct-btn {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16); color: #e9e6dd !important; cursor: pointer;
  padding: 7px 12px; border-radius: 8px; font-size: 14px; font-family: inherit; font-weight: 500;
}
.tor-mp-header .mp-acct-btn:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.tor-mp-header .mp-acct-btn .mp-caret { transition: transform .18s; }
.tor-mp-header .mp-acct.is-open .mp-acct-btn .mp-caret { transform: rotate(180deg); }
.tor-mp-header .mp-acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--mp-border); border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,.18); padding: 6px; z-index: 1200;
  display: none; flex-direction: column;
}
.tor-mp-header .mp-acct.is-open .mp-acct-menu { display: flex; }
.tor-mp-header .mp-acct-menu a {
  display: block; color: var(--mp-ink) !important; padding: 9px 12px; border-radius: 7px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.tor-mp-header .mp-acct-menu a:hover { background: #f2f4ec; color: var(--mp-cta) !important; }
.tor-mp-header .mp-acct-menu a.mp-acct-logout { border-top: 1px solid var(--mp-border); margin-top: 4px; color: #b23b32 !important; }
.tor-mp-header .mp-acct-menu a.mp-acct-logout:hover { background: #fbeceb; color: #b23b32 !important; }

/* mobile drawer: account section label + logout */
.tor-mp-header .mp-mnav .mp-mnav-sep {
  color: var(--mp-accent); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 14px 0 6px; border-bottom: 0 !important;
}
.tor-mp-header .mp-mnav a.mp-mnav-logout { color: #ff8a80 !important; }

.tor-mp-header .mp-burger { display: none; background: none; border: 0; color: #fff; cursor: pointer; }

/* ============================================================
   HERO
   ============================================================ */
.tor-mp .mp-hero {
  position: relative; color: #fff;
  background-color: var(--mp-hero-bg2);
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center center !important;
  /* Home hero: fluid height that scales with viewport (mockup-tall on desktop) */
  min-height: clamp(380px, 56vw, 600px);
  display: flex; align-items: center;
  padding: clamp(40px, 6vw, 60px) 0;
}
/* Per-page focal point so the subject (hunter/deer on the right) stays framed
   and isn't cut off as the hero gets shorter/narrower. */
.tor-mp-home .mp-hero    { background-position: 70% center !important; }
.tor-mp-trips .mp-hero   { background-position: 80% center !important; }
.tor-mp-services .mp-hero{ background-position: 78% center !important; }
@media (max-width: 767px) {
  /* On phones the hero is narrow — keep the subject side framed */
  .tor-mp-home .mp-hero    { background-position: 70% center !important; }
  .tor-mp-trips .mp-hero   { background-position: 75% center !important; }
  .tor-mp-services .mp-hero{ background-position: 75% center !important; }
}
.tor-mp .mp-hero .mp-wrap { width: 100%; position: relative; z-index: 2; }
/* No full dark overlay — only a soft gradient at the bottom-left for text legibility */
.tor-mp .mp-hero.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,16,13,.62) 0%, rgba(15,16,13,.30) 45%, rgba(15,16,13,0) 75%);
}
/* Listing pages (Trips/Services): taller hero so the subject (deer/hunter)
   shows fully with minimal vertical cropping (images are 16:9). */
.tor-mp .mp-hero-small { min-height: clamp(360px, 42vw, 560px); padding: clamp(30px, 4vw, 40px) 0; }

.tor-mp .mp-hero h1 { color: #fff; font-size: clamp(30px, 5.2vw, 52px); font-weight: 800; line-height: 1.06; margin-bottom: 14px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.tor-mp .mp-hero p.mp-hero-sub { color: rgba(255,255,255,.92); font-size: clamp(15px, 1.6vw, 18px); margin-bottom: clamp(20px, 3vw, 28px); max-width: 620px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.tor-mp .mp-hero-small h1 { font-size: clamp(28px, 4.6vw, 42px); }

/* Hero tabbed search (home) */
.tor-mp .mp-search-card { background: #fff; border-radius: 14px; padding: 8px; box-shadow: var(--mp-shadow-h); max-width: 760px; }
.tor-mp .mp-tabs { display: flex; gap: 4px; padding: 6px 6px 0; }
.tor-mp .mp-tab {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; font-family: inherit;
  padding: 10px 20px; font-size: 14px; font-weight: 600; color: #5a5b52 !important; border-radius: 8px 8px 0 0;
}
.tor-mp .mp-tab:hover { color: var(--mp-ink) !important; }
.tor-mp .mp-tab.is-active { color: #fff !important; background: var(--mp-cta) !important; }
.tor-mp .mp-tab-panels { padding: 12px; }
.tor-mp .mp-tab-panel { display: none; gap: 10px; }
.tor-mp .mp-tab-panel.is-active { display: flex; flex-wrap: wrap; align-items: stretch; }
.tor-mp .mp-tab-panel .mp-field { flex: 1 1 200px; }
.tor-mp .mp-tab-panel .mp-btn { flex: 0 0 auto; }

/* Inline search row (trip/services hero) */
.tor-mp .mp-search-row {
  background: #fff; border-radius: 12px; padding: 10px; box-shadow: var(--mp-shadow-h);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch;
}
.tor-mp .mp-search-row .mp-field { flex: 1 1 150px; }
.tor-mp .mp-search-row .mp-field.mp-grow { flex: 2 1 240px; }

/* ============================================================
   Premium Main Search Bar — labeled, icon-in-field, two rows
   ============================================================ */
.tor-mp .mp-searchbar {
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 18px 50px -12px rgba(20,24,14,.45), 0 2px 8px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 14px;
}
.tor-mp .mp-sb-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.tor-mp .mp-sb-row2 { padding-top: 15px; border-top: 1px solid var(--mp-border); }

.tor-mp .mp-sb-cell { display: flex; flex-direction: column; gap: 6px; flex: 1 1 170px; min-width: 0; }
.tor-mp .mp-sb-cell-grow { flex: 2 1 280px; }
.tor-mp .mp-sb-cell-sm { flex: 0 1 130px; min-width: 100px; }

.tor-mp .mp-sb-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8a8f7f; padding-left: 3px;
}
/* icon + input wrapper */
.tor-mp .mp-sb-ctl {
  position: relative; display: flex; align-items: center;
  background: #f6f5f0; border: 1.5px solid transparent; border-radius: 12px;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.tor-mp .mp-sb-ctl:hover { background: #f1f0e8; }
.tor-mp .mp-sb-ctl:focus-within {
  background: #fff; border-color: var(--mp-cta);
  box-shadow: 0 0 0 3px rgba(92,107,61,.15);
}
.tor-mp .mp-sb-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--mp-cta); pointer-events: none; display: flex;
}
.tor-mp .mp-sb-ic svg { width: 18px; height: 18px; }
.tor-mp .mp-sb-ctl input,
.tor-mp .mp-sb-ctl select {
  width: 100%; box-sizing: border-box; height: 50px;
  padding: 0 14px 0 40px; border: 0; background: transparent;
  font-size: 14.5px; color: var(--mp-ink, #21241f); font-family: inherit;
  border-radius: 12px; -webkit-appearance: none; appearance: none;
}
.tor-mp .mp-sb-ctl input:focus,
.tor-mp .mp-sb-ctl select:focus { outline: none; }
.tor-mp .mp-sb-ctl select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6b3d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
.tor-mp .mp-sb-ctl input[type="date"] { padding-right: 8px; }

/* actions */
.tor-mp .mp-sb-actions { display: flex; gap: 10px; align-items: flex-end; margin-left: auto; }
.tor-mp .mp-sb-go {
  height: 50px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--mp-cta); color: #fff; font-weight: 700; font-size: 14.5px; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(92,107,61,.6); transition: transform .12s, box-shadow .18s, filter .18s;
}
.tor-mp .mp-sb-go:hover { filter: brightness(1.07); box-shadow: 0 8px 22px -4px rgba(92,107,61,.7); }
.tor-mp .mp-sb-go:active { transform: translateY(1px); }
.tor-mp .mp-sb-go-ic { width: 17px; height: 17px; display: flex; }
.tor-mp .mp-sb-go-ic svg { width: 17px; height: 17px; }
.tor-mp .mp-sb-filt {
  height: 50px; padding: 0 18px; border: 1.5px solid var(--mp-border); border-radius: 12px; cursor: pointer;
  background: #fff; color: var(--mp-ink); font-weight: 600; font-size: 14px; font-family: inherit;
  display: none; align-items: center; gap: 7px; white-space: nowrap;
}
.tor-mp .mp-sb-filt:hover { border-color: var(--mp-cta); color: var(--mp-cta); }

@media (max-width: 720px) {
  .tor-mp .mp-searchbar { padding: 15px; border-radius: 14px; }
  .tor-mp .mp-sb-cell { flex: 1 1 100%; }
  .tor-mp .mp-sb-cell-sm { flex: 1 1 30%; min-width: 88px; }
  .tor-mp .mp-sb-actions { margin-left: 0; width: 100%; }
  .tor-mp .mp-sb-go { flex: 1 1 auto; justify-content: center; }
  .tor-mp .mp-sb-filt { display: inline-flex; }
}

/* ============================================================
   TRUST BADGES (home)
   ============================================================ */
.tor-mp .mp-trust { background: #fff; border-bottom: 1px solid var(--mp-border); }
.tor-mp .mp-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 24px 0; }
.tor-mp .mp-trust-item { display: flex; gap: 14px; align-items: center; padding: 4px 24px; border-right: 1px solid var(--mp-border); }
.tor-mp .mp-trust-item:last-child { border-right: 0; }
.tor-mp .mp-trust-item:first-child { padding-left: 0; }
.tor-mp .mp-trust-item .mp-trust-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--mp-badge-bg); color: var(--mp-cta); display: flex; align-items: center; justify-content: center; }
.tor-mp .mp-trust-item .mp-trust-ic svg { width: 22px; height: 22px; }
.tor-mp .mp-trust-item h4 { font-size: 14px; margin-bottom: 3px; color: var(--mp-ink); }
.tor-mp .mp-trust-item p { font-size: 12px; color: var(--mp-muted); margin: 0; line-height: 1.35; }

/* ============================================================
   SECTIONS
   ============================================================ */
.tor-mp .mp-section { padding: clamp(28px, 4vw, 38px) 0; }
.tor-mp .mp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.tor-mp .mp-section-head h2 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; }
.tor-mp .mp-section-head a.mp-viewall { color: var(--mp-cta); font-weight: 600; font-size: 14px; }

/* ============================================================
   CARDS (grid)
   ============================================================ */
/* Fluid card grids: cards reflow smoothly (auto-fit) instead of jumping. */
.tor-mp .mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.tor-mp .mp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 22px); }

.tor-mp .mp-card {
  background: var(--mp-card-bg); border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
  overflow: hidden; box-shadow: var(--mp-shadow); transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column;
}
.tor-mp .mp-card:hover { box-shadow: var(--mp-shadow-h); transform: translateY(-2px); }
.tor-mp .mp-card-media { position: relative; aspect-ratio: 16/10; background: #ece8de; overflow: hidden; }
.tor-mp .mp-card-media img { width: 100%; height: 100%; object-fit: cover; }
.tor-mp .mp-card-tag {
  position: absolute; top: 10px; left: 10px; background: rgba(32,33,28,.85); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
}
.tor-mp .mp-fav {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #444;
}
.tor-mp .mp-fav.is-on { color: #d4453b; }
.tor-mp .mp-fav svg { width: 16px; height: 16px; }
.tor-mp .mp-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tor-mp .mp-card-title { font-size: 16px; font-weight: 700; color: var(--mp-ink); }
.tor-mp .mp-card-co { font-size: 12px; color: var(--mp-cta); font-weight: 600; }
.tor-mp .mp-card-loc { font-size: 13px; color: var(--mp-muted); display: flex; align-items: center; gap: 5px; }
.tor-mp .mp-card-meta { font-size: 12px; color: var(--mp-muted); display: flex; gap: 14px; margin-top: 2px; }
.tor-mp .mp-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.tor-mp .mp-price { font-weight: 700; color: var(--mp-ink); font-size: 15px; }
.tor-mp .mp-price small { font-weight: 500; color: var(--mp-muted); font-size: 12px; }

/* Stars */
.tor-mp-stars { display: inline-flex; align-items: center; gap: 1px; }
.tor-mp-stars svg { width: 14px; height: 14px; }
.tor-mp-stars svg.is-on { fill: var(--mp-star); }
.tor-mp-stars svg.is-off { fill: #d9d4c6; }
.tor-mp .mp-rate-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mp-muted); }

/* ============================================================
   LIST ROWS (best value / open dates)
   ============================================================ */
.tor-mp .mp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.tor-mp .mp-list { display: flex; flex-direction: column; gap: 12px; }
.tor-mp .mp-row {
  display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--mp-border);
  border-radius: 10px; padding: 10px; transition: box-shadow .15s;
}
.tor-mp .mp-row:hover { box-shadow: var(--mp-shadow); }
.tor-mp .mp-row-thumb { flex: 0 0 64px; width: 64px; height: 56px; border-radius: 8px; overflow: hidden; background: #ece8de; }
.tor-mp .mp-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tor-mp .mp-row-body { flex: 1; min-width: 0; }
.tor-mp .mp-row-title { font-size: 14px; font-weight: 600; color: var(--mp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tor-mp .mp-row-sub { font-size: 12px; color: var(--mp-muted); }
.tor-mp .mp-row-right { flex: 0 0 auto; text-align: right; }
.tor-mp .mp-spots { font-size: 11px; font-weight: 600; color: #b4612a; background: #f6e7d8; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }

/* ============================================================
   LISTING PAGE (trip1 / services1) layout
   ============================================================ */
.tor-mp .mp-results-bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 10px; gap: 12px; flex-wrap: wrap; }
.tor-mp .mp-results-count { font-size: 13px; color: var(--mp-muted); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.tor-mp .mp-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mp-muted); }
.tor-mp .mp-sort select { width: auto; }

.tor-mp .mp-layout { display: grid; grid-template-columns: 280px 1fr; gap: 26px; padding-bottom: 24px; align-items: start; }

/* Sidebar */
.tor-mp .mp-sidebar { background: #fff; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 6px 18px 18px; position: sticky; top: 84px; }
.tor-mp .mp-sb-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.tor-mp .mp-sb-top h3 { font-size: 15px; }
.tor-mp .mp-clear { font-size: 12px; color: var(--mp-cta); font-weight: 600; }
.tor-mp .mp-fgroup { border-top: 1px solid var(--mp-border); padding: 14px 0; }
.tor-mp .mp-fgroup > h4 { font-size: 13px; font-weight: 700; color: var(--mp-ink); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .4px; }
.tor-mp .mp-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; color: var(--mp-text); cursor: pointer; line-height: 1.3; }
.tor-mp .mp-check input { accent-color: var(--mp-cta); width: 15px; height: 15px; flex: 0 0 auto; }
.tor-mp .mp-fgroup .mp-field { margin-bottom: 8px; }
.tor-mp .mp-apply { margin-top: 10px; }

/* Long checkbox lists (Trip Type, Species, Category) -> compact scroll box */
.tor-mp .mp-check-list {
  max-height: 168px; overflow-y: auto; padding-right: 6px;
  border: 1px solid var(--mp-border); border-radius: 8px; padding: 6px 8px;
  background: #fcfbf8;
}
.tor-mp .mp-check-list .mp-check { padding: 3px 2px; }
.tor-mp .mp-check-list::-webkit-scrollbar { width: 7px; }
.tor-mp .mp-check-list::-webkit-scrollbar-thumb { background: #d8d3c4; border-radius: 4px; }
.tor-mp .mp-check-list::-webkit-scrollbar-track { background: transparent; }
.tor-mp .mp-list-search { margin-bottom: 8px; padding: 8px 12px; font-size: 13px; }
.tor-mp .mp-check.is-hidden { display: none; }

/* ion.rangeSlider -> olive theme (default is red/blue) */
.tor-mp .irs--flat .irs-bar { background-color: var(--mp-cta); }
.tor-mp .irs--flat .irs-handle > i:first-child { background-color: var(--mp-cta); }
.tor-mp .irs--flat .irs-from, .tor-mp .irs--flat .irs-to, .tor-mp .irs--flat .irs-single { background-color: var(--mp-cta); }
.tor-mp .irs--flat .irs-from:before, .tor-mp .irs--flat .irs-to:before, .tor-mp .irs--flat .irs-single:before { border-top-color: var(--mp-cta); }
.tor-mp .irs--flat .irs-line { background-color: #e6e2d8; }

/* Result cards (list layout) */
.tor-mp .mp-results { display: flex; flex-direction: column; gap: 16px; }
.tor-mp .mp-rcard {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
  overflow: hidden; box-shadow: var(--mp-shadow); transition: box-shadow .15s;
}
.tor-mp .mp-rcard:hover { box-shadow: var(--mp-shadow-h); }
.tor-mp .mp-rcard-media { position: relative; flex: 0 0 220px; width: 220px; background: #ece8de; }
.tor-mp .mp-rcard-media img { width: 100%; height: 100%; object-fit: cover; }
.tor-mp .mp-rcard-body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tor-mp .mp-rcard-body .mp-card-title { font-size: 18px; }
.tor-mp .mp-rcard-price { flex: 0 0 auto; text-align: right; padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; border-left: 1px solid var(--mp-border); min-width: 150px; }
.tor-mp .mp-rcard-price .mp-price { font-size: 20px; }
.tor-mp .mp-badge { display: inline-block; background: var(--mp-badge-bg); color: var(--mp-badge-ink); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }

/* Pagination */
.tor-mp .mp-pagination { display: flex; justify-content: center; gap: 6px; padding: 30px 0 0; flex-wrap: wrap; }
.tor-mp .mp-pagination a, .tor-mp .mp-pagination span {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--mp-border);
  background: #fff; color: var(--mp-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.tor-mp .mp-pagination .current { background: var(--mp-cta); color: #fff; border-color: var(--mp-cta); }
.tor-mp .mp-pagination a:hover { background: #faf8f2; }

/* ============================================================
   CTA bars
   ============================================================ */
.tor-mp .mp-cta-bar {
  background: var(--mp-hero-bg); color: #fff; border-radius: 14px; padding: 30px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 8px 0 48px;
}
.tor-mp .mp-cta-bar h3 { color: #fff; font-size: 22px; margin-bottom: 4px; }
.tor-mp .mp-cta-bar p { color: rgba(255,255,255,.8); margin: 0; font-size: 14px; }
.tor-mp .mp-cta-bar .mp-cta-form { display: flex; gap: 8px; flex: 0 1 420px; }
.tor-mp .mp-cta-bar .mp-cta-form .mp-field { flex: 1; }

/* Filter drawer toggle (mobile only). !important + high specificity because the
   button also carries .mp-btn (button.mp-btn = display:inline-flex wins on
   specificity otherwise, leaving the toggle visible on desktop where the sidebar
   is already shown → it looked like "clicking Filters does nothing"). */
.tor-mp .mp-filter-toggle,
.tor-mp button.mp-filter-toggle { display: none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  /* trust badges: 2-up, drop the vertical dividers */
  .tor-mp .mp-trust-grid { grid-template-columns: repeat(2,1fr); gap: 18px 0; }
  .tor-mp .mp-trust-item { border-right: 0; padding: 8px 16px; }
  .tor-mp .mp-trust-item:first-child { padding-left: 16px; }
  .tor-mp .mp-two-col { grid-template-columns: 1fr; gap: 22px; }
  .tor-mp .mp-layout { grid-template-columns: 1fr; }

  /* sidebar becomes a slide-in drawer */
  .tor-mp .mp-filter-toggle,
  .tor-mp button.mp-filter-toggle { display: inline-flex !important; }
  .tor-mp .mp-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 340px; z-index: 1200;
    border-radius: 0; transform: translateX(-100%); transition: transform .25s; overflow-y: auto;
  }
  .tor-mp.mp-drawer-open .mp-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  /* Backdrop MUST cover the whole screen (it sits inside .mp-sidebar in markup,
     so force full-viewport size + fixed so it isn't clipped to the drawer width). */
  /* Old in-sidebar backdrop is disabled — it was trapped inside the sidebar's
     transform (only 335px wide). The real full-screen backdrop is #tor-drawer-bd
     mounted on <body> by marketplace.js. Keep this hidden. */
  .tor-mp .mp-drawer-backdrop { display: none !important; }
  .tor-mp .mp-sidebar { z-index: 1200; } /* drawer above its own backdrop */
  /* Lock the page behind the drawer so it doesn't scroll / show through. */
  body.tor-drawer-lock { overflow: hidden !important; position: fixed; width: 100%; }
  .tor-mp .mp-sb-close { display: inline-flex; background: none; border: 0; cursor: pointer; color: var(--mp-ink); }
}
@media (min-width: 992px) {
  .tor-mp .mp-sb-close { display: none; }
}
@media (max-width: 767px) {
  .tor-mp-header .mp-nav, .tor-mp-header .mp-head-right .mp-hide-sm { display: none; }
  .tor-mp-header .mp-burger { display: inline-flex; }
  .tor-mp-header .mp-logo .mp-logo-txt { font-size: 15px; }
  .tor-mp-header .mp-logo img,
  .tor-mp-header .mp-logo .custom-logo-link img { max-height: 48px !important; }
  .tor-mp .mp-trust-grid { grid-template-columns: 1fr; gap: 16px; }
  .tor-mp .mp-trust-item { padding: 0; }
  .tor-mp .mp-trust-item:first-child { padding-left: 0; }
  .tor-mp .mp-rcard { flex-direction: column; }
  .tor-mp .mp-rcard-media { width: 100%; flex: 0 0 auto; height: 200px; }
  .tor-mp .mp-rcard-price { border-left: 0; border-top: 1px solid var(--mp-border); align-items: center; text-align: left; min-width: 0; flex-direction: row; justify-content: space-between; gap: 12px; }
  .tor-mp .mp-rcard-price .mp-btn { margin-top: 0 !important; }
  .tor-mp .mp-cta-bar { flex-direction: column; align-items: flex-start; padding: 22px; }
  .tor-mp .mp-cta-bar .mp-cta-form { flex-basis: auto; width: 100%; }
  /* hero search: stack inputs full-width */
  .tor-mp .mp-search-row .mp-field, .tor-mp .mp-search-row .mp-btn { flex: 1 1 100%; }
  .tor-mp .mp-tab-panel .mp-field { flex: 1 1 100%; }
  .tor-mp .mp-results-bar { gap: 8px; }
}

/* Mobile nav drawer (header) */
.tor-mp-header .mp-mnav { display: none; }
@media (max-width: 767px) {
  .tor-mp-header .mp-mnav.is-open { display: block; background: var(--mp-hero-bg2); border-top: 1px solid rgba(255,255,255,.08); padding: 10px 20px; }
  .tor-mp-header .mp-mnav a { display: block; color: #e9e6dd; padding: 10px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.06); }
}

/* ============================================================
   PHASE 3 — Global page-body skin (applies site-wide; marketplace.css
   loads on every front-end page). Re-styles legacy inner-page markup
   (.main_page_title hero, forms, cards) to match the marketplace look
   WITHOUT editing each template. All scoped to body.tor-mp-skin.
   ============================================================ */
body.tor-mp-skin {
  --mp-cta: #5c6b3d; --mp-cta-hover:#4b5731; --mp-ink:#23241f; --mp-page-bg:#f6f4ee;
  --mp-accent: #c48b39; --mp-accent-hover:#b17d2f;
  --mp-border:#e7e3d8; --mp-radius:12px;
}

/* Inner-page hero banner: replace the old jagged/zigzag dark banner with a
   clean charcoal hero. */
body.tor-mp-skin .main_page_title {
  background: #20211c !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: clamp(180px, 24vw, 280px) !important;
  display: flex !important; align-items: center; justify-content: center;
  position: relative; margin: 0 !important; padding: 40px 20px !important;
  border: 0 !important;
}
/* kill the old orange zig-zag / wave pseudo borders if present */
body.tor-mp-skin .main_page_title::before,
body.tor-mp-skin .main_page_title::after { display: none !important; }
body.tor-mp-skin .main_page_title h1,
body.tor-mp-skin .main_page_title .title,
body.tor-mp-skin .main_page_title h2 {
  color: #fff !important; font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important; font-size: clamp(28px, 4.4vw, 46px) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.4); margin: 0 !important;
}

/* Page content background + base font */
body.tor-mp-skin .site-content,
body.tor-mp-skin #content { background: var(--mp-page-bg); }
body.tor-mp-skin { font-family: 'Poppins', sans-serif; }

/* Auth + profile + generic content cards -> clean white cards */
body.tor-mp-skin .sign_up_box,
body.tor-mp-skin .up-card,
body.tor-mp-skin .my_profile_box,
body.tor-mp-skin .complete_profile_section {
  background: #fff; border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}

/* ============================================================
   AUTH PAGES POLISH (login / sign-up) — clean layout + labels
   ============================================================ */
/* Pull the form card fully BELOW the dark hero (was overlapping, making the
   top "Email Address" label sit on the dark band and look faded). */
/* The auth section uses WOW.js `slideInUp` + a -123px margin. On slower loads the
   animation leaves the card transformed/hidden ("gayab ho jata hai"). Fully
   neutralize the animation and the negative margin so the card always renders
   correctly below the hero, whether or not WOW.js runs. */
body.tor-mp-skin .sign_up_section,
body.tor-mp-skin .sign_up_section.wow,
body.tor-mp-skin .sign_up_section.slideInUp,
body.tor-mp-skin .sign_up_section.animated {
  margin-top: 0 !important;      /* was -123px, pulling the card up into the dark hero */
  padding: 40px 16px 60px !important;
  transform: none !important;    /* neutralize wow slideInUp offset */
  -webkit-animation: none !important;
  animation: none !important;
  animation-name: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.tor-mp-skin .sign_up_box {
  max-width: 1000px; margin: 0 auto; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: stretch; padding: 0 !important;
}
body.tor-mp-skin .sign_up_box .image_box { flex: 1 1 320px; min-width: 280px; }
body.tor-mp-skin .sign_up_box .image_box img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.tor-mp-skin .sign_up_box .sign_up_form,
body.tor-mp-skin .sign_up_box .login_form { flex: 1 1 380px; padding: 34px clamp(20px,4vw,44px) !important; }

/* Labels: always dark + readable (never faded on hero) */
body.tor-mp-skin .sign_up_form label,
body.tor-mp-skin .login_form label,
body.tor-mp-skin .form_group label {
  color: var(--mp-ink) !important; font-weight: 600 !important; font-size: 14px !important;
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
/* Inputs */
body.tor-mp-skin .sign_up_form input:not([type=checkbox]):not([type=radio]),
body.tor-mp-skin .login_form input:not([type=checkbox]):not([type=radio]) {
  width: 100%; padding: 12px 14px; border: 1px solid var(--mp-border) !important;
  border-radius: 8px !important; font-size: 14px; background: #fff; color: var(--mp-ink);
}

/* The little "i" info button next to Email Address -> subtle round chip (was a
   stray orange dot). Uses a tooltip on hover. */
body.tor-mp-skin .custom-tooltip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; min-width: 16px; padding: 0; border: 0; cursor: help;
  border-radius: 50%; background: var(--mp-border); color: var(--mp-ink);
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; position: relative;
}
body.tor-mp-skin .custom-tooltip:hover { background: var(--mp-cta); color: #fff; }
body.tor-mp-skin .custom-tooltip:hover::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; background: #23241f; color: #fff;
  font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: 6px; z-index: 20;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* Password field: eye icon sits inside, not overlapping */
body.tor-mp-skin .login_form .password,
body.tor-mp-skin .sign_up_form .password { position: relative; }
body.tor-mp-skin .login_form .password i,
body.tor-mp-skin .sign_up_form .password i {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #8a8676;
}

/* Remember-me row + forgot link */
body.tor-mp-skin .remember_forgot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
body.tor-mp-skin .remember_forgot .check_box { display: flex; align-items: center; gap: 7px; }
body.tor-mp-skin .remember_forgot label { margin: 0 !important; font-weight: 500 !important; }
body.tor-mp-skin .forgot_password { color: var(--mp-accent) !important; font-weight: 600; font-size: 13px; }

/* OR divider */
body.tor-mp-skin .ro_login { text-align: center; margin: 20px 0; position: relative; }
body.tor-mp-skin .ro_login::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--mp-border); }
body.tor-mp-skin .ro_login span { position: relative; background: #fff; padding: 0 14px; color: var(--mp-accent); font-weight: 700; font-size: 13px; }

/* "New to OUTFITTER / Create an account" + sign-up tabs already themed elsewhere */
body.tor-mp-skin .already_sign { text-align: center; margin-top: 18px; font-size: 14px; }
body.tor-mp-skin .already_sign a { color: var(--mp-cta) !important; font-weight: 700; }

@media (max-width: 780px) {
  body.tor-mp-skin .sign_up_box .image_box { display: none; }   /* hide side image on mobile */
  body.tor-mp-skin .sign_up_box .sign_up_form,
  body.tor-mp-skin .sign_up_box .login_form { flex: 1 1 100%; }
}

/* Primary buttons across legacy pages -> brown (only obvious submit buttons) */
body.tor-mp-skin .sign_up_box button[type="submit"],
body.tor-mp-skin .login_form button[type="submit"],
body.tor-mp-skin .my_profile_box button[type="submit"],
body.tor-mp-skin .btn_dark,
body.tor-mp-skin a.btn_dark,
body.tor-mp-skin button.tor-primary-btn {
  background-color: var(--mp-cta) !important; color: #fff !important;
  border: 0 !important; border-radius: 8px !important;
}
body.tor-mp-skin .sign_up_box button[type="submit"]:hover,
body.tor-mp-skin .login_form button[type="submit"]:hover,
body.tor-mp-skin .btn_dark:hover,
body.tor-mp-skin a.btn_dark:hover {
  background-color: var(--mp-cta-hover) !important;
}

/* ---- Auth pages (login / sign-up / forgot / reset) extra polish ---- */
/* Links & accents inside auth cards use gold */
body.tor-mp-skin .sign_up_box a.forget_pass,
body.tor-mp-skin .sign_up_box .forget_pass,
body.tor-mp-skin .sign_up_box .signup_link a,
body.tor-mp-skin .login_form .signup_link a { color: var(--mp-accent) !important; }
body.tor-mp-skin .sign_up_box a.btn_light,
body.tor-mp-skin .login_form a.btn_light { color: var(--mp-cta) !important; }

/* "OR" divider text -> gold */
body.tor-mp-skin .sign_up_form .or_divider,
body.tor-mp-skin .sign_up_box .or,
body.tor-mp-skin .login_form .or { color: var(--mp-accent) !important; }

/* Social login buttons (miniOrange .mo_btn + legacy fb/google) -> clean white,
   brand icon retained, matches the card instead of bright blue. */
body.tor-mp-skin .social_links .mo_btn,
body.tor-mp-skin .social_links a.mo_btn,
body.tor-mp-skin .login_fb_btn a.mo_btn,
body.tor-mp-skin .login_google_btn a.mo_btn,
body.tor-mp-skin a.mo_btn-social {
  background: #fff !important;
  background-color: #fff !important;
  color: #23241f !important;
  border: 1px solid var(--mp-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  font-weight: 600 !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body.tor-mp-skin .social_links .mo_btn:hover,
body.tor-mp-skin a.mo_btn-social:hover {
  border-color: var(--mp-cta) !important;
  box-shadow: 0 2px 8px rgba(92,107,61,.18) !important;
}
body.tor-mp-skin .social_links .mo_btn *,
body.tor-mp-skin a.mo_btn-social * { color: inherit !important; }

/* Focus ring on auth inputs -> brown (was default) */
body.tor-mp-skin .sign_up_box input:focus,
body.tor-mp-skin .login_form input:focus,
body.tor-mp-skin .my_profile_box input:focus,
body.tor-mp-skin .my_profile_box textarea:focus,
body.tor-mp-skin .my_profile_box select:focus {
  border-color: var(--mp-cta) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(92,107,61,.15) !important;
}
/* Remember-me / checkbox accent */
body.tor-mp-skin .sign_up_box input[type="checkbox"],
body.tor-mp-skin .login_form input[type="checkbox"] { accent-color: var(--mp-cta) !important; }

/* ============================================================
   PHASE 4b — Single trip/service detail page
   ============================================================ */
.tor-mp-single .mp-single-hero { align-items: flex-end; }
.tor-mp-single .mp-single-badge { background: var(--mp-cta); color:#fff; margin-bottom: 10px; display:inline-block; }
.tor-mp-single .mp-single-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; color:#fff; }
.tor-mp-single .mp-single-meta span { display:inline-flex; align-items:center; gap:6px; font-size:14px; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.tor-mp-single .mp-single-meta .tor-mp-stars svg { width:14px; height:14px; }

.tor-mp .mp-single-layout { display:grid; grid-template-columns: 1fr 340px; gap: 28px; padding: 32px 0 56px; align-items:start; }
.tor-mp .mp-single-main { display:flex; flex-direction:column; gap:20px; }
.tor-mp .mp-single-host { color: var(--mp-muted); font-size:14px; margin:0; }
.tor-mp .mp-single-host a { color: var(--mp-cta); font-weight:600; }
.tor-mp .mp-card-pad { padding: 22px 24px; }
.tor-mp .mp-card-pad h2 { font-size:20px; font-weight:700; margin:0 0 12px; color:var(--mp-ink); }
.tor-mp .mp-prose { color: var(--mp-text); font-size:15px; line-height:1.6; }
.tor-mp .mp-prose p { margin:0 0 10px; }

.tor-mp .mp-detail-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.tor-mp .mp-detail-grid li { display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--mp-border); padding-bottom:8px; }
.tor-mp .mp-dt { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--mp-muted); font-weight:600; }
.tor-mp .mp-dd { font-size:15px; color:var(--mp-ink); font-weight:500; }

.tor-mp .mp-single-side { position:sticky; top:84px; }
.tor-mp .mp-book-card { box-shadow: var(--mp-shadow-h); }
.tor-mp .mp-book-price { font-size:24px; font-weight:800; color:var(--mp-ink); margin-bottom:14px; }
.tor-mp .mp-book-price small { font-size:14px; font-weight:500; color:var(--mp-muted); }
.tor-mp .mp-book-facts { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.tor-mp .mp-book-facts li { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--mp-text); }
.tor-mp .mp-book-note { text-align:center; font-size:12px; color:var(--mp-muted); margin:10px 0 0; }

@media (max-width: 991px) {
  .tor-mp .mp-single-layout { grid-template-columns: 1fr; }
  .tor-mp .mp-single-side { position:static; }
  .tor-mp .mp-detail-grid { grid-template-columns: 1fr; }
}

/* Service packages on single service page */
.tor-mp .mp-pkg-list { display:flex; flex-direction:column; gap:12px; }
.tor-mp .mp-pkg { border:1px solid var(--mp-border); border-radius:10px; padding:14px 16px; }
.tor-mp .mp-pkg-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tor-mp .mp-pkg-desc { margin:8px 0 0; font-size:14px; color:var(--mp-muted); }

/* ---- Species / attribute tag chips (single detail page) ---- */
.tor-mp .mp-tag-list { display:flex; flex-wrap:wrap; gap:8px; }
.tor-mp .mp-tag { display:inline-block; padding:5px 12px; border-radius:999px; background:#eef0e6; color:var(--mp-cta,#5c6b3d); font-size:13px; font-weight:600; border:1px solid #dfe3d2; }

/* ---- Collapsible / type-conditional filter groups ---- */
.tor-mp .mp-fgroup.mp-fg-collapsible > h4 { cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.tor-mp .mp-fgroup.mp-fg-collapsible > h4::after { content:"–"; font-size:18px; line-height:1; color:var(--mp-muted); font-weight:700; }
.tor-mp .mp-fgroup.mp-fg-collapsible.is-collapsed > h4::after { content:"+"; }
.tor-mp .mp-fgroup.mp-fg-collapsible.is-collapsed .mp-fg-body { display:none; }
/* Type-conditional groups hidden until their trip type is chosen (JS toggles .is-shown) */
/* Type-specific filter groups stay hidden until their Trip Type is chosen. Uses
   :not(.is-shown) + !important so it holds even if the reveal JS is delayed/blocked
   by a third-party (Elementor) error in the bundled scripts. */
.tor-mp .mp-fgroup[data-fg-type]:not(.is-shown) { display:none !important; }
.tor-mp .mp-fgroup[data-fg-type].is-shown { display:block; }
.tor-mp .mp-fg-hint { font-size:12px; color:var(--mp-muted); margin:-4px 0 8px; }

/* =========================================================
   GLOBAL RESPONSIVE SAFETY NET for legacy inner templates
   (dashboard, bookings, profile, create-a-trip). These pages
   carry .tor-mp-skin on <body> site-wide. Fix the common
   overflow culprits without rewriting each template.
   ========================================================= */
/* Never let the page scroll sideways. */
body.tor-mp-skin { overflow-x: hidden; }

@media (max-width: 782px) {
  /* Dashboard tab strips: turn fixed grids into a swipeable row. */
  body.tor-mp-skin .ud-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  body.tor-mp-skin .ud-tabs .ud-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body.tor-mp-skin .ud-tabs::-webkit-scrollbar { height: 5px; }
  body.tor-mp-skin .ud-tabs::-webkit-scrollbar-thumb { background:#c9c3b2; border-radius:3px; }

  /* Any multi-column grid in legacy dashboards → single column. */
  body.tor-mp-skin .ud-stats,
  body.tor-mp-skin .dashboard_grid,
  body.tor-mp-skin .two_col,
  body.tor-mp-skin .three_col,
  body.tor-mp-skin .row.gx-4 { grid-template-columns: 1fr !important; }

  /* Tables become horizontally scrollable instead of pushing width. */
  body.tor-mp-skin table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Wide fixed-width blocks clamp to viewport. */
  body.tor-mp-skin .container,
  body.tor-mp-skin [class*="col-"],
  body.tor-mp-skin .card,
  body.tor-mp-skin form { max-width:100% !important; }

  /* Long flex rows of buttons/pills wrap. */
  body.tor-mp-skin .btn_group,
  body.tor-mp-skin .filter_row,
  body.tor-mp-skin .tabs_row { flex-wrap: wrap !important; }
}

/* ===== Registry-driven field controls (create-a-trip form) ===== */
.tor-fgroup-block { margin: 18px 0; }
.tor-fgroup-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--mp-cta, #5c6b3d); color: var(--mp-ink, #23281c); }
.tor-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.tor-fg { display: flex; flex-direction: column; gap: 5px; }
.tor-fg.tor-fg-textarea, .tor-fg.tor-fg-richtext, .tor-fg.tor-fg-checklist, .tor-fg.tor-fg-tier_repeater, .tor-fg.tor-fg-gallery, .tor-fg.tor-fg-multiselect { grid-column: 1 / -1; }
.tor-fg label { font-size: 13px; font-weight: 600; color: #3a3f30; }
.tor-fg input[type=text], .tor-fg input[type=number], .tor-fg input[type=date], .tor-fg select, .tor-fg textarea { width: 100%; padding: 9px 11px; border: 1px solid #d7d3c4; border-radius: 8px; font-size: 14px; background: #fff; }
.tor-fg .tor-req { color: #b4462e; }
.tor-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; max-height: 220px; overflow-y: auto; border: 1px solid #e5e1d4; border-radius: 8px; padding: 10px; }
.tor-check { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }

/* ---- Modern pill multi-choice (replaces ugly <select multiple> scroll boxes) ---- */
.tor-pillfield { border: 1px solid #e5e1d4; border-radius: 10px; padding: 10px; background: #fbfaf6; }
.tor-pill-search { width: 100%; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #d7d3c4 !important; border-radius: 8px; font-size: 13px; background: #fff; }
.tor-pillfield--searchable .tor-pills { max-height: 210px; overflow-y: auto; }
.tor-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tor-pill {
  display: inline-flex; align-items: center; gap: 0; cursor: pointer; user-select: none;
  border: 1px solid #d4d0c1; background: #fff; color: #3a3f30; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 500; line-height: 1.2;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.tor-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.tor-pill span { position: relative; padding-left: 0; }
.tor-pill:hover { border-color: var(--mp-cta, #5c6b3d); box-shadow: 0 1px 4px rgba(92,107,61,.12); }
.tor-pill.is-on {
  background: var(--mp-cta, #5c6b3d) !important; border-color: var(--mp-cta, #5c6b3d) !important; color: #fff !important;
}
.tor-pill.is-on span { color: #fff !important; }
.tor-pill.is-on span::before {
  content: "✓ "; font-weight: 700;
}
.tor-pill.is-hidden { display: none; }
/* Disabled twin (Inclusions/Exclusions cross-lock): can't pick the same item in both. */
.tor-pill.is-disabled { opacity: .4; pointer-events: none; text-decoration: line-through; }
/* "Other" free-text input revealed by an Other pill */
.tor-cv-other-text { width: 100%; box-sizing: border-box; }
.tor-tier-repeater .tor-tier-row { display: flex; gap: 8px; margin-bottom: 6px; }
.tor-tier-add, .tor-tier-repeater button { margin-top: 4px; background: #eef0e6; border: 1px solid #dfe3d2; border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.tor-num-unit { display: flex; gap: 8px; }
.tor-num-unit input { flex: 2; } .tor-num-unit select { flex: 1; }
.tor-auto { font-size: 12px; color: #999; }
@media (max-width: 640px) { .tor-fgrid, .tor-checklist { grid-template-columns: 1fr; } }

/* ===== P9 responsive hardening — profile/payout/dashboard specifics ===== */
@media (max-width: 782px) {
  body.tor-mp-skin .documents_upload { width: 100% !important; }
  body.tor-mp-skin .profile-form-wrap,
  body.tor-mp-skin [class*="form-wrap"] { max-width: 100% !important; }
  /* tables inside these templates scroll rather than push width */
  body.tor-mp-skin .trip_pyment_info table,
  body.tor-mp-skin .payout_table,
  body.tor-mp-skin .booking_table,
  body.tor-mp-skin .dashboard_table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* flex rows of trip cards / stat tiles wrap */
  body.tor-mp-skin .trip_info_item,
  body.tor-mp-skin .adventure_box,
  body.tor-mp-skin .sidebar_info,
  body.tor-mp-skin .booking_details_form { flex-wrap: wrap !important; max-width: 100% !important; }
}
/* booking summary block (P8) sits nicely in trip_details */
.tor-booking-summary { margin-top: 10px; }

/* ===== P9 pixel-fix: payout table + company-profile overflow (measured) ===== */
/* Force ALL front-end tables to scroll, higher specificity, not media-gated */
body.tor-mp-skin table,
.page-template-payout table,
.tor-mp table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
/* company-profile: the slide-in animated text block overflows right; clamp it */
body.tor-mp-skin .company_info_text,
body.tor-mp-skin [class*="slideInRight"],
body.tor-mp-skin [class*="slideInLeft"] { max-width: 100% !important; }
/* animation transforms can push elements off-canvas; keep them contained */
body.tor-mp-skin .wow { max-width: 100%; }
/* absolute belt: never allow the page to scroll sideways */
html body.tor-mp-skin { overflow-x: hidden !important; }

/* ===== P9 real fix: clip sideways scroll on <html> too (body alone insufficient — scroll happens on documentElement) ===== */
html:has(body.tor-mp-skin) { overflow-x: hidden !important; max-width: 100%; }
/* fallback for browsers without :has — apply globally on front end via html.tor-mp-html (added by body_class sibling) */
html.tor-mp-html { overflow-x: hidden !important; }

/* ===== Filter checkbox list — clean vertical alignment (fix misplacement) ===== */
.tor-mp .mp-check-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.tor-mp .mp-check-list .mp-check { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 14px; cursor: pointer; }
.tor-mp .mp-check-list .mp-check input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.tor-mp .mp-check-list .mp-check span { flex: 1; line-height: 1.3; }
.tor-mp .mp-check.is-hidden { display: none; }
/* collapse toggle +/- clearly clickable */
.tor-mp .mp-fg-collapsible > h4 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }

/* ===== Filter checkbox — fully controlled (kills theme's stray ::after checkmark on unchecked boxes) ===== */
.tor-mp .mp-check input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; min-width:18px; margin:0;
  border:2px solid #b9bdad; border-radius:4px; background:#fff;
  position:relative; cursor:pointer; flex:0 0 auto; box-shadow:none; outline:none;
}
/* remove any theme-injected pseudo checkmark on the UNCHECKED state */
.tor-mp .mp-check input[type="checkbox"]::before,
.tor-mp .mp-check input[type="checkbox"]::after{ content:none !important; border:0 !important; background:none !important; clip-path:none !important; display:none !important; }
/* our own checkmark only when checked */
.tor-mp .mp-check input[type="checkbox"]:checked{ background:var(--mp-cta,#5c6b3d); border-color:var(--mp-cta,#5c6b3d); }
.tor-mp .mp-check input[type="checkbox"]:checked::after{
  content:"" !important; display:block !important;
  position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid #fff !important; border-width:0 2px 2px 0 !important;
  transform:rotate(45deg); background:none !important;
}
.tor-mp .mp-check input[type="checkbox"]:focus{ outline:2px solid rgba(92,107,61,.4); outline-offset:1px; }

/* ===== Filter affordances — make it obvious things are clickable ===== */
/* Collapsible filter headers: pointer + hover + clear +/- indicator */
.tor-mp .mp-fg-collapsible > h4 { cursor: pointer; user-select: none; transition: color .15s; display: flex; align-items: center; justify-content: space-between; }
.tor-mp .mp-fg-collapsible > h4:hover { color: var(--mp-cta, #5c6b3d); }
.tor-mp .mp-fg-collapsible > h4::after { content: "\2212"; /* minus */ font-size: 18px; line-height: 1; color: #9aa088; font-weight: 700; margin-left: 8px; transition: transform .15s; }
.tor-mp .mp-fg-collapsible.is-collapsed > h4::after { content: "\002B"; /* plus */ color: var(--mp-cta, #5c6b3d); }
/* whole checkbox row is clickable + hover highlight */
.tor-mp .mp-check { cursor: pointer; border-radius: 6px; padding: 5px 6px; transition: background .12s; }
.tor-mp .mp-check:hover { background: #f2f4ec; }
.tor-mp .mp-check input { cursor: pointer; }
/* selects + inputs show pointer */
.tor-mp .mp-field, .tor-mp select.mp-field { cursor: pointer; }
/* Apply Filters button — prominent, sticky at bottom of drawer on mobile */
.tor-mp .mp-apply { position: sticky; bottom: 0; margin-top: 14px; font-weight: 700; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
/* "Filters" toggle button (mobile) — make it look like a clear button */
.tor-mp .mp-filter-toggle { cursor: pointer; }
/* small hint under the Filters bar telling users to tap to filter */
.tor-mp .mp-filter-hint { font-size: 12px; color: var(--mp-muted, #7a7f6e); margin: 4px 0 0; }

/* datalists must stay hidden (some themes set display:block on unknown elements) */
datalist { display: none !important; }