/* refinements-v7: overhaul 2026-08 - review page, category page, header nav, footer, search */

/* ---- Review page: identity + verdict + hero CTA ---- */
.review-identity-copy { display: flex; flex-direction: column; gap: 6px; }
.review-identity-copy h1 { margin: 0; letter-spacing: -0.02em; }
.review-verdict { margin: 0; max-width: 640px; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }
.review-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-top: 14px; }
.affiliate-disclosure { display: block; max-width: 260px; text-align: right; color: #8d8189; font-size: 0.72rem; line-height: 1.35; }

/* ---- Quick Facts panel ---- */
.review-detail-panel h2 { font-size: 0.95rem; }
.review-quick-facts div { align-items: baseline; }
.review-quick-facts dd a { color: var(--link); }
/* Access values ("Free entry with paid features or content") must read in
   full — no ellipsis truncation. Values wrap onto up to two lines. */
.review-quick-facts dd {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ---- Review body sections ---- */
.review-overview-card h2 { margin-top: 26px; }
.review-overview-card h2:first-child { margin-top: 0; }
.review-extra-cats, .review-alternatives { margin-top: 28px; padding-top: 20px; border-top: 1px solid #eadfe2; }
.review-cat-links, .review-alt-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.review-cat-links li a {
  display: inline-block; padding: 5px 12px; border: 1px solid #e3d3d8; border-radius: 999px;
  background: #faf5f6; color: var(--accent-dark); font-size: 0.86rem;
}
.review-alt-list { flex-direction: column; gap: 7px; }
.review-alt-list li { font-size: 0.95rem; }
.review-alt-list li span { color: var(--muted); font-size: 0.85rem; }
.reviews-hub-link { display: inline-block; margin-top: 16px; font-size: 0.9rem; }
.review-final-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 30px; padding: 18px 20px; border-radius: 12px; background: #f7eef1;
}
.review-final-cta .affiliate-disclosure { max-width: none; text-align: left; }

/* ---- Category page stats + rank note ---- */
.category-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; color: var(--muted); font-size: 0.88rem; }
.category-stats strong { color: var(--ink); }
.how-we-rank-note {
  margin: 22px 0; padding: 14px 18px; border: 1px solid #eee2e6; border-left: 3px solid #b8919c;
  border-radius: 10px; background: #fbf7f8;
}
.how-we-rank-note h2 { margin: 0 0 6px; font-size: 0.98rem; }
.how-we-rank-note p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* ---- Reviews hub ---- */
.reviews-hub-search { display: flex; gap: 8px; margin-top: 16px; max-width: 460px; }
.reviews-hub-search input {
  flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid #ddc9d0; border-radius: 9px; font-size: 0.94rem;
}
.reviews-hub-search button { padding: 9px 15px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; cursor: pointer; }
.review-directory-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.review-directory-meta a { color: var(--link); font-size: 0.84rem; }
.review-directory-meta span { color: var(--muted); font-size: 0.84rem; }

/* ---- Search results (JS-rendered) ---- */
.search-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.search-result-actions .button { padding: 7px 14px; font-size: 0.85rem; }

/* ---- Header balance (2026-08-27): logo left, nav visually centred, compact
   search right. 3-track grid so the nav centroid sits near header centre even
   though the search column is wider than the brand. */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.brand { justify-self: start; }
.header-nav { justify-self: center; }
.header-search { justify-self: end; margin-left: 0; width: min(400px, 30vw); }
.header-nav { display: flex; align-items: center; gap: 4px; }
.header-nav > a {
  padding: 7px 11px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font-size: 0.92rem; font-weight: 550; text-decoration: none; cursor: pointer;
}
.header-nav > a:hover { background: #f4eaed; }

/* ---- Site card favicon / logo sprite ---- */
.site-card-favicon { flex: none; width: 20px; height: 20px; border-radius: 5px; object-fit: contain; background: #fff; }
.logo-cell .site-card-favicon { width: 100%; height: 100%; }
.logo-sprite {
  display: inline-block;
  flex: none;
  border-radius: 5px;
}
span.logo-sprite.site-logo { border-radius: 10px; }
.site-logo { object-fit: contain; background: #fff; border: 1px solid #f0e4e8; border-radius: 10px; }

/* ---- Reviews hub: row logos + clamped excerpts ---- */
.review-hub-logo {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #f0e4e8;
  border-radius: 5px;
}
span.logo-sprite.review-hub-logo { border: 0; }
.review-directory-content > p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 700px) {
  .review-directory-content > p { -webkit-line-clamp: 2; }
}

/* ---- Review sidebar order: ad above info panel on mobile stacking ---- */
.also-listed-links { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.also-listed-links a { color: var(--link); }
.also-listed-links a:hover { color: var(--accent-dark); }

/* Review identity icon (item: review-favicon) -- one uniform framed tile.
   Both sprite and <img> share .review-favicon; box-sizing border-box with
   fixed flex-basis stops the "shrunk / flex-compressed" icon problem. */
.review-simple-identity .review-identity { gap: 16px; }
.review-simple-identity .review-favicon {
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 16px;
}
/* Sprite sits in the 48px content area left after 10px padding.
   !important beats the inline --logo-size:66px on the element. */
span.logo-sprite.review-favicon {
  --logo-size: 48px !important;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box;
}
/* Letter fallback -- only visible when the real favicon fails to load. */
.review-simple-identity .review-identity .logo-fallback {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  padding: 0;
  border-radius: 16px;
  font-size: 1.4rem;
}
@media (max-width: 640px) {
  .review-simple-identity .review-favicon { width: 56px !important; height: 56px !important; flex: 0 0 56px; padding: 8px; }
  span.logo-sprite.review-favicon { --logo-size: 40px !important; }
  .review-simple-identity .review-identity .logo-fallback { width: 56px; height: 56px; flex: 0 0 56px; }
}

/* ---- 404 ---- */
.not-found-search { display: flex; gap: 8px; max-width: 420px; margin: 22px auto 6px; }
.not-found-search input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #ddc9d0; border-radius: 9px; }
.not-found-search button { padding: 10px 16px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; cursor: pointer; }
.not-found-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/* ---- How-we-rank factors ---- */
.rank-factors div { margin-bottom: 14px; }
.rank-factors dt { font-weight: 650; }
.rank-factors dd { margin: 3px 0 0; color: var(--muted); line-height: 1.55; }
.rank-type-block { margin-top: 16px; }
.rank-type-block h3 { margin: 0 0 6px; font-size: 1rem; }
.rank-type-block ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.6; }

/* ---- Interior body copy: widen + center the reading column (item 8) ---- */
.prose-card { margin-inline: auto; }
.prose-card.prose-card-wide { max-width: 840px; }

/* ---- About "Go deeper" links ---- */
.about-detail-links { margin: 0; padding: 0; list-style: none; }
.about-detail-links li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.about-detail-links li:last-child { border-bottom: 0; padding-bottom: 0; }
.about-detail-links a { color: var(--ink); font-weight: 650; text-decoration: none; }
.about-detail-links a:hover { color: var(--accent-dark); }
.about-detail-links p { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }

/* ---- Reviews index polish (item 13) ---- */
.review-directory-item { border-bottom: 1px solid var(--line-strong); }
@media (min-width: 701px) {
  .review-directory-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
}
.review-directory-title h2 { font-size: 1.14rem; font-weight: 650; }
.review-hub-logo { width: 22px; height: 22px; border-radius: 5px; }
.review-directory-cat a {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #cfa9b3;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  text-decoration: none;
}
.review-directory-cat a:hover { background: #efd9e0; border-color: #bf96a2; }
.review-directory-meta { flex-wrap: wrap; gap: 8px; }
.review-directory-meta span {
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 0.72rem;
}
.review-directory-actions .button { min-height: 40px; }
.review-directory-actions .button-outline { border-color: var(--line-strong); }
@media (max-width: 700px) {
  .review-directory-title { gap: 8px; }
}

/* ---- Mobile ---- */
@media (max-width: 1020px) {
  .header-inner { display: flex; flex-wrap: wrap; gap: 10px 18px; }
  .header-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 700px) {
  .review-simple-identity { flex-direction: column; align-items: flex-start; }
  .review-hero-actions { align-items: flex-start; }
  .affiliate-disclosure { text-align: left; }
  .review-primary-layout { grid-template-columns: 1fr; }
  .reviews-toolbar { flex-direction: column; gap: 8px; }
  .review-directory-item { grid-template-columns: auto 1fr; }
  .review-directory-actions { grid-column: 1 / -1; flex-direction: row; }
  .category-stats { gap: 4px 12px; }
}
@media (max-width: 430px) {
  .header-nav > a { padding: 7px 8px; font-size: 0.86rem; }
  .not-found-links { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .review-final-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ============================================================
   Full-site overhaul 2026-08: interior width, site-card actions,
   "You may also like", CTA notes, related cards
   ============================================================ */

/* ---- Interior page width (item 6): header + prose card align to the shell ---- */
.page-header,
.page-header-narrow,
.prose-card,
.prose-card.prose-card-wide {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.prose-card,
.prose-card.prose-card-wide { margin-inline: 0; }
/* comfortable reading measure inside the full-width card */
.prose-card p,
.prose-card li,
.prose-card dd { max-width: 74ch; }
.prose-card h2,
.prose-card h3 { max-width: 42ch; }
.page-prose .page-header p:last-child { max-width: 74ch; }

/* ---- Category page / directory card: internal-first actions (item 9) ---- */
.site-card-body { min-width: 0; }
.site-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.button-small { padding: 7px 14px; font-size: 0.85rem; min-height: 36px; }

/* ---- Review CTA disclosure note (single, unobtrusive) ---- */
.review-cta-note { margin: 11px 0 0; color: #8d8189; font-size: 0.74rem; line-height: 1.45; text-align: center; }

/* ---- "You may also like" visual recommendations (item 3) ---- */
.review-related-section { margin-top: 42px; padding-top: 30px; border-top: 1px solid #eadfe2; }
.review-related-section > h2 { margin: 0 0 20px; color: var(--ink); font-size: 1.5rem; font-weight: 720; letter-spacing: -0.03em; }
.review-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.review-related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(60, 44, 51, 0.06);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.review-related-card:hover { border-color: #cfa9b3; box-shadow: 0 10px 24px rgba(60, 44, 51, 0.13); transform: translateY(-2px); }
.review-related-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0e8e5;
  border-radius: 9px;
}
.review-related-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-related-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #a08e95;
  font-size: 1.9rem;
  font-weight: 700;
}
.review-related-name { color: var(--ink); font-size: 0.98rem; font-weight: 680; line-height: 1.25; }
.review-related-meta { color: var(--muted); font-size: 0.79rem; }

@media (max-width: 900px) {
  .review-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .review-related-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   2026-08-26 final overhaul:
   - unified breadcrumb separator spacing (whole site)
   - reviews hub header layout (grid) + listing card logos + badges
   - review main screenshot restored as a real <img>
   - unified interior content width + remove over-narrow prose inner widths
   - home/category access badge
   ============================================================ */

/* ---- Breadcrumb: "/" separated identically on both sides, whole site ----
   The base layers set an 8px gap INSIDE each li but gap:0 on the <ol>, so a
   trailing separator in the previous li collided with the next li
   ("Home /Reviews"). Setting the ol gap makes Home[8]"/"[8]Reviews. */
.breadcrumbs ol { gap: 8px; }
.breadcrumbs li { gap: 8px; }
.breadcrumbs li > span[aria-hidden="true"] { margin-inline: 0; line-height: 1; }

/* ---- Reviews hub header: framed hero band, integrated stat + search ---- */
.reviews-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 40px;
  row-gap: 22px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 26px;
  padding: 30px 34px;
  background: linear-gradient(135deg, #fdf9f7 0%, #f7edee 58%, #f3e3e7 100%);
  border: 1px solid #e4ccd3;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(57, 42, 49, 0.08);
  position: relative;
  overflow: hidden;
}
.reviews-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, #c98a6d 45%, #8d5b74 100%);
}
.reviews-header .eyebrow { margin-bottom: 8px; }
.reviews-header h1 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: -0.038em;
}
.reviews-header-copy { min-width: 0; display: flex; flex-direction: column; }
.reviews-header-copy > p:last-child { max-width: 62ch; margin: 0; color: #67565e; font-size: 1rem; line-height: 1.6; }
/* Stat block: bordered medallion, visually anchored but not floating */
.reviews-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 128px;
  padding: 18px 26px;
  background: #ffffff;
  border: 1px solid #e4ccd3;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(57, 42, 49, 0.07);
  text-align: center;
}
.reviews-total strong {
  color: var(--accent-dark);
  font-size: 2rem;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.reviews-total span { margin-top: 4px; color: #8d7b82; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
/* Search spans both columns on its own row inside the band */
.reviews-hub-search {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 0;
  max-width: none;
  width: 100%;
}
.reviews-hub-search input {
  flex: 1; min-width: 0; padding: 13px 18px;
  border: 1px solid #dcc3ca; border-radius: 12px;
  font-size: 0.98rem; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.reviews-hub-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(157, 63, 89, 0.12); }
.reviews-hub-search button {
  padding: 13px 26px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; cursor: pointer;
  font-weight: 660; font-size: 0.95rem;
  transition: background .2s ease, transform .15s ease;
}
.reviews-hub-search button:hover { background: var(--accent-dark); transform: translateY(-1px); }
@media (max-width: 640px) {
  .reviews-header { grid-template-columns: 1fr; align-items: stretch; column-gap: 0; row-gap: 16px; padding: 22px 18px; }
  .reviews-total { align-items: flex-start; text-align: left; min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; padding: 12px 16px; }
  .reviews-total span { margin-top: 0; }
  .reviews-hub-search { grid-column: 1; flex-direction: column; }
  .reviews-hub-search button { width: 100%; }
}

/* ---- Reviews listing: larger real logos, aligned, small access badge ---- */
.review-directory-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 6px;
  min-width: 0;
}
.review-hub-logo,
span.logo-sprite.review-hub-logo {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 10px;
  --logo-size: 48px;
}
.review-directory-item { align-items: center; }
@media (max-width: 700px) {
  .review-hub-logo,
  span.logo-sprite.review-hub-logo {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    --logo-size: 44px;
  }
}

/* ---- Access badge (Premium / Free / Freemium) on cards ---- */
.access-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  border: 1px solid;
  white-space: nowrap;
}
.access-badge.access-free { color: #47725f; background: #eef5f0; border-color: #bfd9c8; }
.access-badge.access-freemium { color: #5d7a8a; background: #eef3f6; border-color: #bfd0da; }
.access-badge.access-premium { color: #8a5a23; background: #fbf3e6; border-color: #e2c99a; }

/* ---- Review main screenshot: fill the panel, no band, no crop -----------
   The frame keeps its ORIGINAL geometry (top of the left column, 16:9 —
   matching the 1200x675 captures exactly) so nothing bleeds into the next
   section. The img fills 100% of the panel; since capture and panel share
   the same aspect ratio the full screenshot is visible with no letterbox
   band and no cropping. align-self:start stops the v4 grid stretch from
   growing the panel to sidebar height. Click still opens the raw capture
   in the viewer (script lives in sites/[slug].astro). */
.review-screenshot-frame {
  width: 100%;
  margin: 0; /* UA gives <figure> 1em 40px margins — with width:100% the 40px
               margins bleed the box 40px PAST each side of its grid track
               (right side overlapped the sidebar by 18px). */
  align-self: start;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(var(--preview-color), #f4edea);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(60, 44, 51, 0.12);
}
.review-screenshot-frame .review-site-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
}
.review-screenshot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 16 / 9;
  text-align: center;
  color: #5e5057;
}
.review-screenshot-placeholder strong { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.review-screenshot-placeholder span { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }

/* ---- Unified interior content width (all prose/legal/about pages) ---- */
.page-header,
.page-header-narrow,
.prose-card,
.prose-card.prose-card-wide,
.legal-content,
.content-inner,
.article-body {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  box-sizing: border-box;
}
/* Remove the over-narrow inner measures that left a big right-hand blank.
   The container (960px) now controls the measure. */
.prose-card > section,
.prose-card section { width: 100%; }
.prose-card p,
.prose-card li,
.prose-card dd,
.prose-card dt,
.prose-card > section p,
.prose-card > section li,
.prose-card > section dd,
.prose-card h2,
.prose-card h3,
.prose-card > section h2,
.prose-card > section h3 {
  max-width: none !important;
  width: 100%;
}
.page-prose .page-header p:last-child { max-width: none; }

/* ---- Compact row: name + access badge on one line, name truncates ---- */
.site-name-line .site-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.site-name-line .site-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.site-name-line .access-badge { flex: none; }

/* ============================================================
   Category directory page: refined ranked list (editorial feed)
   ============================================================ */
.ranked-list .site-card {
  grid-template-columns: 50px 56px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
  padding: 20px 24px;
  transition: background .15s ease, box-shadow .15s ease;
}
.ranked-list .site-card:hover {
  background: var(--surface-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ranked-list .site-rank {
  padding-top: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #b7a8ad;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Medal accents for the top three placements */
.ranked-list .site-card:nth-child(1) .site-rank { color: #b9871c; }
.ranked-list .site-card:nth-child(2) .site-rank { color: #84909e; }
.ranked-list .site-card:nth-child(3) .site-rank { color: #b1714a; }
.ranked-list .site-logo { width: 56px; height: 56px; border-radius: 12px; }
.ranked-list span.logo-sprite.site-logo { --logo-size: 56px !important; }
.ranked-list .site-card-body .site-name-line { align-items: center; }
.ranked-list .site-direct-link { font-size: 1.13rem; }
.ranked-list .site-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 780px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.5;
}
.ranked-list .site-card-actions { margin-top: 12px; }
@media (max-width: 640px) {
  .ranked-list .site-card { grid-template-columns: 34px 44px minmax(0, 1fr); column-gap: 12px; padding: 15px 14px; }
  .ranked-list .site-logo { width: 44px; height: 44px; }
  .ranked-list span.logo-sprite.site-logo { --logo-size: 44px !important; }
  .ranked-list .site-rank { font-size: 0.9rem; }
}

/* ============================================================
   Category ranked list: actions docked right, larger, balanced
   Row = rank | logo | body | action pair (right, centered).
   ============================================================ */
.category-ranked-list .site-card {
  grid-template-columns: 44px 46px minmax(0, 1fr) auto;
  column-gap: 18px;
  align-items: center;
}
.category-ranked-list .site-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  min-width: 128px;
}
.category-ranked-list .site-card-actions .button {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 680;
  text-align: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .category-ranked-list .site-card { grid-template-columns: 38px 42px minmax(0, 1fr) auto; column-gap: 12px; }
  .category-ranked-list .site-card-actions { min-width: 106px; }
  .category-ranked-list .site-card-actions .button { min-height: 38px; padding: 8px 12px; font-size: 0.88rem; }
}
@media (max-width: 640px) {
  /* Below the balance breakpoint the pair tucks under the body copy,
     full width, where stacked buttons read better on phones. */
  .category-ranked-list .site-card { grid-template-columns: 34px 40px minmax(0, 1fr); }
  .category-ranked-list .site-card-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
  }
  .category-ranked-list .site-card-actions .button { flex: 1; }
}

/* ---- Review page: Quick Facts panel bottoms out with a real CTA ---- */
.review-detail-visit { display: flex; align-items: center; justify-content: center; }

/* ---- About/prose cards: content fills the card width ---- */
/* (supersedes the 74ch measure so headings/paragraphs span the card) */
.prose-card p,
.prose-card li,
.prose-card dd,
.prose-card h2,
.prose-card h3,
.prose-card .about-detail-links {
  max-width: none;
}
.prose-card .about-detail-links li a {
  display: inline-block;
  font-size: 1.06rem;
}

/* ---- Breadcrumb pill: symmetric inner spacing ----
   The li gap put a leading space before every item but nothing after the
   last one, so the pill looked lopsided. Equalize both sides. */
.breadcrumbs ol { padding: 8px 16px; }
.breadcrumbs li { gap: 8px; padding-inline: 0; }
.breadcrumbs li:last-child { padding-right: 0; }

/* ============================================================
   Search page: designed results with screenshot + logo
   ============================================================ */
.search-page .page-header { max-width: 720px; }
.search-status { margin: 26px 0 16px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; }
.search-results { gap: 16px; max-width: none; }
.search-result {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 16px 22px 16px 16px;
  border-radius: 16px;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease, background .22s ease;
}
.search-result:hover {
  border-color: #c9a3ae;
  box-shadow: 0 18px 40px rgba(57, 42, 49, 0.12);
  transform: translateY(-2px);
}
/* Screenshot frame: layered frame + soft depth */
.search-result-visual {
  position: relative;
  display: grid;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e6d7dc;
  background: #fff;
  aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(57, 42, 49, 0.06);
  transition: box-shadow .22s ease;
}
.search-result:hover .search-result-visual {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(57, 42, 49, 0.10);
}
.search-result-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.search-result-shot-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #f3e6eb 0%, #e9d6dd 58%, #e2c9d2 100%);
}
.search-result-shot-empty strong {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 12px rgba(57, 42, 49, 0.10);
  color: #a06e7e;
  font-size: 1.5rem;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.search-result-main { min-width: 0; }
.search-result-titleline {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 7px;
}
.search-result-logo {
  flex: none;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(57, 42, 49, 0.10);
}
.search-result-letter {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #f6edf0, #ecdbe1);
  box-shadow: 0 1px 4px rgba(57, 42, 49, 0.10);
  color: #96707e;
  font-weight: 720;
  font-size: 1.1rem;
}
.search-result-title { margin: 0; font-size: 1.18rem; letter-spacing: -0.014em; }
.search-result-titleline .price-chip { flex: none; }
.search-result-main p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}
.search-result-main small {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f6eef1;
  color: #94757f;
  font-size: 0.78rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 138px;
}
.search-result-actions .button { justify-content: center; text-align: center; }
@media (max-width: 900px) {
  .search-result { grid-template-columns: 168px minmax(0, 1fr); gap: 15px; }
  .search-result-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
  }
  .search-result-actions .button { flex: 1; }
}
@media (max-width: 560px) {
  .search-result { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .search-result-visual { max-height: 180px; }
  .search-result-titleline { flex-wrap: wrap; }
}