/* ============================================================
   Google-like override for SearXNG — v5
   Loaded as a separate custom-override.css via <link> in base.html.
   Volume-mounted at runtime — edit on host, reload to see changes.

   ALIGNMENT MATH (desktop):
     #search_header has padding-left: 20px
     #search_logo   is flex: 0 0 120px
     gap between logo and search_view: 20px
     → search bar left edge = 20 + 120 + 20 = 160px from viewport
     #results has margin-left: 160px  ← exact match
     #categories padding-left: 140px (= 120+20, inside 20px-padded header)
     .search_filters padding-left: 160px
   ============================================================ */

/* ======================  HIDE NOISE  ====================== */
/* NOTE: .result-images is intentionally NOT hidden — Images tab needs it */
.favicon, img.thumbnail, .thumbnail_link, a.thumbnail_link,
.cache_link, .engines, #infoboxes, #suggestions,
#backToTop, #sidebar-end-collapsible, .break {
  display: none !important;
}
button.category_button > svg,
button.category_button .sxng-icon-set-big,
#links_on_top svg { display: none !important; }

/* ======================  OWN COLOR TOKENS  ====================== */
:root {
  --g-bg:            #ffffff;
  --g-surface:       #f8f9fa;
  --g-text:          #202124;
  --g-text-muted:    #5f6368;
  --g-meta:          #70757a;
  --g-border:        #ebebeb;
  --g-border-input:  #dfe1e5;
  --g-link:          #1a0dab;
  --g-link-visited:  #681da8;
  --g-url:           #5f6368;   /* muted gray-green — same on light & dark */
  --g-snippet:       #4d5156;
  --g-snippet-bold:  #202124;
  --g-tab-active:    #1a73e8;
  --g-tab-hover-border: #dadce0;
  --g-search-bg:     #ffffff;
  --g-search-border: #dfe1e5;
  --g-search-text:   #202124;
  --g-search-shadow: 0 1px 6px rgba(32,33,36,.28);
  --g-send-color:    #4285f4;
  --g-send-hover-bg: #e8f0fe;
  --g-footer-bg:     #f2f2f2;
  --g-answer-bg:     #f8f9fa;
  --g-answer-border: #dadce0;
  --g-page-current-border: #dadce0;
  --g-page-current-color:  #202124;
  --g-page-hover-bg: #f8f9fa;
  --g-tools-color:   #70757a;
}

/* Dark mode: OS preference + explicit theme-dark class */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --g-bg:            #202124;
    --g-surface:       #303134;
    --g-text:          #e8eaed;
    --g-text-muted:    #9aa0a6;
    --g-meta:          #9aa0a6;
    --g-border:        #3c4043;
    --g-border-input:  #5f6368;
    --g-link:          #8ab4f8;
    --g-link-visited:  #c58af9;
    --g-url:           #5f6368;   /* same muted gray-green in dark */
    --g-snippet:       #bdc1c6;
    --g-snippet-bold:  #e8eaed;
    --g-tab-active:    #8ab4f8;
    --g-tab-hover-border: #5f6368;
    --g-search-bg:     #303134;
    --g-search-border: #5f6368;
    --g-search-text:   #e8eaed;
    --g-search-shadow: 0 1px 6px rgba(0,0,0,.45);
    --g-send-color:    #8ab4f8;
    --g-send-hover-bg: #3c4043;
    --g-footer-bg:     #171717;
    --g-answer-bg:     #303134;
    --g-answer-border: #5f6368;
    --g-page-current-border: #5f6368;
    --g-page-current-color:  #e8eaed;
    --g-page-hover-bg: #303134;
    --g-tools-color:   #9aa0a6;
  }
}
:root.theme-dark {
  --g-bg:            #202124;
  --g-surface:       #303134;
  --g-text:          #e8eaed;
  --g-text-muted:    #9aa0a6;
  --g-meta:          #9aa0a6;
  --g-border:        #3c4043;
  --g-border-input:  #5f6368;
  --g-link:          #8ab4f8;
  --g-link-visited:  #c58af9;
  --g-url:           #5f6368;
  --g-snippet:       #bdc1c6;
  --g-snippet-bold:  #e8eaed;
  --g-tab-active:    #8ab4f8;
  --g-tab-hover-border: #5f6368;
  --g-search-bg:     #303134;
  --g-search-border: #5f6368;
  --g-search-text:   #e8eaed;
  --g-search-shadow: 0 1px 6px rgba(0,0,0,.45);
  --g-send-color:    #8ab4f8;
  --g-send-hover-bg: #3c4043;
  --g-footer-bg:     #171717;
  --g-answer-bg:     #303134;
  --g-answer-border: #5f6368;
  --g-page-current-border: #5f6368;
  --g-page-current-color:  #e8eaed;
  --g-page-hover-bg: #303134;
  --g-tools-color:   #9aa0a6;
}

