/*-- Design Tokens (--tl- namespace) */
:root {
	/* Spacing Scale (4px base) */
	--tl-space-1: 4px;
	--tl-space-2: 8px;
	--tl-space-3: 12px;
	--tl-space-4: 16px;
	--tl-space-6: 24px;
	--tl-space-8: 32px;
	--tl-space-12: 48px;

	/* Border Radius */
	--tl-radius: 8px;
	--tl-radius-pill: 20px;

	/* Shadows */
	--tl-shadow-card: 0 1px 3px rgba(0,0,0,0.08);
	--tl-shadow-hover: 0 3px 12px rgba(30,26,22,0.5);
	--tl-shadow-modal: 0 8px 32px rgba(30,26,22,0.18);

	/* Typography */
	--tl-font-display: 'DM Sans', sans-serif;
	--tl-font-body: 'DM Sans', sans-serif;
	--tl-text-h1: 2rem;
	--tl-text-h2: 1.5rem;
	--tl-text-h3: 1.25rem;
	--tl-text-body: 1rem;
	--tl-text-small: 0.875rem;

	/* Touch Targets */
	--tl-touch-min: 44px;
}

/*-- Variables */
:root {
	--clay: #c8622a;
	--clay-light: #e8845a;
	--clay-dark: #9e4a1e;
	--sage: #5a7a5c;
	--sage-light: #7a9a7c;
	--sand: #f5ede0;
	--sand-dark: #e8ddd0;
	--ink: #1e1a16;
	--ink-mid: #4a4238;
	--ink-light: #756a5e;
	--white: #fefcfa;
	--sky: #2e6da4;
	--gold: #c49a2a;
	--purple: #8e44ad;
	--error: #c0392b;
	--radius: var(--tl-radius);
	--radius-pill: var(--tl-radius-pill);
	--font-display: var(--tl-font-display);
	--font-body: var(--tl-font-body);
	--type-personal: #2e6da4;
	--type-business: #9e4a1e;
	--type-event: #c49a2a;
	--type-product: #8e44ad;
	--type-bizpost: #c8622a;
	--main-max-width: 1480px;
	--main-min-width: 360px;
	--nav-height: 70px;
	--footer-height: 285px;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-semi: 500;
	--font-weight-bold: 600;
	--font-weight-heavy: 700;
}

/*-- Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--tl-font-body); background: var(--sand); color: var(--ink); min-height: 100vh; font-size: var(--tl-text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--sky); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--clay); }

/*-- Typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--tl-font-display); font-weight: 700; color: var(--ink); line-height: 1.2; }
h1 { font-size: var(--tl-text-h1); font-weight: 900; }
h2 { font-size: var(--tl-text-h2); }
h3 { font-size: var(--tl-text-h3); }
h4 { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-light); font-family: var(--font-body); font-weight: 600; }
p { margin-bottom: 1rem; color: var(--ink-mid); }

/*-- Nav */
#tl-nav { background: var(--ink); height: 70px; position: sticky; top: 0; z-index: 100; }
#tl-nav-inner { max-width: var(--main-max-width); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 100%; box-sizing: border-box; }
#tl-nav-brand { display: flex; flex-direction: column; flex-shrink: 0; }
#tl-logo { font-family: var(--font-display); color: var(--clay-light); font-size: 1.4rem; font-weight: 900; letter-spacing: -0.5px; text-decoration: none; line-height: 1.1; }
#tl-logo span { color: var(--sand); }
#tl-logo:hover { color: var(--clay-light); }
#tl-nav-main { flex: 1; display: flex; justify-content: center; }
#tl-nav-right { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; }

/*-- Location Indicator (stacked below logo) */
#tl-location { display: flex; align-items: center; gap: 0.35rem; color: var(--sand-dark); font-size: 0.75rem; cursor: pointer; padding: 0.15rem 0.5rem; margin-left: -0.5rem; margin-top: 0.25rem; border-radius: var(--tl-radius-pill); transition: background 0.2s; flex-shrink: 0; user-select: none; position: relative; }
#tl-location:hover,
#tl-location:has(.tl-location-input:focus) { background: rgba(255,255,255,0.1); }
#tl-location .fa-map-marker { color: var(--clay-light); font-size: 0.9rem; }
#tl-location-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-location-caret { font-size: 0.7rem; opacity: 0.6; }
#tl-location-input { display: none; background: none; border: none; outline: none; color: var(--sand); font-size: 0.75rem; font-family: var(--font-body); padding: 0; margin: 0; min-height: 0; width: calc(100% - 1.75rem); position: absolute; right: 4px; top: 4px; }
#tl-location-input::placeholder { color: rgba(255,255,255,0.4); }
#tl-location.editing #tl-location-label { opacity: 0; visibility: hidden; pointer-events: none; }
#tl-location.editing .tl-location-caret { opacity: 0; visibility: hidden; pointer-events: none; }
#tl-location.editing #tl-location-input { display: inline; }
#tl-location.editing #tl-location-input:focus { box-shadow: none; }

/*-- Reusable Filter Bar */
.tl-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }
.tl-filter-bar .tl-fb-search { flex: 1; min-width: 160px; position: relative; }
.tl-filter-bar .tl-fb-search input { width: 100%; padding: 0.6rem 2.5rem 0.6rem 1rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-size: 0.9rem; font-family: var(--font-display); background: var(--white); color: var(--ink); transition: border-color 0.2s; box-sizing: border-box; }
.tl-filter-bar .tl-fb-search input:focus { border-color: var(--clay); outline: none; }
.tl-filter-bar .tl-fb-search-btn { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--ink-light); font-size: 0.9rem; padding: 0.3rem; transition: color 0.15s; }
.tl-filter-bar .tl-fb-search-btn:hover { color: var(--clay); }
.tl-filter-bar select { padding: 0.6rem 2rem 0.6rem 1rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-size: 0.9rem; font-family: var(--font-display); background: var(--white); color: var(--ink); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23756a5e' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; cursor: pointer; transition: border-color 0.2s; }
.tl-filter-bar select:focus { border-color: var(--clay); outline: none; }
.tl-filter-bar .tl-fb-count { font-size: 0.8rem; color: var(--ink-light); margin-left: auto; white-space: nowrap; }
@media (max-width: 930px) {
	.tl-filter-bar { flex-direction: column; align-items: stretch; }
	.tl-filter-bar .tl-fb-search { min-width: 100%; }
	.tl-filter-bar select { width: 100%; }
	.tl-filter-bar .tl-fb-count { margin-left: 0; text-align: center; }
}

/*-- Result Count (shared across modules) */
.directory-search-count { font-size: 0.9rem; color: var(--ink-light); margin-bottom: 0.75rem; }

/*-- Owner List: count + +Add row (My Businesses / Events / Marketplace / News).
     Count left, button right, single line under the filter bar. */
.tl-owner-count-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.tl-owner-count-row .directory-search-count { margin-bottom: 0; }
.tl-owner-count-row .tl-owner-add { margin-left: auto; }
.tl-owner-count-row .tl-owner-add .btn { white-space: nowrap; }

/*-- Nav Links (site_navigation output) */
#tl-nav-main .tl-nav-links .nav-ul.t0 { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
#tl-nav-main .tl-nav-links .nav-ul.t0:after, .tl-nav-secondary .nav-ul.t0:after { content: none !important; display: none !important; }
#tl-nav-main .tl-nav-links .nav-li.t0 { display: inline-block; }
#tl-nav-main .tl-nav-links .nav-item.t0,
#tl-nav-right .tl-nav-secondary .nav-item.t0 { color: #f4eee8; text-decoration: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3px; transition: color 0.2s; display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; padding: 0; line-height: 1; }
#tl-nav-main .tl-nav-links .nav-item.t0 .fa,
#tl-nav-right .tl-nav-secondary .nav-item.t0 .fa { font-size: 1.25rem; margin: 0 !important; display: block; line-height: 1; }
#tl-nav-main .tl-nav-links .nav-item.t0:hover,
#tl-nav-right .tl-nav-secondary .nav-item.t0:hover { color: var(--clay-light); }
#tl-nav-main .tl-nav-links .nav-item.t0.selected,
#tl-nav-right .tl-nav-secondary .nav-item.t0.selected { color: var(--clay-light); }
.tl-nav-links .nav-ul.t1 { display: none; }

/*-- Nav: Logged-in "+ Post" CTA reuses the canonical .btn .btn-secondary
     (transparent / clay border, fills clay on hover) so it matches every other
     bordered button on the site. Two nav-scoped tweaks only:
     1) shrink height + padding to match the 34px avatar beside it,
     2) restate color at higher specificity so it beats the generic
        `.tl-nav-secondary .nav-item.t0` color/hover rules below. */
#tl-nav-right .tl-nav-secondary .nav-item.btn-secondary { min-height: 34px; padding: 0 0.95rem; font-size: 0.8rem; color: var(--clay); }
#tl-nav-right .tl-nav-secondary .nav-item.btn-secondary:hover { color: #fff; opacity: 1; }
/*-- Inset dark ring keeps the nav avatar visible when the profile image (or
     initials background) is approximately the same dark tone as the nav bar.
     Rendered as a <span> with background-image, so a plain inset box-shadow
     paints over the image - no pseudo-element needed. */
.tl-nav-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.8rem; text-decoration: none; transition: opacity 0.2s; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.tl-nav-avatar:hover { color: white; }

/*-- Nav: Guest (Log In + Sign Up) */
.tl-nav-login { color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 500; text-decoration: none; padding: 0.35rem 0.7rem; transition: color 0.2s; font-family: var(--font-body); }
.tl-nav-login:hover { color: white; }
.tl-nav-signup { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; border-radius: var(--tl-radius-pill); background: var(--clay-dark); color: white; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: background 0.2s, transform 0.1s; font-family: var(--font-body); }
.tl-nav-signup:hover { background: var(--clay-light); color: white; transform: translateY(-1px); }

/*-- Nav Secondary (login/account links) */
.tl-nav-secondary .nav-ul.t0 { list-style: none; display: flex; gap: 0.8rem; align-items: center; }
.tl-nav-secondary .nav-li.t0 { display: inline-block; }
.tl-nav-secondary .nav-item.t0 { color: #f4eee8; text-decoration: none; font-size: 1rem; font-weight: 500; transition: opacity 0.2s, color 0.2s; }
.tl-nav-secondary .nav-item.t0:hover { opacity: 1; color: var(--clay-light); }

/*-- Nav Mobile Toggle */
#tl-nav-toggle { display: none; color: var(--sand-dark); font-size: 0.85rem; cursor: pointer; text-decoration: none; align-items: center; gap: 0.5rem; }
.tl-hamburger { width: 20px; height: 14px; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.tl-hamburger-line { height: 2px; background: var(--sand-dark); border-radius: 1px; transition: all 0.2s; }
.tl-hamburger-line::before, .tl-hamburger-line::after { content: ''; display: block; height: 2px; background: var(--sand-dark); border-radius: 1px; transition: all 0.2s; }
.tl-hamburger-line::before { margin-top: 4px; }
.tl-hamburger-line::after { margin-top: 4px; }

/*-- Mobile Nav Drawer */
.header-mobile-logo { display: none; }
#tl-mobile-nav { display: none; }
#tl-mobile-mask { position: fixed; inset: 0; background: rgba(30, 26, 22, 0.5); z-index: 200; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
#tl-mobile-drawer { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background: var(--white); z-index: 201; transition: left 0.3s ease; overflow-y: auto; box-shadow: 4px 0 20px rgba(30, 26, 22, 0.15); }
#tl-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sand-dark); }
.tl-mobile-logo { font-family: var(--font-display); color: var(--clay); font-size: 1.2rem; font-weight: 900; text-decoration: none; }
.tl-mobile-logo span { color: var(--ink); }
.tl-mobile-close { font-size: 1.5rem; color: var(--ink-light); cursor: pointer; line-height: 1; text-decoration: none; }
.tl-mobile-close:hover { color: var(--ink); }
.tl-mobile-search { display: flex; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sand-dark); }
.tl-mobile-search-input { flex: 1; border: 1px solid var(--sand-dark); border-right: none; border-radius: var(--tl-radius-pill) 0 0 var(--tl-radius-pill); padding: 0.5rem 0.8rem; font-size: 0.9rem; font-family: var(--font-body); outline: none; }
.tl-mobile-search-input:focus { border-color: var(--clay-light); }
.tl-mobile-search-btn { background: var(--clay); color: var(--white); border: 1.5px solid var(--clay); border-radius: 0 var(--tl-radius-pill) var(--tl-radius-pill) 0; padding: 0.5rem 0.9rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: background 0.15s, border-color 0.15s; }
.tl-mobile-search-btn:hover { background: var(--clay-dark); border-color: var(--clay-dark); }
.tl-mobile-links .nav-ul { list-style: none; }
.tl-mobile-links .nav-ul.t0 { padding: 0.5rem 0; }
.tl-mobile-links .nav-item { display: block; padding: 0.75rem 1.2rem; color: var(--ink); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: background 0.15s; }
.tl-mobile-links .nav-item:hover { background: var(--sand); }
.tl-mobile-links .nav-item.selected { color: var(--clay); background: var(--sand); }
.tl-mobile-links .nav-ul.t1 { padding-left: 1rem; }
.tl-mobile-links .nav-item.t1 { font-size: 0.88rem; color: var(--ink-mid); padding: 0.5rem 1.2rem; }
body.tl-nav-open #tl-mobile-mask { opacity: 1; visibility: visible; }
body.tl-nav-open #tl-mobile-drawer { left: 0; }
body.tl-nav-open { overflow: hidden; }

/*-- Main Content */
#tl-main { min-height: calc(100vh - var(--nav-height) - var(--footer-height)); }

/*-- Page Manager Watermark */
#PageManagerWatermark { position: fixed; z-index: 1040; left: 0.4rem; bottom: 0.4rem; padding: 0.2rem 0.35rem 0.25rem 0.35rem; font-weight: var(--font-weight-bold); font-size: 1rem; line-height: 1; text-decoration: none; color: #eee; opacity: 0.33; text-shadow: -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; cursor: default; background: rgba(0,0,0,0.85); transition: all 200ms; -webkit-transition-delay: 5s; -moz-transition-delay: 5s; transition-delay: 5s; border-radius: var(--tl-radius); }
#PageManagerWatermark:hover { color: #fff; text-decoration: none; visibility: hidden; opacity: 0; -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; transition-delay: 500ms; }

/*-- Page Manager: Center Layout */
.center { position: relative; width: 100%; max-width: var(--main-max-width); margin-left: auto; margin-right: auto; padding: 0 1.5rem; }
.center-no { width: 100%; }
.center-no > .row,
.center > .row { display: flex; }
.center > .row > .cell { max-width: var(--main-max-width); flex-grow: 1; }
.center-no > .row > .cell:not(.cell-post):not(.cell-pre) { flex-grow: 1 !important; flex-shrink: 1 !important; height: fit-content; }
.center .center, .center-no .center { width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.clear, .clearp { display: block; float: none; clear: both; height: 1px; font-size: 1px; line-height: 1px; margin-bottom: -1px; overflow: hidden; }

/*-- Page Manager: Panels & Cells
     The 43.5vh floor exists so any bgcolor-panel has a visible presence on pages
     where the panel content is short (CMS pages, policy pages, etc.) - without it,
     a bgcolor panel with one paragraph collapses to the paragraph's height and
     the bg color looks like a stripe. The home hero panel is EXCLUDED because it
     runs on its own layout (flex column + justify-center) and its min-height
     comes from the Page Manager's own min-height that the user sets on
     .panel-table via the admin UI. Adding tl-home-hero-fluid here forces that
     user-controlled height to win instead of being stomped by the template. */
#tl-main .PageManagerContent,
/*-- Panel min-height belongs to Page Manager (SitePagePanels.MinimumHeight column),
     not to a CSS catch-all. Removing this rule eliminates a per-panel surprise where
     any panel with a BackgroundColor would silently inherit 43.5vh regardless of its
     intended height. Hero already has MinimumHeight=40vh stored in the DB; CTA panels
     intentionally have no MinimumHeight so they shrink to content. */
.PageManagerContent .panel { position: relative; z-index: 1; }
.PageManagerContent .panel::before,
.PageManagerContent .panel::after { content: '.'; display: block; clear: both; height: 0; line-height: 0; font-size: 0; color: transparent; overflow: hidden; }
.PageManagerContent .panel.centered { text-align: center; }
.PageManagerContent .panel.dark-background { color: #ffffff; }
.PageManagerContent .panel.dark-background .panel-table,
.PageManagerContent .panel.dark-background .panel-table .cell { color: inherit; }
.PageManagerContent .panel .panel-background,
.PageManagerContent .panel .panel-background-layer { content: ''; position: absolute; z-index: -99; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.PageManagerContent .panel .panel-background { z-index: -100; background-repeat: no-repeat; background-size: cover; }
.PageManagerContent .panel .panel-title { margin-top: 0; line-height: 1; padding: 10px 0; font-weight: var(--font-weight-heavy); font-size: 30px; font-family: var(--font-display); text-align: left; background-color: var(--sand-dark); color: var(--ink); }
.PageManagerContent .panel .panel-title .fa { margin-right: 0.2rem; }
.PageManagerContent .panel + .panel.has-bgcolor .panel-title { margin-top: 0; }
.PageManagerContent .panel.first-panel.panel-title-yes { margin-top: 0; }
.PageManagerContent .panel .panel-title .title-tag.center-no { width: calc(100% - 7rem); }

.PageManagerContent .panel .cell.dark-background { color: #ffffff; }
.PageManagerContent .panel .cell .cell-content { padding: 2rem 0; }
.PageManagerContent .panel .cell.has-prev .cell-content { padding-left: 2rem; }
.PageManagerContent .panel .cell .cell-content:last-child { padding-bottom: 4rem; }
.PageManagerContent .panel .panel-title + .panel-table .cell .cell-content:first-child { padding-top: 3rem; }
.PageManagerContent .panel .panel-title:empty { display: none; padding: 0; margin: 0; min-height: 0; }
.PageManagerContent .panel .panel-title:empty + .panel-table .cell .cell-content:first-child { padding-top: 3rem; }
.PageManagerContent .panel .cell .cell-content:not(.bottom-border):not(.module-testimonials) + .cell-content { padding-top: 0; }
.PageManagerContent .panel .panel-table:first-child .cell .cell-content.with-block-title:first-child,
.PageManagerContent .panel .panel-title:first-child + .panel-table .cell .cell-content.with-block-title:first-child { padding-top: 0; }
.PageManagerContent .panel .cell .cell-content:empty,
.PageManagerContent .panel .cell .cell-content:not(:has(*)) { padding: 0 !important; }

/*-- Sidebar cell with multiple pushed sections: each PushIntoSidebar call
     creates its own .cell-wrapper > .cell-content. The platform's default
     padding rules don't know about that - they fire `:last-child {
     padding-bottom: 4rem }` on every cell-content (because each is the
     only child of its own wrapper) and the adjacent-sibling reset
     `.cell-content + .cell-content` doesn't engage (siblings are
     cell-wrappers, not cell-contents). Result without this override: 6rem
     gap between adjacent sections (4rem bottom + 2rem top) instead of the
     original 2rem that the single-push tl-detail-sidebar flex gap gave.
     This rule collapses the inter-section spacing back to 2rem total while
     preserving 3rem at the top of the sidebar and 4rem at the bottom. It
     scopes to the sidebar cell only (.cell-post.has-prev / .cell-pre
     .has-next), so the rule applies wherever multi-push sidebars are used
     and is harmless for single-push sidebars (the same wrapper is both
     :first-child and :last-child, so the original 3rem/4rem still wins). */
.PageManagerContent .panel .panel-table > .row > .cell.cell-post.has-prev > .cell-wrapper > .cell-content,
.PageManagerContent .panel .panel-table > .row > .cell.cell-pre.has-next > .cell-wrapper > .cell-content { padding-top: 0; padding-bottom: 2rem; }
.PageManagerContent .panel .panel-table > .row > .cell.cell-post.has-prev > .cell-wrapper:first-child > .cell-content,
.PageManagerContent .panel .panel-table > .row > .cell.cell-pre.has-next > .cell-wrapper:first-child > .cell-content { padding-top: 3rem; }
.PageManagerContent .panel .panel-table > .row > .cell.cell-post.has-prev > .cell-wrapper:last-child > .cell-content,
.PageManagerContent .panel .panel-table > .row > .cell.cell-pre.has-next > .cell-wrapper:last-child > .cell-content { padding-bottom: 4rem; }

/*-- Page Manager: Mobile stack for sidebar layouts.
     Breakpoint at 930px because that's the inflection point where main
     column drops below the 440px sidebar width: at viewport <=930, page
     padding (~24px) + sidebar (440) leaves <466 for main, equal-ish to
     the sidebar. Anything narrower and main is the smaller column -
     wrong reading hierarchy. Tablets at 960+ keep the desktop layout.

     Mechanism: PushIntoSidebar puts each pushed section into a
     .cell-wrapper inside the cell-post bookend, and stamps an inline
     min-width (typically 440) on cell-post so it renders as a 440 column
     on desktop. At mobile we collapse cell-post via `display: contents`
     so its .cell-wrapper children become direct flex children of the
     parent .row alongside the main .cell. That's what makes per-wrapper
     `order` actually move a sidebar block above main (not just above
     other sidebar blocks). Modules tag wrappers with `tl-sidebar-mobile-above`
     via the cssClass arg of PushIntoSidebar to opt into above-main
     placement. Default order=0 means "below main" (source order). */
@media (max-width: 930px) {
	.PageManagerContent .panel .panel-table > .row { flex-direction: column; }
	.PageManagerContent .panel .panel-table > .row > .cell.cell-post.has-prev,
	.PageManagerContent .panel .panel-table > .row > .cell.cell-pre.has-next { display: contents; }
	.PageManagerContent .panel .panel-table > .row > .cell.has-prev .cell-wrapper,
	.PageManagerContent .panel .panel-table > .row > .cell.has-next .cell-wrapper { width: 100%; }
	.PageManagerContent .panel .panel-table > .row > .cell.cell-1 { min-width: 0 !important; flex-basis: auto !important; flex-grow: 1; width: 100%; }
	/*-- Single-column mobile: zero side padding on every cell-content. Use !important
	     to win against the desktop /feed rule below that uses #PageManagerContent (id),
	     whose specificity would otherwise outrank these class-only selectors. */
	.PageManagerContent .panel .cell .cell-content { padding-left: 0 !important; padding-right: 0 !important; }

	/*-- Sidebar wrappers tagged for above-main placement on mobile.
	     Wrappers with this class get a negative order so they sort
	     before .cell-1 (default order: 0) within the row's flex column. */
	.PageManagerContent .panel .panel-table > .row > .cell.has-prev .cell-wrapper.tl-sidebar-mobile-above,
	.PageManagerContent .panel .panel-table > .row > .cell.has-next .cell-wrapper.tl-sidebar-mobile-above { order: -1; }

	/*-- Main on a sidebar page: at desktop, main and sidebar are in different
	     columns so each carries its own 3rem-top / 4rem-bottom anchor padding
	     and they don't combine. At mobile (display:contents on cell-post)
	     they become direct flex siblings - main's full padding stack now
	     adds to the sidebar items' padding, doubling the gap at the
	     main<->sidebar transition (5rem above main, 4rem below). Collapse
	     main's vertical padding here so the gap matches the inter-sidebar
	     gap (2rem). The 3rem top anchor still comes from the first
	     above-class sidebar wrapper (or the preceding panel's bottom
	     padding when no above-class items exist); the 4rem bottom anchor
	     still comes from the last sidebar wrapper. */
	.PageManagerContent .panel .panel-table > .row > .cell.cell-1.has-next > .cell-wrapper > .cell-content,
	.PageManagerContent .panel .panel-table > .row > .cell.cell-1.has-prev > .cell-wrapper > .cell-content { padding-top: 0; padding-bottom: 2rem; }
}

/*-- Slideshow first-child: zero padding so it goes edge-to-edge against the header */
.PageManagerContent .panel .cell .cell-content.module-presentation:first-child,
.PageManagerContent .panel .cell .cell-content.custom-slideshow:first-child { padding: 0; }
.PageManagerContent .panel .panel-title:empty + .panel-table .cell .cell-content.module-presentation:first-child,
.PageManagerContent .panel .panel-title:empty + .panel-table .cell .cell-content.custom-slideshow:first-child { padding-top: 0; }
.PageManagerContent .panel .panel-title + .panel-table .cell .cell-content.module-presentation:first-child,
.PageManagerContent .panel .panel-title + .panel-table .cell .cell-content.custom-slideshow:first-child { padding-top: 0; }
.PageManagerContent .panel .cell .cell-content .fixed-module { margin-top: 2.25rem; }
.PageManagerContent .panel .cell .cell-content .fixed-module:first-child { margin-top: 0; }
.PageManagerContent .panel .cell .cell-content .content-title { display: block; position: relative; margin: 0 0 var(--tl-space-4) 0; padding: 0; font-size: var(--tl-text-h1); line-height: 1.2; font-weight: 900; font-family: var(--tl-font-display); color: var(--ink); }
.PageManagerContent .panel.has-bgcolor .cell .cell-content .content-title { color: var(--ink); background-color: transparent; padding: 0; float: none; box-shadow: none; text-shadow: none; }
.PageManagerContent .panel.panel-title-yes .cell .cell-content .content-title { display: none; }
/*-- Un-hide section-header content-titles that live INSIDE a list-wrapper (e.g. /search
     splits: Businesses / Events / Marketplace / News). The hide rule above targets the
     hero-duplicate content-title injected directly under cell-content by SetContentTitle;
     nested ones are legitimate section dividers and must stay visible. */
.PageManagerContent .panel.panel-title-yes .cell .cell-content .list-wrapper .content-title { display: block; }
/*-- /search: separate stacked section blocks so the next section's title
     does not press against the previous section's last row of cards.
     `~` instead of `+` because FeaturedRanker emits a <script type="application/ld+json">
     SEO block between each list-wrapper - adjacent-sibling (+) was silently skipping. */
.module-search .list-wrapper ~ .list-wrapper { margin-top: var(--tl-space-8); }
.module-search .list-wrapper .content-title { margin-bottom: var(--tl-space-4); }
.cell-content .content-data ul, .cell-content .content-data ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.cell-content .content-data li { margin-bottom: 0.35rem; color: var(--ink-mid); }
.cell-content .content-data li::marker { color: var(--ink-light); }
.cell-content.task-error { display: none; }

/*-- /feed layout: hand-off to platform.
   tl-layout / tl-col-left / tl-col-mid / tl-col-right CSS removed in 1.6 along
   with the matching ClassName fields on SitePagePanels + SitePagePanelColumns.
   The platform renders panels + columns from SitePagePanelColumns.Width directly;
   the custom classes were duplicating the layout, breaking ContentTitle, and
   forcing every layout decision to live in CSS instead of admin-editable settings.
   Do not reintroduce a custom layout class on the /feed panel. */

/*-- /feed gap: take the column gap from the main column, not the sidebar.
   Platform default puts the 2rem gap on .has-prev .cell-content (sidebar's left
   padding), which eats 2rem out of the sidebar's 440px box. On /feed the sidebar
   width should be its effective content width, so swap the gap onto the main
   column's right edge instead. Scoped to body.pg-feed so other pages keep the
   default. */
body.pg-feed #PageManagerContent .panel .cell.has-prev .cell-content { padding-left: 0; }
body.pg-feed #PageManagerContent .panel .cell.has-next .cell-content { padding-right: 2rem; }

/*-- Layout: Single column (detail pages) */
.tl-layout-single { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; }
@media (max-width: 375px) {
	.tl-layout-single { padding: 0.75rem; }
}

/*-- Sidebar */
.tl-sidebar { position: sticky; top: 80px; }

/*-- Sidebar Section */
.tl-sidebar-section { background: var(--white); border-radius: var(--tl-radius); padding: 1.2rem; margin-bottom: 1rem; border: 1px solid var(--sand-dark); }
.tl-sidebar-section h4 { margin-bottom: 0.9rem; }

/*-- Widget (standalone - used when widgets are placed directly in a panel column, not inside .tl-sidebar) */
.tl-widget { background: var(--white); border-radius: var(--tl-radius); padding: 1.2rem; margin-bottom: 1rem; border: 1px solid var(--sand-dark); }
.tl-widget h4 { margin-bottom: 0.9rem; }

/*-- Filter Buttons */
.tl-filter { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: var(--tl-radius); cursor: pointer; transition: background 0.15s; margin-bottom: 0.25rem; font-size: 0.88rem; color: var(--ink-mid); font-weight: 500; border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font-body); }
.tl-filter:hover { background: var(--sand); }
.tl-filter.active { background: var(--clay-dark); color: white; }
.tl-filter-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tl-filter.active .tl-filter-dot { background: white !important; }
.tl-filter-count { margin-left: auto; font-size: 0.72rem; background: var(--sand); color: var(--ink-light); padding: 0.1rem 0.5rem; border-radius: var(--tl-radius-pill); font-weight: 600; }
.tl-filter.active .tl-filter-count { background: rgba(255, 255, 255, 0.25); color: white; }

/*-- Stats Grid */
.tl-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.tl-stat-box { background: var(--sand); border-radius: var(--tl-radius); padding: 0.8rem 0.6rem; text-align: center; }
.tl-stat-box strong { display: block; font-size: 1.3rem; font-family: var(--font-display); color: var(--clay); font-weight: 700; }
.tl-stat-box span { font-size: 0.7rem; color: var(--ink-light); font-weight: 500; }

/*-- Feed Header: title + sort dropdown row. Title uses .content-title for canonical page-title styling. */
.tl-feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; flex-wrap: wrap; gap: 0.5rem; }
.tl-feed-header .content-title { margin-bottom: 0; }

/*-- Inline Feed Filter (collapsible <details> in feed header - post-paradigm 1.2) */
.tl-feed-filter { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); margin-bottom: 1rem; padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.tl-feed-filter > summary { cursor: pointer; font-weight: 600; color: var(--ink-mid); padding: 0.25rem 0; list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.tl-feed-filter > summary::-webkit-details-marker { display: none; }
.tl-feed-filter > summary::before { content: "\25B8"; display: inline-block; transition: transform 0.15s; color: var(--ink-light); font-size: 0.75rem; }
.tl-feed-filter[open] > summary::before { transform: rotate(90deg); }
.tl-feed-filter-form { margin: 0; }
.tl-feed-filter-options { display: flex; gap: 1.1rem; padding: 0.55rem 0 0.35rem 0.95rem; flex-wrap: wrap; }
.tl-feed-filter-options label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; color: var(--ink-mid); font-weight: 500; }
.tl-feed-filter-options input[type="radio"] { accent-color: var(--clay); }

/*-- Sort Select */
.tl-sort { border: 1px solid var(--sand-dark); background: var(--white); border-radius: var(--tl-radius); padding: 0.4rem 0.8rem; font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-mid); cursor: pointer; }

/*-- Cards */
.card-feed { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); margin-bottom: 0.5rem; overflow: hidden; min-width: 0; max-width: 100%; box-sizing: border-box; }
/*-- Allow the WebItems flex column to shrink when wide content (e.g. multi-image
     gallery) lives inside. Flex items default to min-width:auto = min-content,
     which lets natural-size content push the column. The card-feed gallery has
     its own overflow:hidden so we never see actual horizontal overflow. */
.PageManagerContent .panel .cell:has(.card-feed) { min-width: 0; }
.card-feed-strip { height: 4px; width: 100%; }
.card-feed-body { padding: 1.1rem 1.2rem; min-width: 0; }

/*-- Card Meta */
.card-feed-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.card-feed-meta .tl-avatar { flex-shrink: 0; }
a.tl-avatar { text-decoration: none; transition: opacity 0.15s; }
a.tl-avatar:hover { }
.card-feed-meta-info { flex: 1; min-width: 0; }
.card-feed-meta-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.card-feed-meta-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
a.card-feed-meta-name { text-decoration: none; display: inline-block; }
a.card-feed-meta-name:hover { color: var(--clay); }
.card-feed-meta-sub { font-size: 0.75rem; color: var(--ink-light); }

/*-- Shared-by pill: appears next to the original author's name when this card
     surfaces because someone shared it. Gray rounded bubble, share icon +
     sharer name. Pill links to the sharer's profile. --*/
.tl-share-pill {
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.15rem 0.55rem 0.15rem 0.45rem;
	background: var(--sand, #efece5); color: var(--ink-light, #6b6b6b);
	border-radius: 999px; font-size: 0.72rem; font-weight: 500;
	text-decoration: none; line-height: 1.4;
	max-width: 100%; white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}
.tl-share-pill svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tl-share-pill span { overflow: hidden; text-overflow: ellipsis; }
a.tl-share-pill:hover { background: var(--clay-soft, #e8d8c8); color: var(--clay, #c9633a); }

/*-- "Why am I seeing this" pills next to author name. Identical look to
     tl-share-pill (same sand bg, same gray text, same shape) so the three
     read as one family. The text label alone tells the user why the post
     surfaced - no icon, no color cue. */
.tl-following-pill,
.tl-nearby-pill {
	display: inline-flex; align-items: center;
	padding: 0.15rem 0.65rem;
	background: var(--sand); color: var(--ink-light);
	border-radius: 999px; font-size: 0.72rem; font-weight: 500;
	line-height: 1.4; white-space: nowrap;
}

/*-- Card Type Pill */
.tl-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: var(--tl-radius-pill); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }

/*-- Card Text - rich-text wrapper used on both feed cards (short blurb with a
     leading <strong> title line) and detail-page bodies (full Trix WYSIWYG
     output: businesses About, events/marketplace/news description). The
     * { margin:0 } global reset + webitems.css ul/ol/h1-h4 zeroing wipe the
     natural spacing of every block-level tag, so we have to put it back here. */
.card-feed-text { font-size: 0.93rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: 0.9rem; }

/*-- Inline bold. Used to be `display:block` + display-font + bigger size, which
     hijacked every user-typed <strong> in rich-text bodies and turned mid-
     sentence bold into a pseudo-heading. The only caller that relied on the
     block treatment was the news-embed feed card; it now uses .card-news-title
     so we can let <strong> behave as plain inline bold here. */
.card-feed-text strong,
.card-feed-text b { color: var(--ink); font-weight: 700; }

/*-- Headings inside rich text. Match the strong-as-block treatment so a Trix
     h1/h2/h3 (from paste or imported content) reads as a section header with
     air above it instead of flush against the next paragraph. */
.card-feed-text h1, .card-feed-text h2, .card-feed-text h3, .card-feed-text h4 {
	color: var(--ink); font-family: var(--font-display); font-weight: 700;
	line-height: 1.25; margin: 1.25rem 0 0.5rem 0;
}
.card-feed-text h1 { font-size: 1.35rem; }
.card-feed-text h2 { font-size: 1.2rem; }
.card-feed-text h3 { font-size: 1.05rem; }
.card-feed-text h4 { font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
.card-feed-text h1:first-child, .card-feed-text h2:first-child,
.card-feed-text h3:first-child, .card-feed-text h4:first-child { margin-top: 0; }

/*-- Paragraphs. Drop the empty <p> Trix sometimes emits between blocks so it
     does not stack visible blank lines on top of the margin we already give p. */
.card-feed-text p { margin: 0 0 0.85rem 0; }
.card-feed-text p:last-child { margin-bottom: 0; }
.card-feed-text p:empty { display: none; }

/*-- Lists. Restore the standard ~1.5rem left indent and disc/decimal markers
     that the global resets killed. Empty <li> items get hidden so users who
     pressed Enter between bullets do not see phantom empty rows. */
.card-feed-text ul, .card-feed-text ol { margin: 0.5rem 0 0.85rem 1.5rem; padding-left: 0.5rem; }
.card-feed-text ul { list-style: disc outside; }
.card-feed-text ol { list-style: decimal outside; }
.card-feed-text li { margin: 0.2rem 0; }
.card-feed-text li:empty { display: none; }
.card-feed-text ul ul, .card-feed-text ul ol,
.card-feed-text ol ul, .card-feed-text ol ol { margin: 0.2rem 0 0.2rem 1.25rem; }

/*-- Inline formatting from Trix toolbar. <u> needs an explicit underline
     because the global reset on <u> removes the browser default in some
     stylesheets, and <s>/<del> get an explicit line-through for parity. */
.card-feed-text em, .card-feed-text i { font-style: italic; }
.card-feed-text u { text-decoration: underline; }
.card-feed-text s, .card-feed-text del, .card-feed-text strike { text-decoration: line-through; }

/*-- Card Image - fixed 180px tall, width follows aspect (small images stretch up, big images shrink down) */
.card-feed-image { height: 180px; width: auto; display: block; border-radius: var(--tl-radius); margin-bottom: 0.9rem; background: var(--sand); }

/*-- Category Hero Banner (shared across modules) */
.panel:has(.tl-category-hero) .panel-title { display: none !important; }
.panel:has(.tl-category-hero) .panel-title + .panel-table .cell .cell-content:first-child { padding-top: 0; }
/*-- Detail back link (consistent across all detail pages) */
.tl-detail-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-light); font-size: 0.85rem; font-weight: 500; text-decoration: none; padding: 0.5rem 0; margin-bottom: 0.25rem; transition: color 0.15s; }
.tl-detail-back:hover { color: var(--clay); }
.tl-detail-back .fa { font-size: 0.8rem; }

.tl-category-hero { position: relative; width: 100%; height: 400px; background-size: cover; background-position: center; margin-bottom: 1.5rem; border-radius: var(--tl-radius); overflow: hidden; }
.tl-category-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 2rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); }
.tl-category-hero-title { color: #fff; font-size: 2rem; margin: 0; font-family: var(--font-display); font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 0.75rem; }
.tl-category-hero-desc { color: #fff; font-size: 0.9rem; font-weight: 400; line-height: 1.45; margin-bottom: 0.5rem; opacity: 0.92; max-width: 42rem; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.tl-category-hero-back { display: inline-flex; align-items: center; color: #fff; text-decoration: none; opacity: 0.9; transition: opacity 0.15s, transform 0.15s; line-height: 1; }
.tl-category-hero-back:hover { opacity: 1; color: #fff; transform: translateX(-2px); }
.tl-category-hero-back .fa { font-size: 1.9rem; line-height: 1; }
.tl-category-hero.module-directory { background-color: var(--ink); }
.tl-category-hero.module-events { background-color: var(--ink); }
.tl-category-hero.module-marketplace { background-color: var(--ink); }
.tl-category-hero.module-news { background-color: var(--ink); }

/*-- Home search hero: full-width banner above the feed with centered search form.
     The min-height for this hero is set by the Page Manager on .panel-table (inline
     style like `min-height: 25vh`) so editors control the hero height from the admin
     UI - no hard-coded VH value in this CSS. To make the search content vertically
     center within whatever height the Page Manager sets, we cascade flex-column +
     justify-center down the panel -> panel-table -> row chain so each level passes the
     centering through to the .cell-content that holds .tl-home-hero-inner. */
.PageManagerContent .panel.tl-home-hero-fluid { position: relative; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; }
.PageManagerContent .panel.tl-home-hero-fluid::before { content: ""; position: absolute; inset: 0; background: rgba(30, 26, 22, 0.55); pointer-events: none; z-index: 0; }
.PageManagerContent .panel.tl-home-hero-fluid .panel-table { display: flex; flex-direction: column; justify-content: center; }
.PageManagerContent .panel.tl-home-hero-fluid .panel-table > .row { flex: 1; align-items: center; }
.PageManagerContent .panel.tl-home-hero-fluid,
.PageManagerContent .panel.tl-home-hero-fluid .panel-table,
.PageManagerContent .panel.tl-home-hero-fluid .row,
.PageManagerContent .panel.tl-home-hero-fluid .cell,
.PageManagerContent .panel.tl-home-hero-fluid .cell-wrapper,
.PageManagerContent .panel.tl-home-hero-fluid .cell-content { padding: 0 !important; margin: 0 !important; background: transparent; }
.PageManagerContent .panel.tl-home-hero-fluid .content-title,
.PageManagerContent .panel.tl-home-hero-fluid .content-info > .content-title { display: none !important; }

.PageManagerContent .panel.tl-home-hero-fluid .cell-content { position: relative; z-index: 1; }
.tl-home-hero-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 1.25rem; width: 100%; max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; text-align: center; color: #f4eee8; box-sizing: border-box; }
/*-- City/state IS the page heading. JS rewrites the text with the user's resolved
     location (e.g. "Hillsboro, OR"). Big and prominent - it's both the page H1
     and the location anchor. */
.tl-home-hero-location { margin: 0; max-width: 100%; min-width: 0; font-family: var(--font-display, var(--font-body)); font-weight: 600; font-size: clamp(2rem, 6.5vw, 4.25rem); line-height: 1.1; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45); letter-spacing: 0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*-- Hero subhead - sits below the location, short value-prop sentence. */
.tl-home-hero-subhead { margin: 0; font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.4; color: #f4eee8; text-shadow: 0 1px 6px rgba(0,0,0,0.5); opacity: 0.95; max-width: 60ch; align-self: center; }
.tl-home-hero-input { display: flex; width: 100%; align-items: stretch; background: white; border-radius: var(--tl-radius); box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25); overflow: hidden; }
.tl-home-hero-input input[type="text"] { flex: 1; border: 0; outline: none; padding: 0.9rem 1.1rem; font-size: 1rem; font-family: var(--font-body); color: var(--ink); background: transparent; }
.tl-home-hero-input input[type="text"]::placeholder { color: var(--ink-light); }
.tl-home-hero-btn { border: 1.5px solid var(--clay); padding: 0.55rem 1.4rem; border-radius: 0 var(--tl-radius) var(--tl-radius) 0; background: var(--clay); color: #fff; cursor: pointer; transition: background 0.15s, border-color 0.15s; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; }
.tl-home-hero-btn:hover { background: var(--clay-dark); border-color: var(--clay-dark); }
.tl-home-hero-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.1rem; font-size: 0.875rem; }
.tl-home-hero-types label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #f4eee8; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.tl-home-hero-types input[type="radio"] { accent-color: var(--clay-light); margin: 0; }
@media (max-width: 930px) {
	.tl-home-hero-inner { padding: 1.5rem 1rem; gap: 1rem; }
	.tl-home-hero-types { font-size: 0.8rem; gap: 0.2rem 0.8rem; }
}

/*-- Fluid category hero: injected as its own full-width panel ABOVE the main panel */
.PageManagerContent .panel.panel-hero-fluid,
.PageManagerContent .panel.panel-hero-fluid .panel-table,
.PageManagerContent .panel.panel-hero-fluid .cell,
.PageManagerContent .panel.panel-hero-fluid .cell-wrapper,
.PageManagerContent .panel.panel-hero-fluid .cell-content,
.PageManagerContent .panel.panel-hero-fluid .cell .cell-content:last-child,
.PageManagerContent .panel.panel-hero-fluid .cell .cell-content:first-child { padding: 0 !important; margin: 0 !important; }
.tl-category-hero-fluid { border-radius: 0; margin-bottom: 0; }
.tl-category-hero-fluid .tl-category-hero-overlay { padding-left: 0; padding-right: 0; }
.tl-category-hero-fluid .tl-category-hero-overlay > .center { padding-left: 1.5rem; padding-right: 1.5rem; }
.panel-hero-fluid + .panel { margin-top: 0; }

/*-- Fluid tabs panel - full-width strip injected directly under the hero. Same
     padding-zeroing as panel-hero-fluid so the bar reaches edge-to-edge.
     The bar reads as page-level navigation: clicking a tab swaps the content
     panel below, so it should look structural, not like a floating widget. */
.PageManagerContent .panel.panel-tabs-fluid,
.PageManagerContent .panel.panel-tabs-fluid .panel-table,
.PageManagerContent .panel.panel-tabs-fluid .cell,
.PageManagerContent .panel.panel-tabs-fluid .cell-wrapper,
.PageManagerContent .panel.panel-tabs-fluid .cell-content,
.PageManagerContent .panel.panel-tabs-fluid .cell .cell-content:last-child,
.PageManagerContent .panel.panel-tabs-fluid .cell .cell-content:first-child { padding: 0 !important; margin: 0 !important; }
.panel-tabs-fluid + .panel { margin-top: 0; }
.panel-hero-fluid + .panel-tabs-fluid { margin-top: 0; }

/*-- Profile header - single fluid panel that owns the hero, the white identity
     strip, AND the tabs bar. Strips the WebItems panel chrome so the three
     stacked sections inside read as one continuous header (no gaps between
     them, no padding around them). The next panel (the page content) abuts
     the bottom of this one with no margin. */
.PageManagerContent .panel.panel-profile-header-fluid,
.PageManagerContent .panel.panel-profile-header-fluid .panel-table,
.PageManagerContent .panel.panel-profile-header-fluid .cell,
.PageManagerContent .panel.panel-profile-header-fluid .cell-wrapper,
.PageManagerContent .panel.panel-profile-header-fluid .cell-content,
.PageManagerContent .panel.panel-profile-header-fluid .cell .cell-content:last-child,
.PageManagerContent .panel.panel-profile-header-fluid .cell .cell-content:first-child { padding: 0 !important; margin: 0 !important; }
.panel-profile-header-fluid + .panel { margin-top: 0; }

/*-- Profile tabs bar: matte sand-dark strip flush under the hero. The active tab
     is colored with the page background (--sand) so its bottom edge merges
     seamlessly with the content area below. Side shadows are pseudo-elements
     that fade in/out vertically so they never bleed past the bottom edge -
     keeping the tab visually attached to the content panel. */
.tl-profile-tabs-bar { background: var(--sand-dark); }
.tl-profile-tabs-bar > .center { padding-left: 1.5rem; padding-right: 1.5rem; }
.tl-profile-tabs-strip { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.tl-profile-tabs-strip .tl-tab { position: relative; flex: 0 0 auto; background: transparent; border: 0; padding: 0.85rem 1.4rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; line-height: 1.2; color: var(--ink-mid); cursor: pointer; transition: color 0.15s, background 0.15s; }
.tl-profile-tabs-strip .tl-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--sand-dark), black 4%); }
.tl-profile-tabs-strip .tl-tab.active { color: var(--clay-dark); background: var(--sand); z-index: 1; }
.tl-profile-tabs-strip .tl-tab.active::before,
.tl-profile-tabs-strip .tl-tab.active::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%); }
.tl-profile-tabs-strip .tl-tab.active::before { left: -5px; background: linear-gradient(to left, rgba(0,0,0,0.15), rgba(0,0,0,0)); }
.tl-profile-tabs-strip .tl-tab.active::after { right: -5px; background: linear-gradient(to right, rgba(0,0,0,0.15), rgba(0,0,0,0)); }
.tl-profile-tabs-strip .tl-tab .tl-tab-icon { margin-right: 0.5rem; font-size: 0.95em; opacity: 0.8; }
.tl-profile-tabs-strip .tl-tab.active .tl-tab-icon { opacity: 1; }

