/* ============================================================
   TownVue — Directory index pages, "Immersive" build.
   SHARED across Business / Events / Experiences / Trading Post
   index pages. Loads ALONGSIDE state-immersive.css (tokens,
   tv-btn, color bands, serif/sans, reveal). Everything scoped
   under .state-immersive so it can't leak site-wide; Bootstrap
   (loaded by _BaseLayout) still drives the filter panel + form
   controls, which we leave alone.
   ============================================================ */

/* Full-bleed inside _DirectoryLayout's .content--inner shell (loads only on
   directory pages, so these resets are page-scoped in practice). */
.page__main{ padding-block:0 !important; }
.content--inner{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }

/* The directory page is cream, not the navy default of .state-immersive. */
.state-immersive.dir-page{ background:var(--beige); color:var(--ink); min-height:60vh; }

/* (Content-type tab nav `.dir-nav` is self-contained in _DirectoryNav.cshtml,
   since it renders outside the .state-immersive scope.) */

/* ── Page wrapper ── */
.state-immersive .dir-wrap{ max-width:var(--maxw); margin-inline:auto; padding:34px 28px 80px; }

/* Heading row */
.state-immersive .dir-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.state-immersive .dir-head-l{ display:flex; align-items:center; gap:16px; }
.state-immersive .dir-head-ico{ flex:none; width:50px; height:50px; border-radius:13px; background:var(--clay-soft); color:var(--clay-700); display:flex; align-items:center; justify-content:center; }
.state-immersive .dir-head-ico svg{ width:26px; height:26px; }
.state-immersive .dir-h1{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,4.4vw,52px); line-height:1.02; letter-spacing:-.02em; color:var(--navy); }
.state-immersive .dir-add{ flex:none; }
.state-immersive .dir-sub{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:15.5px; color:var(--ink-soft); }
.state-immersive .dir-sub .pin{ color:var(--clay); flex:none; }
.state-immersive .dir-sub b{ color:var(--navy); font-weight:800; }

/* ── Save banner (sage, dismissible) ── */
.state-immersive .dir-savebanner{ display:flex; align-items:center; gap:18px; background:var(--sage-soft); border:1px solid rgba(143,174,145,.5); border-radius:var(--r-lg); padding:20px 24px; margin-top:26px; }
.state-immersive .dir-savebanner .ic{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--clay); color:#fff; display:flex; align-items:center; justify-content:center; }
.state-immersive .dir-savebanner .tx{ flex:1; min-width:0; }
.state-immersive .dir-savebanner .tx strong{ display:block; font-size:16px; font-weight:800; color:var(--navy); }
.state-immersive .dir-savebanner .tx span{ font-size:14px; color:var(--ink-soft); line-height:1.45; }
.state-immersive .dir-savebanner .tv-btn{ flex:none; }
.state-immersive .dir-savebanner .x{ flex:none; background:none; border:0; color:var(--muted); font-size:20px; line-height:1; padding:4px 6px; cursor:pointer; }
.state-immersive .dir-savebanner .x:hover{ color:var(--navy); }
/* Mobile: the fixed-width button + icon starve the text into one word per line.
   Stack to icon+text on top, full-width button below, close X pinned to the corner. */
@media (max-width:560px){
  .state-immersive .dir-savebanner{ flex-wrap:wrap; position:relative; gap:14px; padding:18px; }
  .state-immersive .dir-savebanner .tx{ flex:1 1 0; min-width:0; padding-right:26px; }
  .state-immersive .dir-savebanner .tv-btn{ flex:1 0 100%; justify-content:center; text-align:center; }
  .state-immersive .dir-savebanner .x{ position:absolute; top:8px; right:8px; }
}

/* (The in-page location bar was removed; location now lives in the top-header
   chip — _HeaderLocationSearch in _HomeHeader, gated by ViewBag.ShowHeaderLocation.) */