/* Bridge to the base theme's own CSS variable names */
:root {
  --color-base-font:                   var(--g-text);
  --color-base-background:             var(--g-bg);
  /* Fix 1a: base CSS sets html{background:var(--color-base-background-mobile)}.
     Without this mapping it resolves to #f2f5f8 (light) / #222428 (dark),
     creating the L-shaped background seam on mobile. */
  --color-base-background-mobile:      var(--g-bg);
  --color-header-background:           var(--g-bg);
  --color-header-border:               var(--g-border);
  --color-footer-background:           var(--g-footer-bg);
  --color-footer-border:               var(--g-border);
  --color-search-background:           var(--g-search-bg);
  --color-search-border:               var(--g-search-border);
  --color-search-font:                 var(--g-search-text);
  --color-search-shadow:               var(--g-search-shadow);
  --color-result-background:           transparent;
  --color-result-border:               transparent;
  --color-result-url-font:             var(--g-url);
  --color-result-link-font:            var(--g-link);
  --color-result-link-font-highlight:  var(--g-link);
  --color-result-link-visited-font:    var(--g-link-visited);
  --color-result-description-highlight-font: var(--g-snippet-bold);
  --color-result-publishdate-font:     var(--g-meta);
  --color-categories-item-selected-font:   var(--g-tab-active);
  --color-categories-item-border-selected: var(--g-tab-active);
  --color-url-font:         var(--g-link);
  --color-url-visited-font: var(--g-link-visited);
  /* Fix 1b: sidebar-background used by .infobox (base CSS). Map to page bg. */
  --color-sidebar-background:          var(--g-bg);
}

/* ======================  BASE  ====================== */
/* Fix 2: Global box-sizing so padding never blows out element widths on mobile */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  margin: 0; padding: 0;
  /* Fix 1c: override base CSS html{background:var(--color-base-background-mobile)}
     which resolved to a different shade than body, producing the L-shaped seam.
     The homepage overrides this further via html:has(body.index_endpoint) below. */
  background: var(--g-bg);
  /* Fix 3: prevent any stray element from widening the document on desktop */
  overflow-x: hidden;
}
body {
  background: var(--g-bg);
  color: var(--g-text);
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 0; padding: 0;
}
/* Match html bg to homepage body so no peek-through on any edge */
html:has(body.index_endpoint) { background: #2e3440; }

a { color: var(--g-link); }
a:visited { color: var(--g-link-visited); }

/* ======================  ABOUT / PREFERENCES LINKS  ====================== */
#links_on_top {
  position: absolute;
  top: 0; right: 16px;
  display: flex; gap: 4px; z-index: 200;
}
#links_on_top a {
  font-size: 13px;
  color: var(--g-text-muted);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 4px;
  line-height: 1;
}
#links_on_top a:hover {
  background: var(--g-surface);
  color: var(--g-text);
}
/* On results page these are accessible via footer — hide from header */
.results_endpoint #links_on_top { display: none !important; }