@media (max-width: 930px) {
	.tl-profile-tabs-strip .tl-tab { padding: 0.7rem 0.9rem; font-size: 0.82rem; }
}
@media (max-width: 480px) {
	.tl-profile-tabs-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.tl-profile-tabs-strip::-webkit-scrollbar { display: none; }
	.tl-profile-tabs-strip .tl-tab { white-space: nowrap; }
}
/* When a category hero is injected, hide any sibling panel's platform-emitted title
   ("News"/"Events"/etc. from SitePages.Title) - the hero banner owns the heading. */
.PageManagerContent .panel.panel-hero-fluid ~ .panel > .panel-title,
.PageManagerContent .panel.panel-profile-header-fluid ~ .panel > .panel-title { display: none; }
@media (max-width: 930px) {
	.tl-category-hero { height: 250px; }
	.tl-category-hero-overlay { padding: 2rem 1rem 1rem; }
	.tl-category-hero-title { font-size: 1.5rem; }
}

/*-- Card: Latest Comment Preview */
.card-feed-latest-comment-wrap { margin: 0.8rem -0.6rem -0.6rem; border-top: 1px solid var(--sand-dark); padding-top: 0.5rem; }
.card-feed-latest-comment { padding: 0.4rem 0.6rem; border-radius: 3px; font-size: 0.85rem; color: var(--ink-mid); line-height: 1.5; cursor: pointer; transition: background 0.15s; }
.card-feed-latest-comment:hover { background: var(--sand); }
.card-feed-comment-author { font-weight: 600; color: var(--ink); }

/*-- Card Actions */
.card-feed-actions { display: flex; align-items: center; gap: 0.3rem; padding-top: 0.8rem; border-top: 1px solid var(--sand); }
.card-feed-actions .tl-btn-action { flex-shrink: 0; }
.card-feed-actions-spacer { flex: 1; }

/*-- Business Card Row */
.card-biz-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.9rem; }
.card-biz-logo { width: 56px; height: 56px; border-radius: var(--tl-radius); background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; border: 1px solid var(--sand-dark); }
.card-biz-info { flex: 1; }
.card-biz-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); font-family: var(--font-display); }
.card-biz-cat { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 0.3rem; }

/*-- Event Card Details */
.card-event-details { display: flex; gap: 1rem; margin-bottom: 0.9rem; }
.card-event-date { background: var(--clay-dark); color: white; border-radius: var(--tl-radius); padding: 0.6rem 0.9rem; text-align: center; flex-shrink: 0; min-width: 56px; }
.card-event-date-month { font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.card-event-date-day { font-size: 1.6rem; font-family: var(--font-display); font-weight: 900; line-height: 1; }
.card-event-info { flex: 1; }
.card-event-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; font-family: var(--font-display); }
.card-event-loc { font-size: 0.8rem; color: var(--ink-light); }

/*-- News Card Title (feed embed). Matches .card-event-title sizing so news
     and event embed cards read at the same visual weight. Used by the news
     branch of FeedCardRenderer.RenderItem - paired with a plain
     .card-feed-text description on the next line. */
.card-news-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; font-family: var(--font-display); }

/*-- Product Card Row */
.card-product-row { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.9rem; }
.card-product-img { width: 80px; height: 80px; border-radius: var(--tl-radius); background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; border: 1px solid var(--sand-dark); }
.card-product-info { flex: 1; }
.card-product-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.2rem; }
.card-product-desc { font-size: 0.82rem; color: var(--ink-light); line-height: 1.5; margin-bottom: 0.4rem; }
.card-product-price { font-size: 1.1rem; font-weight: 700; color: var(--clay-dark); }

/*-- Tags */
.tl-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tl-tag { font-size: 0.7rem; background: var(--sand); color: var(--ink-mid); padding: 0.15rem 0.5rem; border-radius: var(--tl-radius-pill); border: 1px solid var(--sand-dark); }

/*-- Stars */
.tl-stars { color: var(--gold); font-size: 0.85rem; margin-bottom: 0.3rem; }

/*-- Avatar - initials text sits centered in the div as the fallback layer.
     The <img> is layered ABOVE via position:absolute so when the image fails
     to load (404, broken file, etc.) the onerror hides it and the initials
     show through centered. Without absolute positioning, the broken-img alt
     glyph renders top-left and offsets the initials. */
.tl-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: white; flex-shrink: 0; overflow: hidden; position: relative; }
.tl-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-avatar-sm { width: 34px; height: 34px; font-size: 0.75rem; }
.tl-avatar-lg { width: 104px; height: 104px; font-size: 2.2rem; font-family: var(--font-display); font-weight: 900; }
/* Square-shaped avatar variant - used by business posters in the feed so a
   business's identity reads visually distinct from a person's circular one. */
