/*
  Marketplace results layout, CSS-first filters, and Google map panel.

  search.js adds URL state, live counts, DOM sorting, and header search
  routing. The embedded Google map is an independent nearby-search surface;
  it does not mirror the CSDP rows, sorting, or filters.
*/

/* --------------------------------------------------------------------------
   LOCAL TOKENS. Derived from canon tokens only. Plain-token fallbacks first,
   color-mix behind @supports — the same guard editorial.css documents, for the
   same reason: a custom property parses anything, so a failed color-mix would
   silently paint nothing.
   -------------------------------------------------------------------------- */
.sr-layout,
.cm {
  --sr-rail-w: 264px;
  --sr-map-w: 420px;
  --sr-gap: 24px;
  --sr-sticky-top: 16px;

  --sr-quiet: var(--foam-50);
  --sr-selected: var(--ed-band);
}

@supports (background: color-mix(in srgb, currentColor 50%, white)) {
  .sr-layout,
  .cm {
    --sr-quiet: color-mix(in srgb, var(--sand-200) 14%, white);
    --sr-selected: color-mix(in srgb, var(--aqua-400) 18%, white);
  }
}

/* ==========================================================================
   1. LAYOUT — rail | results | map
   ========================================================================== */

/* This page type is wider than the editorial prose shell. Nothing else in the
   system changes: .ed-shell still owns the centring and the gutters. */
.sr-shell {
  --ed-shell: 1280px;
}

.sr-layout {
  display: grid;
  gap: var(--sr-gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(20px, 3vw, 32px);
}

@media (min-width: 900px) {
  .sr-layout {
    grid-template-columns: var(--sr-rail-w) minmax(0, 1fr);
  }

  .sr-map {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1180px) {
  .sr-layout {
    grid-template-columns: var(--sr-rail-w) minmax(0, 1fr) var(--sr-map-w);
  }

  .sr-map {
    grid-column: auto;
  }
}

.sr-results {
  min-width: 0;
}

/* The two sticky columns. max-height keeps a long rail scrollable inside
   itself rather than trapping the reader against the viewport. */
@media (min-width: 900px) {
  .sr-rail {
    position: sticky;
    top: var(--sr-sticky-top);
    max-height: calc(100vh - (var(--sr-sticky-top) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 1180px) {
  .sr-map {
    position: sticky;
    top: var(--sr-sticky-top);
  }
}

/* ==========================================================================
   2. THE FILTER RAIL
   ========================================================================== */

.sr-rail {
  min-width: 0;
  padding: 4px;
  background: var(--ed-paper);
  border: 1px solid var(--ed-hairline);
  border-radius: var(--ed-radius-md);
}

/* The mobile disclosure switch carries .tc-sr in the markup: clipped from
   view, still in the tab order, and with no name attribute so it is never
   submitted as a filter. It needs no rule of its own here. */
.sr-rail__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.sr-rail__heading {
  margin: 0;
  font-family: var(--ed-font-editorial);
  font-size: var(--ed-t-2);
  font-weight: 700;
  line-height: var(--ed-lh-head);
}

.sr-rail__disclose {
  min-height: var(--ed-tap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--ed-ink);
  background: var(--ed-paper);
  border: 2px solid var(--ed-edge);
  border-radius: var(--ed-radius-sm);
  font-size: var(--ed-t--1);
  font-weight: 700;
  cursor: pointer;
}

.sr-rail__disclose-hide {
  display: none;
}

.sr-rail:has(.sr-rail__switch:checked) .sr-rail__disclose-show {
  display: none;
}

.sr-rail:has(.sr-rail__switch:checked) .sr-rail__disclose-hide {
  display: inline;
}

/* Focus lands on the hidden checkbox; move the ring onto the label a reader
   can actually see. Same ring as .ed-page :focus-visible. */
.sr-rail:has(.sr-rail__switch:focus-visible) .sr-rail__disclose {
  outline: 3px solid var(--ed-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--ed-accent);
}

.sr-rail__body {
  display: none;
  padding: 0 14px 14px;
}

.sr-rail:has(.sr-rail__switch:checked) .sr-rail__body {
  display: grid;
  gap: 18px;
}

/* From 900px the rail is always open and the disclosure button disappears. */
@media (min-width: 900px) {
  .sr-rail__disclose {
    display: none;
  }

  .sr-rail__body,
  .sr-rail:has(.sr-rail__switch:checked) .sr-rail__body {
    display: grid;
    gap: 18px;
  }
}

.sr-group {
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--ed-hairline);
  display: grid;
  gap: 10px;
}

.sr-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.sr-group__legend {
  padding: 0;
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--2);
  font-weight: 700;
  letter-spacing: .09em;
  line-height: var(--ed-lh-snug);
  text-transform: uppercase;
}

.sr-opts {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ed-tap);
  padding-inline: 8px;
  border-radius: var(--ed-radius-sm);
}

/* Native radio, native semantics, native focus ring. accent-color is a token,
   so the control is Pacific navy without a single pixel being faked. */
.sr-opt__input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ed-ink);
  cursor: pointer;
}