/* ======================  HOMEPAGE  ====================== */
/* Nord polar-night solid background — no sizing/attachment issues */
body.index_endpoint {
  background: #2e3440 !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  /* Dark search box tokens tuned for Nord #2e3440 */
  --g-search-bg:     rgba(255,255,255,0.06);
  --g-search-border: rgba(255,255,255,0.15);
  --g-search-text:   #e8eaed;
  --g-search-shadow: 0 4px 24px rgba(138,180,248,0.18);
  --g-meta:          #9aa0a6;
  --g-send-color:    #8ab4f8;
  --g-send-hover-bg: rgba(255,255,255,0.1);
  --g-surface:       rgba(255,255,255,0.08);
}

/* About/Preferences on homepage: muted, full-opacity on hover */
.index_endpoint #links_on_top a {
  color: rgba(255,255,255,0.6);
  opacity: 0.4;
  transition: opacity .2s, background .15s;
}
.index_endpoint #links_on_top a:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}

/* Flexbox centering: justify-content:center + padding-bottom:10vh
   shifts the equilibrium point from 50vh up to ~45vh               */
#main_index {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 10vh;
  background: transparent !important;
}

.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 620px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Remove the SearXNG logo/title entirely */
.index .title { display: none !important; }

.index_endpoint #search { width: 100%; }
.index_endpoint #search_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Quote below search bar */
.search-quote {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 12px 0 0;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Homepage search box: wider pill with soft glow on focus */
.index_endpoint .search_box {
  border-radius: 28px;
  max-width: 580px;
  width: 100%;
  padding: 0 14px 0 22px;
}
.index_endpoint .search_box:focus-within {
  box-shadow: 0 4px 20px rgba(138,180,248,0.25), 0 1px 6px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,0.2);
}

/* ======================  SEARCH BOX (both pages)  ====================== */
.search_box {
  position: relative;
  display: flex; align-items: center;
  background: var(--g-search-bg);
  border: 1px solid var(--g-search-border);
  border-radius: 24px;
  padding: 0 12px 0 20px;
  transition: box-shadow .2s, border-color .2s;
  box-sizing: border-box;
}
.search_box:hover, .search_box:focus-within {
  box-shadow: var(--g-search-shadow);
  border-color: transparent;
}
#q {
  flex: 1 1 auto; border: none; outline: none;
  background: transparent;
  font-size: 16px; font-family: arial, sans-serif;
  color: var(--g-search-text);
  padding: 12px 8px 12px 0; min-width: 0;
  caret-color: currentColor;
}
#clear_search {
  flex: 0 0 auto; display: flex; align-items: center;
  background: transparent; border: none; padding: 6px;
  cursor: pointer; color: var(--g-meta); border-radius: 50%;
}
#clear_search:hover { background: var(--g-surface); color: var(--g-search-text); }
#send_search {
  flex: 0 0 auto; display: flex; align-items: center;
  background: transparent; border: none; padding: 6px 8px;
  cursor: pointer; color: var(--g-send-color); border-radius: 50%;
}
#send_search:hover { background: var(--g-send-hover-bg); }

/* ======================  RESULTS PAGE TOP BAR  ====================== */
body.results_endpoint { background: var(--g-bg); }

.results_endpoint #search {
  background: var(--g-bg);
  border-bottom: 1px solid var(--g-border);
  position: sticky; top: 0; z-index: 100; padding: 0;
}

/* Row 1: logo (120px) + gap 20px + search_view → bar starts at 20+120+20=160px */
.results_endpoint #search_header {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px;
  padding: 6px 20px 0;
}

/* Logo: 120px container, icon left-aligned inside */
#search_logo {
  flex: 0 0 120px;
  display: flex; align-items: center;
  text-decoration: none; overflow: hidden;
  padding: 4px 0 8px;
}
#search_logo svg { width: 28px; height: 28px; flex-shrink: 0; }
#search_logo span[hidden] { display: none !important; }

/* Search input: max 620px */
.results_endpoint #search_view {
  flex: 0 1 620px;
  min-width: 200px;
  padding-bottom: 8px;
}

/* Row 2: category tabs — flex row with Tools button at far right.
   padding-left: 140px (= 120 logo + 20 gap) inside 20px-padded header
   → tab content left edge = 20 + 140 = 160px  ✓ */