.tl-avatar-square { border-radius: var(--tl-radius); }
.tl-avatar-ring { width: 104px; height: 104px; font-size: 2.2rem; font-family: var(--font-display); font-weight: 900; border: 4px solid var(--white); box-shadow: 0 4px 20px rgba(30, 26, 22, 0.2); }
.tl-avatar-clay { background: var(--clay); }
.tl-avatar-sky { background: #2d6199; }
.tl-avatar-sage { background: #476348; }
.tl-avatar-gold { background: #8a6d1e; }
.tl-avatar-purple { background: #6c3483; }
.tl-avatar-product { background: #6c3483; }
a.tl-avatar-link { display: inline-block; text-decoration: none; }
a.tl-avatar-link:hover { }

/*-- Canonical Button System
     ONE shape/size/font for every button on the site. Filled clay (--clay) by
     default; darker clay (--clay-dark) on hover. Pill rounding. 1.5px border so
     filled and outlined variants stay the same physical size.
     Variants only swap color/border/background - never the geometry. */
.btn, .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--tl-touch-min);
	padding: 0.55rem 1.3rem;
	border-radius: var(--tl-radius-pill);
	border: 1.5px solid var(--clay);
	background: var(--clay);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:hover, .button:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #fff; transform: translateY(-1px); }
.btn:active, .button:active { transform: translateY(0); }

.btn-primary, .tl-btn-primary { background: var(--clay); border-color: var(--clay); color: #fff; }
.btn-primary:hover, .tl-btn-primary:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #fff; }

.btn-secondary, .tl-btn-secondary { background: transparent; border-color: var(--clay); color: var(--clay-dark); }
.btn-secondary:hover, .tl-btn-secondary:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

.btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

.btn-small { padding: 0.35rem 0.9rem; font-size: 0.78rem; }
.btn-full { display: flex; width: 100%; justify-content: center; padding: 0.7rem 1.5rem; font-size: 0.95rem; margin-top: 0.5rem; }

/*-- In-card icon buttons (like / share / comment) - intentionally tiny, not part
     of the CTA system. Kept transparent so they sit inside card chrome cleanly. */
.tl-btn-action { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: var(--tl-radius); border: none; background: transparent; color: var(--ink-light); font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tl-btn-action:hover { background: var(--sand); color: var(--ink); }
.tl-btn-action.liked { color: var(--error); }
.tl-btn-action svg { width: 15px; height: 15px; }

/*-- Compact follow button used inside member tiles / mutual lists. Same color
     system as .btn-secondary (outlined clay, fills clay on hover) but with
     tighter padding so it fits next to a name on one line. */
.tl-btn-follow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--clay-dark); border: 1.5px solid var(--clay); background: transparent; padding: 0.3rem 0.85rem; border-radius: var(--tl-radius-pill); cursor: pointer; font-family: var(--font-body); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tl-btn-follow:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.tl-btn-follow.following { background: var(--clay); border-color: var(--clay); color: #fff; }
.tl-btn-follow.following:hover { background: var(--error); border-color: var(--error); color: #fff; }

/*-- Plain text-link button (e.g. "Reply", "Cancel") - no CTA chrome on purpose. */
.tl-btn-link { font-size: 0.85rem; color: var(--sky); font-weight: 600; cursor: pointer; padding: 0.4rem 0.75rem; border-radius: var(--tl-radius); border: none; background: transparent; font-family: var(--font-body); transition: background 0.15s; }
.tl-btn-link:hover { background: var(--sand); }

/*-- Circular "more" affordance (3-dot menu). Geometry-only; not a CTA. */
.tl-btn-more { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--sand-dark); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: border-color 0.2s; }
.tl-btn-more:hover { border-color: var(--clay); }

/*-- Right Sidebar: Trending */
.tl-trending-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid var(--sand); }
.tl-trending-item:last-child { border-bottom: none; }
.tl-trending-num { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--sand-dark); line-height: 1; width: 24px; flex-shrink: 0; text-align: center; }
.tl-trending-text { font-size: 0.83rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.tl-trending-sub { font-size: 0.73rem; color: var(--ink-light); }

/*-- Right Sidebar: Upcoming Events */
.tl-upcoming-event { display: flex; gap: 0.8rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--sand); }
.tl-upcoming-event:last-child { border-bottom: none; }
.tl-upcoming-date { background: var(--clay-dark); color: white; border-radius: var(--tl-radius); padding: 0.4rem 0.5rem; text-align: center; flex-shrink: 0; min-width: 42px; }
.tl-upcoming-date-month { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.tl-upcoming-date-day { font-size: 1.1rem; font-weight: 900; font-family: var(--font-display); line-height: 1; }
.tl-upcoming-title { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.tl-upcoming-loc { font-size: 0.72rem; color: var(--ink-light); }

/*-- Right Sidebar: New Members */
.tl-new-member { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; }
.tl-new-member-name { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.tl-new-member-loc { font-size: 0.72rem; color: var(--ink-light); }
.tl-new-member .tl-btn-follow { margin-left: auto; }

/*-- Profile: hero fallback gradient when the member has no cover image set.
     Same banner system as businesses/events/marketplace/news; only the
     no-image background changes per module. */
.tl-category-hero.module-members:not([style*="background-image"]) { background: linear-gradient(135deg, #3a2010 0%, #6b3a1a 40%, #c8622a 70%, #e8845a 100%); }

/*-- Profile: Hero variant - thinner banner, no overlay text. The identity bar
     below carries the H1 and avatar instead of the hero. */
.tl-profile-hero { height: 260px; }
.tl-profile-hero .tl-category-hero-overlay { display: none; }
/* Soft drop-shadow at the bottom of the cover so the photo reads as slightly
   detached from the white identity strip below - a darker band along the edge
   instead of a hard meeting line. Pure black gradient, capped at ~40% opacity. */
.tl-profile-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); }

/*-- Profile: Identity bar - solid white strip between the hero banner and the
     tab bar. Carries the avatar, page H1, handle, location, follower stats,
     and primary actions (Follow/Message/Edit Profile). */
.tl-profile-identity { background: var(--white); border-bottom: 1px solid var(--sand-dark); }
.tl-profile-identity > .center { padding: 0.9rem 1.5rem; }
.tl-profile-identity-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* Profile-scoped avatar shrink - the shared .tl-avatar-lg is 104px for member
   directory cards; in the identity strip we want it tighter so the white band
   doesn't carry dead vertical space. */
.tl-profile-identity-row .tl-avatar-lg { width: 84px; height: 84px; font-size: 1.85rem; }
.tl-profile-identity-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0; }
.tl-profile-identity-name { font-family: var(--font-display); font-size: 1.55rem; font-weight: 900; color: var(--ink); line-height: 1.1; margin: 0; }
.tl-profile-identity-handle { font-size: 0.85rem; color: var(--ink-light); }
.tl-profile-identity-meta { font-size: 0.85rem; color: var(--ink-mid); display: inline-flex; align-items: center; gap: 0.35rem; }
.tl-profile-identity-meta i { color: var(--clay); }
/* Stats row: tight gap between buttons + minimal margin above so the visible
   spacing matches the hover halo. Negative left margin pulls the first button
   flush with the handle/name text above. */
.tl-profile-identity-stats { display: flex; gap: 0; margin-top: 0.15rem; margin-left: -0.5rem; flex-wrap: wrap; }
/*-- Plain meta row (rating, last-active, etc.) - same line spacing as
     identity-stats but no negative offset, since it doesn't host
     button-padded children to compensate against. */
.tl-profile-identity-line { display: flex; gap: 0.6rem; margin-top: 0.25rem; flex-wrap: wrap; align-items: center; font-size: 0.85rem; color: var(--ink-mid); }
/* Stat-link buttons (Followers / Following). Padding kept tight so the hover
   halo reads as the actual click target - no invisible whitespace gap that
   only appears on hover. */
.tl-profile-stat { min-height: 0; background: transparent; border: 0; padding: 0.25rem 0.5rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-mid); cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.3rem; border-radius: var(--tl-radius); transition: color 0.15s, background 0.15s; }
.tl-profile-stat:hover { color: var(--clay-dark); background: var(--sand); }
.tl-profile-stat:hover strong { color: var(--clay-dark); }
.tl-profile-stat strong { font-weight: 800; color: var(--ink); font-size: 0.9rem; transition: color 0.15s; }
.tl-profile-identity-actions { flex: 0 0 auto; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; align-self: flex-start; margin-left: auto; }
.tl-profile-identity-actions .btn { white-space: nowrap; }

/*-- Profile: Card (sidebar header - avatar + name + handle + actions). Lives inside .detail-section. */
.tl-profile-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.tl-profile-card .tl-avatar { margin-bottom: 0.25rem; }
.tl-profile-card-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: var(--ink); line-height: 1.15; }
.tl-profile-card-handle { font-size: 0.82rem; color: var(--ink-light); }
.tl-profile-card-meta { font-size: 0.82rem; color: var(--ink-mid); display: inline-flex; align-items: center; gap: 0.35rem; }
.tl-profile-card-meta i { color: var(--clay); }
.tl-profile-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.6rem; }

/*-- Profile: Meta tag pills (member categories - real anchor links to a
     /members/category/{id} filtered view; never a fake button). */
.tl-meta-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tl-meta-tag { background: var(--sand); color: var(--ink-mid); font-size: 0.78rem; font-weight: 500; padding: 0.3rem 0.7rem; border-radius: var(--tl-radius-pill); border: 1px solid var(--sand-dark); transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; }
.tl-meta-tag:hover { background: var(--clay); color: white; border-color: var(--clay); }

/*-- Profile: Badges */
.tl-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tl-badge { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.8rem 0.9rem; background: var(--sand); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); text-align: center; min-width: 72px; }
.tl-badge-icon { font-size: 1.6rem; }
.tl-badge-name { font-size: 0.65rem; font-weight: 700; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.4px; }

/*-- Profile: Mutual Connections */
.tl-mutual { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.tl-mutual-name { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.tl-mutual-sub { font-size: 0.72rem; color: var(--ink-light); }
.tl-mutual .tl-btn-follow { margin-left: auto; }

/*-- Profile: Tabs */
.tl-tabs { display: flex; background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); overflow: hidden; margin-bottom: 1rem; }
.tl-tabs[hidden] { display: none; }
.tl-tab { flex: 1; padding: 0.85rem 1rem; text-align: center; font-size: 0.83rem; font-weight: 600; color: var(--ink-light); cursor: pointer; border-right: 1px solid var(--sand-dark); transition: background 0.15s, color 0.15s; border-bottom: 3px solid transparent; }
.tl-tab:last-child { border-right: none; }
.tl-tab:hover { background: var(--sand); color: var(--ink); }
.tl-tab.active { color: var(--clay); background: var(--sand); border-bottom-color: var(--clay); }
.tl-tab-count { display: inline-block; background: var(--sand-dark); color: var(--ink-light); font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: var(--tl-radius-pill); margin-left: 0.3rem; font-weight: 700; }
.tl-tab.active .tl-tab-count { background: var(--clay-dark); color: white; }
.tl-tab-content { display: none; }
.tl-tab-content.active { display: block; }

/*-- Product Grid (profile tab) */
.tl-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.tl-product-card { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); overflow: hidden; transition: box-shadow 0.2s, transform 0.15s; cursor: pointer; }
.tl-product-card:hover { box-shadow: 0 6px 24px rgba(30, 26, 22, 0.09); transform: translateY(-2px); }
.tl-product-thumb { height: 130px; background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.tl-product-details { padding: 0.9rem; }
.tl-product-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.2rem; }
.tl-product-price { font-size: 1rem; font-weight: 700; color: var(--clay); }
.tl-product-sold { font-size: 0.72rem; color: var(--ink-light); }

/*-- Event Row (profile tab) */
.tl-event-row { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; display: flex; gap: 1.1rem; align-items: center; transition: box-shadow 0.2s; }
.tl-event-row:hover { box-shadow: 0 6px 24px rgba(30, 26, 22, 0.09); }
.tl-event-row-info { flex: 1; }

/*-- Account/Profile: Mobile Responsive */
@media (max-width: 930px) {
	.tl-tabs { flex-wrap: wrap; }
	.tl-tab { min-width: 33%; font-size: 0.75rem; padding: 0.65rem 0.5rem; }
	.tl-product-grid { grid-template-columns: 1fr; }
	.tl-event-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 375px) {
	.tl-avatar-large { width: 64px; height: 64px; font-size: 1.3rem; margin-top: -32px; }
	.tl-tab { min-width: 50%; font-size: 0.72rem; }
	.tl-badges { gap: 0.4rem; }
	.tl-badge { min-width: 60px; padding: 0.5rem; }
	.member-form, .member-messages { max-width: 100%; overflow-x: hidden; }
}

/*-- Footer */
#tl-footer { background: var(--ink); color: var(--sand-dark); }
#tl-footer-inner { max-width: var(--main-max-width); margin: 0 auto; padding: 3rem 1.5rem 2rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
/*-- Footer brand block uses a generous portion of horizontal space; tagline gets to
     stretch through it instead of being cramped into a 280px lane. Wraps under the
     columns on smaller widths. */
.tl-footer-brand { flex: 1 1 360px; min-width: 280px; }
.tl-footer-logo { font-family: var(--font-display); color: var(--clay-light); font-size: 1.4rem; font-weight: 900; letter-spacing: -0.5px; text-decoration: none; display: block; margin-bottom: 1rem; line-height: 1; }
.tl-footer-logo span { color: var(--sand); }
.tl-footer-logo:hover { color: var(--clay-light); }
/*-- Footer tagline carries SEO weight (crawled, indexed, used as snippet on link previews).
     Kept short - 2-3 sentences max - but rich with the site's actual purpose words.
     No max-width: lets the tagline stretch through the full brand-column width. */
.tl-footer-tagline { font-size: 0.92rem; color: var(--sand-dark); margin-bottom: 1.1rem; line-height: 1.6; }
.tl-footer-columns { display: flex; gap: 2.5rem; flex: 1 1 480px; justify-content: flex-end; flex-wrap: wrap; }
.tl-footer-col { min-width: 130px; }
/*-- Column headings are visually DIFFERENT from the link list below: lighter color
     (clay-light vs sand-dark links), uppercase + tracked, smaller. The eye should
     parse "header / list of links" at a glance. */
.tl-footer-col h4 { color: var(--clay-light); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; margin: 0 0 0.75rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(244, 238, 232, 0.12); }
/*-- Footer link lists are rendered by the site_navigation module (FixedModule),
     so they carry .nav-ul / .nav-li / .nav-item - not bare ul/li/a. CMS admins
     manage these via Site Navigation > Footer Browse / Sitemap / Policies. */
.tl-footer-col .nav-ul { list-style: none; padding: 0; margin: 0; }
.tl-footer-col .nav-li { margin-bottom: 0.45rem; line-height: 1.35; }
.tl-footer-col .nav-item { color: var(--sand-dark); text-decoration: none; font-size: 0.92rem; transition: color 0.2s; }
.tl-footer-col .nav-item:hover { color: var(--clay-light); }
#tl-footer-social { display: flex; gap: 0.8rem; flex-wrap: wrap; }
#tl-footer-social:empty { display: none; }
.tl-social-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(245, 237, 224, 0.2); display: flex; align-items: center; justify-content: center; color: var(--sand-dark); font-size: 0.9rem; transition: background 0.2s, color 0.2s; text-decoration: none; }
.tl-social-link:hover { background: var(--clay); border-color: var(--clay); color: white; }

/*-- Bottom Bar */
#tl-bottom { border-top: 1px solid rgba(245, 237, 224, 0.1); }
#tl-bottom-inner { max-width: var(--main-max-width); margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; font-size: 0.78rem; color: var(--sand-dark); flex-wrap: wrap; }
.tl-bottom-links .nav-ul.t0 { list-style: none; display: flex; gap: 1rem; }
.tl-bottom-links .nav-item { color: var(--sand-dark); text-decoration: none; font-size: 0.75rem; transition: color 0.2s; }
.tl-bottom-links .nav-item:hover { color: var(--sand-dark); }
.tl-copyright, .tl-designed, .tl-powered { font-size: 0.75rem; }
.tl-designed a, .tl-powered a { color: var(--sand-dark); text-decoration: none; }
.tl-designed a:hover, .tl-powered a:hover { color: var(--clay-light); }

/*-- Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tl-animate-fade { animation: fadeUp 0.4s ease both; }
.tl-animate-pop { animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tl-animate-slide { animation: slideUp 0.4s ease both; }

/*-- No Results */
.tl-no-results, .no-results { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); padding: 2rem; text-align: center; color: var(--ink-light); font-size: 0.9rem; }

/*-- Load More */
.tl-load-more { display: flex; flex-direction: column; align-items: center; padding: 1.5rem; color: var(--ink-light); font-size: 0.85rem; }
.tl-load-more span { margin-bottom: 0.6rem; }
.tl-load-more a.tl-btn-primary, .tl-load-more a.btn { color: white; text-decoration: none; }
.tl-load-more a.tl-btn-primary:hover, .tl-load-more a.btn:hover { color: white; background: var(--clay-dark); }
.tl-load-more a:not(.tl-btn-primary):not(.btn) { color: var(--clay); font-weight: 600; text-decoration: none; }
.tl-load-more a:not(.tl-btn-primary):not(.btn):hover { color: var(--clay-light); }

/*-- Browse All - section-footer button under each Featured grid on the home page */
.tl-browse-all { display: flex; justify-content: flex-start; padding: 2rem 0 0.5rem; }
.tl-browse-all .tl-browse-all-link { padding: 0.6rem 1.5rem; font-size: 0.9rem; text-decoration: none; }
.tl-browse-all .tl-browse-all-link i { font-size: 0.85em; margin-left: 0.4rem; }

/*-- Module Utilities */
.font-title { font-family: var(--font-display); }
.fwb { font-weight: 700; }
.small { font-size: 0.82rem; }
.light { color: var(--ink-light); }
.mr8 { margin-right: 8px; }
.fs90 { font-size: 0.9rem; }
.rounded { border-radius: var(--tl-radius); }
.transition-100 { transition: all 0.1s; }
.item-description { font-size: 0.93rem; line-height: 1.7; color: var(--ink-mid); }
.item-description p { margin-bottom: 0.8rem; }
.tac { text-align: center; }
.mbottom-4 { margin-bottom: 0.4rem; }

/*-- Module: List/Card Grid Layout */
.list-wrapper ul { list-style: none; }
.list-wrapper.card-style ul { display: grid; gap: 1rem; }
.list-wrapper.card-style.columns-1 ul { grid-template-columns: 1fr; }
.list-wrapper.card-style.columns-2 ul { grid-template-columns: repeat(2, 1fr); }
.list-wrapper.card-style.columns-3 ul { grid-template-columns: repeat(3, 1fr); }
.list-wrapper.card-style.columns-4 ul { grid-template-columns: repeat(4, 1fr); }
.list-wrapper.list-style ul { display: flex; flex-direction: column; gap: 0.8rem; }
/*-- Card Base (shared card styling for all modules) */
.card-base {
	background: var(--white);
	border-radius: var(--tl-radius);
	border: 1px solid var(--sand-dark);
	overflow: hidden;
	box-shadow: var(--tl-shadow-card);
	transition: box-shadow 0.2s, transform 0.15s;
}
.card-base:hover {
	box-shadow: var(--tl-shadow-hover);
	transform: translateY(-2px);
}
.list-wrapper .item { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); overflow: hidden; box-shadow: var(--tl-shadow-card); transition: box-shadow 0.2s, transform 0.15s; }
.list-wrapper .item:hover { box-shadow: var(--tl-shadow-hover); transform: translateY(-2px); }
/*-- Empty-category dimming: signals "dead category" without hiding it. */
.list-wrapper .item.is-empty { opacity: 0.5; }
.list-wrapper .item.is-empty:hover { opacity: 0.75; }

/*-- Module: Pagination */
.module-paginate { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 0.8rem; padding: 1.2rem 0; }
.module-paginate-label { font-size: 0.82rem; color: var(--ink-light); font-weight: 500; }
.module-paginate > .module-paginate-label { flex-basis: 100%; text-align: center; order: 1; }
.module-paginate-back, .module-paginate-next { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--clay-dark); color: white; border: none; width: 36px; height: 36px; padding: 0; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 0.9rem; text-decoration: none; transition: background 0.2s; }
.module-paginate > .module-paginate-back { order: 2; }
.module-paginate > .module-paginate-next { order: 3; }
.module-paginate-back:hover, .module-paginate-next:hover { background: var(--clay); color: white; }
.module-paginate-back.disabled, .module-paginate-next.disabled { background: var(--sand-dark); color: var(--ink-light); cursor: default; pointer-events: none; }
.module-paginate-back .fa, .module-paginate-next .fa { font-size: 0.95rem; line-height: 1; }
.module-viewmore { display: block; width: 100%; background: var(--white); border: 1.5px solid var(--sand-dark); color: var(--clay); padding: 0.7rem 1.5rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: border-color 0.2s, background 0.2s; }
.module-viewmore:hover { border-color: var(--clay); background: var(--sand); }

/*-- Pagination Loading State
     Applied to the module's panel cell on pagination click so the user gets instant
     visual feedback during the 1-10s WebForms postback round-trip. texomaland.js adds
     .tl-paginate-loading to the clicked button's nearest .cell-content ancestor, dims
     its direct children to 0.4 opacity + pointer-events:none, and paints a spinner via
     ::before. Dimming targets DIRECT CHILDREN (not the container) so ::before stays at
     full opacity - opacity doesn't propagate up to the container's own pseudo-elements.
     The class clears naturally when the full-page postback response replaces the DOM. */
.tl-paginate-loading { position: relative; min-height: 200px; }
.tl-paginate-loading > * { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }
.tl-paginate-loading::before {
	content: '';
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: -20px;
	width: 40px;
	height: 40px;
	border: 4px solid var(--sand-dark);
	border-top-color: var(--clay);
	border-radius: 50%;
	animation: tl-spin 0.8s linear infinite;
	z-index: 100;
	pointer-events: none;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }


/*-- Module: Card Components (shared base for all list-wrapper modules) */
.list-wrapper .item .card-link { display: block; text-decoration: none; color: inherit; overflow: hidden; }
.list-wrapper .item .card-strip { height: 4px; width: 100%; background: var(--sand-dark); display: none; }
/*-- Placeholder bg for imageless cards uses --sand-dark (title-banner tan), NOT --sand
     (site body). Matching --sand made the card look like a hole in the page instead of
     an image placeholder. sand-dark gives the tan/beige contrast of the page-title band. */
.list-wrapper .item .card-image,
.list-wrapper .item .card-image-bg { position: relative; height: 160px; background-size: cover; background-position: center; background-color: var(--sand-dark); display: flex; align-items: center; justify-content: center; }
.list-wrapper .item .card-image i { font-size: 2.5rem; color: var(--ink-light); opacity: 0.4; }
/*-- AD badge - canonical "AD" pill in the top-right corner of every sponsored
     surface (sidebar ad, feed ad, business detail ad, AdSlotResolver-promoted
     cards, IsFeaturedPromotion-promoted cards). Translucent whitish background
     with dark text "punched out" so it reads as a disclosure marker, not a CTA.
     Anchors to the nearest position:relative ancestor - .ad-zone a, .ad-zone,
     and .list-wrapper .item .card-image are all set up for this. */
.tl-ad-badge { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.22rem 0.5rem; border-radius: var(--tl-radius); background: rgba(245, 243, 240, 0.88); color: var(--ink-mid); text-transform: uppercase; line-height: 1; pointer-events: none; box-shadow: 0 1px 3px rgba(30, 26, 22, 0.12); backdrop-filter: blur(2px); }

/*-- CTA strip - FULL-WIDTH FLUID call-to-action band that slots between Featured sections.
     Mirrors the hero pattern: full-bleed background image, dark overlay (rgba 0.55-0.65),
     centered light-on-dark content, accessible contrast. The panel itself is the canvas
     (no inner max-width box / no rounded card) - it spans edge-to-edge of the viewport
     just like .tl-home-hero-fluid. WCAG AA contrast: white text + dark overlay = >7:1.
     Hide the rich_text Title (rendered as h3.content-title above the body) - the inner
     <h2> in the body is the user-facing heading; the Title is just an internal label. */
/*-- CTA strip - slim sliver between Featured sections. WebItems' .panel-background-layer
     paints the dark overlay (BackgroundOpacity 0.55 in DB). No min-height - Page Manager
     owns panel sizing, content drives height.
     Centering: WebItems renders the row with cell-pre / cell-1 / cell-post flex children
     where cell-1 is content-sized (flex-grow:0) and the row's default justify-content
     leaves cell-1 at the left edge. We override the row's justify-content to center, so
     the cell that holds the CTA content is horizontally centered within its row. We do
     NOT override the cell, cell-wrapper, or cell-content margin/padding - Page Manager's
     own centering on those elements stays in effect. */
.PageManagerContent .panel.tl-cta-strip { position: relative; }
.PageManagerContent .panel.tl-cta-strip .panel-table > .row { justify-content: center; }
.PageManagerContent .panel.tl-cta-strip .content-title { display: none !important; }
/*-- Inner content stack: title -> description -> button. Sizes to its content; the
     cell it sits in is horizontally centered by the row override above, so this just
     stacks its children with text-align center. */
.tl-cta-strip-inner { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; color: #ffffff; }
.tl-cta-strip-inner h2 { font-family: var(--tl-font-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.2; margin: 0; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.tl-cta-strip-inner p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #f4eee8; text-shadow: 0 1px 8px rgba(0,0,0,0.55); max-width: 64ch; }
.tl-cta-strip-inner .tl-cta-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; padding: 0.55rem 1.3rem; background: var(--clay); border: 1.5px solid var(--clay); color: #ffffff; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-decoration: none; border-radius: var(--tl-radius-pill); box-shadow: 0 3px 12px rgba(0,0,0,0.3); transition: background 0.15s, border-color 0.15s, transform 0.15s; white-space: nowrap; }
.tl-cta-strip-inner .tl-cta-btn:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #ffffff; transform: translateY(-1px); }
@media (max-width: 600px) {
	.tl-cta-strip-inner { padding: 1.1rem 1rem; gap: 0.4rem; }
	.tl-cta-strip-inner p { font-size: 0.88rem; }
}

/*-- Bridge rule for the presentation module: the slide goes full-bleed inside its panel,
     so the cell-content gets zero padding. The actual `.module-presentation` slide layout
     lives in the module's own option.ascx <style> block (where module CSS belongs). */
.PageManagerContent .panel .cell .cell-content.module-presentation { padding: 0 !important; }

/*-- Section description - single paragraph between section h2 and the card list.
     Plain prose; the optional trailing action link picks up clay color via .content-action. */
.list-wrapper .content-description { font-size: 0.98rem; line-height: 1.55; color: var(--ink-mid); margin: 0 0 1.2rem 0; }
.list-wrapper .content-description .content-action,
.no-results .content-action,
.content-empty .content-action { color: var(--clay); font-weight: 600; text-decoration: none; }
.list-wrapper .content-description .content-action i,
.no-results .content-action i,
.content-empty .content-action i { font-size: 0.85em; margin-left: 0.2em; vertical-align: baseline; }
.list-wrapper .content-description .content-action:hover,
.no-results .content-action:hover,
.content-empty .content-action:hover { color: var(--clay-dark); text-decoration: underline; }
/*-- Empty-state CTA line inside .no-results / .content-empty boxes. Sits on
     its own row beneath the "no X found" message with a small gap. */
.no-results .content-empty-cta,
.content-empty .content-empty-cta { margin: 0.75rem 0 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-mid); }
.list-wrapper .item .card-data { padding: 0.9rem; }
/*-- Lobotomy-owl: every sibling after the first gets a uniform 0.5rem top margin.
     This replaces the ad-hoc margin-top-on-some / margin-bottom-on-others quirks that
     made adjacent card-body elements collapse to zero gap (e.g. .card-text only had
     margin-top while .card-meta only had margin-bottom -> stacked together with no
     space between them). Zero individual margins so the lobotomy-owl rule wins cleanly. */
.list-wrapper .item .card-data > * { margin-top: 0; margin-bottom: 0; }
.list-wrapper .item .card-data > * + * { margin-top: 0.5rem; }
/*-- Card titles are now <h3> (was <h4>) for proper SEO heading hierarchy: page <h1> ->
     section <h2> -> card <h3>. The class still resets text-transform + letter-spacing so
     card titles respect the casing the author entered, regardless of any global heading
     rule that might apply uppercase styling at a particular level. */
.list-wrapper .item .card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: 0.5px; }
.list-wrapper .item .card-title a { color: inherit; text-decoration: none; }
.list-wrapper .item .card-title a:hover { color: var(--clay); }
/*-- Location / location-like meta rows. Color is ink-mid (darker than description's
     ink-light) so the location contrasts AGAINST the grayed description above it -
     same pattern across all 4 modules. Distance parens sits inside via .card-distance
     and inherits color but reduces opacity so it reads as a secondary hint. */
.list-wrapper .item .card-meta { font-size: 0.85rem; color: var(--ink-mid); font-weight: 500; }
.list-wrapper .item .card-meta i { margin-right: 0.3rem; }
/*-- Map-pin icon is always red across every module's card-meta, matching the Google-
     Maps convention users already associate with location. Higher specificity than
     per-module .card-meta i accent overrides (see modules' .ascx inline <style>). */
.list-wrapper .item .card-meta i.fa-map-marker { color: var(--error); }
.list-wrapper .item .card-distance { opacity: 0.5; font-weight: 400; margin-left: 0.15rem; }
.list-wrapper .item .card-initials { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink-light); }
/*-- Description bodies (.card-text, .card-description) and all other card-data rows
     carry NO own margins - the .card-data > * + * lobotomy-owl rule above is the single
     source of vertical rhythm so every card (businesses / marketplace / news / events)
     has identical gaps between title, secondary, description, and location. */
.list-wrapper .item .card-text { font-size: 0.85rem; color: var(--ink-light); line-height: 1.5; }
/*-- Timestamp row is the secondary data line for events (date/time) and news (posted
     date). Color is var(--ink) (matching .card-title) + weight 600 so the date reads
     as part of the title hierarchy, not as grayed-out description. */
.list-wrapper .item .card-timestamp { font-size: 0.85rem; color: var(--ink); font-weight: 600; }
.list-wrapper .item .card-subtitle { font-size: 0.85rem; color: var(--ink-mid); }
.list-wrapper .item .card-description { font-size: 0.82rem; color: var(--ink-light); line-height: 1.5; }
/*-- 3-line clamp for description bodies keeps cards visually consistent height-wise
     regardless of how long the source text is. Applies to both .card-text (businesses,
     marketplace) and .card-description (news) so every module's third row matches. */
.list-wrapper .item .card-text,
.list-wrapper .item .card-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/*-- Page Manager tags narrow sidebar columns with .is-condensed (e.g. the
     /feed sidebar's 440px column). Inside those columns the four content
     modules' featured cards drop their description body so the card collapses
     to title + meta only. Wider columns (homepage main grid) keep the
     description. CSS-only - no per-module render-path branch needed.
     .card-text covers businesses/events/marketplace; .card-description covers news. */
.is-condensed .module-businesses .list-wrapper .item .card-text,
.is-condensed .module-events .list-wrapper .item .card-text,
.is-condensed .module-marketplace .list-wrapper .item .card-text,
.is-condensed .module-news .list-wrapper .item .card-description { display: none; }
.list-wrapper .item .card-status { font-size: 0.75rem; font-weight: 600; }
.list-wrapper .item .card-status.active { color: var(--sage); }
.list-wrapper .item .card-status.inactive { color: var(--ink-light); }
.list-wrapper .item .color-none { display: block; text-decoration: none; color: inherit; }
.list-wrapper .item .card-price { font-size: 1rem; font-weight: 700; color: var(--clay); }

/*-- Module: Category Grid (shared centered text - applies whenever .category-list is on the wrapper or list) */
.category-list .item .card-data { text-align: center; }

/*-- Module: Event Card Date Box (no-image events) */
.card-event-row { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem; }
.card-date-box { background: var(--gold); color: #fff; border-radius: var(--tl-radius); padding: 0.5rem 0.7rem; text-align: center; flex-shrink: 0; min-width: 56px; }
.card-date-box .card-date-day { display: block; font-size: 1.6rem; font-family: var(--font-display); font-weight: 900; line-height: 1; }
.card-date-box .card-date-month { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.15rem; }
.card-event-row .card-data { padding: 0; flex: 1; }

/*-- Event card placeholder - shown when an event has no image. Calendar icon frames
     the day/month text so the placeholder reads as "this is an event on DATE". Icon
     and text share the same brownish ink-mid color so the text looks like part of the
     icon rather than layered on top. Icon is oversized (9rem in a 160px slot) so the
     text has room to sit inside the calendar body without colliding with the header
     tick-marks; month sits in the upper body (below header band), day in the lower
     body (center of grid area). */
.list-wrapper .item .card-image.card-image-event { background: var(--sand-dark); }
/*-- Specificity note: the generic `.list-wrapper .item .card-image i` rule above
     (color: var(--ink-light); opacity: 0.4) has 4 points and will override a shorter
     `.card-event-cal .fa-calendar-o` selector. So the calendar icon rule below leads
     with `.list-wrapper .item .card-image.card-image-event` (5 points) to win.
     Container + icon are 4.5rem (half the prior 9rem - was overpowering the 160px
     image slot). Month sits at 47% (just above center, inside the body), day at 67%
     (just below center). Tighter than the prior 36%/62% split so both labels fit
     inside the calendar body grid without colliding with the header tick-marks. */
.list-wrapper .item .card-image.card-image-event .card-event-cal { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; }
.list-wrapper .item .card-image.card-image-event .card-event-cal .fa-calendar-o { font-size: 4.5rem; color: var(--ink-mid); opacity: 0.5; line-height: 1; }
.list-wrapper .item .card-image.card-image-event .card-event-cal-month { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mid); opacity: .65; }
.list-wrapper .item .card-image.card-image-event .card-event-cal-day { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1; color: var(--ink-mid); opacity: .65; }

/*-- Module: Badges */
.tl-badge-open { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius); background: var(--sage); color: #fff; font-size: 0.75rem; font-weight: 600; }
.tl-badge-closed { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius); background: var(--error); color: #fff; font-size: 0.75rem; font-weight: 600; }
.tl-badge-featured { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius); background: var(--gold); color: #fff; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.tl-badge-sold { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius); background: var(--clay-dark); color: #fff; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }

/*-- Verified mark - Font Awesome circle-check rendered directly in --sky blue
 *  (the complementary hue to --clay), sized in em so it scales with surrounding
 *  text. Applied to <i class="fa fa-circle-check tl-verified">. No wrapper, no
 *  fixed dimensions - the glyph itself is a circle with a check inside. */
.tl-verified { color: var(--sky); font-size: 0.85em; vertical-align: 0.05em; margin-left: 0.4em; }
/*-- Smaller variant for listing cards (browse / account / profile) where the
 *  badge sits next to a card title instead of a profile h1. */
