/* Vendor marketplace directory + single vendor profile.
   Plain white -- the same clean, editorial alternation the homepage
   itself uses (ivory hero -> white section -> ivory cards), rather
   than a flat tan wash behind everything. Footer keeps its own
   cream (untouched), so the page now reads as three deliberate
   tones: ivory hero, white body, cream footer. */
.tnc-marketplace{ background:var(--tnc-white); padding:0 0 40px; }

/* Hero header */
.tnc-mp-hero{ background:var(--tnc-oxblood); color:#fff; padding:40px 24px; text-align:center; margin-bottom:-1px; }
.tnc-mp-hero-eyebrow{ color:var(--tnc-light-gold); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; margin-bottom:10px; }
.tnc-mp-hero h1{ color:#fff; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:32px; margin:0 0 8px; }
.tnc-mp-hero p{ color:#d7e3df; font-size:13.5px; max-width:520px; margin:0 auto; line-height:1.5; }

/* Body: sidebar + results, both inside the one <form> */
.tnc-mp-body{ max-width:1180px; margin:24px auto 0; padding:0 24px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start; }

/* Sidebar */
.tnc-mp-sidebar{ background:#fff; border:1px solid var(--tnc-border); padding:20px; position:sticky; top:16px; }
.tnc-mp-sidebar-head{ font-family:Georgia,serif; font-size:15px; color:var(--tnc-dark); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--tnc-border); text-transform:uppercase; letter-spacing:.5px; font-size:12px; font-weight:700; font-family:Arial,Helvetica,sans-serif; }
.tnc-mp-sidebar-section{ margin-bottom:22px; }
.tnc-mp-sidebar-section:last-child{ margin-bottom:0; }
.tnc-mp-sidebar-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--tnc-dark); margin-bottom:10px; }
.tnc-mp-sidebar-select{ width:100%; box-sizing:border-box; height:42px; border:1px solid var(--tnc-border); padding:0 10px; font-size:13px; color:var(--tnc-text); background:#fff; font-family:Arial,Helvetica,sans-serif; }
.tnc-mp-sidebar-select:focus{ outline:none; border-color:var(--tnc-gold); }

/* Checkbox lists (City / Venue Type / Events Served) */
.tnc-mp-checklist{ display:flex; flex-direction:column; gap:9px; }
.tnc-mp-checklist-scroll{ max-height:200px; overflow-y:auto; padding-right:4px; }
.tnc-mp-check{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--tnc-text); cursor:pointer; touch-action:manipulation; }
.tnc-mp-check input{ width:16px; height:16px; flex-shrink:0; accent-color:var(--tnc-oxblood); cursor:pointer; }
.tnc-mp-check:hover{ color:var(--tnc-oxblood); }

/* Budget dual-range slider */
.tnc-mp-budget{ position:relative; height:22px; margin-bottom:12px; }
.tnc-mp-budget-track{ position:absolute; left:0; right:0; top:9px; height:4px; background:var(--tnc-border); border-radius:2px; }
.tnc-mp-budget-track-fill{ position:absolute; top:0; height:4px; background:var(--tnc-gold); border-radius:2px; }
.tnc-mp-budget-range{ position:absolute; left:0; right:0; top:0; width:100%; margin:0; height:22px; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.tnc-mp-budget-range::-webkit-slider-runnable-track{ background:none; }
.tnc-mp-budget-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--tnc-oxblood); cursor:pointer; margin-top:0; box-shadow:0 1px 3px rgba(31,14,12,.3); }
.tnc-mp-budget-range::-moz-range-track{ background:none; border:0; }
.tnc-mp-budget-range::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--tnc-oxblood); cursor:pointer; box-shadow:0 1px 3px rgba(31,14,12,.3); }
.tnc-mp-budget-inputs{ display:flex; align-items:center; gap:8px; }
.tnc-mp-budget-num{ width:0; flex:1; box-sizing:border-box; height:34px; border:1px solid var(--tnc-border); padding:0 8px; font-size:12px; color:var(--tnc-text); font-family:Arial,Helvetica,sans-serif; }
.tnc-mp-budget-num:focus{ outline:none; border-color:var(--tnc-gold); }
.tnc-mp-budget-sep{ color:var(--tnc-muted); flex-shrink:0; }