.sr-opt__label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--ed-tap);
  padding-block: 8px;
  color: var(--ed-ink);
  font-size: var(--ed-t--1);
  line-height: var(--ed-lh-snug);
  cursor: pointer;
}

.sr-opt__count {
  flex: 0 0 auto;
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--1);
  font-variant-numeric: var(--ed-nums);
}

.sr-opt:hover {
  background: var(--sr-quiet);
}

.sr-opt:has(.sr-opt__input:checked) {
  background: var(--sr-selected);
}

.sr-opt:has(.sr-opt__input:checked) .sr-opt__label {
  font-weight: 700;
}

.sr-opt:has(.sr-opt__input:focus-visible) {
  background: var(--sr-quiet);
}

.sr-rail__foot {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ed-hairline);
}

.sr-rail__submit,
.sr-rail__clear {
  width: 100%;
  text-decoration: none;
}

.sr-rail__nojs {
  margin-top: 12px;
}

/* ==========================================================================
   3. RESULTS HEAD, APPLIED FILTERS, COUNTS
   ========================================================================== */

.sr-results__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ed-rule-color);
}

.sr-results__headings {
  min-width: 0;
  flex: 1 1 min(100%, 26ch);
}

.sr-results__headings h2 {
  margin: 0;
}

.sr-results__meta {
  margin: 4px 0 0;
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--1);
  font-variant-numeric: var(--ed-nums);
  line-height: var(--ed-lh-snug);
}

.sr-count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--ed-ink);
  font-size: var(--ed-t--1);
  font-weight: 600;
  font-variant-numeric: var(--ed-nums);
}

.sr-count__value {
  font-size: var(--ed-t-1);
  font-weight: 700;
}

.sr-count__static {
  max-width: var(--ed-measure-micro);
  font-weight: 400;
}

.sr-applied {
  margin-top: 14px;
}

/* Every chip is rendered once and revealed by the state of its own control.
   The remove control is a <label>: the only control that clears a filter with
   JavaScript off AND no server. These declarations are a deliberate mirror of
   `.ed-applied a, .ed-applied button` in editorial.css §5 — same box, same
   size, same edge — because that rule cannot match a <label>. If that block
   changes, change this one. */