.tl-verified-sm { font-size: 0.95em; margin-left: 0.3em; }
/*-- Premium feature checklist bullets - same blue tone as the verified badge. */
.tl-feature-check { color: var(--sky); margin-right: 0.4em; }
.tl-premium-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--gold); padding: 0.3rem 0.6rem; background: rgba(212, 175, 55, 0.12); border-radius: var(--tl-radius-pill); border: 1px solid var(--gold); }
.tl-my-listing-actions { padding: 0.5rem 0.75rem; border-top: 1px solid var(--sand); }
.tl-make-premium { font-size: 0.85rem; }
.tx-credit { color: #2e7d32; font-weight: 600; }
.tx-debit { color: #c62828; font-weight: 600; }
.tl-wallet { display: flex; flex-direction: column; gap: 1rem; }
.tl-wallet-card { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.25rem; }
.tl-wallet-balance-card { text-align: center; padding: 1rem; background: linear-gradient(135deg, var(--clay) 0%, var(--clay-dark) 100%); color: #fff; }
.tl-wallet-balance-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.tl-wallet-balance-amount { font-family: var(--font-display); font-size: 3rem; font-weight: 800; margin: 0; line-height: 1.1; }
.tl-wallet-section-title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.75rem; color: var(--ink); }
.tl-wallet-amount-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.tl-wallet-amount-row .tl-wallet-preset { font-size: 0.9rem; padding: 0.4rem 0.9rem; }
.tl-wallet-amount-row .tl-wallet-amount-input { flex: 0 1 10rem; max-width: 12rem; width: auto; }
.tl-wallet-content-link { color: var(--clay); text-decoration: none; }
.tl-wallet-content-link:hover { text-decoration: underline; }
.tl-wallet-content-na { color: var(--ink-light); font-style: italic; }
.tl-wallet-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tl-wallet-table th, .tl-wallet-table td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--sand); }
.tl-wallet-table th { background: var(--sand); font-weight: 600; }
.tl-wallet-tx-type { text-transform: capitalize; }

/*-- Recurring top-up: the checkbox toggle and the billing-terms notice it
     reveals. .tl-wallet-recur-notice stays display:none until JS adds .tl-show. */
.tl-wallet-recur-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-mid); cursor: pointer; }
.tl-wallet-recur-notice { display: none; margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--sand); border-left: 3px solid var(--clay); border-radius: var(--tl-radius); font-size: 0.85rem; color: var(--ink-mid); line-height: 1.45; }
.tl-wallet-recur-notice.tl-show { display: block; }

/*-- Subscriptions card rows: amount + meta on the left, Cancel button on the right. */
.tl-wallet-sub { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sand); flex-wrap: wrap; }
.tl-wallet-sub:last-child { border-bottom: none; }
.tl-wallet-sub-amount { font-weight: 600; color: var(--ink); }
.tl-wallet-sub-meta { font-size: 0.85rem; color: var(--ink-light); margin-top: 0.15rem; }
.tl-wallet-sub-cancel { font-size: 0.85rem; }

/*-- Top-up form result message states (CSS classes, not inline JS style). */
.tl-wallet-msg-error { color: var(--error); }
.tl-wallet-msg-ok { color: var(--sage); }

/*-- My Advertisements: Stats dashboard. The Edit/Stats switch is a single
     .tl-form-view-public button at the top-right of each form (same affordance
     as the "View Public" button on businesses/events/marketplace/news edit
     forms). Width constraints below stop the chart canvas + table from
     forcing the page-manager column wider than its allocated space. */
.advertisements-wrapper,
.advertisements-my-wrapper { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cell-content.module-advertisements { min-width: 0; max-width: 100%; }

.tl-myad-stats-range { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.tl-myad-stats-range-btn { display: inline-block; padding: 0.45rem 0.95rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); background: var(--white); color: var(--ink); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tl-myad-stats-range-btn:hover { background: var(--sand); border-color: var(--clay-light, #dfb392); color: var(--ink); }
.tl-myad-stats-range-btn.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }

.tl-myad-stats-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; min-width: 0; max-width: 100%; }
.tl-myad-stats-hero-tile { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1rem 1.1rem; position: relative; }
.tl-myad-stats-hero-icon { position: absolute; top: 0.85rem; right: 0.95rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sand); color: var(--clay); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.tl-myad-stats-hero-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; margin-bottom: 0.45rem; }
.tl-myad-stats-hero-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin-bottom: 0.4rem; }
.tl-myad-stats-hero-delta { font-size: 0.78rem; color: var(--ink-light); }
.tl-myad-stats-delta-up { color: var(--sage); font-weight: 700; }
.tl-myad-stats-delta-down { color: #c5562a; font-weight: 700; }
.tl-myad-stats-delta-flat { color: var(--ink-light); font-weight: 600; font-style: italic; }
.tl-myad-stats-delta-suffix { color: var(--ink-light); }

/*-- Window-section banner. Sits between the lifetime hero row and the
     filter-affected content. Visual anchor so the reader knows "everything
     below this header is scoped to the active filter pill above". */
.tl-myad-stats-window-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: 2rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--sand-dark); }

/*-- Flat section title. Used by the daily breakdown so the table sits
     directly under a heading without being wrapped in another card. */
.tl-myad-stats-flat-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 2rem 0 0.85rem 0; padding: 0; }
.tl-myad-stats-flat-title i.fa { color: var(--clay); margin-right: 0.4rem; }

.tl-myad-stats-section { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.1rem 1.2rem; margin-bottom: 1.25rem; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.tl-myad-stats-section-header { margin-bottom: 0.85rem; }
.tl-myad-stats-section-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 0.2rem 0; }
.tl-myad-stats-section-title i.fa { color: var(--clay); margin-right: 0.4rem; }
.tl-myad-stats-section-sub { font-size: 0.82rem; color: var(--ink-light); }
/*-- Chart container is sized by Chart.js's responsive=true. min-width:0 lets
     it shrink below the canvas's intrinsic 300px when the column is narrow.
     The forced max-width on the canvas guards against Chart.js writing a
     pixel width that exceeds the parent. */
.tl-myad-stats-chart-wrap { position: relative; height: 320px; width: 100%; min-width: 0; max-width: 100%; }
.tl-myad-stats-chart-wrap canvas { max-width: 100% !important; }

.tl-myad-stats-eff { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 1.25rem; min-width: 0; max-width: 100%; }
.tl-myad-stats-eff-tile { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 0.95rem 1.1rem; }
.tl-myad-stats-eff-tile.tl-myad-stats-eff-best { background: linear-gradient(135deg, #fff 0%, #faf3e8 100%); border-color: #ffd970; }
.tl-myad-stats-eff-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; margin-bottom: 0.4rem; }
.tl-myad-stats-eff-best .tl-myad-stats-eff-label { color: #8a6300; }
.tl-myad-stats-eff-best .tl-myad-stats-eff-label i.fa { color: #d49f38; margin-right: 0.3rem; }
.tl-myad-stats-eff-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 0.3rem; }
.tl-myad-stats-eff-value.tl-myad-stats-eff-empty { color: var(--ink-light); }
.tl-myad-stats-eff-help { font-size: 0.78rem; color: var(--ink-light); line-height: 1.4; }

/*-- Daily breakdown table renders as the card itself: background + border +
     radius live on the wrap, not on an outer section. This keeps the card
     shell visible (white panel, rounded corners) without the double-padding
     of a card-inside-a-card. The table's own cell padding is the only
     interior whitespace. */
.tl-myad-stats-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); margin-bottom: 1.25rem; }
.tl-myad-stats-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; table-layout: auto; }
.tl-myad-stats-table th, .tl-myad-stats-table td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--sand); }
.tl-myad-stats-table tr:last-child td { border-bottom: 0; }
.tl-myad-stats-table th { background: var(--sand); color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; border-bottom: 2px solid var(--sand-dark); }
.tl-myad-stats-table thead tr:first-child th:first-child { border-top-left-radius: var(--tl-radius); }
.tl-myad-stats-table thead tr:first-child th:last-child { border-top-right-radius: var(--tl-radius); }
.tl-myad-stats-table td:nth-child(2), .tl-myad-stats-table td:nth-child(3),
.tl-myad-stats-table td:nth-child(4), .tl-myad-stats-table td:nth-child(5),
.tl-myad-stats-table td:nth-child(6) { font-variant-numeric: tabular-nums; }
.tl-myad-stats-cap-cool { color: var(--sage); font-weight: 600; }
.tl-myad-stats-cap-warm { color: #b8771f; font-weight: 600; }
.tl-myad-stats-cap-hot  { color: #c5562a; font-weight: 700; }
.tl-myad-stats-cap-none { color: var(--ink-light); font-style: italic; }
.tl-myad-stats-empty { padding: 1.5rem; text-align: center; color: var(--ink-light); font-style: italic; }

@media (max-width: 640px) {
	.tl-myad-stats-chart-wrap { height: 240px; }
	.tl-myad-stats-hero-value { font-size: 1.5rem; }
	.tl-myad-stats-eff-value { font-size: 1.3rem; }
}

/*-- Event: Add to Calendar Button */
.tl-btn-calendar { display: inline-block; margin: var(--tl-space-2) 0 var(--tl-space-4); }

/*-- News: Copy Link Button */
.news-social-copy { display: inline-block; padding: var(--tl-space-1) var(--tl-space-3); border-radius: var(--tl-radius); background: var(--clay-light); color: var(--ink); font-size: 0.85rem; text-decoration: none; cursor: pointer; transition: background 0.2s; }
.news-social-copy:hover { background: var(--clay); color: #fff; }

/*-- Module: Star Rating */
.tl-rating { display: inline-flex; align-items: center; gap: 0.25rem; }
.tl-rating i { color: var(--gold); font-size: 0.85rem; }
.tl-rating i.empty { color: var(--sand-dark); }
.tl-rating-count { font-size: 0.8rem; color: var(--ink-light); margin-left: 0.25rem; }

/*-- Module: Form Controls (shared across modules) */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
textarea, select {
	font-family: var(--tl-font-body);
	font-size: var(--tl-text-body);
	padding: var(--tl-space-2) var(--tl-space-3);
	border: 1px solid var(--sand-dark);
	border-radius: var(--tl-radius);
	background: var(--white);
	color: var(--ink);
	min-height: var(--tl-touch-min);
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.form-control:focus, .form-select:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
	outline: none;
	border-color: var(--sky);
	box-shadow: 0 0 0 3px rgba(58, 122, 191, 0.15);
}
.form-control { width: 100%; }
.form-select { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b5e52' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
textarea.form-control { resize: vertical; min-height: 80px; }

/*-- Search Input */
.search-input { position: relative; }
.search-input input { padding-left: var(--tl-space-8); border-radius: var(--tl-radius-pill); min-height: var(--tl-touch-min); }
.search-input .fa { position: absolute; left: var(--tl-space-3); top: 50%; transform: translateY(-50%); color: var(--ink-light); }

/*-- Module: My Items List (shared across modules) */
.my-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.my-item { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); padding: 1rem 1.2rem; display: flex; gap: 1rem; align-items: center; transition: box-shadow 0.2s; }
.my-item:hover { box-shadow: 0 4px 16px rgba(30, 26, 22, 0.08); }
.my-item-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--tl-radius); overflow: hidden; }
.my-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.my-item-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.25rem 0.6rem; border-radius: var(--tl-radius-pill); flex-shrink: 0; }
.my-item-status.active { background: rgba(90, 122, 92, 0.12); color: var(--sage); }
.my-item-status.inactive { background: var(--sand); color: var(--ink-light); }
.my-item-status.expired { background: rgba(200, 98, 42, 0.1); color: var(--clay); }
.my-item-info { flex: 1; min-width: 0; }
.my-item-title { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.my-item-title a { color: inherit; text-decoration: none; }
.my-item-title a:hover { color: var(--clay); }
.my-item-meta { font-size: 0.78rem; color: var(--ink-light); margin-top: 0.15rem; }
.my-item-actions { margin-top: 0.35rem; }

/*-- Module: Detail Layout (shared 2-column grid for businesses/marketplace detail pages).
     Horizontal column gap (2.5rem) is intentionally wider than the vertical gap
     between stacked sections in .tl-detail-main, so sidebar reads as a separate
     column while sections in main stay visually grouped. */
.tl-detail-layout { display: grid; grid-template-columns: 320px 1fr; gap: 2.5rem; }
@media (max-width: 930px) { .tl-detail-layout { grid-template-columns: 1fr; } }

/*-- Profile variant: MAIN (left) | SIDEBAR (right). HTML source order is main
     then sidebar, so on mobile the order:-1 rule below pulls the identity card
     up above the tab content. Sidebar at 440px gives the About column enough
     room to read as side content while leaving main as the natural ~700px
     reading width without forcing a max-width on the posts. */
.tl-detail-layout-sidebar-right { grid-template-columns: 1fr 440px; }
/*-- Force visual order regardless of source emit order. Profile keeps main
     first in source; businesses keeps sidebar first in source. Both end up
     with main on the left, sidebar on the right. */
.tl-detail-layout-sidebar-right > .tl-detail-main { order: 1; }
.tl-detail-layout-sidebar-right > .tl-detail-sidebar { order: 2; }
@media (max-width: 1100px) { .tl-detail-layout-sidebar-right { grid-template-columns: 1fr 360px; } }
@media (max-width: 930px) {
	.tl-detail-layout-sidebar-right { grid-template-columns: 1fr; }
	.tl-detail-layout-sidebar-right > .tl-detail-sidebar { order: -1; }
}

/*-- Module: Detail Gallery (shared image grid for detail pages). Tiles are
     <button> elements (not <a>) because clicking opens a lightbox modal in
     place rather than navigating away - buttons reset to look like links.
     Tiles past the visible cap get `.tl-gallery-tile-hidden` and stay in the
     DOM only so the lightbox can navigate through them. The last visible
     tile gets a "+N more" overlay when there are hidden tiles. */
.tl-detail-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.tl-detail-gallery .tl-gallery-tile,
.tl-detail-gallery a { display: block; position: relative; border-radius: var(--tl-radius); overflow: hidden; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tl-detail-gallery .tl-gallery-tile-hidden { display: none; }
.tl-detail-gallery .tl-gallery-tile:hover img,
.tl-detail-gallery a:hover img { transform: scale(1.05); }
.tl-detail-gallery img { width: 100%; height: 120px; object-fit: cover; display: block; transition: transform 0.2s; }
.tl-gallery-more-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; pointer-events: none; transition: background 0.15s; }
.tl-gallery-tile-overflow:hover .tl-gallery-more-overlay { background: rgba(0,0,0,0.72); }
@media (max-width: 600px) { .tl-detail-gallery { grid-template-columns: repeat(2, 1fr); } }

/*-- Claim modal hint text */
.tl-form-hint { color: var(--ink-mid); font-size: 0.88rem; margin: 0 0 0.6rem 0; }

/*-- Lightbox modal (Facebook-style image viewer) - fixed overlay, dim
     background, large image, click halves of the image OR the side arrows
     to step prev/next. Active state is `.open` (added by tlOpenLightbox). */
.tl-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; z-index: 9999; align-items: center; justify-content: center; padding: 2rem; }
.tl-lightbox-overlay.open { display: flex; }
body.tl-lightbox-open { overflow: hidden; }
.tl-lightbox-stage { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.tl-lightbox-img { max-width: min(90vw, 1400px); max-height: 80vh; display: block; border-radius: var(--tl-radius); cursor: pointer; user-select: none; }
.tl-lightbox-caption { color: #fff; font-family: var(--font-body); font-size: 0.95rem; text-align: center; max-width: 80vw; }
.tl-lightbox-counter { color: rgba(255,255,255,0.7); font-family: var(--font-body); font-size: 0.85rem; }
.tl-lightbox-close, .tl-lightbox-prev, .tl-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: 0; color: #fff; font-size: 2rem; line-height: 1; padding: 0.6rem 1rem; cursor: pointer; border-radius: var(--tl-radius); transition: background 0.15s; user-select: none; }
.tl-lightbox-close:hover, .tl-lightbox-prev:hover, .tl-lightbox-next:hover { background: rgba(0,0,0,0.85); }
.tl-lightbox-close { top: 1.2rem; right: 1.2rem; transform: none; font-size: 2.4rem; padding: 0.2rem 0.7rem; }
.tl-lightbox-prev { left: 1.5rem; }
.tl-lightbox-next { right: 1.5rem; }
@media (max-width: 600px) {
	.tl-lightbox-prev, .tl-lightbox-next { font-size: 1.5rem; padding: 0.4rem 0.7rem; }
	.tl-lightbox-prev { left: 0.5rem; }
	.tl-lightbox-next { right: 0.5rem; }
}

/*-- Module: Detail Sidebar/Main (shared 2-column inner layout). Main gap is
     small because .detail-section already carries its own margin-bottom; the
     two combine to ~1.5rem total, intentionally tighter than the layout
     column gap so stacked content reads as a continuous thread. */
/*-- Sidebar + main both use a uniform 2rem inter-section gap to match the
     Page Manager rail on /feed (which has no dividers - just whitespace
     between labelled sections). The gap is on the flex parent so it applies
     uniformly to .detail-section, .ad-zone, and any other sibling type. */
.tl-detail-sidebar { display: flex; flex-direction: column; gap: 2rem; }
/*-- Main column: rail label sits 0.4rem above each card (its own margin-bottom).
     The card keeps its natural top padding so content isn't pressed against the
     border. Section-to-section gap is 2rem via margin-bottom - flex gap would
     add the same gap on both sides (between label and card too), inflating the
     label-to-card distance. The :first-child reset zeros out any margin-top on
     content (e.g., .tl-detail-gallery margin-top: 0.5rem) so the inset matches
     the card's top padding evenly. */
/*-- Grid + flex children default to min-width:auto, which lets natural-content
     size (e.g. a 4-image feed gallery) push the column wider than 1fr. Setting
     min-width:0 on the grid items and on .tl-detail-main lets card-feed honor
     its overflow:hidden and stay inside the column. */
.tl-detail-layout > * { min-width: 0; }
.tl-detail-main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.tl-detail-main > .detail-section { margin-bottom: 2rem; }
.tl-detail-main > .detail-section:last-child { margin-bottom: 0; }
.tl-detail-main > .detail-section > :first-child { margin-top: 0; }
/*-- Invisible group wrapper. Used when a section emits its own self-contained
     cards (reviews, activity feed) instead of being one .detail-section card.
     The wrapper owns the 2rem section-to-section gap so the inner cards can
     keep their tight 0.5rem inter-card gaps - same rhythm as the home feed. */
.tl-detail-main > .tl-section-stack { margin-bottom: 2rem; }
.tl-detail-main > .tl-section-stack:last-child { margin-bottom: 0; }
.tl-section-stack > :last-child { margin-bottom: 0; }

/*-- Module: Detail Hero (shared image banner for detail pages) */
.tl-detail-hero { position: relative; width: 100%; border-radius: var(--tl-radius); overflow: hidden; margin-bottom: 1.5rem; }
.tl-detail-hero img { width: 100%; height: 300px; object-fit: cover; display: block; background: var(--sand); }

/*-- Module: Detail Title Area (shared across businesses/marketplace) */
.tl-detail-title-area { margin-bottom: 1rem; }
.tl-detail-title-area h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.tl-detail-cat-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.tl-detail-cat-pills span { display: inline-block; padding: 0.2rem 0.7rem; border-radius: var(--tl-radius-pill); font-size: 0.8rem; font-weight: 500; color: #fff; }

/*-- Module: Detail Sections (shared across modules) */
.detail-section { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.2rem; margin-bottom: 1rem; }
/*-- Strip trailing margin off whatever the last child is, so the visible gap
     to the next section is exactly the parent's flex gap (sidebar) or this
     section's margin-bottom (main). Without this, a child like .card-feed-text
     (margin-bottom: 0.9rem) or .detail-section-row (margin-bottom: 0.5rem)
     doubles into the parent gap and section spacing reads as inconsistent. */
.detail-section > :last-child { margin-bottom: 0; }
.detail-section h3,
.tl-section-heading { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); margin: 0 0 0.75rem; }
.detail-section h3 i,
.tl-section-heading i { margin-right: 0.4rem; color: var(--ink-light); }
/*-- Section heading rendered OUTSIDE a card wrapper (e.g., business activity
     feed where the items are already self-contained cards). A touch of top
     spacing separates it from the preceding card without the card chrome. */
.tl-section-heading { margin-top: 1.25rem; }
.detail-section-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.detail-section-row i { color: var(--sage); width: 18px; text-align: center; flex-shrink: 0; }
.detail-section-row a { color: var(--ink); }
.detail-section-row a:hover { color: var(--clay); }
.detail-section-body { font-size: 0.9rem; line-height: 1.65; color: var(--ink-mid); }

/*-- Profile + Account sidebars share the same flatten-chrome treatment so
     the right rail reads as side content (text on the page background)
     rather than a stack of bubbles. Same look as the "Upcoming Events"
     sidebar on the community feed. */
.tl-profile-sidebar .detail-section,
.tl-account-sidebar .detail-section { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 0; }

/*-- No dividers between sidebar sections - matches the Page Manager rail on
     /feed which uses pure whitespace (the 2rem flex gap on the parent) to
     separate sections. Adding a border here on top of the flex gap puts the
     line off-center inside the gap. */
.tl-profile-sidebar .detail-section h3,
.tl-account-sidebar .detail-section h3 { font-size: 1rem; margin: 0 0 0.65rem; }

/*-- Bio/text body */
.tl-profile-sidebar .detail-section-body,
.tl-account-sidebar .detail-section-body { line-height: 1.4; margin-bottom: 0.75rem; }

/*-- Icons (left side) use clay-dark across every row. Link semantics live in
     the right-side disclosure caret, not in icon color. */
.tl-profile-sidebar .detail-section-row i,
.tl-account-sidebar .detail-section-row i { color: var(--clay-dark); }

/*-- Link rows: entire row is the click target. Flex anchor lays out
     icon + label + right caret. Subtle hover tint + 2px caret nudge. */
.tl-profile-sidebar .detail-section-row.is-link,
.tl-account-sidebar .detail-section-row.is-link { padding: 0; margin-bottom: 0.15rem; }
.tl-profile-sidebar .detail-section-row.is-link a,
.tl-account-sidebar .detail-section-row.is-link a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.4rem 0.5rem;
	margin: 0 -0.5rem;
	border-radius: var(--tl-radius);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.15s;
}
.tl-profile-sidebar .detail-section-row.is-link a:hover,
.tl-account-sidebar .detail-section-row.is-link a:hover { background: rgba(158, 74, 30, 0.08); color: var(--ink); }
.tl-profile-sidebar .detail-section-row.is-link a > span,
.tl-account-sidebar .detail-section-row.is-link a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-profile-sidebar .detail-section-row.is-link .tl-link-arrow,
.tl-account-sidebar .detail-section-row.is-link .tl-link-arrow {
	margin-left: auto;
	color: var(--clay-dark);
	font-size: 0.95em;
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity 0.15s, transform 0.15s;
}
.tl-profile-sidebar .detail-section-row.is-link a:hover .tl-link-arrow,
.tl-account-sidebar .detail-section-row.is-link a:hover .tl-link-arrow { opacity: 1; transform: translateX(2px); }

/*-- Account-sidebar identity card: avatar + name + handle stacked inside the
     shared white card chrome. The parent rule above strips card chrome from
     every sidebar section, so re-apply it here for just this one. Each of the
     three elements is its own anchor to /members/{urlname} - empty card area
     is NOT a click target. */
.tl-account-sidebar .tl-account-identity { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.2rem; text-align: center; }
.tl-account-sidebar .tl-account-identity-avatar,
.tl-account-sidebar .tl-account-identity-name,
.tl-account-sidebar .tl-account-identity-handle,
.tl-account-sidebar .tl-account-identity-balance { display: block; text-decoration: none; color: inherit; }
.tl-account-sidebar .tl-account-identity-avatar { margin-bottom: 0.6rem; }
.tl-account-sidebar .tl-account-identity-avatar .tl-avatar { margin: 0 auto; transition: transform 0.15s; }
.tl-account-sidebar .tl-account-identity-avatar:hover .tl-avatar { transform: scale(1.04); }
.tl-account-sidebar .tl-account-identity-name { margin-top: 0.1rem; }
.tl-account-sidebar .tl-account-identity-handle { margin-top: 0.1rem; }
.tl-account-sidebar .tl-account-identity-balance { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--sand-dark); }
.tl-account-sidebar .tl-account-identity-name:hover .tl-account-name { color: var(--clay-dark); }
.tl-account-sidebar .tl-account-identity-handle:hover .tl-account-handle { color: var(--clay-dark); }
.tl-account-sidebar .tl-account-identity-balance:hover .tl-account-balance { color: var(--clay-dark); }
.tl-account-sidebar .tl-account-identity .tl-account-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); transition: color 0.15s; }
.tl-account-sidebar .tl-account-identity .tl-account-handle { font-size: 0.85rem; color: var(--ink-light); transition: color 0.15s; }
.tl-account-sidebar .tl-account-identity .tl-account-balance { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--clay); transition: color 0.15s; }

/*-- Active link indicator - the row matching the current /account/* path
     gets a light clay tint + bolder weight so the rail mirrors a sidebar nav
     pattern. Subtler than the old solid-clay pill since the rail is cardless. */
.tl-account-sidebar .detail-section-row.is-link.is-active a {
	background: rgba(158, 74, 30, 0.14);
	color: var(--clay-dark);
	font-weight: 600;
}
.tl-account-sidebar .detail-section-row.is-link.is-active a i { color: var(--clay-dark); }
.tl-account-sidebar .detail-section-row.is-link.is-active .tl-link-arrow { opacity: 1; }

/*-- Owner-page filter bar: same look as the public filter bar but lives in a
     narrower main column (because the right rail is fixed at 440px). Wrap to
     a second line when the search box would otherwise crowd the dropdowns. */
.tl-owner-filter-bar { flex-wrap: wrap; }

/*-- Delete button on owner-edit forms (replaces the legacy Cancel button).
     Red outline with red text by default; on hover the bg fills red and text
     turns white - same color story as the unfollow button on profiles. */