/* Main column */
.tnc-mp-main{ min-width:0; }
.tnc-mp-search-row{ display:flex; gap:10px; margin-bottom:18px; background:#fff; border:1px solid var(--tnc-border); padding:14px; box-shadow:0 6px 18px rgba(31,14,12,.06); }
.tnc-mp-search-input{ flex:2 1 220px; box-sizing:border-box; height:44px; border:1px solid var(--tnc-border); padding:0 14px; font-size:14px; color:var(--tnc-text); font-family:Arial,Helvetica,sans-serif; }
.tnc-mp-search-input:focus{ outline:none; border-color:var(--tnc-gold); box-shadow:0 0 0 3px rgba(198,161,91,.10); }
.tnc-mp-sort-select{ flex:1 1 160px; box-sizing:border-box; height:44px; border:1px solid var(--tnc-border); padding:0 10px; font-size:13px; color:var(--tnc-text); background:#fff; font-family:Arial,Helvetica,sans-serif; }

/* Results count + active-filter chips */
.tnc-mp-results-bar{ margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.tnc-mp-results-count{ font-size:12.5px; color:var(--tnc-muted); }
.tnc-mp-results-count strong{ color:var(--tnc-dark); }
.tnc-mp-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.tnc-mp-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--tnc-ivory); border:1px solid var(--tnc-border); color:var(--tnc-text); font-size:11.5px; padding:6px 12px; text-decoration:none; transition:.15s ease; touch-action:manipulation; }
.tnc-mp-chip:hover{ border-color:var(--tnc-rose-dark); color:var(--tnc-rose-dark); }
.tnc-mp-chip-clear{ background:none; border:1px solid var(--tnc-oxblood); color:var(--tnc-oxblood); font-weight:700; }
.tnc-mp-chip-clear:hover{ background:var(--tnc-oxblood); color:#fff; }

/* Card grid */
.tnc-mp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.tnc-mp-card{ background:#fff; border:1px solid var(--tnc-border); overflow:hidden; text-decoration:none; color:inherit; display:block; transition:.2s ease; }
.tnc-mp-card:hover{ border-color:var(--tnc-gold); box-shadow:0 10px 24px rgba(31,14,12,.10); transform:translateY(-2px); }
.tnc-mp-card-img{ position:relative; width:100%; height:170px; background:var(--tnc-ivory) center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.tnc-mp-card-noimg{ color:var(--tnc-muted); font-size:11px; }
.tnc-mp-card-cat-badge{ position:absolute; left:10px; bottom:10px; background:rgba(31,14,12,.82); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:5px 10px; }
.tnc-mp-card-body{ padding:16px; }
.tnc-mp-card-name{ font-family:Georgia,serif; font-size:16px; color:var(--tnc-dark); margin-bottom:8px; line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.tnc-mp-card-name-text{ min-width:0; }
.tnc-mp-card-verified{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:#1f7a46; flex-shrink:0; }
.tnc-mp-card-verified-icon{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#1f7a46; color:#fff; font-size:9px; flex-shrink:0; }
.tnc-mp-card-meta{ font-size:12px; color:var(--tnc-muted); margin-bottom:12px; min-height:16px; }
.tnc-mp-card-city{ display:inline-flex; align-items:center; gap:4px; }
.tnc-mp-card-foot{ display:flex; align-items:center; padding-top:12px; border-top:1px solid var(--tnc-border); margin-bottom:12px; }
.tnc-mp-card-price{ font-size:12.5px; font-weight:700; color:var(--tnc-oxblood); }
.tnc-mp-card-price-muted{ color:var(--tnc-muted); font-weight:400; }
.tnc-mp-card-cta{ display:block; text-align:center; background:var(--tnc-rose-dark); color:#fff; font-size:12px; font-weight:700; padding:11px; border-radius:999px; transition:background .15s ease; }
.tnc-mp-card:hover .tnc-mp-card-cta{ background:var(--tnc-dark); }

/* Empty state */
.tnc-mp-empty{ padding:60px 24px; text-align:center; color:var(--tnc-muted); background:#fff; border:1px solid var(--tnc-border); display:flex; flex-direction:column; align-items:center; gap:8px; }
.tnc-mp-empty-icon{ font-size:34px; margin-bottom:4px; }
.tnc-mp-empty-title{ font-family:Georgia,serif; font-size:17px; color:var(--tnc-dark); }
.tnc-mp-empty-text{ font-size:12.5px; max-width:360px; margin-bottom:8px; }

/* Pagination */
.tnc-mp-pagination{ margin:28px 0 0; display:flex; justify-content:center; gap:8px; }
.tnc-mp-pagination a, .tnc-mp-pagination span{ display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--tnc-border); text-decoration:none; color:var(--tnc-text); font-size:12px; background:#fff; transition:.15s ease; }
.tnc-mp-pagination a:hover{ border-color:var(--tnc-gold); color:var(--tnc-gold); }
.tnc-mp-pagination .current{ background:var(--tnc-oxblood); color:#fff; border-color:var(--tnc-oxblood); }

@media(max-width:900px){
	.tnc-mp-body{ grid-template-columns:1fr; }
	.tnc-mp-sidebar{ position:static; }
}

@media(max-width:640px){
	.tnc-mp-hero{ padding:30px 18px; }
	.tnc-mp-hero h1{ font-size:24px; }
	.tnc-mp-body{ padding:0 16px; }
	.tnc-mp-search-row{ flex-direction:column; }
}

/* ===== Vendor Profile -- premium editorial treatment =====
   Brought in line with the homepage/about/FAQ/contact pages' own design
   system (serif display headings, gold "kicker" labels, gold-gradient
   buttons, thin gold accent rules, circular icon badges) instead of the
   flatter card-list look this stylesheet also uses for the dashboard and
   marketplace filter UI. The new .tnc-vp-btn* classes below are
   deliberately separate from the shared .tnc-btn (which the dashboard
   and every form on the site still use) so this only changes how vendor
   profile pages look, nothing else. */

/* Hero -- light cream by default (same airy, mostly-light feel as the
   claim page -- gold used only as thin accent lines, not a big block of
   color), with the same decorative gold ring device the homepage hero
   uses. A vendor with a cover photo gets that photo as the background
   instead, darkened with the oxblood gradient built inline in
   single-vendor.php, with light text on top -- the .has-cover modifier
   below switches every color that needs to flip for that case. Call
   Now / WhatsApp sit directly in the hero -- the two things a couple
   actually wants to do first -- rather than making them scroll to the
   sidebar. */
.tnc-vp-hero{
	position:relative; background:var(--tnc-white); background-size:cover; background-position:center;
	color:var(--tnc-oxblood); padding:22px 36px 40px; margin-bottom:22px; overflow:hidden;
	font-family:'Inter',Arial,Helvetica,sans-serif;
}
.tnc-vp-hero.has-cover{ background-color:var(--tnc-dark); }
/* One quiet ring, not a pair -- enough to echo the brand's circular
   motif (also used on the homepage hero) without it reading as a
   generic decorative wash behind the content. */
.tnc-vp-hero::before{
	content:""; position:absolute; width:360px; height:360px; right:-140px; top:-140px;
	border:1px solid rgba(198,161,91,.3); border-radius:50%; pointer-events:none;
}
.tnc-vp-hero-ring2{ display:none; }
.tnc-vp-hero-wrap{ max-width:1080px; margin:0 auto; position:relative; z-index:2; }
/* Breadcrumb lives inside the hero itself, as quiet wayfinding above
   the name -- not a separate bar competing for attention, and not
   restating the category the way the old all-caps kicker label did. */
.tnc-vp-breadcrumb{
	display:flex; align-items:center; gap:0; font-size:12.5px; color:var(--tnc-muted);
	padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid rgba(58,26,23,.08);
	overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tnc-vp-breadcrumb::-webkit-scrollbar{ display:none; }
.tnc-vp-breadcrumb a{ color:var(--tnc-muted); text-decoration:none; font-weight:500; flex:0 0 auto; transition:color .15s; }
.tnc-vp-breadcrumb a:hover{ color:var(--tnc-oxblood); }
.tnc-vp-breadcrumb-home-ic{ display:inline-flex; align-items:center; margin-right:5px; opacity:.65; position:relative; top:1px; }
.tnc-vp-breadcrumb-sep{ color:var(--tnc-gold); margin:0 9px; font-size:10px; flex:0 0 auto; }
.tnc-vp-breadcrumb-current{ color:var(--tnc-oxblood); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; min-width:0; }
.tnc-vp-hero.has-cover .tnc-vp-breadcrumb{ color:rgba(255,255,255,.6); border-bottom-color:rgba(255,255,255,.16); }
.tnc-vp-hero.has-cover .tnc-vp-breadcrumb a{ color:rgba(255,255,255,.75); }
.tnc-vp-hero.has-cover .tnc-vp-breadcrumb a:hover{ color:#fff; }
.tnc-vp-hero.has-cover .tnc-vp-breadcrumb-current{ color:#fff; }
.tnc-vp-hero-inner{ max-width:1080px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; z-index:2; }
/* The vendor name is the one editorial moment on this page -- a real
   display serif (Fraunces) instead of the system Georgia fallback
   used everywhere else, set large and close, so it carries the brand
   warmth the brand's own gold/oxblood palette is reaching for. */
.tnc-vp-hero h1{
	color:var(--tnc-oxblood); font-family:'Fraunces',Georgia,"Times New Roman",serif; font-optical-sizing:auto;
	font-weight:560; font-size:40px; line-height:1.1; letter-spacing:-.6px; margin:0 0 14px;
	display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
}
.tnc-vp-verified{ display:inline-flex; align-items:center; gap:5px; font-family:'Inter',Arial,sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.2px; color:#1f7a46; vertical-align:middle; }
.tnc-vp-verified-icon{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#1f7a46; color:#fff; font-size:10px; flex-shrink:0; }
.tnc-vp-hero.has-cover .tnc-vp-verified{ color:#6fe0a0; }
.tnc-vp-hero.has-cover .tnc-vp-verified-icon{ background:#1f7a46; }
.tnc-vp-hero-loc{ color:var(--tnc-muted); font-size:14px; display:flex; flex-wrap:wrap; align-items:center; }
.tnc-vp-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
/* Call Now/WhatsApp, moved to sit right under the Phone/Address facts
   instead of alongside Get Directions in the corner (owner's request,
   2026-10-04) -- same buttons, just needs its own top margin since it's
   no longer the hero's bottom-aligned corner slot. */
.tnc-vp-hero-actions-inline{ margin-top:16px; }
/* Smaller variant -- Call Now/WhatsApp only, now that they sit under the
   Phone/Address facts as a secondary pair rather than the hero's main
   call-to-action (which Get Directions still is, in its corner slot). */
.tnc-vp-btn-sm{ min-height:38px; padding:0 18px; font-size:11.5px; }
/* Phone/Address chips under the name -- same icon-circle + label/value
   language as the Contact/Details panels below (.tnc-vp-detail-icon
   etc.), just laid out in a row and sized down slightly for the hero. */
.tnc-vp-hero-facts{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:14px; }
.tnc-vp-hero-facts-website{ margin-top:8px; }
.tnc-vp-hero-fact{ display:flex; align-items:center; gap:10px; }
.tnc-vp-hero-fact .tnc-vp-detail-icon{ width:34px; height:34px; font-size:14px; }
a.tnc-vp-hero-fact-link{ text-decoration:none; transition:opacity .15s ease; }
a.tnc-vp-hero-fact-link:hover{ opacity:.78; }
/* Review score, right under the phone/address chips. */
.tnc-vp-hero-reviews{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tnc-vp-hero-reviews-score{ font-family:Georgia,"Times New Roman",serif; font-size:22px; color:var(--tnc-oxblood); line-height:1; }
.tnc-vp-hero-reviews-stars{ color:var(--tnc-gold); font-size:14px; }
.tnc-vp-hero-reviews-count{ font-size:13px; color:var(--tnc-muted); }
.tnc-vp-hero-reviews-link{ font-size:12px; font-weight:700; color:var(--tnc-oxblood); text-decoration:underline; margin-left:4px; }

/* .has-cover -- a real cover photo (darkened) sits behind the hero
   instead of the flat cream, so every color above that assumed a light
   background needs to flip back to light-on-dark here. */
.tnc-vp-hero.has-cover{ color:#fff; }
.tnc-vp-hero.has-cover::before{ border-color:rgba(198,161,91,.28); }
.tnc-vp-hero.has-cover h1{ color:#fff; }
.tnc-vp-hero.has-cover .tnc-vp-hero-loc{ color:rgba(255,255,255,.85); }
/* Quieter than a tracked-caps label: small, regular weight, sits
   right before the value instead of stacked above it. */
.tnc-vp-hero .tnc-vp-hero-fact .tnc-vp-detail-label{ color:var(--tnc-muted); text-transform:none; letter-spacing:0; font-size:11px; }
.tnc-vp-hero .tnc-vp-hero-fact .tnc-vp-detail-value{ color:var(--tnc-oxblood); font-weight:600; }
.tnc-vp-hero.has-cover .tnc-vp-hero-fact .tnc-vp-detail-icon{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff; }
.tnc-vp-hero.has-cover .tnc-vp-hero-fact .tnc-vp-detail-label{ color:rgba(255,255,255,.65); }
.tnc-vp-hero.has-cover .tnc-vp-hero-fact .tnc-vp-detail-value{ color:#fff; }
.tnc-vp-hero.has-cover .tnc-vp-hero-reviews-score{ color:#fff; }
.tnc-vp-hero.has-cover .tnc-vp-hero-reviews-stars{ color:var(--tnc-light-gold); }
.tnc-vp-hero.has-cover .tnc-vp-hero-reviews-count{ color:rgba(255,255,255,.75); }
.tnc-vp-hero.has-cover .tnc-vp-hero-reviews-link{ color:var(--tnc-light-gold); }
.tnc-vp-hero .tnc-vp-btn-light{ background:transparent; border-color:rgba(58,26,23,.35); color:var(--tnc-oxblood) !important; }
.tnc-vp-hero .tnc-vp-btn-light:hover{ background:rgba(58,26,23,.08); border-color:var(--tnc-oxblood); color:var(--tnc-oxblood) !important; }
.tnc-vp-hero.has-cover .tnc-vp-btn-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff !important; }
.tnc-vp-hero.has-cover .tnc-vp-btn-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff !important; }
@media(max-width:600px){
	.tnc-vp-hero{ padding:16px 20px 28px; margin-left:-16px; margin-right:-16px; width:calc(100% + 32px); }
	.tnc-vp-hero h1{ font-size:27px; }
	.tnc-vp-breadcrumb{ font-size:12px; padding-bottom:12px; margin-bottom:14px; }
	.tnc-vp-breadcrumb-sep{ margin:0 7px; }
	.tnc-vp-hero-inner{ align-items:flex-start; }
	.tnc-vp-hero-actions{ width:100%; }
	.tnc-vp-hero-actions .tnc-vp-btn{ flex:1 1 auto; }
}

/* Buttons for this page only (see note above) -- the same recipe as
   .tnc-ph-btn on the homepage: gold gradient, square corners, uppercase
   letter-spacing, a small lift on hover. */
.tnc-vp-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	min-height:48px; padding:0 26px; border:1px solid var(--tnc-gold); border-radius:999px;
	background:linear-gradient(180deg, var(--tnc-light-gold), var(--tnc-gold));
	color:var(--tnc-dark) !important; font-size:12.5px; font-weight:700; letter-spacing:.3px;
	text-decoration:none !important; white-space:nowrap; transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.tnc-vp-btn:hover{ background:var(--tnc-light-gold); transform:translateY(-2px); color:var(--tnc-dark) !important; }
.tnc-vp-btn-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff !important; }
.tnc-vp-btn-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px); color:#fff !important; }
.tnc-vp-btn-outline{ background:#fff; border-color:var(--tnc-border); color:var(--tnc-oxblood) !important; min-height:42px; padding:0 20px; font-size:11.5px; }
.tnc-vp-btn-outline:hover{ background:var(--tnc-ivory); border-color:var(--tnc-gold); transform:none; }

.tnc-vp-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:24px; align-items:start; }
@media(max-width:900px){ .tnc-vp-grid{ grid-template-columns:1fr; } }
/* A sparse listing with nothing in the main column (see single-vendor.php)
   drops to just the Contact panel -- centered and a sensible width
   instead of stretching a single card across the full 1080px grid. */
.tnc-vp-grid.tnc-vp-grid--contact-only{ grid-template-columns:1fr; max-width:420px; }

/* Trust strip -- three small gold-topped cards shown under every
   vendor page, the same panel language as Details/Contact above (see
   .tnc-vp-panel below), so a sparse, freshly-imported listing with
   only a phone and address still ends the page looking finished
   instead of just stopping after the grid. */
.tnc-vp-trust-grid{ max-width:1080px; margin:34px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .tnc-vp-trust-grid{ grid-template-columns:1fr; } }

/* Location -- now its own full-width section below the main grid (see
   single-vendor.php), same max-width as everything else on the page. */
.tnc-vp-map-section{ max-width:1080px; margin:0 auto 24px; }
/* The map is now full page width instead of sharing the 2fr grid
   column, so the same 46% aspect ratio would make it unnecessarily
   tall -- a flatter ratio keeps it a sensible height here. */
.tnc-vp-map-section .tnc-vp-map-embed{ padding-top:30%; }
@media(max-width:600px){ .tnc-vp-map-section .tnc-vp-map-embed{ padding-top:56%; } }
.tnc-vp-trust-card{
	position:relative; background:var(--tnc-ivory); border:1px solid rgba(198,161,91,.20);
	padding:24px 22px 22px; text-align:center;
	transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tnc-vp-trust-card:hover{ transform:translateY(-4px); border-color:rgba(198,161,91,.55); box-shadow:0 18px 40px rgba(58,26,23,.08); }
.tnc-vp-trust-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--tnc-gold); }
.tnc-vp-trust-icon{
	display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
	background:var(--tnc-white); border:1px solid rgba(198,161,91,.35); color:var(--tnc-oxblood); font-size:18px; margin-bottom:12px;
}
.tnc-vp-trust-card h4{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:16px; color:var(--tnc-oxblood); margin:0 0 6px; }
.tnc-vp-trust-card p{ font-size:12.5px; color:var(--tnc-muted); line-height:1.6; margin:0; }
/* Sidebar stays in view while the (often much longer) main column
   scrolls -- Contact/Enquire are what a couple actually wants reachable
   the whole time, same reasoning as the Call Now button in the hero. */
.tnc-vp-grid > div:last-child{ position:sticky; top:16px; }
@media(max-width:900px){ .tnc-vp-grid > div:last-child{ position:static; } }
/* Panels -- a thin gold top accent, the same device the homepage's "How
   It Works" cards use, so every section reads as part of the same
   designed site instead of a generic flat card list. */
.tnc-vp-panel{
	position:relative; background:var(--tnc-ivory); border:1px solid rgba(198,161,91,.20);
	padding:24px 22px 20px; margin-bottom:16px;
	transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tnc-vp-panel:hover{ transform:translateY(-3px); border-color:rgba(198,161,91,.5); box-shadow:0 18px 40px rgba(58,26,23,.08); }
.tnc-vp-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--tnc-gold); }
.tnc-vp-meta-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--tnc-border); font-size:12px; }
.tnc-vp-meta-row:last-child{ border-bottom:0; }
.tnc-lead-form label{ display:block; font-size:11px; font-weight:700; margin:10px 0 6px; }
.tnc-lead-form input, .tnc-lead-form textarea, .tnc-lead-form select{ width:100%; border:1px solid var(--tnc-border); padding:9px 10px; font-size:12px; background:#fff; font-family:inherit; }
.tnc-lead-success{ background:#E8EFE9; color:var(--tnc-green); padding:12px; font-size:12px; margin-top:10px; }
.tnc-lead-success a{ color:var(--tnc-green); font-weight:700; text-decoration:underline; }
.tnc-lead-error{ background:#FBEAEA; color:#B3462C; padding:12px; font-size:12px; margin-top:10px; }
.tnc-claim-cta{
	background:var(--tnc-ivory); border:1px solid var(--tnc-border); border-left:3px solid var(--tnc-gold);
	border-radius:4px; padding:16px 20px; font-size:12.5px; color:var(--tnc-text); line-height:1.5;
	margin-top:14px; box-shadow:0 2px 10px rgba(58,26,23,.04);
}
.tnc-vp-owner-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tnc-vp-owner-bar span{ flex:1; min-width:200px; }
.tnc-vp-owner-bar .tnc-vp-btn-outline{ flex-shrink:0; border-radius:999px; }

/* Single vendor profile -- richer sections (gallery, halls & menus,
   facilities, décor, events, FAQs, location) fed by the onboarding
   wizard's data. Each section only renders when that vendor actually
   has data for it. Section titles -- serif + a short gold rule, the
   same kicker language used for every heading elsewhere on the site,
   instead of a plain unstyled Georgia line. */
.tnc-vp-section-title{
	display:flex; align-items:center; gap:12px; font-family:Georgia,"Times New Roman",serif; font-weight:400;
	font-size:20px; color:var(--tnc-oxblood); margin:0 0 18px; letter-spacing:-.2px; flex-wrap:wrap;
}
.tnc-vp-section-title::before{ content:""; width:22px; height:2px; background:var(--tnc-gold); flex-shrink:0; }
.tnc-vp-panel + .tnc-vp-panel .tnc-vp-section-title{ margin-top:0; }

.tnc-vp-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.tnc-vp-gallery img{ width:100%; height:100px; object-fit:cover; border:1px solid var(--tnc-border); }

/* Individual product/menu/package card (e.g. "Weeding Cake", "Birthday
   Cake") inside an "Our Products"-type panel. Previously just a plain
   1px-bordered box with no connection to the rest of the page's visual
   language -- a flat list of rows that read as a bare HTML table next
   to the gold-accented, shadowed cards everywhere else on this same
   page (.tnc-vp-panel, .tnc-vp-trust-card). Brought in line with those:
   white background (distinct from the ivory .tnc-vp-panel it sits
   inside), a thin gold left accent instead of a plain border, the same
   soft shadow + hover lift every other card on the site uses. Sharp
   corners (no border-radius) -- matches the rest of the site's cards,
   not a rounded-corner look. */
.tnc-vp-hall{
	position:relative; background:#fff; border:1px solid var(--tnc-border); border-left:3px solid var(--tnc-gold);
	margin-bottom:14px; box-shadow:0 2px 10px rgba(58,26,23,.04);
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tnc-vp-hall:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(58,26,23,.09); border-left-color:var(--tnc-oxblood); }
.tnc-vp-hall:last-child{ margin-bottom:0; }
/* Per-product photo (Cakes & Sweets only -- see 'item_has_image' in
   single-vendor.php) -- sits above the name/price like a product
   thumbnail, the same role a cover photo plays everywhere else on the
   site. The border-left accent above is skipped visually here since
   the photo already fills that edge; it still applies underneath. */
.tnc-vp-hall-photo{ width:100%; height:160px; overflow:hidden; background:var(--tnc-cream); }
.tnc-vp-hall-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tnc-vp-hall-head{ background:var(--tnc-cream); padding:13px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--tnc-border); }
.tnc-vp-hall-head h4{ margin:0; font-family:Georgia,serif; font-size:16px; color:var(--tnc-oxblood); font-weight:400; }
.tnc-vp-hall-meta{ font-size:11px; color:var(--tnc-muted); }
.tnc-vp-hall-body{ padding:15px 18px; }
.tnc-vp-hall-gallery{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tnc-vp-hall-gallery img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--tnc-border); }
/* The one field that matters most at a glance (Price) gets the same
   gold, bold treatment .tnc-vp-menu-price already uses for Venue
   menus just below -- previously every field (Weight/Qty, Price, ...)
   looked identical, so the price didn't stand out the way a shopper
   scanning a price list expects it to. */
.tnc-vp-meta-row--price{ padding-top:10px; margin-top:2px; border-top:1px dashed var(--tnc-border); }
.tnc-vp-meta-row--price strong{ color:var(--tnc-gold-deep, #93732F); font-size:15px; font-weight:700; }

/* Cakes & Sweets ONLY -- a clickable product card using the exact same
   visual language as the vendor directory's own card (.tnc-mp-card and
   friends, above): photo with a dark category-badge overlay, serif
   name, a price row, a rounded pill CTA. The owner specifically asked
   for "the cake card to look like" that directory card, with a click
   opening a popup for the rest of the details -- see
   .tnc-vp-cake-popup-overlay below, and the matching markup gated on
   $gl_is_cakes in single-vendor.php. Deliberately a near-duplicate of
   .tnc-mp-card rather than reusing those classes directly: the
   directory card links to a whole vendor page, this one opens a popup
   in place, and keeping them separate means a future change to one
   can't accidentally break the other. */
.tnc-vp-cake-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.tnc-vp-cake-card{
	background:#fff; border:1px solid var(--tnc-border); overflow:hidden; cursor:pointer;
	transition:.2s ease; display:block;
}
.tnc-vp-cake-card:hover{ border-color:var(--tnc-gold); box-shadow:0 10px 24px rgba(31,14,12,.10); transform:translateY(-2px); }
.tnc-vp-cake-card:focus-visible{ outline:2px solid var(--tnc-gold); outline-offset:2px; }
.tnc-vp-cake-card-img{ position:relative; width:100%; height:170px; background:var(--tnc-ivory); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tnc-vp-cake-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tnc-vp-cake-card-noimg{ color:var(--tnc-muted); font-size:11px; }
.tnc-vp-cake-card-badge{ position:absolute; left:10px; bottom:10px; background:rgba(31,14,12,.82); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:5px 10px; }
.tnc-vp-cake-card-body{ padding:16px; }
.tnc-vp-cake-card-name{ font-family:Georgia,serif; font-size:16px; color:var(--tnc-dark); margin-bottom:8px; line-height:1.3; }
.tnc-vp-cake-card-meta{ font-size:12px; color:var(--tnc-muted); margin-bottom:12px; }
.tnc-vp-cake-card-foot{ display:flex; align-items:center; padding-top:12px; border-top:1px solid var(--tnc-border); margin-bottom:12px; }
.tnc-vp-cake-card-price{ font-size:14px; font-weight:700; color:var(--tnc-gold-deep, #93732F); }
.tnc-vp-cake-card-cta{ display:block; text-align:center; background:var(--tnc-rose-dark); color:#fff; font-size:12px; font-weight:700; padding:11px; border-radius:999px; transition:background .15s ease; }
.tnc-vp-cake-card:hover .tnc-vp-cake-card-cta{ background:var(--tnc-dark); }

/* Popup -- same overlay/card/close-button device the "listing saved"
   popup already uses on the vendor dashboard (tnc-vd-popup-overlay in
   tnc-dashboard-v22.css), reimplemented here under its own class names
   since this page doesn't load that stylesheet. [hidden] (toggled by
   the inline script in single-vendor.php) rather than a display:none
   class -- simplest possible show/hide with no extra JS state to track. */
.tnc-vp-cake-popup-overlay{
	position:fixed; inset:0; background:rgba(31,14,12,.55); z-index:1200;
	display:flex; align-items:center; justify-content:center; padding:20px;
}
.tnc-vp-cake-popup-overlay[hidden]{ display:none; }
.tnc-vp-cake-popup{
	position:relative; background:#fff; width:100%; max-width:440px;
	max-height:88vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.tnc-vp-cake-popup-close{ position:absolute; top:8px; right:10px; z-index:1; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.92); font-size:20px; line-height:1; color:var(--tnc-dark); cursor:pointer; }
.tnc-vp-cake-popup-close:hover{ background:#fff; color:var(--tnc-oxblood); }
.tnc-vp-cake-popup-img{ width:100%; height:220px; overflow:hidden; background:var(--tnc-ivory); }
.tnc-vp-cake-popup-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tnc-vp-cake-popup h3{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:21px; color:var(--tnc-oxblood); margin:20px 22px 14px; }
.tnc-vp-cake-popup .tnc-vp-meta-row{ margin:0 22px; }
.tnc-vp-cake-popup-details{ font-size:12.5px; color:var(--tnc-muted); line-height:1.6; margin:12px 22px 0; }
.tnc-vp-cake-popup > :last-child{ padding-bottom:22px; }
.tnc-vp-menu{ border-top:1px solid var(--tnc-border); padding:10px 0; }
.tnc-vp-menu:first-child{ border-top:0; padding-top:0; }
.tnc-vp-menu-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.tnc-vp-menu-head strong{ font-size:13px; color:var(--tnc-dark); }
.tnc-vp-menu-price{ font-size:12.5px; color:var(--tnc-gold); font-weight:700; white-space:nowrap; }
.tnc-vp-menu-items{ font-size:11.5px; color:var(--tnc-muted); line-height:1.6; }
.tnc-vp-menu-items b{ color:var(--tnc-text); }

.tnc-vp-tag-row{ display:flex; flex-wrap:wrap; gap:7px; }
.tnc-vp-tag{ display:inline-block; padding:7px 13px; border:1px solid rgba(198,161,91,.3); background:var(--tnc-white); color:var(--tnc-text); font-size:11px; letter-spacing:.2px; }

/* Details grid -- a compact "facts at a glance" strip above the fold,
   pulled from data collected elsewhere (venue type, facilities, parking,
   catering, staff) rather than asked for twice. */
.tnc-vp-details-panel{ margin-bottom:20px; }
.tnc-vp-details-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; }
@media(max-width:520px){ .tnc-vp-details-grid{ grid-template-columns:1fr; } }
.tnc-vp-detail-item{ display:flex; align-items:flex-start; gap:12px; }
/* A clickable Contact row (tel:/wa.me/website/map link) -- same layout
   as a plain (non-link) detail item, just with link styling reset and
   a subtle hover so it reads as tappable. */
a.tnc-vp-detail-item-link{ text-decoration:none; color:inherit; margin:-6px; padding:6px; transition:.15s ease; }
a.tnc-vp-detail-item-link:hover{ background:var(--tnc-white); }
a.tnc-vp-detail-item-link:hover .tnc-vp-detail-icon{ background:var(--tnc-gold); border-color:var(--tnc-gold); color:#fff; }
a.tnc-vp-detail-item-link .tnc-vp-detail-value{ color:var(--tnc-oxblood); }
.tnc-vp-detail-icon{ flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--tnc-cream); border:1px solid rgba(198,161,91,.25); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; font-size:16px; }
.tnc-vp-detail-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tnc-vp-detail-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-muted); }
.tnc-vp-detail-value{ font-size:13px; color:var(--tnc-dark); font-weight:600; overflow-wrap:break-word; }

/* Sidebar Contact card -- same icon-circle language as the Details grid
   above, but each row is a real tel:/wa.me/https: link where it makes
   sense (see $contact_rows in single-vendor.php) instead of plain text,
   so a couple can tap straight through. */
.tnc-vp-contact-panel{ padding-top:30px; }
.tnc-vp-price-badge{ display:flex; align-items:baseline; justify-content:space-between; background:var(--tnc-white); border:1px solid rgba(198,161,91,.25); padding:11px 14px; margin-bottom:14px; }
.tnc-vp-price-badge span{ font-size:11px; color:var(--tnc-muted); text-transform:uppercase; letter-spacing:.4px; }
.tnc-vp-price-badge strong{ font-size:15px; color:var(--tnc-oxblood); }
.tnc-vp-contact-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--tnc-border); text-decoration:none; color:inherit; }
.tnc-vp-contact-row:last-child{ border-bottom:0; padding-bottom:0; }
a.tnc-vp-contact-row{ transition:.15s ease; margin:0 -10px; padding-left:10px; padding-right:10px; }
a.tnc-vp-contact-row:hover{ background:var(--tnc-white); }
.tnc-vp-contact-icon{ flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid rgba(198,161,91,.35); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; font-size:16px; transition:.15s ease; }
a.tnc-vp-contact-row:hover .tnc-vp-contact-icon{ background:var(--tnc-gold); border-color:var(--tnc-gold); color:#fff; }
.tnc-vp-contact-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tnc-vp-contact-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--tnc-muted); }
.tnc-vp-contact-value{ font-size:13px; color:var(--tnc-dark); font-weight:600; overflow-wrap:break-word; }
a.tnc-vp-contact-row .tnc-vp-contact-value{ color:var(--tnc-oxblood); }

/* Embedded map. */
/* The embedded map itself is Google's free iframe embed, which can't
   be restyled with custom colors/markers (that needs the paid Maps
   JavaScript API). This gets it most of the way there for free: a warm
   gold-tinted filter mutes Google's default bright blue/green palette
   toward the site's oxblood/gold tones, plus a gold frame so the map
   reads as part of the page instead of a plain embedded widget. */
.tnc-vp-map-embed{
	position:relative; width:100%; padding-top:46%; overflow:hidden;
	border:1px solid rgba(198,161,91,.4); box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(198,161,91,.3);
}
.tnc-vp-map-embed iframe{
	position:absolute; inset:0; width:100%; height:100%; border:0;
	filter:sepia(.18) saturate(.75) hue-rotate(-6deg) contrast(1.03) brightness(1.01);
}
.tnc-vp-map-address{ font-size:12px; color:var(--tnc-text); margin-top:10px; }
.tnc-vp-map-link{ display:inline-block; font-size:12px; color:var(--tnc-oxblood); font-weight:700; margin-top:6px; }

/* Location panel, "Get Directions" version -- replaces the embedded
   Google Maps iframe above (owner's request, 2026-10-04: a live embed is
   one more thing that can fail to load or lag on a couple's phone, and
   most visitors just want turn-by-turn directions, not a small fixed map
   to pinch-zoom). Kept as its own rule set, separate from the (now
   unused but left in place in case it's ever wanted again) .tnc-vp-map-
   embed/iframe styling above. */
.tnc-vp-location-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.tnc-vp-panel-location .tnc-vp-map-address{
	display:flex; align-items:center; gap:10px; margin:0; font-size:13px; color:var(--tnc-dark); font-weight:600; flex:1 1 auto; min-width:200px;
}
.tnc-vp-panel-location .tnc-vp-map-address .tnc-vp-detail-icon{
	flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--tnc-cream);
	border:1px solid rgba(198,161,91,.25); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; font-size:14px;
}
.tnc-vp-directions-btn{ flex-shrink:0; }
@media(max-width:480px){ .tnc-vp-location-row{ flex-direction:column; align-items:stretch; } .tnc-vp-directions-btn{ text-align:center; } }

/* FAQ accordion -- native <details>/<summary>, no JS needed. */
.tnc-vp-faq{ border-bottom:1px solid var(--tnc-border); padding:12px 0; }
.tnc-vp-faq:last-child{ border-bottom:0; }
.tnc-vp-faq-q{
	font-size:13px; font-weight:700; color:var(--tnc-dark);
	cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tnc-vp-faq-q::-webkit-details-marker{ display:none; }
.tnc-vp-faq-q::after{
	content:"+"; flex-shrink:0; font-size:16px; line-height:1; color:var(--tnc-oxblood); font-weight:400;
	transition:transform .15s ease;
}
.tnc-vp-faq[open] .tnc-vp-faq-q::after{ content:"\2212"; }
.tnc-vp-faq-a{ font-size:12.5px; color:var(--tnc-muted); line-height:1.6; margin-top:8px; }

.tnc-vp-social-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.tnc-vp-social-badge{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--tnc-white); border:1px solid var(--tnc-border); color:var(--tnc-oxblood); transition:.15s ease; }
.tnc-vp-social-badge:hover{ background:var(--tnc-oxblood); color:#fff; border-color:var(--tnc-oxblood); transform:translateY(-2px); }
.tnc-vp-social-badge svg{ width:15px; height:15px; display:block; }
/* Same badges, reused in the hero (below the Website fact) -- a touch
   smaller to sit comfortably alongside the Phone/Address/Website row,
   and inverted to white-on-transparent when the hero has a dark cover
   photo background, matching how the other hero facts invert. */
.tnc-vp-hero-social-row{ margin-top:10px; gap:8px; }
.tnc-vp-hero-social-row .tnc-vp-social-badge{ width:32px; height:32px; }
.tnc-vp-hero-social-row .tnc-vp-social-badge svg{ width:13px; height:13px; }
.tnc-vp-hero.has-cover .tnc-vp-hero-social-row .tnc-vp-social-badge{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.tnc-vp-hero.has-cover .tnc-vp-hero-social-row .tnc-vp-social-badge:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }

/* Vendor dashboard (My Listing) */
.tnc-vd-head{ margin-bottom:20px; }
.tnc-vd-eyebrow{ color:var(--tnc-gold); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.tnc-vd-head h1{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:24px; color:var(--tnc-dark); margin:0 0 6px; }
.tnc-vd-head p{ font-size:12.5px; color:var(--tnc-muted); margin:0; }
.tnc-vd-listing-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--tnc-border); }
.tnc-vd-listing-head h2{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:18px; color:var(--tnc-dark); margin:0; }
.tnc-vd-status{ flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:5px 10px; border-radius:3px; }
.tnc-vd-status.is-live{ background:#E8EFE9; color:var(--tnc-green); }
/* Published (live, but still flagged as needing the rest of the profile
   filled in) -- was sharing the same green "is-live" look as a fully
   Verified listing, which made the two impossible to tell apart at a
   glance in the table. Its own gold tone now matches the gold "awaiting"
   language used everywhere else in this dashboard (pending categories,
   the Publish Incomplete button, etc). */
.tnc-vd-status.is-live-incomplete{ background:var(--tnc-light-gold); color:#6B5323; }
.tnc-vd-status.is-pending{ background:#EAF0F3; color:var(--tnc-blue); }
/* Incomplete (not live, missing phone/address/city) -- was rendering
   identically to Pending (same grey/gold badge, same "Pending" text)
   even under its own "Incomplete" table heading just above it. See the
   $vl_row_incomplete fix in templates/admin-dashboard.php. */
.tnc-vd-status.is-incomplete{ background:var(--tnc-cream); color:var(--tnc-rose-dark); }
.tnc-vd-status.is-blocked{ background:var(--tnc-rose); color:var(--tnc-rose-dark); }
.tnc-vd-photo-current img{ display:block; margin-bottom:8px; border:1px solid var(--tnc-border); }

/* =========================================================
   VENDOR UPGRADE FORM -- multi-select category cards
   (templates/vendor-upgrade-form.php)

   Same visual language as the homepage's own category cards
   (.tnc-ph-vendor in tnc-homepage.css -- gold top line, circular
   icon, serif title) so choosing categories here feels like the
   same product as browsing them there. Rebuilt as a checkbox-driven
   selectable card rather than a plain checkbox row: the native
   input is visually hidden but still focusable/keyboard-operable,
   and its :checked state drives the icon/check-badge/title styling
   on its later siblings via plain CSS sibling selectors (no JS
   needed), with a whole-card highlight layered on top via :has()
   as a progressive enhancement for browsers that support it.
   ========================================================= */

.tnc-vu-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:12px; margin-top:6px; }
@media (max-width:520px){ .tnc-vu-cat-grid{ grid-template-columns:repeat(2, 1fr); } }

.tnc-vu-cat-card{
	position:relative; display:flex; flex-direction:column; align-items:flex-start;
	padding:18px 14px 16px; background:var(--tnc-ivory); border:1px solid rgba(198,161,91,.18);
	border-radius:7px; cursor:pointer; -webkit-tap-highlight-color:transparent;
	touch-action:manipulation; user-select:none;
	transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tnc-vu-cat-card:hover{ transform:translateY(-3px); border-color:rgba(198,161,91,.55); box-shadow:0 12px 26px rgba(31,14,12,.08); }
.tnc-vu-cat-card:before{
	content:""; position:absolute; left:14px; top:0; width:26px; height:2px;
	background:var(--tnc-gold); opacity:.7; transition:width .2s ease;
}
.tnc-vu-cat-card:hover:before{ width:42px; }

.tnc-vu-cat-card-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.tnc-vu-cat-card-icon{
	width:38px; height:38px; display:flex; align-items:center; justify-content:center;
	margin-bottom:12px; border:1px solid rgba(198,161,91,.22); border-radius:50%;
	background:var(--tnc-white); color:var(--tnc-oxblood); font-family:Georgia,serif; font-size:16px;
	transition:all .2s ease;
}
.tnc-vu-cat-card-title{
	font-family:Georgia,"Times New Roman",serif; font-size:13.5px; line-height:1.3;
	color:var(--tnc-dark); transition:color .2s ease;
}

/* Selected-state badge, top right -- same spot the homepage card
   puts its "01/02/03..." index. */
.tnc-vu-cat-card-check{
	position:absolute; top:10px; right:10px; width:19px; height:19px; border-radius:50%;
	border:1.5px solid rgba(198,161,91,.35); background:var(--tnc-white);
	display:flex; align-items:center; justify-content:center;
	color:transparent; font-size:10px; line-height:1; transition:all .2s ease;
}

.tnc-vu-cat-card-input:checked ~ .tnc-vu-cat-card-icon{ background:var(--tnc-oxblood); border-color:var(--tnc-oxblood); color:var(--tnc-light-gold); }
.tnc-vu-cat-card-input:checked ~ .tnc-vu-cat-card-title{ color:var(--tnc-oxblood); font-weight:700; }
.tnc-vu-cat-card-input:checked ~ .tnc-vu-cat-card-check{ background:var(--tnc-oxblood); border-color:var(--tnc-oxblood); color:#fff; }
.tnc-vu-cat-card-input:focus-visible ~ .tnc-vu-cat-card-icon{ outline:2px solid var(--tnc-gold); outline-offset:2px; }

/* Whole-card highlight once selected -- layered on with :has() so a
   browser without support simply keeps the icon/badge/title cues
   above instead of breaking. */
.tnc-vu-cat-card:has(.tnc-vu-cat-card-input:checked){
	background:var(--tnc-cream); border-color:var(--tnc-oxblood);
	box-shadow:0 8px 20px rgba(31,14,12,.07);
}

/* A category the vendor has requested but we haven't approved yet (see
   handle_update_profile() in class-tnc-vendor-dashboard.php) -- gold
   instead of the usual oxblood "selected" look, so it reads as "waiting"
   rather than "active", on both the vendor's own My Profile grid and the
   admin's Vendor Details modal (same markup/classes, different modal). */
.tnc-vu-cat-card-pending:has(.tnc-vu-cat-card-input:checked),
.tnc-vu-cat-card-pending{
	border-color:var(--tnc-gold); background:#FBF3E4;
}
.tnc-vu-cat-card-pending .tnc-vu-cat-card-input:checked ~ .tnc-vu-cat-card-icon{ background:var(--tnc-gold); border-color:var(--tnc-gold); color:#fff; }
.tnc-vu-cat-card-pending .tnc-vu-cat-card-input:checked ~ .tnc-vu-cat-card-title{ color:#8A6D3B; }
.tnc-vu-cat-card-pending .tnc-vu-cat-card-input:checked ~ .tnc-vu-cat-card-check{ background:var(--tnc-gold); border-color:var(--tnc-gold); }
.tnc-vu-cat-card-pending-badge{
	display:inline-block; margin-top:3px; font-family:Arial,Helvetica,sans-serif;
	font-size:9.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
	color:#8A6D3B;
}

.tnc-vu-cat-hint{ font-size:11.5px; color:var(--tnc-muted); margin:10px 0 0; }
.tnc-vu-field-hint{ font-size:11px; color:var(--tnc-muted); margin:5px 0 0; }

/* =========================================================
   CHOOSE PROFILE -- "Continue as Member / Vendor" chooser
   (templates/choose-profile.php)
   ========================================================= */

.tnc-cp-wrap{ max-width:760px; margin:0 auto; padding:48px 20px 60px; }
.tnc-cp-header{ text-align:center; margin-bottom:36px; }
.tnc-cp-eyebrow{ color:var(--tnc-gold); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.tnc-cp-header h1{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:26px; color:var(--tnc-dark); margin:0 0 10px; line-height:1.3; }
.tnc-cp-header p{ font-size:13.5px; color:var(--tnc-muted); max-width:480px; margin:0 auto; }
.tnc-cp-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .tnc-cp-cards{ grid-template-columns:1fr; } }
/* Three cards (Member/Vendor/Administrator, for an account that's also
   a site Administrator) instead of the usual two -- wider breakpoint
   before dropping to one column since three narrow cards squeeze sooner
   than two. */
.tnc-cp-cards-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:900px){ .tnc-cp-cards-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .tnc-cp-cards-3{ grid-template-columns:1fr; } }
.tnc-cp-card{ display:block; background:#fff; border:1px solid var(--tnc-border); border-radius:10px; padding:28px 24px; text-decoration:none; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.tnc-cp-card:hover{ border-color:var(--tnc-gold); transform:translateY(-2px); box-shadow:0 14px 30px rgba(31,14,12,.10); }
.tnc-cp-card-icon{ font-size:26px; color:var(--tnc-gold); margin-bottom:14px; }
.tnc-cp-card h2{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:19px; color:var(--tnc-dark); margin:0 0 8px; }
.tnc-cp-card p{ font-size:12.5px; color:var(--tnc-muted); line-height:1.5; margin:0 0 16px; }
.tnc-cp-card-cta{ font-size:12.5px; font-weight:700; color:var(--tnc-oxblood); }
.tnc-cp-card-empty{ background:var(--tnc-ivory); border-style:dashed; }
.tnc-cp-card-empty .tnc-cp-card-cta{ color:var(--tnc-gold); }

/* ----------------------------------------------------------------
 * Vendor page redesign: sticky jump-to tabs, and the
 * "More <Category> in <City>" related-vendors carousel at the foot
 * of the page. Added alongside the social icon badges above.
 * (Breadcrumb styling now lives up with .tnc-vp-hero -- it's rendered
 * inside the hero block itself, not as its own bar above it.)
 * ---------------------------------------------------------------- */

/* Not position:sticky -- on this site's page-builder theme, an ancestor
   row/column wrapper with overflow:hidden (very common in Flatsome/UX
   Builder layouts) breaks sticky positioning and can make the element
   render with no visible box at all instead of just failing to stick.
   A plain static bar is a few extra scroll-pixels but always visible. */
.tnc-vp-tabs-wrap{ position:relative; z-index:1; background:var(--tnc-white); border-bottom:1px solid var(--tnc-border); margin:0 0 28px; }
.tnc-vp-tabs{ max-width:1080px; margin:0 auto; display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tnc-vp-tab{ flex-shrink:0; padding:14px 16px; font-size:12.5px; font-weight:700; color:var(--tnc-muted); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; transition:.15s ease; }
.tnc-vp-tab:hover{ color:var(--tnc-oxblood); }
.tnc-vp-tab.is-active{ color:var(--tnc-oxblood); border-bottom-color:var(--tnc-gold); }
.tnc-vp-anchor{ scroll-margin-top:64px; }

.tnc-vp-related{ background:var(--tnc-oxblood); margin:48px 0 0; padding:44px 0; }
.tnc-vp-related-inner{ max-width:1080px; margin:0 auto; padding:0 20px; }
.tnc-vp-related-title{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:22px; color:#fff; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.tnc-vp-related-title::before{ content:""; width:3px; height:18px; background:var(--tnc-gold); display:inline-block; }
.tnc-vp-related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tnc-vp-related-card{ border-color:rgba(255,255,255,.14); }
@media (max-width:900px){ .tnc-vp-related-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tnc-vp-related-grid{ grid-template-columns:1fr; } .tnc-vp-tabs-wrap{ margin-bottom:20px; } }