/* ── Search + filters row ── */
.state-immersive .dir-searchrow{ display:flex; align-items:stretch; gap:12px; margin-top:18px; }
.state-immersive .dir-searchbox{ flex:1; display:flex; align-items:center; gap:11px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-sm); padding:0 20px; }
.state-immersive .dir-searchbox svg{ flex:none; color:var(--muted); }
.state-immersive .dir-searchbox input{ flex:1; min-width:0; border:0; background:transparent; outline:none; font-family:var(--sans); font-size:16px; color:var(--navy); padding:15px 0; }
.state-immersive .dir-searchbox input::placeholder{ color:var(--muted); }
.state-immersive .dir-filterbtn{ flex:none; display:inline-flex; align-items:center; gap:9px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-sm); padding:0 22px; font-size:15px; font-weight:700; color:var(--navy); cursor:pointer; position:relative; }
.state-immersive .dir-filterbtn:hover{ border-color:var(--navy); }
.state-immersive .dir-filterbtn .filter-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--clay); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* ── Category chips (horizontal scroll) ── */
.state-immersive .dir-chips{ display:flex; gap:10px; margin-top:16px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.state-immersive .dir-chip{ flex:none; padding:9px 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); font-size:14px; font-weight:700; white-space:nowrap; box-shadow:var(--shadow-sm); transition:all .15s; }
.state-immersive .dir-chip:hover{ border-color:var(--navy); color:var(--navy); }
.state-immersive .dir-chip.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ── Results bar ── */
.state-immersive .dir-resultsbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; flex-wrap:wrap; }
.state-immersive .dir-resultsbar .count{ font-size:15px; font-weight:700; color:var(--ink-soft); }
.state-immersive .dir-resultsbar .count b{ color:var(--navy); }
.state-immersive .view-toggle{ display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; box-shadow:var(--shadow-sm); }
.state-immersive .view-toggle .btn{ border:0; background:transparent; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink-soft); padding:8px 18px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.state-immersive .view-toggle .btn.active{ background:var(--navy); color:#fff; }

/* ── Map container (Business + Events) ── */
.state-immersive #businessMapContainer, .state-immersive #eventsMapContainer, .state-immersive #experienceMapContainer{ display:none; margin-top:22px; }
.state-immersive #businessMap, .state-immersive #eventsMap, .state-immersive #experienceMap{ width:100%; height:560px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); }

/* ── Card grid ── */
.state-immersive .dir-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:22px; }
@media (max-width:1080px){ .state-immersive .dir-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .state-immersive .dir-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .state-immersive .dir-grid{ grid-template-columns:1fr; } }