.btn.btn-delete {
	background: transparent;
	color: #b8332b;
	border-color: #b8332b;
	transition: background 0.15s, color 0.15s;
}
.btn.btn-delete:hover { background: #b8332b; color: #fff; }
.btn.btn-delete:focus { outline: 2px solid #b8332b; outline-offset: 2px; }

/*-- Module: Alert Messages */
.alert-expired { background: rgba(200, 98, 42, 0.1); color: var(--clay); border-radius: var(--tl-radius); padding: 0.8rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; }

/*-- Forms: Base (feedback_forms + member forms) */
.no-transition { transition: none !important; }
.module-feedback_forms { max-width: 560px; }
.panel .cell .module-feedback_forms { max-width: 100%; }
.module-feedback_forms ul { list-style: none; padding: 0; margin: 0; }
.module-feedback_forms li { margin-bottom: 0.75rem; }
.module-feedback_forms label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.module-feedback_forms input[type="text"], .module-feedback_forms input[type="email"], .module-feedback_forms input[type="password"], .module-feedback_forms textarea { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; background: var(--white); color: var(--ink); transition: border-color 0.2s; box-sizing: border-box; }
.module-feedback_forms input[type="text"]:focus, .module-feedback_forms input[type="email"]:focus, .module-feedback_forms input[type="password"]:focus, .module-feedback_forms textarea:focus { border-color: var(--clay); outline: none; }
.module-feedback_forms textarea { resize: vertical; min-height: 120px; }
.module-feedback_forms input[type="submit"] { display: inline-block; background: var(--clay); color: white; border: none; padding: 0.6rem 1.5rem; border-radius: var(--tl-radius-pill); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.module-feedback_forms input[type="submit"]:hover { background: var(--clay-dark); }

/*-- Members Module: Auth Forms */
.member-login-signup { max-width: 420px; margin: 0 auto; min-height: 55vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.member-login-signup .form-wrapper { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto; }
.member-login-signup .form-main { padding: 1.5rem 1.5rem 1rem; }
.member-login-signup .content-title { font-family: var(--tl-font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); margin-bottom: 0.5rem; text-align: center; }
.member-login-signup .form-description { font-size: 0.85rem; color: var(--ink-light); margin-bottom: 1rem; text-align: center; }
.member-login-signup .form-description em { color: var(--clay); font-style: normal; }
.member-login-signup .error-msg { color: var(--error); }
.member-login-signup .success-msg { color: var(--sage); }
.member-login-signup .form-fields ul { list-style: none; padding: 0; margin: 0; }
.member-login-signup .form-fields li { margin-bottom: 0.75rem; }
.member-login-signup .form-fields label,
.member-login-signup .form-fields .label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.member-login-signup .form-fields label em,
.member-login-signup .form-fields .label em { color: var(--clay); font-style: normal; }
.member-login-signup .textbox { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; background: var(--white); color: var(--ink); transition: border-color 0.2s; box-sizing: border-box; }
.member-login-signup .textbox:focus { border-color: var(--clay); outline: none; }
.member-login-signup select.textbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b5e52' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }
.member-login-signup .field.with-overlay,
.member-login-signup .field-inline.with-overlay { position: relative; }
.member-login-signup .icon-overlay { position: absolute; right: 0.8rem; top: 0.65rem; color: var(--ink-light); pointer-events: none; font-size: 1rem; }
.member-login-signup .input-overlay { padding-right: 2.2rem; }
.member-login-signup .field-note { font-size: 0.75rem; color: var(--ink-light); margin-top: 0.3rem; }
.member-login-signup .field-inline { display: inline-block; width: calc(50% - 0.25rem); vertical-align: top; }
.member-login-signup .field-inline + .field-inline { margin-left: 0.5rem; }
.member-login-signup .field-hr { border: none; border-top: 1px solid var(--sand-dark); margin: 0.5rem 0; }
.member-login-signup .checkboxradio { font-size: 0.85rem; color: var(--ink-mid); }
.member-login-signup .checkboxradio label { display: inline; font-weight: 400; cursor: pointer; }
.member-login-signup .member-forgot { float: right; font-size: 0.82rem; color: var(--sky); text-decoration: none; cursor: pointer; }
.member-login-signup .member-forgot:hover { color: var(--clay); }
.member-login-signup .member-join { text-align: center; padding-top: 0.75rem; font-size: 0.85rem; }
.member-login-signup .member-join a { color: var(--sky); text-decoration: none; cursor: pointer; font-weight: 600; }
.member-login-signup .member-join a:hover { color: var(--clay); }
.member-login-signup .button { display: flex; width: 100%; justify-content: center; padding: 0.65rem 1.5rem; font-size: 0.95rem; margin-top: 0.5rem; }
.member-login-signup .cvalidation { color: var(--error); font-size: 0.8rem; display: block; margin-top: 0.3rem; }

/*-- Members Module: Edit Profile (wider form) */
.member-form .member-form-row { display: flex; gap: 0.5rem; }
.member-form .member-form-col-1 { flex: 1; }
.member-form .member-form-col-2 { flex: 2; }
.member-form .member-form-checks { display: flex; flex-wrap: wrap; gap: 1rem; }

/*-- Edit Profile: External Links section.
     Each row is one URL input + a remove button. Layout intentionally mirrors
     the public sidebar's row rhythm so the user can mentally connect "this
     input" with "the row that will appear on my profile". */
.member-form .member-form-links .form-help { font-size: 0.78rem; color: var(--ink-light); margin: 0 0 0.6rem; line-height: 1.4; }
.member-form .tl-ext-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.member-form .tl-ext-row { display: flex; gap: 0.5rem; align-items: center; }
.member-form .tl-ext-row input[type="text"] { flex: 1; padding: 0.55rem 0.8rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; background: var(--white); color: var(--ink); box-sizing: border-box; }
.member-form .tl-ext-row input[type="text"]:focus { border-color: var(--clay); outline: none; }
.member-form .tl-ext-remove { flex-shrink: 0; width: 38px; height: 38px; padding: 0; border: 1px solid var(--sand-dark); background: var(--white); color: var(--ink-light); border-radius: var(--tl-radius); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.member-form .tl-ext-remove:hover { color: var(--clay-dark); border-color: var(--clay-dark); }
.member-form .tl-ext-add { display: inline-flex; align-items: center; gap: 0.4rem; }
/*-- Account forms: fill the panel cell so they match the businesses My-Listings
     form. The earlier 640px cap on .form-container made events/marketplace/news
     look skinny next to the sidebar. Mirrors the .panel .cell .module-feedback_forms
     override above which already takes the businesses form to 100%. */
.panel .cell .form-wrapper { max-width: 100%; }
.panel .cell .form-container { max-width: 100%; }

/*-- Account Forms: Shared across all account module edit/add forms */
.form-fields ul { list-style: none; padding: 0; margin: 0; }
.form-fields li { margin-bottom: 0.75rem; }
.form-fields label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.form-fields label em { color: var(--clay); font-style: normal; }
.form-fields .textbox { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; background: var(--white); color: var(--ink); transition: border-color 0.2s; box-sizing: border-box; }
.form-fields .textbox:focus { border-color: var(--clay); outline: none; }
.form-fields select.textbox { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2rem; }
.form-fields textarea.textbox { resize: vertical; min-height: 80px; }
.form-group { margin-bottom: 0.75rem; }
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.form-label .required { color: var(--clay); }
.form-help { font-size: 0.78rem; color: var(--ink-light); margin-top: 0.2rem; }
.form-hint { font-size: 0.78rem; color: var(--ink-light); margin: 0 0 0.5rem 0; line-height: 1.4; }
.form-message { display: block; margin: 0 0 1rem 0; }
.form-message.error-msg { padding: 0.6rem 0.85rem; border-radius: var(--tl-radius); background: rgba(192, 57, 43, 0.08); border-left: 3px solid var(--error); color: var(--error); font-size: 0.875rem; line-height: 1.4; }
.form-message.msg-success { padding: 0.6rem 0.85rem; border-radius: var(--tl-radius); background: rgba(90, 122, 92, 0.10); border-left: 3px solid var(--sage); color: var(--sage); font-size: 0.875rem; line-height: 1.4; }
.form-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.form-group-half { flex: 1; }
.form-group-third { flex: 1; }
.form-row .form-group { margin-bottom: 0; }
.form-container { max-width: 640px; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 2.5rem; padding-top: 0.5rem; }
.form-checks { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--sand); }
.form-check { display: flex; align-items: center; gap: 0.45rem; line-height: 1.2; }
.form-check label { margin: 0; padding: 0; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--ink); line-height: 1.2; display: inline; }
.form-check input[type="checkbox"] { margin: 0; padding: 0; cursor: pointer; flex-shrink: 0; width: 16px; height: 16px; vertical-align: middle; }

/*-- Trix editor (front-end account forms only - news, events, marketplace).
     Toolbar styled as a form-control header; editor body matches .form-control.
     Server strips disallowed tags via Input.SanitizeHtmlStrict so this is UX. */
trix-editor { display: block; min-height: 10rem; padding: 0.65rem 0.85rem; border: 1px solid var(--sand-dark); border-top: none; border-radius: 0 0 var(--tl-radius) var(--tl-radius); background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; box-sizing: border-box; }
trix-editor:focus { outline: none; border-color: var(--clay); }

/*-- Trix toolbar. trix.css loads BEFORE style.css in template.master so
     these rules win the cascade against Trix's defaults (2.6em buttons,
     SVG icons, 1.5vw group margins). Toolbar uses sand-dark for contrast
     against both the page bg (sand) and editor body (white). All button
     icons are FontAwesome - same icon set the rest of the site uses - so
     bold/italic/underline/strike/etc. read as one consistent typeface
     instead of mixing SVG + ASCII fallbacks. */
trix-toolbar {
	display: block;
	background: var(--sand-dark);
	border: 1px solid var(--sand-dark);
	border-bottom: none;
	border-radius: var(--tl-radius) var(--tl-radius) 0 0;
	padding: 0;  /*-- bar has no padding; buttons fill its full height */
}
trix-toolbar .trix-button-row { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; margin: 0; padding: 0; }
trix-toolbar .trix-button-group {
	display: inline-flex;
	gap: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}
trix-toolbar .trix-button-group + .trix-button-group { margin-left: 0.4rem; }
trix-toolbar .trix-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	max-width: 2rem;
	min-height: 0;  /*-- override site-wide button { min-height: var(--tl-touch-min) } */
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--ink-mid);
	font-size: 0;  /*-- hide Trix's native button label text; ::before re-sets size for the FA icon */
	line-height: 1;
	text-indent: 0;
	transition: background-color 0.12s, color 0.12s;
}

/*-- FontAwesome icon via ::before for each button. Trix v2 paints its
     SVG icons as background-image on the ::before pseudo-element (not on
     the button), so background-image: none MUST be set on ::before too,
     or both the FA glyph AND the SVG render stacked on top of each other.
     Codepoints match Font Awesome 4.4 (shipped in webitems/common/fonts/). */
trix-toolbar .trix-button--icon { background-image: none; background: transparent; }
trix-toolbar .trix-button--icon::before {
	background-image: none;  /*-- this is the critical one - Trix's SVG lives here */
	background: transparent;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9rem;
	line-height: 2rem;  /*-- match button height so the FA glyph's baseline lands at the button's vertical center */
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}
trix-toolbar .trix-button--icon-bold::before        { content: "\f032"; }  /*-- fa-bold */
trix-toolbar .trix-button--icon-italic::before      { content: "\f033"; }  /*-- fa-italic */
trix-toolbar .trix-button--icon-underline::before   { content: "\f0cd"; }  /*-- fa-underline */
trix-toolbar .trix-button--icon-strike::before      { content: "\f0cc"; }  /*-- fa-strikethrough */
trix-toolbar .trix-button--icon-bullet-list::before { content: "\f0ca"; }  /*-- fa-list-ul */
trix-toolbar .trix-button--icon-number-list::before { content: "\f0cb"; }  /*-- fa-list-ol */

trix-toolbar .trix-button:not(:disabled):hover { background: var(--sand); color: var(--ink); }
trix-toolbar .trix-button.trix-active { background: var(--clay); color: #fff; }
trix-toolbar .trix-button.trix-active:hover { background: var(--clay-dark); color: #fff; }
trix-toolbar .trix-button:disabled,
trix-toolbar .trix-button[disabled] { opacity: 0.3; cursor: not-allowed; }
trix-toolbar .trix-button:disabled:hover,
trix-toolbar .trix-button[disabled]:hover { background: transparent; color: var(--ink-mid); }

trix-editor h1 { display: none; }  /*-- belt-and-suspenders: hide stray headings even though toolbar can't insert them */

/*-- Trix editor list spacing. The global * reset (line 72) zeros margin and
     padding on every element, and on /account/* pages the form sits inside
     a .module-feedback_forms wrapper whose own rule
       .module-feedback_forms ul { list-style:none; padding:0; margin:0 }
     beats a plain `trix-editor ul` (0,1,1 vs 0,0,2) and kills the markers.
     We have to qualify with the .trix-editor class (every editor in the
     project carries it - see option.ascx.cs) to push our specificity to
     (0,1,2) and win the cascade. */
trix-editor.trix-editor ul,
trix-editor.trix-editor ol { margin: 0.5rem 0 0.5rem 1.5rem; padding-left: 0.5rem; }
trix-editor.trix-editor ul { list-style: disc outside; }
trix-editor.trix-editor ol { list-style: decimal outside; }
trix-editor.trix-editor li { margin: 0.15rem 0; padding: 0; }
trix-editor.trix-editor ul ul,
trix-editor.trix-editor ul ol,
trix-editor.trix-editor ol ul,
trix-editor.trix-editor ol ol { margin: 0.2rem 0 0.2rem 1.25rem; }

/*-- Collapse phantom empty rows inside the editor. Trix represents the active
     cursor row as an <li> with a single <br> placeholder - that one is NOT
     :empty because <br> is a child node - so we only hit truly content-less
     items left over from paste or repeated Enter presses. */
trix-editor.trix-editor li:empty,
trix-editor.trix-editor p:empty { display: none; }

/*-- Inline formatting matching the .card-feed-text rendered output so what
     the user types reads the same in the editor as on the public page. */
trix-editor.trix-editor strong,
trix-editor.trix-editor b { font-weight: 700; color: var(--ink); }
trix-editor.trix-editor em,
trix-editor.trix-editor i { font-style: italic; }
trix-editor.trix-editor u { text-decoration: underline; }
trix-editor.trix-editor s,
trix-editor.trix-editor del,
trix-editor.trix-editor strike { text-decoration: line-through; }
.form-check-standalone { margin-bottom: 0.75rem; }

/*-- Members Module: Notifications stream (lives at /account, replaces dashboard).
     Each row is a single anchor - the whole row clicks through to the target
     (post / business / event). Hover tints clay-light so the click affordance
     reads without recoloring text. */
.member-notifications { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); overflow: hidden; }
.notification-list { display: flex; flex-direction: column; }
.notification-link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--sand);
	font-size: 0.9rem;
	color: var(--ink-mid);
	text-decoration: none;
	transition: background 0.15s;
}
.notification-list .notification-link:last-child { border-bottom: 0; }
.notification-link:hover { background: rgba(158, 74, 30, 0.08); color: var(--ink); text-decoration: none; }
.notification-icon { width: 22px; text-align: center; color: var(--clay-dark); flex-shrink: 0; font-size: 1rem; }
svg.notification-icon { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.notification-link.notif-feed_share svg.notification-icon { fill: none; stroke-width: 2; }
.notification-link.notif-feed_like      .notification-icon { color: var(--error); }
.notification-link.notif-feed_comment   .notification-icon { color: var(--sky); }
.notification-link.notif-feed_share     .notification-icon { color: var(--sage); }
.notification-link.notif-review         .notification-icon { color: var(--gold); }
.notification-link.notif-rsvp           .notification-icon { color: var(--purple); }
.notification-link.notif-business_follow .notification-icon { color: var(--sage); }
.notification-text { flex: 1; min-width: 0; line-height: 1.4; }
.notification-text strong { color: var(--ink); }
.member-notifications .content-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-light); }
.notification-time { font-size: 0.78rem; color: var(--ink-light); white-space: nowrap; flex-shrink: 0; }

/*-- Hash-deep-link flash: feed card scrolled to from /#post-{id} or review
     card scrolled to from /businesses/{slug}#review-{id} pulses a subtle clay
     outline so the user's eye lands on the right item. Removed by JS after
     2 seconds. */
.card-feed.tl-hash-flash,
.directory-review.tl-hash-flash {
	box-shadow: 0 0 0 3px rgba(158, 74, 30, 0.35);
	transition: box-shadow 0.3s;
}

/*-- Members Module: Account Layout
   The /account dashboard is a Page-Manager 2-column panel - width and gap come
   from the platform's default panel rendering (cell flex-basis is driven by
   SitePagePanelColumns.Width on each column). NO custom .tl-layout-account /
   .tl-col-left / .tl-col-mid classes - those were hijacking the template's
   default behavior and broke the panel-title bar. The template owns layout. */
.tl-account-card { text-align: center; padding: 1.2rem 1rem; }
.tl-account-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 0.6rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; color: white; background: var(--sand-dark); }
.tl-avatar-clay { background: var(--clay); }
/*-- Account card identity = single click target back to /members/{urlname}; centers
     avatar (which is display:flex and ignores text-align) via auto margins, drops the
     anchor underline, and inherits color so the name reads black not blue. */
.tl-account-card-link { display: block; text-decoration: none; color: inherit; }
.tl-account-card-link:hover { text-decoration: none; color: inherit; }
.tl-account-card-link:hover .tl-account-name { color: var(--clay-dark); }
.tl-account-card-link .tl-avatar { margin: 0 auto 0.6rem; }
.tl-account-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.tl-account-handle { font-size: 0.82rem; color: var(--ink-light); }
.tl-account-nav { display: flex; flex-direction: column; }
.tl-account-nav-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; font-size: 0.88rem; color: var(--ink-mid); text-decoration: none; border-radius: var(--tl-radius); transition: background 0.15s; }
.tl-account-nav-link:hover { background: var(--sand); color: var(--ink); }
.tl-account-nav-link.active { background: var(--clay-dark); color: white; font-weight: 600; }
.tl-account-nav-link .fa { width: 18px; text-align: center; }
.tl-account-badge { background: var(--clay-dark); color: white; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: var(--tl-radius); margin-left: auto; }
.tl-account-nav-link.active .tl-account-badge { background: white; color: var(--clay); }
.tl-sidebar-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-light); padding: 0.8rem 0.8rem 0.3rem; margin-top: 0.4rem; border-top: 1px solid var(--sand); text-align: left; }

/*-- Members Module: Dashboard */
.tl-dashboard-welcome { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 1.2rem; }

.tl-dashboard-stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.tl-dashboard-stat { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 1rem; background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); text-decoration: none; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.tl-dashboard-stat:hover { border-color: var(--clay); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tl-dashboard-stat .fa { font-size: 1.3rem; color: var(--clay); margin-bottom: 0.4rem; }
.tl-dashboard-stat-count { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--clay); line-height: 1; }
.tl-dashboard-stat-label { font-size: 0.78rem; color: var(--ink-light); margin-top: 0.2rem; }

.tl-dashboard-section { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1.2rem; margin-bottom: 1rem; }
.tl-dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tl-dashboard-header h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.tl-dashboard-header h3 .fa { margin-right: 0.4rem; color: var(--clay); }
.tl-dashboard-view-all { font-size: 0.82rem; color: var(--clay); text-decoration: none; font-weight: 600; }
.tl-dashboard-view-all:hover { text-decoration: underline; }

.tl-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.tl-dashboard-card { border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); overflow: hidden; }
.tl-dashboard-card-img { width: 100%; height: 100px; background-size: cover; background-position: center; background-color: var(--sand-dark); }
.tl-dashboard-card-placeholder { display: flex; align-items: center; justify-content: center; }
.tl-dashboard-card-placeholder .fa { font-size: 1.5rem; color: var(--ink-light); }
.tl-dashboard-card-title { padding: 0.5rem 0.6rem 0.15rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-dashboard-card-meta { padding: 0 0.6rem 0.5rem; font-size: 0.75rem; color: var(--ink-light); }

.tl-dashboard-empty { font-size: 0.88rem; color: var(--ink-light); margin: 0; }
.tl-dashboard-empty a { color: var(--clay); text-decoration: none; font-weight: 600; }
.tl-dashboard-empty a:hover { text-decoration: underline; }

.tl-dashboard-activity-item { padding: 0.6rem 0; border-bottom: 1px solid var(--sand); }
.tl-dashboard-activity-item:last-child { border-bottom: none; }
.tl-dashboard-activity-text { font-size: 0.88rem; color: var(--ink); line-height: 1.4; }
.tl-dashboard-activity-date { font-size: 0.75rem; color: var(--ink-light); margin-top: 0.2rem; }

/*-- Members Module: Account Panel - consistent top padding when sidebar is present */
.PageManagerContent .panel .cell-pre + .cell .cell-content:first-child,
.PageManagerContent .panel .cell-pre .cell-content:first-child { padding-top: 3rem; }

/*-- Members Module: Account Feed */
.tl-feed-compose { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.tl-feed-compose-input { width: 100%; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 0.75rem; font-family: var(--font-body); font-size: 0.9rem; resize: vertical; outline: none; }
.tl-feed-compose-input:focus { border-color: var(--clay); }
.tl-feed-compose-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.tl-feed-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tl-feed-item { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 1rem 1.2rem; }
.tl-feed-item-date { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 0.3rem; }
.tl-feed-item-text { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }
.content-empty { padding: 2rem; text-align: center; font-size: 0.9rem; color: var(--ink-light); background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); }

/*-- Members Module: Messages Inbox */
.message-list { display: flex; flex-direction: column; }
.message-item { display: grid; grid-template-columns: 50px 38px 1fr 2fr auto; gap: 0.75rem; align-items: center; padding: 0.9rem 1rem; border-bottom: 1px solid var(--sand-dark); background: var(--white); cursor: pointer; transition: background 0.15s; }
.message-avatar { display: flex; align-items: center; justify-content: center; }
.message-item:hover { background: var(--sand); }
.message-item:last-child { border-bottom: none; }
.message-unread { font-weight: 600; background: rgba(58, 122, 191, 0.04); }
.message-unread .message-contact { color: var(--ink); }
.message-direction { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-light); font-weight: 600; }
.message-contact { font-size: 0.9rem; color: var(--ink-mid); font-weight: 500; }
.message-subject { font-size: 0.88rem; color: var(--ink-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-date { font-size: 0.78rem; color: var(--ink-light); white-space: nowrap; }
@media (max-width: 930px) {
	.message-item { grid-template-columns: 38px 1fr auto; gap: 0.3rem; }
	.message-direction { display: none; }
	.message-subject { grid-column: 1 / -1; }
	.tl-message-compose { padding: var(--tl-space-4); }
}
a.message-item { text-decoration: none; color: inherit; display: grid; }
a.message-item:hover { color: inherit; }

/*-- Members Module: Message Toolbar & Compose */
.tl-message-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--tl-space-4); }
.tl-message-toolbar .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.message-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--tl-space-4); color: var(--ink-mid); text-decoration: none; font-size: 0.9rem; }
.message-back:hover { color: var(--clay); }
.tl-message-compose { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: var(--tl-space-6, 1.5rem); }
.tl-message-compose h3 { margin: 0 0 var(--tl-space-4) 0; font-size: 1.1rem; color: var(--ink); }
.tl-message-compose .form-group { margin-bottom: var(--tl-space-4); position: relative; }
.tl-message-compose label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.tl-message-compose .textbox { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; box-sizing: border-box; }
.tl-message-compose .textbox:focus { border-color: var(--clay); outline: none; }
.tl-message-compose textarea.textbox { resize: vertical; min-height: 120px; }
.tl-message-compose .form-message { min-height: 1.2rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
.tl-message-compose .form-message.error-msg { color: var(--error); }
.tl-message-compose .form-message.msg-success { color: #5a7a5c; }
.tl-autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1px solid var(--sand-dark); border-radius: 0 0 var(--tl-radius) var(--tl-radius); max-height: 200px; overflow-y: auto; z-index: 100; display: none; }
.tl-autocomplete-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; }
.tl-autocomplete-item:hover { background: var(--sand); }

/*-- Members Module: Message Detail */
.message-back { display: inline-block; font-size: 0.85rem; color: var(--ink-light); margin-bottom: 1rem; text-decoration: none; }
.message-back:hover { color: var(--clay); }
.message-back .fa { margin-right: 0.3rem; }
.message-detail-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sand-dark); }
.message-detail-subject { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); margin: 0 0 0.4rem; }
.message-detail-meta { font-size: 0.85rem; color: var(--ink-light); }
.message-detail-meta strong { color: var(--ink); }
.message-detail-body { font-size: 0.95rem; line-height: 1.7; color: var(--ink-mid); margin-bottom: 2rem; padding: 1.25rem; background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); }
.message-reply-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sand-dark); }
.message-reply-form h4 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 0.75rem; color: var(--ink); }
.message-reply-input { width: 100%; padding: 0.75rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; resize: vertical; min-height: 100px; }
.message-reply-input:focus { border-color: var(--clay); outline: none; }
.message-reply-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.message-reply-status { font-size: 0.85rem; margin-top: 0.5rem; }

/*-- Members Module: Messages */
.member-messages { max-width: 640px; }
.member-messages .content-title { font-family: var(--tl-font-display); font-weight: 700; font-size: 1.4rem; margin-bottom: 1rem; }
.member-messages .content-empty { padding: 1.5rem; opacity: 0.6; text-align: center; font-size: 0.9rem; color: var(--ink-light); }

/*-- Members Module: Directory */
.content-title { font-family: var(--tl-font-display); font-size: var(--tl-text-h1); font-weight: 900; color: var(--ink); margin-bottom: var(--tl-space-4); line-height: 1.2; }
/*-- Stack-spacing for stacked sections (used by /search Explore mode where multiple module lists render in sequence). Re-uses existing tokens; no new design language. */
.list-wrapper + .list-wrapper { margin-top: var(--tl-space-8); }

/*-- Members Module: Responsive */
@media (max-width: 930px) {
	.member-login-signup { max-width: 100%; }
	.member-login-signup .field-inline { display: block; width: 100%; }
	.member-login-signup .field-inline + .field-inline { margin-left: 0; margin-top: 0.5rem; }
	.member-form { max-width: 100%; }
	.member-messages { max-width: 100%; }
	/* /account responsive stacking is handled by the platform's default panel
	   rendering - no custom .tl-layout-account override here. */
	.tl-account-nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
	.tl-account-nav-link { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
	.tl-account-card { display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.8rem 1rem; }
	.tl-account-card-link { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
	.tl-account-card-link .tl-avatar { margin: 0; width: 40px; height: 40px; font-size: 0.9rem; flex-shrink: 0; }
	.tl-account-avatar { margin: 0; width: 40px; height: 40px; font-size: 0.9rem; flex-shrink: 0; }
	.tl-dashboard-stats { flex-direction: column; }
	.tl-dashboard-grid { grid-template-columns: 1fr 1fr; }
}

/*-- Responsive: Tablet */
@media (max-width: 1024px) {
	/*-- .tl-layout: stacks via platform flex cells, no grid override needed */
	.list-wrapper.card-style.columns-3 ul { grid-template-columns: repeat(2, 1fr); }
	.list-wrapper.card-style.columns-4 ul { grid-template-columns: repeat(2, 1fr); }
}

/*-- Responsive: Mobile */
@media (max-width: 930px) {
	body #PageManagerWatermark { display: none; }

	/*-- Header keeps the desktop layout on mobile - same logo, same 70px height,
	     same location pill under the logo, same right-side controls (Post + account).
	     The middle nav (#tl-nav-main) gets relocated to a fixed bottom app bar
	     below. No extra padding override on #tl-nav: #tl-nav-inner already carries
	     the horizontal 1.5rem padding; doubling it produced the cramped look. */

	/*-- Old hamburger + slide-out drawer retired - the fixed bottom bar replaces
	     them. The markup stays in template.master so we don't touch the C# / .master;
	     CSS just hides it. */
	#tl-nav-toggle { display: none; }
	#tl-mobile-nav { display: none; }

	/*-- Bottom app bar: the same site_navigation "Main" output rendered as a
	     fixed bar pinned to the bottom of the viewport. Admins control the items
	     from Site Navigation > Main Menu - no hard-coded links here. */
	#tl-nav-main {
		position: fixed; left: 0; right: 0; bottom: 0;
		background: var(--ink); z-index: 90;
		padding: 0.55rem 0.5rem;
		padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255,255,255,0.08);
		box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
		flex: none;
	}
	#tl-nav-main .tl-nav-links { width: 100%; }
	#tl-nav-main .tl-nav-links .fixed-module,
	#tl-nav-main .tl-nav-links > div { width: 100%; }
	#tl-nav-main .tl-nav-links .nav-ul.t0 {
		gap: 0; justify-content: space-around; width: 100%;
	}
	/*-- Hide the Home item - the TexomaLand logo in the header already routes
	     to /. Selector targets the link's title attribute so it stays accurate
	     even if Home is reordered in admin. */
	#tl-nav-main .tl-nav-links .nav-li.t0:has(> a[title="Home"]) { display: none; }

	/*-- Reserve room at the page bottom so the fixed bar never covers the last
	     row of the footer (or any tail content on short pages). */
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

	/*-- Footer collapses to a column on mobile. Reset flex-basis to auto on the
	     children - the desktop `flex: 1 1 360px` / `flex: 1 1 480px` becomes a
	     forced HEIGHT in column direction, which is where the giant gaps came from. */
	#tl-footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
	.tl-footer-brand { flex: 0 1 auto; max-width: 100%; min-width: 0; }
	.tl-footer-columns { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: 2rem; }
	.tl-footer-col { text-align: center; }
	#tl-bottom-inner { justify-content: center; text-align: center; }
	.list-wrapper.card-style.columns-2 ul, .list-wrapper.card-style.columns-3 ul, .list-wrapper.card-style.columns-4 ul { grid-template-columns: 1fr; }
}

/*-- Follow Button States */
/*-- Following/Unfollow state - red by default (the default action is "Unfollow",
     which is destructive vs the orange Follow CTA), darker red on hover. */
.tl-btn-primary.following, .btn.following { background: var(--error); border-color: var(--error); color: #fff; }
.tl-btn-primary.following:hover, .btn.following:hover { background: color-mix(in srgb, var(--error), black 18%); border-color: color-mix(in srgb, var(--error), black 18%); color: #fff; }

/*-- Modal (shared - used by feed comments, messages, login prompt) */
/*-- Modal contract (every modal opens the same way):
     1. Overlay covers the entire viewport with a dark scrim.
     2. Background scroll is locked while a modal is open via body.tl-modal-open.
     3. The modal box never exceeds the viewport - it caps at calc(100vh - 4rem)
        and scrolls INSIDE the body, not by pushing the page.
     4. When the overlay isn't open it's removed from interaction
        (visibility:hidden + pointer-events:none) so clicks pass through. Lingering
        invisible overlays were the "everything stops clicking" bug.
     5. Click on the dark backdrop closes the modal - wired in JS, not CSS. */
html.tl-modal-open, body.tl-modal-open { overflow: hidden; }
.tl-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; opacity: 0; transition: opacity 0.2s; }
.tl-modal-overlay.open { opacity: 1; }
.tl-modal-overlay:not(.open) { visibility: hidden; pointer-events: none; }
.tl-modal-box { background: var(--white); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-modal); max-width: 90vw; max-height: calc(100vh - 4rem); display: flex; flex-direction: column; overflow: hidden; margin: auto; }
.tl-modal-box:not(.tl-comment-modal) { width: 360px; }
.tl-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sand-dark); font-weight: 700; font-size: 1.05rem; flex-shrink: 0; }
.tl-modal-close { font-size: 1.5rem; cursor: pointer; color: var(--ink-light); line-height: 1; text-decoration: none; }
.tl-modal-close:hover { color: var(--ink); }
.tl-modal-body { padding: 1.2rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.tl-modal { background: var(--white); border-radius: var(--tl-radius); width: 90%; max-width: 480px; max-height: calc(100vh - 4rem); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.2); margin: auto; }
.tl-modal .tl-modal-header h3 { margin: 0; font-size: 1.1rem; }
.tl-modal .tl-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink-light); padding: 0; line-height: 1; }
.tl-modal-footer { padding: 0.8rem 1.5rem; border-top: 1px solid var(--sand-dark); display: flex; gap: 0.6rem; justify-content: flex-end; flex-shrink: 0; }