#categories.search_categories {
  flex-basis: 100%; width: 100%;
  display: flex; align-items: stretch;
  border: none; background: transparent;
  padding: 0 0 0 140px;
  margin: 0;
}
#categories_container {
  flex: 1;
  display: flex; flex-wrap: nowrap; gap: 0;
  border-bottom: 1px solid var(--g-border);
  overflow-x: auto; scrollbar-width: none;
}
#categories_container::-webkit-scrollbar { display: none; }

button.category.category_button {
  display: flex; align-items: center;
  background: transparent; border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 13px; font-family: arial, sans-serif;
  color: var(--g-meta);
  cursor: pointer; white-space: nowrap;
  margin-bottom: -1px;
  transition: color .15s, border-bottom-color .15s;
}
button.category.category_button:hover {
  color: var(--g-text);
  border-bottom-color: var(--g-tab-hover-border);
}
button.category.category_button.selected {
  color: var(--g-tab-active);
  border-bottom-color: var(--g-tab-active);
}
.category_name { font-size: 13px; font-family: arial, sans-serif; }

/* ======================  TOOLS TOGGLE  ====================== */
/* Tools row: hidden by default, revealed when .tools-open is added by JS */
.search_filters {
  display: none;
  align-items: center;
  gap: 24px;
  padding: 8px 20px 8px 160px;
  background: var(--g-bg);
  border-bottom: 1px solid var(--g-border);
}
.search_filters.tools-open { display: flex; }

.search_filters select {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none;
  font-size: 13px; font-family: arial, sans-serif;
  color: var(--g-meta); cursor: pointer;
  padding: 4px 0; margin: 0;
  outline: none;
}
.search_filters select:hover { color: var(--g-text); }

/* Tools button injected by tools-toggle.js into the categories row */
.tools-toggle-btn {
  display: none; /* shown only on results page via below rule */
  flex-shrink: 0;
  align-items: center; gap: 3px;
  align-self: center;
  margin-left: 8px; margin-right: 0;
  padding-bottom: 10px;
  background: transparent; border: none;
  font-size: 13px; font-family: arial, sans-serif;
  color: var(--g-tools-color);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.tools-toggle-btn:hover { color: var(--g-text); }
.tools-toggle-btn .tools-chevron {
  display: inline-block;
  font-size: 9px;
  transition: transform .2s;
}
.tools-toggle-btn[aria-expanded="true"] .tools-chevron {
  transform: rotate(180deg);
}
.results_endpoint .tools-toggle-btn { display: inline-flex; }

/* ======================  RESULTS COLUMN  ====================== */
/* Flush left edge at exactly 160px — same as search bar  ✓
   !important overrides any residual center-alignment from base CSS  */
#results {
  display: block;
  max-width: 720px;
  margin: 0 0 0 160px !important;
  padding: 12px 0 0;
}

/* Sidebar: only show result count */
#sidebar {
  float: none !important; width: auto !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
#sidebar > *:not(#result_count) { display: none !important; }
#result_count { display: block; margin: 0 0 12px; }
#result_count small { font-size: 13px; color: var(--g-meta); font-style: normal; }

/* Corrections */
#corrections, .corrections { font-size: 14px; color: var(--g-snippet); margin: 0 0 16px; }
#corrections a, .corrections a { color: var(--g-link); text-decoration: none; }
#corrections a:hover, .corrections a:hover { text-decoration: underline; }

/* Results list */
#urls { display: block; }

/* Individual result — no card, no border, no shadow */
article.result {
  display: block;
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  margin-bottom: 28px; padding: 0 !important;
}

/* URL breadcrumb */
a.url_header { display: block; text-decoration: none !important; margin-bottom: 1px; }
.url_wrapper {
  display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: 14px; line-height: 1.5;
}

