/* The public processor pages (Processor Hub S2): /processors, a state, a county, a processor, the listing policy. They sit on the public shell and borrow its look
   (tools.css, data.css, data-home.css: .tt-wrap, .tt-hero, .th-chips, .dx-result); this file holds only what those do not have. House style: white cards, 1px borders, 2px radius,
   uppercase eyebrows, status pills, forest green and amber. The classes are the approved mockups' (docs/design/screenshots/processor-hub/P01-P14). */

/* Cards and grids */
.hb-card { background: #fff; border: 1px solid var(--border, #e2dbd0); border-radius: 2px; margin-bottom: 16px; }
.hb-card-h { padding: 12px 20px; border-bottom: 1px solid var(--border, #e2dbd0); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hb-eb { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #4f6855); margin: 0; }
.hb-card-b { padding: 18px 20px; }
.hb-card-f { padding: 12px 20px; border-top: 1px solid var(--border, #e2dbd0); background: var(--content-bg, #faf8f4); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hb-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.hb-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .hb-grid, .hb-grid3 { grid-template-columns: minmax(0, 1fr); } }

/* A processor card (county hub, finder) */
/* A fixed three-column grid (processor | availability | actions), so the availability column starts at the same x on every card whatever the name length. Stacks on phones. */
.hb-plant { display: grid; grid-template-columns: minmax(0, 1fr) 210px 210px; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--border, #e2dbd0); border-radius: 2px; padding: 16px 18px; margin-bottom: 10px; }
.hb-plant .main { min-width: 0; }
.hb-plant-h { display: inline; margin: 0; font-size: 16px; font-weight: 700; }
.hb-plant .nm { font-size: 16px; font-weight: 700; color: var(--text-primary, #1c2a1e); text-decoration: none; }
.hb-plant .nm:hover { text-decoration: underline; }
.hb-plant .meta { font-size: 13px; color: var(--text-muted, #4f6855); margin-top: 4px; }
.hb-plant .when { min-width: 0; }
.hb-plant .act-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; width: 100%; }
@media (max-width: 860px) { .hb-plant { grid-template-columns: minmax(0, 1fr) 210px; } .hb-plant .act { grid-column: 1 / -1; max-width: 210px; } }
@media (max-width: 575px) { .hb-plant { grid-template-columns: minmax(0, 1fr); } .hb-plant .act { max-width: none; } }
/* The right column is a fixed grid: row 1 = View processor (fills) + the heart (compact); row 2 = the ask or request button at the SAME full width as row 1. */
.hb-plant .act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; width: 100%; }
.hb-plant .act .cc-tip-host { display: block; }
.hb-plant .act .btn { width: 100%; justify-content: center; }
.hb-plant .act-row .hub-fav .btn { width: auto; }
.hb-next { font-size: 18px; font-weight: 700; color: #1b5e20; }
.hb-call { font-weight: 600; }
.hb-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; margin-left: 6px; }
.hb-pillwrap { display: inline-flex; align-items: center; gap: 0; }

/* The processor page hero and body */
.hb-hero { background: #1b3d2a; color: #fff; padding: 28px 0; }
.hb-hero .in { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.hb-hero h1 { margin: 0; font-size: 28px; font-weight: 700; color: #fff; }
.hb-hero .cc-hi { color: #e6f0e9; }
.hb-hero .sub { font-size: 14px; color: #cfe3d6; margin-top: 6px; }
.hb-hero-r { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hb-hero .facts { display: flex; gap: 28px; flex-wrap: wrap; }
.hb-hero .facts span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #9cc7a9; }
.hb-hero .facts b { font-size: 17px; }
.hb-hero .btn, .hb-hero .hb-share-btn { background: transparent; color: #fff; border: 1px solid #fff; }
.hb-hero .btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
:root { --hb-callbar-h: 64px; --hb-call-bg: #c4561f; --hb-call-bg-hover: #a94a1a; --hb-call-fg: #fff; --hb-bar-bg: #fff; }
.hb-hero .hb-call-btn .btn { background: var(--hb-call-bg); border-color: var(--hb-call-bg); color: var(--hb-call-fg); font-weight: 600; }
.hb-hero .hb-call-btn .btn:hover { background: var(--hb-call-bg-hover); border-color: var(--hb-call-bg-hover); color: var(--hb-call-fg); }
.hb-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hb-hero-actions .hb-fav-host { display: inline-flex; align-items: center; }
/* ONE size for every hero action (Call, Request a week, Share, the heart): the 44px touch height, one radius, one border width, one font, one icon gap; the heart is the same height as a square. Scoped to the hero row so the county, state, finder and map buttons are untouched. */
:root { --hb-hero-btn-h: 44px; }
.hb-hero-actions .cc-tip-host, .hb-hero-actions .hb-call-row, .hb-hero-actions .hb-fav-host { display: inline-flex; align-items: center; margin: 0; padding: 0; line-height: 1; }
.hb-hero-actions .btn { box-sizing: border-box; height: var(--hb-hero-btn-h); min-height: var(--hb-hero-btn-h); padding: 0 16px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1; border-width: 1px; border-style: solid; border-radius: var(--radius, 2px); gap: var(--cc-btn-gap, .4rem); white-space: nowrap; }
.hb-hero-actions .hub-fav.btn { width: var(--hb-hero-btn-h); min-width: var(--hb-hero-btn-h); padding: 0; }
/* The sticky call bar is for phones only (PLAN decision 27): hidden above 640px, and the page keeps room under it so it never covers the footer. */
.hb-callbar { display: none; }
.hb-wrap { max-width: 1180px; margin: 0 auto; padding: 24px; }
@media (max-width: 575px) { .hb-wrap { padding: 16px; } .hb-hero .in { padding: 0 16px; } }
.hb-crumbs { font-size: 13px; color: var(--text-muted, #4f6855); margin-bottom: 10px; }
.hb-crumbs a { color: inherit; }
.tt-wrap > .hb-crumbs { margin: 1.1rem 0 .4rem; }
.hb-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee8de; font-size: 13.5px; }
.hb-row:last-child { border-bottom: 0; }
.hb-row .k { color: var(--text-muted, #4f6855); }
.hb-note { font-size: 12.5px; color: var(--text-muted, #4f6855); line-height: 1.45; }
.hb-callout { background: #fff4ee; border: 1px solid #d97746; border-radius: 2px; padding: 12px 14px; font-size: 13px; color: #7c2d12; line-height: 1.45; margin-bottom: 16px; }
.hb-list { list-style: none; padding: 0; margin: 0; }
.hb-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee8de; font-size: 14px; }
.hb-list li:last-child { border-bottom: 0; }
.hb-list a { color: var(--text-primary, #1c2a1e); font-weight: 600; text-decoration: none; }
.hb-list a:hover { text-decoration: underline; }
.hb-nearby-list li { flex-wrap: wrap; }
.hb-nearby-main { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.hb-count { color: var(--text-muted, #4f6855); font-size: 13px; font-weight: 500; }
.hb-week { display: inline-flex; flex-direction: column; border: 1px solid var(--border, #e2dbd0); border-radius: 2px; padding: 10px 14px; min-width: 150px; background: #fff; }
.hb-week .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #4f6855); }
.hb-week .v { font-size: 17px; font-weight: 700; color: #1b5e20; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hb-table th { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #4f6855); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border, #e2dbd0); white-space: nowrap; }
.hb-table td { padding: 10px; border-bottom: 1px solid #eee8de; vertical-align: top; }
.hb-scroll { overflow-x: auto; }
@media (max-width: 600px) {
    .hb-table thead { display: none; }
    .hb-table tr { display: block; border-bottom: 1px solid #e2dbd0; padding: 8px 0; }
    .hb-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 10px; text-align: right; }
    .hb-table td::before { content: attr(data-l); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #4f6855); text-align: left; }
}

/* The listing policy */
.hb-policy { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.hb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* "Email the processor" (the relay): the form, "check your email", the confirm page and the done page (relay mockups B to D). One narrow column. */
.hb-relay { max-width: 640px; margin: 0 auto 2rem; }
.hb-relay-icon { display: block; font-size: 2.4rem; color: var(--green, #1b3d2a); margin-bottom: .5rem; }
.hb-relay-quote { margin: 0 0 1rem; padding: .25rem 0 .25rem 12px; border-left: 3px solid var(--border, #d6d2c8); white-space: pre-wrap; }
.hb-relay-rows { margin: 0 0 1rem; border: 1px solid var(--border, #e2dbd0); background: var(--content-bg, #faf8f4); }
.hb-relay-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: 8px 14px; }
.hb-relay-rows dt { font-weight: 400; color: var(--muted, #5d6b62); }
.hb-relay-rows dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.hb-share-row { display: flex; justify-content: flex-end; margin: 1.2rem 0 0; }
.tt-wrap .hb-share-row .btn { color: #1b3d2a; }

/* The ⓘ on a static page: a native <details> in the Portal's HelpTip look (portal-ui.css .cc-help / .cc-hi / .cc-pop). Closed it draws only the button. */
.hb-tip { display: inline-block; }
.hb-tip > summary { list-style: none; }
.hb-tip > summary::-webkit-details-marker { display: none; }
.hb-tip:not([open]) > .cc-pop { display: none; }
.hb-tip[open] > summary { color: var(--accent-strong, #b8501f); background: var(--accent-light, #fff4ee); }
.hb-tip .cc-pop { cursor: auto; }
.hb-more > summary { list-style: none; cursor: pointer; }
.hb-more > summary::-webkit-details-marker { display: none; }
.hb-more-b { display: block; margin-top: 6px; }
.hb-more-b p { margin: 0 0 6px; }
.hb-eb .cc-help, .hb-table th .cc-help { text-transform: none; letter-spacing: normal; }
@media (max-width: 767.98px) {
    /* A phone gets the popover as a bottom sheet, like the Portal's (portal-ui.css): the details stays the control. */
    .hb-tip[open] > .cc-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; }
    .hb-tip[open] > .cc-pop::before { display: none; }
}

/* The Share dialog: the guide Share panel's look (ResourceArticle.razor), for a single thing to share. */
.tt-dlg.rs-dlg { width: min(880px, calc(100vw - 32px)); }
.rs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.1rem 1.4rem; align-items: start; }
.rs-label { display: block; font-size: 13px; font-weight: 700; color: #16281d; margin: 0 0 .35rem; }
.rs-card { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid #e7e1d6; border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 26, 20, .06); background: #f7f5ef; }
.rs-cap { font-size: 12px; color: #43514a; margin: .4rem 0 0; line-height: 1.45; }
.rs-text { width: 100%; box-sizing: border-box; min-height: 150px; padding: 10px; font: inherit; font-size: 14px; line-height: 1.55; border: 1px solid #cfd8d2; border-radius: 6px; background: #f6f7f5; color: #1f2a24; resize: none; }
.hb-share-copy { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.rs-nets { margin-top: 1.1rem; }
.rs-nets .tt-share-actions { margin-top: .2rem; }
.rs-hint { display: flex; gap: .4rem; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #43514a; margin: .6rem 0 0; }
.rs-hint i { color: #1b3d2a; margin-top: .1rem; }
@media (max-width: 575px) { .tt-dlg.rs-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }
@media (max-width: 700px) { .rs-grid { grid-template-columns: 1fr; } .rs-nets .tt-share-actions > * { flex: 1 1 calc(50% - .3rem); } }

/* The read-only cut sheet preview (the look of mockup C01, without a buyer or a submit). */
.hb-cs { max-width: 640px; margin: 0 auto; }
.hb-cs-head { border-left: 3px solid #b8501f; background: #fff; border-radius: 4px; padding: 14px 16px; margin-bottom: 18px; border-top: 1px solid #e5dfd3; border-right: 1px solid #e5dfd3; border-bottom: 1px solid #e5dfd3; }
.hb-cs-head h1 { font-size: 22px; margin: 4px 0 6px; }
.hb-cs-h { margin: 20px 0 8px; }
.hb-cs-opt { padding: 8px 0; border-bottom: 1px solid #eee8de; }
.hb-cs-opt:last-child { border-bottom: 0; }

/* A processor's phone as a tel: link (HubPhoneLink): the number reads as a number, and is the thing to tap on a phone. */
.hub-tel { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.hub-tel:hover, .hub-tel:focus-visible { text-decoration-thickness: 2px; }
.hub-phone .hub-tel { font-size: 1.1rem; }

/* The heart on a processor (HubFavoriteButton): filled when saved. */
.hub-fav.hub-fav-on .bi { color: var(--cc-danger, #c0392b); }

/* The address, email and small map of a processor page (HubLocationCard). The map is drawn by js/hub-contact.js when it scrolls near; the box keeps its height so nothing jumps. */
.hb-address { font-style: normal; font-size: 14px; line-height: 1.5; }
.hb-pmap { height: 180px; border: 1px solid var(--border, #e2dbd0); border-radius: 2px; background: var(--content-bg, #faf8f4); }
.hb-pmap .leaflet-control-attribution { font-size: 10px; }

@media (max-width: 640px) {
  .hb-hero .hb-call-row, .hb-hero .hb-call-row .cc-tip-host { flex: 1 1 100%; display: block; width: 100%; }
  .hb-hero .hb-call-row .btn { width: 100%; justify-content: center; }
  .hb-callbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; box-sizing: border-box; min-height: calc(var(--hb-callbar-h) + env(safe-area-inset-bottom)); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--hb-bar-bg); border-top: 1px solid var(--border, #e2dbd0); box-shadow: 0 -2px 8px var(--hb-bar-shadow, rgba(0, 0, 0, .08)); }
  .hb-callbar .cc-tip-host { display: block; width: 100%; }
  .hb-callbar .btn { width: 100%; justify-content: center; }
  /* The bar is fixed, so the page keeps its height under it: the whole body (footer included) gets padding the bar's height. */
  body:has(.hb-callbar) { padding-bottom: calc(var(--hb-callbar-h) + env(safe-area-inset-bottom)); }
}

/* The saved count under a processor's address (listing programme, PR 16): a heart and a number, nothing to click. */
.hb-hero .hb-saved .bi-heart-fill { color: #f0a0a0; }

/* The website and social buttons under a processor's name (listing PR 6). 44 px targets; a failed link is plain text. */
.hb-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 10px 0 0; padding: 0; }
.hb-links li { margin: 0; }
.hb-link-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--bs-border-color, #d0d5d2); border-radius: var(--radius, 2px); color: inherit; font-size: 1.25rem; text-decoration: none; background: transparent; }
.hb-link-icon .hb-link-text { font-size: 14px; margin-left: 8px; }
/* The website pill names its site: on a narrow screen a long domain is cut with an ellipsis (the full domain stays in title and aria-label). */
.hb-link-icon:has(.hb-link-text) { max-width: 100%; }
.hb-link-icon .hb-link-text { min-width: 0; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-website-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-link-icon:has(.hb-link-text) { padding: 0 12px; }
.hb-link-icon:hover, .hb-link-icon:focus-visible { border-color: currentColor; }
/* In the hero the website and social icons sit in the action row, drawn like its other buttons: 44 px, the same white border. */
.hb-hero-actions .hb-links { margin: 0; }
.hb-hero .hb-link-icon { border: 1px solid #fff; color: #fff; min-width: var(--hb-hero-btn-h, 44px); min-height: var(--hb-hero-btn-h, 44px); }
.hb-hero .hb-link-icon:hover, .hb-hero .hb-link-icon:focus-visible { background: rgba(255, 255, 255, .12); }
.hb-link-dead { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--bs-secondary-color, #6b726e); font-size: 14px; }

/* ── Farm Search (/farms) ─────────────────────────────────────────────────────────────────────────────────────────────── */
.fs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 1.2rem 0 .8rem; }
.fs-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: #16281d; }
.fs-head .hb-note { margin: 0; }
.fs-grid { margin-top: 1.4rem; }
.fs-prov { display: inline-flex; align-items: center; gap: .3rem; }
.fs-prov i { font-size: 12px; }
.fs-attrib { margin: 1.4rem 0 0; padding-top: .9rem; border-top: 1px solid #e7e1d6; }
.fs-products { font-size: 13px; color: #43514a; margin-top: 4px; }
.fs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-listing-hero { text-align: left; }
.fs-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.2rem; margin: 0; }
.fs-facts dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #435049; }
.fs-facts dd { margin: 0; }
@media (max-width: 575.98px) { .fs-facts { grid-template-columns: minmax(0, 1fr); } .fs-facts dd { margin-bottom: .4rem; } }

/* The /farms landing's two cards (Is your farm missing? / What is a CSA?): side by side across the full width, one column on a phone. */
.fs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 1.4rem; }
.fs-cards > .hb-card { margin: 0; }
@media (max-width: 860px) { .fs-cards { grid-template-columns: minmax(0, 1fr); } }

/* ── Listing detail pages: farm and processor share one layout (listing-pages plan, phases 1 and 2) ──────────────────────────────────────────────────────────
   The hero (crumbs, kind mark, pills, name, place, links, one action row, a small map on the right), the "At a glance" tiles that overlap its edge, the Contact card, the trust card,
   the claim card, the nearby cards and the folded embed code. The colours are the hub's own (the mockup's tokens). */
/* The glance tiles sit fully below the hero (no overlap into the green band): owner, 2026-11-05. */
.hb-hero.ls-hero { padding: 18px 0 28px; }
.hb-hero.ls-hero .in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; flex-wrap: nowrap; }
.hb-hero.ls-hero .in:not(:has(.hb-hero-r)) { grid-template-columns: minmax(0, 1fr); }
.ls-hero .hb-crumbs { color: #cfe3d6; margin-bottom: 12px; }
.ls-hero .hb-crumbs a { color: #e6f0e9; }
.ls-hero h1 { font-size: 34px; line-height: 1.15; margin: 4px 0 2px; overflow-wrap: anywhere; }
.ls-hero-title { display: flex; gap: 14px; align-items: flex-start; }
.ls-hero-title > div { min-width: 0; }
.ls-hero .hb-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ls-hero .hb-pillwrap { display: inline-flex; align-items: center; gap: 4px; }
.ls-kindmark { width: 54px; height: 54px; border-radius: 6px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 28px; color: #f4c7a8; flex: none; margin-top: 6px; }
.ls-hero .sub .bi { margin-right: 2px; }
.ls-hero .hb-hero-r { display: block; }
.ls-heromap { position: relative; height: 200px; border: 3px solid rgba(255, 255, 255, .9); border-radius: 4px; overflow: hidden; background: var(--content-bg, #faf8f4); }
.ls-heromap .hb-pmap { height: 100%; border: 0; border-radius: 0; }
.ls-mapcap { position: absolute; left: 8px; bottom: 8px; z-index: 1000; max-width: 70%; background: rgba(255, 255, 255, .95); color: #1c2a1e; font-size: 12px; padding: 3px 8px; border-radius: 2px; display: flex; gap: 5px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ls-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 16px; position: relative; z-index: 2; }
.ls-tile { background: #fff; border: 1px solid var(--border, #e2dbd0); border-radius: 3px; padding: 12px 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); min-width: 0; }
.ls-tile .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted, #4f6855); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.ls-tile .l i { color: #b8501f; font-size: 14px; }
.ls-tile .v { font-weight: 700; font-size: 15px; margin-top: 4px; overflow-wrap: anywhere; }
.ls-tile .v.empty { color: #6f6f64; font-weight: 500; font-style: italic; }
.ls-tile .s { font-size: 12.5px; color: var(--text-muted, #4f6855); }
.ls-glance-empty { margin: 16px 0 16px; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: #fff; border: 1px solid var(--border, #e2dbd0); border-radius: 3px; padding: 12px 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); font-size: 14px; color: var(--text-muted, #4f6855); }
.ls-glance-empty .bi { color: #b8501f; }
.ls-glance-empty a { font-weight: 600; }
.fs-grid .ls-sidemap { margin-bottom: 24px; }
.fs-grid .ls-sidemap .ls-heromap { border-color: var(--border, #e2dbd0); border-width: 1px; }
.ls-verify { border-top: 1px solid var(--border, #e2dbd0); }
.ls-verify h3 { font-size: 14px; font-weight: 700; margin: 0 0 4px; }

.ls-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 14px; align-items: center; font-size: 14.5px; }
.ls-kv .k { color: var(--text-muted, #4f6855); font-size: 13px; }
.ls-kv .ls-address { margin: 0; }
.ls-phone { font-size: 17px; font-variant-numeric: tabular-nums; }
.ls-copy { margin-left: 6px; }
.ls-trust { display: flex; gap: 12px; align-items: flex-start; }
.ls-trust .ic { width: 38px; height: 38px; border-radius: 50%; background: #f1eee7; display: grid; place-items: center; font-size: 18px; color: var(--text-muted, #4f6855); flex: none; }

.hb-card.ls-claim { border: 2px solid #d9764a; background: #fff4ee; }
.ls-chip { font-size: 12px; background: #f1eee7; color: var(--text-muted, #4f6855); border-radius: 999px; padding: 2px 10px; }
.ls-benefits { margin: 6px 0 12px; padding-left: 18px; font-size: 13.5px; }

.ls-near { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ls-nc { border: 1px solid var(--border, #e2dbd0); border-radius: 3px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.ls-nc .ico { width: 36px; height: 36px; border-radius: 4px; background: #e6f0e9; color: #1b3d2a; display: grid; place-items: center; font-size: 18px; flex: none; }
.ls-nc a { font-weight: 700; font-size: 14px; color: #16281d; text-decoration: none; }
.ls-nc a:hover { text-decoration: underline; }
.ls-nc .m { font-size: 12.5px; color: var(--text-muted, #4f6855); }

.ls-embed { background: #fff; border: 1px solid var(--border, #e2dbd0); padding: 12px 18px; margin: 4px 0 24px; }
.ls-embed summary { font-size: 13px; color: var(--text-muted, #4f6855); display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ls-embed[open] .ls-chev { transform: rotate(180deg); }
.ls-embed > .hb-card { border: 0; margin: 12px 0 0; }

@media (max-width: 640px) {
  .hb-hero.ls-hero .in { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 14px; }
  .ls-hero h1 { font-size: 26px; }
  .ls-kindmark { width: 44px; height: 44px; font-size: 22px; }
  .ls-heromap { height: 150px; }
  .hb-hero.ls-hero { padding-bottom: 44px; }
  .ls-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
  .ls-glance-empty { margin-top: 12px; }
  .ls-near { grid-template-columns: minmax(0, 1fr); }
  .ls-kv { grid-template-columns: 90px minmax(0, 1fr); }
}
.ls-claim-btn .btn, .ls-claim-btn .cc-tip-host { width: 100%; justify-content: center; display: flex; }