/*-- Connections modal (followers/following list) */
.tl-connections-modal .tl-modal-body { padding: 0; }
.tl-connections-search { padding: 0.85rem 1rem; border-bottom: 1px solid var(--sand-dark); position: sticky; top: 0; background: var(--white); z-index: 1; }
.tl-connections-search input { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.9rem; background: var(--white); box-sizing: border-box; }
.tl-connections-search input:focus { outline: none; border-color: var(--clay); }
.tl-connections-list { list-style: none; padding: 0; margin: 0; }
.tl-connections-list li { border-bottom: 1px solid var(--sand); }
.tl-connections-list li:last-child { border-bottom: 0; }
.tl-connections-list a.tl-connections-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; text-decoration: none; color: inherit; transition: background 0.12s; }
.tl-connections-list a.tl-connections-row:hover,
.tl-connections-list a.tl-connections-row:focus-visible { background: var(--sand); }
.tl-connections-list .tl-connections-meta { display: flex; flex-direction: column; min-width: 0; }
.tl-connections-list .tl-connections-name { font-weight: 700; color: var(--ink); font-size: 0.92rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-connections-list .tl-connections-handle { font-size: 0.78rem; color: var(--ink-light); line-height: 1.2; }
.tl-connections-status { padding: 1.5rem 1rem; text-align: center; color: var(--ink-light); font-size: 0.9rem; }

.tl-form-group { margin-bottom: 1rem; }
.tl-form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--ink-mid); }
.tl-form-input { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--font-display); font-size: 0.9rem; background: var(--white); box-sizing: border-box; }
.tl-form-input:focus { outline: none; border-color: var(--clay); }
.tl-form-status { font-size: 0.85rem; margin-top: 0.5rem; }
.tl-form-status.error { color: var(--error); }
.tl-form-status.success { color: var(--sage); }

/*-- Inline form error/success banners */
.tl-form-error { display: none; background: var(--error); color: #fff; padding: 0.75rem 1rem; border-radius: var(--tl-radius); font-size: 0.9rem; margin-bottom: 0.75rem; }
.tl-form-success { display: none; background: var(--sage); color: #fff; padding: 0.75rem 1rem; border-radius: var(--tl-radius); font-size: 0.9rem; margin-bottom: 0.75rem; }

/*-- Cover Image Presets */
.cover-preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.cover-preset { border-radius: var(--tl-radius); overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s; position: relative; }
.cover-preset:hover { border-color: var(--clay-light); }
.cover-preset.selected { border-color: var(--clay); }
.cover-preset img { width: 100%; height: 80px; object-fit: cover; display: block; }
.cover-preset span { display: block; font-size: 0.72rem; padding: 0.3rem 0.5rem; background: var(--sand); color: var(--ink-mid); }

/*-- Search Page */
.search-results-card { background: var(--white); border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); overflow: hidden; }
.search-result-count { font-size: 0.85rem; color: var(--ink-light); padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--sand); }

/*-- Search Results */
.search-results { padding: 0; }
.search-result-item { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--sand); }
.search-result-item:last-child { border-bottom: none; }
.search-result-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius-pill); color: white; flex-shrink: 0; align-self: flex-start; margin-top: 0.2rem; }
.search-result-badge.badge-business { background: var(--sage); }
.search-result-badge.badge-event { background: var(--gold); }
.search-result-badge.badge-marketplace { background: var(--purple); }
.search-result-badge.badge-news { background: var(--sky); }
.search-result-badge.badge-member { background: var(--clay-dark); }
.search-result-body { flex: 1; min-width: 0; }
.search-result-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; }
.search-result-title a { color: var(--ink); text-decoration: none; }
.search-result-title a:hover { color: var(--clay); }
.search-result-excerpt { font-size: 0.85rem; color: var(--ink-light); line-height: 1.4; }

/*-- Module Search Bar */
.tl-module-search { max-width: 600px; margin: 0 auto 1.5rem; display: flex; gap: 0.5rem; }
.tl-module-search-input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-family: var(--font-body); font-size: 0.9rem; background: var(--white); color: var(--ink); outline: none; transition: border-color 0.2s; }
.tl-module-search-input:focus { border-color: var(--clay); }
.tl-module-search-btn { background: var(--clay); color: white; border: 1.5px solid var(--clay); border-radius: var(--tl-radius-pill); padding: 0.55rem 1.3rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.2; transition: background 0.15s, border-color 0.15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; }
.tl-module-search-btn:hover { background: var(--clay-dark); border-color: var(--clay-dark); }
.tl-module-search-btn i { margin: 0; }
@media (max-width: 375px) {
	.tl-module-search { margin-bottom: 1rem; }
	.tl-module-search-input { font-size: 0.85rem; padding: 0.5rem 0.8rem; }
	.tl-module-search-btn { padding: 0.5rem 0.9rem; }
}

/*-- Search Page Filter Pills */
.search-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.search-filter-pill { display: inline-block; padding: 0.35rem 0.9rem; border-radius: var(--tl-radius-pill); background: var(--white); border: 1px solid var(--sand-dark); color: var(--ink-mid); font-size: 0.85rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.15s; }
.search-filter-pill:hover { border-color: var(--clay); color: var(--clay); }
.search-filter-pill.active { background: var(--clay-dark); border-color: var(--clay-dark); color: white; }
.search-type-header { font-size: 1rem; font-weight: 700; color: var(--ink); padding: 0.75rem 1.2rem 0.4rem; border-bottom: 1px solid var(--sand); text-transform: capitalize; }

/*-- Extracted Inline Style Classes */

/* Field widths (from admin edit forms) */
.field-w15 { width: calc(15% - 16px); margin-left: 8px; }
.field-w20 { width: 20%; }
.field-w30 { width: 30%; }
.field-w40 { width: 40%; }
.field-w50 { width: 50%; }
.field-w55 { width: 55%; }
.field-w100 { width: 100%; }

/* Status colors */
.text-status-approved { color: #177d0c; font-weight: 600; }
.text-status-declined { color: var(--error); font-weight: 600; }
.text-status-refunded { color: #880088; font-weight: 600; }
.text-status-flagged { color: red; }
.text-error { color: red; }
.text-success { color: var(--sage); }
.text-muted-light { opacity: 0.65; }

/* Display toggles */
.d-none { display: none; }
.d-block { display: block; }

/* Background image helpers */
.bg-cover { background-size: cover; background-position: center; }
.bg-contain { background-size: contain; background-position: center; background-repeat: no-repeat; }
.bg-avatar { background-position: center; background-size: cover; }

/* Star rating */
.star-gold { color: gold; }
.star-rated { color: var(--gold); }
.star-empty { color: #ccc; }
.star-gray { color: #ccc; }

/* Flagged badge */
.text-flagged { color: red; }

/* Migration/admin muted text */
.text-muted-mid { color: #999; }
.text-muted-admin { color: #666; }
.text-import-error { color: #c00; }
.text-import-count { font-weight: 600; }

/* Admin table full width */
.table-full { width: 100%; }

/* Table column widths */
.col-w40 { width: 40px; }
.col-w60 { width: 60px; }
.col-w70 { width: 70px; }
.col-center { text-align: center; }

/* Admin thumb image */
.admin-thumb { max-width: 50px; max-height: 50px; }

/* Primary star */
.star-primary { color: var(--clay); }

/* Admin note with bottom spacing */
.note-mb { margin-bottom: 8px; }

/* Muted opacity 0.5 */
.text-muted-half { opacity: 0.5; }

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-half { margin-top: 0.5rem; }
.p-tl-2 { padding: var(--tl-space-2); }
.p-tl-4 { padding: var(--tl-space-4); }
.pt-tl-4 { padding-top: var(--tl-space-4); }
.pl-tl-4 { padding-left: var(--tl-space-4); }

/*-- Card image is the positioning anchor for .tl-ad-badge overlays emitted by
     ItemCardRenderer.InjectAdBadge from AdSlotResolver-driven browse positions.
     That is the single source of the AD pill - Render*Card never self-brands. */
.list-wrapper .item .card-image { position: relative; }

/*-- Canonical ad zone - emitted by webitems/modules/advertisements/page_content
     and reused by anything else that surfaces a sponsored slot (business detail
     sidebar, member profile sidebar, etc.). The wrapper carries the "Sponsored"
     label via .tl-rail-label; the link gets a subtle hover lift. Creatives
     render at their natural ratio (landscape, square, or portrait); only very
     tall portraits get capped at 1.5x width (2:3) via max-height in cqw. */
.ad-zone { position: relative; }
.ad-zone .tl-rail-label { /* inherits from .tl-rail-label base - left-aligned, 0.7rem 700 weight */ }
.ad-zone a { display: block; position: relative; text-decoration: none; border-radius: var(--tl-radius); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; container-type: inline-size; }
.ad-zone a:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 26, 22, 0.12); }
.ad-zone img { display: block; width: 100%; height: auto; max-height: 150cqw; object-fit: cover; object-position: center top; }
.ad-zone .sponsored-text { padding: 1rem; background: var(--sand); border-radius: var(--tl-radius); }

/*-- Legacy sponsored-* classes - kept for any third-party callers but slated
     for removal. Use .ad-zone above instead; identical visuals, hover-aware. */
.sponsored-label { font-size: 0.7rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.sponsored-link { display: block; text-decoration: none; }
.sponsored-img { width: 100%; border-radius: var(--tl-radius); }
.sponsored-text { padding: 1rem; background: var(--sand); border-radius: var(--tl-radius); }

/* Ad container */
.ad-container { padding: var(--tl-space-4); text-align: center; }

/* Detail section centered */
.detail-section-center { text-align: center; }

/* Table utility */
.table-cell-pad { padding: var(--tl-space-2) var(--tl-space-4); }

/* Review form textarea */
.review-textarea { width: 100%; margin: 0.5rem 0; }

/*-- Review cards (business detail page) */
.directory-review { position: relative; padding: 0.85rem 1rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); background: var(--white); margin-bottom: 0.5rem; }
.directory-review-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.35rem; padding-right: 2rem; }
.directory-review-name { font-weight: 700; color: var(--ink); text-decoration: none; }
a.directory-review-name:hover { color: var(--clay); text-decoration: underline; }
.directory-review-text { color: var(--ink-mid); margin: 0; line-height: 1.5; font-size: 0.92rem; }
.directory-review-text-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.directory-review-more { display: inline-block; margin-top: 0.35rem; padding: 0; background: transparent; border: 0; color: var(--clay); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.directory-review-more:hover { text-decoration: underline; }
.directory-review-form-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

/*-- Owner kebab menu - used on feed posts, feed comments, and review cards
 *  Anchored to the closest positioned ancestor (.card-feed, .directory-review,
 *  or .card-feed-comment). The trigger sits in the top-right corner; the
 *  dropdown reveals on .open. */
.tl-card-menu { position: absolute; top: 0.4rem; right: 0.5rem; z-index: 5; }
.tl-card-menu-trigger { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: transparent; color: var(--ink-mid); font-size: 1.15rem; line-height: 1; border-radius: 50%; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tl-card-menu-trigger:hover { background: var(--sand); color: var(--ink); }
.tl-card-menu-dropdown { position: absolute; top: 100%; right: 0; min-width: 132px; background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); display: none; padding: 0.25rem 0; }
.tl-card-menu.open .tl-card-menu-dropdown { display: block; }
.tl-card-menu-item { display: block; width: 100%; padding: 0.5rem 0.85rem; background: transparent; border: 0; text-align: left; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
.tl-card-menu-item:hover { background: var(--sand); }
.tl-card-menu-item.danger { color: var(--error); }
.tl-card-menu-item.danger:hover { background: var(--error); color: #fff; }

/*-- Comment row needs to host its own kebab. Make it positioned and reserve
 *  trailing room so the icon doesn't overlap long comment text. */
.card-feed-comment { position: relative; }
.tl-card-menu-comment { top: 0.15rem; right: 0.15rem; }
.tl-card-menu-comment .tl-card-menu-trigger { width: 22px; height: 22px; font-size: 0.95rem; }

/*-- Feed cards must be positioned for the absolute kebab to anchor correctly. */
.card-feed { position: relative; }

/*-- Hours of operation editor - 7 rows of (day | start | "to" | end). Compact
 *  grid that mirrors the public detail page's hours table. */
.directory-hours-editor { display: flex; flex-direction: column; gap: 0.4rem; }
.directory-hours-row { display: grid; grid-template-columns: 110px 1fr auto 1fr; align-items: center; gap: 0.6rem; }
.directory-hours-day { font-weight: 600; color: var(--ink); }
.directory-hours-pick { padding: 0.35rem 0.5rem; }
.directory-hours-sep { color: var(--ink-mid); font-size: 0.85rem; }
@media (max-width: 600px) {
  .directory-hours-row { grid-template-columns: 90px 1fr; grid-row-gap: 0.25rem; }
  .directory-hours-row .directory-hours-pick { grid-column: 2 / 3; }
  .directory-hours-row .directory-hours-sep { display: none; }
}

/*-- Premium section - clearly delineated panel below the basic editor. The
 *  --locked variant greys the editor controls behind a soft overlay and
 *  disables pointer-events; bypass via inspect-element is blocked server-side
 *  in business-submit.aspx (premium gate re-checked when handling menu_items). */
.tl-premium-section { position: relative; margin: 1.5rem 0; padding: 0; background: var(--white); border: 2px solid var(--gold); border-radius: var(--tl-radius); overflow: hidden; }
.tl-premium-section--locked { border-color: var(--sand-dark); }
.tl-premium-banner { padding: 1.25rem 1.25rem 1rem; background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%); border-bottom: 1px solid var(--sand-dark); }
.tl-premium-section--unlocked .tl-premium-banner { background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.08) 100%); }
.tl-premium-banner-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.tl-premium-banner-head:last-child { margin-bottom: 0; }
.tl-premium-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; }
.tl-premium-status { font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--tl-radius-pill); text-transform: uppercase; letter-spacing: 0.04em; }
.tl-premium-status-active { background: var(--gold); color: #fff; }
.tl-premium-status-locked { background: var(--sand-dark); color: var(--ink-mid); }
.tl-premium-pitch { margin: 0 0 0.75rem; color: var(--ink-mid); font-size: 0.92rem; line-height: 1.5; }
.tl-premium-features { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tl-premium-features li { font-size: 0.88rem; color: var(--ink); line-height: 1.45; }
.tl-premium-features li .fa { color: var(--sky); margin-right: 0.4rem; }
.tl-premium-create-note { margin: 1.4rem 0 0.5rem; padding: 0.6rem 0.75rem; background: var(--sand); border-radius: var(--tl-radius); color: var(--ink-mid); font-size: 0.85rem; font-style: italic; }
.tl-make-premium { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; margin: 0.4rem 0 0.5rem; }
.tl-make-premium:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

/*-- Premium-gated editor block (currently: menu items). When the section is
 *  locked, controls inside become un-interactive AND visually muted. The
 *  add-button's HTML disabled attribute is the primary defense; CSS layers
 *  a pointer-events block in case CSS-only forks try to enable it. */
.tl-premium-editor { padding: 1rem 1.25rem 1.25rem; }
.tl-premium-editor-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.tl-premium-section--locked .tl-premium-editor { position: relative; opacity: 0.55; }
.tl-premium-section--locked .tl-premium-editor input,
.tl-premium-section--locked .tl-premium-editor textarea,
.tl-premium-section--locked .tl-premium-editor button { pointer-events: none; background: var(--sand) !important; cursor: not-allowed !important; }
.tl-premium-section--locked .tl-premium-editor::after { content: "🔒  Premium feature - upgrade above to edit"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink); pointer-events: none; box-shadow: 0 2px 8px rgba(30, 26, 22, 0.12); }

/*-- Premium tabs - same visual language as the profile-tabs strip. Bottom
 *  border highlights the active tab; the panel below changes via .is-active. */
.tl-premium-tabs { position: relative; }
.tl-premium-tabbar { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--sand-dark); padding: 0 1rem; background: var(--white); }
.tl-premium-tab { background: transparent; border: 0; padding: 0.85rem 1.25rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--ink-mid); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 0.45rem; }
.tl-premium-tab:hover { color: var(--ink); }
.tl-premium-tab.is-active { color: var(--clay); border-bottom-color: var(--clay); }
.tl-premium-tab .fa { font-size: 0.95em; }
.tl-premium-tab-panel { display: none; padding: 1rem 1.25rem 1.25rem; background: var(--white); }
.tl-premium-tab-panel.is-active { display: block; }

/*-- Locked state on the Premium tab strip - every tab and panel becomes
 *  uninteractive AND visually muted. Server still re-checks tier on save. */
.tl-premium-section--locked .tl-premium-tabbar { opacity: 0.65; }
.tl-premium-section--locked .tl-premium-tab-panel.is-active { position: relative; opacity: 0.55; }
.tl-premium-section--locked .tl-premium-tab,
.tl-premium-section--locked .tl-premium-tab-panel input,
.tl-premium-section--locked .tl-premium-tab-panel select,
.tl-premium-section--locked .tl-premium-tab-panel textarea,
.tl-premium-section--locked .tl-premium-tab-panel button { pointer-events: none !important; cursor: not-allowed !important; }
.tl-premium-section--locked .tl-premium-tab-panel input,
.tl-premium-section--locked .tl-premium-tab-panel select,
.tl-premium-section--locked .tl-premium-tab-panel textarea { background: var(--sand) !important; }
.tl-premium-section--locked .tl-premium-tab-panel.is-active::after { content: "🔒  Premium feature - upgrade above to unlock"; position: absolute; top: 70%; left: 50%; transform: translate(-50%, 0); padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink); pointer-events: none; box-shadow: 0 2px 8px rgba(30, 26, 22, 0.12); }

/*-- Menu items editor - list of (title, price, description, remove). */
.directory-menu-editor { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.directory-menu-row { display: grid; grid-template-columns: 1.5fr 0.6fr 2fr auto; gap: 0.5rem; align-items: center; }
.directory-menu-row .form-control { padding: 0.4rem 0.55rem; }
.tl-menu-add-btn { font-size: 0.88rem; }
@media (max-width: 720px) {
  .directory-menu-row { grid-template-columns: 1fr 1fr; grid-row-gap: 0.35rem; }
  .directory-menu-row .ml-menu-desc { grid-column: 1 / 3; }
  .directory-menu-row .ml-menu-remove { grid-column: 2 / 3; justify-self: end; }
}

/*-- Gallery editor - square thumbnail grid. Each tile has a delete button
 *  in the top-right that fades in on hover. */
.directory-gallery-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; min-height: 60px; }
.directory-gallery-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--tl-radius); border: 1px solid var(--sand-dark); background: var(--sand); }
.directory-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.directory-gallery-remove { position: absolute; top: 0.3rem; right: 0.3rem; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--error); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.directory-gallery-tile:hover .directory-gallery-remove,
.directory-gallery-remove:focus { opacity: 1; }
.directory-gallery-remove:hover { background: var(--error); color: #fff; }
.directory-gallery-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Category checkbox grid (from members task) */
.checkbox-grid { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); }
.checkbox-grid label { min-width: 140px; }

/* Member category field container */
.member-cat-field { padding: var(--tl-space-3); background-color: var(--white); border: 1px solid var(--sand-dark); }

/* Member category checkbox */
.member-cat-checkbox { float: left; width: 50%; padding: 0.125rem 0; line-height: 1; font-size: 0.8rem; }

/* Member category box spacing */
.member-cat-box { margin-right: 3px; }

/* Event category pill (gold) */
.event-category-pill-gold { background-color: var(--gold); color: #fff; }

/* Feed filter dot (dynamic color kept inline) */

/*-- Touch Target Minimum (all sizes) */
.btn, .button, button,
a.card-link,
.tl-filter-bar select,
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
select, textarea,
.tl-nav-link,
.search-input input,
.tl-module-search-input,
.tl-module-search-btn,
.tl-btn-action,
.tl-btn-follow,
.tl-mobile-search-input,
.tl-mobile-search-btn,
.search-page-form input,
.search-page-form button,
.search-filter-pill {
	min-height: var(--tl-touch-min);
}

/*-- Profile / Cover Image Upload Zone - preview tile on the left, controls on
     the right. Both variants share padding, gap, and button styling so the
     profile and cover rows feel like one consistent block. The cover variant
     just swaps the round 88px preview for a 16:9 rectangle. All buttons inside
     use the canonical filled .btn (clay background, white text) - same as
     Save Profile, Add Another Link, etc. - never .btn-outline. */
.tl-upload-zone {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 24px;
	background: var(--white);
	border: 2px dashed var(--sand-dark);
	border-radius: var(--tl-radius);
	margin-bottom: var(--tl-space-4);
}
.tl-upload-zone.dragover {
	border-color: var(--clay);
	background: rgba(200, 98, 42, 0.04);
}
.tl-upload-preview {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--sand);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sand-dark);
}
.tl-upload-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tl-upload-preview .fa {
	font-size: 1.8rem;
	color: var(--ink-light);
}
.tl-upload-preview-cover {
	width: 156px;
	height: 88px;
	border-radius: var(--tl-radius);
}
/*-- Card-image variant: landscape thumbnail matching the .card-image slot used
     on news/marketplace/events listings. Height matches the avatar variant so
     every upload zone (avatar, cover, card) renders at the same row height. */
.tl-upload-preview-card {
	width: 138px;
	height: 88px;
	border-radius: var(--tl-radius);
}
/*-- Center the controls block as a vertical stack against the preview. Without
     justify-content the buttons sit at the TOP of the column (visually above
     the preview circle's center), so the form reads as misaligned. Tightening
     the gap further reduces the column height so it stays close to the
     preview's height even when status text appears. */
.tl-upload-controls {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}
/*-- Button row inside the upload zone. Always horizontal - buttons sit on
     one line and wrap to the next line if the zone is narrow. */
.tl-upload-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.tl-upload-buttons .btn {
	margin: 0;
}
/*-- Force white text + white icon color on the upload-row buttons. Without
     this rule, label.btn renders with the document's label color (often the
     site's heading-ink default) which makes the camera/image icon read as
     near-black while the sibling button.btn (Remove) shows white. The four
     selectors keep label and button + their inner <i> icons consistent. */
.tl-upload-buttons label.btn,
.tl-upload-buttons label.btn i,
.tl-upload-buttons button.btn,
.tl-upload-buttons button.btn i {
	color: #fff;
}
/*-- Restore inline-flex on label.btn. The page-level rule
     `.form-fields label { display: block }` (line ~1514) outranks .btn's
     own `display: inline-flex` via specificity, which collapses the icon
     and text out of flex layout and breaks vertical centering. The
     selector below (.tl-upload-buttons label.btn) is more specific so it
     reapplies the flex layout the .btn rule already defined. line-height
     normalization keeps the FA icon and label text on the same baseline. */
.tl-upload-buttons label.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}
.tl-upload-buttons .btn { line-height: 1; }
.tl-upload-buttons .btn i { line-height: 1; }
.tl-upload-hint {
	font-size: var(--tl-text-small);
	color: var(--ink-light);
	margin: 0;
}
.tl-upload-status {
	font-size: var(--tl-text-small);
	margin: 0;
}
.tl-upload-status:empty { display: none; }
.tl-upload-status.success { color: var(--sage); }
.tl-upload-status.error { color: #c83c3c; }
/*-- Remove buttons are hidden via the [hidden] attribute when no image is
     present so an empty image field doesn't offer a remove affordance. */
.tl-upload-buttons [hidden] { display: none !important; }
.btn-outline {
	background: transparent;
	color: var(--clay-dark);
	border: 1.5px solid var(--clay);
}
.btn-outline:hover {
	background: var(--clay);
	border-color: var(--clay);
	color: #fff;
}

@media (max-width: 930px) {
	.tl-upload-zone {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px;
	}
	.tl-upload-buttons {
		justify-content: center;
	}
	.tl-upload-preview-cover {
		width: 156px;
		height: 88px;
	}
}

/*-- Responsive: Phone (375px) */
@media (max-width: 375px) {
	/* Stack card content vertically */
	.list-wrapper .item .card-link { flex-direction: column; }
	.list-wrapper .item .card-image,
	.list-wrapper .item .card-image-bg { width: 100%; height: 180px; }
	.list-wrapper .item .card-data { padding: var(--tl-space-3); }

	/* Full-width form fields */
	.field-w50, .field-w40, .field-w30, .field-w20, .field-w55, .field-w15 {
		width: 100% !important;
		margin-left: 0 !important;
	}

	/* Reduce heading sizes */
	h1, .content-title { font-size: var(--tl-text-h2); }
	h2 { font-size: var(--tl-text-h3); }

	/* Nav adjustments */
	#tl-nav-inner { padding: 0 var(--tl-space-2); }

	/* Tighter main padding */
	.center { padding: 0 0.75rem; }

	/* Form rows stack */
	.form-row { flex-direction: column; gap: 0; }
	.member-form .member-form-row { flex-direction: column; gap: 0; }

	/* Profile card compact */
	.tl-profile-card-name { font-size: 1.2rem; }

	/* Profile identity bar - narrower hero, tighter row, action buttons span
	   the full width on a new line. */
	.tl-profile-hero { height: 180px; }
	.tl-profile-identity > .center { padding: 1rem 0.75rem; }
	.tl-profile-identity-row { gap: 0.85rem; }
	.tl-profile-identity-name { font-size: 1.3rem; }
	.tl-profile-identity-actions { width: 100%; margin-left: 0; }
	.tl-profile-identity-actions .btn { flex: 1 1 auto; justify-content: center; }

	/* Search page compact */
	.search-page-wrap { padding: 1rem 0.75rem; }
	.search-page-form { flex-direction: column; }

	/* Footer compact */
	.tl-footer-columns { flex-direction: column; gap: 1.5rem; }
	#tl-footer-inner { padding: 2rem 1rem 1.5rem; gap: 1.5rem; }

	/* Dashboard compact */
	.tl-dashboard-grid { grid-template-columns: 1fr; }
	.tl-dashboard-welcome { font-size: 1.2rem; }
}

/*-- Responsive: Phone (existing rules) */
@media (max-width: 375px) {
	#tl-nav-right { gap: 0.5rem; }
	.tl-tabs { flex-wrap: wrap; }
	.tl-tab { min-width: 50%; border-bottom: 1px solid var(--sand-dark); }
	.tl-product-grid { grid-template-columns: 1fr; }
}

/*-- Business Address Mini-Map. Server-side cached PNG (one per normalized
     address, ever). The <img> opens Google Maps in a new tab when clicked -
     a static image without a click target is a dead end. No JS, no Leaflet,
     no per-view OSM fetches. Container has no fixed height so the natural
     400x220 aspect ratio (1.82:1) survives at any sidebar width. */
.directory-map { position: relative; margin: 0; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }
.directory-map:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 26, 22, 0.12); }
.directory-map a { display: block; line-height: 0; }
.directory-map-img { width: 100%; height: auto; display: block; }
.directory-map-attribution { position: absolute; bottom: var(--tl-space-1); right: var(--tl-space-1); display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap; line-height: 1; font-size: 0.7rem; color: var(--ink); background: rgba(255, 255, 255, 0.9); padding: 0.2rem 0.45rem; border-radius: var(--tl-radius); }
.directory-map-attribution a { color: var(--ink); text-decoration: none; }
.directory-map-attribution a:hover { text-decoration: underline; }

/*-- Address row: icon + (address text + optional inline mini-map) so the
     location pin, the street, and the map all read as one unit. The block
     is flex:1 so the map fills the text column width (indented past the
     icon, never spanning the full sidebar). align-items:flex-start keeps
     the icon at the top of the multi-line block. */
.detail-section-row.detail-address-row { align-items: flex-start; }
.detail-section-row.detail-address-row > i { position: relative; top: 0.2rem; }
.detail-address-block { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; min-width: 0; }


/*-- Business Tier: Inline Ad Zone */
.directory-inline-ad { margin: var(--tl-space-8) 0; padding: var(--tl-space-6); background: var(--sand); border-radius: var(--tl-radius); text-align: center; }
.directory-inline-ad .sponsored-label { margin-bottom: var(--tl-space-2); }

/*-- Business Claim Section */
.directory-claim-section { border-top: 1px solid var(--sand-dark); padding-top: var(--tl-space-6); margin-top: var(--tl-space-8); }
.directory-claim-section p { color: var(--ink-light); margin-bottom: var(--tl-space-4); }
.directory-claim-section textarea { width: 100%; padding: var(--tl-space-3); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); font-family: var(--tl-font-body); font-size: var(--tl-text-body); margin-bottom: var(--tl-space-3); resize: vertical; }
.directory-claim-section textarea:focus { outline: none; border-color: var(--clay); }

/*-- Groups Module */
.tl-btn-group-join { display: inline-flex; align-items: center; gap: var(--tl-space-2); background: var(--clay); color: #fff; border-radius: var(--tl-radius-pill); padding: 0.55rem var(--tl-space-6); font-weight: 600; font-size: 0.9rem; line-height: 1.2; cursor: pointer; border: 1.5px solid var(--clay); font-family: var(--tl-font-body); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tl-btn-group-join:hover { background: var(--clay-dark); border-color: var(--clay-dark); }
.tl-btn-group-join.joined { background: transparent; border-color: var(--sage); color: var(--sage); }
.tl-btn-group-join.joined:hover { background: var(--error); border-color: var(--error); color: #fff; }
.tl-btn-group-join.pending { background: var(--sand); border-color: var(--sand-dark); color: var(--ink-light); cursor: default; }
.tl-btn-group-join:disabled { opacity: 0.6; cursor: wait; }

/*-- Accessibility: Link Distinguishability */
p a, li a, td a, dd a, .content-area a, .module-content a { text-decoration: underline; text-underline-offset: 2px; }
p a:hover, li a:hover, td a:hover, dd a:hover { text-decoration-color: var(--clay); }

/*-- Accessibility: Focus-Visible Indicators */
:focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: 2px;
}

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.tl-btn-action:focus-visible, .tl-btn-primary:focus-visible,
.tl-btn-secondary:focus-visible, .tl-btn-group-join:focus-visible,
.tl-filter:focus-visible, .tl-mobile-toggle:focus-visible,
.search-filter-pill:focus-visible, .card-link:focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: 2px;
}