/* Domain + path breadcrumb: muted gray-green, same in light & dark */
.url_o1, .url_o1 .url_i1,
.url_o2, .url_o2 .url_i2,
.url_o3, .url_o3 .url_i3,
.url_o4, .url_o4 .url_i4 {
  color: var(--g-url) !important;
  font-style: normal !important;
  font-size: 14px;
}

/* Result title — 18px per spec */
article.result h3 {
  font-size: 18px; font-weight: 400; line-height: 1.3;
  margin: 0 0 3px; padding: 0; font-family: arial, sans-serif;
}
article.result h3 a,
article.result h3 a:link {
  color: var(--g-link) !important;
  text-decoration: none;
}
article.result h3 a:visited {
  color: var(--g-link-visited) !important;
}
article.result h3 a:hover { text-decoration: underline; }
article.result h3 .highlight { font-weight: 700; color: inherit; }

/* Snippet */
p.content {
  font-size: 14px; line-height: 1.58;
  color: var(--g-snippet);
  margin: 3px 0 0; padding: 0;
}
p.content .highlight, p.content em {
  font-style: normal; font-weight: 700;
  color: var(--g-snippet-bold);
}

/* Published date */
time.published_date {
  display: inline-block; font-size: 14px;
  color: var(--g-meta); margin-bottom: 2px;
}

/* Answer / calculator box */
#answers {
  background: var(--g-answer-bg);
  border: 1px solid var(--g-answer-border);
  border-radius: 8px; padding: 16px 20px;
  margin-bottom: 20px; font-size: 16px;
  color: var(--g-text); max-width: 600px;
}

/* ======================  IMAGES TAB  ====================== */
/* When image results are present, switch to full-width grid.
   :has(article.result-images) has specificity (1,1,1) which beats the base
   #results rule at (1,0,0), so no other rule needs touching.            */
#results:has(article.result-images) {
  margin-left: 0 !important;
  max-width: 100%;
  padding: 8px 16px 0;
}
#urls:has(article.result-images) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  padding: 0;
}
/* Each image card */
article.result.result-images {
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden;
}
article.result.result-images > a {
  display: block;
}
article.result.result-images img.image_thumbnail {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ======================  PAGINATION  ====================== */
/* Google-style: plain text links, no boxes, no borders */
#pagination {
  margin: 24px 0 56px;
  display: flex; align-items: center; justify-content: center;
}
.numbered_pagination { display: flex; align-items: center; gap: 4px; }

form.page_number, form.previous_page, form.next_page {
  display: inline-flex; margin: 0;
}
form.page_number > div, form.previous_page > div, form.next_page > div { display: flex; }

/* Page numbers: plain text, no box */
input.page_number, input.page_number_current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 36px; padding: 0 4px;
  font-size: 13px; font-family: arial, sans-serif;
  cursor: pointer;
  border: none; outline: none; box-shadow: none;
  background: transparent;
  color: var(--g-link);
  border-radius: 50%;
  transition: background .15s;
  -webkit-appearance: none; appearance: none;
}
input.page_number:hover {
  background: var(--g-page-hover-bg);
  text-decoration: underline;
}
/* Current page: bold, no click */
input.page_number_current {
  font-weight: 700;
  color: var(--g-page-current-color);
  pointer-events: none;
  background: transparent;
}

/* Prev / Next buttons: hide verbose text, show chevron only */
form.previous_page button,
form.next_page button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border: none; outline: none; box-shadow: none;
  background: transparent; cursor: pointer;
  border-radius: 50%;
  transition: background .15s;
  font-size: 0; color: transparent; /* hide original text */
}
form.previous_page button:hover,
form.next_page button:hover {
  background: var(--g-page-hover-bg);
}
form.previous_page button::after {
  content: '‹';
  font-size: 20px; font-weight: 300;
  color: var(--g-link);
  line-height: 1;
}
form.next_page button::after {
  content: '›';
  font-size: 20px; font-weight: 300;
  color: var(--g-link);
  line-height: 1;
}