/* ── Listing card (overrides Bootstrap .card) ── */
.state-immersive .card--business{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.state-immersive .card--business:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* Colored header band */
.state-immersive .dc-head{ position:relative; height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.state-immersive .dc-head .dc-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Stretched click-through to Details (the header is a div, not an anchor, so
   the cross-ref links below aren't nested inside another anchor). */
.state-immersive .dc-head-link{ position:absolute; inset:0; z-index:1; }
.state-immersive .dc-head .dc-initial{ font-family:var(--serif); font-size:56px; font-weight:600; color:rgba(255,255,255,.92); line-height:1; }
.state-immersive .dc-badge{ position:absolute; top:11px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:var(--r-pill); z-index:2; white-space:nowrap; }
.state-immersive .dc-badge svg{ width:12px; height:12px; }
.state-immersive .dc-badge--status{ left:11px; background:rgba(11,45,57,.66); color:#fff; backdrop-filter:blur(2px); }
.state-immersive .dc-badge--status.is-open{ background:rgba(111,142,114,.92); }
.state-immersive .dc-badge--dist{ right:11px; background:rgba(11,45,57,.66); color:#fff; backdrop-filter:blur(2px); }
.state-immersive .dc-coupon{ position:absolute; left:11px; bottom:11px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:var(--navy); font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:var(--r-pill); }
.state-immersive .dc-coupon svg{ width:12px; height:12px; }
.state-immersive .dc-xref{ position:absolute; right:11px; bottom:11px; z-index:3; display:flex; gap:6px; }
.state-immersive .dc-xref a{ width:28px; height:28px; border-radius:8px; background:rgba(11,45,57,.55); color:#fff; display:flex; align-items:center; justify-content:center; }
.state-immersive .dc-xref a:hover{ background:var(--gold); color:var(--navy); }
.state-immersive .dc-xref a i, .state-immersive .dc-xref a svg{ font-size:13px; }

/* Card body */
.state-immersive .card--business .card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.state-immersive .dc-title{ font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.15; margin:0; }
.state-immersive .dc-title a{ color:var(--navy); }
.state-immersive .dc-title a:hover{ color:var(--clay-700); }
.state-immersive .dc-cat{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--clay-700); margin-top:7px; }
.state-immersive .dc-rating{ display:flex; align-items:center; gap:4px; margin-top:7px; font-size:13px; color:var(--muted); }
.state-immersive .dc-rating .stars{ color:var(--gold); letter-spacing:1px; }
.state-immersive .dc-meta{ display:flex; align-items:flex-start; gap:8px; margin-top:11px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; }
.state-immersive .dc-meta svg{ flex:none; margin-top:2px; color:var(--muted); }
.state-immersive .dc-hours{ margin-top:10px; font-size:13px; font-weight:700; }
.state-immersive .dc-hours .open{ color:var(--sage-700); }
.state-immersive .dc-hours .closed{ color:var(--clay-700); }
.state-immersive .dc-hours .appt{ color:var(--ink-soft); }
/* Trading Post seller / listed line */
.state-immersive .dc-seller{ margin-top:11px; font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:5px; }
.state-immersive .dc-seller .dc-sellername{ color:var(--ink-soft); font-weight:700; }
/* Attribute pills (Indoor / Outdoor / Good for kids / duration, etc.) */
.state-immersive .dc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.state-immersive .dc-tag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 10px; line-height:1.3; }
.state-immersive .dc-tag i{ font-size:10px; color:var(--sage-700); }
/* Actions stack vertically (heart + Call on row 1, then Directions, then
   Details) so longer labels never clip in narrow 4-up cards. */
.state-immersive .dc-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:16px; }
.state-immersive .dc-actions-row{ display:flex; align-items:center; gap:8px; }
.state-immersive .dc-actions .dc-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px; border-radius:var(--r-pill); font-size:13.5px; font-weight:700; border:1.5px solid var(--line); background:var(--paper); color:var(--navy); cursor:pointer; transition:all .15s; white-space:nowrap; text-decoration:none; }
.state-immersive .dc-actions-row .dc-btn{ flex:1; width:auto; min-width:0; }
.state-immersive .dc-actions .dc-btn i{ font-size:13px; }
.state-immersive .dc-actions .dc-btn:hover{ border-color:var(--navy); }
.state-immersive .dc-actions .dc-btn--primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.state-immersive .dc-actions .dc-btn--primary:hover{ background:#06222b; color:#fff; }
/* Favorite button (shared partial) keeps a compact circular footprint */
.state-immersive .dc-actions .favorite-btn,
.state-immersive .dc-actions-row > .btn{ flex:none; width:42px; height:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); color:var(--clay); }
.state-immersive .dc-actions .favorite-btn:hover{ border-color:var(--clay); }

/* ── Load more ── */
.state-immersive .dir-loadmore{ text-align:center; margin-top:40px; }
.state-immersive .dir-loadmore #loadMoreBtn, .state-immersive .dir-loadmore button{ display:inline-flex; align-items:center; gap:9px; background:var(--navy); color:#fff; border:0; border-radius:var(--r-pill); padding:15px 34px; font-family:var(--sans); font-size:16px; font-weight:700; cursor:pointer; transition:background .2s, transform .15s; }
.state-immersive .dir-loadmore #loadMoreBtn:hover:not(:disabled), .state-immersive .dir-loadmore button:hover:not(:disabled){ background:#06222b; transform:translateY(-2px); }
.state-immersive .dir-loadmore #loadMoreBtn:disabled, .state-immersive .dir-loadmore button:disabled{ opacity:.7; cursor:default; }
.state-immersive .dir-loadmore .count-note{ font-size:13.5px; color:var(--muted); margin-top:12px; }

/* Empty state */
.state-immersive .dir-empty{ text-align:center; padding:70px 20px; }
.state-immersive .dir-empty .ic{ font-size:42px; color:var(--sage); }
.state-immersive .dir-empty h4{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--navy); margin-top:14px; }
.state-immersive .dir-empty p{ color:var(--ink-soft); margin-top:8px; }

/* ── Owner CTA band ── */
.state-immersive .dir-ownercta{ background:var(--navy); color:#fff; }
.state-immersive .dir-ownercta-in{ max-width:var(--maxw); margin-inline:auto; padding:64px 28px; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.state-immersive .dir-ownercta .ey{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.state-immersive .dir-ownercta h2{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,48px); line-height:1.04; letter-spacing:-.02em; margin-top:14px; }
.state-immersive .dir-ownercta p{ font-size:16px; line-height:1.55; color:var(--muted-navy); margin-top:16px; max-width:46ch; }
.state-immersive .dir-ownercta .cta-side{ display:flex; justify-content:flex-end; }
@media (max-width:860px){
  .state-immersive .dir-ownercta-in{ grid-template-columns:1fr; gap:24px; }
  .state-immersive .dir-ownercta .cta-side{ justify-content:flex-start; }
}

/* ===== Events: two-column agenda (calendar + timeframe sidebar | agenda) ===== */
.state-immersive .ev-layout{ display:grid; grid-template-columns:300px 1fr; gap:30px; margin-top:24px; align-items:start; }
.state-immersive .ev-sidebar{ position:sticky; top:18px; display:flex; flex-direction:column; gap:16px; }

/* Calendar */
.state-immersive .ev-cal{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:18px; }
.state-immersive .ev-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.state-immersive .ev-cal-title{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--navy); }
.state-immersive .ev-cal-nav{ display:flex; gap:6px; }
.state-immersive .ev-cal-nav a{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:12px; }
.state-immersive .ev-cal-nav a:hover{ border-color:var(--navy); color:var(--navy); }
.state-immersive .ev-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.state-immersive .ev-cal-dow{ text-align:center; font-size:10px; font-weight:800; color:var(--muted); padding:4px 0; }
.state-immersive .ev-cal-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--ink); border-radius:8px; position:relative; }
.state-immersive .ev-cal-day.empty{ visibility:hidden; }
.state-immersive a.ev-cal-day:hover{ background:var(--beige-2); color:var(--navy); }
.state-immersive .ev-cal-day.today{ color:var(--clay-700); font-weight:800; }
.state-immersive .ev-cal-day.sel{ background:var(--navy); color:#fff; }
.state-immersive .ev-cal-day .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); position:absolute; bottom:5px; }
.state-immersive .ev-cal-day.sel .dot{ background:#fff; }
.state-immersive .ev-cal-hint{ font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.4; }

/* Timeframe filters */
.state-immersive .ev-tf{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:8px; }
.state-immersive .ev-tf a{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:var(--r-md); font-size:14.5px; font-weight:700; color:var(--ink-soft); }
.state-immersive .ev-tf a i{ width:16px; text-align:center; color:var(--muted); }
.state-immersive .ev-tf a:hover{ background:var(--beige); color:var(--navy); }
.state-immersive .ev-tf a.on{ background:var(--navy); color:#fff; }
.state-immersive .ev-tf a.on i{ color:var(--gold); }
.state-immersive .ev-tf a .ct{ margin-left:auto; font-size:12.5px; font-weight:800; color:var(--muted); }
.state-immersive .ev-tf a.on .ct{ color:var(--gold); }

/* Agenda column */
.state-immersive .ev-agenda-head{ font-family:var(--serif); font-size:clamp(22px,2.6vw,28px); font-weight:600; color:var(--navy); margin-bottom:18px; }
.state-immersive .event-date-subgroup{ margin-bottom:28px; }
.state-immersive .ev-group-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.state-immersive .ev-group-label{ font-size:13.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--clay-700); }
.state-immersive .ev-group-count{ font-size:12px; font-weight:700; color:var(--muted); background:var(--beige-2); border-radius:var(--r-pill); padding:3px 11px; }
.state-immersive .timeline-events{ display:flex; flex-direction:column; gap:12px; }

/* Event row */
.state-immersive .timeline-event-card{ display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:14px 16px; transition:transform .15s, box-shadow .15s; }
.state-immersive .timeline-event-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.state-immersive .ev-tile{ flex:none; width:66px; height:66px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.state-immersive .ev-tile .ev-initial{ font-family:var(--serif); font-size:30px; font-weight:600; color:rgba(255,255,255,.92); line-height:1; }
.state-immersive .ev-tile .ev-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.state-immersive .ev-tile .ev-free{ position:absolute; bottom:0; left:0; right:0; background:var(--gold); color:var(--navy); font-size:9px; font-weight:800; letter-spacing:.04em; text-align:center; padding:2px 0; }
.state-immersive .ev-main{ flex:1; min-width:0; }
.state-immersive .ev-title{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--navy); line-height:1.2; }
.state-immersive .ev-title:hover{ color:var(--clay-700); }
.state-immersive .ev-vtag{ display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-700); }
.state-immersive .ev-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 14px; margin-top:7px; font-size:13px; color:var(--ink-soft); }
.state-immersive .ev-meta .mi{ display:inline-flex; align-items:center; gap:5px; }
.state-immersive .ev-meta .mi i{ color:var(--muted); }
.state-immersive .ev-meta .free{ color:var(--sage-700); font-weight:800; }
.state-immersive .ev-meta .price{ color:var(--navy); font-weight:800; }
.state-immersive .ev-cats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.state-immersive .ev-cats .category-pill{ font-size:11px; font-weight:700; color:var(--clay-700); background:var(--clay-soft); border-radius:var(--r-pill); padding:3px 10px; }
.state-immersive .ev-actions{ flex:none; display:flex; align-items:center; gap:10px; }
.state-immersive .ev-actions .favorite-btn{ width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); color:var(--clay); }
.state-immersive .ev-actions .ev-view{ display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; border-radius:var(--r-pill); padding:10px 18px; font-size:13.5px; font-weight:700; white-space:nowrap; }
.state-immersive .ev-actions .ev-view:hover{ background:#06222b; color:#fff; }
@media (max-width:880px){
  .state-immersive .ev-layout{ grid-template-columns:1fr; }
  .state-immersive .ev-sidebar{ position:static; }
}
@media (max-width:560px){
  .state-immersive .timeline-event-card{ flex-wrap:wrap; }
  .state-immersive .ev-tile{ width:54px; height:54px; }
  .state-immersive .ev-actions{ width:100%; }
  .state-immersive .ev-actions .ev-view{ flex:1; justify-content:center; }
}

/* ── Filter panel restyle (keeps Bootstrap structure, immersive skin) ── */
.state-immersive #filterPanel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin-top:14px; box-shadow:var(--shadow-md); }
.state-immersive #filterPanel .filter-section{ background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; }
.state-immersive #filterPanel .form-label{ color:var(--navy); }

@media (max-width:680px){
  .state-immersive .dir-searchrow{ flex-wrap:wrap; }
  .state-immersive .dir-filterbtn{ padding:12px 18px; }
}

/* ── Trading Post: "Built to be safer" trust band ── */
.state-immersive .tp-safe{ margin-top:52px; }
.state-immersive .tp-safe-head{ background:var(--navy); color:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:26px 32px; display:flex; align-items:center; gap:18px; }
.state-immersive .tp-safe-ico{ flex:none; width:44px; height:44px; border-radius:50%; background:rgba(244,180,0,.16); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.state-immersive .tp-safe-head h2{ font-family:var(--serif); font-weight:600; font-size:24px; line-height:1.1; }
.state-immersive .tp-safe-head p{ font-size:14.5px; color:var(--muted-navy); margin-top:5px; }
.state-immersive .tp-safe-cols{ background:var(--paper); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg); padding:30px 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; box-shadow:var(--shadow-sm); }
.state-immersive .tp-col-h{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.state-immersive .tp-col-h i{ color:var(--sage-700); }
.state-immersive .tp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.state-immersive .tp-list li{ position:relative; padding-left:24px; font-size:14px; line-height:1.5; color:var(--ink-soft); }
.state-immersive .tp-list li b{ color:var(--navy); }
.state-immersive .tp-list li i{ position:absolute; left:0; top:3px; font-size:12px; }
.state-immersive .tp-list--yes li i{ color:var(--sage-700); }
.state-immersive .tp-list--no li i{ color:var(--clay); }
.state-immersive .tp-list--tips li i{ color:var(--navy); }
@media (max-width:820px){ .state-immersive .tp-safe-cols{ grid-template-columns:1fr; gap:24px; } }

/* ── Trading Post: pricing strip ── */
.state-immersive .tp-pricing{ margin-top:24px; background:var(--sage-tint, #EEF2EC); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 30px; display:flex; align-items:center; gap:30px 36px; flex-wrap:wrap; }
.state-immersive .tp-price{ display:flex; flex-direction:column; line-height:1.15; }
.state-immersive .tp-price .num{ font-family:var(--serif); font-size:28px; font-weight:600; color:var(--navy); }
.state-immersive .tp-price .num.free{ color:var(--sage-700); }
.state-immersive .tp-price .num.paid{ color:var(--clay-700); }
.state-immersive .tp-price .lbl{ font-size:13px; color:var(--ink-soft); margin-top:3px; }
.state-immersive .tp-pricing .tp-pcopy{ flex:1; min-width:220px; font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
.state-immersive .tp-pricing .tp-pcopy b{ color:var(--navy); }
@media (max-width:680px){ .state-immersive .tp-pricing{ gap:20px; } }