/**
 * FunnelWon SERP template — Google-style layout.
 */

/* Full-width main so SERP background (--fw-si-serp-bg) spans the theme content area; column lives on .fw-si-serp-inner.
   Top spacing is padding on main (not margin on inner) so the background paints the gap and margin-collapse does not show theme white. */
.fw-si-serp-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1em 0 0;
  box-sizing: border-box;
  /* Default solid white; --fw-si-serp-bg may be a hex or transparent (match theme). */
  background-color: var(--fw-si-serp-bg, #ffffff);
  /* Min-height for short pages: set by fw-si-serp-layout.js (measured vs viewport; no theme-specific guesses). */
}

.fw-si-serp-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 1em 1em 40px;
  box-sizing: border-box;
}

/* No default / accent focus rings inside SERP (tabs still use underline for active; links use hover underline where set). */
.fw-si-serp-main a:focus,
.fw-si-serp-main a:focus-visible,
.fw-si-serp-main button:focus,
.fw-si-serp-main button:focus-visible,
.fw-si-serp-main select:focus,
.fw-si-serp-main select:focus-visible,
.fw-si-serp-main input:focus,
.fw-si-serp-main input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Page title (h1) above search */
.fw-si-serp-page-title {
  margin: 0 0 1em;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--fw-si-serp-primary, #202124);
}

/* Search form — pill with X, divider, input, magnifying glass */
.fw-si-serp-search-form {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.5em;
  padding: 0;
}