#tl-nav a:focus-visible { outline-color: var(--clay-light); }
#tl-footer a:focus-visible { outline-color: var(--clay-light); }


/*-- Compose Modal (header "+ New Post" trigger) */
.tl-compose-modal { width: 92%; max-width: 600px; }
.tl-compose-postas { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.tl-compose-postas-label { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--ink-mid); }
.tl-compose-postas #tl-compose-postas { flex: 1; padding: 0.45rem 0.6rem; font-family: var(--font-body); font-size: 0.9rem; }
.tl-compose-postas-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.tl-compose-postas-avatar:empty { display: none; }
.tl-compose-postas-avatar .tl-avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.tl-compose-modal #tl-compose-text { font-family: var(--font-body); resize: vertical; min-height: 110px; }
.tl-compose-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; margin-top: 0.85rem; }
.tl-compose-photos:empty { display: none; }
.tl-compose-photo { position: relative; border-radius: var(--tl-radius); overflow: hidden; background: var(--sand); aspect-ratio: 1 / 1; }
.tl-compose-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*-- Override the global 44px touch-min on <button> so the close button stays a true circle. */
.tl-compose-photo-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border-radius: 50%; border: none; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tl-compose-photo-remove:hover { background: var(--error); }
.tl-compose-actions { display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; margin-top: 0.9rem; }
/*-- Add Photos uses the canonical .btn .btn-secondary outline styling. The
     .is-disabled state activates when MAX_PHOTOS is reached - kills hover and
     click but keeps layout stable. */
.tl-compose-photo-btn { cursor: pointer; }
.tl-compose-photo-btn.is-disabled { opacity: 0.2; pointer-events: none; }
.tl-compose-shortcuts { display: flex; flex-wrap: nowrap; gap: 0.45rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--sand-dark); overflow-x: auto; }
.tl-compose-shortcut { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); font-size: 0.8rem; color: var(--ink-mid); background: var(--sand); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.tl-compose-shortcut:hover { background: var(--clay); color: var(--white); border-color: var(--clay); }
.tl-compose-shortcut i { font-size: 0.95rem; }
@media (max-width: 600px) {
	.tl-compose-modal { width: 96%; }
	.tl-compose-shortcuts { flex-wrap: wrap; }
	.tl-compose-shortcut { flex: 1 1 calc(50% - 0.25rem); justify-content: center; }
}


/*-- Inline composer (top of community feed, signed-in only).
     The composer wrapper itself is NOT clickable - only the prompt textbox is.
     Avatar links to the viewer's profile. Shortcut pills are individual links.
     This matches the rest of the site: hover effects ONLY on real click targets. */
.tl-feed-composer { background: var(--white); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius); padding: 0.9rem 1rem; margin: 0 0 2rem; }
.tl-feed-composer-row { display: flex; align-items: center; gap: 0.75rem; }
.tl-feed-composer-row .tl-avatar { flex-shrink: 0; }
.tl-feed-composer-avatar-link { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.tl-feed-composer-prompt { flex: 1; min-width: 0; padding: 0.55rem 0.95rem; background: var(--sand); border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); color: var(--ink-light); font-family: var(--font-body); font-size: 0.95rem; text-align: left; cursor: text; appearance: none; -webkit-appearance: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tl-feed-composer-prompt:hover, .tl-feed-composer-prompt:focus-visible { background: var(--white); border-color: var(--clay-light); color: var(--ink-mid); }
.tl-feed-composer-prompt:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.tl-feed-composer-shortcuts { display: flex; flex-wrap: nowrap; gap: 0.45rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--sand-dark); overflow-x: auto; }
.tl-feed-composer-shortcuts .tl-compose-shortcut { flex-shrink: 0; }
@media (max-width: 600px) {
	.tl-feed-composer-shortcuts { flex-wrap: wrap; }
	.tl-feed-composer-shortcuts .tl-compose-shortcut { flex: 1 1 calc(50% - 0.25rem); justify-content: center; }
}


/*-- Sidebar rails (right column on /feed). Small eyebrow label, tight cards,
     suppressed h2 chrome - sidebars are a desktop-only enhancement so anything
     in here has to lose to the main column for attention. The eyebrow is the
     full label; the cards carry their own content. Hidden on mobile. */
.tl-rail-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); padding: 0 0.15rem; margin: 0 0 0.4rem; }

/*-- Collapsible long-text container (business About, and any other detail
     body that would otherwise dump a wall of text on the visitor). The body
     is height-capped to roughly 12 lines of .card-feed-text; a fade gradient
     covers the lower edge so the clipped text reads as "more below" rather
     than truncated. The toggle button is hidden by default and texomaland.js
     reveals it only when the body actually overflows the cap, so short
     descriptions render with no button at all. Expanded state lifts the cap
     and removes the fade. */