/* ======================  FOOTER  ====================== */
footer {
  background: var(--g-footer-bg);
  border-top: 1px solid var(--g-border);
  padding: 14px 24px; font-size: 13px;
  color: var(--g-meta); flex-shrink: 0;
}
footer p { margin: 0; text-align: center; }
footer a { color: var(--g-meta); text-decoration: none; }
footer a:hover { text-decoration: underline; color: var(--g-text); }

/* Homepage footer: ghost-level quiet on the dark background */
.index_endpoint footer {
  opacity: 0.25;
  font-size: 11px;
  background: transparent !important;
  border-top-color: rgba(255,255,255,0.1) !important;
}

/* ======================  PREFERENCES PAGE  ====================== */
#preferences, .preferences_list {
  max-width: 740px; margin: 24px auto;
  padding: 0 24px; box-sizing: border-box;
}

/* ======================  DESKTOP (≥1200px)  ====================== */
@media (min-width: 1200px) {
  html, body { font-size: 14px; }
  article.result h3 { font-size: 18px; }
  #results { max-width: 720px; margin-left: 160px !important; }
  .results_endpoint #search_view { max-width: 620px; }
}

/* ======================  TABLET / NARROW (≤900px)  ====================== */
@media (max-width: 900px) {
  #results {
    /* Fix 2b: !important needed to beat the global margin:0 0 0 160px !important rule.
       Two !important rules at equal specificity: later source-order wins, so this
       media-query rule (later in file) correctly resets the left margin on tablet/mobile. */
    margin-left: 0 !important; max-width: 100%; padding: 12px 16px 0;
  }
  .results_endpoint #search_header { padding: 6px 16px 0; gap: 12px; }
  #search_logo { display: none; }
  /* With no logo, align tabs and filters to the left */
  #categories.search_categories { padding-left: 0; }
  .search_filters { padding-left: 16px; }
  .tools-toggle-btn { margin-right: 0; }
}

/* ======================  HIGH-SPECIFICITY BASE-CSS OVERRIDES  ====================== */
/* The base CSS uses two-ID selectors (#main_results #categories_container, etc.)
   with specificity ≥200. Our single-ID rules lose that fight without this section. */

/* Fix 3b: base CSS sets #categories_container to width:max-content (spec 200).
   If many tabs are present the container overflows #categories, which has
   overflow:scroll hidden (also spec 200) — creating a permanent scroll track.
   Match the specificity so our rules win (same spec, later source order). */
#main_results #categories_container,
#main_index  #categories_container {
  width: 100%;
  max-width: 100%;
}

/* Fix 3c: base CSS sets #categories to overflow:scroll hidden (spec 200), which
   always renders a scrollbar track even when content fits.
   Force overflow:hidden so the track vanishes on desktop. */
#main_results #categories.search_categories,
#main_index  #categories.search_categories {
  overflow: hidden;
}

/* ======================  MOBILE (≤430px — iPhone 17 Pro Max)  ====================== */
@media (max-width: 430px) {
  html, body { font-size: 15px; }

  /* Full-width search bar with 16px horizontal padding */
  .results_endpoint #search_view {
    flex: 1 1 auto;
    padding: 0 0 8px;
  }
  .search_box { padding: 0 10px 0 16px; }
  #q { font-size: 15px; padding: 12px 6px 12px 0; }

  /* Results: flush left with 16px margin */
  #results { padding: 8px 16px 0; }

  /* Category tabs: horizontally scrollable, no wrapping */
  #categories.search_categories { padding-left: 0; overflow: visible; }
  #categories_container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  button.category.category_button {
    padding: 10px 12px;
    flex-shrink: 0;
  }

  /* Filters row padding */
  .search_filters { padding-left: 16px; }

  /* Pagination: larger tap targets */
  input.page_number, input.page_number_current {
    min-width: 44px; height: 44px; font-size: 15px;
  }
  form.previous_page button,
  form.next_page button {
    min-width: 44px; height: 44px;
  }
  form.previous_page button::after,
  form.next_page button::after { font-size: 24px; }

  /* Homepage: ensure search bar stays padded */
  .index { padding: 0 16px; }
  .index_endpoint .search_box { border-radius: 24px; }
}