.fw-si-serp-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fw-si-serp-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5em 0.75em;
  font-size: 16px;
  border: 1px solid var(--fw-si-serp-border, #dadce0);
  border-radius: 24px;
  background: var(--fw-si-serp-surface, #ffffff);
}

/* Keep the same border as unfocused — no accent ring around the whole pill + submit. */
.fw-si-serp-search-box:focus-within {
  border-color: var(--fw-si-serp-border, #dadce0);
  box-shadow: none;
}

.fw-si-serp-search-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.5em;
}

.fw-si-serp-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  margin-right: 0.5em;
  background: none;
  border: none;
  cursor: pointer;
  /* Icons: auto from Search Box / Tiles (surface) via inline --fw-si-serp-search-box-icon */
  color: var(--fw-si-serp-search-box-icon, var(--fw-si-serp-secondary, #5f6368));
}

.fw-si-serp-search-clear:hover {
  color: var(--fw-si-serp-search-box-icon-hover, var(--fw-si-serp-primary, #202124));
}

.fw-si-serp-search-divider {
  color: var(--fw-si-serp-border, #dadce0);
  font-size: 14px;
  user-select: none;
}

.fw-si-serp-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.35em 0;
  font-size: 16px;
  line-height: 1.5;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

/* type=search adds a native clear (X) on the right in WebKit/Blink; we already have .fw-si-serp-search-clear. */
.fw-si-serp-search-input::-webkit-search-cancel-button,
.fw-si-serp-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.fw-si-serp-search-input::-moz-search-clear {
  display: none;
}

.fw-si-serp-search-input:focus {
  outline: none;
}

.fw-si-serp-search-input::placeholder {
  color: var(--fw-si-serp-secondary, #9aa0a6);
}

.fw-si-serp-search-submit {
  flex-shrink: 0;
  padding: 0.35em;
  margin: 0;
  margin-left: 0.25em;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fw-si-serp-search-box-icon, var(--fw-si-serp-secondary, #5f6368));
}

.fw-si-serp-search-submit:hover {
  color: var(--fw-si-serp-search-box-icon-hover, var(--fw-si-serp-primary, #202124));
}

/* Search results heading + synonym */
.fw-si-serp-heading {
  margin: 0 0 0.25em;
  font-size: 14px;
  font-weight: 400;
  color: var(--fw-si-serp-primary, #202124);
  line-height: 1.4;
}

.fw-si-serp-heading-query {
  font-weight: 500;
}

.fw-si-serp-synonym-query,
.fw-si-serp-synonym-canonical {
  font-style: italic;
  color: var(--fw-si-serp-synonym, var(--fw-si-serp-secondary, #5f6368));
}

.fw-si-serp-result-count {
  margin: 0;
  font-size: 12px;
  color: var(--fw-si-serp-secondary, #5f6368);
}

.fw-si-serp-results-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

.fw-si-serp-results-meta-sep {
  color: var(--fw-si-serp-secondary, #5f6368);
  font-size: 12px;
}

.fw-si-serp-per-page-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--fw-si-serp-secondary, #5f6368);
  margin-left: auto;
}

.fw-si-serp-per-page-form select {
  min-width: 74px;
}

.fw-si-serp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 8px;
}

.fw-si-serp-pagination--inline {
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
}

.fw-si-serp-pagination-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 0;
  flex-wrap: wrap;
}

.fw-si-serp-pagination__link {
  color: var(--fw-si-serp-accent, #1a73e8);
  text-decoration: none;
  font-size: 13px;
}

.fw-si-serp-pagination__status {
  font-size: 13px;
  color: var(--fw-si-serp-secondary, #5f6368);
}


.fw-si-serp-spell-suggestion {
  font-size: 14px;
  color: var(--fw-si-serp-secondary, #5f6368);
  margin: 0.5em 0 0;
}

.fw-si-serp-spell-suggestion a {
  color: var(--fw-si-serp-link, #1a0dab);
}

.fw-si-serp-load-more-sentinel {
  width: 100%;
  height: 1px;
}

/* Tab bar (All, Images, Videos, Shopping) */
.fw-si-serp-tabs {
  border-bottom: 1px solid var(--fw-si-serp-border, #dadce0);
  margin: 1em 0 1.5em;
}

.fw-si-serp-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fw-si-serp-tab-item {
  margin: 0;
}

.fw-si-serp-tab-link {
  display: inline-block;
  padding: 0.75em 1.25em;
  color: var(--fw-si-serp-secondary, #5f6368);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.fw-si-serp-tab-link:hover {
  color: var(--fw-si-serp-primary, #202124);
}

.fw-si-serp-tab-link.fw-si-serp-tab-active {
  color: var(--fw-si-serp-accent, #1a73e8);
  font-weight: 500;
  border-bottom-color: var(--fw-si-serp-accent, #1a73e8);
}

/* Results */
.fw-si-serp-results {
  margin-top: 0.5em;
}

.fw-si-serp-result {
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--fw-si-serp-border, #eeeeee);
}

.fw-si-serp-result:last-child {
  border-bottom: none;
}

.fw-si-serp-result-thumb {
  display: block;
  margin-bottom: 0.5em;
}

/* Only images-grid (and generic grid) get fluid img; list view uses fixed 150×150 below */
.fw-si-serp-results--images-grid .fw-si-serp-result-thumb img,
.fw-si-serp-results--grid .fw-si-serp-result-thumb img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* List view (All tab): uniform thumb — fixed 150×150 container + center crop.
   Exclude grid, images-grid, and 404-recovery so 150px rules only apply to list view. */
.fw-si-serp-results:not(.fw-si-serp-results--grid):not(.fw-si-serp-results--images-grid):not(.fw-si-serp-results--shopping-grid):not(.fw-si-serp-results--404-recovery) .fw-si-serp-result-thumb {
  display: block !important;
  position: relative !important;
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  min-width: 150px !important;
  overflow: hidden;
  border-radius: 4px;
  background: var(--fw-si-serp-btn-muted, #f1f3f4);
  flex-shrink: 0;
  box-sizing: border-box;
}

.fw-si-serp-results:not(.fw-si-serp-results--grid):not(.fw-si-serp-results--images-grid):not(.fw-si-serp-results--shopping-grid):not(.fw-si-serp-results--404-recovery) .fw-si-serp-result-thumb img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  vertical-align: top;
}

.fw-si-serp-result-body {
  display: block;
}

/* Header: icon + title + URL */
.fw-si-serp-result-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75em;
  margin-bottom: 0.25em;
}

.fw-si-serp-result-icon {
  flex-shrink: 0;
}

.fw-si-serp-result-favicon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  vertical-align: middle;
}

/* Override theme/custom CSS that hides .search img — our SERP favicon and thumbnails must stay visible */
.search .fw-si-serp-result-favicon,
.search .fw-si-serp-result-icon img,
.search .fw-si-serp-result-thumb img {
  display: block !important;
  visibility: visible !important;
}

/* Force list-view thumb size inside .search so theme/WordPress cannot override */
.search .fw-si-serp-results:not(.fw-si-serp-results--grid):not(.fw-si-serp-results--images-grid):not(.fw-si-serp-results--shopping-grid):not(.fw-si-serp-results--404-recovery) .fw-si-serp-result-thumb {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  min-width: 150px !important;
}
.search .fw-si-serp-results:not(.fw-si-serp-results--grid):not(.fw-si-serp-results--images-grid):not(.fw-si-serp-results--shopping-grid):not(.fw-si-serp-results--404-recovery) .fw-si-serp-result-thumb img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.fw-si-serp-result-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--fw-si-serp-btn-muted, #e8eaed);
  border-radius: 4px;
}

.fw-si-serp-result-icon-placeholder svg {
  flex-shrink: 0;
}

.fw-si-serp-result-meta {
  flex: 1;
  min-width: 0;
}

.fw-si-serp-result-title {
  margin: 0 0 0.2em;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.3;
}

.fw-si-serp-result-title a {
  color: var(--fw-si-serp-link, #1a0dab) !important;
  text-decoration: none !important;
}

.fw-si-serp-result-title a:hover {
  text-decoration: underline !important;
}

.fw-si-serp-result-title a:focus,
.fw-si-serp-result-title a:focus-visible,
.fw-si-serp-result-title a:active {
  outline: none;
  text-decoration: underline !important;
}

.fw-si-serp-result-title--clamp-2 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fw-si-serp-result-url {
  font-size: 13px;
  color: var(--fw-si-serp-secondary, #5f6368);
  line-height: 1.4;
  display: flex;
  align-items: center;
  min-height: 1.5em;
}

/* Excerpt clamp by mode. JS binary-search truncates so "Read more" stays visible at end. */
.fw-si-excerpt {
  line-height: 1.4;
  max-height: calc(1.4em * 2);
  overflow: hidden;
  margin-top: 0.35em;
  font-size: 14px;
  color: var(--fw-si-serp-primary, #4d5156);
  box-sizing: border-box;
}

.fw-si-excerpt--short {
  max-height: calc(1.4em * 1);
}

.fw-si-excerpt--medium {
  max-height: calc(1.4em * 2);
}

.fw-si-excerpt--long {
  max-height: calc(1.4em * 4);
}

.fw-si-text {
  display: inline;
}

.fw-si-serp-meta-line {
  margin-top: 0.45em;
  font-size: 12px;
  color: var(--fw-si-serp-secondary, #5f6368);
  line-height: 1.4;
  text-transform: uppercase;
}

.fw-si-read-more {
  white-space: nowrap;
  font-weight: 500;
  margin-left: 0.25em;
  font-size: 14px;
  color: var(--fw-si-serp-link, #1a0dab) !important;
  text-decoration: none !important;
}

.fw-si-read-more:hover {
  text-decoration: underline !important;
}

.fw-si-read-more:focus,
.fw-si-read-more:focus-visible,
.fw-si-read-more:active {
  outline: none;
  text-decoration: underline !important;
}

/* URL display — breadcrumb style, full URL without protocol; single line with ellipsis */
.fw-si-serp-result-url--breadcrumb {
  min-width: 0;
}

.fw-si-serp-result-url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

a.fw-si-serp-result-url-text.fw-si-media-open {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

a.fw-si-serp-result-url-text.fw-si-media-open:hover,
a.fw-si-serp-result-url-text.fw-si-media-open:focus-visible {
  text-decoration: underline;
}

a.fw-si-serp-result-favicon-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Small type icon next to URL (All tab only) */
.fw-si-serp-result-type-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  vertical-align: middle;
  margin-right: 0.35em;
  color: var(--fw-si-serp-secondary, #5f6368);
}

.fw-si-serp-result-type-icon svg {
  flex-shrink: 0;
}


/* Grid layout (generic) — match images-grid cleaner style */
.fw-si-serp-results--grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 225px) !important;
  gap: 24px !important;
  justify-content: space-between;
  width: 100%;
}

.fw-si-serp-results--grid .fw-si-serp-result {
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--fw-si-serp-border, #d3d9e1);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.fw-si-serp-results--grid .fw-si-serp-result-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  min-height: 225px;
  overflow: hidden;
  background: var(--fw-si-serp-btn-muted, #f3f5f8);
  flex-shrink: 0;
  position: relative;
}

.fw-si-serp-results--grid .fw-si-serp-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fw-si-serp-results--grid .fw-si-serp-result--image .fw-si-serp-result-thumb img {
  object-fit: contain;
  object-position: center;
}

.fw-si-serp-results--grid .fw-si-serp-result-thumb .fw-si-serp-result-thumb-placeholder {
  object-fit: cover;
}

/* Grid logo fallback: keep logo contained and centered on gray background. */
.fw-si-serp-results--grid .fw-si-serp-result-thumb .fw-si-serp-result-thumb-logo,
.fw-si-serp-results--images-grid .fw-si-serp-result-thumb .fw-si-serp-result-thumb-logo,
.fw-si-serp-results--shopping-grid .fw-si-serp-result-thumb .fw-si-serp-result-thumb-logo {
  max-width: 90%;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}

.fw-si-serp-results--grid .fw-si-serp-result-body {
  padding: 0.75em;
  flex: 1;
  min-width: 0;
  background: var(--fw-si-serp-surface, #fafbfc);
}

.fw-si-serp-results--grid .fw-si-serp-result-header {
  margin-bottom: 0;
}

.fw-si-serp-results--grid .fw-si-serp-result-title {
  font-size: 0.95em;
  margin-bottom: 0.2em;
}

.fw-si-serp-results--grid .fw-si-serp-result-url {
  font-size: 11px;
}

.fw-si-serp-video-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.fw-si-serp-video-play-overlay::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  border-style: solid;
  border-width: 11px 0 11px 16px;
  border-color: transparent transparent transparent #fff;
}

/* Shopping tab — same card tile language as images/video grids (not a bare 3-col list). */
.fw-si-serp-results--shopping-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 225px) !important;
  gap: 24px !important;
  justify-content: space-between;
  width: 100%;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result {
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--fw-si-serp-border, #d3d9e1);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  min-height: 225px;
  overflow: hidden;
  background: var(--fw-si-serp-btn-muted, #f3f5f8);
  flex-shrink: 0;
  position: relative;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-thumb .fw-si-serp-result-thumb-placeholder {
  object-fit: cover;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-body {
  padding: 0.75em;
  flex: 1;
  min-width: 0;
  background: var(--fw-si-serp-surface, #fafbfc);
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-header {
  margin-bottom: 0;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-title {
  font-size: 0.95em;
  margin-bottom: 0.2em;
}

.fw-si-serp-results--shopping-grid .fw-si-serp-result-url {
  font-size: 11px;
}

.fw-si-serp-product-price {
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fw-si-serp-primary, #202124);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.fw-si-serp-product-actions {
  margin-top: 0.55em;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45em;
  align-items: center;
  justify-content: flex-start;
}

.fw-si-serp-product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 0.62em;
  border-radius: 6px;
  border: 1px solid var(--fw-si-serp-border, #d0d7de);
  background: var(--fw-si-serp-surface, #ffffff);
  color: var(--fw-si-serp-link, #1a0dab) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 500;
  margin-left: 0;
}

.fw-si-serp-product-btn--primary {
  background: #1a73e8;
  border-color: var(--fw-si-serp-accent, #1a73e8);
  color: #fff !important;
}

.fw-si-serp-product-btn--disabled {
  background: var(--fw-si-serp-btn-muted, #f1f3f4);
  border-color: var(--fw-si-serp-border, #dadce0);
  color: var(--fw-si-serp-secondary, #5f6368) !important;
  cursor: not-allowed;
}

/* Smart 404 recovery: 2 cols, wider/taller tiles, images fill width, max 6 (enforced in PHP) */
.fw-si-serp-main--404-recovery .fw-si-serp-results--grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 900px;
  margin: 0 auto;
}

.fw-si-serp-main--404-recovery .fw-si-serp-results--grid .fw-si-serp-result {
  min-height: 420px;
}

.fw-si-serp-main--404-recovery .fw-si-serp-results--grid .fw-si-serp-result-thumb {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 10;
  min-height: 180px;
}

.fw-si-serp-main--404-recovery .fw-si-serp-results--grid .fw-si-serp-result-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.fw-si-serp-main--404-recovery .fw-si-serp-results--grid .fw-si-serp-result-body {
  padding: 1em;
}

.fw-si-serp-main--404-recovery .fw-si-serp-results--grid .fw-si-serp-result-title {
  font-size: 1em;
  margin-bottom: 0.25em;
}

/* Smart 404 recovery keeps long-form excerpt visibility. */
.fw-si-serp-main--404-recovery .fw-si-excerpt {
  max-height: calc(1.4em * 4);
}

/* Images tab — grid: articles are direct children of .fw-si-serp-results (page template markup). */
.fw-si-serp-results.fw-si-serp-results--images-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 225px) !important;
  gap: 24px !important;
  justify-content: space-between;
  width: 100%;
}

.search .fw-si-serp-results.fw-si-serp-results--images-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 225px) !important;
  gap: 24px !important;
  justify-content: space-between;
  width: 100%;
}

/* Legacy: if .fw-si-serp-content ever wraps images (e.g. other template), same grid. */
.fw-si-serp-results--images-grid .fw-si-serp-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 225px) !important;
  gap: 24px !important;
  justify-content: space-between;
  width: 100%;
}

.search .fw-si-serp-results--images-grid .fw-si-serp-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 225px) !important;
  gap: 24px !important;
  justify-content: space-between;
  width: 100%;
}

/* Narrow/tablet: when cards drop to 2 columns, keep gap capped and centered. */
@media (max-width: 760px) {
  .fw-si-serp-results--grid,
  .fw-si-serp-results--shopping-grid,
  .fw-si-serp-results.fw-si-serp-results--images-grid,
  .search .fw-si-serp-results.fw-si-serp-results--images-grid,
  .fw-si-serp-results--images-grid .fw-si-serp-content,
  .search .fw-si-serp-results--images-grid .fw-si-serp-content {
    grid-template-columns: repeat(2, 225px) !important;
    justify-content: center !important;
    gap: 20px !important;
  }
}

/* API-0 / non-article direct child spans full width */
.fw-si-serp-results--images-grid .fw-si-serp-content > div:not([class^="fw-si-"]) {
  grid-column: 1 / -1;
}

.fw-si-serp-results--images-grid .fw-si-serp-result {
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--fw-si-serp-border, #d3d9e1);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  min-width: 0; /* allow grid item to respect column width */
  max-width: 100%;
}

/* Fixed 225×225 cell; full image visible (contain), letterboxing when not square */
.fw-si-serp-results--images-grid .fw-si-serp-result-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 225px;
  height: 225px;
  overflow: hidden;
  background: var(--fw-si-serp-btn-muted, #f3f5f8);
  flex-shrink: 0;
}

.fw-si-serp-results--images-grid .fw-si-serp-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.fw-si-serp-results--images-grid .fw-si-serp-result-body {
  padding: 0.75em;
  flex: 1;
  min-width: 0;
  background: var(--fw-si-serp-surface, #fafbfc);
}

.fw-si-serp-results--images-grid .fw-si-serp-result-header {
  margin-bottom: 0;
}

.fw-si-serp-results--images-grid .fw-si-serp-result-title {
  font-size: 0.95em;
  margin-bottom: 0.2em;
}

.fw-si-serp-results--images-grid .fw-si-serp-result-url {
  font-size: 11px;
}

.fw-si-serp-no-results {
  margin: 2em 0;
  padding: 2em;
  font-size: 18px;
  color: var(--fw-si-serp-primary, #202124);
  text-align: center;
  background: var(--fw-si-serp-surface, #f8f9fa);
  border-radius: 8px;
}

.fw-si-serp-api-0 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  position: relative !important;
  z-index: 2147483647 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 2em auto 1em !important;
  max-width: 800px;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--fw-si-serp-api-0-color, var(--fw-si-serp-secondary, #5f6368)) !important;
  pointer-events: auto !important;
}

.fw-si-serp-api-0--below {
  font-size: 12px !important;
  font-weight: 400 !important;
}

.fw-si-serp-api-0--under {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0.75em auto 1.25em !important;
}

/* API-0 links */
.fw-si-serp-content .fw-si-serp-api-0 a,
.fw-si-serp-main .fw-si-serp-api-0 a {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: var(--fw-si-serp-api-0-color, var(--fw-si-serp-secondary, #5f6368)) !important;
  text-decoration: none !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  position: static !important;
  transform: none !important;
  pointer-events: auto !important;
}

.fw-si-serp-content .fw-si-serp-api-0 a:hover,
.fw-si-serp-main .fw-si-serp-api-0 a:hover {
  text-decoration: underline !important;
}

/**
 * SERP content + API-0 — shared container.
 * Defensive !important prevents height:0, overflow:hidden, clip-path, position:absolute off-screen.
 */
.fw-si-serp-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #666 !important;
  height: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.fw-si-serp-content--images-grid {
  display: grid !important;
}

.fw-si-limit-warning {
  margin: 1em auto;
  max-width: 800px;
  padding: 12px 16px;
  background: #e7f3ff;
  border: 1px solid #2196f3;
  border-radius: 4px;
  font-size: 14px;
}

.fw-si-serp-content a {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
  overflow: visible !important;
  clip-path: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/* Result title and Read more stay link color despite .fw-si-serp-content a */
.fw-si-serp-content .fw-si-serp-result-title a,
.fw-si-serp-content .fw-si-read-more {
  color: var(--fw-si-serp-link, #1a0dab) !important;
  text-decoration: none !important;
}

.fw-si-serp-content .fw-si-serp-result-title a:hover,
.fw-si-serp-content .fw-si-read-more:hover {
  text-decoration: underline !important;
}

/* Mobile — full width, touch-friendly targets */
@media (max-width: 600px) {
  .fw-si-serp-main {
    padding-top: 0.75em;
  }

  .fw-si-serp-inner {
    padding: 0.75em 0.75em 40px;
  }

  .fw-si-serp-search-box {
    min-height: 44px;
  }

  .fw-si-serp-search-submit {
    min-width: 44px;
    min-height: 44px;
  }

  .fw-si-serp-result-title a {
    padding: 0.25em 0;
  }
}

/* SERP: ensure theme logo shows (some themes hide it for search); .fw-si-serp = FunnelWon SERP body class */
body.search.fw-si-serp .site-branding,
body.search.fw-si-serp .site-branding a,
body.search.fw-si-serp .site-branding img,
body.search.fw-si-serp .custom-logo,
body.search.fw-si-serp .site-logo,
body.search.fw-si-serp .site-logo img,
body.search.fw-si-serp .header-logo,
body.search.fw-si-serp .header-logo img,
body.search.fw-si-serp .logo img,
body.search.fw-si-serp #masthead .custom-logo,
body.search.fw-si-serp .site-header .custom-logo,
body.search.fw-si-serp header .custom-logo,
body.search.fw-si-serp header a[rel="home"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Media modal (Phase 1B: PDF/DOC/VIDEO/AUDIO). */
.fw-si-media-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}

.fw-si-media-modal.is-open {
  display: block;
}

.fw-si-media-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.fw-si-media-modal__dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 2rem));
  height: min(82vh, 780px);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.fw-si-media-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.fw-si-media-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.fw-si-media-modal__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fw-si-media-modal__toggle-size,
.fw-si-media-modal__close {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fw-si-media-modal__toggle-size svg {
  width: 18px;
  height: 18px;
}

.fw-si-media-modal__toggle-size .fw-si-media-modal__toggle-icon {
  width: 19px;
  height: 19px;
  display: block;
  pointer-events: none;
}

.fw-si-media-modal__close svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.fw-si-media-modal__body {
  flex: 1;
  min-height: 0;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-si-media-modal__iframe,
.fw-si-media-modal__video {
  width: 100%;
  height: 100%;
  border: 0;
}

.fw-si-media-modal__image {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.fw-si-media-modal__fallback {
  color: #f9fafb;
  text-align: center;
  padding: 1rem;
}

.fw-si-media-modal__fallback p {
  margin: 0 0 0.75rem;
}

.fw-si-media-modal__audio {
  width: min(860px, calc(100% - 2rem));
}

.fw-si-media-modal__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.fw-si-media-modal__variants {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-right: auto;
}

.fw-si-media-modal__variants-label {
  font-size: 0.75rem;
  color: #4b5563;
  margin-right: 0.25rem;
}

.fw-si-media-modal__variant-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.fw-si-media-modal__variant-btn.is-active {
  border-color: #2563eb;
  color: #2563eb;
}

.fw-si-media-modal__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  color: #111827;
  text-decoration: none;
  font-size: 0.875rem;
}

.fw-si-media-modal__action--primary {
  border-color: #2563eb;
  color: #fff;
  background: #2563eb;
}

.fw-si-media-modal.is-fullscreen .fw-si-media-modal__dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95vw;
  height: 95vh;
  max-width: none;
  max-height: none;
  border-radius: 10px;
}

body.fw-si-modal-open {
  overflow: hidden;
}

/* RTL overrides — flip physical horizontal margins/positions when dir="rtl" is set on <main>. */
[dir="rtl"].fw-si-serp-main .fw-si-serp-search-left {
  margin-right: 0;
  margin-left: 0.5em;
}

[dir="rtl"].fw-si-serp-main .fw-si-serp-search-clear {
  margin-right: 0;
  margin-left: 0.5em;
}

[dir="rtl"].fw-si-serp-main .fw-si-serp-search-submit {
  margin-left: 0;
  margin-right: 0.25em;
}

[dir="rtl"].fw-si-serp-main .fw-si-serp-per-page-form {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"].fw-si-serp-main .fw-si-read-more {
  margin-left: 0;
  margin-right: 0.25em;
}

[dir="rtl"].fw-si-serp-main .fw-si-serp-result-type-icon {
  margin-right: 0;
  margin-left: 0.35em;
}

/* List-view thumbnail img: flip absolute left → right */
[dir="rtl"].fw-si-serp-main .fw-si-serp-results:not(.fw-si-serp-results--grid):not(.fw-si-serp-results--images-grid):not(.fw-si-serp-results--shopping-grid):not(.fw-si-serp-results--404-recovery) .fw-si-serp-result-thumb img {
  left: auto !important;
  right: 0 !important;
}

[dir="rtl"].fw-si-serp-main.search .fw-si-serp-results:not(.fw-si-serp-results--grid):not(.fw-si-serp-results--images-grid):not(.fw-si-serp-results--shopping-grid):not(.fw-si-serp-results--404-recovery) .fw-si-serp-result-thumb img {
  left: auto !important;
  right: 0 !important;
}

/* Modal footer variants: flip auto-margin */
[dir="rtl"].fw-si-serp-main .fw-si-media-modal__variants {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"].fw-si-serp-main .fw-si-media-modal__variants-label {
  margin-right: 0;
  margin-left: 0.25rem;
}