.tl-collapse { position: relative; }
.tl-collapse-body { position: relative; max-height: 290px; overflow: hidden; }
.tl-collapse-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white)); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.tl-collapse.is-overflowing:not(.is-expanded) .tl-collapse-body::after { opacity: 1; }
.tl-collapse.is-expanded .tl-collapse-body { max-height: none; }
.tl-collapse-toggle { display: none; margin-top: 0.6rem; padding: 0.35rem 0.9rem; background: transparent; color: var(--clay); border: 1px solid var(--clay); border-radius: var(--tl-radius); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tl-collapse-toggle:hover { background: var(--clay); color: var(--white); }
.tl-collapse.is-overflowing .tl-collapse-toggle { display: inline-block; }

/*-- Category link in the identity-strip @handle slot. Same weight/size as
     the surrounding text (no visual disruption), clay color, hover gives
     an underline + clay-dark. One rule for every detail page so the four
     modules read as one design. */
.tl-profile-identity-handle a { color: var(--clay); text-decoration: none; transition: color 0.15s; }
.tl-profile-identity-handle a:hover { color: var(--clay-dark); text-decoration: underline; }

/*-- Shared Author / Owner / Seller card used in every detail sidebar
     (businesses Owner, events Author, marketplace Seller, news Author).
     Whole row is the click target -> member profile (with hash for the
     right module tab). Avatar left, name right, single line, no second
     row, clay tint on hover. */
/*-- Author/Owner/Seller card in the right rail. Shape, sizing, and spacing
     mirror the feed-card poster strip (.card-feed-meta) exactly so a member's
     identity reads identical wherever it appears on the site:
       - avatar 38px with a subtle separator shadow so img-backed avatars
         don't dissolve into the sand sidebar background
       - 0.6rem gap, 0.9rem bold name, 0.75rem grayed handle on a 2nd line
     At rest the card has no chrome (just avatar + text in the rail). The
     pill background only appears on hover, signalling the row is clickable. */
.tl-author-card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
	padding: 0.4rem 0.5rem;
	margin: 0 -0.5rem;
	border-radius: var(--tl-radius);
	transition: background 0.15s;
}
.tl-author-card:hover { background: rgba(158, 74, 30, 0.08); }
.tl-author-card .tl-avatar { flex-shrink: 0; width: 38px; height: 38px; font-size: 0.85rem; box-shadow: 0 0 0 1px rgba(30, 26, 22, 0.08), 0 1px 2px rgba(30, 26, 22, 0.08); }
.tl-author-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.tl-author-card .tl-author-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.tl-author-card:hover .tl-author-name { color: var(--clay); }
.tl-author-card .tl-author-handle { font-size: 0.75rem; color: var(--ink-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

/*-- Back arrow at the left of an identity strip. Lives as a sibling of
     .tl-profile-identity-info so the title, handle, and meta line all
     stay flush left to each other instead of wrapping the title text
     under the arrow. Used by events / marketplace / news detail pages. */
.tl-profile-identity .tl-back-arrow {
	flex: 0 0 auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: 0.4rem;
	color: var(--ink-light);
	font-size: 1.4rem;
	text-decoration: none;
	border-radius: 50%;
	transition: color 0.15s, background 0.15s;
}
.tl-profile-identity .tl-back-arrow:hover { color: var(--clay); background: rgba(158, 74, 30, 0.08); }

/*-- Rail mode: keyed off `.is-rail` set by the featured module on *Rail variants.
     The Page Manager owns spacing between cells. This block ONLY suppresses
     chrome + tightens content INSIDE the cell - no outer margins. */
.tl-featured-section-inner.is-rail .content-title,
.tl-featured-section-inner.is-rail .content-description { display: none; }
.tl-featured-section-inner.is-rail .list-wrapper { padding: 0; }
.tl-featured-section-inner.is-rail ul { gap: 0.6rem; }
.tl-featured-section-inner.is-rail .card-title { font-size: 0.95rem; line-height: 1.25; }
.tl-featured-section-inner.is-rail .card-meta,
.tl-featured-section-inner.is-rail .card-text,
.tl-featured-section-inner.is-rail .card-distance { font-size: 0.75rem; }


/*-- Owner overlay - used on /account/* card lists. Sits above the public card
   markup so the owner views look like the public listing with controls layered
   on top, never a different "admin list" design. The whole card click target
   goes to the edit URL (caller passes editUrl as detailUrl when rendering). */
.tl-owner-card { position: relative; }
.tl-owner-overlay { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 4; display: inline-flex; align-items: center; gap: 0.4rem; }
.tl-owner-status { display: inline-flex; align-items: center; padding: 0.25rem 0.55rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--tl-radius-pill); background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.tl-owner-status-active { background: rgba(90, 122, 92, 0.92); color: #fff; }
.tl-owner-status-inactive { background: rgba(167, 156, 138, 0.92); color: #fff; }
.tl-owner-status-draft { background: rgba(212, 159, 56, 0.92); color: #fff; }
.tl-owner-status-expired { background: rgba(200, 98, 42, 0.92); color: #fff; }
/*-- Type pills for the Monetization > Campaigns list. The "Active" status pill
     was redundant (the filter dropdown already scopes the list to active or
     disabled), so the corner now carries the campaign TYPE (Sponsored Ad /
     Business / Event / Marketplace / News). Color-coded to match feed accents
     so a member's blended ads list reads at a glance: which of these is a paid
     image ad vs. which is promoting my business vs. my news article. */
.tl-owner-status-type-sponsored   { background: rgba(200, 98, 42, 0.92); color: #fff; } /* clay   - external ads */
.tl-owner-status-type-business    { background: rgba(90, 122, 92, 0.92); color: #fff; } /* sage   - businesses */
.tl-owner-status-type-event       { background: rgba(196, 154, 42, 0.92); color: #fff; } /* gold   - events */
.tl-owner-status-type-marketplace { background: rgba(142, 68, 173, 0.92); color: #fff; } /* purple - marketplace */
.tl-owner-status-type-news        { background: rgba(46, 109, 164, 0.92); color: #fff; } /* sky    - news */
.tl-owner-delete-form { display: inline-flex; margin: 0; padding: 0; }
.tl-owner-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; border-radius: 50%; cursor: pointer; transition: background 0.15s; }
.tl-owner-delete-btn:hover { background: var(--clay); }
.tl-owner-delete-btn i { font-size: 0.78rem; }
/*-- View-public eyeball overlay - only injected when a record is publicly
   visible (e.g. IsActive=1). Clay/orange so it reads as a CTA, not a status.
   Sibling of the parent .card-link <a> so the click stays on the eyeball
   without an event-bubbling guard. */
.tl-owner-view-pill { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 0; background: var(--clay); color: #fff; border-radius: var(--tl-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.18); cursor: pointer; transition: background 0.15s, transform 0.15s; text-decoration: none; }
.tl-owner-view-pill:hover { background: var(--clay-dark, #a64f1f); color: #fff; transform: translateY(-1px); }
.tl-owner-view-pill i { font-size: 0.82rem; }
/*-- Legacy owner-edit-pill kept for any consumers that still inject the older
   single-pill overlay (none active in tree as of 2026-05-04). */
.tl-owner-edit-pill { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 4; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.72rem; font-weight: 600; text-decoration: none; border-radius: var(--tl-radius-pill); transition: background 0.15s; }
.tl-owner-edit-pill:hover { background: var(--clay); color: #fff; }
.tl-owner-edit-pill i { font-size: 0.75rem; }
/*-- Form-top View Public link - placed at the top-right of an account-page
   edit form (My Businesses / My Events / My Marketplace / My News). Opens
   the public detail page in a new tab so the editor doesn't lose form state.
   Only render when the record is publicly visible (record.IsActive=1). */
.tl-form-header { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.75rem; }
.tl-form-view-public { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--clay); color: #fff; font-size: 0.82rem; font-weight: 600; text-decoration: none; border-radius: var(--tl-radius); transition: background 0.15s, transform 0.15s; }
.tl-form-view-public:hover { background: var(--clay-dark, #a64f1f); color: #fff; transform: translateY(-1px); }
.tl-form-view-public i { font-size: 0.82rem; }
/*-- "Promote" sibling button. Same shape as View Public so the two read as a
   pair, but sage-green so they're visually distinguishable at a glance - sage
   matches the businesses accent which is the most-likely promote target, and
   contrasts cleanly with the clay "View Public" CTA. */
.tl-form-promote { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--sage); color: #fff; font-size: 0.82rem; font-weight: 600; text-decoration: none; border-radius: var(--tl-radius); transition: background 0.15s, transform 0.15s; }
.tl-form-promote:hover { background: var(--sage-light, #466348); color: #fff; transform: translateY(-1px); }
.tl-form-promote i { font-size: 0.82rem; }

/*-- Wave 3 Feed Embed Cards (post-paradigm refactor) */
.tl-feed-embed { display: flex; gap: 12px; align-items: stretch; padding: 12px; margin-top: 10px; margin-bottom: 0.9rem; border: 1px solid var(--border, #e5e0d8); border-radius: 10px; background: var(--card-bg, #faf7f1); text-decoration: none; color: inherit; transition: background-color .15s ease; }
.tl-feed-embed:hover { background: #f3ede2; }
.tl-feed-embed-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.06); }
.tl-feed-embed-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(0,0,0,0.30); }
.tl-feed-embed-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.tl-feed-embed-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a7e66); margin-bottom: 2px; }
.tl-feed-embed-title { font-weight: 600; font-size: 15px; line-height: 1.25; margin-bottom: 4px; color: var(--text, #2a2418); }
.tl-feed-embed-excerpt { font-size: 13px; line-height: 1.4; color: var(--muted, #6b5f48); margin-bottom: 4px; overflow: hidden; }
.tl-feed-embed-meta { font-size: 12px; color: var(--muted, #8a7e66); }
.tl-feed-embed-price { font-weight: 700; font-size: 14px; color: var(--type-product, #6e4f9a); margin-top: auto; }
.tl-feed-embed-cta { font-size: 12px; font-weight: 600; color: var(--sky, #5a86b3); margin-top: auto; }
/*-- No per-type accent strip. The embed's kicker label + thumbnail already
     identify the type; an additional colored border just adds visual noise
     and competes with the base card chrome. */
/*-- Event embed has a date block instead of thumbnail */
.tl-feed-embed-event-date { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; background: rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tl-feed-embed-event-month { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgba(0,0,0,0.30); margin-bottom: 2px; }
.tl-feed-embed-event-day { font-size: 26px; font-weight: 700; color: rgba(0,0,0,0.30); line-height: 1; }
.tl-feed-embed-placeholder { background: #f3ede2; }

/*--===========================================================================
  MODULE: Presentation (CTA + Slideshow)
  ---------------------------------------------------------------------------
  Restored from reference template (references/www-new/common/templates/Default 2/
  styles/style.css ~lines 1681-2050). The Texomaland template originally shipped
  with only bridge rules; the layout system was missing, which caused every CTA
  layer to overlap into one slot. This block restores the full system that the
  presentation module's option.ascx.cs already emits classes for:
    type-C (CTA) layouts A/B/C/D/E with width buckets w25/w33/w40/w50/w60/w67/w75
    type-S (Slideshow) layouts A/B/C/D/E with absolute layer transitions
    spacing variants (.is-spaced), background overlays, content positions
    (.pos-top/.pos-center/.pos-right/...), content sizes (.csize-*).
  Hard-coded reds in source (#a12529 / #ea0a2a / #ffa200) were replaced with
  var(--clay). Heading/body fonts use var(--tl-font-display) (DM Sans).
  ===========================================================================*/
.PageManagerContent .panel .center-no .cell.has-prev-no .module-presentation.not-spaced { margin-left: 0; }
.PageManagerContent .panel .center-no .cell.has-next-no .module-presentation.not-spaced { margin-right: 0; }
.PageManagerContent .panel .panel-table .cell .cell-wrapper .cell-content.module-presentation.not-spaced { margin: 0; }
.PageManagerContent .panel .panel-table .cell .cell-wrapper .cell-content.module-presentation { padding: 0; }
.module-presentation.has-borders { margin-top: 10px !important; margin-bottom: 10px !important; border-top: 2px solid var(--clay); border-bottom: 2px solid var(--clay); }
.module-presentation .presentation-wrapper { position: relative; display: block; overflow: hidden; }
.module-presentation .presentation-wrapper:has(li.with-title-mask) { overflow: visible; }
.module-presentation.has-borders .presentation-wrapper { border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.module-presentation .presentation-wrapper .size-50 { min-height: 50vh; }
.module-presentation .presentation-wrapper .size-75 { min-height: 82.95vh; }
.module-presentation .presentation-wrapper .size-100,
.module-presentation .presentation-wrapper .screen-height { min-height: 99vh; }
@media only screen and (orientation: portrait) and (max-width: 960px) { .module-presentation .presentation-wrapper .size-75 { min-height: 77vh; } }
@media only screen and (orientation: landscape) and (max-height: 600px) {
	.module-presentation .presentation-wrapper .size-50 { min-height: 40vw; }
	.module-presentation .presentation-wrapper .size-75 { min-height: 65vw; }
	.module-presentation .presentation-wrapper .size-100, .module-presentation .presentation-wrapper .screen-height { min-height: 99vw; }
}
.module-presentation .presentation-wrapper .size-150 { min-height: 150px; }
.module-presentation .presentation-wrapper .size-300 { min-height: 300px; }
.module-presentation .presentation-wrapper .size-400 { min-height: 400px; }
.module-presentation .presentation-wrapper .size-500 { min-height: 500px; }
.module-presentation .presentation-wrapper .size-600 { min-height: 600px; }
.module-presentation .presentation-wrapper .size-700 { min-height: 700px; }
.module-presentation .presentation-wrapper .size-800 { min-height: 800px; }
.module-presentation .presentation-wrapper .size-900 { min-height: 900px; }
.module-presentation .presentation-wrapper > .global-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; background-repeat: no-repeat; background-position: center top; background-size: cover; transition: all 1000ms; }
.module-presentation .presentation-wrapper > .global-background .presentation-background-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: block; background-repeat: no-repeat; background-position: center top; background-size: cover; transition: all 1000ms; }
.module-presentation .presentation-wrapper > ul { position: relative; z-index: 2; display: block; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.module-presentation .presentation-wrapper > ul:has(li.with-title-mask) { overflow: visible; }
.module-presentation .presentation-wrapper > ul > li { position: relative; display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; color: var(--ink); overflow: hidden; }
.module-presentation .presentation-wrapper > ul > li.with-title-mask { overflow: visible; margin: 3em 0; color: #fff; }
.module-presentation .presentation-wrapper > ul > li .presentation-block { position: relative; display: flex; width: 100%; align-items: center; }
.module-presentation .presentation-wrapper > ul > li .w25 { width: 25%; }
.module-presentation .presentation-wrapper > ul > li .w33 { width: 33.3333%; }
.module-presentation .presentation-wrapper > ul > li .w40 { width: 40%; }
.module-presentation .presentation-wrapper > ul > li .w50 { width: 50%; }
.module-presentation .presentation-wrapper > ul > li .w60 { width: 60%; }
.module-presentation .presentation-wrapper > ul > li .w67 { width: 66.6667%; }
.module-presentation .presentation-wrapper > ul > li .w75 { width: 75%; }
.module-presentation .presentation-wrapper > ul.is-spaced { margin: 0 -.5rem; }
.module-presentation .presentation-wrapper > ul.is-spaced > li .presentation-block { margin: .5rem; }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w25 { width: calc(25% - 1rem); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w33 { width: calc(33.3333% - 1rem); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w40 { width: calc(40% - 1rem); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w50 { width: calc(50% - 1rem); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w60 { width: calc(60% - 1rem); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w67 { width: calc(66.6667% - 1rem); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .w75 { width: calc(75% - 1rem); }
.module-presentation .presentation-wrapper > ul > li .dark-background { color: #fff; }
.module-presentation .presentation-wrapper > ul > li .presentation-color { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; opacity: 0.9; display: block; background-color: #151515; background-repeat: no-repeat; background-position: center top; background-size: cover; transition: all 1s; }
.module-presentation .presentation-wrapper > ul > li.done .presentation-color { opacity: 1; transition: opacity 1s; }
.module-presentation .presentation-wrapper > ul > li .presentation-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: block; background-repeat: no-repeat; background-position: center top; background-size: cover; transition: all 1000ms; }
.module-presentation .presentation-wrapper > ul > li .presentation-background-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: block; background-repeat: no-repeat; background-position: center top; background-size: cover; transition: all 1000ms; }
.module-presentation .presentation-wrapper > ul > li .presentation-background.with-bg-mask .presentation-background-mask { background-size: contain; right: 0; left: -4%; bottom: -3%; }
.module-presentation .presentation-wrapper > ul > li .presentation-background-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; background-repeat: no-repeat; background-position: center top; background-size: cover; transition: all 1000ms; }
.module-presentation .presentation-wrapper > ul > li .presentation-background-video video { position: absolute; top: 40%; left: 40%; transform: translate(-40%,-40%); display: block; min-width: 100.01%; min-height: 100.01%; }
.module-presentation .presentation-wrapper.with-bgoverflow { margin-bottom: 1em; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow { padding-top: 5rem; overflow: visible; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow-l .presentation-block,
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow-l + li .presentation-block { padding-left: 40%; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow-r .presentation-block,
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow-r + li .presentation-block { padding-right: 40%; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow .presentation-info .presentation-info-text { width: 100%; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow + li .presentation-info .presentation-info-text { width: 100%; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow .presentation-info .presentation-info-text .presentation-title { font-weight: var(--font-weight-heavy); text-transform: uppercase; }
.module-presentation .presentation-wrapper > ul > li .presentation-background-overflow { z-index: 2; width: 36%; top: -5rem; bottom: -5rem; left: 4%; right: auto; }
.module-presentation .presentation-wrapper > ul > li.with-next-item .presentation-background-overflow { bottom: -7rem; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow-r .presentation-background-overflow { left: auto; right: 4%; }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow + li .presentation-block.no-description.with-readmore .presentation-readmore a { font-size: 225%; font-weight: var(--font-weight-bold); color: var(--clay); }
.module-presentation .presentation-wrapper > ul > li.with-bgoverflow + li .presentation-block.no-description.with-readmore .presentation-readmore a:hover { color: var(--clay-dark); }
.module-presentation .presentation-wrapper > ul > li .presentation-info { display: flex; position: relative; z-index: 3; width: 100%; max-width: 1920px; height: 100%; margin: auto; padding: 3rem 3.5rem 3.5rem 1.5rem; text-align: left; }
.module-presentation .presentation-wrapper > ul > li .size-150.with-bgcolor .presentation-info { max-width: 1360px; padding: 1.25rem 1.5rem; }
.module-presentation .presentation-wrapper > ul > li .presentation-title-mask { position: absolute; left: -10rem; top: -4.5rem; bottom: -4.5rem; right: -10rem; background-repeat: no-repeat; background-size: cover; background-position: right; }
.module-presentation .presentation-wrapper > ul > li .presentation-info-text { margin: auto; z-index: 1; position: relative; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.color-boxed .presentation-info-text { padding: 30px; box-shadow: #fff 0 0 0 2px; border: #444 2px solid; border-radius: 10px; }
.module-presentation .presentation-wrapper > ul > li .with-bgimg .presentation-info { padding-bottom: 3.1rem; font-weight: var(--font-weight-normal); text-shadow: 0 0 0.4em rgba(255,255,255,0.55); }
.module-presentation .presentation-wrapper > ul > li .with-bgimg.dark-background .presentation-info { text-shadow: 0 0 0.4em rgba(0,0,0,0.55); }
.module-presentation .presentation-wrapper > ul.is-spaced > li .no-bgimg .presentation-info { font-weight: var(--font-weight-normal); }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-top,
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-top > *:first-child { margin-top: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-bottom,
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-bottom > *:first-child { margin-bottom: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-left .presentation-info-text { margin-left: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-left-center .presentation-info-text { margin-left: 15%; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-right .presentation-info-text { margin-right: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-right-center .presentation-info-text { margin-right: 15%; }
.module-presentation .presentation-wrapper > ul > li .w67 .presentation-info.pos-right.csize-narrow .presentation-info-text { margin-right: 1em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-skinnier .presentation-info-text { max-width: 600px; flex-basis: 600px; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-skinny .presentation-info-text { max-width: 720px; flex-basis: 720px; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-thin .presentation-info-text { max-width: 840px; flex-basis: 840px; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-narrow .presentation-info-text { max-width: 960px; flex-basis: 960px; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-normal .presentation-info-text { max-width: 1350px; flex-basis: 1350px; }
.module-presentation .presentation-wrapper > ul > li .with-bgimg.is-sized .presentation-info-text.csize-skinny { max-width: 709px; }
.module-presentation .presentation-wrapper > ul > li .with-bgimg.is-sized .presentation-info-text.csize-thin { max-width: 829px; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-larger { font-size: 120%; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title { position: relative; font-size: 240%; margin-bottom: 1rem; font-weight: var(--font-weight-bold); line-height: 1.1; text-align: left; font-family: var(--tl-font-display); }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.no-description { margin-bottom: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-block:not(.is-sized) .presentation-info.pos-center .presentation-title { text-align: center; }
.module-presentation .presentation-wrapper > ul > li .with-bgimg .presentation-info .presentation-title { font-size: 218.182%; margin-bottom: 1rem; font-weight: var(--font-weight-bold); text-shadow: 0 0 0.3em rgba(255,255,255,0.35); }
.module-presentation .presentation-wrapper > ul > li .with-bgimg.dark-background .presentation-info .presentation-title { text-shadow: 0 0 0.3em rgba(0,0,0,0.35); }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-larger .presentation-title { margin-bottom: 0.15385em; font-size: 325%; font-weight: var(--font-weight-bold); font-family: var(--tl-font-display); }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-larger.csize-skinny .presentation-title { font-size: 300%; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-larger .presentation-title.no-description { margin-bottom: 0; }
.module-presentation .presentation-wrapper > ul.type-C.layout-DE.is-spaced > li .with-bgimg .presentation-info .presentation-title,
.module-presentation .presentation-wrapper > ul.type-C.layout-DE.is-spaced > li .with-bgcolor .presentation-info .presentation-title { min-height: 2.5em; line-height: 1.0; font-weight: var(--font-weight-bold); text-transform: uppercase; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title { font-size: 420%; line-height: 100%; color: #fff; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.with-description.fancy-title { margin-top: -0.5rem; margin-bottom: 2.5rem; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title3 { font-size: 300%; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title > strong { font-weight: 400; font-family: var(--tl-font-display); }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title > span { display: inline-block; font-size: 71.429%; line-height: 1.1; color: #fff; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title2:not(.fancy-title3) > span { font-size: 61.905%; }
.module-presentation .presentation-wrapper > ul.type-C.layout-DE.is-spaced > li .presentation-info .presentation-title.fancy-title { font-size: 300%; line-height: 100%; }
@media only screen and (max-width: 1440px) {
	.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title { font-size: 300%; }
	.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.fancy-title3 { font-size: 215%; }
}
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-center .presentation-title { text-align: center; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-right .presentation-title { text-align: right; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.align-left { text-align: left !important; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.align-center { text-align: center !important; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title.align-right { text-align: right !important; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description { font-size: inherit; position: relative; }
.module-presentation .presentation-wrapper > ul.is-spaced > li .no-bgimg .presentation-info .presentation-description,
.module-presentation .presentation-wrapper > ul > li .with-bgimg .presentation-info .presentation-description { line-height: 1.3; }
.module-presentation .presentation-wrapper > ul.is-spaced > li .no-bgimg .presentation-info .presentation-title + .presentation-description,
.module-presentation .presentation-wrapper > ul > li .with-bgimg .presentation-info .presentation-title + .presentation-description { padding-top: 0.364em; }
.module-presentation .presentation-wrapper > ul > li .with-bgimg .presentation-info.csize-larger .presentation-title + .presentation-description { padding-top: 0.3333em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-larger .presentation-description p { margin-top: 1.6em; margin-bottom: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.csize-larger .presentation-description p:first-child { margin-top: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description ul:not(.icon-list) { list-style-type: disc; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description > ul:not(.icon-list) { padding-left: 1em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description > * + hr { margin-top: 1em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description > hr + ul { margin-top: 1em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description > hr + ul:not(.icon-list) li { padding: 0.1em 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description tr + tr td { padding-top: 0.2rem; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description td + td { padding-left: 1.5rem; }
/*-- Inserted-button (rich-text "button" class inside slide descriptions) - opt
     into the canonical clay system instead of the legacy ink outline. */
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description .button.inserted-button { margin-top: 0.5rem; font-weight: 600; color: #fff; background: var(--clay); border: 1.5px solid var(--clay); border-radius: var(--tl-radius-pill); transition: background 0.15s, border-color 0.15s; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-description .button.inserted-button:hover { color: #fff; background: var(--clay-dark); border-color: var(--clay-dark); }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-readmore { margin-top: 1em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-left .presentation-readmore { text-align: left; margin-inline: 2.5em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-readmore.align-center { text-align: center; }
.module-presentation .presentation-wrapper > ul > li .presentation-info.pos-right .presentation-readmore { text-align: right; margin-inline: 2.5em; }
.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-readmore:first-child { margin-top: 0; }
.module-presentation .presentation-wrapper > ul > li .size-150.with-content.with-readmore[max-width~="500px"] .presentation-info { height: 100%; }
.module-presentation .presentation-wrapper > ul > li .size-150.with-content.with-readmore[max-width~="500px"] .presentation-info-text { padding-bottom: 3.5rem; }
.module-presentation .presentation-wrapper > ul > li .size-150.with-content.with-readmore[max-width~="500px"] .presentation-info-text .presentation-readmore { position: absolute; bottom: 1.25rem; left: 1.7rem; right: 1.5rem; }
/*-- Tags */
.module-presentation .presentation-wrapper > ul > li .presentation-block .tag-list { z-index: 1; display: flex; flex-wrap: wrap; max-width: 30%; position: absolute; top: 0.5em; right: 0.5em; list-style-type: none; }
.module-presentation .presentation-wrapper > ul > li .presentation-block .tag-list .tag { padding-right: 0.5em; padding-bottom: 0.25em; }
.module-presentation .presentation-wrapper > ul > li .presentation-block .tag-list .tag:last-of-type { padding-right: 0; }
.module-presentation .presentation-wrapper > ul > li .presentation-block .tag-list .tag .tag-name { padding: 0 0.5em; font-size: 15px; border-radius: 5px; color: #fff; }
/*-- CTA layout extras (layout A stacks; layout B alternates left/right; C/D/E grid) */
table.center .module-presentation .presentation-wrapper > ul.type-C { padding-bottom: 4rem; }
table.center .module-presentation:first-child .presentation-wrapper > ul.type-C { padding-top: 4rem; }
/*-- Layout-B alternates per <li>: odd layers get info pinned right (margin-left:50%),
     even layers (2nd, 4th, ...) get info pinned left (margin-right:50%). The codebehind
     emits one <li> per layer for layout-B, so alternation must key on the <li> index.
     The reference template used :nth-child on .presentation-block which is always the
     only child and therefore never alternated. */
.module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-block .presentation-info { width: 50%; margin-left: 50%; margin-right: 0; }
.module-presentation .presentation-wrapper > ul.type-C.layout-B > li:nth-child(2n) .presentation-block .presentation-info { margin-left: 0; margin-right: 50%; }
.module-presentation .presentation-wrapper > ul.type-C > li .presentation-color { opacity: 1; }
table.center-no .module-presentation.not-spaced:not(.is-spaced) .presentation-wrapper { box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); }
.module-presentation .presentation-wrapper > ul.type-C.layout-D > li .presentation-info { font-size: 95%; }
/*-- Slideshow (type-S): layers stacked absolute, .sel/.hide drive transitions */
.module-presentation .presentation-wrapper > ul.type-S > li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transition: 0s; }
.module-presentation .presentation-wrapper > ul.type-S > li.sel,
.module-presentation .presentation-wrapper > ul.type-S > li.hide { transition: opacity 1s, left 1s; }
.module-presentation .presentation-wrapper > ul.type-S > li .presentation-color { opacity: 0; transition: opacity 2000ms; }
.module-presentation .presentation-wrapper > ul.type-S > li.done .presentation-color { opacity: 1; transition-delay: 100ms; }
.module-presentation .presentation-wrapper > ul.type-S.layout-AD > li { left: 100%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-AD > li.sel { left: 0; z-index: 3; }
.module-presentation .presentation-wrapper > ul.type-S.layout-AD > li.hide { left: -100%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-AD.reverse > li { left: -100%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-AD.reverse > li.sel { left: 0; }
.module-presentation .presentation-wrapper > ul.type-S.layout-AD.reverse > li.hide { left: 100%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-ADE > li .presentation-info { opacity: 0; transition: opacity 1s; }
.module-presentation .presentation-wrapper > ul.type-S.layout-ADE > li.done .presentation-info { opacity: 1; }
.module-presentation .presentation-wrapper > ul.type-S.layout-E > li { opacity: 0; }
.module-presentation .presentation-wrapper > ul.type-S.layout-E > li.sel { opacity: 1; z-index: 3; }
.module-presentation .presentation-wrapper > ul.type-S.layout-E > li.hide { opacity: 0; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B { display: flex; flex-wrap: wrap; width: 150%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B > li { position: relative; display: inline-flex; width: 33.33%; align-items: end; transition: margin 1s; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='1'] > li:first-child { margin-left: -33.33%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='2'] > li:first-child { margin-left: -66.66%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='3'] > li:first-child { margin-left: -100%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='4'] > li:first-child { margin-left: -133.33%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='5'] > li:first-child { margin-left: -166.66%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='6'] > li:first-child { margin-left: -200%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='7'] > li:first-child { margin-left: -233.33%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='8'] > li:first-child { margin-left: -266.66%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='9'] > li:first-child { margin-left: -300%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='10'] > li:first-child { margin-left: -333.33%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-BC > li .presentation-color { opacity: 0.35; }
.module-presentation .presentation-wrapper > ul.type-S.layout-BC > li:hover .presentation-color { opacity: 1; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C { display: flex; flex-wrap: wrap; width: 133.33%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C > li { position: relative; display: inline-flex; width: 25%; align-items: end; transition: margin 1s; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='1'] > li:first-child { margin-left: -25%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='2'] > li:first-child { margin-left: -50%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='3'] > li:first-child { margin-left: -75%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='4'] > li:first-child { margin-left: -100%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='5'] > li:first-child { margin-left: -125%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='6'] > li:first-child { margin-left: -150%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='7'] > li:first-child { margin-left: -175%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='8'] > li:first-child { margin-left: -200%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='9'] > li:first-child { margin-left: -225%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='10'] > li:first-child { margin-left: -250%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-info { position: absolute; top: 0; right: 30%; bottom: 0; left: 0; }
.module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-background { right: 0; left: 70%; background-size: 200% auto; background-position: left top !important; }
.module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-color { left: 0; right: 30%; opacity: 1; }
.module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-info { right: 0; left: 30%; }
.module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-background { right: 70%; left: 0; background-position: right top !important; }
.module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-color { right: 0; left: 30%; }
/*-- Slideshow controls (pagination dots, prev/next chevrons, loading bar) */
.module-presentation .presentation-wrapper .presentation-arrows,
.module-presentation .presentation-wrapper .presentation-pagination { display: none; }
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination { position: absolute; z-index: 5; left: 50%; right: auto; bottom: 1rem; transform: translateX(-50%); display: flex; gap: 0.5rem; padding: 0; line-height: 1; text-align: center; }
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination span,
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination .circle { display: block; width: 10px; height: 10px; margin: 0; border-radius: 50%; background: rgba(255,255,255,0.55); border: 0; opacity: 1; cursor: pointer; transition: background 0.2s; }
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination span:hover,
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination .circle:hover,
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination span.sel,
.module-presentation .presentation-wrapper.nav-pagination .presentation-pagination .circle.sel { background: #fff; }
.module-presentation .presentation-wrapper.nav-arrows .presentation-arrows { display: block; }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-previous { position: absolute; z-index: 5; top: calc(50% - 1.25rem); left: 1rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); border-radius: 50%; cursor: pointer; transition: background 0.2s; }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-next { position: absolute; z-index: 5; top: calc(50% - 1.25rem); right: 1rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); border-radius: 50%; cursor: pointer; transition: background 0.2s; }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-previous:hover,
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-next:hover { background: rgba(0,0,0,0.6); }
.module-presentation .presentation-wrapper .presentation-arrows span > span { position: absolute; display: block; background: #fff; box-shadow: none; }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-previous .l1 { width: 10px; height: 2px; top: 50%; left: 14px; transform: translateY(-50%) rotate(-45deg); transform-origin: left center; }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-previous .l2 { width: 10px; height: 2px; top: 50%; left: 14px; transform: translateY(-50%); }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-next .l1 { width: 10px; height: 2px; top: 50%; right: 14px; transform: translateY(-50%) rotate(45deg); transform-origin: right center; }
.module-presentation .presentation-wrapper .presentation-arrows span.presentation-next .l2 { width: 10px; height: 2px; top: 50%; right: 14px; transform: translateY(-50%); }
.module-presentation .presentation-wrapper .presentation-loading { display: block; position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(255,255,255,0.15); }
.module-presentation .presentation-wrapper .presentation-loading .presentation-loading-bar { position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 0; height: 100%; background: var(--clay); transition-timing-function: linear; }
@keyframes presentationLoading { from { width: 0; } to { width: 100%; } }
/*-- IE10+ fallback (legacy) */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	.module-presentation .presentation-wrapper > ul.type-C.layout-C,
	.module-presentation .presentation-wrapper > ul.type-C.layout-D,
	.module-presentation .presentation-wrapper > ul.type-C.layout-E,
	.module-presentation .presentation-wrapper > ul.type-S.layout-B,
	.module-presentation .presentation-wrapper > ul.type-S.layout-C { display: block; }
}
/*-- Mobile / responsive: stack CTA grids; tighten slideshow text padding */
@media only screen and (max-width: 920px) {
	.module-presentation .presentation-wrapper > ul.type-C.layout-C,
	.module-presentation .presentation-wrapper > ul.type-C.layout-D,
	.module-presentation .presentation-wrapper > ul.type-C.layout-E { flex-wrap: wrap; }
	.module-presentation .presentation-wrapper > ul.type-C.layout-C > li,
	.module-presentation .presentation-wrapper > ul.type-C.layout-D > li,
	.module-presentation .presentation-wrapper > ul.type-C.layout-E > li { width: 100%; }
	.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-block,
	.module-presentation .presentation-wrapper > ul.type-C.layout-D > li .presentation-block,
	.module-presentation .presentation-wrapper > ul.type-C.layout-E > li .presentation-block { width: 100%; }
	.module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-block:nth-child(n) .presentation-info { width: 100%; margin-left: 0; margin-right: 0; }
	.module-presentation .presentation-wrapper > ul > li .presentation-info { padding: 2rem 1.5rem; }
	.module-presentation .presentation-wrapper > ul > li .presentation-info .presentation-title { font-size: 200%; }
	.module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-info,
	.module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-info { position: relative; right: 0; left: 0; }
	.module-presentation .presentation-wrapper > ul.type-S.layout-B,
	.module-presentation .presentation-wrapper > ul.type-S.layout-C { width: 100%; flex-wrap: wrap; }
	.module-presentation .presentation-wrapper > ul.type-S.layout-B > li,
	.module-presentation .presentation-wrapper > ul.type-S.layout-C > li { width: 100%; }
	.module-presentation .presentation-wrapper > ul.type-S.layout-B > li:first-child,
	.module-presentation .presentation-wrapper > ul.type-S.layout-C > li:first-child { margin-left: 0 !important; }

	/*-- Mobile: let the CTA button flow under the description instead of pinning
	     it absolute to the block bottom. The absolute pin is intended to align
	     buttons across a row of cards on desktop; once cards are stacked the
	     reserved padding-bottom (3.5rem) is smaller than the wrapped description
	     and the button overlaps the last line of text. */
	.module-presentation .presentation-wrapper > ul > li .size-150.with-content.with-readmore[max-width~="500px"] .presentation-info-text { padding-bottom: 0; }
	.module-presentation .presentation-wrapper > ul > li .size-150.with-content.with-readmore[max-width~="500px"] .presentation-info-text .presentation-readmore { position: static; margin-top: 1.25rem; left: auto; right: auto; bottom: auto; }
}

/*--===========================================================================
  Texomaland: layout-C (2-column 50/50) polish.
  ---------------------------------------------------------------------------
  The 2-column variant defaults to content-height blocks with left-aligned
  text and asymmetric padding inherited from the reference template - which
  reads as a cramped strip with staggered content. This block:
    - stretches both blocks in a row to equal height (no staggering)
    - gives each block a comfortable min-height so layout-C feels as spacious
      as layout-E did
    - centers content horizontally and constrains reading width
    - applies symmetric horizontal padding so columns visually align
    - adds a subtle scrim + stronger text-shadow so white text stays readable
      across any background image (sky, sunset, etc.)
  Only applies to ul.type-C.layout-C - leaves layouts A/B/D/E unchanged.
  ===========================================================================*/
/*-- Each row's blocks share the row's natural height so titles/descriptions of
     different lengths don't stagger. */
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li { align-items: stretch; }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-block { position: relative; }
/*-- Black tint scrim ABOVE the bg image (z:2 trumps the image's z:2 because
     pseudo-elements paint after siblings at the same z-index) and BELOW the
     info text (z:3). Without this, white text on bright sky/sunset images is
     unreadable. Tuned to ~30% - light enough to keep imagery visible, dark
     enough that white text reads. */
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-block.with-bgimg::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,0.30); pointer-events: none; }
/*-- Padding-only sizing (no min-height): content sits centered with breathing
     room above/below. The flex chain (.presentation-block align-items:center
     + .presentation-info-text margin:auto) keeps it vertically centered. */
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info { padding: 3.5rem 2.5rem; justify-content: center; align-items: center; }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-info-text { max-width: 36rem; margin: auto; text-align: center; }
/*-- Title sized so a typical CTA headline fits on one or two lines. */
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-title,
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .with-bgimg .presentation-info .presentation-title { font-size: 175%; line-height: 1.2; text-align: center; margin-bottom: 0.85rem; }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-description { text-align: center; line-height: 1.45; }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .with-bgimg .presentation-info,
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li.dark-background .presentation-info,
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .dark-background .presentation-info { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 0 16px rgba(0,0,0,0.5); }
/*-- Read-more rendered as a clay button to match the rest of the site's design
     language, regardless of whether the admin set ReadMoreStyle="button" on
     the layer. The legacy `presentation-readmore` selector renders as a plain
     underlined link by default; this overrides it. */
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-readmore,
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-readmore.align-center { text-align: center; margin-top: 1.5rem; margin-inline: 0; }
/*-- Same shape/font/size as the canonical .btn (see "Canonical Button System").
     Bg-image hero context keeps the box-shadow for legibility. Trailing arrow
     matches the "Browse {Module}" CTAs the slide cards sit alongside. */
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-readmore a { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: var(--tl-touch-min); padding: 0.55rem 1.3rem; background: var(--clay); color: #fff !important; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-decoration: none; text-shadow: none; border: 1.5px solid var(--clay); border-radius: var(--tl-radius-pill); box-shadow: var(--tl-shadow-card); transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-readmore a::after { content: "\f061"; font-family: FontAwesome; font-weight: normal; font-size: 0.85em; }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-readmore a:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #fff !important; transform: translateY(-1px); box-shadow: var(--tl-shadow-hover); }
.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info .presentation-readmore a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media only screen and (max-width: 720px) {
	.module-presentation .presentation-wrapper > ul.type-C.layout-C > li { flex-wrap: wrap; }
	.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-block { width: 100%; }
	.module-presentation .presentation-wrapper > ul.type-C.layout-C > li .presentation-info { padding: 2.5rem 1.5rem; }
}

/*--===========================================================================
  Texomaland: layout-A (single full-width CTA banner) polish.
  ---------------------------------------------------------------------------
  Layout-A renders a single Type-C layer edge-to-edge. Used by the per-module
  "page CTA" panels (tl-page-cta) on /businesses, /events, /marketplace, /news.
  Mirrors the layout-C polish so a single CTA reads the same as the home-page
  2-column grid: black tint scrim for legibility on bright background images,
  centered text, padding-only sizing (no min-height - content drives height),
  and the read-more rendered as a real clay button.
  ===========================================================================*/
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-block { position: relative; }
/*-- Black tint scrim ABOVE the bg image, BELOW the info text. The layer's own
     BackgroundColor mask handles base contrast; this adds a uniform 30% to keep
     white text readable on busy or bright photos. */
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-block.with-bgimg::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,0.30); pointer-events: none; }
/*-- Padding-only sizing. Vertical centering by the .presentation-block flex
     chain + .presentation-info-text margin:auto. */
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info { padding: 4rem 2.5rem; justify-content: center; align-items: center; }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-info-text { max-width: 42rem; margin: auto; text-align: center; }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-title,
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .with-bgimg .presentation-info .presentation-title { font-size: 200%; line-height: 1.2; text-align: center; margin-bottom: 0.85rem; }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-description { text-align: center; line-height: 1.45; }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .with-bgimg .presentation-info,
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li.dark-background .presentation-info,
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .dark-background .presentation-info { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 0 16px rgba(0,0,0,0.5); }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-readmore,
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-readmore.align-center { text-align: center; margin-top: 1.5rem; margin-inline: 0; }
/*-- Layout-A single-banner CTA - same shape/font/size as canonical .btn. */
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-readmore a { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: var(--tl-touch-min); padding: 0.55rem 1.3rem; background: var(--clay); color: #fff !important; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-decoration: none; text-shadow: none; border: 1.5px solid var(--clay); border-radius: var(--tl-radius-pill); box-shadow: var(--tl-shadow-card); transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-readmore a::after { content: "\f061"; font-family: FontAwesome; font-weight: normal; font-size: 0.85em; }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-readmore a:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #fff !important; transform: translateY(-1px); box-shadow: var(--tl-shadow-hover); }
.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-readmore a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media only screen and (max-width: 720px) {
	.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info { padding: 3rem 1.5rem; }
	.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .presentation-info .presentation-title,
	.module-presentation .presentation-wrapper > ul.type-C.layout-A > li .with-bgimg .presentation-info .presentation-title { font-size: 175%; }
}

/*--===========================================================================
  Feed Card (shared)
  ---------------------------------------------------------------------------
  These styles back the cards rendered by App_Code/feed/FeedCardRenderer.cs.
  ANY page that calls FeedCardRenderer.RenderCard(...) needs these rules:
    - feed module home page
    - members module Activity tab
    - any future consumer
  Do not duplicate these rules into a module's option.ascx <style> block - that
  was the bug that made profile activity cards render with giant icons.
============================================================================*/

/*-- Feed: Card Strip Color Variants */
.card-feed-strip-personal { background: var(--sky); }
.card-feed-strip-business { background: var(--sage); }
.card-feed-strip-bizpost { background: var(--clay); }
.card-feed-strip-event { background: var(--gold); }
.card-feed-strip-product { background: var(--type-product); }
.card-feed-strip-news { background: var(--sky); }

/*-- Feed: Avatar & Pill Color Variants (pill bg/text derived from type tokens via color-mix) */
.tl-avatar-business { background: var(--sage); }
.tl-pill-personal { background: color-mix(in srgb, var(--type-personal) 12%, transparent); color: color-mix(in srgb, var(--type-personal), black 30%); }
.tl-pill-business { background: color-mix(in srgb, var(--type-business) 12%, transparent); color: color-mix(in srgb, var(--type-business), black 30%); }
.tl-pill-bizpost { background: color-mix(in srgb, var(--type-bizpost) 12%, transparent); color: color-mix(in srgb, var(--type-bizpost), black 30%); }
.tl-pill-event { background: color-mix(in srgb, var(--type-event) 12%, transparent); color: color-mix(in srgb, var(--type-event), black 30%); }
.tl-pill-product { background: color-mix(in srgb, var(--type-product) 12%, transparent); color: color-mix(in srgb, var(--type-product), black 30%); }
.tl-pill-news { background: color-mix(in srgb, var(--type-personal) 12%, transparent); color: color-mix(in srgb, var(--type-personal), black 30%); }

/*-- Feed: Card Image Helpers */
.card-biz-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.card-feed-meta-sub-right { margin-left: auto; }

/*-- Feed: Social Engagement Icons */
/* Negative margins on all four sides cancel the engagement button's own
   padding so the visible spacing above/below/around the icons matches the
   icon content, not the hover halo. The hover halo still bleeds slightly
   beyond the visible row - that's intentional, same trick as profile stats. */
.card-feed-engagement { display: flex; align-items: center; gap: 2px; margin: -0.4rem -0.6rem; }
.card-feed-engagement-item { display: flex; align-items: center; gap: 5px; color: var(--ink-light); font-size: 0.9rem; cursor: pointer; padding: 0.4rem 0.6rem; border-radius: 3px; transition: background 0.15s; }
.card-feed-engagement-item:hover { background: var(--sand); }
.card-feed-engagement-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.card-feed-engagement-count { font-weight: 500; font-size: 0.85rem; }

/*-- Feed: Liked state */
.card-feed-engagement-item.likes.liked svg { fill: var(--error); stroke: var(--error); }
.card-feed-engagement-item.likes.liked { color: var(--error); }

/*-- Feed: Commented state */
.card-feed-engagement-item.comments.commented svg { fill: var(--sky); stroke: var(--sky); }
.card-feed-engagement-item.comments.commented { color: var(--sky); }

/*-- Feed: Shared state */
.card-feed-engagement-item.shares.shared svg { fill: var(--sage); stroke: var(--sage); }
.card-feed-engagement-item.shares.shared { color: var(--sage); }

/*-- Feed: Clickable embedded content */
.card-feed-embed { display: block; text-decoration: none; color: inherit; border-radius: 3px; padding: 0.5rem 0.6rem; margin: 0 -0.6rem 1rem; transition: background 0.15s; }
.card-feed-embed:hover { background: var(--sand); color: inherit; }
.card-feed-embed .card-feed-text,
.card-feed-embed .card-product-row,
.card-feed-embed .card-biz-row,
.card-feed-embed .card-event-details { margin-bottom: 0; }

/*-- Feed: Comment modal */
.tl-comment-modal { width: 680px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; }
.tl-comment-modal .tl-modal-body { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
.tl-comment-modal-form { padding: 1rem 1.2rem; border-bottom: 1px solid var(--sand-dark); flex-shrink: 0; }
.tl-comment-modal-list { padding: 0.5rem 1.2rem 1rem; flex: 1; overflow-y: auto; }
.tl-comment-modal-list:empty::after { content: 'No comments yet. Be the first!'; display: block; text-align: center; color: var(--ink-light); font-size: 0.85rem; padding: 2rem 0; }

/*-- Feed: Comment section (legacy inline - hidden) */
.card-feed-comments { padding: var(--tl-space-2) 0; border-top: 1px solid var(--sand-dark); display: none; }
.card-feed-comments.open { display: block; }
.card-feed-comment { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.card-feed-comment .tl-avatar { width: 28px; height: 28px; min-width: 28px; font-size: 0.7rem; }
.card-feed-comment-body { flex: 1; line-height: 1.4; }
.card-feed-comment-name { font-weight: 600; font-size: 0.85rem; line-height: 1; }
.card-feed-comment-text { font-size: 0.85rem; color: var(--ink-mid); margin-top: 0.3rem; line-height: 1.45; }
.card-feed-comment-time { font-size: 0.75rem; color: var(--ink-light); line-height: 1; margin-left: 0.35rem; }
.card-feed-comment-form { display: flex; gap: 8px; margin-top: 8px; }
.card-feed-comment-form input { flex: 1; border: 1px solid var(--sand-dark); border-radius: var(--tl-radius-pill); padding: 6px 14px; font-size: 0.85rem; outline: none; }
.card-feed-comment-form input:focus { border-color: var(--sky); }
.card-feed-comment-form button { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--clay); color: #fff; border: 1.5px solid var(--clay); border-radius: var(--tl-radius-pill); padding: 0.35rem 0.9rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.card-feed-comment-form button:hover { background: var(--clay-dark); border-color: var(--clay-dark); }

/*-- Feed: Image gallery - horizontal stack at fixed 180px height, no scroll, fade indicates more.
     The min-width:0 chain (cell -> card-feed -> card-feed-body -> gallery) defeats flexbox's
     default min-content sizing so N natural-width images don't stretch the parent column. */
.card-feed-gallery { position: relative; overflow: hidden; margin: 0 0 0.9rem; padding: 4px 0 8px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.card-feed-gallery::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background: linear-gradient(to right, rgba(255,255,255,0), var(--white) 80%); pointer-events: none; z-index: 1; }
.card-feed-gallery-track { display: flex; gap: var(--tl-space-2); overflow: hidden; width: 100%; max-width: 100%; min-width: 0; }
.card-feed-gallery-item { flex: 0 0 auto; display: block; text-decoration: none; cursor: pointer; border-radius: var(--tl-radius); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-feed-gallery-item:hover { transform: translateY(-2px); box-shadow: var(--tl-shadow-hover); }
.card-feed-gallery-item img { width: auto; height: 180px; max-width: none; border-radius: var(--tl-radius); display: block; }
.card-feed-gallery-count { position: absolute; top: var(--tl-space-2); right: var(--tl-space-2); background: rgba(0,0,0,0.6); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 8px; border-radius: var(--tl-radius-pill); z-index: 2; pointer-events: none; }

/*-- Feed: Single image clickable for lightbox - link wraps tight to the image, hover lifts + shadows */
.card-feed-image-link { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-bottom: 0.9rem; text-decoration: none; cursor: pointer; border-radius: var(--tl-radius); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-feed-image-link:hover { transform: translateY(-2px); box-shadow: var(--tl-shadow-hover); }
.card-feed-image-link .card-feed-image { margin-bottom: 0; }


/*-- /get-started page styles -- Reused on any future feature/landing page that mirrors the home-page rhythm (hero + Rich-Text sections + closing CTA). All accent colors pull from the existing module-color tokens so this stays in sync with the rest of the site. */

/*-- Inline links inside hero + CTA strip render on dark overlays; default link color is unreadable there. */
.tl-home-hero-inner a:not(.btn), .tl-cta-strip-inner a:not(.tl-cta-btn) { color: #f4eee8; text-decoration: underline; }
.tl-home-hero-inner a:not(.btn):hover, .tl-cta-strip-inner a:not(.tl-cta-btn):hover { color: #fff; }

/*-- Hero headline that wraps. Companion to .tl-home-hero-location, which is purpose-built for the home page's location-as-H1 pattern (nowrap + ellipsis); content pages with a real title use this one so long headlines wrap cleanly on mobile. */
.tl-hero-title { margin: 0; font-family: var(--font-display, var(--font-body)); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45); }

/*-- info_cards "icon mode": when the admin sets an InfoCard.Image starting with "fa-", the module renders a Font Awesome glyph inside .card-image instead of an <img>. The icon picks up its color from the parent .item.card-{slug} class so the same template can re-skin per module. */
.list-wrapper .item .card-image .card-icon { font-size: 2.4rem; opacity: 0.95; color: var(--ink-light); transition: transform 0.15s; }
.list-wrapper .item:hover .card-image .card-icon { transform: scale(1.06); }
.list-wrapper .item .card-image.with-image:has(.card-icon) { height: 110px; background-color: rgba(245, 237, 224, 0.7); }

/*-- /get-started: per-card accent colors driven by InfoCard.UniqueRecordID. Admins set gs-businesses / gs-events / gs-marketplace / gs-news / gs-feed / gs-members / gs-step-N in the UniqueRecordID field and the icon takes the matching module color. */
.list-wrapper .item.card-gs-businesses  .card-icon { color: var(--sage); }
.list-wrapper .item.card-gs-events      .card-icon { color: var(--gold); }
.list-wrapper .item.card-gs-marketplace .card-icon { color: var(--purple); }
.list-wrapper .item.card-gs-news        .card-icon { color: var(--sky); }
.list-wrapper .item.card-gs-feed        .card-icon { color: var(--clay); }
.list-wrapper .item.card-gs-members     .card-icon { color: var(--clay-dark); }
.list-wrapper .item[class*="card-gs-step-"] .card-icon { color: var(--clay); }

/*-- info_cards card-title + card-description: the module wraps the title text in <div class="item-title card-title fwb"> which is a div, not h3. Force the title to behave visually like an h3 inside the shared card grid and let descriptions wrap fully (the default 3-line clamp is too aggressive for an explainer). */
.list-wrapper .info_card-wrapper .item .card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); margin: 0; }
.list-wrapper .info_card-wrapper .item .card-description { font-size: 0.85rem; color: var(--ink-light); line-height: 1.5; -webkit-line-clamp: unset; display: block; }
.list-wrapper .info_card-wrapper .item .card-description p { margin: 0; }