.sr-chip {
  min-height: var(--ed-tap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--ed-ink);
  background: var(--ed-band);
  border: 1px solid var(--ed-edge);
  border-radius: 999px;
  font: inherit;
  font-size: var(--ed-t--1);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.sr-chip:hover {
  background: var(--ed-warm);
}

.sr-chip__x {
  font-size: var(--ed-t-1);
  line-height: 1;
}

.sr-applied__item {
  display: none;
}

.sr-layout:has(#sr-rating-47:checked) .sr-applied__item--rating-47,
.sr-layout:has(#sr-rating-49:checked) .sr-applied__item--rating-49,
.sr-layout:has(#sr-reviews-50:checked) .sr-applied__item--reviews-50,
.sr-layout:has(#sr-reviews-100:checked) .sr-applied__item--reviews-100,
.sr-layout:has(#sr-locality-north-county:checked) .sr-applied__item--locality-north-county,
.sr-layout:has(#sr-locality-san-diego:checked) .sr-applied__item--locality-san-diego,
.sr-layout:has(#sr-sort-rating:checked) .sr-applied__item--sort-rating,
.sr-layout:has(#sr-sort-reviews:checked) .sr-applied__item--sort-reviews,
.sr-layout:has(#sr-sort-name:checked) .sr-applied__item--sort-name {
  display: inline-flex;
}

/* ==========================================================================
   4. THE FILTER ENGINE
   Six rules hide result rows from the CSDP list.
   ========================================================================== */

/* Minimum rating */
.sr-layout:has(#sr-rating-47:checked) [data-sr-item][data-sr-rating-band="45"],
.sr-layout:has(#sr-rating-49:checked) [data-sr-item][data-sr-rating-band="45"],
.sr-layout:has(#sr-rating-49:checked) [data-sr-item][data-sr-rating-band="47"],

/* Minimum review count */
.sr-layout:has(#sr-reviews-50:checked) [data-sr-item][data-sr-review-band="15"],
.sr-layout:has(#sr-reviews-100:checked) [data-sr-item][data-sr-review-band="15"],
.sr-layout:has(#sr-reviews-100:checked) [data-sr-item][data-sr-review-band="50"],

/* Locality */
.sr-layout:has(#sr-locality-north-county:checked) [data-sr-item][data-sr-locality="san-diego"],
.sr-layout:has(#sr-locality-san-diego:checked) [data-sr-item][data-sr-locality="north-county"] {
  display: none;
}

/* ==========================================================================
   5. SORT WITHOUT JAVASCRIPT
   The generator writes an integer rank per row for each sort. `order` then
   rearranges the boxes. When search.js has really reordered the DOM it stamps
   [data-sr-sorted] on the list and these rules stand down, so the two engines
   never both act.
   ========================================================================== */

.sr-list {
  display: grid;
  counter-reset: sr-shown;
}

.sr-list > [data-sr-item] {
  counter-increment: sr-shown;
}

.sr-layout:has(#sr-sort-rating:checked) .sr-list:not([data-sr-sorted]) > [data-sr-item] {
  order: var(--sr-k-rating, 0);
}

.sr-layout:has(#sr-sort-reviews:checked) .sr-list:not([data-sr-sorted]) > [data-sr-item] {
  order: var(--sr-k-reviews, 0);
}

.sr-layout:has(#sr-sort-name:checked) .sr-list:not([data-sr-sorted]) > [data-sr-item] {
  order: var(--sr-k-name, 0);
}

/* ==========================================================================
   6. THE COUNT UNDER THE LIST
   A display:none row generates no box and so never increments the counter.
   That is the whole trick, and it is why the count is true with JS off.
   The counter's scope reaches following siblings of .sr-list, which is where
   .sr-foot sits.
   ========================================================================== */

.sr-foot {
  margin-top: 24px;
}

.sr-foot__count {
  font-weight: 700;
  font-variant-numeric: var(--ed-nums);
}

html:not(.js) .sr-foot__count {
  font-size: 0;
}

html:not(.js) .sr-foot__count::after {
  content: counter(sr-shown);
  font-size: var(--ed-t--1);
}

/* ==========================================================================
   7. EMPTY STATE
   Shown by default; hidden the moment the current filter combination has at
   least one row that satisfies it. Twenty-seven combinations (3 ratings x
   3 review bands x 3 locality states), generated mechanically, listed in
   §7b below. Do not hand-edit one of them: regenerate the block.
   ========================================================================== */

.sr-empty {
  margin-top: 24px;
}

/* §7b — GENERATED. 3 x 3 x 3 = 27 rules. */
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-15:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item]) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-15:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"]) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-15:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"]) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-50:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item]:is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-50:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"]:is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-50:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"]:is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-100:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-review-band="100"]) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-100:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"][data-sr-review-band="100"]) .sr-empty,
.sr-layout:has(#sr-rating-45:checked):has(#sr-reviews-100:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"][data-sr-review-band="100"]) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-15:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-15:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-15:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-50:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"]):is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-50:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"]):is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-50:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"]):is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-100:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-review-band="100"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-100:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"][data-sr-review-band="100"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"])) .sr-empty,
.sr-layout:has(#sr-rating-47:checked):has(#sr-reviews-100:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"][data-sr-review-band="100"]:is([data-sr-rating-band="47"],[data-sr-rating-band="49"])) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-15:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-rating-band="49"]) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-15:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"][data-sr-rating-band="49"]) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-15:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"][data-sr-rating-band="49"]) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-50:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-rating-band="49"]:is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-50:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"][data-sr-rating-band="49"]:is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-50:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"][data-sr-rating-band="49"]:is([data-sr-review-band="50"],[data-sr-review-band="100"])) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-100:checked):has(#sr-locality-all:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-rating-band="49"][data-sr-review-band="100"]) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-100:checked):has(#sr-locality-north-county:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="north-county"][data-sr-rating-band="49"][data-sr-review-band="100"]) .sr-empty,
.sr-layout:has(#sr-rating-49:checked):has(#sr-reviews-100:checked):has(#sr-locality-san-diego:checked) .sr-results:has(.sr-list > [data-sr-item][data-sr-locality="san-diego"][data-sr-rating-band="49"][data-sr-review-band="100"]) .sr-empty {
  display: none;
}

/* ==========================================================================
   8. THE MAP PANEL
   ========================================================================== */

.cm {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: var(--ed-paper);
  border: 1px solid var(--ed-hairline);
  border-radius: var(--ed-radius-md);
}

/* Capped and centred so the iframe remains useful in the sticky map column. */
.cm__frame {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid var(--ed-hairline);
  border-radius: var(--ed-radius-sm);
  overflow: hidden;
}

.cm__caption {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.cm__count {
  margin: 0;
  color: var(--ed-ink);
  font-size: var(--ed-t--1);
  font-weight: 600;
  font-variant-numeric: var(--ed-nums);
  line-height: var(--ed-lh-snug);
}

.cm__note {
  margin: 0;
  max-width: var(--ed-measure-micro);
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--2);
  line-height: var(--ed-lh-snug);
  text-wrap: pretty;
}

/* Direct fragment links still identify a result row. */
.bc:target {
  border-color: var(--ed-ink);
  box-shadow: inset 4px 0 0 0 var(--ed-accent);
}

.sr-list > [data-sr-item] {
  scroll-margin-top: 72px;
}

/* ==========================================================================
   10. REDUCED MOTION
   Nothing here is carried by motion in the first place.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sr-list > [data-sr-item] {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   11. PRINT
   A homeowner printing the page to take to a quote should get the list, not
   the furniture.
   ========================================================================== */

@media print {
  .sr-rail,
  .sr-applied {
    display: none;
  }

  .sr-layout {
    display: block;
  }
}

/* ==========================================================================
   12. GUIDE MARKETPLACE LOCK

   The guide is a search utility, not an editorial feature. These rules are
   deliberately last: directory.css owns the shared chrome, editorial.css owns
   the reusable data components, and this page-level skin removes the warm
   paper, serif display type and nested panels only inside .dg-guide.
   ========================================================================== */

.dg-guide {
  --ed-font-editorial: var(--dir-sans);
  --ed-font-interface: var(--dir-sans);
  --ed-ink: var(--dir-ink);
  --ed-ink-soft: var(--dir-muted);
  --ed-paper: var(--dir-white);
  --ed-ground: var(--dir-white);
  --ed-band: var(--dir-neutral);
  --ed-hairline: var(--dir-line);
  --ed-rule-color: var(--dir-line-strong);
  --ed-edge: var(--dir-line-strong);
  --ed-accent: var(--dir-teal);
  --ed-warm: var(--dir-neutral);
  --ed-alert: var(--dir-coral-hover);
  --ed-radius-sm: 8px;
  --ed-radius-md: 8px;
  --ed-lift: none;
  min-width: 320px;
  color: var(--dir-ink);
  background: var(--dir-white);
  font-family: var(--dir-sans);
}

.dg-guide .ed-display,
.dg-guide .ed-h1,
.dg-guide .ed-h2,
.dg-guide .ed-h3,
.dg-guide .ed-h4,
.dg-guide .sr-rail__heading,
.dg-guide .bc__name {
  font-family: var(--dir-sans);
}

/* Compact shared masthead and persistent what/where search. */
.dg-guide .dir-header__top {
  min-height: 58px;
}

.dg-guide .dir-searchbar {
  background: var(--dir-white);
}

.dg-guide .dir-search {
  gap: 8px;
  padding-block: 8px;
}

.dg-guide .dir-search__field {
  border-color: var(--dir-line-strong);
  border-radius: 8px;
}

.dg-guide .dir-search__submit {
  min-height: 54px;
  border-color: var(--dir-coral-hover);
  border-radius: 8px;
  color: var(--dir-white);
  background: var(--dir-coral-hover);
}

.dg-guide .dir-search__submit:hover {
  border-color: var(--dir-coral-hover);
  background: var(--dir-coral-hover);
}

.dg-guide .dg-masthead {
  padding-block: 14px 16px;
  border-bottom: 1px solid var(--dir-line);
  background: var(--dir-white);
}

.dg-guide .dg-crumbs {
  min-height: 30px;
  margin-bottom: 4px;
  font-size: 12px;
}

.dg-guide .dg-crumbs a {
  min-height: 30px;
}

.dg-guide .dg-masthead__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px 32px;
}

.dg-guide .dg-masthead .ed-eyebrow {
  margin-bottom: 3px;
  color: var(--dir-teal-hover);
  font-size: 12px;
}

.dg-guide .dg-masthead .ed-h1 {
  color: var(--dir-ink);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
}

.dg-guide .dg-masthead .ed-deck {
  max-width: 68ch;
  margin-top: 5px;
  color: var(--dir-muted);
  font-size: 14px;
  line-height: 1.4;
}

.dg-guide .dg-masthead__meta {
  display: none;
}

.dg-guide .dg-masthead__count {
  color: var(--dir-ink);
  font-size: 24px;
  line-height: 1;
}

/* 220 / flexible >=620 / 360 at a 1280px shell. The map waits until the
   viewport can support all three rather than crushing the result column. */
.dg-guide .sr-shell {
  --ed-shell: 1280px;
}

.dg-guide .sr-layout {
  --sr-rail-w: 220px;
  --sr-map-w: 360px;
  --sr-gap: 20px;
  gap: var(--sr-gap);
  padding-block: 16px 40px;
}

@media (min-width: 900px) {
  .dg-guide .sr-layout {
    grid-template-columns: var(--sr-rail-w) minmax(0, 1fr);
  }

  .dg-guide .sr-map {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (min-width: 1320px) {
  .dg-guide .sr-layout {
    grid-template-columns: var(--sr-rail-w) minmax(0, 1fr) var(--sr-map-w);
  }

  .dg-guide .sr-map {
    grid-column: auto;
    position: sticky;
    top: var(--sr-sticky-top);
  }
}

/* Quiet filter furniture. The controls remain native and every existing
   :checked/data attribute rule above remains the filtering engine. */
.dg-guide .sr-rail {
  padding: 0;
  border-color: var(--dir-line);
  border-radius: 8px;
  background: var(--dir-white);
}

.dg-guide .sr-rail__bar {
  padding: 12px;
}

.dg-guide .sr-rail__heading {
  color: var(--dir-ink);
  font-size: 16px;
}

.dg-guide .sr-rail__body {
  padding: 0 12px 12px;
}

.dg-guide .sr-group {
  padding-top: 12px;
  border-color: var(--dir-line);
  gap: 6px;
}

.dg-guide .sr-group__legend,
.dg-guide .bc__term {
  color: var(--dir-muted);
  letter-spacing: .045em;
}

.dg-guide .sr-opt {
  border-radius: 8px;
}

.dg-guide .sr-opt:hover {
  background: var(--dir-neutral);
}

.dg-guide .sr-opt:has(.sr-opt__input:checked) {
  background: var(--foam-100);
}

.dg-guide .sr-opt__input {
  accent-color: var(--dir-teal);
}

/* The results start immediately. Empty advertising remains labelled in the
   source for the generator audit, but absence gets no visible panel. */
.dg-guide .dg-sponsored--none {
  display: none;
}

.dg-guide .sr-results__head {
  margin: 0;
  padding-bottom: 9px;
  border-color: var(--dir-line);
}

.dg-guide .sr-results__headings h2 {
  color: var(--dir-ink);
  font-family: var(--dir-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.dg-guide .sr-results__meta {
  margin-top: 2px;
  color: var(--dir-muted);
  font-size: 12px;
}

.dg-guide .sr-count {
  color: var(--dir-muted);
  font-size: 12px;
}

.dg-guide .sr-count__value {
  color: var(--dir-ink);
  font-size: 14px;
}

.dg-guide .sr-applied {
  margin-top: 8px;
}

.dg-guide .sr-chip {
  min-height: 36px;
  padding: 5px 10px;
  border-color: var(--dir-line);
  border-radius: 8px;
  color: var(--dir-ink);
  background: var(--dir-white);
}

.dg-guide .sr-list {
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid var(--dir-line);
}

/* Marketplace rows: business facts and direct actions, separated by rules. */
.dg-guide .bc {
  --bc-pad: 16px;
  display: grid;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--dir-line);
  border-radius: 0;
  color: var(--dir-ink);
  background: var(--dir-white);
  box-shadow: none;
  transform: none;
}

.dg-guide .bc:hover,
.dg-guide .bc:focus-within {
  border-color: var(--dir-line-strong);
  box-shadow: none;
  transform: none;
}

.dg-guide .bc.is-active,
.dg-guide .bc:target {
  border-color: var(--dir-teal);
  box-shadow: inset 3px 0 0 var(--dir-teal);
}

/* --- whole-row target ----------------------------------------------------
   The name link was a 306x21px hit area on a 985x214px row: the primary
   action was the smallest target on the card. The name's ::after is stretched
   over the whole row so anywhere that is not another control opens the
   profile. No extra markup and one link per row, so the accessibility tree
   and the tab order are unchanged. */
.dg-guide .bc {
  cursor: pointer;
}

/* The anchor must stay unpositioned, or its ::after resolves against the
   306x21px link box instead of the card and the overlay never stretches. */
.dg-guide .bc__name a {
  position: static;
}

.dg-guide .bc__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Real controls sit above the overlay and keep their own cursor. */
.dg-guide .bc__actions,
.dg-guide a.bc__reviews,
.dg-guide .bc__badge a,
.dg-guide .bc__advisory a,
.dg-guide .bc__manage a {
  position: relative;
  z-index: 2;
}

.dg-guide .bc__actions {
  cursor: auto;
}

.dg-guide .bc__body {
  gap: 12px;
  padding: 16px;
}

.dg-guide .bc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 20px;
}

/* The name is the row. It carries the click target and it outranks every other
   element on the card by size — the rating cannot compete with it, because a
   rating that reads 4.7+ on 94.7% of listings cannot tell two rows apart. */
.dg-guide .bc__name {
  color: var(--dir-ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: pretty;
}

/* Fixed steps, not fluid type: a vw-based clamp computed to 20.48px on this
   card and it repeats 50 times per page. Whole pixels render cleaner, and it
   is what Yelp does. */
@media (min-width: 1180px) {
  .dg-guide .bc__name {
    font-size: 24px;
  }
}

.dg-guide .bc__name a:hover {
  color: var(--dir-teal-hover);
  text-decoration-color: var(--dir-teal);
}

.dg-guide .bc__locality {
  gap: 4px 8px;
  margin-top: 4px;
  color: var(--dir-teal-hover);
  font-size: 14px;
}

.dg-guide .bc__scope {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--dir-teal-hover);
  background: transparent;
  font-size: 12px;
  letter-spacing: 0;
}

.dg-guide .bc__place {
  color: var(--dir-muted);
}

.dg-guide .bc__reputation {
  flex: 0 0 auto;
  display: flex;
  max-width: 230px;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--dir-muted);
  background: transparent;
  text-align: right;
}

.dg-guide .bc__rating {
  gap: 4px;
}

.dg-guide .bc__rating::before {
  content: "\2605";
  color: var(--dir-coral);
  font-size: 14px;
  line-height: 1;
}

/* Demoted from 18px, where it tied the business name for visual rank. */
.dg-guide .bc__rating-value {
  color: var(--dir-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.dg-guide .bc__rating-max,
.dg-guide .bc__reviews,
.dg-guide .bc__captured {
  color: var(--dir-muted);
  font-size: 12px;
  font-weight: 500;
}

.dg-guide a.bc__reviews {
  text-decoration-color: var(--dir-line-strong);
  text-underline-offset: 2px;
}

.dg-guide a.bc__reviews:hover {
  color: var(--dir-teal-hover);
  text-decoration-color: var(--dir-teal);
}

.dg-guide .bc__rating-max,
.dg-guide .bc__captured {
  display: none;
}

.dg-guide .bc__badges {
  gap: 4px 12px;
}

.dg-guide .bc__badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--dir-muted);
  background: transparent;
  font-size: 12px;
}

.dg-guide .bc__badge + .bc__badge::before {
  content: "\00b7";
  margin-right: 12px;
  color: var(--dir-line-strong);
}

.dg-guide .bc__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  padding-top: 12px;
  border-top: 1px solid var(--dir-line);
}

.dg-guide .bc__fact,
.dg-guide .bc__fact--blank {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Raised off a 10px floor — below 12px this read as an admin table, not a
   marketplace listing. */
.dg-guide .bc__term {
  margin-bottom: 4px;
  font-size: 12px;
}

.dg-guide .bc__value,
.dg-guide .bc__blank {
  color: var(--dir-ink);
  font-size: 14px;
  line-height: 1.35;
}

.dg-guide .bc__why {
  display: none;
}

.dg-guide .bc__why-term {
  color: var(--dir-ink);
}

.dg-guide .bc__advisory {
  color: var(--dir-muted);
  font-size: 12px;
}

.dg-guide .bc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--dir-line);
  background: var(--dir-white);
}

.dg-guide .bc__action {
  min-height: 44px;
  flex: 0 1 auto;
  padding: 8px 12px;
  border: 1px solid var(--dir-line-strong);
  border-radius: var(--dir-radius-control);
  color: var(--dir-ink);
  background: var(--dir-white);
  font-size: 14px;
}

.dg-guide a.bc__action:hover {
  border-color: var(--dir-teal);
  color: var(--dir-teal-hover);
  background: var(--dir-white);
}

.dg-guide .bc__action--call {
  min-width: 112px;
  border-color: var(--dir-coral-hover);
  color: var(--dir-white);
  background: var(--dir-coral-hover);
}

.dg-guide a.bc__action--call:hover {
  border-color: var(--dir-coral-hover);
  color: var(--dir-white);
  background: var(--dir-coral-hover);
}

.dg-guide .bc__action-detail {
  font-size: 12px;
}

.dg-guide .bc__action:not(.bc__action--call) .bc__action-detail {
  display: none;
}

.dg-guide .bc__actions > :last-child {
  border-color: transparent;
  color: var(--dir-teal-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dg-guide .bc__actions > :last-child:hover {
  border-color: transparent;
}

.dg-guide .bc__action--absent {
  border-style: dashed;
  color: var(--dir-muted);
  background: var(--dir-white);
}

.dg-guide .sr-foot {
  margin-top: 16px;
}

.dg-guide .sr-foot__source {
  display: none;
}

.dg-guide .dg-disclosure {
  max-width: none;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--dir-line);
  color: var(--dir-muted);
  background: transparent;
  font-size: 12px;
  line-height: 1.45;
}

.dg-guide .dg-disclosure a {
  color: var(--dir-teal-hover);
}

/* The Google map uses the same white marketplace surface as the result list. */
.dg-guide .cm {
  padding: 10px;
  border-color: var(--dir-line);
  border-radius: 8px;
  background: var(--dir-white);
}

.dg-guide .cm__frame {
  height: 420px;
  max-width: 100%;
  border-color: var(--dir-line);
  border-radius: 8px;
}

.dg-guide .cm__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.dg-guide .cm__open {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  color: var(--dir-teal-hover);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.dg-guide .cm__open:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dg-map-mobilebar,
.dg-mobile-tools {
  display: none;
}

/* Result-first mobile order. Filter/sort stays CSS-native; Map opens as a
   same-page target overlay and closes by returning to the results heading. */
@media (max-width: 899px) {
  .dg-guide .dir-nav a {
    display: none;
  }

  .dg-guide .dir-nav a[href="/tools/"] {
    display: inline-flex;
  }

  .dg-guide .dir-nav a.dir-nav__business {
    display: none;
  }

  .dg-guide .dir-search {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px;
    gap: 6px;
  }

  .dg-guide .dir-search__submit {
    grid-column: auto;
    min-width: 0;
    width: auto;
    padding-inline: 8px;
    font-size: 14px;
  }

  .dg-guide .dg-masthead {
    padding-block: 10px 12px;
  }

  .dg-guide .dg-crumbs {
    margin-bottom: 2px;
  }

  .dg-guide .dg-masthead__head {
    display: block;
  }

  .dg-guide .dg-masthead .ed-eyebrow {
    margin-bottom: 2px;
    font-size: 12px;
  }

  .dg-guide .dg-masthead .ed-h1 {
    font-size: 24px;
  }

  .dg-guide .dg-masthead .ed-deck {
    max-width: none;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .dg-guide .dg-masthead__meta {
    display: none;
  }

  .dg-guide .sr-layout {
    gap: 10px;
    padding-block: 10px 30px;
  }

  .dg-guide .sr-rail {
    order: 1;
    height: 0;
    overflow: hidden;
    border: 0;
  }

  .dg-guide .sr-rail__bar {
    display: none;
  }

  .dg-guide .sr-layout:has(#sr-rail-open:checked) .sr-rail {
    height: auto;
    overflow: visible;
    border: 1px solid var(--dir-line);
  }

  .dg-guide .sr-layout:has(#sr-rail-open:checked) .sr-rail__body {
    display: grid;
    padding: 12px;
  }

  .dg-guide .sr-results {
    order: 2;
  }

  .dg-guide .sr-map {
    display: none;
    order: 3;
  }

  .dg-guide .dg-mobile-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 9px;
  }

  .dg-guide .dg-mobile-tools__button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--dir-line-strong);
    border-radius: 8px;
    color: var(--dir-ink);
    background: var(--dir-white);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }

  .dg-guide .dg-mobile-tools__filter-hide {
    display: none;
  }

  .dg-guide .sr-layout:has(#sr-rail-open:checked) .dg-mobile-tools__filter-show {
    display: none;
  }

  .dg-guide .sr-layout:has(#sr-rail-open:checked) .dg-mobile-tools__filter-hide {
    display: inline;
  }

  .dg-guide .sr-layout:has(#sr-rail-open:focus-visible) .dg-mobile-tools__filter {
    outline: 3px solid var(--pacific-900);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--aqua-400);
  }

  .dg-guide .sr-map:target,
  .dg-guide .sr-map.is-dialog-open {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: block;
    overflow-y: auto;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(12px, env(safe-area-inset-bottom));
    background: var(--dir-white);
  }

  .dg-guide.sr-map-open {
    overflow: hidden;
  }

  .dg-guide .dg-map-mobilebar {
    display: flex;
    width: min(100%, 620px);
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto 10px;
    color: var(--dir-ink);
  }

  .dg-guide .dg-map-mobilebar a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--dir-teal-hover);
    font-weight: 700;
  }

  .dg-guide .sr-map:target .cm,
  .dg-guide .sr-map.is-dialog-open .cm {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .dg-guide .cm__frame {
    height: min(64vh, 480px);
    min-height: 320px;
  }

  .dg-guide .sr-results__meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
  }

  .dg-guide .sr-results__head {
    align-items: center;
  }

  .dg-guide .sr-results__headings h2 {
    font-size: 20px;
  }

  .dg-guide .bc__body {
    padding: 13px 14px 9px;
  }

  .dg-guide .bc__head {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .dg-guide .bc__name {
    font-size: 16px;
  }

  .dg-guide .bc__reputation {
    max-width: none;
    justify-content: flex-start;
    text-align: left;
  }

  .dg-guide .bc__facts {
    gap: 8px 12px;
  }

  .dg-guide .bc__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 9px 14px 11px;
  }

  .dg-guide .bc__action--call {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dg-guide .bc__action {
    padding-inline: 8px;
  }
}

@media (max-width: 420px) {
  .dg-guide .dir-brand__copy {
    font-size: 14px;
  }

  .dg-guide .dir-search {
    width: min(calc(100% - 16px), 1180px);
  }

  .dg-guide .dir-search__field {
    padding-inline: 8px;
  }

  .dg-guide .dir-search__field select {
    font-size: 14px;
  }

  .dg-guide .bc__facts {
    grid-template-columns: minmax(88px, .55fr) minmax(0, 1.45fr);
  }

}

/* ==========================================================================
   13. FINAL MARKETPLACE COMPOSITION

   One shared hierarchy across every guide: compact filters, a generous
   business-results column, and a real Google map. Ratings remain supporting
   evidence; business identity, useful record signals, and direct actions lead.
   ========================================================================== */

.dg-guide .dg-masthead {
  padding-block: 18px 22px;
}

.dg-guide .dg-masthead .ed-h1 {
  font-size: clamp(30px, 3vw, 38px);
  letter-spacing: -.035em;
}

.dg-guide .dg-masthead .ed-deck {
  max-width: 70ch;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.dg-guide .sr-list {
  gap: 14px;
  margin-top: 14px;
  border-top: 0;
}

.dg-guide .bc {
  overflow: hidden;
  border: 1px solid var(--dir-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 36, 52, .04);
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.dg-guide .bc:hover,
.dg-guide .bc:focus-within {
  border-color: rgba(22, 50, 79, .42);
  box-shadow: 0 10px 26px rgba(20, 36, 52, .09);
}

.dg-guide .bc__head {
  grid-template-columns: 1fr;
  gap: 8px;
}

.dg-guide .bc__name {
  font-size: 21px;
}

.dg-guide .bc__reputation {
  max-width: none;
  justify-content: flex-start;
  text-align: left;
}

.dg-guide .bc__badges {
  gap: 8px;
}

.dg-guide .bc__badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #c9e3e7;
  border-radius: 999px;
  color: var(--dir-navy);
  background: #eef8f9;
  font-weight: 700;
}

.dg-guide .bc__badge + .bc__badge::before {
  content: none;
}

.dg-guide .bc__actions {
  gap: 9px;
}

.dg-guide .dg-tool-strip {
  display: flex;
  min-height: 52px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid #c9e3e7;
  border-radius: 10px;
  background: #f3fafb;
  font-size: 13px;
}

.dg-guide .dg-tool-strip > span {
  color: var(--dir-navy);
  font-weight: 800;
}

.dg-guide .dg-tool-strip a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  color: var(--dir-teal-hover);
  font-weight: 700;
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .dg-guide .sr-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
    gap: 22px;
  }

  .dg-guide .sr-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    overflow: visible;
  }

  .dg-guide .sr-results {
    grid-column: 1;
  }

  .dg-guide .sr-map {
    position: sticky;
    top: var(--sr-sticky-top);
    grid-column: 2;
  }

  .dg-guide .sr-rail__disclose {
    display: inline-flex;
  }

  .dg-guide .sr-rail__body,
  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__body {
    display: none;
  }

  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__body {
    grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0 12px 12px;
  }

  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-group {
    align-content: start;
    padding: 4px 14px 0;
    border-top: 0;
    border-left: 1px solid var(--dir-line);
  }

  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-group:first-of-type {
    padding-left: 0;
    border-left: 0;
  }

  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__foot,
  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__nojs {
    grid-column: 1 / -1;
  }

  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__foot {
    grid-template-columns: auto auto;
    justify-content: start;
    margin-top: 12px;
  }

  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__submit,
  .dg-guide .sr-rail:has(.sr-rail__switch:checked) .sr-rail__clear {
    width: auto;
  }

  .dg-guide .cm__frame {
    height: 560px;
  }
}

@media (max-width: 899px) {
  .dg-guide .dg-masthead {
    padding-block: 12px 15px;
  }

  .dg-guide .dg-masthead .ed-h1 {
    font-size: 27px;
  }

  .dg-guide .dg-masthead .ed-deck {
    margin-top: 6px;
    font-size: 13px;
  }

  .dg-guide .bc__name {
    font-size: 19px;
  }

  .dg-guide .dg-tool-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .dg-guide .dg-tool-strip > span {
    grid-column: 1 / -1;
    padding: 10px 12px 5px;
  }

  .dg-guide .dg-tool-strip a {
    min-height: 48px;
    padding: 8px 10px;
    border-top: 1px solid #d8eaed;
    font-size: 12px;
    line-height: 1.25;
    text-decoration: none;
  }
}

@media (max-width: 520px) {
  .dg-guide .dg-tool-strip {
    grid-template-columns: 1fr;
  }

  .dg-guide .dg-tool-strip > span {
    grid-column: 1;
  }

  .dg-guide .dg-tool-strip a + a {
    border-top: 1px solid #d8eaed;
  }
}